55

src/views/material/BOMmanage/components/detailedList.vue

@@ -1,128 +1,125 @@
 <template>
-    <div class="ele-body">
-      <el-card shadow="never">
-        <BOMSearch
-          @search="reload"
-          :statusOpt="statusOpt"
-          :categoryCode="where.categoryCode"
-        />
-        <ele-pro-table
-            ref="table"
-            :columns="columns"
-            :datasource="datasource"
-            :initLoad="false"
-            class="dict-table"
-            tool-class="ele-toolbar-actions"
+  <div class="ele-body">
+    <el-card shadow="never">
+      <BOMSearch
+        @search="reload"
+        :statusOpt="statusOpt"
+        :categoryCode="where.categoryCode"
+      />
+      <ele-pro-table
+        ref="table"
+        :columns="columns"
+        :datasource="datasource"
+        :initLoad="false"
+        class="dict-table"
+        tool-class="ele-toolbar-actions"
+      >
+        <!-- 表头工具栏 -->
+        <template v-slot:action="{ row }">
+          <el-switch
+            :active-value="'1'"
+            :inactive-value="'0'"
+            @change="openBom(row, $event)"
+            v-model="row.status"
           >
-            <!-- 表头工具栏 -->
-            <template v-slot:action="{ row }">
-              <el-switch
-                :active-value="'1'"
-                :inactive-value="'0'"
-                @change="openBom(row, $event)"
-                v-model="row.status"
-              >
-              </el-switch>
-            </template>
-          </ele-pro-table>
-      </el-card>
-    </div>
-  </template>
-  
-  <script>
-    import BOMSearch from './BOM-search.vue';
-    import {  getBomPageCategoryId, startAndStop } from '@/api/material/BOM';
-  
-    export default {
-      name: 'SystemDictionary',
-      components: { BOMSearch },
-      data() {
-        return {
-          // 表格列配置
-          columns: [
-            {
-              label: '序号',
-              columnKey: 'index',
-              type: 'index',
-              width: 55,
-              align: 'center',
-              showOverflowTooltip: true
-            },
-            {
-              prop: 'code',
-              label: 'BOM编码',
-              showOverflowTooltip: true
-            },
-            {
-              prop: 'name',
-              label: 'BOM名称',
-              showOverflowTooltip: true
-            },
-            {
-              prop: 'categoryCode',
-              label: '产品编码',
-              showOverflowTooltip: true
-            },
-            {
-              prop: 'categoryName',
-              label: '产品名称',
-              showOverflowTooltip: true
-            },
-            {
-              prop: 'dosage',
-              label: '用量',
-              showOverflowTooltip: true
-            },
+          </el-switch>
+        </template>
+      </ele-pro-table>
+    </el-card>
+  </div>
+</template>
 
-            {
-              prop: 'measuringUnit',
-              label: '计量单位',
-              showOverflowTooltip: true
-            },
-            {
-              prop: 'versions',
-              label: '版本'
-            },
-            {
-              prop: 'status ',
-              label: '状态',
-              formatter: (row) => {
-                return this.statusOpt[+row.status];
-              }
-            },
-            {
-              prop: 'createName',
-              label: '创建人',
-              showOverflowTooltip: true
-            },
-            {
-              prop: 'createTime',
-              label: '创建日期',
-              showOverflowTooltip: true
-            },
-            {
-              action: 'action',
-              slot: 'action',
-              label: '操作'
+<script>
+  import BOMSearch from './BOM-search.vue';
+  import { getBomPageCategoryId, startAndStop } from '@/api/material/BOM';
+
+  export default {
+    name: 'SystemDictionary',
+    components: { BOMSearch },
+    data() {
+      return {
+        // 表格列配置
+        columns: [
+          {
+            label: '序号',
+            columnKey: 'index',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'code',
+            label: 'BOM编码',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'name',
+            label: 'BOM名称',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'categoryCode',
+            label: '产品编码',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'categoryName',
+            label: '产品名称',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'dosage',
+            label: '用量',
+            showOverflowTooltip: true
+          },
+
+          {
+            prop: 'measuringUnit',
+            label: '计量单位',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'versions',
+            label: '版本'
+          },
+          {
+            prop: 'status ',
+            label: '状态',
+            formatter: (row) => {
+              return this.statusOpt[+row.status];
             }
-          ],
-          statusOpt: {
-            '': '全部',
-            0: '已停用',
-            1: '已发布'
           },
-          loading: false,
-          loadingInstance: null,
-          where: {},
-  
-          attrObj: {}
+          {
+            prop: 'createName',
+            label: '创建人',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'createTime',
+            label: '创建日期',
+            showOverflowTooltip: true
+          },
+          {
+            action: 'action',
+            slot: 'action',
+            label: '操作'
+          }
+        ],
+        statusOpt: {
+          '': '全部',
+          0: '已停用',
+          1: '已发布'
+        },
+        loading: false,
+        loadingInstance: null,
+        where: {},
 
-        };
-      },
-      mounted() {
-     
-      },
-      props: {
+        attrObj: {}
+      };
+    },
+    mounted() {},
+    props: {
       attributeData: {
         type: Object,
         default: {}
@@ -131,78 +128,72 @@
 
     watch: {
       attributeData(val) {
-    this.attrObj = val
-
-    this.$nextTick(() => {
+        this.attrObj = val;
+        this.$refs.table.setData([]);
+        this.$nextTick(() => {
           this.$refs.table.reload({
-            pageNum: 1,
+            pageNum: 1
           });
         });
-      }  
+      }
     },
-  
-      methods: {
 
-        /* 启用关闭BOM */
-        openBom(row, boolean) {
-          this.loadingInstance = this.$loading({
-            lock: true,
-            text: boolean ? '启用中...' : '关闭中...',
-            background: 'rgba(0, 0, 0, 0.7)'
-          });
-          startAndStop({ id: row.id, status: row.status }).then(() => {
-            this.$message.success('操作成功');
-            this.loadingInstance.close();
-          });
-          setTimeout(() => {}, 2000);
-        },
-        /* 表格数据源 */
-        datasource({ where, page, limit }) {
-            if(!this.attrObj.id) {
-                return false
-            }
-          return getBomPageCategoryId({
-            ...where,
-            pageNum: page,
-            size: limit,
-            id: this.attrObj.id,
-            bomType: this.attrObj.bomType,
-          });
-        },
-   
-        /* 刷新表格 */
-        reload(where) {
-          this.$refs.table.reload({ where });
-        },
+    methods: {
+      /* 启用关闭BOM */
+      openBom(row, boolean) {
+        this.loadingInstance = this.$loading({
+          lock: true,
+          text: boolean ? '启用中...' : '关闭中...',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        startAndStop({ id: row.id, status: row.status }).then(() => {
+          this.$message.success('操作成功');
+          this.loadingInstance.close();
+        });
+        setTimeout(() => {}, 2000);
+      },
+      /* 表格数据源 */
+      datasource({ where, page, limit }) {
+        if (!this.attrObj.id) {
+          return false;
+        }
+        return getBomPageCategoryId({
+          ...where,
+          pageNum: page,
+          size: limit,
+          id: this.attrObj.id,
+          bomType: this.attrObj.bomType
+        });
+      },
 
-  
-  
-  
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ where });
       }
-    };
-  </script>
-  
-  <style lang="scss" scoped>
-    .ele-body {
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .ele-body {
+    height: 100%;
+    ::v-deep .el-card {
       height: 100%;
-      ::v-deep .el-card {
+      .el-card__body {
         height: 100%;
-        .el-card__body {
-          height: 100%;
+        display: flex;
+        flex-direction: column;
+        .dict-table {
+          flex: 1;
+          overflow: hidden;
           display: flex;
           flex-direction: column;
-          .dict-table {
+          .el-table {
             flex: 1;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            .el-table {
-              flex: 1;
-              overflow-y: auto;
-            }
+            overflow-y: auto;
           }
         }
       }
     }
-  </style>
-  
+  }
+</style>