kd-aiot-frontend/src/views/factoryModel/station/components/ProduceDialogAll.vue

<template>
  <ele-modal
    width="70vw"
    :visible.sync="visible"
    :close-on-click-modal="false"
    append-to-body
    custom-class="ele-dialog-form"
    title="选择工序"
    :maxable="true"
  >
    <el-form label-width="120px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="工序编码" prop="code">
            <el-input v-model="searchData.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工序名称" prop="name">
            <el-input v-model="searchData.name"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="工作中心" prop="name">
            <el-select
              v-model="searchData.workCenterId"
              placeholder="请选择"
              filterable
              clearable
            >
              <el-option
                v-for="item in workCenterList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <div class="ele-form-actions">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <ele-pro-table
      :columns="columns"
      :datasource="datasource"
      ref="table"
      height="45vh"
      :initLoad="false"
      row-key="id"
      :selection.sync="selection"
    >
    </ele-pro-table>

    <div slot="footer">
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import producetask from '@/api/technology/production';
  import work from '@/api/technology/work';
  export default {
    props: {
      disabledListId: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        visible: false,
        selection: [],
        searchData: {
          code: '',
          name: '',
          workCenterId: ''
        },
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            fixed: 'left',
            selectable: (row, index) => {
              return !this.disabledListId.includes(row.id);
            }
          },
          {
            prop: 'code',
            label: '工序编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'name',
            label: '工序名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            align: 'center',
            prop: 'controlName',
            label: '工序控制码',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'workCenterName',
            label: '所属工作中心',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          }
        ],
        workCenterList: []
      };
    },
    methods: {
      open() {
        this.visible = true;
        this.getListWorkCenter();
        this.$nextTick(() => {
          this.$refs.table.reload();
        });
      },
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        const res = await producetask.list({
          ...where,
          ...this.searchData,
          pageNum: page,
          size: limit
        });
        return res;
      },
      cancel() {
        this.searchData = {};
        this.visible = false;
      },
      confirm() {
        if (!this.selection.length) {
          return this.$message.warning('请选择工序');
        }
        this.$emit('changeProduct', this.selection);
        this.cancel();
      },

      search() {
        this.$refs.table.reload();
      },
      reset() {
        this.searchData = {};
        this.$refs.table.reload();
      },

      async getListWorkCenter() {
        await work.list({ pageNum: 1, size: -1 }).then((res) => {
          this.workCenterList = res.list;
        });
      }
    }
  };
</script>