InstantRetailAdmin/src/components/zt/Table/z-table.vue

<script lang="tsx">
import { computed, defineComponent, onMounted, reactive, ref, toRaw, unref } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { defaultTransform, useNaivePaginatedTable, useTableOperate } from '@/hooks/common/table';
import { useForm } from '../Form/hooks/useForm';
import type { FormProps } from '../Form/types/form';
import type { TableMethods } from './hooks/useTable';
import type { tableProp } from './types';
import { basicProps } from './props';
export default defineComponent({
  name: 'ZTable',
  props: {
    ...basicProps
  },
  emits: ['register', 'add', 'delete'],
  setup(props, { emit, slots }) {
    const appStore = useAppStore();
    const propsData = toRaw(props);
    const searchProps = ref<FormProps>();
    const tableProps = ref<tableProp>();
    const getFormSearch = computed(() => {
      return {
        labelWidth: 120,
        layout: 'horizontal',
        gridProps: {
          cols: '1 xl:4 s:1 l:3',
          itemResponsive: true
        },
        collapsedRows: 1,
        ...unref(searchProps)
      };
    });
    const getTableProps = computed(() => {
      return {
        ...propsData.tableConfig,
        ...unref(tableProps)
      };
    });
    const NTableProps = computed(() => {
      return {
        ...unref(tableProps)
      };
    });
    const [registerSearchForm, { getFieldsValue: getSeachForm, setFormProps: setSearchProps }] = useForm(
      getFormSearch.value
    );
    const searchPage = reactive({
      current: 1,
      size: 10
    });
    const getForm = ref();
    const { columns, columnChecks, data, getData, loading, mobilePagination } = useNaivePaginatedTable({
      api: () => propsData.api({ ...searchPage, ...getForm.value }),
      transform: response => defaultTransform(response),
      onPaginationParamsChange: params => {
        searchPage.current = Number(params.page);
        searchPage.size = Number(params.pageSize);
      },
      paginationProps: {
        pageSizes: [10, 20, 50, 100, 150, 200]
      },
      columns: () => handleGetColumns()
    });
    const { checkedRowKeys } = useTableOperate(data, getTableProps.value.keyField, getData);
    function handleGetColumns() {
      const columnsData = [...propsData.columns];
      if (propsData.showTableAction) {
        columnsData.push({
          key: 'operate',
          title: '操作',
          align: 'center',
          width: getTableProps.value.opWdith,
          fixed: 'right',
          render: row => <div class="flex-center gap-8px">{slots.op ? slots.op({ row }) : ''}</div>
        });
      }
      return columnsData;
    }
    function setTableConfig(config: tableProp) {
      tableProps.value = config;
    }
    function getTableCheckedRowKeys() {
      return checkedRowKeys.value;
    }
    function getTableData() {
      return data.value;
    }
    const TableMethod: TableMethods = {
      refresh: getData,
      setSearchProps,
      setTableLoading,
      setTableConfig,
      getTableCheckedRowKeys,
      getTableData
    };
    function setTableLoading(flage: boolean) {
      loading.value = flage;
    }
    onMounted(() => {
      emit('register', TableMethod);
    });
    function handleAdd() {
      emit('add');
    }
    function handleDelete() {
      emit('delete', checkedRowKeys.value);
    }
    function handleReset() {
      getForm.value = getSeachForm();
      getData();
    }
    function handleSearch() {
      const form = getSeachForm();
      if (getTableProps.value.fieldMapToTime && form[getTableProps.value.fieldMapToTime[0][0] as unknown as string]) {
        const [startTimeKey, endTimeKey] = getTableProps.value.fieldMapToTime[0][1];
        form[startTimeKey] = form.Time[0];
        form[endTimeKey] = form.Time[1];
        delete form.Time;
      }
      console.log(form, '请求参数');

      getForm.value = form;
      getData();
    }
    return {
      registerSearchForm,
      handleDelete,
      checkedRowKeys,
      appStore,
      loading,
      mobilePagination,
      data,
      columns,
      tableProps,
      columnChecks,
      getTableProps,
      handleAdd,
      getData,
      handleReset,
      handleSearch,
      NTableProps
    };
  }
});
</script>

<template>
  <NCard v-if="getTableProps.showSearch" :bordered="false" size="small">
    <NCollapse display-directive="show" :default-expanded-names="['role-search']">
      <NCollapseItem title="搜索" name="role-search">
        <BasicForm @register-form="registerSearchForm" @submit="handleSearch" @reset="handleReset" />
      </NCollapseItem>
    </NCollapse>
  </NCard>
  <NCard :bordered="false" :title="getTableProps.title" size="small" class="card-wrapper sm:flex-1-hidden">
    <template #header-extra>
      <TableHeaderOperation
        v-if="getTableProps.showTableHeaderAction"
        v-model:columns="columnChecks"
        :disabled-delete="checkedRowKeys.length === 0"
        :loading="loading"
        :is-add="getTableProps.showAddButton"
        :is-delete="getTableProps.showDeleteButton"
        @add="handleAdd"
        @delete="handleDelete"
        @refresh="getData"
      >
        <template #prefix>
          <slot name="prefix"></slot>
        </template>
      </TableHeaderOperation>
    </template>
    <NDataTable
      v-bind="NTableProps"
      v-model:checked-row-keys="checkedRowKeys"
      :columns="columns"
      :data="data"
      size="small"
      :flex-height="!appStore.isMobile"
      :scroll-x="getTableProps.scrollX"
      :loading="loading"
      remote
      :row-key="row => row[getTableProps.keyField]"
      :pagination="mobilePagination"
      class="sm:h-full"
    />
  </NCard>
</template>

<style scoped></style>