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

<template>
  <ele-modal :visible.sync="visible" :title="`给工序【${row.code}${row.name}】分配物料`" width="90%" @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
            >
          </template>
        </headerTitle>
        <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>
          </template>
        </headerTitle>
        <ele-pro-table
          ref="tableRight"
          :columns="columns"
          :datasource="datasourceRightShow"
          :selection.sync="selectionRight"
          height="45vh"
          :initLoad="false"
          :need-page="false"
          cache-key="link-material-dialog-right"
        >
          <template v-slot:capacity="{ row }">
            <el-row>
              <el-col :span="8">
                <el-input v-model="row.quantity"></el-input
              ></el-col>
              <el-col :span="8">
                <DictSelection
                  class="line-select"
                  dictName="重量单位"
                  clearable
                  v-model="row.quantityUnitId"
                >
                </DictSelection
              ></el-col>
              <el-col :span="8">
                <DictSelection
                  class="line-select"
                  dictName="提前期单位"
                  clearable
                  v-model="row.timeUnit"
                >
                </DictSelection
              ></el-col>
            </el-row>
          </template>
          <template v-slot:angle="{ row }">
            <DictSelection dictName="角度" clearable v-model="row.angle">
            </DictSelection>
          </template> </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 { getBomSubList , saveBomList } from '@/api/technology/version/version.js';
  export default {
    components: {  },
    data () {
      return {
        visible: false,
        row: {},
        datasourceShow: [],
        datasourceRightShow: [],
        selectionRight: [],
        selection: [],
      }
    },
    created () {
    },
    computed: {
      columns () {
        return [
          {
            type: 'selection',
            align: 'center'
          },
          {
            label: '子项编号',
            prop: 'subCode'
          },
          {
            label: '子项物料编码',
            prop: 'categoryCode'
          },
          {
            label: '子项物料名称',
            prop: 'categoryName'
          },
          {
            label: '基本数量',
            prop: 'baseNum'
          },
          {
            label: '单位',
            prop: 'unit'
          }
        ];
      },
    },
    methods: {
      open (row) {
        this.row = row;
        this.getDatasource();
        this.visible = true;
      },
      cancel () {
        this.visible = false;
      },
      async save () {
        if (!this.datasourceRightShow.length) {
          return this.$message.error('请添加关联数据');
        }
        const arr = []
        this.datasourceRightShow.map(item=>{
           arr.push(item.bomSubId)
        })
        const params = {
          produceVersionId:this.row.produceVersionId,
          taskInstanceId:this.row.id,
          bomSubId: arr
        };
        await saveBomList(params);
        this.cancel();
        this.$message.success('操作成功！');
        this.$emit('success');
      },
      handleConect () {
        if (!this.selection.length) {
          return this.$message.error('请选择关联数据');
        }
        this.datasourceShow = this.datasourceShow.filter((i) =>
          !this.selection.find((t) => t.bomSubId == i.bomSubId)
        );
        this.datasourceRightShow.push(...this.selection);
        this.selection = [];
      },
      handleCancelConect () {
        if (!this.selectionRight.length) {
          return this.$message.error('请选择取消关联数据');
        }
        this.datasourceRightShow = this.datasourceRightShow.filter((i) =>
          !this.selectionRight.find((t) => t.bomSubId == i.bomSubId)
        );
        this.datasourceShow.push(...this.selectionRight);
        this.selectionRight = [];
      },
      async getDatasource () {
         const params = {
            bomId:this.row.bomId,
            produceVersionId:this.row.produceVersionId,
            routingTaskId:this.row.id,
            pageNum:1,
            size:-1
         }
        const data = await getBomSubList(params);
          if(typeof data.uncorrelatedList == 'string' ){
             this.datasource = []
          }else{
            this.datasourceShow = data.uncorrelatedList;
          }
          if(typeof data.correlatedList == 'string' ){
             this.datasourceRightShow = []
          }else{
            this.datasourceRightShow = data.correlatedList;
          }
      },
    }
  };
</script>

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