soc_app/src/views/menu/rehearsalTask/components/rehearsalTaskSign.vue

<template>
  <div>
    <NavBar :go="{ type: 'push', path: goBack }" />
    <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>

      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>演练开始时间</div>
          </van-col>
          <van-col :span="16">
            <div>{{ trainingData.drillStartTime }}</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.drillEndTime }}</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.drillSite }}</div>
          </van-col>
        </van-row>
      </div>
      <!-- <div class="mainItem">
      <div class="label">演练类型</div>
      <div>{{ trainingData.categoryText }}</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>
      </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>
      <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>
      <div class="mainItem">
        <van-row>
          <van-col :span="8" class="label">
            <div>预设案由</div>
          </van-col>
          <van-col :span="16">
            <div>{{ trainingData.presetCase }}</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.drillSituation }}</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.comment }}</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>{{ taskUserList }}</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>{{ qsUserList }}</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">
            <imgCom
              :width="'100'"
              v-for="item in imgList"
              :list="imgList"
              :key="item"
              :height="'100'"
              :src="item"
            ></imgCom>
          </van-col>
        </van-row>
      </div>
      <div class="mainItem" v-if="peopleShow">
        <van-row>
          <van-col :span="8" class="label">
            <div>参与人员签名图片</div>
          </van-col>
          <van-col :span="16">
            <!-- signUserList -->
            <template v-for="item in signUserList">
              <imgCom
                :width="'100'"
                v-if="item.signImage"
                :list="signUserListMap"
                :key="item.userId"
                :height="'100'"
                :src="item.signImage"
              ></imgCom>
            </template>
          </van-col>
        </van-row>

      </div>
      <div class="mainItem" v-if="evaluate">
        <van-row>
          <van-col :span="8" class="label">
            <div>评分</div>
          </van-col>
          <van-col :span="16">
            <van-rate :disabled="disabledShow" v-model="value" :count="10" />
          </van-col>
        </van-row>

      </div>

      <div class="mainItem" v-if="disabledShow">
        <van-row>
          <van-col :span="8" class="label">
            <div>评分</div>
          </van-col>
          <van-col :span="16">
            {{ value }}分
          </van-col>
        </van-row>
       
      </div>

      <div class="mainItem" v-if="islearning">
        <van-row>
          <van-col :span="8" class="label">
            <div>评优状态</div>
          </van-col>
          <van-col :span="16">
            {{ trainingData.recStatusText }}分
          </van-col>
        </van-row>
     
      </div>
      <div class="mainItem" v-if="$route.params.id.split('_')[1] === 'comment'">
        <van-row >
          <van-col :span="24" class="label bgc" >
            
            <van-checkbox-group v-model="result" direction="horizontal" @change="clickChekcBox($event)">
            <van-checkbox
              v-for="item in resultList"
              :key="item.value"
              :disabled="item.disabled"
              shape="square"
              :checked="item.checked"
              :name="item.value"
              >{{ item.name }}</van-checkbox
            >
          </van-checkbox-group>
          </van-col>
         
        </van-row>
       
      </div>
    </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-button
          type="info"
          class="btn"
          v-if="this.$route.params.id.split('_')[1] === 'evaluate' || this.$route.params.id.split('_')[1] === 'comment'"
          @click="submitHandler"
          >提交</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 { getrehearsalInfo, singrehearsalTask, drillSignInfo } from '@/api/drillTask.js'
import { submitRecTask } from '@/api/optimalLearning.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 { Toast, Dialog } from 'vant'
import VuePdf from '@/components/pdfCom/index.vue'
export default {
  name: 'SocAppAddTraining',
  components: {
    NavBar,
    Dialog,
    Toast,
    VuePdf,
    imgCom,
    writingPad
  },
  data() {
    return {
      result: [],
      orgType: '', //机构类型
      content: '', //评语
      value: 0, //评分
      this_window: window,
      show: false,
      resultList: [],
      taskUserList: [], //参与人员
      qsUserList: [], //缺席人员
      imgList: [], //图片数组
      signUserList: [], //参与人员签名数组
      signUserListMap: [], //参与人员签名数组Map
      studyList: [], //学习资料数组
      trainingData: {} //详情数据
    }
  },
  computed: {
    goBack() {
      if (
        this.$route.params.id.split('_')[1] === 'evaluate' ||
        this.$route.params.id.split('_')[1] === 'edit' ||
        this.$route.params.id.split('_')[1] === 'info'
      ) {
        return '/rehearsalTask'
      } else if (this.$route.params.id.split('_')[1] === 'comment') {
        return '/rehearsaloptimal'
      } else if (this.$route.params.id.split('_')[1] === 'learning') {
        return '/rehearsallearning'
      } else if (this.$route.params.id.split('_')[1] === 'info1') {
        return '/rehearsaloptimal'
      }
    },
    evaluate() {
      if (this.$route.params.id.split('_')[1] === 'evaluate') {
        return true
      } else {
        return false
      }
    },

    disabledShow() {
      if (
        this.$route.params.id.split('_')[1] === 'info' ||
        this.$route.params.id.split('_')[1] === 'info1' ||
        this.$route.params.id.split('_')[1] === 'comment' ||
        this.$route.params.id.split('_')[1] === 'learning'
      ) {
        return true
      } else {
        return false
      }
    },
    islearning() {
      if (this.$route.params.id.split('_')[1] === 'learning') {
        return true
      } else {
        return false
      }
    },
    peopleShow() {
      if (
        this.$route.params.id.split('_')[1] === 'info' ||
        this.$route.params.id.split('_')[1] === 'info1' ||
        this.$route.params.id.split('_')[1] === 'comment' ||
        this.$route.params.id.split('_')[1] === 'learning'
      ) {
        return true
      } else {
        return false
      }
    }
  },
  created() {
    //获取详情信息
    getrehearsalInfo(this.$route.params.id.split('_')[0]).then(res => {
      let { code, data, msg } = res
      if (code == 200) {
        this.content = data.comment
        this.value = +data.commentScore
        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) {
          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(',') || []
        }
        //获取当前登录人机构类型
        this.orgType = window.sessionStorage.getItem('SET_USER_ORGTYPE')
        console.log(this.orgType, 'this.orgType')
        if (this.orgType == 1) {
          //省联社
          this.resultList = [
            {
              name: '设置为省级优秀案例',
              value: 5,

              disabled: false
            }
          ]
          if (data.recStatus == 5) {
            this.result = [5]
          }
        } else if (this.orgType == 2) {
          //办事处
          this.resultList = [
            {
              name: '设置为地区优秀案例',
              value: 3,

              disabled: false
            },
            {
              name: '推荐为省级优秀案例',
              value: 4,

              disabled: true
            }
          ]
          if (data.recStatus == 4) {
            this.result = [3, 4]
          } else if (data.recStatus == 3) {
            this.result = [3]
          }
        } else if (this.orgType == 3) {
          //行社
          this.resultList = [
            {
              name: '设置为行社优秀案例',
              value: 1,

              disabled: false
            },
            {
              name: '推荐为地区优秀案例',
              value: 2,

              disabled: true
            }
          ]
          if (data.recStatus == 2) {
            this.result = [1, 2]
          } else if (data.recStatus == 1) {
            this.result = [1]
          }
        }
      }
    })
  },
  mounted() {},

  methods: {
    disabledCheck(item) {
      if (item == 'false') return false
      if (item == 'true') return true
      //当前是最后一个复选框禁用
      if (this.resultList.length > 1 && item.value == this.resultList[this.resultList.length - 1].value) {
        return true
      } else {
        return false
      }
    },
    clickChekcBox(v) {
      console.log(v)
      console.log(this.resultList[0])
      if (v[0] == this.resultList[0].value) {
        if (this.resultList[1]) {
          this.resultList[1].disabled = this.disabledCheck('false')
        }
        // if(v.length>1){
        //   this.result=[]
        // }
        // this.resultList[1].checked = this.disabledCheck('false')
      } else if (v[0] > this.resultList[0].value) {
        this.result = []
      } else {
        this.resultList[1].disabled = this.disabledCheck('true')

        // this.result=[]
      }
    },
    signatureHandler() {
      this.show = true
    },
    //评价提交
    submitHandler() {
      //判断当前是评价 还是评价推优
      if (this.$route.params.id.split('_')[1] === 'evaluate') {
        //评价
        if (this.value == 0) {
          //评分不能为0分
          Toast('评分不能为0分')
          return
        }

        Dialog.confirm({
          title: '',
          message: `是否提交评价?`
        })
          .then(() => {
            drillSignInfo({
              taskId: this.trainingData.id,
              // type: this.trainingData.type,
              score: this.value,
              comment: this.content
            }).then(res => {
              let { code, msg } = res
              if (code == 200) {
                Toast('评价成功')
                setTimeout(() => {
                  this.$router.push('/rehearsalTask')
                }, 1000)
              } else {
                Toast(msg)
              }
            })
          })
          .catch(() => {
            // on cancel
          })
      } else {
        //评价推优

        submitRecTask({
          drillTaskId: this.trainingData.id,
          recStatus: Math.max(...this.result)
        }).then(res => {
          if (this.result && this.result.length > 0) {
            Toast('评优成功')
          } else {
            Toast('取消成功')
          }
          setTimeout(() => {
            this.$router.push('/rehearsaloptimal')
          }, 1000)
        })
      }
    },
    clearHandler() {
      this.$refs.esign.handleReset()
    },

    //上传签名图到服务器
    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 => {
          /*上传失败*/
        })
    },
    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)
      }
    },
    //提交到后端数据
    submitSign(url) {
      singrehearsalTask({
        id: this.trainingData.id,
        signImage: url
      }).then(res => {
        this.$router.push('/rehearsalTask')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mainItem {
  font-size: 28px;
  width: 100%;
 
}
.mainItemData {
  justify-content: end;
}
.bigbox {
  margin: 20px;
  box-shadow: 0 8px 12px #ebedf0;
}
.tagCls {
  margin-bottom: 20px;
  margin-left: 10px;
}
.btns {
  background-color: #fff;
  width: 100%;
}
.btn {
  width: 100%;
}
.sheet {
  height: 45%;
}

.van-row {
  background-color: #d7d7d7;
  display: flex;
  align-items: center;
  margin-top: -1px;
  border: 1px solid #ccc;
  .van-col--8 {
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
  .van-col{
    text-align: justify;
  white-space: pre-wrap;
  }
  .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;
  }
  .tagCls {
    margin-top: 10px;
  }
  .bgc{
    background-color: #fff;
    padding: 10px;
  }
}
</style>