sx_yjb_app/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 wui-sign-box1" 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 class="cu-tag bg-red" @tap.stop="DelImg(index)">
                <text class='cuIcon-close'></text>
              </view>
            </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 v-if="modalName =='Modal'" :signShow="modalName =='Modal'" @confirm="subCanvas"
                       @cancel="hideModal"/>
      </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/horizontal-writing-board/writing-board.vue"

export default {
  components: {
    writingBoard,
  },
  data() {
    return {
      baseImgPath: baseImgPath,
      measures: getMeasures(),
      STATUS: 1,
      imgList: [],
      currentIndex: 0,
      modalName: null,
      signImgList: [],
      defaultImgList: [],
      tempList: [],
      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;
  },
  onShow(options) {
    this.getImgData();
  },
  methods: {
    getImgData() {
      var _this = this;
      uni.showLoading({
        title: '请稍候'
      })
      uni.request({
        url: basePath + '/app/user/geUserInfoSign',
        method: 'POST',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          CORPINFO_ID:loginUser.CORPINFO_ID,
          USER_ID:loginUser.USER_ID,
        },
        success: (res) => {
          if ("success" == res.data.result) {
            uni.hideLoading();
            if(res.data.IMGURL
                && res.data.IMGURL != ''
                && res.data.IMGURL != undefined
                && res.data.IMGURL != 'undefined'){
              var initImg = {}
              initImg.filePath = res.data.IMGURL
              _this.defaultImgList.push(initImg)
            }

          } else if ("exception" == data.result) {
            uni.showToast({
              title: '错误',
              duration: 2000
            });
          }
        }
      });
    },
    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: 2 - this.imgList.length, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera', 'album'], //从相册选择
        success: (res) => {
          for (var i = 0; i < res.tempFilePaths.length; i++){
            uni.uploadFile({
              url: basePath + '/app/eightwork/saveFile',
              filePath: res.tempFilePaths[i],
              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) {
      var _this = this;
      if (_this.defaultImgList.length == 0){
        uni.navigateTo({
          url: '/pages/my/updateSignature/index'
        })
      }else {
        uni.showModal({
          title: '新泰安全',
          content: '确定要使用设置的签字图片吗？',
          cancelColor: "#000000",
          cancelText: '取消',
          confirmText: '确定',
          success: res => {
            if (res.confirm) {
              _this.signImgList.push(_this.defaultImgList[0])
            }else {
              _this.modalName = e.currentTarget.dataset.target
            }
          }
        })
      }
    },
    hideModal(e) {
      this.modalName = null
    },
    DelImg(index) {
      uni.showModal({
        title: '新泰安全',
        content: '确定要删除这张签字吗？',
        cancelColor: "#000000",
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            this.signImgList.splice(index, 1)
          }
        }
      })
    },
    //完成
    subCanvas(e) {
      console.log('里层' + 'subCanvas')
      this.signImgList.push({
        SIGNER_TIME: formatDate(new Date(), 'yyyy-MM-dd hh:mm'),
        filePath: e.tempFile
      });
      this.hideModal()
    },
    goSubmit() {
      // return;
      this.tempList = []
      if (this.buttonloading) return;
      if (this.signImgList.length === 0) {
        uni.showToast({
          title: '请签字',
          icon: 'none'
        });
        return;
      }
      // 先判断这个有没有 上传过 没有上传过
      for (let j = 0; j < this.signImgList.length; j++) {
        // 没上传过
        if (!this.signImgList[j].filePath.includes('uploadFiles')) {
          this.signImgList[j].key = j
          var img = {}
          img.name = 'file' + j
          img.uri = this.signImgList[j].filePath
          img.key = 'file' + j
          this.tempList.push(img)
        }
      }
      if (this.tempList.length !== 0) {
        uni.uploadFile({
          url: basePath + '/app/eightwork/saveDangerousOptionsFile',
          files: this.tempList,
          formData: {
            CORPINFO_ID: loginUser.CORPINFO_ID,
          },
          success: ({data}) => {
            let tem = JSON.parse(data).FILE_PATH_LIST
            this.signImgList.forEach(item => {
              for (let i = 0; i < tem.length; i++) {
                if ('file' + item.key == tem[i].key) {
                  item.filePath = tem[i].filePath
                }
              }
            })
            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
            });
          }
        })
      } else {
        uni.$emit('dangerous_options_submit', {
          imgList: this.imgList,
          signImgList: this.signImgList,
          index: this.currentIndex,
          STATUS: this.STATUS
        });
        this.goback()
      }
      //
      // 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 {
      //   for (let i = 0; i < this.signImgList.length; i++) {
      //     this.signImgList[i].key = i
      //     var img = {}
      //     img.name = 'file' + i
      //     img.uri = this.signImgList[i].filePath
      //     img.key = 'file' + i
      //     this.tempList.push(img)
      //   }
      //   uni.uploadFile({
      //     url: basePath + '/app/eightwork/saveDangerousOptionsFile',
      //     files: this.tempList,
      //     formData: {
      //       CORPINFO_ID: loginUser.CORPINFO_ID,
      //     },
      //     success: ({data}) => {
      //       let tem = JSON.parse(data).FILE_PATH_LIST
      //       this.signImgList.forEach(item => {
      //         for (let i = 0; i < tem.length; i++) {
      //           if ('file' + item.key == tem[i].key) {
      //             item.filePath = tem[i].filePath
      //           }
      //         }
      //       })
      //       this.buttonloading = true;
      //       setMeasures("")
      //       uni.$emit('dangerous_options_submit', {
      //         imgList: this.imgList,
      //         signImgList: this.signImgList,
      //         index: this.currentIndex,
      //         STATUS: this.STATUS
      //       });
      //       console.log(this.signImgList)
      //       this.goback()
      //     },
      //     fail: (err) => {
      //       console.log(err)
      //       uni.showModal({
      //         content: "图片上传失败",
      //         showCancel: false
      //       });
      //     }
      //   })
      // }
    },
    goback() {
      uni.navigateBack({delta: 1});
    },
  },
}
</script>

<style>
.wui-sign-box1 {
  margin-top: 20upx;
  display: block;
}

.sign-img {
  position: relative;
  border-bottom: 1px dashed #eee;
  padding-top: 20upx;
}

.cu-tag {
  position: absolute;
  right: 20upx;
  top: 20upx;
}
</style>