lingji-work-fe/src/views/material-center/components/raw-material/index.vue

<script lang="tsx">
import { provide } from 'vue';
import { Tabs, TabPane } from 'ant-design-vue';
import { TABS_LIST, RawMaterialType, INITIAL_QUERY, TABLE_COLUMNS } from './constants';
import FilterBlock from './components/filter-block/index.vue';
import RawMaterialTable from './components/table/index.vue';
import DeleteRawMaterialModal from './components/table/delete-file-modal.vue';

import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
import { getRawMaterialsPage } from '@/api/all/generationWorkshop';

export default defineComponent({
  setup(_, { attrs, slots, expose }) {
    const {
      dataSource,
      pageInfo,
      rowSelection,
      onPageChange,
      onPageSizeChange,
      selectedRowKeys,
      selectedRows,
      handleSelect,
      handleSelectAll,
      resetPageInfo,
    } = useTableSelectionWithPagination({
      onPageChange: () => {
        getData();
      },
      onPageSizeChange: () => {
        getData();
      },
    });

    const deleteRawMaterialModalRef = ref(null);
    const query = ref(cloneDeep(INITIAL_QUERY));
    const handleSearch = () => {
      getData();
    };
    const getData = async () => {
      const { page, page_size } = pageInfo.value;
      const { code, data } = await getRawMaterialsPage({
        ...query.value,
        page,
        page_size,
      });
      if (code === 200) {
        dataSource.value = data?.data ?? [];
        pageInfo.value.total = data.total;
      }
    };
    const reload = () => {
      pageInfo.value.page = 1;
      getData();
    };
    const handleReset = () => {
      resetPageInfo();
      query.value = cloneDeep(INITIAL_QUERY);
      reload();
    };
    const handleSorterChange = (column, order) => {
      query.value.sort_column = column;
      query.value.sort_order = order;
      reload();
    };

    const handleBatchDelete = () => {
      const ids = selectedRows.value.map((item) => item.id);
      const names = selectedRows.value.map((item) => `"${item.name || '-'}` + '"').join('，');

      deleteRawMaterialModalRef.value?.open({ id: ids, name: names });
    };

    const handleDelete = (item) => {
      const { id, name } = item;
      deleteRawMaterialModalRef.value?.open({ id, name: `“${name}â€<EFBFBD>` });
    };

    const handleTabClick = (key) => {
      query.value.type = key;
      reload();
    };

    const onBatchSuccess = () => {
      selectedRows.value = [];
      selectedRowKeys.value = [];
      getData();
    };

    onMounted(() => {
      getData();
    });

    return () => (
      <div class="raw-material-wrap h-full flex flex-col">
        <div class="bg-white rounded-t-8px">
          <Tabs v-model:activeKey={query.value.type} onTabClick={handleTabClick}>
            {TABS_LIST.map((item) => (
              <TabPane key={item.value} tab={item.label}>
                {item.label}
              </TabPane>
            ))}
          </Tabs>
        </div>
        <div class="filter-wrap bg-#fff rounded-b-8px  mb-16px">
          <FilterBlock v-model:query={query.value} onSearch={handleSearch} onReset={handleReset} />
        </div>
        <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
          <div class="flex justify-end mb-12px">
            <a-button type="outline" class="w-fit" size="medium" onClick={handleBatchDelete}>
              批é‡<EFBFBD>删除
            </a-button>
          </div>

          <RawMaterialTable
            tableColumns={TABLE_COLUMNS}
            rowSelection={rowSelection}
            selectedRowKeys={selectedRowKeys.value}
            dataSource={dataSource.value}
            onSorterChange={handleSorterChange}
            onDelete={handleDelete}
            onSelect={handleSelect}
            onSelectAll={handleSelectAll}
          />
          {pageInfo.value.total > 0 && (
            <div class="pagination-row">
              <a-pagination
                total={pageInfo.value.total}
                size="mini"
                show-total
                show-jumper
                show-page-size
                current={pageInfo.value.page}
                pageSize={pageInfo.value.page_size}
                onChange={onPageChange}
                onPageSizeChange={onPageSizeChange}
              />
            </div>
          )}
        </div>
        <DeleteRawMaterialModal ref={deleteRawMaterialModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
      </div>
    );
  },
});
</script>

<style scoped lang="scss">
@import './style.scss';
</style>