yos_web/src/HDrpManagement/serveWorkBill/components/installationTraining.vue

<template>
  <div>
    <el-drawer
        :title="$t('新建确认单')"
        :visible.sync="drawerVisible"
        size="85%"
        direction="rtl"
        append-to-body
        @close="onClose">
      <div class="drawer__panel" style="margin-bottom: -10px" v-if="dataInfo.workorder">
        <el-descriptions :title="$t(`单据信息`)" >
          <el-descriptions-item :label="$t(`服务单号`)"><span style="color: #666">{{$t(dataInfo.workorder.servicebillno) || '--'}}</span></el-descriptions-item>
          <el-descriptions-item :label="$t(`确认日期`)"><span style="color: #666">{{$t(dataInfo.workorder.createdate) || '--'}}</span></el-descriptions-item>
        </el-descriptions>
        <el-descriptions :title="$t(`服务信息`)">
          <el-descriptions-item :label="$t(`服务分类`)"><span style="color: #666">{{$t(dataInfo.workorder.servicetype) || '--'}}</span></el-descriptions-item>
          <el-descriptions-item :label="$t(`应用系统`)"><span style="color: #666">{{$t(dataInfo.workorder.class1) || '--'}}</span></el-descriptions-item>
          <el-descriptions-item :label="$t(`工单负责人`)"><span style="color: #666">{{$t(dataInfo.workorder.projectleader) || '--'}}</span></el-descriptions-item>
          <el-descriptions-item :label="$t(`项目名称`)"><span style="color: #666">{{$t(dataInfo.workorder.projectname) || '--'}}</span></el-descriptions-item>
          <el-descriptions-item :label="$t(`业务员`)"><span style="color: #666">{{$t(dataInfo.workorder.saler_name) || '--'}}</span></el-descriptions-item>
          <el-descriptions-item :label="$t(`服务企业`)"><span style="color: #666">{{$t(dataInfo.workorder.enterprisename) || '--'}}</span></el-descriptions-item>
        </el-descriptions>
        <el-descriptions :title="$t(`客户信息`)">
          <el-descriptions-item :label="$t(`企业名称`)"><span style="color: #666">{{$t(dataInfo.workorder.abbreviation)}}</span></el-descriptions-item>
          <el-descriptions-item :label="$t(`联系方式`)"><span style="color: #666">{{$t(dataInfo.workorder.scenecontactphonenumber)}}</span></el-descriptions-item>
          <el-descriptions-item :label="$t(`服务地址`)"><span style="color: #666">{{$t(dataInfo.workorder.province + dataInfo.workorder.city + dataInfo.workorder.county + dataInfo.workorder.address)}}</span></el-descriptions-item>
        </el-descriptions>
        <el-descriptions :title="$t(`现场联系人信息`)">
          <el-descriptions-item :label="$t(`姓名`)"><span style="color: #666">{{$t(dataInfo.workorder.scenecontact) || '--'}}</span></el-descriptions-item>
          <el-descriptions-item :label="$t(`电话`)"><span style="color: #666">{{$t(dataInfo.workorder.scenecontactphonenumber) || '--'}}</span></el-descriptions-item>
          <el-descriptions-item :label="$t(`地址`)"><span style="color: #666">{{$t(dataInfo.workorder.address) || '--'}}</span></el-descriptions-item>
        </el-descriptions>
      </div>
      <el-descriptions :title="$t(`工序内容填写`)" style="margin-top: 10px">
      </el-descriptions>
      <div style="color: #999;font-size: 14px">{{$t(`现场培训内容`)}}</div>
      <el-input
          type="textarea"
          style="margin-top: 10px;margin-bottom: 20px"
          @blur="inputChange('现场培训内容',trainerContent)"
          :rows="1"
          placeholder="现场培训内容"
          v-model="trainerContent">
      </el-input>
      <div style="color: #999;font-size: 14px">{{$t(`现场互动及测试培训效果`)}}</div>
      <el-input
          type="textarea"
          style="margin-top: 10px;margin-bottom: 20px"
          @blur="inputChange('现场互动及测试培训效果',trainerResult)"
          :rows="1"
          placeholder="现场互动及测试培训效果"
          v-model="trainerResult">
      </el-input>
      <div style="height: 10px;background: #f5f5f5"></div>
      <div style="margin: 10px;font-weight: bold;font-size: 16px">{{$t(`评价`)}}</div>
      <div class="drawer__panel" style="margin-bottom: -10px">
        <div style="display: flex;justify-content: space-between">
          <div style="display: flex;justify-content: left">
            <div style="color: #999;font-size: 14px;margin-right: 10px">{{$t(`反应速度`)}}:</div>
            <el-rate v-model="dataInfo.responsescore" @change="changeRate"></el-rate>
          </div>
          <div style="display: flex;justify-content: left">
            <div style="color: #999;font-size: 14px;margin-right: 10px">{{$t(`配合态度`)}}:</div>
            <el-rate v-model="dataInfo.attitudescore" @change="changeRate"></el-rate>
          </div>
        </div>
      </div>
      <div style="height: 10px;background: #f5f5f5"></div>
      <div style="margin: 10px;font-weight: bold;font-size: 16px">{{$t(`客户签字`)}}</div>
      <div class="drawer__panel" style="margin-bottom: -50px">
        <signature ref="signatureRef" :sa_workorder_confirmationid="sa_workorder_confirmationid" :sa_workorderid="sa_workorderid"></signature>
      </div>
      <div class="fixed__btn__panel">
        <el-button
            size="small"
            class="normal-btn-width"
            @click="downLoadBill(dataInfo)"
        >{{ $t("单据预览") }}</el-button
        >
        <el-button
            size="small"
            type="warning"
            class="normal-btn-width"
            @click="delClick"
        >{{ $t("删除") }}</el-button
        >
        <el-button
            size="small"
            type="primary"
            class="normal-btn-width"
            @click="submitClick"
        >{{ $t("提交") }}</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
import signature from '@/HDrpManagement/serveWorkBill/modules/signature/index'
export default {
  name: "installationTraining",//安装培训
  components:{signature},
  props:['sa_workorderid'],
  data(){
    return {
      dataInfo:{},
      paidServiceAmount:'',
      inqualityguaranteeperiod:'',
      drawerVisible:false,
      tablecols:[],
      sa_workorder_confirmationid:'',
      trainerContent:'',
      trainerResult:'',
      active_accoun:JSON.parse(sessionStorage.getItem('active_account')),
      folderid:JSON.parse(sessionStorage.getItem('folderid')),
    }
  },
  methods:{
    async queryInfo(id){
      this.sa_workorder_confirmationid = id
      const res = await this.$api.requested({
        "id": "20230211105803",
        "content": {
          "sa_workorder_confirmationid": id,
          nocache: true
        }
      })
      console.log(res.data)
      this.dataInfo = res.data
      this.setInputData()
      this.drawerVisible = true
      this.$nextTick(()=>{
        this.$refs.signatureRef.getField()
      })
    },
    setInputData() {
      let that = this
      that.dataInfo.confirmationcontent.forEach(e => {

        Object.keys(e).map((key, index) => {

          if (key.includes('现场培训内容')) {

            that.trainerContent = e[key].confirm_value

          }else if (key.includes('现场互动及测试培训效果')) {

            that.trainerResult =  e[key].confirm_value

          }
        })
      })
    },
    inputChange(key,data){
      let keyValue = key
      this.dataInfo.confirmationcontent.forEach(e => {
        Object.keys(e).map((key, index) => {
          if (key.includes(keyValue)) {
            e[key].confirm_value = data
          }
        })
      })
    },
    async changeRate(){
      console.log(this.dataInfo,'detaInfo')
      const res = await this.$api.requested({
        "id":"20230211105703",
        "content":this.dataInfo
      })
    },
    onClose(){
      this.$emit('onClose')
    },
    async submitClick(){
      const res = await this.$api.requested({
        "id": "20230211110003",
        "content": {
          "sa_workorder_confirmationid": this.sa_workorder_confirmationid
        }
      })
      if (res.code == 0){
        this.tool.showMessage(res,()=>{})
      }else {
        this.drawerVisible = false
      }
    },
    async delClick(){
      const res = await this.$api.requested({
        "id": "20230211110103",
        "content": {
          "sa_workorder_confirmationids": [this.sa_workorder_confirmationid]
        }
      })
      if (res.code == 0){
        this.tool.showMessage(res,()=>{})
      }else {
        this.drawerVisible = false
      }

    },
    downLoadBill(data) {
      let result = data.attinfos.filter(
          (item) => item.usetype == "comfirmbill"
      );
      let http = location.href.substring(0,5) == 'https'?'https://oms.idcgroup.com.cn:8079/yosweb/#/printTable?':'http://61.164.207.46:8000/yosweb/#/printTable?'
      let token = 'token=' + this.active_accoun.token
      let parentid = '&parentid=' + this.folderid.appfolderid
      let ownerid = '&ownerid=' + data.sa_workorder_confirmationid
      let action = '&action=1'
      let urlNew = http + token + parentid + ownerid + action
      // if (result.length == 0)
      //   window.open(urlNew);
      // window.open(result[result.length - 1].url, "_self");
      // this.$refs.checkBillRef.listData()

      window.open(urlNew);
    },
  },
  mounted() {
    this.tablecols = this.tool.tabelCol(this.$route.name).serviceProductBillTable.tablecols
  }
}
</script>

<style scoped>

</style>