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"
        :isUpload="isUpload"
      />

      <!--  -->

      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="EBOM" name="4"> </el-tab-pane>
        <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"
          class="dict-table"
          tool-class="ele-toolbar-actions"
          @sort-change="onSortChange"
          :page-size="pageSize"
          @columns-change="handleColumnChange"
          :cache-key="useNewColumns ? cacheKeyUrl : cacheKeyUrlOld"
        >
          <template v-slot:approvalStatus="{ row }">
            <el-link
              type="primary"
              :underline="false"
              @click="handleDetails(row)"
            >
              {{ approvalStatusOpt[+row.approvalStatus] }}
            </el-link>
          </template>

          <!-- 序号：前端自己渲染行号 -->
          <template v-slot:rowIndex="{ $index }">{{
            (currentPage - 1) * currentLimit + $index + 1
          }}</template>

          <!-- 总重：前端按 用量 × 单重 计算（用量/单重改了立即跟着变） -->
          <template v-slot:totalWeight="{ row }">{{ totalWeightOf(row) }}</template>

          <template v-slot:code="{ row }">
            <el-link
              type="primary"
              :underline="false"
              @click="handelDetail(row)"
              >{{ row.code }}</el-link
            >
          </template>

          <template v-slot:versions="{ row }">
            <!-- 版本为空就留空，不显示"无" -->
            <template v-if="row.versions">V{{ row.versions }}.0</template>
          </template>
          <template v-slot:isTemp="{ row }">
            <el-tag size="mini" v-if="row.isTemp == 1">主数据</el-tag>
          </template>

          <template v-slot:rootCategoryLevelId="{ row }">
            {{ rootCategoryLevelIdText(row.rootCategoryLevelId) }}
          </template>
          <template v-slot:componentAttribute="{ row }">
            <el-select
              v-model="row.componentAttribute"
              filterable
              multiple
              disabled
              class="ele-block"
              size="mini"
            >
              <el-option
                v-for="item in sxtList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
            <!-- {{  attributeTypeText(row.attributeType) }} -->
          </template>

          <template v-slot:attributeType="{ row }">
            {{ attributeTypeText(row.attributeType) }}
          </template>

          <template v-slot:produceType="{ row }">
            <el-select
              v-model="row.produceType"
              filterable
              multiple
              disabled
              class="ele-block"
              size="mini"
            >
              <el-option
                v-for="item in produceTypeList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </template>

          <!-- 表头工具栏 -->
          <template v-slot:action="{ row }">
            <!-- <el-link type="primary" @click="handelDetail(row)">详情</el-link> -->

            <el-link
              v-if="
                row.status != 1 &&
                (row.approvalStatus == 0 || row.approvalStatus == 3) &&
                $hasPermission('main:bomcategory:delete')
              "
              type="primary"
              @click="handSubmit(row)"
              >发布</el-link
            >
            <el-link
              v-if="
                row.approvalStatus == 1 &&
                $hasPermission('main:bomcategory:withdraw')
              "
              type="primary"
              @click="handWithdraw(row)"
              >撤回</el-link
            >

            <el-link
              type="danger"
              :underline="false"
              v-if="
                activeName == 1 &&
                row.status != 1 &&
                (row.approvalStatus == 0 || row.approvalStatus == 3) &&
                $hasPermission('main:bomcategory:delete')
              "
              @click="handDel(row)"
            >
              删除
            </el-link>
          </template>
        </ele-pro-table>
      </el-tabs>
    </el-card>

    <el-dialog
      title="发布"
      :visible.sync="isSubmit"
      v-if="isSubmit"
      width="30%"
      center
    >
      <div>
        <el-radio v-model="radioSubmit" :label="1">药品</el-radio>
        <el-radio v-model="radioSubmit" :label="2">器械</el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isSubmit = false">取 消</el-button>
        <el-button type="primary" @click="handJsSubmit()">确 定</el-button>
      </span>
    </el-dialog>

    <LCdetail ref="detailRef"></LCdetail>
    <process-submit-dialog
      api-fun-name="purchaseinquiryStatusAPI"
      :processSubmitDialogFlag.sync="processSubmitDialogFlag"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="reload"
    ></process-submit-dialog>
    <BomDetailsPop ref="bomDrawer"></BomDetailsPop>
  </div>
</template>

<script>
  import tabMixins from '@/mixins/tableColumnsMixin';
  import { produceTypeList } from '@/enum/dict.js';
  import processSubmitDialog from '@/components/processSubmitDialog/processSubmitDialog.vue';

  import BOMSearch from './components/BOM-search.vue';
  import {
    getBomPageList,
    startAndStop,
    bomSubmit,
    jsBomSubmit,
    deviceBomSubmit,
    deleteBomTreeList,
    withdrawBom
  } from '@/api/material/BOM';
  import LCdetail from './components/LCdetail.vue';
  import { getByCode, parameterGetByCode } from '@/api/system/dictionary-data';
  import BomDetailsPop from '../BOMmanage/detailsPop.vue';
  import { mapGetters } from 'vuex';

  export default {
    name: 'SystemDictionary',
    components: { BOMSearch, LCdetail, BomDetailsPop, processSubmitDialog },
    mixins: [tabMixins],
    data() {
      return {
        produceTypeList,
        processSubmitDialogFlag: false,
        // 老 columns 方案（默认 20 列全部可见）
        oldColumnsConfig: [
          {
            label: '序号',
            columnKey: 'index',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: 'BOM编码',
            showOverflowTooltip: true,
            slot: 'code',
            width: 120,
            sortable: true
          },
          {
            prop: 'name',
            label: 'BOM名称',
            showOverflowTooltip: true,
            slot: 'name',
            width: 120,
            sortable: true
          },
          {
            prop: 'categoryCode',
            label: '编码',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryName',
            label: '名称',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            showOverflowTooltip: true
          },
          {
            prop: 'modelType',
            label: '型号',
            showOverflowTooltip: true
          },

          {
            prop: 'rootCategoryLevelId',
            slot: 'rootCategoryLevelId',
            label: '物品分类',
            showOverflowTooltip: true
          },
          {
            slot: 'componentAttribute',
            prop: 'componentAttribute',
            label: '属性类型',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            slot: 'attributeType',
            prop: 'attributeType',
            label: '存货类型',
            showOverflowTooltip: true
          },
          {
            prop: 'produceType',
            slot: 'produceType',
            label: '生产类型',
            showOverflowTooltip: true,
            minWidth: 180
          },

          {
            prop: 'versions',
            slot: 'versions',
            label: '版本'
          },
          {
            prop: 'resourceBomVersion',
            label: '来源版本',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'status',
            label: '状态',
            formatter: (row) => {
              return this.statusOpt[+row.status];
            }
          },
          {
            prop: 'approvalStatus',
            label: '审核状态',
            slot: 'approvalStatus'
          },

          // {
          //   width: 100,
          //   prop: 'isTemp',
          //   slot: 'isTemp',
          //   label: '主数据'
          // },

          {
            prop: 'createName',
            label: '创建人',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            showOverflowTooltip: true,
            slot: 'createTime',
            sortable: true
          },

          {
            prop: 'updateTime',
            label: '修改时间',
            showOverflowTooltip: true,
            slot: 'updateTime',
            sortable: true
          },
          {
            columnKey: 'action',
            slot: 'action',
            label: '操作',
            width: 170,
            align: 'center'
          }
        ],
        // 新 columns 方案（PBOM + is_runtian===1 时使用），内容与 detailedList.vue 的 newColumnsConfig 保持一致
        newColumnsConfig: [
          {
            prop: 'level',
            label: '零部件层级',
            align: 'center',
            showOverflowTooltip: true,
            width: 100
          },
          {
            // 序号：普通列 + 前端插槽渲染行号（见模板 v-slot:rowIndex）
            // 不能用 type: 'index'：index 列不在列设置缓存里，ele-pro-table（columnsSort 默认 true）
            // 会把找不到缓存位置的列排到最前面，所以它永远显示在第一列。
            prop: 'rowIndex',
            columnKey: 'rowIndex',
            label: '序号',
            width: 90,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'rowIndex'
          },
          {
            prop: 'code',
            label: '物料编码',
            slot: 'code',
            showOverflowTooltip: true,
            width: 180
          },
          {
            prop: 'imgCode',
            label: '零部件图号(规格型号)',
            showOverflowTooltip: true,
            width: 120
          },
          {
            prop: 'versions',
            slot: 'versions',
            label: '图纸版本',
            showOverflowTooltip: true,
            align: 'center',
            width: 90
          },
          {
            prop: 'updateTime',
            label: '修改时间',
            width: 160,
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '零件名称',
            showOverflowTooltip: true,
            width: 150
          },
          {
            prop: 'dosage',
            slot: 'dosage',
            label: '单台用量',
            width: 100,
            headerSlot: 'dosageHead'
          },
          {
            prop: 'measuringUnit',
            label: '计量单位',
            showOverflowTooltip: true,
            align: 'center',
            width: 90
          },
          {
            prop: 'brandNum',
            label: '材质',
            showOverflowTooltip: true,
            width: 100
          },
          {
            prop: 'netWeight',
            label: '单重',
            showOverflowTooltip: true,
            align: 'right',
            width: 100
          },
          {
            prop: 'totalWeight',
            label: '总重',
            slot: 'totalWeight',
            showOverflowTooltip: true,
            align: 'right',
            width: 100
          },
          {
            prop: 'remark',
            label: '备注',
            showOverflowTooltip: true,
            width: 100
          },
          {
            prop: 'createName',
            label: '创建人',
            showOverflowTooltip: true,
            width: 100
          },
          {
            prop: 'createTime',
            label: '创建日期',
            width: 160,
            showOverflowTooltip: true
          }
        ],
        // 系统参数 is_runtian 原始值（false=未加载/失败，其他=接口返回值）
        isRuntianValue: false,
        sxtList: [
          {
            label: '自制件',
            value: 1
          },
          {
            label: '采购件',
            value: 2
          },
          {
            label: '外协件',
            value: 3
          },
          {
            label: '受托件',
            value: 4
          }
        ],
        statusOpt: {
          0: '草稿',
          1: '已发布',
          2: '已停用'
        },

        approvalStatusOpt: {
          0: '未提交',
          1: '审核中',
          2: '审核通过',
          3: '审核不通过'
        },
        loading: false,
        loadingInstance: null,
        dictList: [],
        where: {},
        attributeList: [
          // {
          //   label: '总装',
          //   value: 1
          // },
          // {
          //   label: '部件',
          //   value: 2
          // },
          // {
          //   label: '零件',
          //   value: 3
          // },
          // {
          //   label: '原材料',
          //   value: 4
          // }
        ],
        sort: {},
        // 当前分页位置：序号要跨页连续（第 2 页从 21 开始，不重置）
        currentPage: 1,
        currentLimit: 20,
        rootCategoryLevelIdList: [
          {
            label: '产品',
            value: 9
          },
          {
            label: '物料',
            value: 1
          },
          {
            label: '生产设备',
            value: 4
          },
          {
            label: '模具',
            value: 5
          },
          {
            label: '备品备件',
            value: 6
          },
          {
            label: '零部件',
            value: 3
          },
          {
            label: '舟皿',
            value: 8
          },
          {
            label: '消耗材料',
            value: 10
          },
          {
            label: '包装材料',
            value: 13
          },
          {
            label: '生产辅助设备',
            value: 14
          },
          {
            label: '仪表计量设备',
            value: 15
          },
          {
            label: '会计科目',
            value: 23
          },
          {
            label: '周转盘',
            value: 26
          },
          {
            label: '废品',
            value: 28
          }
        ],

        activeName: '1',

        isSubmit: false,
        JsRId: null,
        radioSubmit: 1,
        currentNodeData: {},
        pageSize: this.$store.state.tablePageSize,
        // 是否启用新 columns 方案（true=新方案，false=老方案）；层级序号只在新方案生效
        useNewColumns: true,
        // 序号列由 type:index 改成 rowIndex 数据列，换 key 清一次列设置缓存
        // （ele-pro-table 按列 key 从 localStorage 恢复列顺序，新列不在旧缓存里会被排到最前）
        cacheKeyUrl: '68be265a-material-BOMmanage-v3',
        cacheKeyUrlOld: '68be265a-material-BOMmanage-old-v1',
        isUpload: true
      };
    },

    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      },
      ...mapGetters(['user']),
      // 新方案默认展示的 prop 集合（自动从 newColumnsConfig 推导，避免漏配导致老列覆盖新列）
      newPropSet() {
        const set = new Set();
        this.newColumnsConfig.forEach((c) => {
          if (c.prop) set.add(c.prop);
        });
        return set;
      },
      // 操作列：固定右侧，不参与新老的合并
      actionColumn() {
        return {
          columnKey: 'action',
          slot: 'action',
          label: '操作',
          width: 170,
          align: 'center'
        };
      },
      // 表格列：按 useNewColumns 决定输出老方案还是新方案
      columns() {
        if (this.useNewColumns) {
          // 老方案里独有、且不在新方案里的列 → 追加到末尾，默认隐藏，用户可手动显示
          const extras = this.oldColumnsConfig
            .filter((c) => {
              if (c.columnKey === 'action') return false; // 操作列单独追加
              if (c.type === 'index' || c.columnKey === 'index') return false;
              if (c.prop && this.newPropSet.has(c.prop)) return false;
              return true;
            })
            .map((c) => ({ ...c, show: false }));
          return [...this.newColumnsConfig, ...extras, this.actionColumn];
        }
        // 老方案：保持原有顺序
        return [...this.oldColumnsConfig];
      }
    },

    created() {
      this.getDictList('productionType');
      this.getAttriButeList('inventory_type');
      this.getRuntianConfig();
      // 新老两套列方案各有自己的列设置缓存，打开页面时自愈一次
      this.healColumnsCache(this.cacheKeyUrlOld, this.oldColumnsConfig);
      this.healColumnsCache(this.cacheKeyUrl, this.newColumnsConfig);
    },
    methods: {
      // 总重 = 单台用量 × 单重（前端计算）
      totalWeightOf(row) {
        const toNumber = (v) =>
          v === null || v === undefined || v === '' ? null : Number(v);
        const dosage = toNumber(row && row.dosage);
        const netWeight = toNumber(row && row.netWeight);
        if (dosage === null || netWeight === null) {
          return '';
        }
        if (isNaN(dosage) || isNaN(netWeight)) {
          return '';
        }
        return (dosage * netWeight).toFixed(2);
      },

      // ele-pro-table 的列顺序是按 localStorage 里的列缓存恢复的：配置里新增/删除列之后，
      // 旧缓存里没有新列 → 新列会被排到第一列（表现为“序号跑到第一列，点列重置才恢复”）。
      // 这里做一次自愈：缓存的列集合与当前配置不一致就清掉，让列顺序回到配置顺序。
      healColumnsCache(cacheKey, columns) {
        const key = cacheKey + 'Cols';
        try {
          const raw = localStorage.getItem(key);
          if (!raw) {
            return;
          }
          const cached = JSON.parse(raw);
          if (!Array.isArray(cached) || !cached.length) {
            return;
          }
          const wanted = (columns || [])
            .filter((c) => c && c.type !== 'index' && c.columnKey !== 'index')
            .map((c) => c.columnKey || c.prop)
            .filter((k) => !!k);
          const cachedKeys = cached.map((c) => c.id);
          // 只判断“配置里有、缓存里没有”的列（这类列才会被 ele-pro-table 排到第一列）；
          // 缓存里多出来的列（比如操作列）不用管。
          const missing = wanted.filter((k) => !cachedKeys.includes(k));
          if (missing.length) {
            localStorage.removeItem(key);
          }
        } catch (e) {
          localStorage.removeItem(key);
        }
      },
      attributeTypeText(v) {
        if (v) {
          let a = this.attributeList.find((item) => item.value == v);
          return a ? a.label : '';
        }
      },
      rootCategoryLevelIdText(v) {
        if (v) {
          let a = this.rootCategoryLevelIdList.find((item) => item.value == v);
          if (a) return a.label;
        }
      },

      async getAttriButeList(code) {
        let { data: res } = await getByCode(code);
        this.attributeList = res.map((item) => {
          let values = Object.keys(item);
          return {
            value: Number(values[0]),
            label: item[values[0]]
          };
        });
      },

      async getDictList(code) {
        let { data: res } = await getByCode(code);
        this.dictList = res.map((item) => {
          let values = Object.keys(item);
          return {
            value: Number(values[0]),
            label: item[values[0]]
          };
        });
      },

      // 取系统参数 is_runtian 的原始值（新 columns 方案已固定启用，这里仅保留参数读取）
      // 兼容常见返回：'1' / 1 / { value: 1 } / { paramValue: '1' } / true
      async getRuntianConfig() {
        try {
          const data = await parameterGetByCode({ code: 'is_runtian' });
          this.isRuntianValue =
            typeof data === 'object' && data !== null
              ? data.value ?? data.paramValue ?? data.val
              : data;
        } catch (e) {
          this.isRuntianValue = false;
        }
      },
      // 撤回
      handWithdraw(row) {
        const params = {
          processInstanceId: row.processInstanceId,
          businessId: row.id,
          processDefinitionKey:
            this.clientEnvironmentId == 5
              ? this.radioSubmit == 1
                ? 'bom_release'
                : 'bom_release_device'
              : 'bom_approver'
        };
        this.$confirm('是否确认撤回?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            withdrawBom(params)
              .then((res) => {
                if (res?.code == '0') {
                  this.$message.success('撤回成功');
                  this.reload();
                }
              })
              .catch((err) => {
                // this.$message.error(err.message);
              });
          })
          .catch(() => {});
      },
      handSubmit(row) {
        this.currentNodeData = row;
        if (this.clientEnvironmentId == 5) {
          // this.JsRId = row.id;
          this.isSubmit = true;
        } else {
          this.submit();
          // this.$alert('确定要发布吗?', '提示', {
          //   confirmButtonText: '确定',
          //   cancelButtonText: '取消',
          //   type: 'warning'
          // })
          //   .then(() => {
          //     bomSubmit({ businessId: row.id }).then((res) => {
          //       if (res?.code == '0') {
          //         this.$message.success('发布成功');
          //         this.reload();
          //       }
          //     });
          //   })
          //   .catch(() => {});
        }
      },
      submit(businessKey) {
        this.processSubmitDialogFlag = true;
        this.$nextTick(() => {
          let params = {
            businessId: this.currentNodeData.id,
            businessKey: businessKey || 'bom_approver',
            formCreateUserId: this.user.info.userId,
            variables: {
              businessCode: this.currentNodeData.code,
              businessName: this.currentNodeData.name,
              businessType:
                this.activeName == 1
                  ? 'PBOM'
                  : this.activeName == 2
                  ? 'MBOM'
                  : this.activeName == 3
                  ? 'ABOM'
                  : 'EBOM'
            }
          };

          this.$refs.processSubmitDialogRef.init(params);
        });
      },
      handJsSubmit() {
        if (!this.radioSubmit) {
          return this.$message.warning('请选择提交的BOM的类型！');
        }

        this.submit(
          this.radioSubmit == 1 ? 'bom_release' : 'bom_release_device'
        );
        this.isSubmit = false;
        // let URL = this.radioSubmit == 1 ? jsBomSubmit : deviceBomSubmit;
        // this.$alert('确定要发布吗?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // })
        //   .then(() => {
        //     URL({ businessId: this.JsRId }).then((res) => {
        //       this.isSubmit = false;
        //       this.$message.success('发布成功');
        //       this.reload();
        //     });
        //   })
        //   .catch(() => {});
      },

      /* 表格数据源 */
      datasource({ where, page, limit, sorter }) {
        // 序号跨页连续用
        this.currentPage = page || 1;
        this.currentLimit = limit || this.pageSize || 20;
        // 排序用表格维护的 sorter：翻页时 ele-pro-table 会把它一起带过来，不会被重置
        const sortProp =
          sorter && sorter.order
            ? sorter.prop || (sorter.column && sorter.column.prop)
            : null;
        const sortOrder = sorter && sorter.order ? sorter.order : null;
        this.sort = sortProp && sortOrder ? { orderBy: sortOrder, sortName: sortProp } : {};
        return getBomPageList({
          ...where,
          ...this.sort,
          bomType: Number(this.activeName),
          isTemp: true,
          pageNum: page,
          size: limit
        });
      },
      handelDetail(row) {
        let rowData = {
          categoryId: row.categoryId,
          categoryName: row.categoryName,
          code: row.code,
          versions: row.versions,
          rootPathIdParent: row.categoryLevelPathIdParent,
          isProduct: true,
          bomType: Number(this.activeName),
          isTemp: row.isTemp
        };
        this.$refs.bomDrawer.open(rowData);
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ where });
      },

      handleClick(tab) {
        this.activeName = tab.name;
        this.reload();
      },

      onSortChange(e) {
        // 排序状态交给表格保存：翻页时 ele-pro-table 会把 sorter 一起带下来，
        // 这样“点了表头排序、翻页后又变回默认顺序”的问题就没了。
        this.$refs.table.reload({ sorter: { prop: e.prop, order: e.order } });
      },

      handDel(row) {
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteBomTreeList([row.id]).then(() => {
              this.reload();
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      },

      handleDetails(row) {
        if (!row.processInstanceId) {
          this.$message.info('未提交没有审核流程');
        } else {
          this.$refs.detailRef.open(row.processInstanceId);
        }
      }
    }
  };
</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>