feat: 原料库

src/views/material-center/components/raw-material/index.vue

@@ -1,10 +1,143 @@
 <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}”` });
+    };
+
+    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}>
+              批量删除
+            </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>
     );
   },