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="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="cacheKeyUrl"
        >
          <template v-slot:approvalStatus="{ row }">
            <el-link type="primary" :underline="false" @click="handleDetails(row)">
              {{ approvalStatusOpt[+row.approvalStatus] }}
            </el-link>
          </template>

          <template v-slot:versions="{ row }">
            V{{ row.versions }}.0
          </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: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 dictList" :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)" type="primary"
              @click="handSubmit(row)">发布</el-link>

            <el-link type="danger" :underline="false"
              v-if="activeName == 1 && row.status != 1 && (row.approvalStatus == 0 || row.approvalStatus == 3)"
              @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>

    <BomDetailsPop ref="bomDrawer"></BomDetailsPop>
  </div>
</template>

<script>
import tabMixins from '@/mixins/tableColumnsMixin';

import BOMSearch from './components/BOM-search.vue';
import {
  getBomPageList,
  startAndStop,
  bomSubmit,
  jsBomSubmit,
  deviceBomSubmit,
  deleteBomTreeList
} from '@/api/material/BOM';
import LCdetail from './components/LCdetail.vue';
import { getByCode } from '@/api/system/dictionary-data';
import BomDetailsPop from '../BOMmanage/detailsPop.vue'
export default {
  name: 'SystemDictionary',
  components: { BOMSearch, LCdetail, BomDetailsPop },
  mixins: [tabMixins],
  data() {
    return {
      // 表格列配置
      columns: [
        {
          label: '序号',
          columnKey: 'index',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'code',
          label: 'BOM编码',
          showOverflowTooltip: true,
          slot: 'code',
          sortable: true
        },
        {
          prop: 'name',
          label: 'BOM名称',
          showOverflowTooltip: true,
          slot: 'name',
          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: 'attributeType',
          prop: 'attributeType',
          label: '属性类型',
          showOverflowTooltip: true
        },
        {
          prop: 'produceType',
          slot: 'produceType',
          label: '生产类型',
          showOverflowTooltip: true
        },


        {
          prop: 'versions',
          slot: 'versions',
          label: '版本'
        },
        {
          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
        },
        {
          columnKey: 'action',
          slot: 'action',
          label: '操作'
        }
      ],
      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:{},
      rootCategoryLevelIdList: [
        {
          label: '产品',
          value: 9
        },
        {
          label: '物料',
          value: 1
        },
        {
          label: '生产设备',
          value: 4
        },
        {
          label: '模具',
          value: 5
        },{
          label: '备品备件',
          value: 6
        }
      ],
      activeName: '1',

      isSubmit: false,
      JsRId: null,
      radioSubmit: 1,

      pageSize: this.$store.state.tablePageSize,
      cacheKeyUrl: '68be265a-material-BOMmanage'
    };
  },

  computed: {
    clientEnvironmentId() {
      return this.$store.state.user.info.clientEnvironmentId;
    }
  },

  created() {
    this.getDictList('productionType');
  },
  methods: {
    attributeTypeText(v){
      if(v){
        let a = this.attributeList.find(item=>item.value==v)
        return a.label
      }
    },
    rootCategoryLevelIdText(v){
      if(v){
        let a = this.rootCategoryLevelIdList.find(item=>item.value==v)
        if(a) return a.label
      }
    },

    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]]
        };
      });
    },

    handSubmit(row) {
      if (this.clientEnvironmentId == 5) {
        this.JsRId = row.id;
        this.isSubmit = true;
      } else {
        this.$alert('确定要发布吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            bomSubmit({ businessId: row.id }).then((res) => {
              if (res?.code == '0') {
                this.$message.success('发布成功');
                this.reload();
              }

            });
          })
          .catch(() => { });
      }
    },

    handJsSubmit() {
      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 }) {
      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) {
        console.log(111111111,e);

      let sort = {
        orderBy: e.order,
          sortName: e.prop,
      };
      this.sort = sort;
      this.reload();
    },

    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>