soc_app/src/views/menu/training/components/personnelSignature.vue

<template>
  <div>
    <NavBar />
    <div class="bigbox">
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>培训主题</div>
          </van-col>
          <van-col :span="16">
            <div>{{ trainingData.title }}</div>
          </van-col>
        </van-row>
      </div>
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>单位名称</div>
          </van-col>
          <van-col :span="16">
            <div>{{ trainingData.orgName }}</div>
          </van-col>
        </van-row>
        <!-- <div class="label">单位名称</div>
        <div>{{ trainingData.orgName }}</div> -->
      </div>
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>培训类型</div>
          </van-col>
          <van-col :span="16">
            <div>{{ trainingData.typeText }}</div>
          </van-col>
        </van-row>
        <!-- <div class="label">培训类型</div>
        <div>{{ trainingData.typeText }}</div> -->
      </div>
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>培训开始时间</div>
          </van-col>
          <van-col :span="16">
            <div>{{ trainingData.trainingStartDateTime }}</div>
          </van-col>
        </van-row>
        <!-- <div class="label">培训开始时间</div>
        <div>{{ trainingData.trainingStartDateTime }}</div> -->
      </div>
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>培训结束时间</div>
          </van-col>
          <van-col :span="16">
            <div>{{ trainingData.trainingEndDateTime }}</div>
          </van-col>
        </van-row>
        <!-- <div class="label">培训结束时间</div>
        <div>{{ trainingData.trainingEndDateTime }}</div> -->
      </div>
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>主持人</div>
          </van-col>
          <van-col :span="16">
            <div>{{ trainingData.hostName }}</div>
          </van-col>
        </van-row>
        <!-- <div class="label">主持人</div>
        <div>{{ trainingData.hostName }}</div> -->
      </div>
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>记录人</div>
          </van-col>
          <van-col :span="16">
            <div>{{ trainingData.recorderName }}</div>
          </van-col>
        </van-row>
        <!-- <div class="label">记录人</div>
        <div>{{ trainingData.recorderName }}</div> -->
      </div>
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>培训资料</div>
          </van-col>
          <van-col :span="16" class="zl">
            <div v-for="item in studyList" :key="item.name">
              <van-tag type="primary" class="tagCls" plain @click="tagHandler(item)">{{ item.name }}</van-tag>
            </div>
          </van-col>
        </van-row>
        <!-- <p class="label labelPeople">培训资料</p>
        <div>
          <div v-for="item in studyList" :key="item.name">
            <van-tag type="primary" class="tagCls" plain @click="tagHandler(item)">{{ item.name }}</van-tag>
          </div>
        </div> -->
      </div>
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>培训内容</div>
          </van-col>
          <van-col :span="16">
            <div>{{ trainingData.content }}</div>
          </van-col>
        </van-row>
        <!-- <div class="label">培训内容</div>
        <div>{{ trainingData.content }}</div> -->
      </div>
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>总结</div>
          </van-col>
          <van-col :span="16">
            <div>{{ trainingData.note }}</div>
          </van-col>
        </van-row>
        <!-- <div class="label">总结</div>
        <div>{{ trainingData.note }}</div> -->
      </div>
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>地点</div>
          </van-col>
          <van-col :span="16">
            <div>{{ trainingData.site }}</div>
          </van-col>
        </van-row>
        <!-- <div class="label">总结</div>
        <div>{{ trainingData.note }}</div> -->
      </div>
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>参会人员</div>
          </van-col>
          <van-col :span="16">
            <div>{{ taskUserList }}</div>
          </van-col>
        </van-row>
        <!-- <div class="label">参与人员</div>
        <div>{{ taskUserList }}</div> -->
      </div>
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>缺席人员</div>
          </van-col>
          <van-col :span="16">
            <div>{{ qsUserList }}</div>
          </van-col>
        </van-row>
        <!-- <div class="label">缺席人员</div>
        <div>{{ qsUserList }}</div> -->
      </div>    
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>上传图片</div>
          </van-col>
          <van-col :span="16">
            <imgCom
              :width="'100'"
              :list="imgList"
              v-for="item in imgList"
              :key="item"
              :height="'100'"
              :zIndex="10000"
              :src="item"
            ></imgCom>
          </van-col>
        </van-row>
        <!-- <div class="label">上传图片</div> -->
      </div>
      <div class="mainItem" v-if="this.$route.params.id.split('_')[1] === 'info'">
        <van-row>
          <van-col :span="8" class="label">
            <div>参会人员签名</div>
          </van-col>
          <van-col :span="16">
            <template v-for="item in signUserList">
              <imgCom
                :width="'100'"
                v-if="item.signImage"
                :list="signUserListMap"
                :key="item.userId"
                :height="'100'"
                :zIndex="1"
                :src="item.signImage"
              ></imgCom>
            </template>
          </van-col>
        </van-row>
      </div>
    </div>
    <van-row v-if="this.$route.params.id.split('_')[1] === 'edit'">
      <van-col span="24" class="btns">
        <van-button type="info" class="btn" @click="signatureHandler">签名</van-button>
      </van-col>
    </van-row>
    <van-action-sheet v-model="show" title="签名" class="sheet">
      <writingPad ref="esign" :old-signature-seal="oldSignatureSeal" @resultImg="resultImg" @cancelSign="cancelSign"></writingPad>
    </van-action-sheet>

    <van-dialog v-model="confirmShow" title="引入签名" show-cancel-button @confirm="confirmSignImg">
<!--      <p class="text" style="margin-top: 10px;text-align: center">-->
<!--        {{ this.message }}-->
<!--      </p>-->
      <van-image :src="this_window + oldSignatureSeal" />
    </van-dialog>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
import writingPad from '@/components/writingPad/index.vue'
import { gettrainingInfo, signtrainingInfo } from '@/api/training.js'
import { upload } from '@/api/public'
import imgCom from '@/components/imgCom/index.vue'
import { base64ToBlob } from '@/utils/base64TurnImg.js'
import { userInfo } from '@/api/public.js'
import config from '@/config/index'
// import VuePdf from '@/components/pdfCom/index.vue'
export default {
  name: 'SocAppAddTraining',
  components: {
    NavBar,
    // VuePdf,
    imgCom,
    writingPad
  },
  data() {
    return {
      show: false,
      message:"是否引入个人签名？",
      confirmShow:false,
      this_window: process.env.NODE_ENV === 'development' ? '/dev' : window.origin,
      taskUserList: [], //参与人员
      qsUserList: [], //缺席人员
      imgList: [], //图片数组
      signUserList: [], //参与人员签名数组
      signUserListMap: [], //参与人员签名数组
      studyList: [], //学习资料数组
      trainingData: {}, //详情数据
      oldSignatureSeal:""
    }
  },
  created() {
    //获取详情信息
    gettrainingInfo(this.$route.params.id.split('_')[0]).then(res => {
      let { code, data, msg } = res
      if (code == 200) {
        this.trainingData = data

        if (this.trainingData.taskUserList && this.trainingData.taskUserList.length > 0) {
          this.trainingData.taskUserList.forEach(item => {
            if (item.type == 1) {
              this.taskUserList.push(item.userName)
            } else {
              this.qsUserList.push(item.userName)
            }
          })
        }

        this.taskUserList = this.taskUserList.join(',')

        this.qsUserList = this.qsUserList.join(',')

        this.signUserList = data.taskUserList || []
        if (data.taskUserList) {
          data.taskUserList.forEach(item=>{
            if (item.sign==1){
              this.signUserListMap.push(item.signImage)
            }
          })
          //this.signUserListMap = data.taskUserList.map(item => item.signImage) || []
        }

        let list = data.fileList || []
        if (list.length > 0) {
          list.forEach(item => {
            let i = JSON.parse(item)
            if (i.url.split('.')[1] == 'pdf') {
              i.type = 1
            } else {
              i.type = 0
            }
            this.studyList.push(i)
          })
        }
        if (this.trainingData.imageList) {
          this.imgList = this.trainingData.imageList.split(',') || []

        }
      }
    });
  },
  mounted() {
    this.oldSignatureSeal = JSON.parse(window.sessionStorage.getItem('SET_MASTER_SIGNATURE_SEAL')) + '';
  },

  methods: {
    signatureHandler() {
      this.show = true
    },
    clearHandler() {
      this.$refs.esign.handleReset()
    },
    submitHandler() {
      //console.log(this.file)
    },
    cancelSign()
    {
      this.show = false
    },
    confirmSignImg(){
      this.cancelSign();
      this.submitSign(this.oldSignatureSeal);
    },
    //上传签名图到服务器
    resultImg(img,oldImgUrl) {
      if (oldImgUrl !== "" && oldImgUrl !== null && oldImgUrl !== "null"){
        //this.submitSign(oldImgUrl)
        this.confirmShow =true;
        this.oldSignatureSeal = oldImgUrl;
      }else {
        let obj = base64ToBlob(img)
        let formData = new FormData()

        obj.name = '签名.jpg'
        formData.append('file', base64ToBlob(img))

        upload(formData, 'image')
          .then(res => {
            /*上传成功*/
            let imgUrl = process.env.NODE_ENV === 'development' ? res.data.url : res.data.url
            this.submitSign(imgUrl)

            // this.$emit("imgUrl", res.data.url);
          })
          .catch(err => {
            /*上传失败*/
          })
      }
    },
    //提交到后端数据
    submitSign(url) {
      signtrainingInfo({
        id: this.trainingData.id,
        signImage: url
      }).then(res => {
        this.$router.go(-1)
      })
    },
    tagHandler(i) {
      let str = i.name.split('.')[1]
      if (str == 'png' || str == 'jpg' || str == 'jpeg' || str == 'pdf') {
        //当前是图片||PDF
        this.openFilePreview(i)
      } else {
        const filePath = `${process.env.NODE_ENV === 'development' ? '/dev' : window.origin}${i.url}`
        const tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = filePath
        tempLink.setAttribute('download', i.name)
        tempLink.setAttribute('target', '_blank')
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.mainItem {
  // display: flex;
  font-size: 28px;
  white-space: pre-wrap;
  // align-items: center;
  // padding: 10px;
  width: 100%;
  // justify-content: space-between;
  // background-color: #fff;
}
.mainItemData {
  justify-content: end;
}
.tagCls {
}
.bigbox {
  margin: 20px;
  box-shadow: 0 8px 12px #ebedf0;
  background-color: #fff;
}
.van-col {
  text-align: justify;
  white-space: pre-wrap;
}
.btns {
  background-color: #fff;
  width: 100%;
}
.btn {
  width: 100%;
}
.sheet {
  height: 45%;
}
.van-row {
  // margin-top: -1px;
  border-bottom: 1px solid #ccc;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;

  .van-col--8 {
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(230, 230, 230, 0.4);
    opacity: 1;
    padding: 10px;
  }

  .zl {
    display: block !important;
    flex: none !important;
    padding-left: 10px;
  }
  .van-col--16 {
    min-height: 100px;
    display: flex;
    align-items: center;
    padding-left: 10px;

    background-color: #fff;
    padding: 10px;
    flex-flow: wrap;
    // opacity: 0.9;
  }
  .tagCls {
    margin-top: 10px;
  }
}
</style>