kd-aiot-frontend/src/views/technology/version/details.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
       <div class="back-btn">
         <el-button type="plain" @click="goBack" > 返回 </el-button>
       </div>
       <el-form label-width="110px">
           <div class="basic-details-title">
             <span class="border-span">基本信息</span>
           </div>
           <el-row>
             <el-col :span="8">
               <el-form-item label="版本号">
                 <span> {{infoData.code}} </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="版本名称">
                 <span> {{infoData.name}} </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="所属工厂">
                 <span> {{infoData.factoryName}} </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="产品编码">
                   <span> {{infoData.categoryCode}} </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="产品名称">
                 <span> {{infoData.categoryName}} </span>
               </el-form-item>
             </el-col>
           </el-row>
           <div class="basic-details-title">
             <span class="border-span">关联生产信息</span>
           </div>
           <el-row>
             <el-col :span="8">
               <el-form-item label="工艺路线编码">
                 <span> {{infoData.routingCode}} </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="工艺路线名称">
                 <span> {{infoData.routingName}} </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="工艺路线版本">
                 <span> {{infoData.routingVersion}} </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="产品BOM编码">
                  <span> {{infoData.bomCode}} </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="产品BOM名称">
                 <span> {{infoData.bomName}} </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="产品BOM版本">
                 <span> {{infoData.bomVersion}} </span>
               </el-form-item>
             </el-col>
           </el-row>
           <ele-pro-table
             :columns="columns"
             :datasource="tableData"
             :need-page="false"
           >
               <template v-slot:action="{ row }">
                 <el-link
                   type="primary"
                   :underline="false"
                   icon="el-icon-edit"
                   @click="allocateMaterials(row)"
                 >
                   分配物料
                 </el-link>
               </template>
            </ele-pro-table>
       </el-form>
    </el-card>
    <linkMaterialDialog ref="linkMaterialDialogRef" @success="success" />
  </div>
</template>
<script>
  import dictMixins from '@/mixins/dictMixins';
  import { versionDetail , getProcessByRoute } from '@/api/technology/version/version.js';
  import linkMaterialDialog from './components/link-material-dialog.vue';
export default {
  mixins: [dictMixins],
  components: { linkMaterialDialog },
  data () {
    return {
      infoData:{},
      tableData:[],
      // 表格列配置
      columns: [
        {
          prop: 'code',
          label: '工序编号',
          showOverflowTooltip: true,
          align: 'center',
        },
        {
          prop: 'name',
          label: '工序名称',
          showOverflowTooltip: true,
          align: 'center',
        },
        {
          prop: 'controlName',
          label: '工序控制码',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          prop: 'workCenterName',
          label: '工作中心',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 200,
          align: 'center',
          resizable: false,
          slot: 'action',
        }
      ],
    }
  },
  async created () {
    this.getInfo()
  },
  methods: {
    async getInfo () {
      const data = await versionDetail(this.$route.query.id)
        this.infoData = data
        if(data.routingId){
            this.getProcessList()
        }
    },

    getProcessList(){
       let params = {
          isDetail: false,
          pageNum: 1,
          routingId: this.infoData.routingId,
          size: -1
       }
       getProcessByRoute(params).then(res=>{
           this.tableData = res.list
       })
    },

    success () {
      this.getProcessList()
    },

    // 点击分配物料
    allocateMaterials(row){
       row.bomId = this.infoData.bomId
       row.produceVersionId =  this.infoData.id
       this.$refs.linkMaterialDialogRef.open(row);
    },
    goBack(){
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.back-btn{
  width:100%;
  display: flex;
  align-items: center;
  justify-content:flex-end;
}
.basic-details-title {
  margin-bottom: 12px;
  margin-top: 10px;
  border-bottom: 1px solid #1890ff;
  padding-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.basic-details-title .border-span {
  height: 18px;
  font-size: 16px;
  border-left: 4px solid #1890ff;
  padding-left: 8px;
  font-weight: 500;
}
</style>