feat: 事项设置添加组件相关

src/pages/Business/Matter/components/AddAssemblyModal.tsx

@@ -1,10 +1,95 @@
-import React from 'react'
+import { CodepenSquareFilled, ProfileFilled, SlackSquareFilled } from '@ant-design/icons'
+import { Button, Card, Checkbox, Col, Row } from 'antd'
+import React, { useEffect, useState } from 'react'
+import { AssemblyEnum } from './AssemblyDetail'
+
+type AddAssemblyProps = {
+  record: API.MatterTreeItem
+}
+
+const AddAssemblyModal: React.FC<AddAssemblyProps> = ({ record, onChange }) => {
+  const assembly = record?.assembly
+  const [assemblyList, setAssemblyList] = useState([])
+  console.log(assemblyList)
+
+  const handleAssemblyOnchange = (checked: boolean, checkName: string) => {
+    if (checked) {
+      setAssemblyList([...assemblyList, checkName])
+    } else {
+      setAssemblyList(assemblyList.filter(item => item !== checkName))
+    }
+    if (onChange) {
+      onChange(checkName)
+    }
+  }
+
+  useEffect(() => {
+    if (assembly?.length) {
+      setAssemblyList(...assemblyList, assembly)
+    }
+  }, [assembly?.length])
 
-const AddAssemblyModal = () => {
   return (
-    <div>
-      <span>组件列表</span>
-    </div>
+    <Row gutter={16}>
+      <Col span={8}>
+        <Card
+          title={
+            <span>
+              <ProfileFilled className="mr-1" style={{ fontSize: '20px', color: '#40A9FF' }} />
+              表单
+            </span>
+          }
+          extra={
+            <Checkbox
+              onChange={e => handleAssemblyOnchange(e.target.checked, AssemblyEnum.FORM)}
+              checked={assemblyList.includes(AssemblyEnum.FORM)}
+            />
+          }>
+          <div className="min-h-70px">
+            表单时用来提交资料、意见、规范流程、执行过程的格式，提供丰富的业务字段，快速定制业务表单。
+          </div>
+          <Button>点击预览组件</Button>
+        </Card>
+      </Col>
+      <Col span={8}>
+        <Card
+          title={
+            <span>
+              <SlackSquareFilled className="mr-1" style={{ fontSize: '20px', color: '#52C41A' }} />
+              送审资料清单
+            </span>
+          }
+          extra={
+            <Checkbox
+              onChange={e => handleAssemblyOnchange(e.target.checked, AssemblyEnum.DATAPROFILE)}
+              checked={assemblyList.includes(AssemblyEnum.DATAPROFILE)}
+            />
+          }>
+          <div className="min-h-70px">自定义审核资料模板，承载业务审批过程中资料及附件业务。</div>
+          <Button>点击预览组件</Button>
+        </Card>
+      </Col>
+      <Col span={8}>
+        <Card
+          title={
+            <span>
+              <CodepenSquareFilled className="mr-1" style={{ fontSize: '20px', color: '#722ED1' }} />
+              造价文件
+            </span>
+          }
+          extra={
+            <Checkbox
+              onChange={e => handleAssemblyOnchange(e.target.checked, AssemblyEnum.COSTPROFILE)}
+              checked={assemblyList.includes(AssemblyEnum.COSTPROFILE)}
+            />
+          }>
+          <div className="min-h-70px">
+            提供全过程造价文件的体系架构关键数据汇总，实现全过程造价文件的标准化管理。
+          </div>
+          <Button>点击预览组件</Button>
+        </Card>
+      </Col>
+    </Row>
   )
 }
 

src/pages/Business/Matter/components/AssemblyDetail.tsx

@@ -1,11 +1,69 @@
+import ProTable from '@ant-design/pro-table'
 import React from 'react'
+import { createUid } from '@/utils/util'
+import { Tag } from 'antd'
+import { ColumnsType } from 'antd/lib/table'
+import { isNullOrUnDef } from '@/utils/is'
 
-const AssemblyDetail = () => {
-  return (
-    <div className="mt-6">
-      <div className="max-w-800px">组件详情</div>
-    </div>
-  )
+export enum AssemblyEnum {
+  FORM = 'form', // 表单
+  COSTPROFILE = 'costProfile', // 造价文件
+  DATAPROFILE = 'dataProfile' // 资料清单
+}
+
+export const assemblyName = {
+  [AssemblyEnum.FORM]: '表单',
+  [AssemblyEnum.COSTPROFILE]: '送审资料',
+  [AssemblyEnum.DATAPROFILE]: '造价文件'
+}
+
+export const assemblyType = {
+  [AssemblyEnum.FORM]: '通用型',
+  [AssemblyEnum.COSTPROFILE]: '唯一型',
+  [AssemblyEnum.DATAPROFILE]: '唯一型'
+}
+
+export const assemblyTitle = {
+  [AssemblyEnum.FORM]: '项目信息',
+  [AssemblyEnum.COSTPROFILE]: '送审资料',
+  [AssemblyEnum.DATAPROFILE]: '造价文件'
+}
+
+const AssemblyDetail: React.FC<API.MatterTreeItem> = ({ record }) => {
+  if (isNullOrUnDef(record?.assembly)) return []
+  const List = record?.assembly.map(item => ({
+    ID: createUid(),
+    name: item,
+    type: item,
+    title: item
+  }))
+
+  const columns: ColumnsType<API.AssemblyItem> = [
+    {
+      title: '组件名称',
+      dataIndex: 'name',
+      align: 'center',
+      renderText: name => <span>{assemblyName[name]}</span>
+    },
+    {
+      title: '组件类型',
+      dataIndex: 'type',
+      align: 'center',
+      renderText: type => <Tag color="blue">{assemblyType[type]}</Tag>
+    },
+    {
+      title: '组件标题',
+      dataIndex: 'title',
+      align: 'center',
+      renderText: title => <span>{assemblyTitle[title]}</span>
+    },
+    {
+      title: '操作',
+      dataIndex: 'operate',
+      align: 'center'
+    }
+  ]
+  return <ProTable search={false} rowKey="ID" columns={columns} dataSource={List} pagination={false} />
 }
 
 export default AssemblyDetail

src/pages/Business/Matter/hooks/useRowScript.tsx

@@ -164,6 +164,7 @@ export function useRowScript(modal: ModalAction) {
   return {
     query,
     loading,
+    refresh,
     treeList: state.treeList,
     expandTreeIds: state.expandTreeIds,
     add,

src/pages/Business/Matter/index.tsx

@@ -1,14 +1,16 @@
 import useModal from '@/components/Modal'
 import { PageContainer } from '@ant-design/pro-layout'
 import ProTable from '@ant-design/pro-table'
-import { Button } from 'antd'
+import { Button, message, Tag } from 'antd'
 import { ColumnsType } from 'antd/lib/table'
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 import useDrawer from '@/components/Drawer'
 import LeftMenu from '../RuleCode/components/LeftMenu'
-import AssemblyDetail from './components/AssemblyDetail'
+import AssemblyDetail, { assemblyName } from './components/AssemblyDetail'
 import { MatterType, useRowScript } from './hooks/useRowScript'
 import AddAssemblyModal from './components/AddAssemblyModal'
+import consts from '@/utils/consts'
+import { updateAssembly } from '@/services/api/business'
 
 interface IState {
   subjectParams: {
@@ -16,10 +18,10 @@ interface IState {
     businessType?: Nullable<string>
   }
   expandTreeIds: []
+  assembly: []
 }
 
 const Matter: React.FC = () => {
-  const tRef = useRef<ActionType>(null)
   const [drawer, DrawerDom] = useDrawer()
   const [state, setState] = useState<IState>({
     subjectParams: {
@@ -28,11 +30,28 @@ const Matter: React.FC = () => {
     },
     expandTreeIds: []
   })
+
+  const [assemblyArr, setAssemblyArr] = useState([])
+  console.log(assemblyArr)
+
   const contentHeight = document.body.clientHeight - 122
   const [modal, ModalDOM] = useModal()
-  const { query, loading, add, edit, deleteMatter, treeList = [], expandTreeIds = [] } = useRowScript(modal)
+  const {
+    query,
+    loading,
+    refresh,
+    add,
+    edit,
+    deleteMatter,
+    treeList = [],
+    expandTreeIds = []
+  } = useRowScript(modal)
+
+  const handleChange = (checkName: string) => {
+    setAssemblyArr([...assemblyArr, checkName])
+  }
 
-  const openDrawer = () => {
+  const openDrawer = record => {
     drawer.open({
       title: '组件配置',
       closeIcon: null,
@@ -43,13 +62,22 @@ const Matter: React.FC = () => {
               title: '添加组件',
               okText: '确认',
               cancelText: '取消',
-              children: <AddAssemblyModal />
+              width: 1000,
+              children: <AddAssemblyModal record={record} onChange={checkName => handleChange(checkName)} />,
+              onOk: async () => {
+                const { code = -1 } = await updateAssembly({ ID: record.ID, assembly: assemblyArr })
+                if (code === consts.RET_CODE.SUCCESS) {
+                  message.success('添加成功')
+                  modal.close()
+                  refresh()
+                }
+              }
             })
           }}>
           添加组件
         </Button>
       ),
-      children: <AssemblyDetail reload={() => tRef.current?.reload()} />
+      children: <AssemblyDetail record={record} />
     })
   }
 
@@ -74,7 +102,10 @@ const Matter: React.FC = () => {
     },
     {
       title: '包含组件',
-      dataIndex: ''
+      dataIndex: 'assemblyName',
+      align: 'center',
+      render: (assembly, record) =>
+        record?.assembly?.map(item => <Tag key={record.ID}>{assemblyName[item]}</Tag>)
     },
     {
       title: '操作',
@@ -88,7 +119,9 @@ const Matter: React.FC = () => {
             编辑
           </span>
           {record.matterType === MatterType.MATTER ? (
-            <span className="px-2 text-primary cursor-pointer hover:text-hex-967bbd" onClick={openDrawer}>
+            <span
+              className="px-2 text-primary cursor-pointer hover:text-hex-967bbd"
+              onClick={() => openDrawer(record)}>
               组件配置
             </span>
           ) : null}
@@ -116,7 +149,6 @@ const Matter: React.FC = () => {
           <ProTable
             search={false}
             rowKey="ID"
-            actionRef={tRef}
             headerTitle={
               <div className="flex flex-nowrap justify-start items-center">
                 <div className="children:mx-1 px-1 py-2 ">

src/pages/Business/RuleCode/components/LeftMenu/index.tsx

@@ -28,7 +28,7 @@ const LeftMenu: React.FC<LeftMenuProps> = ({ title = '业务主体列表', onCha
   const handleOnSelect = ({ key }) => {
     const [value] = key.split('_')
     const option = {
-      value: value,
+      value,
       label: subjectList?.find(item => item.ID === value)?.name
     }
     if (onChange) {

src/pages/System/Log/index.tsx

@@ -33,7 +33,13 @@ const LoginLog = () => {
       dataIndex: 'browser',
       title: '登录设备',
       align: 'center',
-      onHeaderCell: () => ({ style: { textAlign: 'center' } })
+      onHeaderCell: () => ({ style: { textAlign: 'center' } }),
+      renderText: (browser, record) => (
+        <>
+          <span className="mr-1">{browser}</span>
+          <span>{record.os}</span>
+        </>
+      )
     },
     {
       dataIndex: 'createTime',

src/services/api/business.ts

@@ -154,3 +154,11 @@ export async function delMatter(params: { ID: string }) {
     data: params
   })
 }
+
+/** 保存事项组件 */
+export async function updateAssembly(params: { ID: string }) {
+  return request('/Matter/updateAssembly', {
+    method: 'POST',
+    data: params
+  })
+}

src/services/api/typings.d.ts

@@ -501,4 +501,10 @@ declare namespace API {
   type UpdateMatterParams = Pick<MatterTreeItem, 'ID' | 'parentID' | 'name'>
 
   type DelMatterParams = Pick<MatterTreeItem, 'ID'>
+
+  type AssemblyItem = {
+    name?: string
+    type?: string
+    title?: string
+  }
 }