soc_app/src/views/menu/rehearsalTask/components/rehearsalTaskSign.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>

      <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
              v-if="item.signImage"
                :width="'100'"
                :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 checkBoxList"
                :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" :old-signature-seal="oldSignatureSeal" @resultImg="resultImg" @cancelSign="cancelSign"></writingPad>
    </van-action-sheet>
    <van-dialog v-model="confirmShow" title="引入签名" show-cancel-button @confirm="confirmSignImg">
      <van-image :src="this_window + oldSignatureSeal" />
    </van-dialog>
  </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: '', //机构类型
      activeTab:null, // 当前推优活动的Tab
      content: '', //评语
      value: 0, //评分
      confirmShow:false,
      this_window: process.env.NODE_ENV === 'development' ? '/dev' : window.origin,
      show: false,
      checkBoxList: [],
      taskUserList: [], //参演人员
      qsUserList: [], //缺席人员
      imgList: [

      ], //图片数组
      signUserList: [
      ], //参演人员签名数组
      signUserListMap: [], //参演人员签名数组Map
      studyList: [], //学习资料数组
      trainingData: {}, //详情数据
      oldSignatureSeal:""
    }
  },
  computed: {
    goBack() {
      this.$router.go(-1)

      // 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) {
          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(',') || []
        }
        //获取当前登录人机构类型
        this.orgType = window.sessionStorage.getItem('SET_USER_ORGTYPE');
        this.activeTab =this.$route.params.id.split('_')[2];
        this.getCheckBoxList();

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

  methods: {
    getCheckBoxList()
    {
        console.log(this.orgType, 'this.orgType')
        if (this.orgType == 1) {

           //行社评定地区
           let checkBoxList1 = [
                      {
                        name: '行社优秀(不推荐地区)',
                        value: 7,
                        disabled: false
                      },
                      {
                        name: '评定地区优秀',
                        value: 3,
                        disabled: false
                      },
                      {
                        name: '推荐为省级优秀',
                        value: 4,
                        disabled: true
                      }
                    ]

            //省联社评定
            let checkBoxList2 = [
                        {
                            name: '地区优秀(不推荐省级)',
                            value: 8,
                            disabled: false
                          },
                          {
                            name: '评定省级优秀',
                            value: 5,
                            disabled: false
                          }
                        ]
          //从管理页面调整进入 评优界面
          if(this.activeTab=='1'){
            //办事处
            this.checkBoxList = checkBoxList1;
          }
          // 省联社处理 厦门、莆田 地区推优评优
          if(this.activeTab=='3') {
            // 地区优秀
            if(this.trainingData.recStatus ==3 && !this.trainingData.unRecStatus)
            {
              //省联社
              this.checkBoxList =checkBoxList1;
            }
             // 地区优秀 不推荐省级优秀
            if(this.trainingData.recStatus ==3 && this.trainingData.unRecStatus)
            {
              //省联社
              this.checkBoxList =checkBoxList2;
            }
            // 已推荐省级优秀
            if(this.trainingData.recStatus ==4)
            {
              //省联社
              this.checkBoxList =checkBoxList2;
            }

          }

          // 从待办直接进入 评优界面
          if(!this.activeTab)
          {
            // 行社已推荐地区
            if(this.trainingData.recStatus ==2)
            {
                //办事处
                this.checkBoxList = checkBoxList1;
            }
            // 地区已推荐省级
            if(this.trainingData.recStatus ==4)
            {
              this.checkBoxList = checkBoxList2;
            }
          }

          if (this.trainingData.recStatus == 5) {
            this.result = [5]
          }
        } else if (this.orgType == 2) {
          if(this.activeTab=='1' || !this.activeTab){
          //办事处
          this.checkBoxList = [
                    {
                      name: '行社优秀(不推荐地区)',
                      value: 7,
                      disabled: false
                    },
                    {
                      name: '评定地区优秀',
                      value: 3,
                      disabled: false
                    },
                    {
                      name: '推荐为省级优秀',
                      value: 4,
                      disabled: true
                    }
                  ]
          }
          else{
             //办事处
          this.checkBoxList = [
                    {
                      name: '地区优秀(不推荐省级)',
                      value: 8,
                      disabled: false
                    },
                    {
                      name: '推荐为省级优秀',
                      value: 4,
                      disabled: false
                    }
                  ]
          }

          if (this.trainingData.recStatus == 4) {
            this.result = [3, 4]
          } else if (this.trainingData.recStatus == 3) {
            this.result = [3]
          }
        } else if (this.orgType == 3) {
          if(this.activeTab=='0' || !this.activeTab)
          {
            //行社
            this.checkBoxList = [
              {
                name: '普通案例(不推荐行优)',
                value: 6,
                disabled: false
              },
              {
                name: '评定行社优秀案例',
                value: 1,
                disabled: false
              },
              {
                name: '推荐地区优秀案例',
                value: 2,
                disabled: true
              }
            ]
          }
          else if(this.activeTab='1'){
            //行社
            this.checkBoxList = [
              {
                name: '行社优秀(不推荐地区)',
                value: 7,
                disabled: false
              },
              {
                name: '推荐地区优秀案例',
                value: 2,
                disabled: false
              }
            ]
          }

          if (this.trainingData.recStatus == 2) {
            this.result = [1, 2]
          }
          // else if (this.trainingData.recStatus == 1) {
          //   this.result = [1]
          // }
        }
    },
    disabledCheck(item) {
      if (item == 'false') return false
      if (item == 'true') return true
      //当前是最后一个复选框禁用
      // if (this.checkBoxList.length > 1 && item.value == this.checkBoxList[this.checkBoxList.length - 1].value) {
      //   return true
      // } else {
      //   return false
      // }
    },
    clickChekcBox(v) {
      // console.log(v)
      // console.log(this.resultList[0])
      console.log("clickChekcBox",v,this.checkBoxList)
      // console.log("clickChekcBoxx",v[0] < this.resultList[0].value,v[0],,v[0]==this.resultList[1])
      // 当前选中的是第一个 选择框  未 “不推荐”
      if (v[0] == this.checkBoxList[0].value) {
        if (this.checkBoxList[1]) {
          this.checkBoxList[1].disabled = this.disabledCheck('true')
        }
        if (this.checkBoxList[2]) {
          this.checkBoxList[2].disabled = this.disabledCheck('true')
        }
        console.log("clickChekcBox1",v,this.checkBoxList)
      } else if (v[0] < this.checkBoxList[0].value && v[0]==this.checkBoxList[1].value) {
            this.checkBoxList[0].disabled = this.disabledCheck('true')
            if(this.checkBoxList[2]) this.checkBoxList[2].disabled = this.disabledCheck('false')
            console.log("clickChekcBox2",v,this.checkBoxList)
      }
      else if (v[0] < this.checkBoxList[0].value && v[0]>this.checkBoxList[1].value) {
          this.result=[];
      }
      else {
          this.checkBoxList[0].disabled = this.disabledCheck('false')
          this.checkBoxList[1].disabled = this.disabledCheck('false')
          if(this.checkBoxList[2])this.checkBoxList[2].disabled = this.disabledCheck('true')
          console.log("clickChekcBox3",v,this.checkBoxList)
      }
    },
    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.go(-1)
                }, 1000)
              } else {
                Toast(msg)
              }
            })
          })
          .catch(() => {
            // on cancel
          })
      } else {
        //评价推优
        if(!this.result || this.result.length==0)
        {
          this.$toast.fail('请至少选择一项评优推优选项');
          return;
        }
        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.go(-1)
          }, 1000)
        })
      }
    },
    clearHandler() {
      this.$refs.esign.handleReset()
    },
    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 => {
            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.go(-1)
      })
    }
  }
}
</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: #f0f0f0;
  display: flex;
  border-bottom: 1px solid #ccc;
  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;
    background-color: rgb(230, 230, 230, 0.4);
    opacity: 1;
  }
  .van-col {
    text-align: justify;
    white-space: pre-wrap;
    .van-checkbox-group--horizontal{
      .van-checkbox--horizontal{
        margin-top:3.2vw;
}
    }

  }
  .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;
  }
  .bgc {
    background-color: #fff;
    padding: 10px;
  }
}
</style>