X-web/src/views/modules/tech/crafts-detail.vue

<template>
  <el-dialog
    title="查看"
    width="70%"
    :close-on-click-modal="false"
    :visible.sync="visible"
    :before-close="handleClose"
  >
    <div style="margin-left: 20px;margin-right: 20px">
      <!-- 工作流 -->
      <div v-show="dataForm.workFlowBusinessExt">
        <el-steps :active="dataForm.workFlowBusinessExt&&dataForm.workFlowBusinessExt.workFlowProcessStepList?dataForm.workFlowBusinessExt.workFlowProcessStepList.length + 2:0" align-center style="margin-bottom: 20px">
          <template v-for="(item, i) in stepList">
            <el-step :icon="item.icon" :title="item.title" :description="item.description"></el-step>
          </template>
        </el-steps>
        <el-collapse style="margin-bottom: 20px">
          <el-collapse-item>
            <template slot="title">
              <span style="color: red">审批日志（展开查看更多）：</span>
            </template>
            <template v-for="(item, i) in logList">
              <div>{{++i}}：{{item.approverName}}  {{item.createTime}}  {{item.approvalValue}}</div>
            </template>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div v-show="isFlow">
        <approve-component ref="approve" @approveFinished="approveFinished" />
      </div>
      <e-desc title="基本信息" column="3">
        <e-desc-item label="工艺名称">{{ dataForm.techName }}</e-desc-item>
        <e-desc-item label="工艺版本">{{ dataForm.techVersion }}</e-desc-item>
        <e-desc-item label="产品">{{ productName }}</e-desc-item>

        <e-desc-item label="备注" span="3">{{ dataForm.notes }}</e-desc-item>
      </e-desc>
      <e-desc title="附件">
        <upload-component
          :display="true"
          :display-title="false"
          :accept="'*'"
          :file-obj-list="fileList"
        />
      </e-desc>
      <el-row class="my-row" style="height: 350px; background-color: #efefef;">
        <work-flow
          ref="workFlow"
          :nodeData="workFlowData"
          :disabled="true"
        ></work-flow>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">返回</el-button>
    </span>
  </el-dialog>
</template>

<script>
import EDesc from '../common/e-desc'
import EDescItem from '../common/e-desc-item'
import { dealStepData, dealStepLogs } from '@/api/util'
import uploadComponent from '../common/upload-component'
import { getInfo } from '@/api/crafts'
import ApproveComponent from '../common/approve-component'
import WorkFlow from '@/components/work-flow/home'
export default {
  name: 'crafts-detail',
  components: {
    EDesc,
    EDescItem,
    uploadComponent,
    ApproveComponent,
    WorkFlow
  },
  data () {
    return {
      visible: false,
      isFlow: false,
      id: 0,
      productName: '',
      dataForm: {
        workFlowBusinessExt: null
      },
      stepList: [],
      logList: [],
      fileList: [],
      workFlowData: {
        nodeList: [],
        lineList: []
      }
    }
  },
  destroyed () {
    console.log("destroyed")
  },
  methods: {
    async init (id, businessType, productName) {
      this.visible = true
      this.isFlow = !!(businessType && businessType !== '')
      this.id = id || 0
      this.productName = productName
      this.dataForm = {}
      this.stepList = []
      this.logList = []
      this.fileList = []
      this.getDetails(businessType)
    },
    getDetails (businessType) {
      getInfo(this.id).then(({ data }) => {
        if (data && data.code === '200' && data.data) {
          this.dataForm = data.data
          // 流程图展示
          this.workFlowData = {
            nodeList: data.data.nodeList,
            lineList: data.data.lineList
          }

          if (data.data.workFlowBusinessExt) {
            dealStepData(
              data.data.workFlowBusinessExt.workFlowProcessStepList,
              this.stepList
            )
            dealStepLogs(
              data.data.workFlowBusinessExt.processLogList,
              this.logList
            )
          }
          // 附件
          if (data.data.attachList) {
            data.data.attachList.forEach(item => {
              this.fileList.push({
                name: item.fileName,
                url: item.url,
                id: item.url
              })
            })
          }
          // 初始化审批Form
          this.showApproveForm(businessType, this.id)
        }
      })
    },
    // 初始化审批Form
    showApproveForm (businessType, businessId) {
      if (this.isFlow) {
        this.$nextTick(() => {
          this.$refs.approve.init(businessType, businessId)
        })
      }
    },
    // 审批完成
    approveFinished () {
      this.visible = false
      this.$emit('approveFinished')
    },
    handleClose () {
      //this.visible = false
      this.$emit("closeDialogEvent")
    }
  }
}
</script>

<style scoped>
.my-line {
  border-bottom: 1px solid #c0c4cc;
  margin-bottom: 10px;
}
.title {
  padding: 10px 0;
}
</style>