kd-aiot-frontend/src/views/material/BOMmanage/components/replaceMaterialPop.vue

<template>
  <el-dialog
    title="替代料"
    :visible.sync="visible"
    v-if="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="90%"
  >
    <ele-pro-table
      ref="replaceMaterialPop"
      :columns="columns"
      :datasource="replaceMaterial"
      :need-page="false"
      :immediate="true"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button type="primary" v-if="!isView" @click="handAdd"
          >添加</el-button
        >
      </template>

      <template v-slot:unit="{ row }">
        <div v-if="isView">{{ row.unit }}</div>
        <div v-else>
          <DictSelection dictName="计量单位" v-model="row.unit"></DictSelection>
        </div>
      </template>

      <template v-slot:count="{ row }">
        <div v-if="isView">{{ row.count }}</div>
        <el-input
          v-else
          v-model="row.count"
          placeholder="请输入"
          @input="
            (value) =>
              (row.count = value.replace(
                /^(-)*(\d+)\.(\d\d\d\d\d\d).*$/,
                '$1$2.$3'
              ))
          "
        ></el-input>
      </template>

      <template v-slot:bomArtFiles="{ row }">
        <fileUpload v-model="row.bomArtFiles" type="add" size="mini" />
      </template>

      <template v-slot:remark="{ row }">
        <div v-if="isView">{{ row.remark }}</div>
        <el-input v-else v-model="row.remark" placeholder="请输入"></el-input>
      </template>

      <template v-slot:action="{ row, $index }">
        <el-link type="danger" @click="handleDel(row, $index)">删除</el-link>
      </template>
    </ele-pro-table>

    <div class="btns">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>

    <ProductModalMultiple
      ref="productMultipleRefs"
      @selection="selectionList"
    ></ProductModalMultiple>
  </el-dialog>
</template>
<script>
  import fileUpload from '@/components/addDoc/index.vue';
  import ProductModalMultiple from './ProductModalMultiple.vue';
  export default {
    components: {
      fileUpload,
      ProductModalMultiple
    },
    props: {
      isView: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        visible: false,
        rootCategoryLevelId: null,
        replaceMaterial: [],

        columns: [
          {
            type: 'index',
            width: 55,
            align: 'center'
          },

          {
            label: '物料名称',
            prop: 'categoryName'
          },

          {
            label: '编码',
            prop: 'categoryCode'
          },
          {
            label: '牌号',
            prop: 'brandNum'
          },
          {
            label: '型号',
            prop: 'modelType'
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '数量',
            slot: 'count',
            action: 'count'
          },
          {
            label: '单位',
            slot: 'unit',
            action: 'unit'
          },

          {
            label: '附件',
            slot: 'bomArtFiles',
            action: 'bomArtFiles',
            minWidth: 150
          },

          {
            label: '备注',
            slot: 'remark',
            action: 'remark'
          },

          {
            columnKey: 'action',
            label: '操作',
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ]
      };
    },
    methods: {
      open(row) {
        this.replaceId = row.id;
        this.rootCategoryLevelId = row.rootCategoryLevelId;
        if (Object.prototype.hasOwnProperty.call(row, 'replaceMaterial')) {
          this.replaceMaterial = row.replaceMaterial;
        } else {
          this.replaceMaterial = [];
        }
        this.visible = true;
      },
      handAdd() {
        this.$refs.productMultipleRefs.open(null, [this.rootCategoryLevelId], this.replaceMaterial);
      },

      selectionList(list) {
        let array = [];
        list.map((item, index) => {
          array.push({
            id: item.id,
            categoryName: item.name,
            categoryCode: item.categoryCode,
            isReworkBom: 0,
            brandNum: item.brandNum,
            count: item.count || '',
            modelType: item.modelType,
            unit: item.measuringUnit,
            bomArtFiles: [],
            remark: '',
            specification: item.specification,
            rootCategoryLevelId: item.categoryLevelPathIdParent,
            extInfo: item.extInfo
          });
        });
        this.replaceMaterial = [...this.replaceMaterial, ...array] ;
      },
      handleDel(row, index) {
        this.replaceMaterial.splice(index, 1);
      },

      selected() {
        this.$emit('selected', this.replaceId, this.replaceMaterial);
        this.visible = false;
      },

      handleClose() {
        this.visible = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .btns {
    text-align: center;
    padding: 10px 0;
  }
</style>