修改资产草稿

src/view/Manage/AssetDraft/component/AssetDraft.jsx

-import React, { useState, useEffect, useMemo } from "react";
-import { Table, Button, Space, Input, Select, Tag, Modal, message } from "antd";
+import React, { useCallback } from "react";
+import {
+  Table,
+  Button,
+  Space,
+  Input,
+  Select,
+  Tag,
+  Modal,
+  Pagination,
+} from "antd";
 import { useGetAssetDraft } from "../hooks/assetData";
-const { Option } = Select;
-
+import { debounce } from "lodash";
+import './index.less'
 // 主组件
 const AssetManagementTable = () => {
   const {
@@ -10,22 +19,44 @@ const AssetManagementTable = () => {
     templates,
     currentTemplate,
     setCurrentTemplate,
+    columns,
     setParams,
+    pagination,
+    setPagination,
+    dataLoading,
+    draftData,
   } = useGetAssetDraft();
+  console.log("columns", columns);
 
   const changeTemplate = (value) => {
     setCurrentTemplate(value);
   };
 
-  const changeParams = (key, value) => {
+  // 防抖更新查询条件
+  const debouncedChangeParams = useCallback(
+    debounce((key, value) => {
       setParams((prev) => ({
         ...prev,
         [key]: value,
       }));
+    }, 500), // 500ms 防抖时间
+    []
+  );
+
+  const changeParams = (key, value) => {
+    debouncedChangeParams(key, value);
+  };
+
+  const handlePageChange = (page, size) => {
+    setPagination((prev) => ({
+      ...prev,
+      pageNum: page,
+      pageSize: size,
+    }));
   };
 
   return (
-    <div style={{ background: "#fff" }}>
+    <div style={{ background: "#fff"}} className="container">
       {/* 操作按钮区域 */}
       <div
         style={{
@@ -63,25 +94,44 @@ const AssetManagementTable = () => {
               changeParams("state", value);
             }}
           />
-          <Select placeholder="请选择搜索属性" style={{ width: 140 }}>
+          {/* <Select placeholder="请选择搜索属性" style={{ width: 140 }}>
             <Option value="id">资产编号</Option>
             <Option value="engName">资产英文名</Option>
             <Option value="chnName">资产中文名</Option>
             <Option value="assetItem">资产项</Option>
-          </Select>
+          </Select> */}
 
-          <Input placeholder="请输入关键字" style={{ width: 200 }} allowClear />
+          <Input
+            placeholder="请输入关键字"
+            style={{ width: 200 }}
+            allowClear
+            onChange={(e) => {
+              changeParams("keyword", e.target.value);
+            }}
+          />
         </Space>
       </div>
 
       {/* 表格区域 */}
       <Table
         // rowSelection={rowSelection}
-        // columns={}
-        // dataSource={filteredData}
-        // loading={loading}
+        columns={columns ?? []}
+        dataSource={draftData ?? []}
+        loading={dataLoading}
         pagination={null}
         size="middle"
+        scroll={{ x: true }}
+      />
+      <Pagination
+        style={{ margin: "12px auto",textAlign: "center"}}
+        showTotal={(total) => `共 ${total} 条记录`}
+        showSizeChanger
+        showQuickJumper
+        pageSize={pagination.pageSize}
+        current={pagination.pageNum}
+        onChange={handlePageChange}
+        onShowSizeChange={handlePageChange}
+        total={pagination.total}
       />
     </div>
   );

src/view/Manage/AssetDraft/component/index.less

+.container {
+  height: calc(100vh - 196px) !important;
+}

src/view/Manage/AssetDraft/hooks/assetData.jsx

-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useState } from "react";
+import { Tooltip, Typography, Button, Tag } from "antd";
 import {
   getTemplates,
   getDraftDataAsset,
+  listFilterElementsGroupByType,
 } from "../../../../service/dataassetmanager";
+import { AssetItem } from "../../AssetManage/Component/AssetTable";
+const { Text } = Typography;
 
 // ../standardmanage/hooks/sourceMap
 export function useGetAssetDraft() {
   const [loading, setLoading] = useState(false);
   const [templates, setTemplates] = useState();
   const [currentTemplate, setCurrentTemplate] = useState();
-
+  const [columns, setColumns] = useState([]);
   const [params, setParams] = useState({
     state: "",
   });
@@ -36,17 +40,243 @@ export function useGetAssetDraft() {
     getTemplatesList();
   }, []);
 
+  const getColumns = async () => {
+    try {
+      const data = await listFilterElementsGroupByType({
+        templateType: currentTemplate,
+        isAdmin: true,
+      });
+      let _columns = [];
+      let index = 0,
+        _metadataIndex = "";
+      (data || []).forEach((group) => {
+        (group.names || []).forEach((name, i) => {
+          index++;
+          const params = {
+            title: name,
+            dataIndex: `element${index}`,
+            ellipsis: true,
+            render: (text, record) => {
+              return (
+                <Tooltip title={text || ""}>
+                  <Text ellipsis={true}>{text || ""}</Text>
+                </Tooltip>
+              );
+            },
+          };
+
+          // if (name === "编号") {
+          //   params.width = 60;
+          //   // params.fixed = 'left';
+          // } else if (name === "中文名称") {
+          //   params.width = 160;
+          //   // params.fixed = 'left';
+          // } else if (name === "英文名称") {
+          //   // params.fixed = 'left';
+          //   // params.render = (text, record) => {
+          //   //   return (
+          //   //     <Tooltip title={text||''}>
+          //   //       <a onClick={()=>{detailAsset(record);}}>
+          //   //       {text||''}
+          //   //       </a>
+          //   //     </Tooltip>
+          //   //   );
+          //   // }
+          if (name === "资产项") {
+            // params.width = 120;
+            params.render = (metadata, _) => {
+              return <AssetItem metadata={metadata} />;
+            };
+            _metadataIndex = `element${index}`;
+          } else if (name === "资产目录路径") {
+            params.render = (text, record) => {
+              return (
+                <Tooltip title={text || ""}>
+                  <Text ellipsis={true}>
+                    <a
+                      onClick={() => {
+                        let event = new Event("storage");
+                        event.key = "assetDirChangeEvent";
+                        event.dirId = record.dirId || "";
+                        window?.dispatchEvent(event);
+                      }}
+                    >
+                      {text || ""}
+                    </a>
+                  </Text>
+                </Tooltip>
+              );
+            };
+          }
+
+          _columns.push(params);
+        });
+      });
+
+      // 添加草稿操作列
+      _columns.push({
+        title: "草稿操作",
+        dataIndex: "operationType",
+        key: "operationType",
+        render: (text, record) => {
+          let statusText = "";
+          let color = "";
+          switch (text) {
+            case "change":
+              statusText = "修改";
+              color = "orange";
+              break;
+            case "release":
+              statusText = "新增";
+              color = "green";
+              break;
+            case "offline":
+              statusText = "下线";
+              color = "grey";
+              break;
+            case "delete":
+              statusText = "删除";
+              color = "red";
+              break;
+            default:
+              statusText = text || "-";
+          }
+          return <Tag color={color}>{statusText}</Tag>;
+        },
+      });
+
+      // 添加草稿状态列
+      _columns.push({
+        title: "草稿状态",
+        dataIndex: "draftState",
+        key: "draftState",
+        render: (text, record) => {
+          let statusText = "";
+          let color = "";
+          switch (text) {
+            case "draft":
+              statusText = "草稿";
+              color = "orange";
+              break;
+            case "auditing":
+              statusText = "审核中";
+              color = "green";
+              break;
+            default:
+              statusText = text || "未设置";
+          }
+          return <Tag color={color}>{statusText}</Tag>;
+        },
+      });
+
+      // 添加操作列
+      _columns.push({
+        title: "操作",
+        key: "action",
+        width: 160,
+        render: (text, record) => {
+          const disabled = record?.draftState !== "draft";
+          const handlePublish = () => {
+            // 发布操作逻辑
+            console.log("发布记录:", record);
+          };
+          const handleStop = () => {
+            // 停用操作逻辑
+            console.log("停用记录:", record);
+          };
+          const handleEdit = () => {
+            // 编辑操作逻辑
+            console.log("编辑记录:", record);
+          };
+          const handleDelete = () => {
+            // 删除操作逻辑
+            console.log("删除记录:", record);
+          };
+
+          return (
+            <div>
+              <Button
+                disabled={disabled}
+                type="link"
+                size="small"
+                onClick={handlePublish}
+              >
+                送审
+              </Button>
+              <Button
+                size="small"
+                waring
+                disabled={disabled}
+                type="link"
+                onClick={handleEdit}
+              >
+                编辑
+              </Button>
+              <Button
+                disabled={disabled}
+                size="small"
+                type="link"
+                danger
+                onClick={handleDelete}
+              >
+                删除
+              </Button>
+            </div>
+          );
+        },
+      });
+      setColumns(_columns);
+    } catch (error) {
+      console.error("获取列配置失败:", error);
+    }
+  };
+
+  useEffect(() => {
+    if (currentTemplate) {
+      getColumns();
+    }
+  }, [currentTemplate]);
+
   const getDraftData = async () => {
     try {
       // 设置数据加载状态为true，表示开始加载
       setDataLoading(true);
-      const res = await getDraftDataAsset({
+      const data = await getDraftDataAsset({
         ...pagination,
         ...params,
         templateType: currentTemplate,
         total: undefined,
       });
-      console.log("data", res);
+
+      const _assets = [];
+
+      (data.data || []).forEach((asset) => {
+        let _asset = { ...asset },
+          index = 0;
+        (asset.elementValues || []).forEach((elementValue) => {
+          (elementValue.values || []).forEach((value, i) => {
+            index++;
+            let metadata = {};
+            try {
+              metadata = JSON.parse(value);
+              _asset["metadata"] = metadata;
+              _asset[`element${index}`] = metadata;
+            } catch (error) {
+              metadata = value;
+              _asset["metadata"] = metadata;
+              _asset[`element${index}`] = metadata;
+            }
+          });
+        });
+
+        _assets.push(_asset);
+      });
+
+      setDraftData(_assets);
+      setPagination((pre) => ({
+        ...pre,
+        total: data?.total,
+      }));
       setDataLoading(false);
     } catch (error) {
       setDataLoading(false);
@@ -64,6 +294,11 @@ export function useGetAssetDraft() {
     templates,
     currentTemplate,
     setCurrentTemplate,
+    columns,
     setParams,
+    pagination,
+    setPagination,
+    dataLoading,
+    draftData,
   };
 }

src/view/Manage/AssetDraft/index.jsx

@@ -3,7 +3,9 @@ import { Tabs } from "antd";
 import AssetDraft from "./component/AssetDraft";
 const { TabPane } = Tabs;
 
-const Index = () => {
+const Index = (props) => {
+  console.log('props',props);
+  
   const [tabKey, setTabKey] = useState("1");
 
   const onTabChange = (key) => {

src/view/Manage/AssetManage/Component/AssetDetailDrawer.jsx

@@ -5,7 +5,6 @@ import AssetAction from './AssetAction';
 
 const AssetDetailDrawer = (props) => {
   const { onCancel, visible, id, dirId, reference } = props;
-  
   const [ form ] = Form.useForm();
 
   return (

src/view/Manage/AssetManage/index.jsx

@@ -15,7 +15,6 @@ import { AssetManageReference } from '../../../util/constant';
 import './index.less';
 
 const AssetManage = (props) => {
-
   const [ nodeId, setNodeId ] = useState(null);
   const [ nodeType, setNodeType ] = useState('');
   const [ nodeLevel, setNodeLevel ] = useState(null);