kd-aiot-frontend-mes/src/components/EquipmentDailog/equipment-dailog.vue

<template>
  <ele-modal
    :visible.sync="visible"
    title="添加工单-选择设备"
    width="65vw"
    append-to-body
  >
    <div class="search-box">
      设备名称
      <el-input placeholder="请输入" v-model="name"></el-input>
    </div>
    <!-- 数据表格 -->
    <!-- :highlight-current-row="isSingle" -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      @done="handleDone"
      row-key="id"
      :needPage="false"
      :initLoad="false"
      :selection.sync="selectionList"
      :datasource="datasourceShow"
      :current.sync="current"
      highlight-current-row
      height="45vh"
      @row-click="choose"
    >
      <template v-slot:select="{ row }">
        <el-radio class="radio" v-model="radio" :label="row.id"
          ><i></i
        ></el-radio>
      </template>
    </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 { getDeviceList, getPlanDeviceList } from '@/api/aps/index';
  export default {
    props: {
      produceVersionId: {
        type: String,
        default: ''
      },
      isPlan: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        visible: false,
        current: null,
        name: '',
        selectionList: [],
        memoList: [],
        datasource: [],
        isSingle: false,
        callback: null,
        radio: ''
      };
    },
    computed: {
      columns () {
        const list = [
          {
            label: '设备编码',
            prop: 'code'
          },
          {
            label: '设备名称',
            prop: 'name'
          },
          // {
          //   label: '生产状态',
          //   prop: 'status'
          // },
          {
            label: '未完成工单数',
            prop: 'incompleteOrderNum'
          },
          {
            label: '预计完成时间',
            prop: 'planCompleteDate'
          },
          {
            label: '产能',
            prop: 'capacityNum',
            width: 200,
            formatter: (row) =>
              row.capacityNum + ' ' + row.capacityUnit + '/' + row.capacityTime
          },
          {
            label: '末单牌号',
            prop: 'lastOrderGrade'
          }
        ];

        if (!this.isSingle) {
          list.push({
            slot: 'select',
            prop: 'select',
            label: '选择',
            align: 'center'
          });
        }
        return list;
      },
      datasourceShow () {
        return this.datasource?.filter((item) => {
          if (this.name) {
            return item.name.includes(this.name);
          }

          return true;
        });
      }
    },
    methods: {
      open (list = []) {
        this.memoList = list;
        this.isSingle = false;
        this.visible = true;
        this._getList();
      },
      openSingle (list = [], callback) {
        this.memoList = list;
        this.callback = callback;
        this.isSingle = true;
        this.visible = true;
        this._getList();
      },
      handleDone ({ data }) {
        if (this.memoList.length) {
          this.$nextTick(() => {
            if (this.isSingle) {
              this.$refs.table.setCurrentRow(
                data.find((item) => item.id == this.memoList[0].deviceId)
              );
            } else {
              this.memoList.length &&
                this.$refs.table.setSelectedRowKeys(
                  this.memoList.map((i) => i.deviceId)
                );
            }
          });
        }
      },
      async _getList () {
        const fn = this.isPlan ? getPlanDeviceList : getDeviceList;
        const data = await fn({
          name: this.name,
          productionId: this.produceVersionId
        });
        this.datasource = data || [];
      },
      confirm () {
        if (this.isSingle) {
          if (!this.current) return this.$message.error('请选择数据');

          this.callback && this.callback(this.current);
        } else {
          if (!this.current) return this.$message.error('请选择数据');
          this.$emit('success', [this.current]);
        }

        this.cancel();
      },
      cancel () {
        this.$refs.table.clearSelection();
        this.radio = '';
        this.current = null;
        this.visible = false;
      },
      // 单击获取id
      choose (row) {
        this.current = row;
        this.radio = row.id;
      }
    }
  };
</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>