物品信息

src/views/classifyManage/itemInformation/add.vue

@@ -193,7 +193,7 @@
           this.$set(this.itemForm, 'itemCode', data.code.substring(3));
         } else {
           this.$set(this.itemForm, 'isCitation', false);
-          this.$set(this.itemForm, 'itemCode', this.newCode.substring(3));
+          this.$set(this.itemForm, 'itemCode', this.newCode);
         }
         this.$set(this.itemForm, 'unpack', data.unpack);
         // this.itemForm.isTransferAssets = data.isTransferAssets
@@ -253,14 +253,19 @@
           this.requestData.univalence = this.itemForm.univalence
             ? this.itemForm.univalence
             : null;
-          this.requestData.categoryVoRelation =
+          this.requestData.categoryRelationPoList = (
             (this.$refs.itemMatchRef && this.$refs.itemMatchRef.getMapList()) ||
-            [];
+            []
+          ).map((i) => ({
+            ...i,
+            categoryId: i.id,
+            mainCategoryId: this.$route.query.id || ''
+          }));
 
           //不传报错
           this.requestData.iotProductSchema = '{}';
           if (this.pageTitle == '编辑物品') {
-            this.requestData.mainInformationId = this.$route.query.id;
+            this.requestData.id = this.$route.query.id;
             delete this.requestData.categoryVoRelationMap;
             this.$confirm(
               '参数信息有变更，与当前已存在的台账信息参数不一致，确定后将同步已存在的台账信息参数 !',

src/views/classifyManage/itemInformation/components/AddDialog.vue

@@ -10,33 +10,7 @@
   >
     <div>
       <el-row>
-        <el-col :span="24" class="topsearch">
-          <el-form>
-            <el-row>
-              <el-col :span="6">
-                <el-input
-                  v-model="searchForm.searchKey"
-                  placeholder="输入物品编码或名称"
-                  size="small"
-                ></el-input>
-              </el-col>
-              <el-col :span="6" style="margin-left: 10px">
-                <el-button type="primary" size="small" @click="searchByKeyWords"
-                  >搜索</el-button
-                >
-                <el-button size="small" @click="reset">重置</el-button>
-              </el-col>
-            </el-row>
-          </el-form>
-        </el-col>
         <el-col :span="6" class="tree_col">
-          <!-- <vTreeList
-            @handleNodeClick="handleNodeClick"
-            ref="commonTree"
-            :defaultExpandAll="false"
-            :defaultExpandedKeys="defaultExpandedKeys"
-            :type="typeValue"
-          /> -->
           <AssetTree
             :props="defaultProps"
             :default-expanded-keys="defaultExpandedKeys"
@@ -51,73 +25,40 @@
           />
         </el-col>
         <el-col :span="18" class="table_col">
-          <el-table
-            :data="tableData"
-            height="450"
-            highlight-current-row
-            @selection-change="handleSelectionChange"
-            :row-key="getRowKeys"
-            ref="tableRef"
+          <ele-pro-table
+            ref="table"
+            :initLoad="false"
+            :columns="columns"
+            row-key="id"
+            :datasource="datasource"
+            :selection.sync="tableSelectionList"
+            height="calc(100vh - 265px)"
+            full-height="calc(100vh - 116px)"
+            tool-class="ele-toolbar-form"
+            cache-key="systemOrgUserTable"
           >
-            <el-table-column
-              type="selection"
-              width="60"
-              align="center"
-              :reserve-selection="true"
-            ></el-table-column>
-            <el-table-column
-              label="物品编码"
-              prop="code"
-              width="130"
-            ></el-table-column>
-            <el-table-column label="物品名称" prop="name"></el-table-column>
-            <el-table-column
-              label="牌号"
-              prop="brandNum"
-              v-if="dialogTitle != '选择设备' && dialogTitle != '选择备品备件'"
-            ></el-table-column>
-            <el-table-column
-              label="型号"
-              prop="modelType"
-              v-if="dialogTitle != '选择物料'"
-            ></el-table-column>
-            <el-table-column
-              label="收缩系数"
-              prop="shrinkageCoefficient"
-              v-if="dialogTitle == '选择模具'"
-            >
-              <template slot-scope="scope">
-                <span>
-                  {{ JSON.parse(scope.row.extendField).shrinkageCoefficient }}
-                </span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="大模体型号"
-              prop="dieBodyModel"
-              v-if="dialogTitle == '选择模具'"
-              width="120"
-            >
-              <template slot-scope="scope">
-                <span>
-                  {{ JSON.parse(scope.row.extendField).dieBodyModel }}
-                </span>
-              </template>
-            </el-table-column>
-          </el-table>
-          <div class="pagination">
-            <el-pagination
-              background
-              layout="total, sizes, prev, pager, next, jumper"
-              :total="pagination.total"
-              :page-sizes="[15, 30, 50, 100, 500]"
-              :page-size="pagination.size"
-              :current-page.sync="pagination.page"
-              @current-change="handleCurrent"
-              @size-change="handleSize"
-            >
-            </el-pagination>
-          </div>
+            <!-- 表头工具栏 -->
+            <template v-slot:toolbar>
+              <el-row>
+                <el-col :span="6">
+                  <el-input
+                    v-model="searchForm.searchKey"
+                    placeholder="输入物品编码或名称"
+                    size="small"
+                  ></el-input>
+                </el-col>
+                <el-col :span="6" style="margin-left: 10px">
+                  <el-button
+                    type="primary"
+                    size="small"
+                    @click="searchByKeyWords"
+                    >搜索</el-button
+                  >
+                  <el-button size="small" @click="reset">重置</el-button>
+                </el-col>
+              </el-row>
+            </template>
+          </ele-pro-table>
         </el-col>
       </el-row>
     </div>
@@ -169,21 +110,65 @@
         tableSelectionList: []
       };
     },
+    computed: {
+      columns () {
+        const privateList = [];
+        if (
+          this.dialogTitle != '选择设备' &&
+          this.dialogTitle != '选择备品备件'
+        ) {
+          privateList.push({
+            prop: 'brandNum',
+            label: '牌号'
+          });
+        }
+        if (this.dialogTitle != '选择物料') {
+          privateList.push({
+            prop: 'modelType',
+            label: '型号'
+          });
+        }
+        if (this.dialogTitle == '选择模具') {
+          privateList.push({
+            prop: 'shrinkageCoefficient',
+            label: '收缩系数',
+            formatter (_row, _column, cellValue) {
+              return JSON.parse(_row.extendField).shrinkageCoefficient;
+            }
+          });
+          privateList.push({
+            prop: 'dieBodyModel',
+            label: '大模体型号',
+            formatter (_row, _column, cellValue) {
+              return JSON.parse(_row.extendField).dieBodyModel;
+            }
+          });
+        }
+
+        return [
+          {
+            columnKey: 'selection',
+            align: 'center',
+            type: 'selection'
+          },
+          {
+            prop: 'code',
+            showOverflowTooltip: true,
+            label: '物品编码'
+          },
+          {
+            prop: 'name',
+            label: '物品名称'
+          },
+          ...privateList
+        ];
+      }
+    },
     watch: {
       equipmentdialog (val) {
         if (val) {
           this.$nextTick(() => {
-            this.$refs.tree.getTreeData().then(() => {
-              if (this.tableData.length) this.$refs.tableRef.clearSelection();
-              this.$nextTick(() => {
-                this.mapList.forEach((item) => {
-                  const row = this.tableData.find((i) => i.id === item.id);
-                  if (row) {
-                    this.$refs.tableRef.toggleRowSelection(row, true);
-                  }
-                });
-              });
-            });
+            this.$refs.tree.getTreeData();
           });
           // if(this.tableData.length)  this.$refs.tableRef.clearSelection()
         }
@@ -195,6 +180,26 @@
       }
     },
     methods: {
+      datasource ({ page, where, limit }) {
+        return getList({
+          ...this.searchForm,
+          pageNum: page,
+          size: limit
+        }).then((res) => {
+          setTimeout(() => {
+            const keys = [];
+            this.mapList.forEach((item) => {
+              const row = res.list.find((i) => i.id === item.id);
+              if (row) {
+                keys.push(row.id);
+              }
+            });
+            this.$refs.table.setSelectedRowKeys(keys);
+          }, 100);
+
+          return res;
+        });
+      },
       handleClose () {
         this.equipmentdialog = false;
         this.tableSelectionList = [];
@@ -213,9 +218,6 @@
       handleSelectionChange (val) {
         this.tableSelectionList = val;
       },
-      // handleCurSelectionChange (selection, row) {
-
-      // },
 
       toDelete (val) {
         console.log('触发删除', val);
@@ -235,29 +237,8 @@
       handleNodeClick (data, node) {
         if (data.id === this.currentTreeData.id) return;
         this.currentTreeData = data;
-        this.searchForm.categoryLevelPathId = data.id;
-        this.handleList();
-      },
-
-      async handleList () {
-        const params = {
-          ...this.searchForm,
-          ...this.pagination
-        };
-        const res = await getList(params);
-        if (res?.success) {
-          this.tableData = res.data.records;
-          this.pagination.total = res.data.total;
-          if (this.tableData.length) this.$refs.tableRef.clearSelection();
-          this.$nextTick(() => {
-            this.mapList.forEach((item) => {
-              const row = this.tableData.find((i) => i.id === item.id);
-              if (row) {
-                this.$refs.tableRef.toggleRowSelection(row, true);
-              }
-            });
-          });
-        }
+        this.searchForm.categoryLevelId = data.id;
+        this.$refs.table.reload();
       },
 
       // 弹窗 - 按关键字搜索
@@ -267,13 +248,13 @@
           return;
         }
         this.pagination.page = 1;
-        this.handleList();
+        this.$refs.table.reload();
       },
       // 重置
       reset () {
         this.pagination.page = 1;
         this.searchForm.searchKey = '';
-        this.handleList();
+        this.$refs.table.reload();
       },
 
       // 设置默认高亮行

src/views/classifyManage/itemInformation/components/RowDetail.vue

@@ -168,7 +168,7 @@
 </script>
 
 <style lang="scss" scoped>
-  :deep(.row-form) {
+  .row-form {
     width: 100%;
     display: flex;
     align-items: center;
@@ -178,10 +178,10 @@
     .el-row {
       width: 100%;
     }
-    .el-form-item {
+    :deep(.el-form-item) {
       margin-bottom: 15px;
     }
-    .row-col {
+    :deep(.row-col) {
       display: flex;
       align-items: center;
       justify-content: flex-start;

src/views/classifyManage/itemInformation/components/item-list.vue

@@ -3,6 +3,7 @@
     <!-- 数据表格 -->
     <ele-pro-table
       ref="table"
+      :initLoad="false"
       :columns="columns"
       :datasource="datasource"
       height="calc(100vh - 265px)"
@@ -16,6 +17,14 @@
       </template>
       <!-- 操作列 -->
       <template v-slot:action="{ row }">
+        <el-link
+          type="primary"
+          :underline="false"
+          icon="el-icon-edit"
+          @click="viewEdit(row)"
+        >
+          详情
+        </el-link>
         <el-link
           type="primary"
           :underline="false"
@@ -25,7 +34,6 @@
           编辑
         </el-link>
         <el-link
-          v-if="row.loginName"
           type="primary"
           :underline="false"
           icon="el-icon-unlock"
@@ -144,7 +152,7 @@
           {
             columnKey: 'action',
             label: '操作',
-            width: 200,
+            width: 250,
             align: 'left',
             resizable: false,
             slot: 'action'
@@ -167,10 +175,22 @@
         this.$nextTick(() => {
           this.$refs.table.reload({
             pageNum: 1,
-            where: { ...where, categoryLevelId: this.current?.data?.id }
+            where: {
+              ...where,
+              categoryLevelId: this.current?.data?.id || this.current?.id
+            }
           });
         });
       },
+      /* 显示详情 */
+      viewEdit (row) {
+        this.$router.push({
+          path: '/classifyManage/itemInformation/details',
+          query: {
+            id: row.id
+          }
+        });
+      },
       /* 显示编辑 */
       openEdit (row) {
         this.$router.push({
@@ -218,8 +238,8 @@
     watch: {
       // 监听机构id变化
       current: {
-        immediate: true,
         handler () {
+          console.log(this.current, 'current');
           this.reload();
         }
       }

src/views/classifyManage/itemInformation/components/item-match.vue

@@ -28,16 +28,11 @@
           <template v-slot:action="{ row, $index }">
             <el-popconfirm
               class="ele-action"
-              title="确定要删除此物品？"
-              @confirm="remove(row)"
+              :title="`确认删除[${row.name}]吗?`"
+              @confirm="handleDelete($index, row)"
             >
               <template v-slot:reference>
-                <el-link
-                  @click="handleDelete($index, row)"
-                  type="danger"
-                  :underline="false"
-                  icon="el-icon-delete"
-                >
+                <el-link type="danger" :underline="false" icon="el-icon-delete">
                   删除
                 </el-link>
               </template>
@@ -72,16 +67,11 @@
           <template v-slot:action="{ row, $index }">
             <el-popconfirm
               class="ele-action"
-              title="确定要删除此物品？"
-              @confirm="remove(row)"
+              :title="`确认删除[${row.name}]吗?`"
+              @confirm="handleDelete($index, row)"
             >
               <template v-slot:reference>
-                <el-link
-                  @click="handleDelete($index, row)"
-                  type="danger"
-                  :underline="false"
-                  icon="el-icon-delete"
-                >
+                <el-link type="danger" :underline="false" icon="el-icon-delete">
                   删除
                 </el-link>
               </template>
@@ -112,16 +102,11 @@
           <template v-slot:action="{ row, $index }">
             <el-popconfirm
               class="ele-action"
-              title="确定要删除此物品？"
-              @confirm="remove(row)"
+              :title="`确认删除[${row.name}]吗?`"
+              @confirm="handleDelete($index, row)"
             >
               <template v-slot:reference>
-                <el-link
-                  @click="handleDelete($index, row)"
-                  type="danger"
-                  :underline="false"
-                  icon="el-icon-delete"
-                >
+                <el-link type="danger" :underline="false" icon="el-icon-delete">
                   删除
                 </el-link>
               </template>
@@ -164,16 +149,11 @@
           <template v-slot:action="{ row, $index }">
             <el-popconfirm
               class="ele-action"
-              title="确定要删除此物品？"
-              @confirm="remove(row)"
+              :title="`确认删除[${row.name}]吗?`"
+              @confirm="handleDelete($index, row)"
             >
               <template v-slot:reference>
-                <el-link
-                  @click="handleDelete($index, row)"
-                  type="danger"
-                  :underline="false"
-                  icon="el-icon-delete"
-                >
+                <el-link type="danger" :underline="false" icon="el-icon-delete">
                   删除
                 </el-link>
               </template>
@@ -217,16 +197,11 @@
           <template v-slot:action="{ row, $index }">
             <el-popconfirm
               class="ele-action"
-              title="确定要删除此物品？"
-              @confirm="remove(row)"
+              :title="`确认删除[${row.name}]吗?`"
+              @confirm="handleDelete($index, row)"
             >
               <template v-slot:reference>
-                <el-link
-                  @click="handleDelete($index, row)"
-                  type="danger"
-                  :underline="false"
-                  icon="el-icon-delete"
-                >
+                <el-link type="danger" :underline="false" icon="el-icon-delete">
                   删除
                 </el-link>
               </template>
@@ -253,7 +228,11 @@
   export default {
     components: { AddDialog },
     props: {
-      defaultNum: String
+      defaultNum: String,
+      typeList: {
+        type: Array,
+        default: () => []
+      }
     },
     mixins: [matchMixins],
     data () {
@@ -271,13 +250,7 @@
     },
     methods: {
       getMapList () {
-        return this.mapList.map((item) => {
-          const obj = item;
-
-          obj.informationId = obj.id;
-          delete obj.id;
-          return obj;
-        });
+        return this.mapList;
       },
       setDefault (val) {
         switch (val) {
@@ -355,35 +328,31 @@
         }
       },
       handleDelete (index, row) {
-        this.$confirm(`确认删除[${row.name}]吗?`)
-          .then(async () => {
-            switch (this.activeName) {
-              case 'product': {
-                this.productData.splice(index, 1);
-                break;
-              }
-              case 'mould': {
-                this.mouldData.splice(index, 1);
-                break;
-              }
-              case 'part': {
-                this.partData.splice(index, 1);
-                break;
-              }
-              case 'bom': {
-                this.bomData.splice(index, 1);
-                break;
-              }
-              case 'facility': {
-                this.facilityData.splice(index, 1);
-                break;
-              }
-              default:
-                break;
-            }
-            this.mapAddList();
-          })
-          .catch(() => {});
+        switch (this.activeName) {
+          case 'product': {
+            this.productData.splice(index, 1);
+            break;
+          }
+          case 'mould': {
+            this.mouldData.splice(index, 1);
+            break;
+          }
+          case 'part': {
+            this.partData.splice(index, 1);
+            break;
+          }
+          case 'bom': {
+            this.bomData.splice(index, 1);
+            break;
+          }
+          case 'facility': {
+            this.facilityData.splice(index, 1);
+            break;
+          }
+          default:
+            break;
+        }
+        this.mapAddList();
       },
       // 选择的设备
       selectedEquipment (val) {

src/views/classifyManage/itemInformation/components/match-mixins.js

@@ -1,10 +1,4 @@
 export default {
-  props: {
-    typeList: {
-      type: Array,
-      default: () => []
-    }
-  },
   data () {
     return {
       columns_product: [
@@ -214,7 +208,7 @@ export default {
     classificationCodeFormatter (row) {
       let itemName = '';
       this.typeList.map((item) => {
-        if (item.prefix == row.classificationCode) {
+        if (item.code == row.type) {
           itemName = item.name;
         }
       });

src/views/classifyManage/itemInformation/details.vue

@@ -1,221 +1,162 @@
 <template>
-  <div class="content-height p20">
-    <div class="page-title">
-      <el-page-header @back="goBack">
-        <div slot="content" class="pageContent">
-          <div>物品详情 </div>
-          <el-form class="topform">
-            <el-form-item label="物品类型" label-width="70px">
-              <span>{{ itemValue }}</span>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-page-header>
-    </div>
-    <div class="table-container">
-      <div class="tree-col">
-        <ItemDetail ref="itemDetailRef" :customForm="customForm" />
+  <div class="ele-body">
+    <el-card shadow="never">
+      <div class="page-title">
+        <el-page-header @back="goBack">
+          <div slot="content" class="pageContent">
+            <div>物品详情</div>
+            <el-form class="topform">
+              <el-form-item label="物品类型" label-width="70px">
+                <span>{{ itemValue }}</span>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-page-header>
       </div>
-      <div class="attribute-row">
-        <RowDetail
-          ref="rowDetailRef"
-          :customForm="customForm"
-          :defaultNum="defaultNum"
-        />
-        <div
-          class="row-table"
-          v-if="defaultNum != '8' && defaultNum != '2' && defaultNum != '5'"
-        >
-          <el-tabs v-model="activeName" type="card">
-            <el-tab-pane
-              label="匹配产品"
-              name="product"
-              v-if="defaultNum == '3' || defaultNum == '6'"
-            >
-              <el-table
-                :data="productData"
-                class="table-box"
-                :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
+      <div class="table-container">
+        <div class="tree-col">
+          <ItemDetail ref="itemDetailRef" :customForm="customForm" />
+        </div>
+        <div class="attribute-row">
+          <RowDetail
+            ref="rowDetailRef"
+            :customForm="customForm"
+            :defaultNum="defaultNum"
+          />
+          <div
+            class="row-table"
+            v-if="defaultNum != '8' && defaultNum != '2' && defaultNum != '5'"
+          >
+            <el-tabs v-model="activeName" type="card">
+              <el-tab-pane
+                label="匹配产品"
+                name="product"
+                v-if="defaultNum == '3' || defaultNum == '6'"
               >
-                <el-table-column type="index" label="序号" width="50">
-                </el-table-column>
-                <el-table-column prop="code" label="物品编码">
-                </el-table-column>
-                <el-table-column prop="name" label="物品名称">
-                </el-table-column>
-                <el-table-column prop="brandNum" label="牌号">
-                </el-table-column>
-                <el-table-column prop="modelType" label="型号">
-                </el-table-column>
-                <el-table-column
-                  label="物品类型"
-                  prop="classificationCode"
-                  :formatter="classificationCodeFormatter"
+                <!-- 数据表格 -->
+                <ele-pro-table
+                  ref="table"
+                  :columns="columns_product"
+                  :datasource="productData"
+                  :needPage="false"
+                  height="calc(100vh - 265px)"
+                  full-height="calc(100vh - 116px)"
+                  tool-class="ele-toolbar-form"
+                  cache-key="systemOrgUserTable"
                 >
-                </el-table-column>
-                <el-table-column prop="categoryLevelPath" label="分类">
-                </el-table-column>
-              </el-table>
-            </el-tab-pane>
-            <el-tab-pane
-              label="匹配模具"
-              name="mould"
-              v-if="defaultNum == '1' || defaultNum == '4'"
-            >
-              <el-table
-                :data="mouldData"
-                class="table-box"
-                :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
+                </ele-pro-table>
+              </el-tab-pane>
+              <el-tab-pane
+                label="匹配模具"
+                name="mould"
+                v-if="defaultNum == '1' || defaultNum == '4'"
               >
-                <el-table-column type="index" label="序号" width="50">
-                </el-table-column>
-                <el-table-column prop="code" label="物品编码">
-                </el-table-column>
-                <el-table-column prop="name" label="物品名称">
-                </el-table-column>
-                <el-table-column prop="brandNum" label="牌号">
-                </el-table-column>
-                <el-table-column prop="modelType" label="型号">
-                </el-table-column>
-                <el-table-column
-                  label="物品类型"
-                  prop="classificationCode"
-                  :formatter="classificationCodeFormatter"
+                <!-- 数据表格 -->
+                <ele-pro-table
+                  ref="table"
+                  :columns="columns_mould"
+                  :datasource="mouldData"
+                  :needPage="false"
+                  height="calc(100vh - 265px)"
+                  full-height="calc(100vh - 116px)"
+                  tool-class="ele-toolbar-form"
+                  cache-key="systemOrgUserTable"
                 >
-                </el-table-column>
-                <el-table-column prop="categoryLevelPath" label="分类">
-                </el-table-column>
-              </el-table>
-            </el-tab-pane>
-            <el-tab-pane
-              label="匹配备品备件"
-              name="part"
-              v-if="defaultNum == '1'"
-            >
-              <el-table
-                :data="partData"
-                class="table-box"
-                :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
+                </ele-pro-table>
+              </el-tab-pane>
+              <el-tab-pane
+                label="匹配备品备件"
+                name="part"
+                v-if="defaultNum == '1'"
               >
-                <el-table-column type="index" label="序号" width="50">
-                </el-table-column>
-                <el-table-column prop="code" label="物品编码">
-                </el-table-column>
-                <el-table-column prop="name" label="物品名称">
-                </el-table-column>
-                <el-table-column prop="modelType" label="型号">
-                </el-table-column>
-                <el-table-column
-                  label="物品类型"
-                  prop="classificationCode"
-                  :formatter="classificationCodeFormatter"
+                <!-- 数据表格 -->
+                <ele-pro-table
+                  ref="table"
+                  :columns="columns_part"
+                  :datasource="partData"
+                  :needPage="false"
+                  height="calc(100vh - 265px)"
+                  full-height="calc(100vh - 116px)"
+                  tool-class="ele-toolbar-form"
+                  cache-key="systemOrgUserTable"
                 >
-                </el-table-column>
-                <el-table-column prop="categoryLevelPath" label="分类">
-                </el-table-column>
-              </el-table>
-            </el-tab-pane>
-            <el-tab-pane label="BOM表" name="bom" v-if="defaultNum == '4'">
-              <div class="bom-top">
-                <div class="top-input">
-                  <span>基本数量</span>
-                  <div class="input-box">{{ customForm.basicNum }}</div>
-                  <span>{{ customForm.measuringUnit }}</span>
-                </div>
-              </div>
-              <el-table
-                :data="bomData"
-                class="table-box"
-                :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
-              >
-                <el-table-column type="index" label="序号" width="50">
-                </el-table-column>
-                <el-table-column prop="code" label="物品编码">
-                </el-table-column>
-                <el-table-column prop="name" label="物品名称">
-                </el-table-column>
-                <el-table-column prop="brandNum" label="牌号">
-                </el-table-column>
-                <el-table-column
-                  label="物品类型"
-                  prop="classificationCode"
-                  :formatter="classificationCodeFormatter"
+                </ele-pro-table>
+              </el-tab-pane>
+              <el-tab-pane label="BOM表" name="bom" v-if="defaultNum == '4'">
+                <!-- 数据表格 -->
+                <ele-pro-table
+                  ref="table"
+                  :columns="columns_bom"
+                  :datasource="bomData"
+                  :needPage="false"
+                  height="calc(100vh - 265px)"
+                  full-height="calc(100vh - 116px)"
+                  tool-class="ele-toolbar-form"
+                  cache-key="systemOrgUserTable"
                 >
-                </el-table-column>
-                <el-table-column prop="categoryLevelPath" label="分类">
-                </el-table-column>
-                <el-table-column prop="num" label="数量"> </el-table-column>
-                <el-table-column prop="date" label="计量单位">
-                </el-table-column>
-              </el-table>
-            </el-tab-pane>
-            <el-tab-pane
-              label="匹配设备"
-              name="facility"
-              v-if="defaultNum == '6' || defaultNum == '7'"
-            >
-              <el-table
-                :data="facilityData"
-                class="table-box"
-                :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
+                  <!-- 表头工具栏 -->
+                  <template v-slot:toolbar>
+                    <div class="bom-top">
+                      <div class="top-input">
+                        <span>基本数量</span>
+                        <div class="input-box">{{ customForm.basicNum }}</div>
+                        <span>{{ customForm.measuringUnit }}</span>
+                      </div>
+                    </div>
+                  </template>
+                  <!-- 操作列 -->
+                  <template v-slot:num="{ row, $index }">
+                    {{ row.num }}
+                  </template>
+                </ele-pro-table>
+              </el-tab-pane>
+              <el-tab-pane
+                label="匹配设备"
+                name="facility"
+                v-if="defaultNum == '6' || defaultNum == '7'"
               >
-                <el-table-column type="index" label="序号" width="50">
-                </el-table-column>
-                <el-table-column prop="code" label="物品编码">
-                </el-table-column>
-                <el-table-column prop="name" label="物品名称">
-                </el-table-column>
-                <el-table-column prop="modelType" label="型号">
-                </el-table-column>
-                <el-table-column
-                  label="物品类型"
-                  prop="classificationCode"
-                  :formatter="classificationCodeFormatter"
+                <!-- 数据表格 -->
+                <ele-pro-table
+                  ref="table"
+                  :columns="columns_facility"
+                  :datasource="facilityData"
+                  :needPage="false"
+                  height="calc(100vh - 265px)"
+                  full-height="calc(100vh - 116px)"
+                  tool-class="ele-toolbar-form"
+                  cache-key="systemOrgUserTable"
                 >
-                </el-table-column>
-                <el-table-column prop="categoryLevelPath" label="分类">
-                </el-table-column>
-              </el-table>
-            </el-tab-pane>
-            <!--                   <div class="pagination">
-                     <el-pagination
-                       background
-                       layout="total, sizes, prev, pager, next, jumper"
-                       :total="pagination.total"
-                       :page-sizes="[5, 10, 20, 50, 100]"
-                       :page-size="pagination.size"
-                       :current-page.sync="pagination.page"
-                       @current-change="handleCurrent"
-                       @size-change="handleSize"
-                     >
-                     </el-pagination>
-                   </div> -->
-          </el-tabs>
+                </ele-pro-table>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
         </div>
       </div>
-    </div>
+    </el-card>
   </div>
 </template>
 
 <script>
+  import matchMixins from './components/match-mixins';
   import ItemDetail from './components/ItemDetail';
   import RowDetail from './components/RowDetail';
+  import dictMixins from '@/mixins/dictMixins';
   import { getDetails } from '@/api/classifyManage/itemInformation';
   export default {
     components: { ItemDetail, RowDetail },
+    mixins: [dictMixins, matchMixins],
     data () {
       return {
-        pageTitle: '',
-        typeList: [
-          { id: 1, value: '1  生产设备', prefix: '1', code: 1 },
-          { id: 2, value: '2  舟皿', prefix: '2', code: 2 },
-          { id: 3, value: '5  周转车', prefix: '5', code: 5 },
-          { id: 4, value: '6  模具', prefix: '6', code: 6 },
-          { id: 5, value: '7  备品备件', prefix: '7', code: 7 },
-          { id: 6, value: '3  物料', prefix: '3', code: 3 },
-          { id: 7, value: '4  产品', prefix: '4', code: 4 },
-          { id: 8, value: '8  耗材', prefix: '8', code: 8 }
-        ],
+        // typeList: [
+        //   { id: 1, value: '1  生产设备', prefix: '1', code: 1 },
+        //   { id: 2, value: '2  舟皿', prefix: '2', code: 2 },
+        //   { id: 3, value: '5  周转车', prefix: '5', code: 5 },
+        //   { id: 4, value: '6  模具', prefix: '6', code: 6 },
+        //   { id: 5, value: '7  备品备件', prefix: '7', code: 7 },
+        //   { id: 6, value: '3  物料', prefix: '3', code: 3 },
+        //   { id: 7, value: '4  产品', prefix: '4', code: 4 },
+        //   { id: 8, value: '8  耗材', prefix: '8', code: 8 }
+        // ],
         defaultNum: '1',
         // itemForm:{
         //   priceType:0, dateType:0,
@@ -237,26 +178,50 @@
         itemValue: ''
       };
     },
-    created () {
+    computed: {
+      prefix () {
+        const obj =
+          (this.dict[this.dictEnum['分类编号']] || []).find(
+            (itm) => itm.dictCode === this.defaultNum
+          ) || {};
+        return obj && obj.dictValue;
+      },
+      typeList () {
+        const noList = this.dict[this.dictEnum['分类编号']] || [];
+
+        return (this.dict[this.dictEnum['类型用途']] || []).map((item) => {
+          const obj =
+            noList.find((itm) => itm.dictCode === item.dictCode) || {};
+          return {
+            ...item,
+            value: `${obj.dictValue} ${item.dictValue}`,
+            name: item.dictValue,
+            prefix: obj.dictValue,
+            code: item.dictCode
+          };
+        });
+      }
+    },
+    async created () {
+      await this.requestDict('分类编号');
+      await this.requestDict('类型用途');
       this.getDetilInfo(this.$route.query.id);
     },
     methods: {
       async getDetilInfo (id) {
-        const res = await getDetails(id);
-        if (res.success) {
-          this.customForm = res.data;
-          this.defaultNum = res.data.classificationCode;
-          this.formatterValue(res.data.classificationCode);
-          this.setDefault(res.data.classificationCode);
-          for (const key in this.customForm.categoryVoRelationMap) {
-            this.matchList(key, this.customForm.categoryVoRelationMap);
-          }
+        const data = await getDetails(id);
+        this.customForm = data;
+        this.defaultNum = data.type;
+        this.formatterValue(data.type);
+        this.setDefault(data.type);
+        for (const key in this.customForm.categoryVoRelationMap) {
+          this.matchList(key, this.customForm.categoryVoRelationMap);
         }
       },
 
       formatterValue (code) {
         this.typeList.map((item) => {
-          if (item.prefix == code) {
+          if (item.code == code) {
             this.itemValue = item.value;
           }
         });
@@ -335,105 +300,112 @@
         this.pagination.page = 1;
         this.pagination.size = size;
         // this._getList(this.params)
-      },
+      }
 
       // 物品类型格式化
-      classificationCodeFormatter (row) {
-        let itemName = '';
-        this.typeList.map((item) => {
-          if (item.prefix == row.classificationCode) {
-            itemName = item.value;
-          }
-        });
-        return itemName;
-      }
+      // classificationCodeFormatter (row) {
+      //   let itemName = '';
+      //   this.typeList.map((item) => {
+      //     if (item.code == row.type) {
+      //       itemName = item.value;
+      //     }
+      //   });
+      //   return itemName;
+      // }
     }
   };
 </script>
 
 <style lang="scss" scoped>
-  :deep(.page-title) {
-    border-bottom: 1px solid #eaeefb;
-    padding-bottom: 8px;
-    margin-bottom: 16px;
-    display: flex;
-    align-items: center;
-    .el-page-header__left {
+  .ele-body {
+    :deep(.page-title) {
+      border-bottom: 1px solid #eaeefb;
+      padding-bottom: 8px;
+      margin-bottom: 16px;
       display: flex;
       align-items: center;
+      .el-page-header__left {
+        display: flex;
+        align-items: center;
+      }
+      .pageContent {
+        display: flex;
+        align-items: center;
+        font-size: 18px;
+        color: #303133;
+        .topform {
+          margin-left: 30px;
+          display: flex;
+          align-items: center;
+          .el-form-item {
+            margin-bottom: 0;
+          }
+        }
+      }
     }
-    .pageContent {
+    .table-container {
+      flex: 1;
       display: flex;
-      align-items: center;
-      font-size: 18px;
-      color: #303133;
-      .topform {
-        margin: 5px 0 0 30px;
+      overflow: hidden;
+      .tree-col {
+        margin-right: 10px;
+        width: 25%;
+        min-width: 250px;
+        overflow: auto;
+        padding: 20px 20px 20px 10px;
+        background-color: #fff;
+        margin-top: 10px;
+        border: 1px solid #e6ebf5;
+        border-radius: 4px;
+        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
       }
     }
-  }
-  .table-container {
-    flex: 1;
-    display: flex;
-    overflow: hidden;
-    .tree-col {
-      margin-right: 10px;
-      width: 25%;
-      min-width: 250px;
-      overflow: auto;
-      padding: 20px 20px 20px 10px;
-      background-color: #fff;
+
+    :deep(.attribute-row) {
+      padding: 20px 5px;
+      background: #fff;
       margin-top: 10px;
+      overflow: auto;
+      flex: 1;
       border: 1px solid #e6ebf5;
       border-radius: 4px;
       box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-    }
-  }
-
-  :deep(.attribute-row) {
-    padding: 20px 5px;
-    background: #fff;
-    margin-top: 10px;
-    overflow: auto;
-    flex: 1;
-    border: 1px solid #e6ebf5;
-    border-radius: 4px;
-    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-    position: relative;
-    .row-table {
-      width: 100%;
-      margin: 20px auto 0;
-      .table-box {
+      position: relative;
+      .row-table {
         width: 100%;
-        margin: 10px auto;
-        min-height: 400px;
-      }
-      .bom-top {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        .top-input {
-          margin-left: 20px;
+        margin: 20px auto 0;
+        .table-box {
+          width: 100%;
+          margin: 10px auto;
+          min-height: 400px;
+        }
+        .bom-top {
+          width: 100%;
           display: flex;
           align-items: center;
           justify-content: flex-start;
-          .input-box {
-            width: 150px;
-            margin: 0 10px;
-            display: inline-box;
+          .top-input {
+            margin-left: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            .input-box {
+              width: 150px;
+              margin: 0 10px;
+              display: inline-box;
+            }
           }
         }
       }
-    }
-    .page-footer-btn {
-      background: #fff;
-      z-index: 1;
-      position: fixed;
-      bottom: 40px;
-      right: 80px;
-      text-align: right;
-      width: 50%;
+      .page-footer-btn {
+        background: #fff;
+        z-index: 1;
+        position: fixed;
+        bottom: 40px;
+        right: 80px;
+        text-align: right;
+        width: 50%;
+      }
     }
   }
 </style>