gasInjection-project/src/views/vent/comment/EditRowTable.vue

<template>
  <div class="p-4">
    <a-button v-if="isAdd" type="primary" @click="addRow"> 新增 </a-button>
    <BasicTable @register="registerTable" @edit-change="onEditChange">
      <template #action="{ record, column }">
        <div class="vent-flex-row">
          <TableAction :actions="createActions(record, column)" />
        </div>
        
      </template>
      <template #bodyCell="{ column, record }">
        <slot name="filterCell" v-bind="{ column, record }"> </slot>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick, watch} from 'vue';
  import { BasicTable, useTable, TableAction, BasicColumn, ActionItem, EditRecordRow } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import { nextTick } from 'process';

  export default defineComponent({
    components: { BasicTable, TableAction },
    props: {
      columns: {
        type: Array,
        requried: true,
      },
      dataSource: {
        type: Array,
      },
      searchFormSchema: {
        type: Array,
        default: () => []
      },
      list: {
        type: Function,
      },
      isAdd: {
        type: Boolean,
      },
      isRadio: {
        type: Boolean,
      },
    },
    emits: ['saveOrUpdate', 'deleteById', 'rowChange'],
    setup(props, { emit, expose }) {
      const { createMessage: msg } = useMessage();
      const currentEditKeyRef = ref('');
      const dataList = ref<any[]>([])

      const [registerTable, { insertTableDataRecord, reload, getSelectRows, getDataSource, setTableData }] = !props.list ?  useTable({
        title: '',
        dataSource: props.dataSource,
        rowKey: 'id',
        clickToRowSelect: false,
        columns: props.columns as BasicColumn[],
        showIndexColumn: false,
        showTableSetting: false,
        rowSelection: !props.isRadio ? undefined : { type: 'radio', onChange: rowChange },
        tableSetting: { fullScreen: true },
        formConfig: {
          labelWidth: 120,
          schemas: props.searchFormSchema,
          autoSubmitOnEnter: true,
        },
        actionColumn: {
          width: 160,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        }) : useTable({
          title: '',
          api: props.list,
          rowKey: 'id',
          clickToRowSelect: false,
          columns: props.columns as BasicColumn[],
          showIndexColumn: false,
          showTableSetting: false,
          rowSelection: !props.isRadio ? undefined : { type: 'radio', onChange: rowChange },
          tableSetting: { fullScreen: true },
          actionColumn: {
            width: 160,
            title: '操作',
            dataIndex: 'action',
            slots: { customRender: 'action' },
          },
      });

      function rowChange(e) {
        emit('rowChange', e[0], getSelectRows()[0]);
      }

      function addRow() {
        const record = {} as EditRecordRow;
        insertTableDataRecord(record);
        nextTick(() => {
          handleEdit(record);
        });
      }

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

      function handleCancel(record: EditRecordRow) {
        currentEditKeyRef.value = '';
        record.onEdit?.(false, false);
        if (!record.id) {
          const dataSource = getDataSource();
          const res = dataSource.filter((item) => {
            return item.id != undefined;
          });
          setTableData(res);
        }
      }

      function handleDelete(record: EditRecordRow) {
        if (record.id) emit('deleteById', record.id, reload);
      }

      async function handleSave(record: EditRecordRow) {
        // 校验
        msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
        const valid = await record.onValid?.();
        if (valid) {
          try {
            //TODO 此处将数据提交给服务器保存
            emit('saveOrUpdate', Object.assign(record, record.editValueRefs), reload);
            // 保存之后提交编辑状态
            const pass = await record.onEdit?.(false, true);
            if (pass) {
              currentEditKeyRef.value = '';
            }
            msg.success({ content: '数据已保存', key: 'saving' });
          } catch (error) {
            msg.error({ content: '保存失败', key: 'saving' });
          }
        } else {
          msg.error({ content: '请填写正确的数据', key: 'saving' });
        }
      }

      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,
                popConfirm: {
                  title: '是否删除',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ];
          } else {
            return [
              {
                label: '编辑',
                disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',
                popConfirm: {
                  title: '是否删除',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ];
          }
        }
        return [
          {
            label: '保存',
            popConfirm: {
              title: '是否保存',
              confirm: handleSave.bind(null, record),
            },
          },
          {
            label: '取消',
            popConfirm: {
              title: '是否取消编辑',
              confirm: handleCancel.bind(null, record),
            },
          },
        ];
      }

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

      watch(() => props.dataSource, (newVal:any[]) => {
        setTableData(newVal)
      })

      expose({
        reload
      });

      return {
        registerTable,
        handleEdit,
        createActions,
        onEditChange,
        addRow,
        reload,
        getDataSource,
        dataList
      };
    },
  });
</script>
<style scoped lang="less">
  @ventSpace: zxm;
  @vent-table-no-hover: #00bfff10;
  
  :deep(.@{ventSpace}-table-body) {
    height: auto !important;
  }

  :deep(.@{ventSpace}-table-cell-row-hover) {
    background: #264d8833 !important;
  }
  :deep(.@{ventSpace}-table-row-selected) {
    background: #268bc522 !important;
  }

  :deep(.@{ventSpace}-table-tbody > tr > td) {
    background-color: #0dc3ff05;
  }
  :deep(.jeecg-basic-table-row__striped) {
    td {
      background-color: @vent-table-no-hover !important;
    }
  }
  :deep(.@{ventSpace}-select-dropdown) {
    .@{ventSpace}-select-item {
      color: #fff !important;
    }

    .@{ventSpace}-select-item-option-selected,
    .@{ventSpace}-select-item-option-active {
      background-color: #00678b66 !important;
    }

    .@{ventSpace}-select-item:hover {
      background-color: #008fc366 !important;
    }
  }
</style>