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.categoryName}} </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="产品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>
           <el-table
             ref="multipleTable"
             :data="tableData"
             tooltip-effect="dark"
             style="width: 100%"
             border
             :header-cell-style="{ background: '#F0F3F3' }"
           >
             <el-table-column prop="code" label="工序编号"/>
             <el-table-column prop="name" label="工序名称" />
             <el-table-column prop="controlName" label="工序控制码" />
             <el-table-column prop="workCenterName" label="工作中心" />
             <el-table-column label="操作">
                <template slot-scope="{row}">
                  <el-link
                    type="primary"
                    :underline="false"
                    icon="el-icon-edit"
                    @click="allocateMaterials(row)"
                  >
                    分配物料
                  </el-link>
                </template>
             </el-table-column>
           </el-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:[]
    }
  },
  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){
       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>