yos_web/src/HDrpManagement/serveWorkBill/modules/taskDetail/taskListDetail.vue

<template>
  <div>
    <el-button size="mini" type="text" @click="detailBtn">详 情</el-button>
    <el-drawer append-to-body :show-close="false" :visible.sync="dialogFormVisible" size="40%">
      <div slot="title" style="font-size: 15px">
        工序节点详情
      </div>
      <div class="drawer__panel" v-if="detailData">
        <el-descriptions v-if="detailData" :column="1">
            <el-descriptions-item label="工序内容"><span>{{ detailData.workpresetjson.workname }}</span></el-descriptions-item>
            <el-descriptions-item label="操作说明">{{ detailData.workpresetjson.remarks }}</el-descriptions-item>
            <el-descriptions-item label="操作人员">{{ detailData.changeby }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag size="mini" v-if="detailData.status == 0">待开始</el-tag>
              <el-tag size="mini" type="danger" v-else-if="detailData.status == 1">已完成</el-tag>
              <el-tag size="mini" type="warning" v-else>进行中</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="是否完成" v-if="detailData.workpresetjson.confirm">
              <el-radio-group :disabled="true" v-model="detailData.confirm_value">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item label="备注">{{ detailData.remarks }}</el-descriptions-item>
            <el-descriptions-item label="文本信息" v-if="detailData.workpresetjson.textedit">{{ detailData.textcontent }}</el-descriptions-item>
            <el-descriptions-item label="附件" v-if="detailData.workpresetjson.fileupload"></el-descriptions-item>
        </el-descriptions>

        <file-item 
          v-if="detailData.workpresetjson.fileupload"
          :isDownLoad="true" 
          :fileData="detailData.attinfos">
        </file-item>
        <contentTable v-if="detailData" :data="detailData.workpresetjson">
          <tableLayout slot="培训人员" :layout="peopleTable" :data="detailData.trainers" :opwidth="200"  :custom="true" :width="false">
            <template v-slot:customcol="scope">
              <p>{{scope.column.data[scope.column.columnname]}}</p>
            </template>
          </tableLayout>
          <tableLayout slot="培训商品" :layout="productTable" :data="detailData.titems" :opwidth="200"  :custom="true" :width="false">
            <template v-slot:customcol="scope">
              <p>{{scope.column.data[scope.column.columnname]}}</p>
            </template>
          </tableLayout>
        </contentTable>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import contentTable from './contentTable'
import fileItem from '@/SManagement/orderclue/components/file/index2'
export default {
  name: "",
  props:['data'],
  components:{contentTable,fileItem},
  data(){
    return {
      dialogFormVisible:false,
      detailData:'',
      peopleTable:[],
      productTable:[]
    }
  },
  methods:{
    async detailBtn () {
      let res = await this.$api.requested({
        "id": "20230209091103",
        "version":1,
        "content": {
            "sa_workorderid":this.data.sa_workorderid,
            "sa_workorder_nodeid":this.data.sa_workorder_nodeid
        }
      })
      res.data[0].attinfos = this.fileType.fileList(this.data.attinfos)
      this.detailData = res.data[0]
      console.log(this.detailData);
      this.dialogFormVisible = true
    },
    onSubmit(){
      console.log(this.form)
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
          "id": "20230208140003",
          "version":1,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.$refs['form'].resetFields();
          this.dialogFormVisible = false
        })
      })
    },
  },
  created () {
    this.peopleTable = this.tool.tabelCol(this.$route.name).peopleTable.tablecols
    this.productTable = this.tool.tabelCol(this.$route.name).productTable.tablecols
  }
}
</script>

<style scoped>
.dialog-footer {
  margin-top: 0;
}
.el-select,.el-input,.el-cascader {
  width: 100% !important;
}
</style>