hsq-pro/src/views/vent/deviceManager/comment/pointTabel/WorkFacePointTable copy.vue

<template>
  <div class="p-4">
    <div class="btm-group vent-flex-row-between">
      <div>
        <label style="color: #fff">设备类型：</label>
        <ApiTreeSelect
          @change="handleChange"
          :api="deviceList.bind(null, { devicetype: '' })"
          :fieldNames="{ children: 'children', label: 'itemText', value: 'itemValue' }"
          v-model:value="deviceKind"
          style="width: 200px"
        />
        <a-button type="primary" @click="addRow"> 新增 </a-button>
      </div>
      <div>
        <a-button type="primary" @click="handleSave"> 保存 </a-button>
      </div>
    </div>
    <BasicTable @register="registerTable" :dataSource="dataSource" :columns="workFaceColumns" @edit-change="onEditChange">
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" />
      </template>
    </BasicTable>
    <DeviceModalTable
      @register="registerModal"
      :deviceType="deviceKind"
      :deviceID="deviceId"
      @reload="getWorkFaceList"
      :selectionRowKeys="selectionRowKeys"
    />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick, inject, onMounted } from 'vue';
  import { BasicTable, useTable, TableAction, BasicColumn, ActionItem, EditRecordRow } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { ApiTreeSelect } from '/@/components/Form';
  import DeviceModalTable from './DeviceModalTable.vue';
  import { deviceId, workDeviceList, deviceList, list, edit } from './point.api';
  import { workFaceColumns, deviceColumns } from './point.data';

  export default defineComponent({
    components: { BasicTable, TableAction, DeviceModalTable, ApiTreeSelect },
    props: {
      columns: {
        type: Array,
        requried: true,
      },
      deviceId: {
        type: String || Number,
        requried: true,
      },
      list: {
        type: Function,
        requried: true,
      },
      isAdd: {
        type: Boolean,
      },
    },
    emits: ['save', 'delete'],
    setup(props, { emit }) {
      const activeTab = ref('1');
      const deviceKind = ref('');
      const type = inject('deviceType') || '';

      const currentEditKeyRef = ref('');
      const options = ref([]);

      const dataSource = ref<any>([]);
      const selectionRowKeys = ref<any[]>([]);

      const [registerModal, { openModal }] = useModal();

      const [registerTable, { insertTableDataRecord, reload }] = useTable({
        title: '',
        showIndexColumn: true,
        showTableSetting: false,
        tableSetting: { fullScreen: true },
        actionColumn: {
          width: 160,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });

      function addRow() {
        openModal();
      }

      function handleEdit(record: EditRecordRow) {
        currentEditKeyRef.value = record.key;
        record.onEdit?.(true);
      }

      function handleCancel(record: EditRecordRow) {
        currentEditKeyRef.value = '';
        record.onEdit?.(false, false);
      }

      function handleDelete(record: EditRecordRow) {
        emit('delete', record.id, reload);
      }
      async function getOptions() {
        const res = await deviceList({ devicetype: '' });
        options.value = res;
        deviceKind.value = options.value[0]['itemValue'];
        getWorkFaceList();
      }

      function getWorkFaceList() {
        workDeviceList({ deviceKind: deviceKind.value, sysId: props.deviceId }).then((res) => {
          dataSource.value = res['records'];
          selectionRowKeys.value = dataSource.value.map((item) => item.deviceId) || [];
        });
      }

      function handleChange(id) {
        deviceKind.value = id;
        getWorkFaceList();
      }

      async function handleSave(record: EditRecordRow) {
        dataSource.value.filter((item) => {
          if (record.id && record.id === item.id) {
            Object.assign(item, record.editValueRefs);
          }
        });
        console.log('[ dataSource ] >', dataSource.value, record);
        // 校验
        await edit(dataSource.value);
        record.editable = false;
      }

      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
        if (!record.editable) {
          if (props.isAdd) {
            return [
              {
                label: '编辑',
                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',
                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
                onClick: handleDelete.bind(null, record),
              },
            ];
          } else {
            return [
              {
                label: '编辑',
                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
                onClick: handleEdit.bind(null, record),
              },
            ];
          }
        }
        return [
          {
            label: '保存',
            onClick: handleSave.bind(null, record, column),
          },
          {
            label: '取消',
            popConfirm: {
              title: '是否取消编辑',
              confirm: handleCancel.bind(null, record, column),
            },
          },
        ];
      }

      function onEditChange({ column, value, record }) {
        // 本例
        if (column.dataIndex === 'devicetype') {
          // record.editValueRefs.name4.value = `${value}`;
        }
        // console.log(column, value, record);
      }

      onMounted(async () => {
        await getOptions();
        getWorkFaceList();
      });

      return {
        activeTab,
        registerTable,
        handleEdit,
        createActions,
        onEditChange,
        addRow,
        workFaceColumns,
        deviceColumns,
        getOptions,
        options,
        deviceList,
        dataSource,
        deviceKind,
        handleChange,
        registerModal,
        handleSave,
        selectionRowKeys,
        getWorkFaceList,
        // handleChangeDeviceType,
        // handleChangeLinkCode,
        // monitorParamsOptions,
      };
    },
  });
</script>
<style scoped lang="less">
  :deep(.ant-table-body) {
    height: auto !important;
  }
  .btm-group {
    padding-bottom: 2px;
  }
</style>