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"
      highlight-current-row
      height="calc(100vh - 412px)"
      full-height="calc(100vh - 116px)"
      tool-class="ele-toolbar-form"
      cache-key="systemDictDataTable"
    >
      <!-- 表头工具栏 -->
      <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
          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: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"
      @success="reload"
    />
  </div>
</template>

<script>
  import {
    getMaterialList,
    removeMaterial,
    importCategorySparePart
  } from '@/api/material/list.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 aridRegion from './aridRegion';
  import importDialog from '@/components/upload/import-dialog.vue';
  import { fieldModel } from '@/api/codeManagement';
  export default {
    components: {
      importDialog,
      MaterialModal,
      ParamEdit,
      mouldDialog,
      linkMaterialDialog,
      goodsAllocation,
      aridRegion
    },
    props: {
      // 物料组id
      currentId: [Number, String],
      data: [Array, Object],
      rootId: [Number, String],

      rootTreeId: [Number, String],

      oneProduct: Boolean
    },
    data() {
      return {
        moudleName: 'mainCategory',

        errorData: [],
        exportErrorDioalogVisible: false,
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 50,
            align: 'center',
            showOverflowTooltip: true,
            label: '序号'
          },
          {
            prop: 'code',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'name',
            label: '名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            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: '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: 'categoryLevelPath',
            label: '分类',
            align: 'center',
            showOverflowTooltip: true
          }
        ],

        newColumns: [],

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

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

        rowCurrent: null,
        isLoading: false
      };
    },

    created() {
      this.getFieldModel();
    },

    methods: {
      toBomManager(row) {
        this.$router.push({
          path: '/material/BOMmanage/details',
          query: {
            categoryId: row.id,
            code: row.code,
            categoryLevelPathIdParent: row.categoryLevelPathIdParent,
            isProduct: row.isProduct == 1

          }
        });
      },
      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;
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return getMaterialList({
          pageNum: page,
          size: limit,
          ...where,
          categoryLevelId: this.currentId
        });
      },
      /* 刷新表格 */
      reload(where) {
        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.$forceUpdate();
        });
      },

      /* 显示编辑 */
      openEdit(row, status) {
        this.$router.push({
          path: '/material/product/detail',
          query: {
            id: row.id ? row.id : null,
            status: status,
            rootId: this.rootId,
            oneProduct: this.oneProduct,
            t: new Date().getTime()
          }
        });
      },
      /* 删除 */
      remove(row) {
        const loading = this.$loading({ lock: true });
        removeMaterial(row.id)
          .then((msg) => {
            loading.close();
            this.$message.success('删除' + msg);
            this.reload();
          })
          .catch((e) => {
            loading.close();
            // this.$message.error(e.message);
          });
      },

      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();
      }
    },
    watch: {
      // 监听物料组id变化
      currentId() {
        this.reload();
      }
    }
  };
</script>
<style lang="scss" scoped>
  .upload {
    display: inline-block;
    width: 100px;
    margin-left: 10px;
  }
</style>