kd-aiot-frontend/src/views/equipmentManage/components/link-material-dialog.vue

<template>
  <ele-modal :visible.sync="visible" title="" width="80%" @close="cancel">
    <el-row :gutter="40">
      <el-col :span="12">
        <headerTitle>
          <template v-slot:title>
            可选
            <el-button
              type="primary"
              class="ml20"
              size="mini"
              @click="handleConect"
              >关联</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="icon-search"
              @click="reload"
              >搜索</el-button
            >
          </template>
        </headerTitle>
        <el-form label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item :label="`分类`">
                <categorySelect
                  :pid="type"
                  :key="type"
                  v-model="where.categoryLevelGroupId"
                />
                <!-- <el-input
                  placeholder="请输入"
                  clearable
                  v-model="where.categoryLevelGroupId"
                ></el-input> -->
              </el-form-item></el-col
            >
            <el-col :span="12">
              <el-form-item :label="`编码`">
                <el-input
                  placeholder="请输入"
                  clearable
                  v-model="where.code"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item :label="`名称`">
                <el-input
                  placeholder="请输入"
                  clearable
                  v-model="where.name"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="型号">
                <el-input
                  placeholder="请输入"
                  clearable
                  v-model="where.modelType"
                ></el-input></el-form-item
            ></el-col>
          </el-row>
        </el-form>
        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="datasourceShow"
          :selection.sync="selection"
          cache-key="link-material-dialog"
          height="45vh"
          :initLoad="false"
          :need-page="false"
        >
        </ele-pro-table>
      </el-col>
      <el-col :span="12">
        <headerTitle
          ><template v-slot:title
            >已关联
            <el-button
              type="primary"
              class="ml20"
              size="mini"
              @click="handleCancelConect"
              >取消关联</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="icon-search"
              @click="reloadRight"
              >搜索</el-button
            ></template
          ></headerTitle
        >
        <el-form label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item :label="`分类`">
                <categorySelect
                  :pid="type"
                  :key="type"
                  v-model="whereRight.categoryLevelGroupId"
                /> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item :label="`编码`">
                <el-input
                  clearable
                  placeholder="请输入"
                  v-model="whereRight.code"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item :label="`名称`">
                <el-input
                  clearable
                  placeholder="请输入"
                  v-model="whereRight.name"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="型号">
                <el-input
                  clearable
                  placeholder="请输入"
                  v-model="whereRight.modelType"
                ></el-input></el-form-item
            ></el-col>
          </el-row>
        </el-form>
        <ele-pro-table
          ref="tableRight"
          :columns="columnsRight"
          :datasource="datasourceRightShow"
          :selection.sync="selectionRight"
          height="45vh"
          :initLoad="false"
          :need-page="false"
          cache-key="link-material-dialog-right"
        >
        </ele-pro-table
      ></el-col>
    </el-row>

    <div slot="footer" class="footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import {
    getRelatesInformationList,
    unassociated,
    productTieUpMaterial
  } from '@/api/material/product.js';
  import dictMixins from '@/mixins/dictMixins';
  import categorySelect from '@/components/CommomSelect/category-select.vue';
  export default {
    mixins: [dictMixins],
    components: { categorySelect },
    data () {
      return {
        visible: false,
        row: {},
        datasource: [],
        datasourceShow: [],
        datasourceRightShow: [],
        datasourceRight: [],
        selectionRight: [],
        selection: [],
        whereRight: {},
        where: {},
        type: '',
        idMap: {
          6: '1678278090828136449',
          5: '1678277781556936705'
        }
      };
    },
    created () {
      this.requestDict('类型用途');
    },
    computed: {
      catogaryName () {
        return this.getDictValue('类型用途', this.type);
      },
      dict () {},
      columns () {
        return [
          {
            type: 'selection',
            align: 'center'
          },
          {
            label: `${this.catogaryName}分类`,
            prop: 'categoryLevelGroupName'
          },
          {
            label: `${this.catogaryName}编码`,
            prop: 'code'
          },
          {
            label: `${this.catogaryName}名称`,
            prop: 'name'
          },
          {
            label: '型号',
            prop: 'modelType'
          }
        ];
      },
      columnsRight () {
        return [
          {
            type: 'selection',
            align: 'center'
          },
          {
            label: `${this.catogaryName}分类`,
            prop: 'categoryLevelGroupName'
          },
          {
            label: `${this.catogaryName}编码`,
            prop: 'code'
          },
          {
            label: `${this.catogaryName}名称`,
            prop: 'name'
          },
          {
            label: '型号',
            prop: 'modelType'
          }
        ];
      }
    },
    methods: {
      open (type, row) {
        this.type = type;
        this.row = row;
        this.getDatasource();
        this.getDatasourceRight();
        this.visible = true;
      },
      cancel () {
        this.visible = false;
      },
      async save () {
        if (!this.datasourceRightShow.length) {
          return this.$message.error('请添加关联数据');
        }
        const params = {
          mainCategoryId: this.row.categoryLevelId,
          mainCategoryLevelRootId: this.row.categoryLevelGroupId,
          materialDetailsPOList: this.datasourceRightShow.map((i) => ({
            ...i,
            categoryLevelRootId: this.type
          }))
        };
        await productTieUpMaterial(params);
        this.cancel();
        this.$message.success('操作成功！');
        this.$emit('success');
      },
      handleConect () {
        if (!this.selection.length) {
          return this.$message.error('请选择关联数据');
        }
        this.datasource = this.datasource.filter((i) =>
          this.selection.find((t) => t.categoryId != i.categoryId)
        );
        this.datasourceShow = this.datasourceShow.filter((i) =>
          this.selection.find((t) => t.categoryId != i.categoryId)
        );

        this.datasourceRightShow.push(...this.selection);
        this.datasourceRight.push(...this.selection);

        this.selection = [];
      },
      handleCancelConect () {
        if (!this.selectionRight.length) {
          return this.$message.error('请选择取消关联数据');
        }

        this.datasourceRight = this.datasourceRight.filter((i) =>
          this.selectionRight.find((t) => t.categoryId != i.categoryId)
        );
        this.datasourceRightShow = this.datasourceRightShow.filter((i) =>
          this.selectionRight.find((t) => t.categoryId != i.categoryId)
        );

        this.datasourceShow.push(...this.selectionRight);
        this.datasource.push(...this.selectionRight);

        this.selectionRight = [];
      },
      reload () {
        this.datasourceShow = this.datasource.filter((item) => {
          return (
            (!this.where.categoryLevelGroupId ||
              item.categoryLevelGroupId.includes(
                this.where.categoryLevelGroupId
              )) &&
            (!this.where.code || item.code.includes(this.where.code)) &&
            (!this.where.name || item.name.includes(this.where.name)) &&
            (!this.where.modelType ||
              item.modelType.includes(this.where.modelType))
          );
        });
      },
      reloadRight () {
        this.datasourceRightShow = this.datasourceRight.filter((item) => {
          return (
            (!this.whereRight.categoryLevelGroupId ||
              item.categoryLevelGroupId.includes(
                this.whereRight.categoryLevelGroupId
              )) &&
            (!this.whereRight.code ||
              item.code.includes(this.whereRight.code)) &&
            (!this.whereRight.name ||
              item.name.includes(this.whereRight.name)) &&
            (!this.whereRight.modelType ||
              item.modelType.includes(this.whereRight.modelType))
          );
        });
      },
      async getDatasource () {
        const data = await unassociated({
          categoryLevelGroupId: this.idMap[this.type]
        });
        this.datasource = data.slice(0);
        this.datasourceShow = data.slice(0);
      },
      async getDatasourceRight () {
        const data = await getRelatesInformationList({
          mainCategoryId: this.row.categoryLevelId,
          // categoryLevelGroupId: this.idMap[this.type],
          categoryLevelRootId: this.type
        });
        this.datasourceRight = data.slice(0);
        this.datasourceRightShow = data.slice(0);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ml20 {
    margin-left: 20px;
  }
  .footer {
    text-align: right;
  }
</style>