Преглед на файлове

chore: [release] 6.27.2

lanjianrong преди 3 години
родител
ревизия
fda4921784
променени са 3 файла, в които са добавени 214 реда и са изтрити 0 реда
  1. 3 0
      README.md
  2. 55 0
      src/pages/Schema/Budget/components/LeftMenu.tsx
  3. 156 0
      src/pages/Schema/Option/components/LeftMenu.tsx

+ 3 - 0
README.md

@@ -0,0 +1,3 @@
+## 注意事项
+
+1. `git config core.ignorecase false` 让 git 区别大小写。

+ 55 - 0
src/pages/Schema/Budget/components/LeftMenu.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import type { DirectoryTreeProps } from 'antd/lib/tree'
+import { Tree } from 'antd'
+import '@/pages/Permission/Role/components/RoleLeftMenu/index.less'
+
+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="min-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
+        id="role-list"
+        className="p-4 bg-white rounded-b-20px"
+        style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
+        <DirectoryTree
+          treeData={renderTreeNode(
+            options.map(item => ({ title: item.name, key: item.action, ...item }))
+          )}
+          onSelect={handleOnSelect}
+          showIcon={false}
+          defaultExpandAll
+        />
+      </div>
+    </div>
+  )
+}
+
+export default LeftMenu

+ 156 - 0
src/pages/Schema/Option/components/LeftMenu.tsx

@@ -0,0 +1,156 @@
+import { DeleteOutlined, FormOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons'
+import { ModalForm, ProFormText } from '@ant-design/pro-form'
+import { useRequest } from '@umijs/max'
+import type { ProFormInstance } from '@ant-design/pro-form'
+import { Button, Input, message, Popconfirm, Tree } from 'antd'
+import type { DirectoryTreeProps } from 'antd/lib/tree'
+import '@/pages/Permission/Role/components/RoleLeftMenu/index.less'
+import { addDataSource, delDataSourceID, updateDataSourceItem } from '@/services/api/schema'
+import { useRef, useState } from 'react'
+
+const { DirectoryTree } = Tree
+
+type LeftMenuProps = {
+  onSelect: (key: string) => void
+  options: API.DataSourceMenuItem[]
+  initFn: () => Promise<void>
+}
+
+const LeftMenu: React.FC<LeftMenuProps> = ({ onSelect, options, showDelIcon, initFn }) => {
+  const [activeID, setActiveID] = useState<Nullable<string>>(null)
+  const formRef = useRef<ProFormInstance>(null)
+  const handleOnSelect: DirectoryTreeProps['onSelect'] = (keys, node) => {
+    // console.log('Trigger Select', node)
+    onSelect?.(keys[0], node)
+  }
+  const { run: tryUpdateDataSourceItem } = useRequest(
+    (params: Partial<API.UpdateRoleParams>) => updateDataSourceItem(params),
+    {
+      manual: true,
+      onSuccess: () => {
+        message.success('修改成功')
+        initFn()
+      }
+    }
+  )
+  const { run: tryAddDataSource } = useRequest((params: API.CreateRoleParams) => addDataSource(params), {
+    manual: true,
+    onSuccess: () => {
+      initFn()
+    }
+  })
+  const { run: tryDelRole } = useRequest((ID: string) => delDataSourceID({ ID }), {
+    manual: true,
+    onSuccess: () => {
+      message.success('删除成功')
+      initFn()
+    }
+  })
+
+  const handleOnFocus = async (
+    e: React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLElement>,
+    oldTitle: string,
+    ID: string
+  ) => {
+    const val = e.currentTarget.value || e.currentTarget.nodeValue
+    if (val !== oldTitle) {
+      await tryUpdateDataSourceItem({ ID, name: val })
+    }
+    setActiveID(null)
+  }
+
+  const renderTreeNode = tree => {
+    return tree.map((item: API.DataSourceMenuItem & { title: string; key: string }) => {
+      const newItem = {
+        ...item,
+        title: (
+          <div className="department-node py-1">
+            {item.ID === activeID ? (
+              <Input
+                autoFocus
+                defaultValue={item.name}
+                bordered={false}
+                size="small"
+                style={{ width: '70%', backgroundColor: 'white' }}
+                onBlur={e => handleOnFocus(e, item.name, item.ID)}
+                onPressEnter={e => handleOnFocus(e, item.name, item.ID)}
+              />
+            ) : (
+              <div className="title">{item.name}</div>
+            )}
+            <div className="extra">
+              <FormOutlined className="pr-2" onClick={() => setActiveID(item.ID)} />
+              <Popconfirm
+                disabled={!showDelIcon}
+                title="确认删除吗?"
+                onText="确认"
+                cancelText="取消"
+                onConfirm={() => tryDelRole(item.ID)}
+                icon={<QuestionCircleOutlined style={{ color: 'red' }} />}>
+                <DeleteOutlined
+                  onClick={() => {
+                    !showDelIcon && message.warning('请先移除该栏目下所有配置')
+                  }}
+                />
+              </Popconfirm>
+            </div>
+          </div>
+        )
+      }
+      if (newItem.children?.length) {
+        newItem.children = renderTreeNode(newItem.items)
+      }
+      return newItem
+    })
+  }
+  const virtualHeigh = document.getElementById('role-list')?.clientHeight
+  return (
+    <div
+      className="min-w-54 rounded-20px flex flex-col bg-white "
+      style={{ height: 'calc(100vh - 122px)', background: '#ffffff' }}>
+      <div className="menu-title flex items-center justify-around">
+        <div className="py-4 text-base text-opacity-85">数据源列表</div>
+        <ModalForm
+          layout="horizontal"
+          title="新增数据源"
+          width="30%"
+          formRef={formRef}
+          onVisibleChange={visible => !visible && formRef.current?.resetFields()}
+          isKeyPressSubmit
+          labelCol={{ span: 5 }}
+          trigger={
+            <Button size="small" type="primary" ghost>
+              <PlusOutlined />
+              添加
+            </Button>
+          }
+          onFinish={async values => {
+            await tryAddDataSource(values)
+            message.success('添加成功')
+            return true
+          }}>
+          <ProFormText
+            label="数据源名称"
+            name="name"
+            rules={[{ required: true, message: '请输入数据源名称' }]}
+          />
+          {/* <ProFormText label="URL" name="url" required disabled placeholder="自动生成" /> */}
+        </ModalForm>
+      </div>
+      <div
+        id="role-list"
+        className="p-4 bg-white rounded-b-20px"
+        style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
+        <DirectoryTree
+          treeData={renderTreeNode(options.map(item => ({ title: item.name, key: item.ID, ...item })))}
+          height={virtualHeigh - 32}
+          onSelect={handleOnSelect}
+          showIcon={false}
+          defaultExpandAll
+        />
+      </div>
+    </div>
+  )
+}
+
+export default LeftMenu