feat: 6.8 daily commit

.gitignore

@@ -19,6 +19,7 @@ yarn-error.log
 .idea
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 *bak
 .vscode
 

package.json

@@ -69,7 +69,6 @@
     "classnames": "^2.2.6",
     "dayjs": "^1.10.7",
     "lodash": "^4.17.11",
-    "moment": "^2.29.1",
     "omit.js": "^2.0.2",
     "rc-menu": "^9.0.13",
     "rc-util": "^5.14.0",
@@ -80,7 +79,6 @@
     "umi": "^3.5.0"
   },
   "devDependencies": {
-    "@ant-design/pro-cli": "^2.0.2",
     "@types/express": "^4.17.0",
     "@types/history": "^4.7.2",
     "@types/jest": "^26.0.0",
@@ -89,7 +87,7 @@
     "@types/react-dom": "^17.0.0",
     "@types/react-helmet": "^6.1.0",
     "@umijs/fabric": "^2.10.2",
-    "@umijs/plugin-blocks": "^2.0.5",
+    "@umijs/plugin-antd-dayjs": "^0.3.0",
     "@umijs/plugin-esbuild": "^1.0.1",
     "@umijs/preset-ant-design-pro": "^1.2.0",
     "@umijs/preset-react": "^1.8.17",

pnpm-lock.yaml

@@ -26,6 +26,7 @@ specifiers:
   '@types/react-dom': ^17.0.0
   '@types/react-helmet': ^6.1.0
   '@umijs/fabric': ^2.10.2
+  '@umijs/plugin-antd-dayjs': ^0.3.0
   '@umijs/plugin-blocks': ^2.0.5
   '@umijs/plugin-esbuild': ^1.0.1
   '@umijs/preset-ant-design-pro': ^1.2.0
@@ -112,7 +113,8 @@ devDependencies:
   '@types/react-dom': 17.0.14
   '@types/react-helmet': 6.1.5
   '@umijs/fabric': 2.10.2
-  '@umijs/plugin-blocks': 2.2.2_505e49b6ea53e755a9c64b9c31ef1e2a
+  '@umijs/plugin-antd-dayjs': 0.3.0_dayjs@1.11.0+umi@3.5.21
+  '@umijs/plugin-blocks': 2.2.2_kbpetnxkkptvlkogjoodd3y6fi
   '@umijs/plugin-esbuild': 1.4.1_umi@3.5.21
   '@umijs/preset-ant-design-pro': 1.3.3_505e49b6ea53e755a9c64b9c31ef1e2a
   '@umijs/preset-react': 1.8.30_5dfce986babc4fa87b83e0498b5f7444
@@ -4373,7 +4375,21 @@ packages:
       umi: 3.5.21
     dev: true
 
+<<<<<<< HEAD
   /@umijs/plugin-antd/0.13.0_505e49b6ea53e755a9c64b9c31ef1e2a:
+=======
+  /@umijs/plugin-antd-dayjs/0.3.0_dayjs@1.11.0+umi@3.5.21:
+    resolution: {integrity: sha512-Q/llceGqnaXddQWQtcKMeg6V1dKrhRYLaHrHDIwcMWVsuGms885aIOjTdGts8QOz7LFYmV+g3Yt/ieJyhEp8pw==}
+    peerDependencies:
+      dayjs: '*'
+      umi: 3.x
+    dependencies:
+      dayjs: 1.11.0
+      umi: 3.5.21
+    dev: true
+
+  /@umijs/plugin-antd/0.13.0_kbpetnxkkptvlkogjoodd3y6fi:
+>>>>>>> 74a2bbb... feat: 6.8 daily commit
     resolution: {integrity: sha512-7tooYtOylVatrzMWCJtk8JFQL90i94OD0FgZYpKBbM7keThH8prYkSkDJFIDkuGfZ6pl6BJT8ESnYLxf2OiQUw==}
     peerDependencies:
       umi: 3.x

src/pages/Schema/Base/components/Designable/index.tsx

@@ -102,6 +102,7 @@ const Designable: FC<DesignableProps> = ({ base, title }) => {
                 Cascader,
                 Checkbox,
                 Radio,
+                Switch,
                 DatePicker,
                 TimePicker
               ]}

src/pages/Schema/Option/index.tsx

@@ -1,4 +1,4 @@
-import { Table } from 'antd'
+import { Button, Table } from 'antd'
 import LeftMenu from './Components/LeftMenu'
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc'
 import { arrayMoveImmutable } from 'array-move'
@@ -7,49 +7,90 @@ import type { SortableContainerProps, SortEnd } from 'react-sortable-hoc'
 
 import { useState } from 'react'
 import { useRequest } from 'umi'
-import { addDataSource, queryDataSource } from '@/services/api/schema'
+import {
+  addDataSource,
+  addDataSourceItem,
+  queryDataSource,
+  updateDataSourceItem
+} from '@/services/api/schema'
 import { MenuOutlined } from '@ant-design/icons'
+import classNames from 'classnames'
+import { ModalForm, ProFormRadio, ProFormText } from '@ant-design/pro-form'
+import ProTable from '@ant-design/pro-table'
+import { ModalType } from '@/utils/enum'
 
 const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />)
 
-const columns: ColumnsType<DataType> = [
-  {
-    title: 'Sort',
-    dataIndex: 'sort',
-    width: 30,
-    className: 'drag-visible',
-    render: () => <DragHandle />
-  },
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    className: 'drag-visible'
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age'
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address'
-  }
-]
-
 const SortableItem = SortableElement((props: React.HTMLAttributes<HTMLTableRowElement>) => (
   <tr {...props} />
 ))
 const SortableBody = SortableContainer((props: React.HTMLAttributes<HTMLTableSectionElement>) => (
   <tbody {...props} />
 ))
+
+type iState = {
+  menuData: API.DataSourceMenuItem[]
+  activeID: Nullable<string>
+  modalType: ModalType
+  visible: boolean
+}
 const Option = () => {
-  const [menuData, setMenuData] = useState<API.DataSourceMenuItem[]>([])
-  const [activeID, setActiveID] = useState<Nullable<string>>(null)
+  const [state, setState] = useState<iState>({
+    menuData: [],
+    activeID: null,
+    visible: false,
+    modalType: ModalType.ADD
+  })
+
   const { run: tryFetchList } = useRequest(queryDataSource, {
     onSuccess: (result: API.DataSourceMenuItem) => {
-      setMenuData(result)
+      setState({ ...state, menuData: result })
     }
   })
 
+  const { run: tryAddItem } = useRequest(addDataSourceItem, {
+    manual: true,
+    onSuccess: () => tryFetchList()
+  })
+  const { run: tryUpdateItem } = useRequest(updateDataSourceItem, {
+    manual: true,
+    onSuccess: () => tryFetchList()
+  })
+
+  const columns: ColumnsType<API.DataSourceItem> = [
+    {
+      title: '排序',
+      dataIndex: 'sort',
+      width: 30,
+      render: () => <DragHandle />
+    },
+    {
+      title: '选项名称',
+      dataIndex: 'name'
+    },
+    {
+      title: '状态',
+      dataIndex: 'enable',
+      render: text => (
+        <div>
+          <span
+            className={classNames('w-4 h-4 rounded-1/2', text ? 'bg-green-500' : 'bg-red-500')}
+          />
+          <span className="ml-1">{text ? '已启用' : '已停用'}</span>
+        </div>
+      )
+    },
+    {
+      title: '操作',
+      dataIndex: 'opreate',
+      render: (_, record) => (
+        <Button type="text" onClick={() => setState({ ...state, modalType: ModalType.UPDATE })}>
+          编辑
+        </Button>
+      )
+    }
+  ]
+
   const onSortEnd = ({ oldIndex, newIndex }: SortEnd) => {
     if (oldIndex !== newIndex) {
       const newData = arrayMoveImmutable(dataSource.slice(), oldIndex, newIndex).filter(
@@ -63,7 +104,7 @@ const Option = () => {
         }
         return item
       })
-      setMenuData(newMenuData)
+      setState({ ...state, menuData: newMenuData })
     }
   }
 
@@ -87,15 +128,40 @@ const Option = () => {
   return (
     <div className="flex flex-nowrap h-full">
       <LeftMenu
-        onSelect={(key: string) => setActiveID(key)}
-        options={menuData}
+        onSelect={(key: string) => setState({ ...state, activeID: key })}
+        options={state.menuData}
         initFn={() => tryFetchList()}
       />
       <div className="ml-6 shadow-hex-3e2c5a" style={{ width: 'calc(100% - 12rem)' }}>
-        <Table<API.DataSourceItem>
+        <ProTable<API.DataSourceItem>
           columns={columns}
-          dataSource={menuData.find(item => item.ID === activeID)?.items || []}
+          search={false}
+          dataSource={state.menuData.find(item => item.ID === state.activeID)?.items || []}
           rowKey="ID"
+          toolbar={{
+            actions: [
+              <ModalForm
+                key="form"
+                visible={state.visible}
+                onVisibleChange={visible => setState({ ...state, visible })}
+                onFinish={async values => {}}>
+                <ProFormText
+                  name="label"
+                  label="选项名称"
+                  rules={[{ required: true, message: '请输入选项名称' }]}
+                />
+                <ProFormRadio.Group
+                  name="enable"
+                  label="状态"
+                  options={[
+                    { label: '启用', value: true },
+                    { label: '停用', value: false }
+                  ]}
+                  rules={[{ required: true, message: '请选择启用/停用' }]}
+                />
+              </ModalForm>
+            ]
+          }}
           components={{
             body: {
               wrapper: DraggableContainer,

src/services/api/schema.ts

@@ -24,3 +24,13 @@ export async function addDataSource(params: { name: string }) {
 export async function queryDataSource() {
   return request('/form/v1/ds/list')
 }
+
+/**  新增数据源-选项 */
+export async function addDataSourceItem(params: { name: string; enable: boolean }) {
+  return request('', { method: 'POST', data: params })
+}
+
+/** 编辑数据源-选项 */
+export async function updateDataSourceItem(params: API.DataSourceItem) {
+  return request('', { methods: 'POST', data: params })
+}