yos_web/src/HDrpManagement/serveWorkBill/components/nonProcessTemplate.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: 0px !important;" 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.projectname)}}</span></el-descriptions-item>
          <el-descriptions-item :label="$t(`是否有偿服务`)"><span style="color: #666">{{paidServiceAmount > 0 ? $t('是') : $t('否')}}</span></el-descriptions-item>
          <el-descriptions-item :label="$t(`是否质保期内`)"><span style="color: #666">{{inqualityguaranteeperiod == 1 ? $t('是') : $t('否')}}</span></el-descriptions-item>
          <el-descriptions-item :label="$t(`申请原因`)"><span style="color: #666">{{$t(dataInfo.reason) || '--'}}</span></el-descriptions-item>
        </el-descriptions>
        <el-descriptions :title="$t(`应用信息`)" style="margin-top: 10px">
          <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.class2) || '--'}}</span></el-descriptions-item>
          <el-descriptions-item :label="$t(`服务方式`)"><span style="color: #666">{{$t(dataInfo.workorder.type) || '--'}}</span></el-descriptions-item>
        </el-descriptions>
        <el-descriptions :title="$t(`客户信息`)" style="margin-top: 10px">
          <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>
      </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: 0 !important;" v-if="dataInfo.trainertitems">
        <tableDetailLayout
            :layout="tablecols"
            :data="dataInfo.trainertitems"
            :opwidth="200"
            :width="true"
            :custom="true">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'nominalpressure'">
              {{tool.nominalPressureSet(scope.column.data[scope.column.columnname])}}
            </div>
            <div v-else>
              {{
                $t(scope.column.data[[scope.column.columnname]])
                    ? $t(scope.column.data[[scope.column.columnname]])
                    : "--"
              }}
            </div>
          </template>
        </tableDetailLayout>
      </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: 0 !important;">
        <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 style="display: flex;justify-content: left">
            <div style="color: #999;font-size: 14px;margin-right: 10px">{{$t(`满意态度`)}}:</div>
            <el-rate v-model="dataInfo.satisfaction" @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: 20px !important;">
        <signature ref="signatureRef" :sa_workorder_confirmationid="sa_workorder_confirmationid"></signature>
      </div>
      <div style="height: 25px;background: #f5f5f5"></div>
      <div class="fixed__btn__panel">
        <el-button
            size="small"
            type="primary"
            class="normal-btn-width"
        >{{ $t("提交") }}</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
import signature from '@/HDrpManagement/serveWorkBill/modules/signature/index'
export default {
  name: "nonProcessTemplate",//非工序模板,
  components:{signature},
  data(){
    return {
      dataInfo:{},
      paidServiceAmount:'',
      inqualityguaranteeperiod:'',
      drawerVisible:false,
      tablecols:[],
      sa_workorder_confirmationid:''
    }
  },
  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)
      let ishave = false
      res.data.confirmationcontent.forEach(item => {
        if (item.nextTreatmentTime) {
          ishave = true
        }
      })
      if (!ishave) {
        let arr = [{
          nextTreatmentTime: {
            confirm_value: ''
          }
        }, {
          treatment: {
            confirm_value: ''
          }
        }, {
          explain: {
            confirm_value: ''
          }
        }, {
          repairResult: {
            confirm_value: ''
          }
        }, {
          rebackTime: {
            confirm_value: ''
          }
        }, {
          nextRebackTime: {
            confirm_value: ''
          }
        }, {
          text: {
            confirm_value: ''
          }
        }]
        arr.forEach(e => {
          res.data.confirmationcontent.push(e)
        }, this)
      }
      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) => {

            that.paidServiceAmount = that.paidServiceAmount + e[key].amount

          if (key === 'nextTreatmentTime') {

              that.nextTreatmentTime = e[key].confirm_value

          }
          if (key === 'treatment') {

              that.treatment =  e[key].confirm_value

          }
          if (key === 'explain') {

              that.explain = e[key].confirm_value

          }
          if (key === 'nextRebackTime') {

              that.nextRebackTime =  e[key].confirm_value

          }
          if (key === 'text') {

              that.text =  e[key].confirm_value

          }
        })
      })
    },
    async changeRate(){
      console.log(this.dataInfo,'detaInfo')
      const res = await this.$api.requested({
        "id":"20230211105703",
        "content":this.dataInfo
      })
    },
    onClose(){
      this.$refs.signatureRef.btnTitle = ''
      this.$refs.signatureRef.signatureData = null
      this.$refs.signatureRef.signatureStarted = false
      this.$emit('onClose')
    }
  },
  mounted() {
    this.tablecols = this.tool.tabelCol(this.$route.name).serviceProductBillTable.tablecols
  }
}
</script>

<style scoped>

</style>