kd-aiot-frontend/src/views/material/product/components/link-msg.vue

<template>
  <div class="link-msg">
    <headerTitle title="关联信息"></headerTitle>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="可用模具">
        <ele-pro-table :columns="moduleColumn" :datasource="moduleData">
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane label="BOM">
        <ele-pro-table :columns="BOMColumn" :datasource="bomData">
        </ele-pro-table
      ></el-tab-pane>
      <el-tab-pane label="工艺路线">
        <ele-pro-table :columns="pathColumn" :datasource="pathData">
          <template v-slot:bomCategoryType="{ row }">
            {{
              row.bomCategoryType == 2
                ? 'MBOM'
                : row.bomCategoryType == 1
                ? 'PBOM'
                : row.bomCategoryType == 3
                ? 'ABom'
                : ''
            }}
          </template>
        </ele-pro-table></el-tab-pane
      >
      <!-- <el-tab-pane label="质量标准"></el-tab-pane> -->
      <!-- <el-tab-pane label="文件">
        <ele-pro-table :columns="fileColumn" :datasource="[]"> </ele-pro-table
      ></el-tab-pane> -->
      <el-tab-pane label="关联设备">
        <ele-pro-table :columns="equiColumn" :datasource="eqData">
        </ele-pro-table
      ></el-tab-pane>
      <el-tab-pane label="供应商">
        <ele-pro-table
          :columns="supplierColumn"
          :datasource="supplierData"
          :need-page="false"
          ref="supplierRef"
        >
          <template v-slot:toolbar>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="handParent()"
              v-if="id && !disabled"
            >
              添加供应商
            </el-button>
          </template>
          <!-- 操作列 -->
          <template v-slot:action="{ row }">
            <el-popconfirm
              class="ele-action"
              title="确定要删除此供应商吗？"
              @confirm="deleteSupplie(row)"
              v-if="!disabled"
            >
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane label="生产厂家">
        <ele-pro-table
          :columns="supplierColumn"
          :datasource="manufacturerData"
          :need-page="false"
          ref="supplierRef"
        >
          <template v-slot:toolbar>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="handParent()"
              v-if="id && !disabled"
            >
              添加生产厂家
            </el-button>
          </template>

        </ele-pro-table>
      </el-tab-pane>
         <el-tab-pane label="客户">
        <ele-pro-table
          :columns="supplierColumn"
          :datasource="contactData"
          :need-page="false"
          ref="supplierRef"
        >
          <template v-slot:toolbar>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="handParent()"
              v-if="id && !disabled"
            >
              添加客户
            </el-button>
          </template>

        </ele-pro-table>
      </el-tab-pane>
    </el-tabs>
    <vendorDialog
      ref="vendorDialogRef"
      :is-all="true"
      @success="success"
      :ids="ids"
      :title="title"
    ></vendorDialog>
  </div>
</template>

<script>
  import {
    getBomRoutingList,
    getBomAssociationList
  } from '@/api/material/list.js';
  import { saveSupplier, deleteSupplie } from '@/api/material/BOM.js';
  import { getRelatesInformationList } from '@/api/material/product.js';
  import dictMixins from '@/mixins/dictMixins';
  import storage from '@/api/warehouseManagement/index.js';
  //供应商弹窗
  import vendorDialog from '@/views/factoryModel/qualificationManagement/components/vendorDialog.vue';
  export default {
    mixins: [dictMixins],
    props: {
      id: [Number, String],
      categoryLevelId: [Number, String],
      code: [Number, String],
      categoryLevelGroupId: [Number, String],
      disabled: {
        type: Boolean,
        default: false
      }
    },
    components: {
      vendorDialog
    },
    data() {
      return {
        activeTab: '0',
        moduleColumn: [
          {
            type: 'index',
            label: '序号',
            width: '55px',
            align: 'center'
          },
          {
            label: '编码',
            prop: 'code'
          },
          {
            label: '名称',
            prop: 'name'
          },
          {
            label: '牌号',
            prop: 'brandNum'
          },
          {
            label: '型号',
            prop: 'modelType'
          },
          {
            label: '收缩系数',
            prop: 'extendInfo.shrinkEffictive'
          },
          {
            label: '大模体型号',
            prop: 'extendInfo.maxMoldType'
          },
          // {
          //   label: '物品类型',
          //   prop: ''
          // },
          {
            label: '分类',
            prop: 'categoryLevelGroupName'
          }
        ],
        BOMColumn: [
          {
            label: 'BOM编码',
            prop: 'code'
          },
          {
            label: 'BOM名称',
            prop: 'name'
          },
          {
            label: '版本号',
            prop: 'versions'
          },
          {
            label: '基本数量',
            prop: 'baseCount'
          },
          {
            label: '单位',
            prop: 'unit'
          }
        ],
        pathColumn: [
          {
            label: 'BOM编码',
            prop: 'bomCategoryCode'
          },
          {
            label: 'BOM名称',
            prop: 'bomCategoryName'
          },
          {
            slot: 'bomCategoryType',
            label: 'BOM类型',
            showOverflowTooltip: true
          },
          {
            label: 'BOM版本',
            prop: 'bomCategoryVersion'
          },
          {
            label: '工艺路线编码',
            prop: 'code'
          },
          {
            label: '工艺路线名称',
            prop: 'name'
          },
          {
            label: '工艺类型',
            prop: 'produceVersionName'
          },
          {
            label: '工艺路线版本',
            prop: 'version'
          }
        ],
        fileColumn: [
          {
            label: '文件编码'
          },
          {
            label: '文件名称'
          }
        ],
        equiColumn: [
          // {
          //   type: 'selection'
          // },
          {
            label: '设备分类',
            prop: 'categoryLevelGroupName'
          },
          {
            label: '设备编码',
            prop: 'code'
          },
          {
            label: '设备名称',
            prop: 'name'
          },
          {
            label: '产能',
            formatter: (row) => {
              return (
                row.quantity &&
                `${row.quantity}/${this.getDictValue(
                  '重量单位',
                  row.quantityUnitId
                )}`
              );
            }
          }
        ],
        supplierColumn: [
          {
            prop: 'code',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'name',
            label: '名称',
            align: 'center',
            slot: 'name',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'serialNo',
            label: '代号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'phone',
            label: '电话',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'addressName',
            label: '注册地址',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120,
            formatter: (_row, _column, cellValue) => {
              return (
                (_row.addressName ? _row.addressName.replaceAll(',', '') : '') +
                (_row.address || '')
              );
            }
          },
          {
            prop: 'otherAddressName',
            label: '联系地址',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120,
            formatter: (_row, _column, cellValue) => {
              return (
                (_row.otherAddressName
                  ? _row.otherAddressName.replaceAll(',', '')
                  : '') + (_row.otherAddress || '')
              );
            }
          },
          {
            prop: 'linkName',
            label: '联系人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'linkPhone',
            label: '联系人电话',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              return _row.status === 1 ? '启用' : '禁用';
            }
          },
          {
            prop: 'createUsername',
            label: '创建人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 160,
            formatter: (_row, _column, cellValue) => {
              return this.$util.toDateString(cellValue);
            }
          }
        ],

        moduleData: [],
        eqData: [],
        bomData: [],
        pathData: [],
        supplierData: [], //供应商
        manufacturerData: [], //生产厂家
        contactData: [], //客户
        ids: '',
        title: ''
      };
    },
    watch: {
      id: {
        handler(val) {
          if (val) {
            this.getBomData();
            this.getRoutingData();
            this.contactQueryByCategoryIdsAPI(1);
            this.contactQueryByCategoryIdsAPI(2);
            this.contactQueryByCategoryIdsAPI(3);
          }
        },
        immediate: true
      },
      categoryLevelId: {
        handler(val) {
          if (val) {
            this.getModuleData();
            this.getEqData();
          }
        },
        immediate: true
      }
    },
    created() {
      this.requestDict('重量单位');
    },
    methods: {
      getTableData(data) {
        if (Array.isArray(data)) {
          return data;
        }
        if (Array.isArray(data?.list)) {
          return data.list;
        }
        if (Array.isArray(data?.records)) {
          return data.records;
        }
        if (data && typeof data === 'object') {
          return Object.values(data).reduce((list, item) => {
            return list.concat(Array.isArray(item) ? item : []);
          }, []);
        }
        return [];
      },
      //BOM列表
      async getBomData() {
        const data = await getBomAssociationList({
          categoryId: this.id,
          versions: '',
          bomType: 1,
          isTemp: 0
        });
        this.bomData = this.getTableData(data);
      },
      //工艺路线
      async getRoutingData() {
        const data = await getBomRoutingList(this.id);
        this.pathData = this.getTableData(data);
      },
      // 关联设备
      async getEqData() {
        const data = await getRelatesInformationList({
          mainCategoryId: this.categoryLevelId,
          categoryLevelRootId: 4, //设备
          categoryLevelGroupId: this.categoryLevelGroupId
        });

        this.eqData = this.getTableData(data);
      },
      // 关联舟皿
      async getModuleData() {
        const data = await getRelatesInformationList({
          mainCategoryId: this.categoryLevelId,
          categoryLevelRootId: 5, //模具
          categoryLevelGroupId: this.categoryLevelGroupId
        });

        this.moduleData = this.getTableData(data);
      },
      // 关联供应商/生产厂家
      async contactQueryByCategoryIdsAPI(type) {
        const data = await storage.contactQueryByCategoryIdsAPI({
          categoryIds: [this.id],
          type
        });
        if (type == 1) {
          this.contactData = data[this.id] || [];
        }
        if (type == 2) {
          this.supplierData = data[this.id] || [];
        }
        if (type == 3) {
          this.manufacturerData = data[this.id] || [];
        }
      },
      handParent() {
        if (this.activeTab == '4') {
          this.ids = '19';
          this.title = '选择供应商';
        }
        if (this.activeTab == '5') {
          this.ids = '20250317001';
          this.title = '选择生产厂家';
        }
        if (this.activeTab == '6') {
          this.ids = '17';
          this.title = '选择客户';
        }
        this.$refs.vendorDialogRef.open(
          this.activeTab == '4'
            ? this.supplierData.map((item) => item.id)
            : this.activeTab == '5'
            ? this.manufacturerData.map((item) => item.id)
            : this.contactData.map((item) => item.id)
        );
      },

      success(list) {
        saveSupplier({
          productId: this.id,
          supplierIds: list.map((item) => item.id)
        }).then((res) => {
          if (this.activeTab == '4') {
            this.contactQueryByCategoryIdsAPI(2);
          } else if (this.activeTab == '5') {
            this.contactQueryByCategoryIdsAPI(3);
          } else {
            this.contactQueryByCategoryIdsAPI(1);
          }
        });
      },
      deleteSupplie(row) {
        deleteSupplie({
          productId: this.id,
          supplierId: row.id
        }).then((res) => {
          this.contactQueryByCategoryIdsAPI(2);
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .link-msg {
    background: #fff;

    padding: 1px 17px;
  }
</style>