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>  </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="版本名称">
                 <span>  </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="所属工厂">
                 <span>
                 </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="产品编码">

               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="产品名称">
                 <span> </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>  </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="工艺路线名称">
                 <span>  </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="工艺路线版本">
                 <span>
                 </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="产品BOM编码">
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="产品BOM名称">
                 <span> </span>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="产品BOM版本">
                 <span> </span>
               </el-form-item>
             </el-col>
           </el-row>
           <ele-pro-table
             ref="table"
             :columns="columns"
             :datasource="datasource"
             row-key="id"
           >
           </ele-pro-table>
       </el-form>
    </el-card>
  </div>
</template>
<script>
  import dictMixins from '@/mixins/dictMixins';
  import {  getDetail  } from '@/api/ruleManagement/matter'
  import route from '@/api/technology/route';
export default {
  mixins: [dictMixins],
  components: {  },
  data () {
    return {
       // 表格列配置
       columns: [
         {
           prop: 'code',
           label: '工序编号',
           showOverflowTooltip: true,
           align: 'center',
           minWidth: 110
         },
         {
           prop: 'name',
           label: '工序名称',
           showOverflowTooltip: true,
           align: 'center',
           minWidth: 110
         },
         {
           align: 'center',
           prop: 'categoryCode',
           label: '工序控制码',
           showOverflowTooltip: true,
           minWidth: 110
         },
         {
           prop: 'categoryName',
           label: '工作中心',
           align: 'center',
           showOverflowTooltip: true,
           minWidth: 110
         }
       ],
    }
  },
  async created () {
  //   this.getInfo()
	 // this.requestDict('规则类型');
  },
  methods: {
    /* 表格数据源 */
    async datasource({ page, limit, where, order }) {
      const res = await route.list({
        ...where,
        ...order,
        pageNum: page,
        size: limit
      });
      return res;
    },
    async getInfo () {
      const data = await getDetail(this.$route.query.id)
        this.tableData = data.ruleItems
        this.infoData = data
    },

    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>