integrated_traffic_uniapp/pages/application/dangerous_options/index.vue

<template>
  <view>
    <cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true">
      <block slot="backText">返回</block>
      <block slot="content">安全措施</block>
    </cu-custom>
    <view class="form">
      <view class="wui-form-list">
        <uni-table border stripe >
          <!-- 表头行 -->
          <uni-tr>
            <uni-th align="center" style="font-weight: bold;">主要安全措施</uni-th>
            <uni-th align="center">
              <view class="title">操作</view>
            </uni-th>
          </uni-tr>

          <uni-tr >
            <uni-td>
              <view style="margin-bottom: 20upx;">
                {{measures}}
              </view>
            </uni-td>
            <uni-td align="center">
              <radio-group class="wui-radio-group wui-radio-col">
                <view class="group" style="margin-bottom: 10px">
                  <radio class='radio'  value="-1" :checked="STATUS=='-1'" @click="changeRadio('-1')">
                    <text class="wui-pl10">不涉及</text></radio>
                </view>
                <view class="group" style="margin-bottom: 10px">
                  <radio class='radio' value="1" :checked="STATUS=='1'" @click="changeRadio('1')">
                    <text class="wui-pl10">涉&nbsp;&nbsp;&nbsp;&nbsp;及</text></radio>
                </view>
              </radio-group>
            </uni-td>
          </uni-tr>
        </uni-table>

        <view class="cu-bar bg-white margin-top">
          <view class="action">
            上传图片
          </view>
          <view class="action">
            {{ imgList.length }}/2
          </view>
        </view>
        <view class="cu-form-group">
          <view class="grid col-4 grid-square flex-sub">
            <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="viewImage(index,'imgList')">
              <image :src="baseImgPath + item.filePath" mode="aspectFill"></image>
              <view class="cu-tag bg-red" @tap.stop="delImg" data-type="2" :data-index="index">
                <text class='cuIcon-close'></text>
              </view>
            </view>
            <view class="solids" @tap="chooseImage()" v-if="imgList.length<2">
              <text class='cuIcon-cameraadd'></text>
            </view>
          </view>
        </view>
        <view class="cu-form-group">
          <view class="title">签字：</view>
          <button class="cu-btn bg-green shadow" @tap="showModal" data-target="Modal">手写签字</button>
        </view>
        <view class="wui-sign-box" v-show="signImgList && signImgList.length > 0">
          <view class="sign-title">
            签字照片：
          </view>
          <view class="wui-sign-cotent">
            <view class="sign-img" v-for="(item,index) in signImgList" :key="index" @tap="viewImage(index,'signImgList')">
              <image v-if="item.filePath.indexOf('uploadFiles') > -1" :src="baseImgPath + item.filePath" mode="aspectFit"></image>
              <image v-else :src="item.filePath" mode="aspectFit"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="cu-bar btn-group" style="margin-top: 30upx;">
        <button :loading="buttonloading" class="cu-btn bg-blue margin-tb-sm lg"
                @click="$noMultipleClicks(goSubmit)">保存</button>
      </view>
      <view class="cu-modal" :class="modalName==='Modal'?'show':''">
        <writing-board @confirm="subCanvas" @cancel="hideModal"></writing-board>
      </view>
    </view>
  </view>
</template>

<script>
import {
  basePath,baseImgPath,loginUser
} from '@/common/tool.js';
import {setMeasures,getMeasures} from './index.js';
import {formatDate} from "@/common/tool";
import writingBoard from "@/components/writing-board/writing-board.vue"

export default {
  components: {
    writingBoard,
  },
  data() {
    return {
      baseImgPath:baseImgPath,
      measures:getMeasures(),
      STATUS:1,
      imgList: [],
      currentIndex: 0,
      modalName: null,
      signImgList: [],
      buttonloading: false,
      noClick: true,
    }
  },
  onLoad(event) {
    this.imgList = JSON.parse(event.imgList) || [];
    this.signImgList = JSON.parse(event.signImgList) || [];
    this.currentIndex = event.index || 0;
    this.STATUS = event.STATUS || 1;
  },
  methods: {
    changeRadio(value){
      this.STATUS=value
    },
    viewImage(index,list) {
      let files = this[list].map(item => item.filePath);
      uni.previewImage({
        urls: baseImgPath + files,
        current: index
      });
    },
    delImg(e) {
      var _this = this;
      uni.showModal({
        title: '秦安双控',
        content: '确定要删除这张图片吗？',
        cancelColor: "#000000",
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            uni.request({
              url: basePath+'/app/eightwork/deleteFile',
              method: 'POST',
              dataType: 'json',
              header: {
                'Content-type':'application/x-www-form-urlencoded'
              },
              data: {
                FILE_PATH:_this.imgList[e.currentTarget.dataset.index].filePath
              },
              success: (res) => {
                uni.showToast({
                  icon: 'none',
                  title: '删除成功',
                  duration: 1500
                });
                this.imgList.splice(e.currentTarget.dataset.index, 1)
              },
              fail: (err) => {
                uni.showModal({
                  content: "删除失败",
                  showCancel: false
                });
              }
            })
          }
        }
      })
    },
    chooseImage() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera', 'album'], //从相册选择
        success: (res) => {
          uni.uploadFile({
            url: basePath+'/app/eightwork/saveFile',
            filePath: res.tempFilePaths[0],
            name: 'file',
            formData: {
              CORPINFO_ID:loginUser.CORPINFO_ID,
            },
            success: ({data}) => {
              let img = {};
              img.filePath = JSON.parse(data).FILE_PATH;
              this.imgList.push(img)
            },
            fail: (err) => {
              uni.showModal({
                content: "图片上传失败",
                showCancel: false
              });
            }
          })
        }
      });
    },
    showModal(e) {
      this.modalName = e.currentTarget.dataset.target
    },
    hideModal(e) {
      this.modalName = null
    },
    //完成
    subCanvas(e) {
      this.signImgList.splice(0, this.signImgList.length);
      this.signImgList.push({
        SIGNER_TIME: formatDate(new Date(), 'yyyy-MM-dd hh:mm'),
        filePath: e.filePath
      });
      this.hideModal()
    },
    goSubmit() {
      if(this.buttonloading) return;
      if(this.signImgList.length === 0) {
        uni.showToast({
          title: '请签字',
          icon: 'none'
        });
        return;
      }

      if(this.signImgList[0].filePath.indexOf('uploadFiles') > -1){
        uni.$emit('dangerous_options_submit', {
          imgList: this.imgList,
          signImgList: this.signImgList,
          index: this.currentIndex,
          STATUS: this.STATUS
        });
        this.goback()
      }else{
        uni.uploadFile({
          url: basePath+'/app/eightwork/saveFile',
          filePath: this.signImgList[0].filePath,
          name: 'file',
          formData: {
            CORPINFO_ID:loginUser.CORPINFO_ID,
          },
          success: ({data}) => {
            this.signImgList[0].filePath = JSON.parse(data).FILE_PATH;
            this.buttonloading = true;
            setMeasures("")
            uni.$emit('dangerous_options_submit', {
              imgList: this.imgList,
              signImgList: this.signImgList,
              index: this.currentIndex,
              STATUS: this.STATUS
            });
            this.goback()
          },
          fail: (err) => {
            uni.showModal({
              content: "图片上传失败",
              showCancel: false
            });
          }
        })
      }
    },
    goback(){
      uni.navigateBack({delta: 1});
    },
  },
}
</script>

<style scoped>

</style>