kd-aiot-frontend/src/views/material/product/components/index-data.vue

<template>
  <div>
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="newColumns"
      :datasource="datasource"
      :need-page="true"
      :selection.sync="selection"
      :current.sync="rowCurrent"
      @sort-change="onSortChange"
      highlight-current-row
      height="calc(100vh - 412px)"
      full-height="calc(100vh - 116px)"
      tool-class="ele-toolbar-form"
      :page-size="pageSize"
      :initLoad="false"
      @columns-change="handleColumnChange"
      :cache-key="cacheKeyUrl"
      v-if="pageShow"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="openEdit({}, 2)"
        >
          新建
        </el-button>

        <div class="upload" v-if="rootTreeId == 6">
          <el-upload
            v-if="!isLoading"
            :show-file-list="false"
            class="upload-demo"
            action=""
            :before-upload="beforeUpload"
            :on-success="successUpload"
            :on-error="errorUpload"
          >
            <slot>
              <el-button
                type="primary"
                size="small"
                plain
                icon="el-icon-upload2"
                >导入</el-button
              >
            </slot>
          </el-upload>
          <el-button
            v-else
            type="primary"
            size="small"
            icon="el-icon-upload2"
            plain
            :loading="isLoading"
            >导入</el-button
          >
        </div>

        <el-button
          v-else
          type="primary"
          size="small"
          icon="el-icon-upload2"
          plain
          @click="uploadFile"
          >导入</el-button
        >
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
        <el-button
          size="small"
          :disabled="selection.length == 0"
          icon="el-icon-thumb"
          class="ele-btn-icon"
          @click="moveTo()"
        >
          设置采购员
        </el-button>
        <!-- <el-button
          v-if="rootTreeId == 9"
          size="small"
          type="primary"
          @click="handleLink('4')"
          >关联设备</el-button
        >
        <el-button
          v-if="rootTreeId == 9"
          size="small"
          type="primary"
          @click="handleLink('5')"
          >关联模具</el-button
        >
        <el-button
          v-if="rootTreeId == 9"
          size="small"
          type="primary"
          @click="handleLink('8')"
          >关联舟皿</el-button
        >

        <el-button
          v-if="rootTreeId == 4"
          size="small"
          type="primary"
          @click="handleLink('5')"
          >关联模具</el-button
        >
        <el-button
          v-if="rootTreeId == 4"
          size="small"
          type="primary"
          @click="handleLink('6')"
          >关联备品备件</el-button
        >-->
      </template>

      <template v-slot:componentAttribute="{ row }">
        <div>
          <!-- {{ }} -->
          {{ getDictValueFn(row.componentAttribute) }}
        </div>
      </template>

      <template v-slot:action="{ row }">
        <el-link type="primary" :underline="false" @click="openEdit(row, 1)">
          复制
        </el-link>
        <el-link type="primary" :underline="false" @click="openEdit(row, 0)">
          修改
        </el-link>
        <el-popconfirm
          class="ele-action"
          title="确定要删除此物料吗？"
          @confirm="remove(row)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false"> 删除 </el-link>
          </template>
        </el-popconfirm>

        <!-- <el-link
          type="primary"
          v-if="row.isProduct == 1"
          :underline="false"
          @click="openParam(row)"
        >
          工艺参数
        </el-link> -->

        <el-link type="primary" :underline="false" @click="toBomManager(row)">
          BOM
        </el-link>

        <!-- <el-link
          type="primary"
          v-if="row.isProduct == 1"
          :underline="false"
          @click="openMaterial(row)"
        >
          物料BOM
        </el-link> -->

        <!-- <el-link
          type="primary"
          v-if="row.isProduct == 1"
          :underline="false"
          @click="openMould(row)"
        >
          模具
        </el-link> -->

        <el-link
          type="primary"
          v-if="row.categoryLevelPathIdParent == 7"
          :underline="false"
          @click="handAllocation(row)"
        >
          货位
        </el-link>

        <el-link
          type="primary"
          v-if="row.categoryLevelPathIdParent == 11"
          :underline="false"
          @click="handleAridRegion(row)"
        >
          干燥区
        </el-link>
      </template>
    </ele-pro-table>
    <!-- 编辑弹窗 -->
    <!--    <dict-edit :visible.sync="showEdit" :id="id" @done="reload" /> -->

    <!-- 选择物料 -->
    <MaterialModal
      :visible.sync="materialEdit"
      :data="current"
      ref="materialRefs"
    ></MaterialModal>

    <!-- 工艺参数 -->
    <ParamEdit
      :visible.sync="paramEditShow"
      :paramData="current"
      ref="paramRefs"
    ></ParamEdit>

    <!-- 模具 -->
    <mouldDialog
      :visible.sync="mouldShow"
      :data="current"
      ref="mouldRefs"
    ></mouldDialog>

    <linkMaterialDialog ref="linkMaterialDialogRef" @success="success" />

    <!-- 货位 -->
    <goodsAllocation ref="allocationRef"></goodsAllocation>

    <!-- 干燥区 -->
    <aridRegion ref="aridRegionRef"></aridRegion>

    <!-- 导入错误弹框 -->
    <el-dialog
      title="导入失败"
      :visible.sync="exportErrorDioalogVisible"
      width="60%"
    >
      <el-table :data="errorData" style="width: 100%">
        <el-table-column label="名称" prop="name"> </el-table-column>
        <el-table-column label="型号" prop="modeType"> </el-table-column>
        <el-table-column label="编号" prop="codeNo"> </el-table-column>
        <el-table-column label="物料组" prop="code"> </el-table-column>
        <el-table-column label="失败原因" prop="remark"> </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="exportErrorDioalogVisible = false">取 消</el-button>
        <el-button type="primary" @click="exportErrorDioalogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <importDialog
      :defModule="moudleName"
      ref="importDialogRef"
      :fileUrl="'/main-data/importTemplate/产品_物品导入模板.xlsx'"
      fileName="产品_物品导入模板"
      @success="reload"
    />
    <!-- 产品管理 -->
    <BomDetailsPop ref="bomDrawer"></BomDetailsPop>
    <DialogMoveTo ref="DialogMoveToRef" @success="success"></DialogMoveTo>
  </div>
</template>

<script>
  import {
    getMaterialList,
    removeMaterial,
    importCategorySparePart,
    exportFile
  } from '@/api/material/list.js';

  import { getBomGetById } from '@/api/material/BOM.js';

  import MaterialModal from './MaterialModal.vue';
  import ParamEdit from '@/views/technology/productParam/components/user-edit.vue';
  import mouldDialog from './mouldDialog';
  import linkMaterialDialog from './link-material-dialog.vue';
  import goodsAllocation from './goodsAllocation.vue';

  import BomDetailsPop from '../../BOMmanage/detailsPop.vue';
  import dictMixins from '@/mixins/dictMixins';

  import aridRegion from './aridRegion';
  import importDialog from '@/components/upload/import-dialogNew.vue';
  import { fieldModel } from '@/api/codeManagement';
  import DialogMoveTo from './DialogMoveTo.vue';
  import tabMixins from '@/mixins/tableColumnsMixin';

  const attributeList = [
    {
      label: '总装',
      value: 1
    },
    {
      label: '部件',
      value: 2
    },
    {
      label: '零件',
      value: 3
    },
    {
      label: '原材料',
      value: 4
    }
  ];
  const measureTypeList = [
    {
      label: '数量',
      value: 1
    },
    {
      label: '重量',
      value: 2
    },
    {
      label: '体积',
      value: 3
    },
    {
      label: '容积',
      value: 4
    },
    {
      label: '面积',
      value: 5
    }
  ];
  const produceTypeList = [
    {
      label: '加工',
      value: 1
    },

    {
      label: '装配',
      value: 3
    }
  ];
  export default {
    mixins: [dictMixins, tabMixins],

    components: {
      importDialog,
      MaterialModal,
      ParamEdit,
      mouldDialog,
      linkMaterialDialog,
      goodsAllocation,
      aridRegion,
      BomDetailsPop,
      DialogMoveTo
    },
    props: {
      // 物料组id
      currentId: [Number, String],
      data: [Array, Object],
      rootId: [Number, String],

      rootTreeId: [Number, String],
      lyType: [String],
      oneProduct: Boolean,
      currentData: Object,

      //table-cacheKeyUrl
      cacheKeyUrl: String
    },
    data() {
      return {
        moudleName: 'mainCategory',

        errorData: [],
        exportErrorDioalogVisible: false,
        pagination: {
          total: 0
        },
        bomShow: false,
        whereData: {},
        pageShow: false,

        // 表格列配置
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center'
          },
          {
            columnKey: 'index',
            type: 'index',
            width: 50,
            align: 'center',
            showOverflowTooltip: true,
            label: '序号'
          },
          {
            prop: 'code',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true,
            sortable: true,
            minWidth: 110
          },
          {
            prop: 'name',
            label: '名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'categoryLevelPath',
            label: '分类',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            align: 'center',
            label: '牌号',
            showOverflowTooltip: true
          },
          {
            prop: 'modelType',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'level',
            label: '级别',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'isUnpack',
            label: '是否允许拆包',
            align: 'center',
            minWidth: 120,
            formatter: (row, column) => {
              return row.isUnpack == 1 ? '是' : '否';
            },
            showOverflowTooltip: true
          },
          {
            prop: 'isComeCheck',
            label: '是否来料检验',
            align: 'center',
            minWidth: 120,
            formatter: (row, column) => {
              return row.isComeCheck == 1 ? '是' : '否';
            },
            showOverflowTooltip: true
          },

          {
            prop: 'measuringUnit',
            label: '计量单位',
            showOverflowTooltip: true,
            minWidth: 90
          },

          {
            prop: 'weightUnit',
            label: '重量单位',
            showOverflowTooltip: true,
            minWidth: 90
          },

          {
            prop: 'roughWeight',
            label: '毛重',
            showOverflowTooltip: true,
            minWidth: 90
          },

          {
            prop: 'netWeight',
            label: '净重',
            showOverflowTooltip: true,
            minWidth: 90
          },

          {
            prop: 'packingUnit',
            align: 'center',
            label: '包装单位',
            showOverflowTooltip: true
          },

          {
            prop: 'componentAttribute',
            slot: 'componentAttribute',
            align: 'center',
            label: '属性类型',
            showOverflowTooltip: true
            // formatter: (row, column) => {
            //   return row?.produceType
            //     ?.map((item) => {
            //       {{row}}
            //       return this.getDictValueFn(item);
            //     })
            //     ?.toString();
            // }
          },
          {
            prop: 'attributeType',
            align: 'center',
            label: '存货类型',
            showOverflowTooltip: true,
            formatter: (row, column) => {
              return attributeList.find(
                (item) => item.value == row.attributeType
              )?.label;
            }
          },
          {
            prop: 'produceType',
            align: 'center',
            label: '生产类型',
            showOverflowTooltip: true,
            formatter: (row, column) => {
              return produceTypeList.find(
                (item) => item.value == row.produceType
              )?.label;
            }
          },
          {
            prop: 'measureType',
            align: 'center',
            label: '计量类型',
            showOverflowTooltip: true,
            formatter: (row, column) => {
              return measureTypeList.find(
                (item) => item.value == row.measureType
              )?.label;
            }
          },
          {
            prop: 'isEnabled',
            align: 'center',
            label: '状态',
            showOverflowTooltip: true,
            formatter: (row, column) => {
              return row.isEnabled === 0
                ? '停用'
                : row.isEnabled === 1
                ? '启用'
                : '';
            }
          }
        ],
        sxtList: [
          {
            label: '自制件',
            value: 1
          },
          {
            label: '采购件',
            value: 2
          },
          {
            label: '外协件',
            value: 3
          },
          {
            label: '受托件',
            value: 4
          }
        ],

        newColumns: [],
        // 表格选中数据
        selection: [],
        // 是否显示编辑弹窗
        showEdit: false,
        id: null,

        materialEdit: false,
        paramEditShow: false,
        mouldShow: false,
        current: null,

        rowCurrent: null,
        isLoading: false,
        pageSize: this.$store.state.tablePageSize
      };
    },

    created() {
      this.requestDict('生产类型');
      this.getFieldModel();
    },

    methods: {
      onSortChange(e) {
        console.log(e, '99999999');

        let sort = {
          orderBy: e.order,
          sortName: e.prop
        };
        this.sort = sort;
        this.reload();
      },
      getDictValueFn(e) {
        // console.log(e,'3333333333333');
        if (e.length) {
          let arr = [];
          e.map((v) => {
            arr.push(this.findFn(v)?.label);
          });

          return arr.join(',');
        } else {
          return '';
        }
        // let a =

        // return a?.label||''
      },

      findFn(e) {
        return this.sxtList.find((item) => item.value == Number(e));
      },

      toBomManager(row) {
        let rowData = {
          categoryId: row.id,
          categoryName: row.name,
          code: row.code,

          rootPathIdParent: row.categoryLevelPathIdParent,
          isProduct: row.isProduct == 1
        };
        this.$refs.bomDrawer.open(rowData);
      },
      //采购
      moveTo() {
        this.$refs.DialogMoveToRef.open(this.selection);
      },
      successUpload(response) {
        this.isLoading = false;
      },
      errorUpload(response) {
        this.isLoading = false;
      },
      // 上传备品备件
      beforeUpload(file) {
        if (file.size / 1024 / 1024 > this.size) {
          this.$message.error(`大小不能超过 ${this.size}MB`);
          return false;
        }

        if (this.limit > 0 && this.fileList.length === this.limit) {
          this.$message.error(`最多上传 ${this.limit}个文件`);
          return false;
        }
        let formData = new FormData();
        formData.append('file', file);
        this.isLoading = true;
        return importCategorySparePart(formData).then((res) => {
          if (res.data.length > 0) {
            this.exportErrorDioalogVisible = true;
            this.errorData = res.data;
          } else {
            this.$message.success('导入成功！');
          }
          this.isLoading = false;
          return false;
        });
      },
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        let labs = getMaterialList({
          pageNum: page,
          size: limit,
          ...this.sort,
          ...where,
          categoryLevelId: this.currentId
        });
        this.whereData = {
          pageNum: page,
          size: limit,
          ...this.sort,
          ...where,
          categoryLevelId: this.currentId
        };
        let a = await labs;

        return labs;
      },
      /* 刷新表格 */
      reload(where) {
        let labs = {
          page: 1,
          where: where,
          categoryLevelId: this.currentId
        };
        this.whereData = labs;
        this.$refs.table.reload({
          page: 1,
          where: where,
          categoryLevelId: this.currentId
        });
      },

      getFieldModel() {
        fieldModel({ relevance: 't_main_category' }).then((res) => {
          const privateColumn = [
            {
              columnKey: 'action',
              label: '操作',
              width: 220,
              align: 'center',
              resizable: false,
              slot: 'action',
              fixed: 'right'
            }
          ];

          let newRes = res.map((m) => {
            return {
              prop: 'extField.' + m.prop,
              label: m.label,
              align: 'center',
              showOverflowTooltip: true
            };
          });

          this.newColumns = [...this.columns, ...newRes, ...privateColumn];
          this.getTabColumns();
          this.$forceUpdate();
        });
      },

      /* 显示编辑 */
      openEdit(row, status) {
        console.log(status, this.currentData, 'status');
        let isUpdate;
        if (status == 2) {
          isUpdate = 0;
        } else {
          isUpdate = 1;
        }

        this.$router.push({
          path: '/material/product/detail',
          query: {
            lyType: this.lyType,
            id: row.id ? row.id : null,
            status: status,
            rootId: this.rootId,
            isUpdate: isUpdate,
            oneProduct: this.oneProduct,
            t: new Date().getTime(),
            rootTreeId: this.rootTreeId,
            ...this.currentData
          }
        });
      },
      /* 删除 */
      remove(row) {
        const loading = this.$loading({ lock: true });
        removeMaterial(row.id)
          .then((msg) => {
            this.$refs.table.reload({
              page: 1,
              categoryLevelId: this.currentId
            });
            loading.close();
          })
          .catch((e) => {
            loading.close();
          });
      },

      openMaterial(row) {
        this.current = row;
        this.materialEdit = true;
        this.$refs.materialRefs.$refs.form &&
          this.$refs.materialRefs.$refs.form.clearValidate();
      },

      openParam(row) {
        this.paramEditShow = true;
        this.current = row;
        this.$refs.paramRefs.$refs.form &&
          this.$refs.paramRefs.$refs.form.clearValidate();
      },

      openMould(row) {
        this.current = row;
        this.mouldShow = true;
        this.$refs.mouldRefs.$refs.form &&
          this.$refs.mouldRefs.$refs.form.clearValidate();
      },

      handleLink(type) {
        if (!this.rowCurrent) {
          return this.$message.error(
            this.rootTreeId == 9
              ? '请选择产品！'
              : this.rootTreeId == 4
              ? '请选择设备！'
              : ''
          );
        }

        this.$refs.linkMaterialDialogRef.open(type, this.rowCurrent);
      },

      success() {
        this.reload();
      },

      handAllocation(row) {
        this.$refs.allocationRef.open(row);
      },

      handleAridRegion(row) {
        this.$refs.aridRegionRef.open(row);
      },

      uploadFile() {
        this.$refs.importDialogRef.open();
      },
      /** 导出按钮操作 */
      handleExport() {
        exportFile(this.whereData);
        console.log(this.whereData, 'whereForm');
      },
      /** 下载模板操作 */
      importTemplate() {
        importTemplate(this.whereForm).then((res) => {
          this.$message.success('模板下载成功');
        });
      }
    },
    watch: {
      // 监听物料组id变化
      currentId() {
        this.reload();
      },

      $route: {
        handler(route) {
          this.pageShow = false;

          if (route.query && route.query.isWt) {
            getBomGetById(route.query.businessId).then((res) => {
              let rowData = {
                categoryId: res.data.categoryId,
                categoryName: res.data.name,
                code: res.data.categoryCode,
                rootPathIdParent: res.data.rootCategoryLevelId,
                isProduct: res.data.rootCategoryLevelId == 9 ? true : false,
                versions: res.data.versions,
                bomType: res.data.bomType,
                isWt: true,
                isBtn: route.query.isBtn
              };
              this.$nextTick(() => {
                this.$refs.bomDrawer.open(rowData);
                this.pageShow = true;
              });
            });
          } else {
            this.pageShow = true;
          }
        },
        immediate: true
      }
    }
  };
</script>
<style lang="scss" scoped>
  .upload {
    display: inline-block;
    width: 100px;
    margin-left: 10px;
  }
</style>