kd-aiot-frontend/src/views/material/BOMmanage/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <BOMSearch
        @search="reload"
        :statusOpt="statusOpt"
        :categoryCode="where.categoryCode"
      />
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="PBOM" name="1"> </el-tab-pane>
        <el-tab-pane label="MBOM" name="2"> </el-tab-pane>
        <el-tab-pane label="ABOM" name="3"> </el-tab-pane>

        <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-link
              style="margin-right: 20px"
              type="primary"
              @click="handelDetail(row)"
              >详情</el-link
            >
            <el-switch
              :active-value="'1'"
              :inactive-value="'0'"
              @change="openBom(row, $event)"
              v-model="row.status"
            >
            </el-switch>
          </template>
        </ele-pro-table>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import BOMSearch from '../materialBOM/components/BOM-search.vue';
  import { getBomPageList, 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: '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: '操作'
          }
        ],
        statusOpt: {
          '': '全部',
          0: '已停用',
          1: '已发布'
        },
        loading: false,
        loadingInstance: null,
        where: {},

        activeName: "1"
      };
    },
    mounted() {
      this.initData();
    },
    activated() {
      this.initData();
    },
    methods: {
      initData() {
        let { categoryId, code } = this.$route.query;
        if (categoryId && code) {
          this.where.categoryCode = code;
          this.where.categoryId = categoryId;
          getBomPageList({
            status: 1,
            categoryCode: this.where.categoryCode,
            pageNum: 1,
            size: 10
          }).then((data) => {
            if (data.count > 1) {
              this.$refs.table.setData(data.list || []);
            } else {
              this.handelDetail(
                data.list[0]
                  ? data.list[0]
                  : { categoryId: this.where.categoryId },
                true
              );
            }
          });
        } else {
          this.reload();
        }
      },
      /* 启用关闭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 }) {
        return getBomPageList({
          ...where,
          bomType:  Number(this.activeName),
          pageNum: page,
          size: limit
        });
      },
      handelDetail(row, noBack) {
        this.$router.push({
          path: '/material/BOMmanage/details',
          query: { versions: row.versions, categoryId: row.categoryId, noBack }
        });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ where });
      },
      /* 显示编辑 */
      handelEdit(type, row) {
        this.$refs.editDialogRef.open(type, row);
      },
      /* 删除 */
      remove() {
        this.$confirm('确定要删除选中的字典吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            if (this.$refs.dictData.selection.length == 0) {
              this.$message({
                message: '当前未选择数据',
                type: 'error'
              });
              return;
            }
            let ids = this.$refs.dictData.selection.map((item) => item.id);
            const loading = this.$loading({ lock: true });

            removeDictionary(ids, true)
              .then((msg) => {
                loading.close();
                this.$message.success(msg);
                this.reload();
              })
              .catch((e) => {
                loading.close();
                // this.$message.error(e.message);
              });
          })
          .catch(() => {});
      },

      // 刷新数据
      refreshData() {
        this.loading = true;
        syncBom()
          .then((res) => {
            if (res == '0') {
              this.loading = false;
              this.$message.success('数据刷新成功！');
              this.reload();
            }
          })
          .catch((e) => {
            this.loading = false;
          });
      },

      handleClick(tab) {
        this.activeName = tab.name
        getBomPageList({
          pageNum: 1,
          size: 10,
          bomType:  Number(this.activeName)
        }).then((data) => {
          this.$refs.table.setData(data.list || []);
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ele-body {
    height: 100%;
    ::v-deep .el-card {
      height: 100%;
      .el-card__body {
        height: 100%;
        display: flex;
        flex-direction: column;
        .dict-table {
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
            overflow-y: auto;
          }
        }
      }
    }
  }
</style>