资产草稿

src/view/Manage/AssetDraft/index.jsx

 import React from "react"
-import { Space, Select, Button, Tooltip, Input, } from 'antd'
+import { Space, Select, Button, Tooltip, Input, Typography } from 'antd'
 import LocalStorage from 'local-storage'
+import { useDebounceEffect } from 'ahooks'
 
 import { appId } from "../../../App"
 import { dispatch } from '../../../model'
+import Table from '../ResizeableTable'
+import { isSzseEnv } from "../../../util"
+import { AssetItem } from "../AssetManage/Component/AssetTable"
+
+const isAdmin = false
 
 const FC = (props) => {
   const [loadingTemplates, setLoadingTemplates] = React.useState(false)
   const [templates, setTemplates] = React.useState()
   const [currentTemplateValue, setTemplateValue] = React.useState()
   const [pagination, setPagination] = React.useState({ pageNum: 1, pageSize: 20 })
+  const [currentElementValue, setElementValue] = React.useState()
   const [keyword, setKeyword] = React.useState()
   const [selectedRows, setSelectedRows] = React.useState()
+  const [loadingElements, setLoadingElements] = React.useState()
+  const [elements, setElements] = React.useState()
+  const [loadingFilterElements, setLoadingFilterElements] = React.useState(false)
+  const [filterElements, setFilterElements] = React.useState()
+  const [loading, setLoading] = React.useState(false)
+  const [data, setData] = React.useState()
 
   React.useEffect(() => {
     getTemplates()
   }, [])
 
+  React.useEffect(() => {
+    if (currentTemplateValue) {
+      getElements()
+      getFilterElements()
+    }
+  }, [currentTemplateValue])
+
+  useDebounceEffect(() => {
+    if (currentTemplateValue) {
+      getDrafts()
+    }
+  }, [currentTemplateValue, keyword, currentElementValue, pagination], { wait: 300 })
+
+  const [columns, tableData, total] = React.useMemo(() => {
+    const [newColumns, newTableData] = [[], []]
+
+    for (const element of filterElements??[]) {
+      for (const name of element.names??[]) {
+        const column = {
+          title: name,
+          dataIndex: name,
+          ellipsis: true,
+          width: 120,
+          render: (text, record) => {
+            return (
+              <Tooltip title={text}>
+                <Typography.Text ellipsis={true}>
+                {text}
+                </Typography.Text>
+              </Tooltip>
+            );
+          }
+        }
+
+        if (name === '编号') {
+          column.width = 60
+        } else if (name === '中文名称') {
+          column.width = isSzseEnv ? 230 : 160
+        } else if (name === '英文名称') {
+          column.width = isSzseEnv ? 224 : 160
+        } else if (name === '资产项') {
+          column.width = isSzseEnv ? 250 : 120
+          column.render = (text) => {
+            console.log('text', text)
+            let metadata = null
+            try {
+              metadata = JSON.parse(text)
+            } catch(error) {
+              metadata = text;
+            }
+            return (
+              <AssetItem metadata={metadata} />
+            );
+          }
+        }
+
+        newColumns.push(column)
+      }
+    }
+
+    if (!loadingFilterElements) {
+      for (const item of (data?.data??[])) {
+        let index = 0
+        let newItem = {}
+        for (const elementValue of (item.elementValues??[])) {
+          for (const value of elementValue.values) {
+            if ((newColumns??[]).length > index) {
+              newItem[newColumns[index].dataIndex] = value
+            }
+  
+            index++
+          }
+        }
+  
+        newTableData.push({...item, ...newItem})
+      }
+    }
+
+    return [newColumns, newTableData, data?.total??0]
+  }, [filterElements, data, loadingFilterElements])
+
   const getTemplates = () => {
     setLoadingTemplates(true)
     dispatch({
@@ -35,7 +129,61 @@ const FC = (props) => {
     })
   }
 
+  const getElements = () => {
+    setLoadingElements(true)
+    dispatch({
+      type: 'assetmanage.listElements',
+      callback: data => {
+        setLoadingElements(false)
+        setElements(data)
+      },
+      error: () => {
+        setLoadingElements(false)
+      }
+    })
+  }
+
+  const getFilterElements = () => {
+    setLoadingFilterElements(true)
+    dispatch({
+      type: 'assetmanage.listFilterElementsGroupByType',
+      payload: {
+        isAdmin,
+      },
+      callback: data => {
+        setLoadingFilterElements(false)
+        setFilterElements(data)
+      },
+      error: () => {
+        setLoadingFilterElements(false)
+      }
+    })
+  }
+
+  const getDrafts = () => {
+    setLoading(true)
+    dispatch({
+      type: 'assetmanage.getDrafts',
+      payload: {
+        isAdmin,
+        queryElementId: currentElementValue,
+        templateType: currentTemplateValue,
+        keyword: encodeURIComponent(keyword??''),
+        pageNum: pagination.pageNum,
+        pageSize: pagination.pageSize,
+      },
+      callback: data => {
+        setLoading(false)
+        setData(data)
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
+  }
+
   const onTemplateChange = (value) => {
+    setData()
     LocalStorage.set(`templateType-${appId}`, value)
     setTemplateValue(value)
     setPagination({ ...pagination, pageNum: 1 })
@@ -82,6 +230,21 @@ const FC = (props) => {
           </Tooltip>
         </Space>
         <Space>
+          <Select allowClear
+            loading={loadingElements}
+            value={currentElementValue}
+            placeholder='请选择搜索属性'
+            onChange={(val) => {
+              setElementValue(val)
+            }}
+            style={{ width: 160 }}
+          >
+          {
+            (elements??[]).map((item, index) => (
+              <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
+            ))
+          }
+          </Select>
           <Input size="middle"
             placeholder="请输入关键字"
             value={keyword}
@@ -91,6 +254,22 @@ const FC = (props) => {
             }} />
         </Space>
       </div>
+      <div className='p-3'>
+        <Table
+          loading={loadingFilterElements||loading}
+          columns={columns}
+          dataSource={tableData}
+          rowKey='id'
+          pagination={false}
+          rowSelection={{
+            selectedRowKeys: (selectedRows??[]).map(item => item.id),
+            onChange: (selectedRowKeys, selectedRows) => {
+              setSelectedRows(selectedRows)
+            }      
+          }}
+          scroll={{ y: 'calc(100vh - 209px - 72px)' }}
+        />
+      </div>
     </div>
   )
 }

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

@@ -30,7 +30,7 @@ const { Search } = Input;
 const { Column } = Table;
 
 //资产项
-const AssetItem = (props) => {
+export const AssetItem = (props) => {
   const { metadata } = props;
 
   let content = '';