Browse Source

feat: 预算业务表单列表

outaozhen 3 years ago
parent
commit
6ab087bdf0

+ 21 - 0
config/routes.ts

@@ -99,6 +99,22 @@
     ]
   },
   {
+    path: 'business',
+    name: 'business',
+    icon: 'Audit',
+    routes: [
+      {
+        path: '/business',
+        redirect: '/business/inventory'
+      },
+      {
+        path: 'inventory',
+        name: 'inventory',
+        component: './Business/Inventory'
+      }
+    ]
+  },
+  {
     path: '/work-setting',
     name: 'work-setting',
     icon: 'ControlOutlined',
@@ -119,6 +135,11 @@
         path: 'option',
         name: 'option',
         component: './Schema/Option'
+      },
+      {
+        path: 'budget',
+        name: 'budget',
+        component: './Schema/Budget'
       }
     ]
   },

+ 3 - 0
src/locales/zh-CN/menu.ts

@@ -24,11 +24,14 @@ export default {
   'menu.institutions': '企事业单位',
   'menu.institutions.company': '单位管理',
   'menu.institutions.staff': '人员管理',
+  'menu.business': '业务审批设置',
+  'menu.business.inventory': '资料签收清单模板',
   'menu.institutions.company.list': '单位列表',
   'menu.institutions.company.detail': '单位详情',
   'menu.work-setting': '表单设置',
   'menu.work-setting.schema': '基础数据设置',
   'menu.work-setting.option': '数据源设置',
+  'menu.work-setting.budget': '预算业务表单',
   'menu.work-setting.test': '测试',
   'menu.work-setting.schema-detail': '编辑数据模型',
   'menu.system': '系统管理',

+ 8 - 0
src/pages/Business/Inventory/index.tsx

@@ -0,0 +1,8 @@
+import { PageContainer } from '@ant-design/pro-layout'
+import React from 'react'
+
+const Inventory = () => {
+  return <PageContainer title={false}>资料清单接收模板</PageContainer>
+}
+
+export default Inventory

+ 51 - 0
src/pages/Schema/Budget/Components/LeftMenu.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import type { DirectoryTreeProps } from 'antd/lib/tree'
+import { Tree } from 'antd'
+
+const { DirectoryTree } = Tree
+type LeftMenuProps = {
+  onSelect: (key: string) => void
+  options: API.DataSourceMenuItem[]
+  initFn: () => Promise<void>
+}
+
+const LeftMenu: React.FC<LeftMenuProps> = ({ onSelect, options }) => {
+  const handleOnSelect: DirectoryTreeProps['onSelect'] = keys => {
+    // console.log('Trigger Select', node)
+    onSelect?.(keys[0])
+  }
+  const renderTreeNode = tree => {
+    return tree.map((item: API.TemplateListItem & { title: string; key: string }) => {
+      const newItem = {
+        ...item,
+        title: (
+          <div className="department-node py-1">
+            <div className="title">{item.name}</div>
+          </div>
+        )
+      }
+      return newItem
+    })
+  }
+  return (
+    <div
+      className="w-54 rounded-20px flex flex-col bg-white "
+      style={{ height: 'calc(100vh - 122px)', background: '#ffffff' }}>
+      <div className="p-4 border-b-1 rounded-tl-20px rounded-tr-20px border-solid border-black border-opacity-10 bg-hex-f7f9fa">
+        <div className="text-base">表单列表</div>
+      </div>
+      <div className="flex-1">
+        <DirectoryTree
+          treeData={renderTreeNode(
+            options.map(item => ({ title: item.name, key: item.action, ...item }))
+          )}
+          onSelect={handleOnSelect}
+          showIcon={false}
+          defaultExpandAll
+        />
+      </div>
+    </div>
+  )
+}
+
+export default LeftMenu

+ 44 - 0
src/pages/Schema/Budget/index.tsx

@@ -0,0 +1,44 @@
+import { queryTemplateList } from '@/services/api/schema'
+import { PageContainer } from '@ant-design/pro-layout'
+import React, { useState } from 'react'
+import { useRequest } from 'umi'
+import LeftMenu from './Components/LeftMenu'
+
+type iState = {
+  menuData: API.TemplateListItem[]
+  activeID: Nullable<string>
+}
+const Budget = () => {
+  const [state, setState] = useState<iState>({
+    menuData: [],
+    activeID: null,
+    modalVisible: false
+  })
+  const { run: tryFetchTemplateList } = useRequest(queryTemplateList, {
+    onSuccess: (result: API.TemplateListItem) => {
+      setState({
+        ...state,
+        menuData: result
+      })
+    }
+  })
+  const onSelect = (key: string) => {
+    setState({ ...state, activeID: key })
+  }
+  return (
+    <PageContainer title={false}>
+      <div className="h-full w-full flex flex-row">
+        <LeftMenu
+          onSelect={onSelect}
+          options={state.menuData}
+          initFn={() => tryFetchTemplateList()}
+        />
+        <div className="w-6/7 ml-8 bg-white p-4  rounded-20px shadow-hex-3e2c5a relative">
+          表单详情
+        </div>
+      </div>
+    </PageContainer>
+  )
+}
+
+export default Budget

+ 5 - 0
src/services/api/schema.ts

@@ -25,6 +25,11 @@ export async function queryDataSource() {
   return request('/form/v1/ds/list')
 }
 
+/** 获得表单模板列表 */
+export async function queryTemplateList() {
+  return request('/form/v1/template/list')
+}
+
 /**  新增数据源-选项 */
 export async function addDataSourceItem(params: { name: string; enable: boolean }) {
   return request('/form/v1/ds/item/create', { method: 'POST', data: params })

+ 5 - 0
src/services/api/typings.d.ts

@@ -355,4 +355,9 @@ declare namespace API {
     enable?: string
     index?: number
   }
+
+  type TemplateListItem = {
+    action?: string
+    name?: string
+  }
 }