kd-aiot-frontend-mes/src/views/produceOrder/components/order-dailog.vue

<template>
  <ele-modal
    :visible.sync="visible"
    title="添加工单-选择设备"
    width="65vw"
    append-to-body
  >
    <div class="search-box">
      生产工单号:
      <el-input placeholder="请输入" v-model="orderCode" clearable></el-input>
      <el-button type="primary" @click="reload">搜索</el-button>
    </div>
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      @done="handleDone"
      @update:selection="selectionChange"
      row-key="id"
      :selection.sync="selectionList"
      :datasource="datasource"
      height="45vh"
    >
    </ele-pro-table>
    <div class="footer" slot="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button @click="confirm" type="primary">确定</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { getPage } from '@/api/produceOrder/index.js';
  export default {
    data () {
      return {
        visible: false,
        orderCode: '',
        selectionList: [],
        memoList: [],
        callback: null
      };
    },
    computed: {
      columns () {
        const list = [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            fixed: 'left',
            showOverflowTooltip: true
          },
          {
            slot: 'code',
            label: '生产工单号',
            align: 'center'
          },
          {
            prop: 'productionPlanCode',
            label: '计划编号',
            align: 'center'
          },
          {
            prop: 'planType',
            label: '计划类型',
            align: 'center'
          },
          {
            prop: 'produceVersionName',
            label: '生产版本',
            align: 'center'
          },
          {
            prop: 'productCode',
            label: '产品编号',
            align: 'center'
          },
          {
            prop: 'productName',
            label: '产品名称',
            align: 'center'
          },
          {
            prop: 'brandNo',
            label: '牌号',
            align: 'center'
          },
          {
            prop: 'model',
            label: '型号',
            align: 'center'
          },
          {
            prop: 'formingNum',
            label: '要求成型数量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'formingWeight',
            label: '要求成型重量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'formedNum',
            label: '已成型数量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'formedWeight',
            label: '已成型重量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'planStartTime',
            label: '计划开始时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'startTime',
            label: '实际开始时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },

          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            type: 'selection',
            width: 55,
            align: 'center',
            fixed: 'right',
            reserveSelection: true
          }
        ];

        return list;
      }
    },
    watch: {
      selectionList (newVal, oldVal) {
        console.log(newVal, oldVal);
        if (newVal.length < oldVal.length) {
          const arr = oldVal.filter(
            (item) => !newVal.find((p) => p.id === item.id)
          );

          this.memoList = this.memoList.filter(
            (item) => !arr.find((p) => p.id === item.id)
          );
        }
      }
    },
    methods: {
      open (val, list = []) {
        this.memoList = list;
        this.visible = true;
      },
      handleDone ({ data }) {
        if (this.memoList.length && data.length) {
          this.$nextTick(() => {
            this.$refs.table.setSelectedRowKeys(this.memoList.map((i) => i.id));
          });
        }
      },
      reload () {
        this.$refs.table.reload();
      },
      selectionChange (selection) {
        console.log(selection);
      },
      /* 表格数据源 */
      datasource ({ page, limit }) {
        return getPage({
          pageNum: page,
          size: limit,
          code: this.orderCode,
          statusList: [5, 4, 7]
        });
      },
      confirm () {
        if (!this.selectionList?.length)
          return this.$message.error('请选择数据');

        this.$emit('success', [...this.selectionList, ...this.memoList]);

        this.cancel();
      },
      cancel () {
        this.$refs.table.clearSelection();
        this.orderCode = '';
        this.visible = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .search-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    .el-input {
      width: 220px;
      margin: 0 32px;
    }
  }
</style>