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

<template>
  <div>
    <NavBar :go="{ type: 'push', path: '/training' }" />

    <div class="mainItem">
      <div class="label">标题</div>
      <div>{{ trainingData?.title }}</div>
    </div>
    <div class="mainItem">
      <div class="label">单位名称</div>
      <div>{{ trainingData?.orgName }}</div>
    </div>
    <div class="mainItem">
      <div class="label">培训类型</div>
      <div>{{ trainingData?.typeText }}</div>
    </div>
    <div class="mainItem">
      <div class="label">培训开始时间</div>
      <div>{{ trainingData?.trainingStartDateTime }}</div>
    </div>
    <div class="mainItem">
      <div class="label">培训结束时间</div>
      <div>{{ trainingData?.trainingEndDateTime }}</div>
    </div>
    <div class="mainItem">
      <div class="label">主持人</div>
      <div>{{ trainingData?.hostName }}</div>
    </div>
    <div class="mainItem">
      <div class="label">记录人</div>
      <div>{{ trainingData?.recorderName }}</div>
    </div>
    <div class="mainItem">
      
      <div class="label labelPeople">培训资料</div>
      <template v-for="item in studyList">
        <div :key="item.url" class="imglIST" style="{width:'100px',height: '100px';}">

          <imgCom :width="'100'" v-if="this_window.origin+item.url&&item.type==0"  :height="'100'" :src="this_window.origin+item.url"></imgCom>
          <!-- <VuePdf v-else :src="this_window.origin+item.url"></VuePdf> -->
          <VuePdf v-else  :src="this_window.origin+'/statics/2023/09/14/20230914210939A064.pdf'"></VuePdf>
        </div>
      </template>
    </div>
    <div class="mainItem">
      <div class="label">培训内容</div>
      <div>{{ trainingData?.content }}</div>
    </div>
    <div class="mainItem">
      <div class="label">总结</div>
      <div>{{ trainingData?.note }}</div>
    </div>
    <div class="mainItem">
      <div class="label">参与人员</div>
      <div>{{ taskUserList }}</div>
    </div>
    <div class="mainItem">
      <div class="label">缺席人员</div>
      <div>{{ qsUserList }}</div>
    </div>
    <div class="mainItem">
      <div class="label">上传图片</div>

      <imgCom :width="'100'" v-for="item in imgList" :key="item" :height="'100'" :src="item"></imgCom>
    </div>
    <div class="mainItem" v-if="this.$route.params.id.split('_')[1] === 'info'">
      <div class="label labelPeople">参与人员签名图片</div>
      <template v-for="item in signUserList">
        <imgCom :width="'100'" v-if="item.signImage" :key="item.userId" :height="'100'" :src="item.signImage"></imgCom>
      </template>
    </div>
    <van-row>
      <van-col span="24" class="btns">
        <van-button
          type="info"
          class="btn"
          v-if="this.$route.params.id.split('_')[1] === 'edit'"
          @click="signatureHandler"
          >签名</van-button
        >
      </van-col>
    </van-row>
    <van-action-sheet v-model="show" title="签署名字" class="sheet">
      <writingPad ref="esign" @resultImg="resultImg"></writingPad>
    </van-action-sheet>
  </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 config from '@/config/index'
import VuePdf from "vue-pdf"
export default {
  name: 'SocAppAddTraining',
  components: {
    NavBar,
    VuePdf,
    imgCom,
    writingPad
  },
  data() {
    return {
      this_window:window,
      show: false,
      taskUserList: [], //参与人员
      qsUserList: [], //缺席人员
      imgList: [], //图片数组
      signUserList: [], //参与人员签名数组
      studyList: [], //学习资料数组
      trainingData: {} //详情数据
    }
  },
  created() {
    //获取详情信息
    gettrainingInfo(this.$route.params.id.split('_')[0]).then(res => {
      let { code, data, msg } = res
      if (code == 200) {
        this.trainingData = data
        this.trainingData?.taskUserList?.map(item => {
          if (item.type == 1) {
            this.taskUserList.push(item.userName)
          }
        })
        this.taskUserList = this.taskUserList.join(',')
        this.trainingData?.taskUserList?.map(item => {
          if (item.type == 2) {
            this.qsUserList.push(item.userName)
          }
        })
        this.qsUserList = this.qsUserList.join(',')
        this.signUserList = data.taskUserList || []
        let list = data.fileList || []
        if (list.length > 0) {
          list.forEach(item => {
           let i=JSON.parse(item)
           console.log(i);
            if(i.url.split('.')[1]=='pdf'){
              i.type=1
            }else{
              i.type=0
            }
            this.studyList.push(i)
          })
        }
        
        this.imgList = this.trainingData?.imageList?.split(',') || []
      }
    })
  },
  mounted() {},

  methods: {
    signatureHandler() {
      this.show = true
    },
    clearHandler() {
      this.$refs.esign.handleReset()
    },
    submitHandler() {
      console.log(this.file)
    },
    //上传签名图到服务器
    resultImg(img) {
      let obj = base64ToBlob(img)
      let formData = new FormData()

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

      upload(formData, 'image')
        .then(res => {
          console.log(process.env.NODE_ENV)
          /*上传成功*/
          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.push('/training')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mainItem {
  display: flex;
  font-size: 28px;
  padding: 34px;
  justify-content: space-between;
  background-color: #fff;
  overflow: scroll;
  div {
    flex: 1;
    text-align: right;
  }
  .label {
    width: 200px;
    flex: none;
    text-align: left;
  }
  .labelPeople {
    width: 300px;
  }
}
.btns {
  background-color: #fff;
  width: 100%;
}
.btn {
  width: 100%;
}
.sheet {
  height: 45%;
}
</style>