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

<template>
  <ele-modal width="70vw" :visible.sync="visible" :close-on-click-modal="true" append-to-body
    custom-class="ele-dialog-form" title="选择工序">
    <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">
          <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" @cell-click="cellClick" ref="table" height="45vh"
      :initLoad="false" row-key="id">

      <!-- 表头工具栏 -->
      <template v-slot:action="{ row }">
        <el-radio class="radio" v-model="radio" :label="row.id"><i></i></el-radio>
      </template>

    </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 { getProduceList } from '@/api/factoryModel';
import producetask from '@/api/technology/production';
export default {
  data() {
    return {
      visible: false,
      isUpdate: false,
      selection: [],
      searchData: {
        code: '',
        name: ''
      },
      columns: [

        {
          prop: 'code',
          label: '工序编码',
          // sortable: 'custom',
          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
        },

        {
          action: 'action',
          slot: 'action',
          align: 'center',
          label: '选择'
        }


      ],
      radio: null,

    };
  },
  methods: {
    open(item) {

      if(item) {
        this.current = {
            id: item.taskIds,
            name: item.taskNames,
          }
      }
      this.radio = item.taskIds
      this.visible = true;
      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.current = null
      this.radio = ''
      this.searchData = {};
      this.visible = false;
    },
    confirm() {

      if (!this.current) {
        return this.$message.warning('请选择工作中心')
      }
      this.$emit('changeProduct',  this.current)
      this.cancel()

    },

    // 单击获取id
    cellClick(row) {
      this.current = row
      this.radio = row.id
    },

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

      this.searchData = {};
      this.$refs.table.reload();
    }
  }
};
</script>