X-web/src/views/modules/trace/product-detail.vue

<template>
  <div class="production">
    <!-- <el-dialog
      title="生产监控详情"
      width="70%"
      :close-on-click-modal="false"
      :visible.sync="visible"
      @close="handleClose"
    > -->
      <div class="my-title">生产详情</div>
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        label-width="auto"
      >
        <el-row class="my-row">
          <el-col :span="8">
            <el-form-item label="产品编号：">
              <el-input v-model="dataForm.prodCode" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          class="my-row"
          style="height: 350px; background-color: #efefef;"
        >
          <work-flow
            ref="workFlow"
            :nodeData="workFlowData"
            :selectOperator="true"
            :disabled="true"
          ></work-flow>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onChose">返回</el-button>
      </span>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
import { getProdInfoById } from '@/api/trace'
import WorkFlow from '@/components/work-flow/home'
export default {
  name: 'product-detail',
  components: {
    WorkFlow
  },
  data () {
    return {
      mouldId: '',
      visible: false,
      dataForm: {},
      operatorList: [],
      operatorIds: [],
      productList: [],
      display: false,
      workFlowData: {
        nodeList: [],
        lineList: []
      },
      // 是否点击了流程图保存按钮
      clickFlowSave: false,
      datas: {},
      dataRule: {
        mouldName: [
          { required: true, message: '请输入模板名称', trigger: 'blur' }
        ]
      },
      dataRule1: {
        operatorIds: [
          { required: true, message: '操作人员不能为空', trigger: 'change' }
        ]
      }
    }
  },
  mounted () {
    this.visible = true
  },
  methods: {
    onChose () {
      this.$emit('onChose')
    },
    // 初始化表单
    async init (id, prodCode, disable) {
      console.log(prodCode)
      this.visible = true
      this.display = disable
      this.nodeList = []
      this.linkList = []
      this.mouldId = id
      this.dataForm.prodCode = prodCode

      await getProdInfoById(id).then(async ({ data }) => {
        if (data && data.code === '200') {
          this.dataForm = {
            ...this.dataForm
          }
          // 流程图展示
          this.workFlowData = {
            nodeList: data.data.nodeList,
            lineList: data.data.lineList
          }
        }
      })
    },
    handleClose () {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .my-row .super-flow__node {
  width: 180px;
  height: 80px;
}
</style>