kd-aiot-frontend-mes/src/views/produce/components/prenatalExamination/materialModal.vue

<template>
  <el-dialog
    v-if="visible"
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="70%"
    :fullscreen="fullscreen"
    class="fullscreen"
  >
    <el-card shadow="never">
      <seek-page :seekList="seekList" @search="reload"></seek-page>
      <ele-pro-table
        style="min-height: 400px"
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        :need-page="false"
        row-key="index"
      >
      </ele-pro-table>
    </el-card>

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

<script>
  import SeekPage from '@/components/common/seekPage.vue';
  import {
    queryPickAndFeedByWorkOrderId,
    queryAllProduceTaskInstanceInPickOrder
  } from '@/api/producetaskrulerecord/index.js';

  export default {
    components: {
      SeekPage
    },
    data() {
      return {
        fullscreen: false,
        visible: false,
        title: '选择物品',
        type: null,

        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            reserveSelection: true,
            fixed: 'left',
            selectable: (row, index) => {
              // 已选物料不可再选
              return !this.pickDetails.some(
                (item) =>
                  item.categoryCode === row.categoryCode &&
                  item.produceTaskInstanceId === row.produceTaskInstanceId
              );
            }
          },
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center'
          },
          {
            label: '类型',
            prop: 'categoryLevelNamePath',
            minWidth: 120
          },
          {
            label: '编码',
            prop: 'categoryCode',
            minWidth: 120
          },
          {
            label: '名称',
            prop: 'categoryName',
            minWidth: 120
          },
          {
            prop: 'model',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specifications',
            label: '规格',
            align: 'center',
            width: 160,
            showOverflowTooltip: true
          },
          {
            prop: 'brandNo',
            label: '牌号',
            align: 'center'
          },
          {
            label: '工序名称',
            prop: 'produceTaskName',
            minWidth: 120
          },
          {
            label: '数量',
            prop: 'feedQuantity',
            minWidth: 120,
            formatter: (row) => {
              return (row.quantity || 0) + (row.unit || '');
            }
          }
        ],

        // 表格选中数据
        selection: [],
        taskPlanList: [],
        params: {},
        // 已选物料
        pickDetails: []
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '关键词:',
            value: 'keyword',
            type: 'input',
            placeholder: '物料编码、物料名称、批次号'
          }
        ];
      }
    },
    created() {},
    methods: {
      /* 表格数据源 */
      async datasource({ page, limit, where }) {
        const res = await queryPickAndFeedByWorkOrderId({
          ...where,
          ...this.params
          // pageNum: page,
          // size: limit
        });
        return res;
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      handleClose() {
        this.$refs.table.setSelectedRows([]);
        this.selection = [];
        this.visible = false;
      },
      open(params = {}, pickDetails = []) {
        this.params = params;
        this.visible = true;
      },
      selected() {
        if (this.selection.length === 0) {
          this.$message.warning('请至少选择一条数据');
          return;
        }
        this.$emit('confirm', this.selection);
        this.handleClose();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .rx-sc {
    flex: 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ml60 {
    margin-left: 60px;
  }
</style>