tashow/tashow-manager
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: tashow:aaa
Branches Tags
tashow:wuxichen tashow:qianpw-mxgl tashow:qianpw tashow:master tashow:aaa
...
compare: tashow:263a7d3e20565879eb8cc424dab7ef3e6ce20688
Branches Tags
tashow:wuxichen tashow:qianpw-mxgl tashow:qianpw tashow:master tashow:aaa

11 Commits
aaa ... 263a7d3e20

Author SHA1 Message Date
wuxichen
263a7d3e20 feat: 基本信息 2025-10-17 17:43:42 +08:00
wuxichen
3c7473f8d1 feat: 订单列表 2025-10-16 16:32:59 +08:00
wuxichen
a5b7207f44 fix: authorization
Some checks failed
coverage CI / build (push) Has been cancelled
Details
2025-10-13 17:01:18 +08:00
wuxichen
ed92397237 feat: requestEventBus
Some checks failed
coverage CI / build (push) Has been cancelled
Details
2025-10-13 16:52:24 +08:00
wuxichen
9eb4f52f0e feat: 样本管理 2025-10-13 16:50:21 +08:00
wuxichen
4e9ebc76f7 feat: upload
Some checks failed
coverage CI / build (push) Has been cancelled
Details
2025-09-25 13:51:24 +08:00
wuxichen
88097e386b feat: qianpw to wuxichen
Some checks failed
coverage CI / build (push) Has been cancelled
Details
2025-09-24 15:58:11 +08:00
wuxichen
82d043a414 feat: 富文本编辑器
Some checks failed
coverage CI / build (push) Has been cancelled
Details
2025-09-24 15:47:28 +08:00
qianpw
34cd919441 feat: 添加字典详情
Some checks failed
coverage CI / build (push) Has been cancelled
Details
2025-09-24 15:28:36 +08:00
wuxichen
12495b6d85 feat: tagEditor
Some checks failed
coverage CI / build (push) Has been cancelled
Details
2025-09-24 11:09:02 +08:00
qianpw
9363dc0d6e feat: 系统管理
Some checks failed
coverage CI / build (push) Has been cancelled
Details
2025-09-23 16:00:15 +08:00
108 changed files with 11697 additions and 952 deletions
Expand all files Collapse all files

6
.env.local
View File

@@ -4,8 +4,8 @@ NODE_ENV=development
VITE_DEV=true VITE_DEV=true
# 请求路径 # 请求路径
# VITE_BASE_URL='http://114.132.60.20:48080' VITE_BASE_URL='http://114.132.60.20:48080'
VITE_BASE_URL='http://192.168.1.114:48080' # 理君 # VITE_BASE_URL='http://192.168.1.114:48080' # 理君
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
@@ -14,6 +14,8 @@ VITE_UPLOAD_TYPE=server
# 接口地址 # 接口地址
VITE_API_URL=/admin-api VITE_API_URL=/admin-api
VITE_API_URL_PREFIX=/ai/sample/create
# 是否删除debugger # 是否删除debugger
VITE_DROP_DEBUGGER=false VITE_DROP_DEBUGGER=false

12
.github/FUNDING.yml vendored
View File

@@ -1,12 +0,0 @@
# These are supported funding model platforms
github: ant-design # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: ant-design
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

48
.github/ISSUE_TEMPLATE/bug_report.md vendored
View File

@@ -1,48 +0,0 @@
---
name: '报告 Bug | Report bug 🐛'
about: 报告 Ant Design Pro 的 bug
title: '🐛 [BUG]'
labels: '🐛 bug'
assignees: ''
---
### 🐛 bug 描述
<!--
详细地描述 bug，让大家都能理解
Describe the bug in detail so that everyone can understand it
-->
### 📷 复现步骤 | Recurrence steps
<!--
清晰描述复现步骤，让别人也能看到问题
Clearly describe the recurrence steps so that others can see the problem
-->
### 🏞 期望结果 | Expected results
<!--
描述你原本期望看到的结果
Describe what you expected to see
-->
### 💻 复现代码 | Recurrence code
<!--
提供可复现的代码，仓库，或线上示例
Provide reproducible code, warehouse, or online examples
-->
### © 版本信息
- Ant Design Pro 版本: [e.g. 4.0.0]
- umi 版本
- 浏览器环境
- 开发环境 [e.g. mac OS]
### 🚑 其他信息
<!--
如截图等其他信息可以贴在这里
-->

28
.github/ISSUE_TEMPLATE/feature_request.md vendored
View File

@@ -1,28 +0,0 @@
---
name: '功能需求 | Feature Requirements ✨'
about: 对 Ant Design Pro 的需求或建议
title: '👑 [需求 | Feature]'
labels: '👑 Feature Request'
assignees: ''
---
### 🥰 需求描述 | Requirements description
<!--
详细地描述需求，让大家都能理解
Describe the requirements in detail so that everyone can understand them
-->
### 🧐 解决方案 | Solution
<!--
如果你有解决方案，在这里清晰地阐述
If you have a solution, explain it clearly here
-->
### 🚑 其他信息 | Other information
<!--
如截图等其他信息可以贴在这里
Other information such as screenshots can be posted here
-->

34
.github/ISSUE_TEMPLATE/question.md vendored
View File

@@ -1,34 +0,0 @@
---
name: '疑问或需要帮助 | Questions or need help ❓'
about: 对 Ant Design Pro 使用的疑问或需要帮助
title: '🧐[问题 | question]'
labels: '🧐 question'
assignees: ''
---
### 🧐 问题描述 | Problem description
<!--
详细地描述问题，让大家都能理解
Describe the problem in detail so that everyone can understand it
-->
### 💻 示例代码 | Sample code
<!--
一个最小可重现的代码，让开发者可以快速的定位问题
A minimal reproducible code that allows developers to quickly locate problems
-->
### 🚑 其他信息 | Other information
<!--
如截图等其他信息可以贴在这里
Other information such as screenshots can be posted here
-->
OS:
Node：
浏览器 | browser：

11
.github/dependabot.yml vendored
View File

@@ -1,11 +0,0 @@
# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
version: 2
updates:
- package-ecosystem: 'npm' # See documentation for possible values
directory: '/' # Location of package manifests
schedule:
interval: 'weekly'

31
.github/workflows/ci.yml vendored
View File

@@ -1,31 +0,0 @@
name: CI
on: [push, pull_request]
permissions:
contents: read
jobs:
build:
if: false
runs-on: ${{ matrix.os }}
strategy:
matrix:
node_version: [20]
os: [ubuntu-latest, windows-latest, macOS-latest]
steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node_version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node_version }}
- run: echo ${{github.ref}}
- uses: oven-sh/setup-bun@v2
- run: bun install
- run: bun run lint
- run: bun run build
env:
CI: true
PROGRESS: none
NODE_ENV: test
NODE_OPTIONS: --max_old_space_size=4096

21
.github/workflows/coverage.yml vendored
View File

@@ -1,21 +0,0 @@
name: coverage CI
on: [push, pull_request]
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Use Node.js 20
uses: actions/setup-node@v4
with:
node-version: 20
- run: echo ${{github.ref}}
- uses: oven-sh/setup-bun@v2
- run: bun install
- run: bun run test:coverage
- uses: codecov/codecov-action@v5

30
.github/workflows/deploy.yml vendored
View File

@@ -1,30 +0,0 @@
name: Deploy to GitHub Pages
on:
push:
branches:
- all-blocks
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Install Bun
uses: oven-sh/setup-bun@v2
- name: Install dependencies with Bun
run: bun install
- name: Build project
run: bun run build
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v4
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
cname: preview.pro.ant.design

14
.github/workflows/emoji-helper.yml vendored
View File

@@ -1,14 +0,0 @@
name: Emoji Helper
on:
release:
types: [published]
jobs:
emoji:
runs-on: ubuntu-latest
steps:
- uses: actions-cool/emoji-helper@v1.0.0
with:
type: 'release'
emoji: '+1, laugh, heart, hooray, rocket, eyes'

37
.github/workflows/issue-labeled.yml vendored
View File

@@ -1,37 +0,0 @@
name: Issue labeled
on:
issues:
types: [labeled]
jobs:
reply-helper:
runs-on: ubuntu-latest
steps:
- name: help wanted
if: github.event.label.name == '❤️ help wanted' || github.event.label.name == '🤝Welcome PR'
uses: actions-cool/issues-helper@v1.11
with:
actions: 'create-comment'
token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ github.event.issue.number }}
body: |
Hello @${{ github.event.issue.user.login }}. We totally like your proposal/feedback, welcome to [send us a Pull Request](https://help.github.com/en/articles/creating-a-pull-request) for it. Please provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!
你好 @${{ github.event.issue.user.login }}，我们完全同意你的提议/反馈，欢迎直接在此仓库 [创建一个 Pull Request](https://help.github.com/en/articles/creating-a-pull-request) 来解决这个问题。请务必提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。
![giphy](https://user-images.githubusercontent.com/507615/62342668-4735dc00-b51a-11e9-92a7-d46fbb1cc0c7.gif)
- name: Need Reproduce
if: github.event.label.name == '🤔 Need Reproduce'
uses: actions-cool/issues-helper@v1.11
with:
actions: 'create-comment'
token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ github.event.issue.number }}
body: |
Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking this link https://codesandbox.io/ or a minimal GitHub repository.
你好 @${{ github.event.issue.user.login }}, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 [此处](https://codesandbox.io/) 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。
![](https://gw.alipayobjects.com/zos/antfincdn/y9kwg7DVCd/reproduce.gif)

34
.github/workflows/issue-open-check.yml vendored
View File

@@ -1,34 +0,0 @@
name: Issue Open Check
on:
issues:
types: [opened, edited]
jobs:
check-issue:
runs-on: ubuntu-latest
steps:
- uses: actions-cool/issues-helper@v2.2.0
id: check
with:
actions: 'check-issue'
issue-number: ${{ github.event.issue.number }}
title-excludes: '🐛 [BUG], 👑 [需求 | Feature], 🧐[问题 | question]'
- if: steps.check.outputs.check-result == 'false' && github.event.issue.state == 'open'
uses: actions-cool/issues-helper@v2.2.0
with:
actions: 'create-comment, close-issue'
issue-number: ${{ github.event.issue.number }}
body: |
当前 Issue 未检测到标题，请规范填写，谢谢！
The title of the current issue is not detected, please fill in according to the specifications, thank you!
- if: steps.check.outputs.check-result == 'true'
uses: actions-cool/issues-similarity-analysis@v1
with:
filter-threshold: 0.8
title-excludes: '🐛[BUG], 👑 [需求 | Feature], 🧐[问题 | question]'
comment-title: '### 以下的 Issues 可能会帮助到你 / The following issues may help you'
show-footer: false

40
.github/workflows/preview-build.yml vendored
View File

@@ -1,40 +0,0 @@
name: Preview Build
on:
pull_request:
types: [opened, synchronize, reopened]
permissions:
contents: read
jobs:
build-preview:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
ref: ${{ github.event.pull_request.head.sha }}
- name: build
run: |
yarn
yarn build
- name: upload dist artifact
uses: actions/upload-artifact@v4
with:
name: dist
path: dist/
retention-days: 5
- name: Save PR number
if: ${{ always() }}
run: echo ${{ github.event.number }} > ./pr-id.txt
- name: Upload PR number
if: ${{ always() }}
uses: actions/upload-artifact@v4
with:
name: pr
path: ./pr-id.txt

100
.github/workflows/preview-deploy.yml vendored
View File

@@ -1,100 +0,0 @@
name: Preview Deploy
on:
workflow_run:
workflows: ['Preview Build']
types:
- completed
permissions:
contents: read
jobs:
success:
permissions:
actions: read # for dawidd6/action-download-artifact to query and download artifacts
issues: write # for actions-cool/maintain-one-comment to modify or create issue comments
pull-requests: write # for actions-cool/maintain-one-comment to modify or create PR comments
runs-on: ubuntu-latest
if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success'
steps:
- name: download pr artifact
uses: dawidd6/action-download-artifact@v6
with:
workflow: ${{ github.event.workflow_run.workflow_id }}
name: pr
- name: save PR id
id: pr
run: echo "::set-output name=id::$(<pr-id.txt)"
- name: download dist artifact
uses: dawidd6/action-download-artifact@v6
with:
workflow: ${{ github.event.workflow_run.workflow_id }}
workflow_conclusion: success
name: dist
- name: upload surge service
id: deploy
run: |
export DEPLOY_DOMAIN=https://ant-design-pro-preview-pr-${{ steps.pr.outputs.id }}.surge.sh
npx surge --project ./ --domain $DEPLOY_DOMAIN --token ${{ secrets.SURGE_TOKEN }}
- name: update status comment
uses: actions-cool/maintain-one-comment@v1.2.1
with:
token: ${{ secrets.GITHUB_TOKEN }}
body: |
🎊 PR Preview has been successfully built and deployed to https://ant-design-pro-preview-pr-${{ steps.pr.outputs.id }}.surge.sh
<img width="300" src="https://user-images.githubusercontent.com/507615/90250366-88233900-de6e-11ea-95a5-84f0762ffd39.png">
<!-- Sticky Pull Request Comment -->
body-include: '<!-- Sticky Pull Request Comment -->'
number: ${{ steps.pr.outputs.id }}
- name: The job failed
if: ${{ failure() }}
uses: actions-cool/maintain-one-comment@v1.2.1
with:
token: ${{ secrets.GITHUB_TOKEN }}
body: |
😭 Deploy PR Preview failed.
<img width="300" src="https://user-images.githubusercontent.com/507615/90250824-4e066700-de6f-11ea-8230-600ecc3d6a6b.png">
<!-- Sticky Pull Request Comment -->
body-include: '<!-- Sticky Pull Request Comment -->'
number: ${{ steps.pr.outputs.id }}
failed:
permissions:
actions: read # for dawidd6/action-download-artifact to query and download artifacts
issues: write # for actions-cool/maintain-one-comment to modify or create issue comments
pull-requests: write # for actions-cool/maintain-one-comment to modify or create PR comments
runs-on: ubuntu-latest
if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'failure'
steps:
- name: download pr artifact
uses: dawidd6/action-download-artifact@v6
with:
workflow: ${{ github.event.workflow_run.workflow_id }}
name: pr
- name: save PR id
id: pr
run: echo "::set-output name=id::$(<pr-id.txt)"
- name: The job failed
uses: actions-cool/maintain-one-comment@v1.2.1
with:
token: ${{ secrets.GITHUB_TOKEN }}
body: |
😭 Deploy PR Preview failed.
<img width="300" src="https://user-images.githubusercontent.com/507615/90250824-4e066700-de6f-11ea-8230-600ecc3d6a6b.png">
<!-- Sticky Pull Request Comment -->
body-include: '<!-- Sticky Pull Request Comment -->'
number: ${{ steps.pr.outputs.id }}

24
.github/workflows/preview-start.yml vendored
View File

@@ -1,24 +0,0 @@
name: Preview Start
on: pull_request_target
permissions:
contents: read
jobs:
preview:
permissions:
issues: write # for actions-cool/maintain-one-comment to modify or create issue comments
pull-requests: write # for actions-cool/maintain-one-comment to modify or create PR comments
runs-on: ubuntu-latest
steps:
- name: create
uses: actions-cool/maintain-one-comment@v1.2.1
with:
token: ${{ secrets.GITHUB_TOKEN }}
body: |
⚡️ Deploying PR Preview...
<img src="https://user-images.githubusercontent.com/507615/90240294-8d2abd00-de5b-11ea-8140-4840a0b2d571.gif" width="300" />
<!-- Sticky Pull Request Comment -->
body-include: '<!-- Sticky Pull Request Comment -->'

2
config/config.ts
View File

@@ -83,7 +83,7 @@ export default defineConfig({
* @name layout 插件 * @name layout 插件
* @doc https://umijs.org/docs/max/layout-menu * @doc https://umijs.org/docs/max/layout-menu
*/ */
title: 'Ant Design Pro', title: '百业到家',
layout: { layout: {
locale: true, locale: true,
...defaultSettings, ...defaultSettings,

21
config/defaultSettings.ts
View File

@@ -1,4 +1,4 @@
import type { ProLayoutProps } from "@ant-design/pro-components"; import type { ProLayoutProps } from '@ant-design/pro-components';
/** /**
* @name * @name
@@ -7,21 +7,26 @@ const Settings: ProLayoutProps & {
pwa?: boolean; pwa?: boolean;
logo?: string; logo?: string;
} = { } = {
navTheme: "light", navTheme: 'light',
// 拂晓蓝 // 拂晓蓝
colorPrimary: "#1890ff", colorPrimary: '#1890ff',
layout: "mix", layout: 'mix',
contentWidth: "Fluid", contentWidth: 'Fluid',
fixedHeader: true, fixedHeader: true,
fixSiderbar: true, fixSiderbar: true,
colorWeak: false, colorWeak: false,
title: "百业到家云控台", title: '百业到家云控台',
pwa: true, pwa: true,
logo: "/logo.svg", logo: '/logo.svg',
iconfontUrl: "", iconfontUrl: '',
splitMenus: true, splitMenus: true,
token: { token: {
// 参见ts声明，demo 见文档，通过token 修改样式 // 参见ts声明，demo 见文档，通过token 修改样式
// 设置内容区域的边距
pageContainer: {
paddingBlockPageContainerContent: 16,
paddingInlinePageContainerContent: 16,
},
//https://procomponents.ant.design/components/layout#%E9%80%9A%E8%BF%87-token-%E4%BF%AE%E6%94%B9%E6%A0%B7%E5%BC%8F //https://procomponents.ant.design/components/layout#%E9%80%9A%E8%BF%87-token-%E4%BF%AE%E6%94%B9%E6%A0%B7%E5%BC%8F
}, },
}; };

6
config/proxy.ts
View File

@@ -15,7 +15,9 @@ export default {
// localhost:8000/api/** -> https://preview.pro.ant.design/api/** // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
'/admin-api/': { '/admin-api/': {
// 要代理的地址 // 要代理的地址
target: 'http://114.132.60.20:48080', // http://192.168.1.231:48080 伟强
// https://petshy.tashowz.com/
target: 'http://192.168.1.231:48080/',
// 配置了这个可以从 http 代理到 https // 配置了这个可以从 http 代理到 https
// 依赖 origin 的功能可能需要这个，比如 cookie // 依赖 origin 的功能可能需要这个，比如 cookie
changeOrigin: true, changeOrigin: true,
@@ -28,7 +30,7 @@ export default {
test: { test: {
// localhost:8000/api/** -> https://preview.pro.ant.design/api/** // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
'/api/': { '/api/': {
target: 'https://proapi.azurewebsites.net', target: 'https://petshy.tashowz.com/',
changeOrigin: true, changeOrigin: true,
pathRewrite: { '^': '' }, pathRewrite: { '^': '' },
}, },

69
config/routes.ts
View File

@@ -13,70 +13,41 @@
export default [ export default [
{ {
path: "/user", path: '/user',
layout: false, layout: false,
routes: [ routes: [
{ {
name: "login", name: 'login',
path: "/user/login", path: '/user/login',
component: "./user/login", component: './user/login',
}, },
], ],
}, },
{ {
path: "/welcome", path: '/welcome',
name: "welcome", name: 'welcome',
icon: "smile", icon: 'smile',
component: "./Welcome", component: './Welcome',
}, },
// {
// path: "/system1",
// name: "system1",
// icon: "smile",
// routes: [
// {
// name: "tenant",
// path: "/system1/tenant",
// routes: [
// {
// name: "package",
// path: "/system1/tenant/package",
// component: "system/tenant/package",
// },
// ],
// },
// ],
// },
{ {
path: "/admin", path: '/',
name: "admin", redirect: '/welcome',
icon: "crown", },
access: "canAdmin", {
path: '/trade',
name: '交易管理',
routes: [ routes: [
{ {
path: "/admin", name: '订单管理',
redirect: "/admin/sub-page", path: '/trade',
}, component: './trade/order/index',
{
path: "/admin/sub-page",
name: "sub-page",
component: "./Admin",
}, },
], ],
}, },
// {
// name: 'list.table-list',
// icon: 'table',
// path: '/list',
// component: './table-list',
// },
{ {
path: "/", component: '404',
redirect: "/welcome",
},
{
component: "404",
layout: false, layout: false,
path: "*", path: '*',
}, },
]; ];

14
mock/ap.ts Normal file
View File

@@ -0,0 +1,14 @@
import type { Request, Response } from "express";
import mockjs from "mockjs";
const getTags = (_: Request, res: Response) => {
return res.json({
data: mockjs.mock({
"list|100": [{ name: "@city", "value|1-100": 150, "type|0-2": 1 }],
}),
});
};
export default {
"GET /api/tags": getTags,
};

868
mock/login.ts Normal file
View File

@@ -0,0 +1,868 @@
import type { Request, Response } from "express";
const logout = (_req: Request, res: Response) => {
res.json({
code: 0,
data: true,
msg: "",
});
};
export default {
"POST /system/auth/logout": logout,
"GET /system/tenant/get-id-by-name": {
data: 1,
},
"POST /system/auth/login": {
data: {
accessToken: "e0a58d5267d246d3a478e8c4c96051d9",
expiresTime: 1760583658965,
refreshToken: "9667e5f1a1c24c02814284aa116ea769",
userId: 1,
},
},
"GET /admin-api/system/auth/get-permission-info": {
data: {
user: {
id: 1,
nickname: "芋道源码",
avatar:
"http://test.yudao.iocoder.cn/bf2002b38950c904243be7c825d3f82e29f25a44526583c3fde2ebdff3a87f75.png",
deptId: 103,
},
roles: ["super_admin"],
permissions: [
"",
"infra:config:create",
"system:menu:query",
"infra:file-config:query",
"infra:config:export",
"system:user:query",
"infra:file-config:create",
"system:user:export",
"system:dept:update",
"infra:api-access-log:export",
"infra:data-source-config:update",
"system:dept:query",
"infra:file-config:export",
"infra:demo01-contact:query",
"system:tenant-package:delete",
"infra:demo02-category:query",
"system:role:delete",
"system:dept:create",
"system:menu:create",
"infra:codegen:download",
"system:dict:query",
"infra:api-error-log:query",
"infra:demo03-student:delete",
"system:dict:update",
"infra:demo01-contact:delete",
"infra:job:delete",
"system:tenant:export",
"system:post:update",
"infra:api-error-log:update-status",
"system:tenant:create",
"infra:demo02-category:update",
"system:post:export",
"infra:file:delete",
"infra:data-source-config:create",
"infra:job:trigger",
"system:menu:update",
"infra:demo02-category:delete",
"system:login-log:query",
"system:role:update",
"system:login-log:export",
"system:user:create",
"system:role:export",
"infra:file-config:update",
"infra:demo01-contact:update",
"system:permission:assign-user-role",
"system:post:delete",
"infra:demo03-student:create",
"infra:config:update",
"infra:job:update",
"infra:job:export",
"infra:demo01-contact:export",
"infra:api-error-log:export",
"infra:demo02-category:export",
"infra:job:create",
"system:permission:assign-role-menu",
"infra:config:query",
"infra:demo02-category:create",
"system:dept:delete",
"system:tenant:update",
"ai:sample:tag",
"system:tenant-package:update",
"infra:codegen:create",
"infra:data-source-config:delete",
"infra:file-config:delete",
"infra:codegen:preview",
"system:dict:create",
"infra:api-access-log:query",
"infra:redis:get-monitor-info",
"infra:file:query",
"infra:config:delete",
"system:user:update-password",
"system:dict:export",
"system:post:query",
"system:post:create",
"infra:codegen:delete",
"infra:redis:get-key-list",
"system:user:delete",
"infra:build:list",
"infra:codegen:update",
"infra:data-source-config:export",
"system:user:import",
"infra:swagger:list",
"infra:job:query",
"system:user:update",
"system:menu:delete",
"infra:data-source-config:query",
"system:permission:assign-role-data-scope",
"system:tenant-package:create",
"infra:demo03-student:update",
"system:user:list",
"infra:demo01-contact:create",
"system:operate-log:query",
"infra:codegen:query",
"system:tenant:delete",
"system:tenant-package:query",
"system:role:create",
"infra:demo03-student:query",
"system:dict:delete",
"system:operate-log:export",
"system:role:query",
"infra:demo03-student:export",
],
menus: [
{
id: 5015,
parentId: 0,
name: "商品管理",
path: "/prod",
component: "",
componentName: "",
icon: "",
visible: true,
keepAlive: true,
alwaysShow: true,
children: [
{
id: 5016,
parentId: 5015,
name: "商品管理",
path: "list",
component: "prod/prod-manager/index",
componentName: "ProdManagerList",
icon: "",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 5022,
parentId: 5015,
name: "类目管理",
path: "category",
component: "prod/category-manager/index",
componentName: "CategoryManager",
icon: "",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
],
},
{
id: 5001,
parentId: 0,
name: "系统管理1",
path: "/system1",
component: "",
componentName: "",
icon: "ep:setting",
visible: true,
keepAlive: true,
alwaysShow: true,
children: [
{
id: 5003,
parentId: 5001,
name: "租户管理",
path: "tenant",
component: "",
componentName: "",
icon: "fa-solid:house-user",
visible: true,
keepAlive: true,
alwaysShow: true,
children: [
{
id: 5004,
parentId: 5003,
name: "租户列表",
path: "list",
component: "system/tenant/list/index",
componentName: "SystemTenantListIndex",
icon: "ep:list",
visible: true,
keepAlive: false,
alwaysShow: true,
children: null,
},
{
id: 5005,
parentId: 5003,
name: "租户套餐",
path: "package",
component: "system/tenant/package/index",
componentName: "SystemPackage",
icon: "fa:align-justify",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
],
},
{
id: 5007,
parentId: 5001,
name: "用户管理",
path: "user",
component: "system/user/index",
componentName: "SystemUserIndex",
icon: "ep:user-filled",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 5006,
parentId: 5001,
name: "角色管理",
path: "role",
component: "system/role/index",
componentName: "SystemRoleIndex",
icon: "ep:user",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 5008,
parentId: 5001,
name: "菜单管理",
path: "menu",
component: "system/menu/index",
componentName: "SystemMenuIndex",
icon: "ep:menu",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 5009,
parentId: 5001,
name: "字典管理",
path: "dict",
component: "system/dict/index",
componentName: "SystemDictIndex",
icon: "ep:search",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 5019,
parentId: 5001,
name: "部门管理",
path: "dept",
component: "system/dept/index",
componentName: null,
icon: "#",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 5020,
parentId: 5001,
name: "审计日志",
path: "log",
component: "",
componentName: "",
icon: "",
visible: true,
keepAlive: true,
alwaysShow: true,
children: [
{
id: 5021,
parentId: 5020,
name: "操作日志",
path: "operate",
component: "system/log/operate/index",
componentName: "SystemOperateLog",
icon: "",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
],
},
],
},
{
id: 5055,
parentId: 0,
name: "AI",
path: "/ai",
component: "",
componentName: "",
icon: "",
visible: true,
keepAlive: true,
alwaysShow: true,
children: [
{
id: 5057,
parentId: 5055,
name: "样本管理",
path: "sample-tag",
component: "ai/sample-tag/index",
componentName: "AiSampleTag",
icon: "",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
],
},
{
id: 1,
parentId: 0,
name: "系统管理",
path: "/system",
component: null,
componentName: null,
icon: "ep:tools",
visible: true,
keepAlive: true,
alwaysShow: true,
children: [
{
id: 1224,
parentId: 1,
name: "租户管理",
path: "tenant",
component: null,
componentName: null,
icon: "fa-solid:house-user",
visible: true,
keepAlive: true,
alwaysShow: true,
children: [
{
id: 1138,
parentId: 1224,
name: "租户列表",
path: "list",
component: "system/tenant/index",
componentName: "SystemTenant",
icon: "ep:house",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 1225,
parentId: 1224,
name: "租户套餐",
path: "package",
component: "system/tenantPackage/index",
componentName: "SystemTenantPackage",
icon: "fa:bars",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
],
},
{
id: 100,
parentId: 1,
name: "用户管理",
path: "user",
component: "system/user/index",
componentName: "SystemUser",
icon: "ep:avatar",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 101,
parentId: 1,
name: "角色管理",
path: "role",
component: "system/role/index",
componentName: "SystemRole",
icon: "ep:user",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 102,
parentId: 1,
name: "菜单管理",
path: "menu",
component: "system/menu/index",
componentName: "SystemMenu",
icon: "ep:menu",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 103,
parentId: 1,
name: "部门管理",
path: "dept",
component: "system/dept/index",
componentName: "SystemDept",
icon: "fa:address-card",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 104,
parentId: 1,
name: "岗位管理",
path: "post",
component: "system/post/index",
componentName: "SystemPost",
icon: "fa:address-book-o",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 105,
parentId: 1,
name: "字典管理",
path: "dict",
component: "system/dict/index",
componentName: "SystemDictType",
icon: "ep:collection",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 5058,
parentId: 1,
name: "字典详情",
path: "dict/data/:type",
component: "system/dict/data/index",
componentName: "SyStemDictData",
icon: "#",
visible: false,
keepAlive: true,
alwaysShow: false,
children: null,
},
{
id: 108,
parentId: 1,
name: "审计日志",
path: "log",
component: "",
componentName: null,
icon: "ep:document-copy",
visible: true,
keepAlive: true,
alwaysShow: true,
children: [
{
id: 500,
parentId: 108,
name: "操作日志",
path: "operate-log",
component: "system/operatelog/index",
componentName: "SystemOperateLog",
icon: "ep:position",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 501,
parentId: 108,
name: "登录日志",
path: "login-log",
component: "system/loginlog/index",
componentName: "SystemLoginLog",
icon: "ep:promotion",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
],
},
],
},
{
id: 2,
parentId: 0,
name: "基础设施",
path: "/infra",
component: null,
componentName: null,
icon: "ep:monitor",
visible: true,
keepAlive: true,
alwaysShow: true,
children: [
{
id: 115,
parentId: 2,
name: "代码生成",
path: "codegen",
component: "infra/codegen/index",
componentName: "InfraCodegen",
icon: "ep:document-copy",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 1070,
parentId: 2,
name: "代码生成案例",
path: "demo",
component: "infra/testDemo/index",
componentName: null,
icon: "ep:aim",
visible: true,
keepAlive: true,
alwaysShow: true,
children: [
{
id: 2478,
parentId: 1070,
name: "单表（增删改查）",
path: "demo01-contact",
component: "infra/demo/demo01/index",
componentName: "Demo01Contact",
icon: "ep:bicycle",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 2484,
parentId: 1070,
name: "树表（增删改查）",
path: "demo02-category",
component: "infra/demo/demo02/index",
componentName: "Demo02Category",
icon: "fa:tree",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 2490,
parentId: 1070,
name: "主子表（标准）",
path: "demo03-normal",
component: "infra/demo/demo03/normal/index",
componentName: "Demo03StudentNormal",
icon: "fa:battery-3",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 2497,
parentId: 1070,
name: "主子表（ERP）",
path: "demo03-erp",
component: "infra/demo/demo03/erp/index",
componentName: "Demo03StudentERP",
icon: "ep:calendar",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 2472,
parentId: 1070,
name: "主子表（内嵌）",
path: "demo03-inner",
component: "infra/demo/demo03/inner/index",
componentName: "Demo03StudentInner",
icon: "fa:power-off",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
],
},
{
id: 1255,
parentId: 2,
name: "数据源配置",
path: "data-source-config",
component: "infra/dataSourceConfig/index",
componentName: "InfraDataSourceConfig",
icon: "ep:data-analysis",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 114,
parentId: 2,
name: "表单构建",
path: "build",
component: "infra/build/index",
componentName: "InfraBuild",
icon: "fa:wpforms",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 116,
parentId: 2,
name: "API 接口",
path: "swagger",
component: "infra/swagger/index",
componentName: "InfraSwagger",
icon: "fa:fighter-jet",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 1083,
parentId: 2,
name: "API 日志",
path: "log",
component: null,
componentName: null,
icon: "fa:tasks",
visible: true,
keepAlive: true,
alwaysShow: true,
children: [
{
id: 1078,
parentId: 1083,
name: "访问日志",
path: "api-access-log",
component: "infra/apiAccessLog/index",
componentName: "InfraApiAccessLog",
icon: "ep:place",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 1084,
parentId: 1083,
name: "错误日志",
path: "api-error-log",
component: "infra/apiErrorLog/index",
componentName: "InfraApiErrorLog",
icon: "ep:warning-filled",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
],
},
{
id: 2525,
parentId: 2,
name: "WebSocket",
path: "websocket",
component: "infra/webSocket/index",
componentName: "InfraWebSocket",
icon: "ep:connection",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 1243,
parentId: 2,
name: "文件管理",
path: "file",
component: null,
componentName: "",
icon: "ep:files",
visible: true,
keepAlive: true,
alwaysShow: true,
children: [
{
id: 1237,
parentId: 1243,
name: "文件配置",
path: "file-config",
component: "infra/fileConfig/index",
componentName: "InfraFileConfig",
icon: "fa-solid:file-signature",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 1090,
parentId: 1243,
name: "文件列表",
path: "file",
component: "infra/file/index",
componentName: "InfraFile",
icon: "ep:upload-filled",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
],
},
{
id: 110,
parentId: 2,
name: "定时任务",
path: "job",
component: "infra/job/index",
componentName: "InfraJob",
icon: "fa-solid:tasks",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 106,
parentId: 2,
name: "配置管理",
path: "config",
component: "infra/config/index",
componentName: "InfraConfig",
icon: "fa:connectdevelop",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 2740,
parentId: 2,
name: "监控中心",
path: "monitors",
component: "",
componentName: "",
icon: "ep:monitor",
visible: true,
keepAlive: true,
alwaysShow: true,
children: [
{
id: 111,
parentId: 2740,
name: "MySQL 监控",
path: "druid",
component: "infra/druid/index",
componentName: "InfraDruid",
icon: "fa-solid:box",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 113,
parentId: 2740,
name: "Redis 监控",
path: "redis",
component: "infra/redis/index",
componentName: "InfraRedis",
icon: "fa:reddit-square",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 112,
parentId: 2740,
name: "Java 监控",
path: "admin-server",
component: "infra/server/index",
componentName: "InfraAdminServer",
icon: "ep:coffee-cup",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
{
id: 1077,
parentId: 2740,
name: "链路追踪",
path: "skywalking",
component: "infra/skywalking/index",
componentName: "InfraSkyWalking",
icon: "fa:eye",
visible: true,
keepAlive: true,
alwaysShow: true,
children: null,
},
],
},
],
},
],
},
},
};

113
mock/notices.ts
View File

@@ -1,117 +1,20 @@
import type { Request, Response } from 'express'; import type { Request, Response } from "express";
const getNotices = (_req: Request, res: Response) => { const getSampleTag = (_req: Request, res: Response) => {
res.json({ res.json({
data: [ data: [
{ {
id: '000000001', id: "000000001",
avatar: avatar:
'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/MSbDR4FR2MUAAAAAAAAAAAAAFl94AQBr', "https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/MSbDR4FR2MUAAAAAAAAAAAAAFl94AQBr",
title: '你收到了 14 份新周报', title: "你收到了 14 份新周报",
datetime: '2017-08-09', datetime: "2017-08-09",
type: 'notification', type: "notification",
},
{
id: '000000002',
avatar:
'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/hX-PTavYIq4AAAAAAAAAAAAAFl94AQBr',
title: '你推荐的 曲妮妮 已通过第三轮面试',
datetime: '2017-08-08',
type: 'notification',
},
{
id: '000000003',
avatar:
'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/jHX5R5l3QjQAAAAAAAAAAAAAFl94AQBr',
title: '这种模板可以区分多种通知类型',
datetime: '2017-08-07',
read: true,
type: 'notification',
},
{
id: '000000004',
avatar:
'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Wr4mQqx6jfwAAAAAAAAAAAAAFl94AQBr',
title: '左侧图标用于区分不同的类型',
datetime: '2017-08-07',
type: 'notification',
},
{
id: '000000005',
avatar:
'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Mzj_TbcWUj4AAAAAAAAAAAAAFl94AQBr',
title: '内容不要超过两行字，超出时自动截断',
datetime: '2017-08-07',
type: 'notification',
},
{
id: '000000006',
avatar:
'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/eXLzRbPqQE4AAAAAAAAAAAAAFl94AQBr',
title: '曲丽丽 评论了你',
description: '描述信息描述信息描述信息',
datetime: '2017-08-07',
type: 'message',
clickClose: true,
},
{
id: '000000007',
avatar:
'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/w5mRQY2AmEEAAAAAAAAAAAAAFl94AQBr',
title: '朱偏右 回复了你',
description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
datetime: '2017-08-07',
type: 'message',
clickClose: true,
},
{
id: '000000008',
avatar:
'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/wPadR5M9918AAAAAAAAAAAAAFl94AQBr',
title: '标题',
description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
datetime: '2017-08-07',
type: 'message',
clickClose: true,
},
{
id: '000000009',
title: '任务名称',
description: '任务需要在 2017-01-12 20:00 前启动',
extra: '未开始',
status: 'todo',
type: 'event',
},
{
id: '000000010',
title: '第三方紧急代码变更',
description:
'冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
extra: '马上到期',
status: 'urgent',
type: 'event',
},
{
id: '000000011',
title: '信息安全考试',
description: '指派竹尔于 2017-01-09 前完成更新并发布',
extra: '已耗时 8 天',
status: 'doing',
type: 'event',
},
{
id: '000000012',
title: 'ABCD 版本发布',
description:
'冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
extra: '进行中',
status: 'processing',
type: 'event',
}, },
], ],
}); });
}; };
export default { export default {
'GET /api/notices': getNotices, "GET /api/notices": getSampleTag,
}; };

276
mock/order.ts Normal file
View File

@@ -0,0 +1,276 @@
import type { Request, Response } from "express";
const getOrderPage = (_req: Request, res: Response) => {
res.json({
data: {
list: [
{
id: 1,
orderNum: "BZ000548787",
createTime: "2025-10-1 14:00:00",
orderCategoryName: "宠物殡葬", // 订单类目
orderTerminal: 0, // 订单来源
userId: 0, // 用户编号
userName: "", // 用户姓名
userNickName: "张宁清", // 用户昵称
userAvatar: "", // 用户头像
userMobile: "18634556151", // 用户手机号
orderStatus: 10, // 订单状态
picUrl: "", // 商品图片
spuName:
"商品主标题商品主标题商品主标题商品主标题商品主题商品主标题商品主标题商品主", // 商品名称
skuName: "标准,单独火化,基础清洁", // 商品规格
count: 1, // 购买商品数量
price: 100, // 单价
handedPrice: 80, // 到手价
payPrice: "500", // 应付金额
unit: "", // 单位
subTime: 1760585499000, // 预约时间
serveAddress: "张宁清,18659156151,福州 台江区 鳌峰路 万达中心甲",
userRemark: "你好呀你好元", // 用户备注
payType: "wx", // 微信
financeStatus: "1", // 财务状态
},
{
id: 2,
orderNum: "3214421412",
createTime: "",
orderCategoryName: "宠物殡葬",
orderTerminal: 0,
userId: 0,
userName: "",
userNickName: "",
userAvatar: "",
userMobile: "",
orderStatus: 20,
picUrl: "",
spuName: "",
skuName: "",
subTime: 1760585499000, // 预约时间
count: 0,
price: 0,
handedPrice: 0,
payPrice: 0,
unit: "",
orderTime: "",
serveAddress: "",
userRemark: "",
payType: "",
financeStatus: "",
},
{
id: 3,
orderNum: "3214421412",
createTime: "",
orderCategoryName: "宠物殡葬",
orderTerminal: 0,
userId: 0,
userName: "",
subTime: 1760585499000, // 预约时间
userNickName: "",
userAvatar: "",
userMobile: "",
orderStatus: 30,
picUrl: "",
spuName: "",
skuName: "",
count: 0,
price: 0,
handedPrice: 0,
payPrice: 0,
unit: "",
orderTime: "",
serveAddress: "",
userRemark: "",
payType: "",
financeStatus: "",
},
{
id: 4,
orderNum: "3214421412",
createTime: "",
orderCategoryName: "宠物殡葬",
orderTerminal: 0,
userId: 0,
userName: "",
subTime: 1760585499000, // 预约时间
userNickName: "",
userAvatar: "",
userMobile: "",
orderStatus: 40,
picUrl: "",
spuName: "",
skuName: "",
count: 0,
price: 0,
handedPrice: 0,
payPrice: 0,
unit: "",
orderTime: "",
serveAddress: "",
userRemark: "",
payType: "",
financeStatus: "",
},
{
id: 5,
orderNum: "3214421412",
createTime: "",
orderCategoryName: "宠物殡葬",
orderTerminal: 0,
userId: 0,
userName: "",
subTime: 1760585499000, // 预约时间
userNickName: "",
userAvatar: "",
userMobile: "",
orderStatus: 50,
picUrl: "",
spuName: "",
skuName: "",
count: 0,
price: 0,
handedPrice: 0,
payPrice: 0,
unit: "",
orderTime: "",
serveAddress: "",
userRemark: "",
payType: "",
financeStatus: "",
},
{
id: 6,
orderNum: "3214421412",
createTime: "",
orderCategoryName: "宠物殡葬",
orderTerminal: 0,
userId: 0,
userName: "",
subTime: 1760585499000, // 预约时间
userNickName: "",
userAvatar: "",
userMobile: "",
orderStatus: 60,
picUrl: "",
spuName: "",
skuName: "",
count: 0,
price: 0,
handedPrice: 0,
payPrice: 0,
unit: "",
orderTime: "",
serveAddress: "",
userRemark: "",
payType: "",
financeStatus: "",
},
{
id: 7,
orderNum: "3214421412",
createTime: "",
orderCategoryName: "宠物殡葬",
orderTerminal: 0,
userId: 0,
userName: "",
subTime: 1760585499000, // 预约时间
userNickName: "",
userAvatar: "",
userMobile: "",
orderStatus: 70,
picUrl: "",
spuName: "",
skuName: "",
count: 0,
price: 0,
handedPrice: 0,
payPrice: 0,
unit: "",
orderTime: "",
serveAddress: "",
userRemark: "",
payType: "",
financeStatus: "",
},
],
total: 0,
},
code: 0,
});
};
const getOrderDetail = (_req: Request, res: Response) => {
res.json({
data: {
tradeOrderInfoBase: {
id: "7655265",
orderNo: "BZ000548787",
orderStatus: "50",
orderType: "1",
orderCategoryName: "宠物殡葬", // 订单类目
orderCategoryId: "3232321",
orderTerminal: "微信小程序",
userInfo: null,
userAvatar: null,
cancelTime: "2025-10-16T11:28:57",
cancelReason: "非常",
merchantRemark: "测试商家备注",
refundTime: null,
propertyTime: null,
propertyStatus: null,
price: null,
discountPrice: null,
payPrice: null,
refundPrice: null,
livePrice: null,
payType: "1",
payChannelCode: "1",
payOrderId: "12323123123",
payTime: 1760585391000,
createTime: 1760585499000,
finishTime: 1760585335000,
},
tradeProductInfo: {
shopLogoUrl: "",
shopName: "",
spuId: 0,
skuId: 0,
skuPicUrl: "",
spuName: "",
skuName: "",
count: 0,
price: 0,
unit: "",
handedPrice: 0,
expensePrice: 0,
properties: [""],
serveContent: "",
totalPrice: 0,
discountPrice: 0,
payPrice: 0,
refundPrice: 0,
refundCount: 0,
},
tradeServeInfo: {
properties: {
"": {},
},
},
tradeExtendServeInfo: {
properties: {
"": {},
},
},
tradeExtendCostInfo: {
properties: {
"": {},
},
},
},
code: 0,
});
};
export default {
"GET /admin-api/trade/order/page": getOrderPage,
"GET /admin-api/trade/order/get-detail": getOrderDetail,
};

5
package.json
View File

@@ -15,6 +15,7 @@
"jest": "jest", "jest": "jest",
"lint": "npm run biome:lint && npm run tsc", "lint": "npm run biome:lint && npm run tsc",
"lint-staged": "lint-staged", "lint-staged": "lint-staged",
"lint:fix": "eslint --fix --quiet",
"biome:lint": "npx @biomejs/biome lint", "biome:lint": "npx @biomejs/biome lint",
"openapi": "max openapi", "openapi": "max openapi",
"prepare": "husky", "prepare": "husky",
@@ -38,13 +39,17 @@
"@ant-design/icons": "^5.6.1", "@ant-design/icons": "^5.6.1",
"@ant-design/pro-components": "^2.8.9", "@ant-design/pro-components": "^2.8.9",
"@ant-design/v5-patch-for-react-19": "^1.0.3", "@ant-design/v5-patch-for-react-19": "^1.0.3",
"@tinymce/tinymce-react": "^6.3.0",
"antd": "^5.26.4", "antd": "^5.26.4",
"antd-style": "^3.7.0", "antd-style": "^3.7.0",
"classnames": "^2.5.1", "classnames": "^2.5.1",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"jsencrypt": "^3.5.4", "jsencrypt": "^3.5.4",
"rc-resize-observer": "^1.4.3",
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
"react-infinite-scroll-component": "^6.1.0",
"tinymce": "^8.1.2",
"web-storage-cache": "^1.1.1" "web-storage-cache": "^1.1.1"
}, },
"devDependencies": { "devDependencies": {

51
pnpm-lock.yaml generated
View File

@@ -17,6 +17,9 @@ importers:
'@ant-design/v5-patch-for-react-19': '@ant-design/v5-patch-for-react-19':
specifier: ^1.0.3 specifier: ^1.0.3
version: 1.0.3(antd@5.27.3(date-fns@2.30.0)(moment@2.30.1)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1) version: 1.0.3(antd@5.27.3(date-fns@2.30.0)(moment@2.30.1)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
'@tinymce/tinymce-react':
specifier: ^6.3.0
version: 6.3.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tinymce@8.1.2)
antd: antd:
specifier: ^5.26.4 specifier: ^5.26.4
version: 5.27.3(date-fns@2.30.0)(moment@2.30.1)(react-dom@19.1.1(react@19.1.1))(react@19.1.1) version: 5.27.3(date-fns@2.30.0)(moment@2.30.1)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
@@ -32,12 +35,21 @@ importers:
jsencrypt: jsencrypt:
specifier: ^3.5.4 specifier: ^3.5.4
version: 3.5.4 version: 3.5.4
rc-resize-observer:
specifier: ^1.4.3
version: 1.4.3(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
react: react:
specifier: ^19.1.0 specifier: ^19.1.0
version: 19.1.1 version: 19.1.1
react-dom: react-dom:
specifier: ^19.1.0 specifier: ^19.1.0
version: 19.1.1(react@19.1.1) version: 19.1.1(react@19.1.1)
react-infinite-scroll-component:
specifier: ^6.1.0
version: 6.1.0(react@19.1.1)
tinymce:
specifier: ^8.1.2
version: 8.1.2
web-storage-cache: web-storage-cache:
specifier: ^1.1.1 specifier: ^1.1.1
version: 1.1.1 version: 1.1.1
@@ -2551,6 +2563,16 @@ packages:
'@types/react-dom': '@types/react-dom':
optional: true optional: true
'@tinymce/tinymce-react@6.3.0':
resolution: {integrity: sha512-E++xnn0XzDzpKr40jno2Kj7umfAE6XfINZULEBBeNjTMvbACWzA6CjiR6V8eTDc9yVmdVhIPqVzV4PqD5TZ/4g==}
peerDependencies:
react: ^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0
react-dom: ^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0
tinymce: ^8.0.0 || ^7.0.0 || ^6.0.0 || ^5.5.1
peerDependenciesMeta:
tinymce:
optional: true
'@tootallnate/once@1.1.2': '@tootallnate/once@1.1.2':
resolution: {integrity: sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==} resolution: {integrity: sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==}
engines: {node: '>= 6'} engines: {node: '>= 6'}
@@ -9007,6 +9029,11 @@ packages:
react: ^16.6.0 || ^17.0.0 || ^18.0.0 react: ^16.6.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
react-infinite-scroll-component@6.1.0:
resolution: {integrity: sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==}
peerDependencies:
react: '>=16.0.0'
react-intl@3.12.1: react-intl@3.12.1:
resolution: {integrity: sha512-cgumW29mwROIqyp8NXStYsoIm27+8FqnxykiLSawWjOxGIBeLuN/+p2srei5SRIumcJefOkOIHP+NDck05RgHg==} resolution: {integrity: sha512-cgumW29mwROIqyp8NXStYsoIm27+8FqnxykiLSawWjOxGIBeLuN/+p2srei5SRIumcJefOkOIHP+NDck05RgHg==}
peerDependencies: peerDependencies:
@@ -10216,6 +10243,10 @@ packages:
thread-stream@0.15.2: thread-stream@0.15.2:
resolution: {integrity: sha512-UkEhKIg2pD+fjkHQKyJO3yoIvAP3N6RlNFt2dUhcS1FGvCD1cQa1M/PGknCLFIyZdtJOWQjejp7bdNqmN7zwdA==} resolution: {integrity: sha512-UkEhKIg2pD+fjkHQKyJO3yoIvAP3N6RlNFt2dUhcS1FGvCD1cQa1M/PGknCLFIyZdtJOWQjejp7bdNqmN7zwdA==}
throttle-debounce@2.3.0:
resolution: {integrity: sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==}
engines: {node: '>=8'}
throttle-debounce@5.0.2: throttle-debounce@5.0.2:
resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==} resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
engines: {node: '>=12.22'} engines: {node: '>=12.22'}
@@ -10246,6 +10277,9 @@ packages:
tinyexec@1.0.1: tinyexec@1.0.1:
resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==} resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
tinymce@8.1.2:
resolution: {integrity: sha512-KITxHEEHRlxC5xOnxA123eAJ67NgsWxNphtItWt9TRu07DiTZrWIqJeIKRX9euE51/l3kJO4WQiqoBXKTJJGsA==}
titleize@3.0.0: titleize@3.0.0:
resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==} resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
engines: {node: '>=12'} engines: {node: '>=12'}
@@ -14715,6 +14749,14 @@ snapshots:
'@types/react': 19.1.12 '@types/react': 19.1.12
'@types/react-dom': 19.1.9(@types/react@19.1.12) '@types/react-dom': 19.1.9(@types/react@19.1.12)
'@tinymce/tinymce-react@6.3.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tinymce@8.1.2)':
dependencies:
prop-types: 15.8.1
react: 19.1.1
react-dom: 19.1.1(react@19.1.1)
optionalDependencies:
tinymce: 8.1.2
'@tootallnate/once@1.1.2': {} '@tootallnate/once@1.1.2': {}
'@tootallnate/once@2.0.0': {} '@tootallnate/once@2.0.0': {}
@@ -23275,6 +23317,11 @@ snapshots:
react-fast-compare: 3.2.2 react-fast-compare: 3.2.2
shallowequal: 1.1.0 shallowequal: 1.1.0
react-infinite-scroll-component@6.1.0(react@19.1.1):
dependencies:
react: 19.1.1
throttle-debounce: 2.3.0
react-intl@3.12.1(@types/react@19.1.12)(react@19.1.1): react-intl@3.12.1(@types/react@19.1.12)(react@19.1.1):
dependencies: dependencies:
'@formatjs/intl-displaynames': 1.2.10 '@formatjs/intl-displaynames': 1.2.10
@@ -24827,6 +24874,8 @@ snapshots:
dependencies: dependencies:
real-require: 0.1.0 real-require: 0.1.0
throttle-debounce@2.3.0: {}
throttle-debounce@5.0.2: {} throttle-debounce@5.0.2: {}
through@2.3.8: {} through@2.3.8: {}
@@ -24850,6 +24899,8 @@ snapshots:
tinyexec@1.0.1: {} tinyexec@1.0.1: {}
tinymce@8.1.2: {}
titleize@3.0.0: {} titleize@3.0.0: {}
tldts-core@6.1.86: {} tldts-core@6.1.86: {}

36
src/app.tsx
View File

@@ -1,15 +1,9 @@
import type { Settings as LayoutSettings } from '@ant-design/pro-components'; import type { Settings as LayoutSettings } from '@ant-design/pro-components';
import { SettingDrawer } from '@ant-design/pro-components'; import { SettingDrawer } from '@ant-design/pro-components';
import type { RequestConfig, RunTimeLayoutConfig } from '@umijs/max'; import type { RequestConfig, RunTimeLayoutConfig } from '@umijs/max';
import { history, Link, Navigate } from '@umijs/max'; import { history, Navigate } from '@umijs/max';
import { Modal, Spin } from 'antd'; import { Spin } from 'antd';
import React, { import React from 'react';
Children,
Component,
createContext,
JSX,
Suspense,
} from 'react';
import { import {
AvatarDropdown, AvatarDropdown,
AvatarName, AvatarName,
@@ -18,17 +12,13 @@ import {
SelectLang, SelectLang,
} from '@/components'; } from '@/components';
import { getInfo } from '@/services/login'; import { getInfo } from '@/services/login';
import type { TokenType, UserInfoVO, UserVO } from '@/services/login/types'; import type { UserInfoVO } from '@/services/login/types';
import defaultSettings from '../config/defaultSettings'; import defaultSettings from '../config/defaultSettings';
import { errorConfig } from './requestErrorConfig'; import { errorConfig } from './requestErrorConfig';
import '@ant-design/v5-patch-for-react-19'; import '@ant-design/v5-patch-for-react-19';
import { getAccessToken, getRefreshToken, getTenantId } from '@/utils/auth'; import { getAccessToken, getTenantId } from '@/utils/auth';
import {
transformBackendMenuToFlatRoutes,
transformMenuToRoutes,
} from '@/utils/menuUtils';
import { CACHE_KEY, useCache } from './hooks/web/useCache'; import { CACHE_KEY, useCache } from './hooks/web/useCache';
import { MenuVO } from './services/system/menu';
const isDev = process.env.NODE_ENV === 'development'; const isDev = process.env.NODE_ENV === 'development';
const isDevOrTest = isDev || process.env.CI; const isDevOrTest = isDev || process.env.CI;
@@ -198,15 +188,15 @@ export const request: RequestConfig = {
}; };
// 如果有token，则添加Authorization头 // 如果有token，则添加Authorization头
if (token) { if (token) {
headers['Authorization'] = `Bearer ${getAccessToken()}`; headers.Authorization = `Bearer ${getAccessToken()}`;
} }
return { url, options: { ...options, headers } }; return { url, options: { ...options, headers } };
}, },
], ],
// 添加参数序列化配置 // 添加参数序列化配置
paramsSerializer: (params) => { paramsSerializer: (params) => {
const searchParams = new URLSearchParams(); const searchParams = new URLSearchParams();
const appendParams = (key: string, value: any) => { const appendParams = (key: string, value: any) => {
if (Array.isArray(value)) { if (Array.isArray(value)) {
// 特殊处理 createTime 数组，转换为 createTime[0] 和 createTime[1] 格式 // 特殊处理 createTime 数组，转换为 createTime[0] 和 createTime[1] 格式
@@ -235,20 +225,19 @@ export const request: RequestConfig = {
// umi 4 使用 modifyRoutes // umi 4 使用 modifyRoutes
export function patchClientRoutes({ routes }: { routes: any }) { export function patchClientRoutes({ routes }: { routes: any }) {
const { wsCache } = useCache(); const { wsCache } = useCache();
console.log(2222);
const globalMenus = wsCache.get(CACHE_KEY.ROLE_ROUTERS); const globalMenus = wsCache.get(CACHE_KEY.ROLE_ROUTERS);
const routerIndex = routes.findIndex((item: any) => item.path === '/'); const routerIndex = routes.findIndex((item: any) => item.path === '/');
const parentId = routes[routerIndex].id; const parentId = routes[routerIndex].id;
if (globalMenus) { if (globalMenus) {
routes[routerIndex]['routes'].push(...loopMenuItem(globalMenus, parentId)); routes[routerIndex].routes.push(...loopMenuItem(globalMenus, parentId));
} }
} }
const loopMenuItem = (menus: any[], pId: number | string): any[] => { const loopMenuItem = (menus: any[], pId: number | string): any[] => {
return menus.flatMap((item) => { return menus.flatMap((item) => {
let Component: React.ComponentType<any> | null = null; let Component: React.ComponentType<any> | null = null;
console.log(findFirstLeafRoute(item), 'item'); // console.log(findFirstLeafRoute(item), 'item');
if (item.component && item.component.length > 0) { if (item.component && item.component.length > 0) {
// 防止配置了路由，但本地暂未添加对应的页面，产生的错误 // 防止配置了路由，但本地暂未添加对应的页面，产生的错误
Component = React.lazy(() => { Component = React.lazy(() => {
@@ -299,7 +288,7 @@ const loopMenuItem = (menus: any[], pId: number | string): any[] => {
}); });
}; };
const findFirstLeafRoute = (menuItem: any, parent = '/'): string | null => { const _findFirstLeafRoute = (menuItem: any, parent = '/'): string | null => {
// 如果没有子菜单，返回当前路径 // 如果没有子菜单，返回当前路径
if (!menuItem.children || menuItem.children.length === 0) { if (!menuItem.children || menuItem.children.length === 0) {
@@ -308,7 +297,8 @@ const findFirstLeafRoute = (menuItem: any, parent = '/'): string | null => {
// 递归查找第一个叶子节点 // 递归查找第一个叶子节点
for (const child of menuItem.children) { for (const child of menuItem.children) {
const leafRoute = findFirstLeafRoute(child, menuItem.path + '/'); // const leafRoute = findFirstLeafRoute(child, menuItem.path + "/");
const leafRoute = _findFirstLeafRoute(child, `${menuItem.path}/`);
if (leafRoute) { if (leafRoute) {
return leafRoute; return leafRoute;
} }

81
src/components/DrawerForm/index.tsx
View File

@@ -1,18 +1,25 @@
import { CloseOutlined } from '@ant-design/icons';
import type { ProFormColumnsType } from '@ant-design/pro-components'; import type { ProFormColumnsType } from '@ant-design/pro-components';
import { BetaSchemaForm, DrawerForm } from '@ant-design/pro-components'; import { BetaSchemaForm } from '@ant-design/pro-components';
import { Button, type ColProps, Drawer, Space, Typography } from 'antd'; import { Button, type ColProps, Drawer, Space } from 'antd';
import React, { forwardRef, useImperativeHandle } from 'react'; import type { FormInstance } from 'antd/lib';
import React, {
Children,
cloneElement,
forwardRef,
useImperativeHandle,
} from 'react';
const { Title } = Typography;
interface ConfigurableDrawerFormProps { interface ConfigurableDrawerFormProps {
title?: string; title?: string;
columns: ProFormColumnsType[]; columns?: ProFormColumnsType[];
onSubmit?: (values: any) => Promise<boolean>; onSubmit?: (values: any) => Promise<boolean>;
initialValues?: Record<string, any>; initialValues?: Record<string, any>;
width?: number; width?: number | string;
labelCol?: ColProps; labelCol?: ColProps;
wrapperCol?: ColProps; wrapperCol?: ColProps;
footer: React.ReactNode;
children?: React.ReactNode;
bodyStyle: React.CSSProperties;
} }
export interface ConfigurableDrawerFormRef { export interface ConfigurableDrawerFormRef {
@@ -33,6 +40,9 @@ const ConfigurableDrawerForm = forwardRef<
onSubmit, onSubmit,
initialValues, initialValues,
width = 600, width = 600,
footer,
children,
bodyStyle = {},
}, },
ref, ref,
) => { ) => {
@@ -40,7 +50,7 @@ const ConfigurableDrawerForm = forwardRef<
const [formData, setFormData] = React.useState(initialValues || {}); const [formData, setFormData] = React.useState(initialValues || {});
const [loading, setLoading] = React.useState<boolean>(false); const [loading, setLoading] = React.useState<boolean>(false);
// 添加表单实例引用 // 添加表单实例引用
const formRef = React.useRef<any>(null); const formRef = React.useRef<FormInstance>(null);
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
open: (data) => { open: (data) => {
if (data) { if (data) {
@@ -51,7 +61,17 @@ const ConfigurableDrawerForm = forwardRef<
}, },
close: () => setOpen(false), close: () => setOpen(false),
})); }));
const renderChildren = () => {
return Children.map(children, (child) => {
if (React.isValidElement(child)) {
// 使用更安全的方式传递属性，避免 TypeScript 错误
return cloneElement(child, {
...formData,
} as any);
}
return child;
});
};
const handleSubmit = async () => { const handleSubmit = async () => {
try { try {
if (onSubmit) { if (onSubmit) {
@@ -70,31 +90,7 @@ const ConfigurableDrawerForm = forwardRef<
setLoading(false); setLoading(false);
} }
}; };
const customHeader = (
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 0px 16px 0px',
borderBottom: '1px solid #f0f0f0',
marginBottom: '16px',
}}
>
<Title level={4} style={{ margin: 0 }}>
{title}
</Title>
<Button
type="text"
icon={<CloseOutlined />}
onClick={() => setOpen(false)}
style={{
border: 'none',
boxShadow: 'none',
}}
/>
</div>
);
return ( return (
<Drawer <Drawer
title={title} title={title}
@@ -103,6 +99,11 @@ const ConfigurableDrawerForm = forwardRef<
textAlign: 'left', textAlign: 'left',
position: 'relative', position: 'relative',
}, },
body: {
background: 'var(--ant-background-color)',
padding: 'var(--ant-padding-lg)',
...bodyStyle,
},
}} }}
destroyOnHidden destroyOnHidden
closable={true} // 隐藏默认关闭按钮 closable={true} // 隐藏默认关闭按钮
@@ -111,14 +112,20 @@ const ConfigurableDrawerForm = forwardRef<
width={width} width={width}
footer={ footer={
<Space style={{ width: '100%', justifyContent: 'end' }}> <Space style={{ width: '100%', justifyContent: 'end' }}>
{footer ? (
footer
) : (
<>
<Button onClick={() => setOpen(false)}>取消</Button> <Button onClick={() => setOpen(false)}>取消</Button>
<Button loading={loading} type="primary" onClick={handleSubmit}> <Button loading={loading} type="primary" onClick={handleSubmit}>
保存 保存
</Button> </Button>
</>
)}
</Space> </Space>
} }
> >
{/* {customHeader} */} {columns ? (
<BetaSchemaForm <BetaSchemaForm
initialValues={formData} initialValues={formData}
layoutType="Form" layoutType="Form"
@@ -129,6 +136,10 @@ const ConfigurableDrawerForm = forwardRef<
wrapperCol={wrapperCol} wrapperCol={wrapperCol}
submitter={false} submitter={false}
/> />
) : (
renderChildren()
// children
)}
</Drawer> </Drawer>
); );
}, },

146
src/components/EnhancedProTable/index.tsx
View File

@@ -1,33 +1,14 @@
// components/EnhancedProTable/EnhancedProTable.tsx // components/EnhancedProTable/EnhancedProTable.tsx
import { PlusOutlined } from '@ant-design/icons';
import { import {
type ActionType, type ActionType,
type ParamsType, type ParamsType,
ProColumns,
ProTable, ProTable,
TableDropdown,
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import { Button, Space } from 'antd'; import { Button } from 'antd';
import React, { import React, { forwardRef, useCallback } from 'react';
act, import { formatPaginationTotal } from '@/utils/antd/tableHelpers';
forwardRef, import type { BaseRecord, EnhancedProTableProps } from './types';
useCallback,
useMemo,
useRef,
useState,
} from 'react';
import {
buildTableDropdownMenuItems,
formatPaginationTotal,
handleTableDropdownSelect,
} from '@/utils/antd/tableHelpers';
import {
type BaseRecord,
type EnhancedProTableProps,
TableAction,
ToolbarAction,
} from './types';
function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>( function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
props: EnhancedProTableProps<T, U>, props: EnhancedProTableProps<T, U>,
@@ -36,69 +17,15 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
const { const {
columns, columns,
request, request,
actions = [], components,
permissions = [], search = {},
checkPermission = () => true,
toolbarActions, toolbarActions,
showIndex = true, rowKey = 'id',
showSelection = true, pagination = true,
showActions = true,
maxActionCount = 2,
onAdd,
onEdit,
onDelete,
onView,
onExport,
customToolbarRender,
customActionRender,
...restProps ...restProps
} = props; } = props;
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); const toolBarRender = useCallback(() => {
const [selectedRows, setSelectedRows] = useState<T[]>([]);
// 行选择配置
const rowSelection = useMemo(() => {
if (!showSelection) return undefined;
return {
selectedRowKeys,
onChange: (keys: React.Key[], rows: T[]) => {
setSelectedRowKeys(keys);
setSelectedRows(rows);
},
getCheckboxProps: (record: T) => ({
name: record.id?.toString(),
}),
};
}, [showSelection, selectedRowKeys]);
// 表格提醒渲染
const tableAlertRender = useCallback(
({ selectedRowKeys, onCleanSelected }: any) => {
if (!showSelection || selectedRowKeys.length === 0) return false;
return (
<Space size={24}>
<span>
已选 {selectedRowKeys.length} 项
<a style={{ marginLeft: 8 }} onClick={onCleanSelected}>
取消选择
</a>
</span>
</Space>
);
},
[showSelection],
);
const toolBarRender = useCallback(
(
action: ActionType | undefined,
rows: {
selectedRowKeys?: (string | number)[] | undefined;
selectedRows?: T[] | undefined;
},
) => {
const toolbarElements = const toolbarElements =
toolbarActions?.map((action) => { toolbarActions?.map((action) => {
return ( return (
@@ -107,60 +34,59 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
type={action.type} type={action.type}
danger={action.danger} danger={action.danger}
disabled={action.disabled} disabled={action.disabled}
icon={<PlusOutlined />} // icon={action.icon ?? <PlusOutlined />}
onClick={() => action.onClick(selectedRowKeys, selectedRows)} onClick={() => action.onClick()}
> >
{action.label} {action.label}
</Button> </Button>
); );
}) || []; }) || [];
// return [
// <Button
// key="button"
// icon={<PlusOutlined />}
// onClick={}
// type="primary"
// >
// 新建
// </Button>,
// ];
return toolbarElements; return toolbarElements;
}, }, [toolbarActions]);
[toolbarActions],
);
return ( return (
<ProTable<T, U> <ProTable<T, U>
{...restProps} {...restProps}
columns={columns} columns={columns}
actionRef={ref} actionRef={ref}
request={request} request={request}
rowKey="id" rowKey={rowKey}
rowSelection={rowSelection} rowSelection={props.rowSelection ?? false}
toolBarRender={toolBarRender} toolBarRender={toolBarRender}
manualRequest={false} manualRequest={false}
showSorterTooltip showSorterTooltip
tableAlertRender={tableAlertRender} // scroll={{ x: "max-content" }}
// tableAlertOptionRender={tableAlertOptionRender} scroll={{ x: 1200 }}
scroll={{ x: 'max-content' }} components={components}
search={{ search={
search
? {
labelWidth: 'auto', labelWidth: 'auto',
defaultCollapsed: false, defaultCollapsed: false,
...restProps.search, ...search,
}} }
options={{ : false
}
options={
search
? {
fullScreen: true, fullScreen: true,
reload: true, reload: true,
setting: true, setting: true,
density: true, density: true,
...restProps.options, ...restProps.options,
}} }
pagination={{ : false
}
pagination={
pagination
? {
showSizeChanger: true, showSizeChanger: true,
showQuickJumper: true, showQuickJumper: true,
pageSize: 10, pageSize: 10,
showTotal: formatPaginationTotal, showTotal: formatPaginationTotal,
...restProps.pagination, }
}} : false
}
/> />
); );
} }

29
src/components/EnhancedProTable/types.ts
View File

@@ -1,20 +1,19 @@
// components/EnhancedProTable/types.ts // components/EnhancedProTable/types.ts
import { import type {
ProTableProps,
ProColumns,
ActionType, ActionType,
} from "@ant-design/pro-components"; ProColumns,
import { ButtonProps } from "antd"; ProTableProps,
import React from "react"; } from '@ant-design/pro-components';
import type { ButtonProps } from 'antd';
import React from 'react';
export interface BaseRecord { export interface BaseRecord {
id: number;
[key: string]: any; [key: string]: any;
} }
export interface ApiResponse<T> { export interface ApiResponse<T> {
data: T[]; data: T[];
total: number; total?: number;
success: boolean; success: boolean;
message?: string; message?: string;
} }
@@ -32,7 +31,7 @@ export interface TableAction<T = any> {
key: string; key: string;
label: string; label: string;
icon?: React.ReactNode; icon?: React.ReactNode;
type?: ButtonProps["type"]; type?: ButtonProps['type'];
danger?: boolean; danger?: boolean;
disabled?: (record: T) => boolean; disabled?: (record: T) => boolean;
visible?: (record: T) => boolean; visible?: (record: T) => boolean;
@@ -44,7 +43,7 @@ export interface ToolbarAction {
key: string; key: string;
label: string; label: string;
icon?: React.ReactNode; icon?: React.ReactNode;
type?: ButtonProps["type"]; type?: ButtonProps['type'];
danger?: boolean; danger?: boolean;
disabled?: boolean; disabled?: boolean;
onClick: (selectedKeys?: React.Key[], selectedRows?: any[]) => void; onClick: (selectedKeys?: React.Key[], selectedRows?: any[]) => void;
@@ -53,12 +52,14 @@ export interface ToolbarAction {
} }
export interface EnhancedProTableProps<T extends BaseRecord, U = any> export interface EnhancedProTableProps<T extends BaseRecord, U = any>
extends Omit<ProTableProps<T, U>, "columns" | "request" | "toolBarRender"> { extends Omit<ProTableProps<T, U>, 'columns' | 'request' | 'toolBarRender'> {
columns: ProColumns<T>[]; columns: ProColumns<T>[];
request?: ( request?: (
params: U & { current?: number; pageSize?: number } params: U & { current?: number; pageSize?: number },
) => Promise<ApiResponse<T>>; ) => Promise<ApiResponse<T>>;
loading?: boolean; // 添加 loading 属性 loading?: boolean; // 添加 loading 属性
enableRowClick?: boolean; //开启行内点击
clickableRowClassName?: string;
actions?: TableAction<T>[]; actions?: TableAction<T>[];
toolbarActions?: ToolbarAction[]; toolbarActions?: ToolbarAction[];
permissions?: string[]; permissions?: string[];
@@ -73,11 +74,11 @@ export interface EnhancedProTableProps<T extends BaseRecord, U = any>
onView?: (record: T) => void; onView?: (record: T) => void;
onExport?: (selectedRows: T[]) => void; onExport?: (selectedRows: T[]) => void;
customToolbarRender?: ( customToolbarRender?: (
defaultActions: React.ReactNode[] defaultActions: React.ReactNode[],
) => React.ReactNode[]; ) => React.ReactNode[];
customActionRender?: ( customActionRender?: (
record: T, record: T,
defaultActions: React.ReactNode[] defaultActions: React.ReactNode[],
) => React.ReactNode[]; ) => React.ReactNode[];
} }

24
src/components/Footer/index.tsx
View File

@@ -1,31 +1,31 @@
import { GithubOutlined } from "@ant-design/icons"; import { GithubOutlined } from '@ant-design/icons';
import { DefaultFooter } from "@ant-design/pro-components"; import { DefaultFooter } from '@ant-design/pro-components';
import React from "react"; import React from 'react';
const Footer: React.FC = () => { const Footer: React.FC = () => {
return ( return (
<DefaultFooter <DefaultFooter
style={{ style={{
background: "none", background: 'none',
}} }}
copyright="20250923" copyright="20250923"
links={[ links={[
{ {
key: "by", key: 'by',
title: "百业到家", title: '百业到家',
href: "/welcome", href: '/welcome',
blankTarget: true, blankTarget: true,
}, },
{ {
key: "github", key: 'github',
title: <GithubOutlined />, title: <GithubOutlined />,
href: "https://github.com/ant-design/ant-design-pro", href: 'https://github.com/ant-design/ant-design-pro',
blankTarget: true, blankTarget: true,
}, },
{ {
key: "Ant Design", key: 'bydj',
title: "Ant Design", title: '宠悦',
href: "https://ant.design", href: 'https://ant.design',
blankTarget: true, blankTarget: true,
}, },
]} ]}

301
src/components/GroupTag/GroupTagCore.less Normal file
View File

@@ -0,0 +1,301 @@
// GroupTagCore.less
.group-tag-core {
width: 100%;
border: 1px solid #f0f0f0;
border-radius: 6px;
overflow: hidden;
// 编辑模式下的整体样式
&.edit-mode {
.search-wrapper {
.ant-input-affix-wrapper {
background-color: #f5f5f5;
.ant-input {
background-color: #f5f5f5;
cursor: not-allowed;
}
}
}
}
.search-wrapper {
padding: 8px;
border-bottom: 1px solid #f0f0f0;
.ant-input-affix-wrapper {
width: 100%;
}
}
.content-wrapper {
flex: 1;
overflow: hidden;
.loading-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 200px;
text-align: center;
}
.split-layout {
display: flex;
height: 100%;
.groups-panel {
width: 200px;
border-right: 1px solid #f0f0f0;
display: flex;
flex-direction: column;
.panel-header {
padding: 8px 12px;
background-color: #fafafa;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 14px;
}
.groups-list {
overflow: auto;
height: 40vh;
.group-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
cursor: pointer;
transition: background-color 0.2s;
border-bottom: 1px solid #f5f5f5;
&:hover {
background-color: #f5f5f5;
}
&.active {
background-color: #e6f7ff;
border-color: #91d5ff;
}
&.editing {
background-color: #fff7e6;
cursor: default;
&:hover {
background-color: #fff7e6;
}
}
&.disabled {
cursor: not-allowed;
opacity: 0.6;
&:hover {
background-color: inherit;
}
&.active:hover {
background-color: #e6f7ff;
}
}
.group-content {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
.group-name {
font-size: 13px;
color: #262626;
}
.edit-input-wrapper {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
.ant-input {
flex: 1;
font-size: 12px;
}
.edit-actions {
display: flex;
gap: 2px;
.ant-btn {
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
.anticon {
font-size: 10px;
}
}
}
}
}
.ant-checkbox-wrapper {
margin-left: 8px;
}
}
}
}
.tags-panel {
flex: 1;
display: flex;
flex-direction: column;
.panel-header {
padding: 8px 12px;
background-color: #fafafa;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 14px;
}
.tags-list {
overflow: auto;
height: 40vh;
padding: 4px 0;
.loading-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}
.infinite-scroll-container {
height: 50vh !important;
overflow-y: auto;
}
.tag-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 12px;
transition: background-color 0.2s;
&:hover {
background-color: #f5f5f5;
}
&.editing {
background-color: #fff7e6;
&:hover {
background-color: #fff7e6;
}
}
&.disabled {
opacity: 0.6;
&:hover {
background-color: inherit;
}
}
.ant-checkbox-wrapper {
flex: 1;
span:last-child {
color: #595959;
font-size: 13px;
}
}
.tag-name-only {
flex: 1;
color: #8c8c8c;
font-size: 13px;
.anticon {
color: #bfbfbf;
}
}
.tag-actions {
display: flex;
gap: 2px;
opacity: 0;
transition: opacity 0.2s;
.ant-btn {
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
.anticon {
font-size: 10px;
}
}
}
&:hover .tag-actions {
opacity: 1;
}
.edit-input-wrapper {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
.ant-input {
flex: 1;
font-size: 12px;
}
.edit-actions {
display: flex;
gap: 2px;
.ant-btn {
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
.anticon {
font-size: 10px;
}
}
}
}
}
.ant-empty {
padding: 40px 20px;
.ant-empty-description {
color: #8c8c8c;
font-size: 12px;
}
}
}
}
}
}
}

343
src/components/GroupTag/GroupTagCore.tsx Normal file
View File

@@ -0,0 +1,343 @@
// GroupTagCore.tsx - 修复缺失函数和API参数
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import {
Button,
type CheckboxChangeEvent,
Input,
message,
Space,
Spin,
} from 'antd';
import React, { useCallback, useEffect, useState } from 'react';
import type { GroupItem, GroupTagCoreProps, TagItem } from './types';
import './GroupTagCore.less';
import { renderGroups, renderTags } from './component';
import TagsModal from './TagsModal';
const GroupTagCore: React.FC<GroupTagCoreProps> = (props) => {
const {
requset: { groupsApi, tagsApi },
editable = false,
value = [],
onChange,
} = props;
const [isInEditMode, _setIsInEditMode] = useState<boolean>(false);
// 编辑状态
const [loading, setLoading] = useState<boolean>(false);
const [loadingTags, setLoadingTags] = useState<boolean>(false);
const [groups, setGroups] = useState<GroupItem[]>([]);
const [currentGroup, setCurrentGroup] = useState<GroupItem>();
const [modalType, setModalType] = useState<'add' | 'edit' | 'delete'>();
const [type, setType] = useState<'group' | 'tag'>('group');
const [visible, setVisible] = useState<boolean>(false);
const [name, setName] = useState<string>('');
const [total, setTotal] = useState<number>(0);
const [currentId, setCurrentId] = useState<number>();
const [tagsModalValue, setTagsModalValue] = useState<{
tagName?: string;
groupIds?: number[];
id?: number;
}>({});
const [pageNo, setPageNo] = useState<number>(1);
const fetchGroups = useCallback(async () => {
try {
setLoading(true);
const groups = await groupsApi.get();
groups.length && setCurrentGroup(groups[0]);
setGroups(groups);
setCurrentId(groups[0].id);
} finally {
setLoading(false);
}
}, [groupsApi]);
const fetchTagsApi = useCallback(async () => {
try {
setLoadingTags(true);
const res = await tagsApi.get({ groupId: currentId, pageNo: 1 });
const newGroup = { ...currentGroup, tags: res.list };
const newData = groups.map((g) => (g.id === currentId ? newGroup : g));
setGroups(newData as GroupItem[]);
setCurrentGroup(newGroup as GroupItem);
setTotal(res.total);
setPageNo(1);
} finally {
setLoadingTags(false);
}
}, [tagsApi, groups, currentId]);
useEffect(() => {
fetchGroups();
}, []);
useEffect(() => {
if (currentId) {
fetchTagsApi();
}
}, [currentId]);
const onGroupClick = (group: GroupItem) => {
if (currentId !== group.id) {
setCurrentId(group.id);
setCurrentGroup(group);
}
};
useEffect(() => {
if (modalType === 'edit' && visible) {
if (type === 'group' && currentGroup) {
setName(currentGroup.groupName);
} else if (type === 'tag' && tagsModalValue) {
setName(tagsModalValue.tagName || '');
}
}
if (modalType === 'add') {
setName('');
}
}, [type, modalType, currentGroup, tagsModalValue, visible]);
const handleGroup = (type: 'add' | 'edit' | 'delete') => {
setType('group');
setModalType(type);
if (type === 'add' || type === 'edit') {
setVisible(true);
}
};
const handleTag = (type: 'add' | 'edit' | 'delete', tag?: TagItem) => {
setType('tag');
setModalType(type);
if (type === 'add' || type === 'edit') {
setVisible(true);
}
if (type === 'edit') {
setTagsModalValue({ tagName: tag?.tagName, id: tag?.id });
}
};
const handleAdd = async (value: {
groupName?: string;
groupIds?: number[];
tagName?: string;
}) => {
if (type === 'group') {
const id = await groupsApi.create({ groupName: value.groupName });
setGroups([{ id, groupName: value.groupName || '' }, ...groups]);
} else {
await tagsApi.create(value);
message.success('添加成功');
fetchTagsApi();
}
setVisible(false);
};
const handleEdit = async (value: {
tagName?: string;
groupIds?: number[];
}) => {
if (type === 'group') {
try {
setLoading(true);
await groupsApi.update({ id: currentGroup?.id, groupName: name });
const newData = groups.map((item) => {
if (item.id === currentGroup?.id) {
const itemData = { ...item, groupName: name };
setCurrentGroup(itemData);
return itemData;
} else {
return item;
}
});
setGroups(newData);
} finally {
setLoading(false);
}
} else {
await tagsApi.update({
groupIds: [currentGroup?.id],
id: tagsModalValue?.id,
...value,
});
message.success('修改成功');
const newTag = currentGroup?.tags?.map((tag) => {
if (tag.id === tagsModalValue?.id) {
return { ...tag, tagName: value.tagName };
} else {
return tag;
}
});
const newGroup = { ...currentGroup, tags: newTag };
setCurrentGroup(newGroup as GroupItem);
}
setVisible(false);
};
const handleDelete = async (type: 'group' | 'tag', id: number) => {
if (type === 'group' && currentGroup) {
await groupsApi.delete(id);
const newGroups = groups.filter((group) => group.id !== id);
setGroups(newGroups);
if (id === currentId) {
setCurrentId(newGroups[0].id);
setCurrentGroup(newGroups[0]);
}
} else {
tagsApi.delete(id);
}
};
const handleConfirm = useCallback(
async (value: { tagName?: string; groupIds?: number[] }) => {
if (modalType === 'add') {
await handleAdd(value);
}
if (modalType === 'edit') {
await handleEdit(value);
}
},
[visible, type, modalType],
);
const handleCancle = useCallback(() => {
setVisible(false);
}, [visible]);
const onTagItemChange = (tag: TagItem, e: CheckboxChangeEvent) => {
if (e.target.checked) {
const data = [...value, tag];
onChange?.(data);
} else if (!editable) {
const data = value.filter((item) => item.id !== tag.id);
onChange?.(data);
}
};
const loadMoreData = async () => {
const res = await tagsApi.get({ groupId: currentId, pageNo: pageNo + 1 });
if (res.list.length === 0) {
return;
}
const newGroup = {
...currentGroup,
tags: [...(currentGroup?.tags || []), ...res.list],
};
setCurrentGroup(newGroup as GroupItem);
setPageNo((prev) => prev + 1);
};
const onSearchTags = async (e: React.KeyboardEvent<HTMLInputElement>) => {
const searchValue = (e.target as HTMLInputElement).value;
const res = await tagsApi.get({
groupId: currentId,
pageNo: 1,
tagName: searchValue,
});
const newGroup = {
...currentGroup,
tags: res.list,
};
document.getElementById('scrollableDiv')?.scrollTo(0, 0);
setCurrentGroup(newGroup as GroupItem);
setPageNo(1);
};
return (
<div className={`group-tag-core`}>
<div className="search-wrapper">
<Input
prefix={<SearchOutlined />}
placeholder="搜索"
onPressEnter={onSearchTags}
allowClear
disabled={isInEditMode}
/>
</div>
<div className="content-wrapper">
{loading ? (
<div className="loading-wrapper">
<Spin />
<div style={{ marginTop: 8 }}>加载数据中...</div>
</div>
) : (
<div className="split-layout">
{/* 左侧分组列表 */}
<div className="groups-panel">
<div className="panel-header">
<span>分组</span>
{editable && !isInEditMode && (
<Button
type="text"
size="small"
icon={<PlusOutlined />}
onClick={() => handleGroup('add')}
>
添加
</Button>
)}
</div>
<div className="groups-list">
{renderGroups({
editable,
groups,
currentId,
onGroupClick,
onEdit: () => handleGroup('edit'),
onDelete: (id) => handleDelete('group', id),
})}
</div>
</div>
{/* 右侧标签列表 */}
<div className="tags-panel">
<div className="panel-header">
<span>标签</span>
<Space>
{editable && currentGroup && !isInEditMode && (
<Button
type="text"
size="small"
icon={<PlusOutlined />}
onClick={() => handleTag('add')}
>
添加
</Button>
)}
</Space>
</div>
<div className="tags-list" id="scrollableDiv">
<Spin spinning={loadingTags}>
{renderTags({
editable,
value,
list: currentGroup?.tags ?? [],
total,
loadMoreData,
onEdit: (tag) => handleTag('edit', tag),
onDelete: (id) => handleDelete('tag', id),
onTagItemChange: onTagItemChange,
})}
</Spin>
</div>
</div>
</div>
)}
</div>
{/* 添加标签Modal */}
<TagsModal
value={tagsModalValue}
visible={visible}
type={type}
modalType={modalType}
onCancel={handleCancle}
onConfirm={handleConfirm}
groups={groups}
/>
</div>
);
};
export default GroupTagCore;

63
src/components/GroupTag/GroupTagModal.tsx Normal file
View File

@@ -0,0 +1,63 @@
// GroupTagModal.tsx - 修复死循环问题
import { Modal } from 'antd';
import React, { useCallback, useEffect, useState } from 'react';
import GroupTagCore from './GroupTagCore';
import type { GroupTagModalProps, TagItem } from './types';
const GroupTagModal: React.FC<GroupTagModalProps> = ({
visible,
title,
width,
editable,
request,
onCancel,
onChange,
}) => {
const [data, setData] = useState<TagItem[]>([]);
const handleOk = () => {
if (onChange) {
// const ids = data.map((item) => item.id);
onChange(data);
}
onCancel();
};
useEffect(() => {
if (!visible) {
setData([]);
}
}, [visible]);
const handleChange = useCallback(
(data: TagItem[]) => {
setData(data);
},
[data],
);
return (
<Modal
title={title}
open={visible}
onCancel={onCancel}
onOk={handleOk}
width={width}
okText="确定"
cancelText="取消"
destroyOnHidden
maskClosable={false}
>
<GroupTagCore
value={data}
requset={request}
editable={editable}
onChange={handleChange}
/>
</Modal>
);
};
export default GroupTagModal;

400
src/components/GroupTag/GroupTagSelect.less Normal file
View File

@@ -0,0 +1,400 @@
// GroupTagSelect.less - 添加编辑模式样式
.group-tag-select-wrapper {
width: 100%;
.group-tag-select {
width: 100%;
.ant-select-selector {
min-height: 32px;
}
.selected-tag {
margin: 2px;
font-size: 12px;
line-height: 20px;
border-radius: 4px;
}
}
&.disabled {
.selected-tag {
background-color: #f0f0f0;
border-color: #d9d9d9;
color: rgba(0, 0, 0, 0.25);
}
}
}
.group-tag-select-dropdown-wrapper {
.ant-select-dropdown {
padding: 0;
width: 600px !important;
min-width: 600px !important;
}
}
.group-tag-select-dropdown {
padding: 0;
width: 100%;
// 编辑模式下的整体样式
&.edit-mode {
.search-wrapper {
.ant-input-affix-wrapper {
background-color: #f5f5f5;
.ant-input {
background-color: #f5f5f5;
cursor: not-allowed;
}
}
}
}
.search-wrapper {
padding: 8px;
border-bottom: 1px solid #f0f0f0;
.ant-input-affix-wrapper {
width: 100%;
}
}
.content-wrapper {
height: 400px;
overflow: hidden;
.loading-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
}
.split-layout {
display: flex;
height: 100%;
.groups-panel {
width: 200px;
border-right: 1px solid #f0f0f0;
display: flex;
flex-direction: column;
.panel-header {
padding: 8px 12px;
background-color: #fafafa;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 14px;
}
.groups-list {
flex: 1;
overflow-y: auto;
.group-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
cursor: pointer;
transition: background-color 0.2s;
border-bottom: 1px solid #f5f5f5;
&:hover {
background-color: #f5f5f5;
}
&.active {
background-color: #e6f7ff;
border-color: #91d5ff;
}
// 编辑状态样式
&.editing {
background-color: #fff7e6;
cursor: default;
&:hover {
background-color: #fff7e6;
}
}
// 禁用状态样式
&.disabled {
cursor: not-allowed;
opacity: 0.6;
&:hover {
background-color: inherit;
}
&.active:hover {
background-color: #e6f7ff;
}
}
.group-content {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
.group-name {
font-size: 13px;
color: #262626;
}
// 编辑输入框样式
.edit-input-wrapper {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
.ant-input {
flex: 1;
font-size: 12px;
}
.edit-actions {
display: flex;
gap: 2px;
.ant-btn {
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
.anticon {
font-size: 10px;
}
}
}
}
}
.ant-checkbox-wrapper {
margin-left: 8px;
}
}
}
}
.tags-panel {
flex: 1;
display: flex;
flex-direction: column;
.panel-header {
padding: 8px 12px;
background-color: #fafafa;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 14px;
}
.tags-list {
flex: 1;
overflow-y: auto;
padding: 4px 0;
.loading-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}
.tag-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 12px;
transition: background-color 0.2s;
&:hover {
background-color: #f5f5f5;
}
// 编辑状态样式
&.editing {
background-color: #fff7e6;
&:hover {
background-color: #fff7e6;
}
}
// 禁用状态样式
&.disabled {
opacity: 0.6;
&:hover {
background-color: inherit;
}
}
.ant-checkbox-wrapper {
flex: 1;
span:last-child {
color: #595959;
font-size: 13px;
}
}
// 编辑状态下只显示标签名称的样式
.tag-name-only {
flex: 1;
color: #8c8c8c;
font-size: 13px;
.anticon {
color: #bfbfbf;
}
}
// 标签操作按钮
.tag-actions {
display: flex;
gap: 2px;
opacity: 0;
transition: opacity 0.2s;
.ant-btn {
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
.anticon {
font-size: 10px;
}
}
}
&:hover .tag-actions {
opacity: 1;
}
// 编辑输入框样式
.edit-input-wrapper {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
.ant-input {
flex: 1;
font-size: 12px;
}
.edit-actions {
display: flex;
gap: 2px;
.ant-btn {
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
.anticon {
font-size: 10px;
}
}
}
}
}
.ant-empty {
padding: 40px 20px;
.ant-empty-description {
color: #8c8c8c;
font-size: 12px;
}
}
}
}
}
}
}
// 响应式设计
@media (max-width: 768px) {
.group-tag-select-dropdown-wrapper {
.ant-select-dropdown {
width: 90vw !important;
min-width: 320px !important;
}
}
.group-tag-select-dropdown {
.content-wrapper {
height: 300px;
.split-layout {
.groups-panel {
width: 120px;
.panel-header {
font-size: 12px;
padding: 6px 8px;
}
.groups-list {
.group-item {
padding: 6px 8px;
.group-name {
font-size: 12px;
}
}
}
}
.tags-panel {
.panel-header {
font-size: 12px;
padding: 6px 8px;
}
.tags-list {
.tag-item {
padding: 4px 8px;
.ant-checkbox-wrapper {
span:last-child {
font-size: 12px;
}
}
.tag-name-only {
font-size: 12px;
}
}
}
}
}
}
}
}

100
src/components/GroupTag/GroupTagSelect.tsx Normal file
View File

@@ -0,0 +1,100 @@
// GroupTagSelect.tsx - 适配真实数据结构
import { Select, Tag } from 'antd';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import GroupTagCore from './GroupTagCore';
import type { GroupTagSelectProps, TagItem } from './types';
import './GroupTagSelect.less';
const GroupTagSelect: React.FC<GroupTagSelectProps> = ({
value = [],
onChange,
placeholder = '请选择标签',
className = '',
request,
editable = false,
}) => {
const [dropdownVisible, setDropdownVisible] = useState(false);
const [selectedTags, setSelectedTags] = useState<TagItem[]>([]);
useEffect(() => {
const v = selectedTags.map((tag) => tag.id);
onChange?.(v);
}, [selectedTags]);
const onTagsItem = (value: TagItem[]) => {
console.log(value, 'value');
setSelectedTags(value);
};
// 渲染下拉内容
const dropdownRender = useCallback(
() => (
<GroupTagCore
value={selectedTags}
requset={request}
editable={false}
onChange={onTagsItem}
/>
),
[selectedTags, request, editable],
);
// const
// 获取选中标签的详细信息
const options = useMemo(() => {
return selectedTags.map((item: TagItem) => ({
...item,
label: item.tagName,
value: item.id,
}));
}, [selectedTags]);
return (
<div className={`group-tag-select-wrapper ${className}`}>
<Select
mode="multiple"
value={value}
fieldNames={{ label: 'tagName', value: 'id' }}
onChange={(newValue) => {
// console.log(newValue, "newValue");
const selectedItems = options.filter((option) =>
newValue.includes(option.id),
);
setSelectedTags(selectedItems);
onChange?.(selectedItems as unknown as number[]);
}}
placeholder={placeholder}
className="group-tag-select"
popupRender={dropdownRender}
classNames={{
popup: {
root: 'group-tag-select-dropdown-wrapper',
},
}}
popupMatchSelectWidth={false}
dropdownStyle={{
width: 600,
minWidth: 600,
}}
options={options}
tagRender={(props) => {
const { label, closable, onClose } = props;
console.log(props);
return (
<Tag closable={closable} onClose={onClose} className="selected-tag">
{label}
</Tag>
);
}}
showSearch={false}
onSelect={() => {}}
onDeselect={() => {}}
allowClear={true}
onClear={() => setSelectedTags([])}
open={dropdownVisible}
onOpenChange={setDropdownVisible}
/>
</div>
);
};
export default GroupTagSelect;

98
src/components/GroupTag/TagsModal.tsx Normal file
View File

@@ -0,0 +1,98 @@
import { Form, Input, Modal, Select } from 'antd';
import { useEffect, useState } from 'react';
interface TagsModalProps {
visible: boolean;
type: 'group' | 'tag';
modalType?: 'add' | 'edit' | 'delete';
onCancel: () => void;
groups: { id: number; groupName: string }[];
value: {
id?: number;
tagName?: string;
groupIds?: number[];
groupName?: string;
};
onConfirm: (values: { tagName: string; groupIds?: number[] }) => void;
}
const TagsModal = (props: TagsModalProps) => {
const [form] = Form.useForm();
const [loading, setLoading] = useState(false);
const { value, visible, type, modalType, groups, onCancel, onConfirm } =
props;
useEffect(() => {
form.setFieldsValue(value);
return () => {
form.resetFields();
setLoading(false);
};
}, [visible, value]);
const handleOk = async () => {
try {
setLoading(true);
const values = await form.validateFields();
await onConfirm(values);
} finally {
setLoading(false);
}
};
return (
<Modal
title={`${modalType === 'add' ? '添加' : '编辑'}${
type === 'group' ? '分组' : '标签'
}`}
open={visible}
onOk={handleOk}
onCancel={onCancel}
okText="确定"
confirmLoading={loading}
cancelText="取消"
destroyOnHidden
width={400}
>
<Form
name="form"
form={form}
labelCol={{ span: 4 }}
wrapperCol={{ span: 20 }}
style={{ maxWidth: 600, marginTop: 30 }}
>
{type === 'tag' && modalType === 'add' && (
<Form.Item
label="分组"
name="groupIds"
rules={[{ required: true, message: '请选择分组' }]}
>
<Select
mode="multiple"
style={{ width: '100%', marginBottom: 10 }}
options={groups}
placeholder="请选择分组"
fieldNames={{ label: 'groupName', value: 'id' }}
></Select>
</Form.Item>
)}
{type === 'tag' ? (
<Form.Item
label="标签"
name="tagName"
rules={[{ required: true, message: '请输入标签' }]}
>
<Input placeholder="请输入标签" />
</Form.Item>
) : (
<Form.Item
label="分组"
name="groupName"
rules={[{ required: true, message: '请输入分组' }]}
>
<Input placeholder="请输入分组" />
</Form.Item>
)}
</Form>
</Modal>
);
};
export default TagsModal;

179
src/components/GroupTag/component.tsx Normal file
View File

@@ -0,0 +1,179 @@
import { DeleteFilled, EditFilled } from '@ant-design/icons';
import {
Button,
Checkbox,
type CheckboxChangeEvent,
Divider,
Empty,
List,
Skeleton,
} from 'antd';
import InfiniteScroll from 'react-infinite-scroll-component';
import type { GroupItem, TagItem } from './types';
interface GroupsProps {
groups: GroupItem[];
onGroupClick: (group: GroupItem) => void;
currentId?: number;
editable?: boolean;
total?: number;
loadMoreData?: () => void;
pageSize?: number;
onEdit?: () => void;
onDelete?: (id: number) => void;
}
export const renderGroups = (data: GroupsProps) => {
const {
groups,
currentId,
total = groups.length,
onEdit,
onDelete,
loadMoreData,
onGroupClick,
pageSize = 10,
editable = false,
} = data;
const hasMore = groups.length < total * pageSize;
if (groups.length === 0) {
return (
<Empty description="暂无分组" image={Empty.PRESENTED_IMAGE_SIMPLE} />
);
}
return (
<InfiniteScroll
dataLength={groups.length}
next={loadMoreData ? loadMoreData : () => {}}
hasMore={loadMoreData ? hasMore : false}
loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
endMessage={loadMoreData ? <Divider plain>我已经是底线了</Divider> : ''}
scrollableTarget="scrollableDiv"
>
<List
dataSource={groups}
renderItem={(item) => (
<List.Item
key={item.id}
onClick={() => onGroupClick(item)}
className={`group-item ${currentId === item.id ? 'active' : ''}`}
>
<div>{item.groupName}</div>
{editable && (
<div className="group-options">
<Button
type="link"
size="small"
icon={<EditFilled />}
onClick={(e) => {
e.stopPropagation();
onEdit?.();
}}
/>
<Button
type="link"
size="small"
icon={<DeleteFilled />}
onClick={(e) => {
e.stopPropagation();
onDelete?.(item.id);
}}
/>
</div>
)}
</List.Item>
)}
/>
</InfiniteScroll>
);
};
interface GroupTagProps {
list: TagItem[];
total: number;
// onTagItemClick: (tag: TagItem) => void;
onEdit?: (tag: TagItem) => Promise<void> | void;
loadMoreData: () => void;
onDelete?: (id: number) => void;
editable?: boolean;
pageSize?: number;
value: TagItem[];
onTagItemChange: (tag: TagItem, e: CheckboxChangeEvent) => void;
}
export const renderTags = (data: GroupTagProps) => {
const {
list,
total = list.length,
loadMoreData,
onEdit,
onDelete,
onTagItemChange,
editable,
value,
} = data;
if (list.length === 0) {
return (
<Empty description="暂无分组" image={Empty.PRESENTED_IMAGE_SIMPLE} />
);
}
console.log(list.length);
return (
<InfiniteScroll
dataLength={list.length}
next={loadMoreData}
hasMore={list.length < total}
loader={<Skeleton paragraph={{ rows: 1 }} active />}
endMessage={<Divider plain>我已经是底线了</Divider>}
scrollableTarget="scrollableDiv"
>
<List
dataSource={list}
renderItem={(item) => (
<List.Item
key={item.id}
// onClick={() => onTagItemClick(item)}
className="tag-item"
>
<div>
{!editable && (
<Checkbox
checked={
// value.find((tag) => tag.id === item.id) ? true : false
!!value.find((tag) => tag.id === item.id)
}
onChange={(e) => onTagItemChange(item, e)}
style={{ marginRight: '8px' }}
/>
)}
{item.tagName}
</div>
{editable && (
<div className="group-options">
<Button
type="link"
size="small"
icon={<EditFilled />}
onClick={(e) => {
e.stopPropagation();
onEdit?.(item);
// onEditGroup(item.id);
}}
/>
<Button
type="link"
size="small"
icon={<DeleteFilled />}
onClick={(e) => {
e.stopPropagation();
onDelete?.(item.id);
}}
/>
</div>
)}
</List.Item>
)}
/>
</InfiniteScroll>
);
};

96
src/components/GroupTag/types.ts Normal file
View File

@@ -0,0 +1,96 @@
// types.ts
export interface TagItem {
id: number;
tagName: string;
createTime: string;
groupId?: number; // 可选，因为API返回的数据可能没有这个字段
}
export interface GroupItem {
id: number;
groupName: string;
createTime?: string;
tags?: TagItem[];
}
// API响应类型
export interface TagsResponse {
list: TagItem[];
total: number;
}
// export interface GroupsResponse {
// data: GroupItem[];
// }
// 核心组件的Props
export interface GroupTagCoreProps {
// groups: GroupItem[];
requset: RequsetConfig;
height?: number;
editable?: boolean;
onChange?: (value: TagItem[]) => void;
value: TagItem[];
// selectedTags: number[];
// onTagChange?: (selectedTags: number[]) => void;
// onGroupClick?: (groupId: number) => void;
// onLoadMoreTags?: (groupId: number, page: number) => Promise<TagsResponse>;
// loading?: boolean;
// loadingGroups?: Set<number>;
// loadingMoreTags?: Set<number>;
// editable?: boolean;
// onAddGroup?: () => void;
// onAddTag?: (groupId: number) => void;
// onDeleteGroup?: (groupId: number) => Promise<void> | void;
// onDeleteTag?: (tagId: number) => Promise<void> | void;
// onEditGroup?: (groupId: number, newName: string) => Promise<void> | void;
// onEditTag?: (tagId: number, newName: string) => Promise<void> | void;
// className?: string;
// height?: number;
// showSearch?: boolean;
// pageSize?: number;
}
interface RequsetConfig<T = any> {
groupsApi: {
get: (params?: T) => Promise<any>;
create: (params: any) => Promise<any>;
delete: (id: number) => Promise<any>;
update: (params: T) => Promise<any>;
};
tagsApi: {
get: (params?: T) => Promise<any>;
create: (params: T) => Promise<any>;
delete: (id: number) => Promise<any>;
update: (params: T) => Promise<any>;
};
}
// Select组件的Props
export interface GroupTagSelectProps {
value?: number[];
onChange?: (value: number[]) => void;
placeholder?: string;
className?: string;
request: RequsetConfig;
editable?: boolean;
// onAddGroup?: (groupName: string) => Promise<void> | void;
// onAddTag?: (groupId: number, tagName: string) => Promise<void> | void;
// onDeleteGroup?: (groupId: number) => Promise<void> | void;
// onDeleteTag?: (tagId: number) => Promise<void> | void;
// pageSize?: number;
}
// Modal组件的Props
export interface GroupTagModalProps {
visible: boolean;
editable?: boolean;
onChange?: (value: TagItem[]) => void;
className?: string;
onCancel: () => void;
request: RequsetConfig;
onOk?: (selectedTags: TagItem[]) => void;
title?: string;
width?: number;
height?: number;
value?: TagItem[];
}

96
src/components/PopconfirmForm/index.tsx Normal file
View File

@@ -0,0 +1,96 @@
import type { ProFormColumnsType } from '@ant-design/pro-components';
import { BetaSchemaForm } from '@ant-design/pro-components';
import { type ColProps, Popconfirm } from 'antd';
import type { FormInstance } from 'antd/lib';
import React, { forwardRef, useImperativeHandle } from 'react';
interface PopconfirmFormProps {
title?: string;
columns?: ProFormColumnsType[];
onSubmit?: (values: any) => Promise<boolean>;
initialValues?: Record<string, any>;
labelCol?: ColProps;
wrapperCol?: ColProps;
children?: React.ReactNode;
}
export interface PopconfirmFormRef {
open: (data?: Record<string, any>) => void;
close: () => void;
}
const PopconfirmForm = forwardRef<PopconfirmFormRef, PopconfirmFormProps>(
(
{
labelCol = { span: 4 },
wrapperCol = { span: 20 },
columns,
onSubmit,
initialValues,
children,
},
ref,
) => {
const [open, setOpen] = React.useState(false);
const [formData, setFormData] = React.useState(initialValues || {});
// const [loading, setLoading] = React.useState<boolean>(false);
// 添加表单实例引用
const formRef = React.useRef<FormInstance>(null);
useImperativeHandle(ref, () => ({
open: (data) => {
if (data) {
setFormData(data);
}
setOpen(true);
},
close: () => setOpen(false),
}));
const handleSubmit = async () => {
try {
if (onSubmit) {
await formRef.current?.validateFields();
// setLoading(true);
const values = formRef.current?.getFieldsValue();
const success = await onSubmit(values);
if (success) {
setOpen(false);
return true;
}
return false;
}
return true;
} finally {
// setLoading(false);
}
};
return (
<Popconfirm
title={null}
destroyOnHidden
icon={null}
open={open}
okText="确定"
cancelText="取消"
description={
<BetaSchemaForm
initialValues={formData}
layoutType="Form"
formRef={formRef}
columns={columns || []}
layout="horizontal"
labelCol={labelCol}
wrapperCol={wrapperCol}
submitter={false}
/>
}
onConfirm={handleSubmit}
onCancel={() => setOpen(false)}
>
{children}
</Popconfirm>
);
},
);
export default React.memo(PopconfirmForm);

170
src/components/RenameRule/index.less Normal file
View File

@@ -0,0 +1,170 @@
// RenameRule.less
.rename-rule-card {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
.rename-rule-card-preview {
display: flex;
.left {
width: 200px;
}
}
&:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.ant-card-head {
background: linear-gradient(135deg, #1890ff, #36cfc9);
border-radius: 8px 8px 0 0;
.ant-card-head-title {
color: white;
font-weight: 600;
}
.ant-card-extra {
.ant-btn {
border-radius: 6px;
transition: all 0.3s ease;
&:hover {
background: rgba(255, 255, 255, 0.3) !important;
transform: translateY(-1px);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
}
}
.ant-card-body {
padding: 24px;
}
// 输入框样式
.ant-input,
.ant-input-number,
.ant-select-selector {
border-radius: 6px;
transition: all 0.3s ease;
&:focus,
&.ant-select-focused {
border-color: #40a9ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
}
// 行间距
.ant-row {
align-items: center;
.ant-col {
display: flex;
align-items: center;
}
}
// 预览信息样式
.preview-info {
background: #f6f8fa;
border: 1px solid #e1e4e8;
border-radius: 6px;
padding: 12px 16px;
margin-top: 8px;
.ant-typography {
margin: 0;
}
}
// Checkbox 样式
.ant-checkbox-wrapper {
.ant-checkbox {
&.ant-checkbox-checked {
.ant-checkbox-inner {
background-color: #1890ff;
border-color: #1890ff;
}
}
}
}
// 响应式设计
@media (max-width: 768px) {
.ant-card-body {
padding: 16px;
}
.ant-row {
margin-bottom: 16px;
.ant-col {
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
}
.ant-card-extra {
.ant-space {
flex-direction: column;
width: 100%;
.ant-btn {
width: 100%;
}
}
}
}
// 暗色主题
@media (prefers-color-scheme: dark) {
background: #1f1f1f;
border-color: #303030;
.ant-card-head {
background: linear-gradient(135deg, #1668dc, #13c2c2);
}
.preview-info {
background: #262626;
border-color: #434343;
}
}
// 动画效果
.ant-space-item {
transition: all 0.3s ease;
}
// 禁用状态
.ant-input:disabled,
.ant-input-number:disabled {
background-color: #f5f5f5;
opacity: 0.6;
cursor: not-allowed;
}
}
// 全局动画
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.rename-rule-card {
animation: fadeIn 0.3s ease-out;
}

398
src/components/RenameRule/index.tsx Normal file
View File

@@ -0,0 +1,398 @@
// RenameRule.tsx - 修复占位符替换顺序
import {
DownOutlined,
ExclamationCircleOutlined,
QuestionCircleOutlined,
UpOutlined,
} from '@ant-design/icons';
import {
Alert,
Button,
Card,
Input,
InputNumber,
Select,
Space,
Tooltip,
Typography,
} from 'antd';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import './index.less';
const { Text } = Typography;
const { Option } = Select;
export interface FileItem {
id: number;
originalName: string;
}
export interface RenameRule {
pattern: string;
startNumber: number;
numberDirection: 'up' | 'down';
matchPattern: string;
useMatch: boolean;
numberPadding: number;
}
export interface RenameResult extends FileItem {
newName: string;
isChanged: boolean;
isMatched: boolean;
}
interface RenameRuleProps {
files: FileItem[];
onPreview?: (results: RenameResult[]) => void;
onRename?: (results: RenameResult[]) => void;
loading?: boolean;
className?: string;
}
// 占位符配置
// const PLACEHOLDERS = [
// { key: "$n", desc: "数字序号(不补零)", example: "1, 2, 3..." },
// { key: "$nn", desc: "数字序号(2位补零)", example: "01, 02, 03..." },
// { key: "$nnn", desc: "数字序号(3位补零)", example: "001, 002, 003..." },
// { key: "$nnnn", desc: "数字序号(4位补零)", example: "0001, 0002, 0003..." },
// { key: "$name", desc: "原文件名", example: "photo1" },
// { key: "$ext", desc: "扩展名(不含点)", example: "jpg" },
// { key: "$EXT", desc: "扩展名(大写)", example: "JPG" },
// ];
const RenameRuleComponent: React.FC<RenameRuleProps> = ({
files,
onPreview,
className,
}) => {
const [rule, setRule] = useState<RenameRule>({
pattern: '',
startNumber: 1,
numberDirection: 'up',
matchPattern: '',
useMatch: false,
numberPadding: 2,
});
const [matchError, setMatchError] = useState<string>('');
// 初始化时自动设置模式
useEffect(() => {
console.log(files);
if (files.length > 0 && !rule.pattern) {
setRule((prev) => ({ ...prev, pattern: '$name$nn' }));
}
}, [files, rule.pattern]);
// 安全的正则表达式匹配
const isFileMatched = useCallback(
(file: FileItem, pattern: string): boolean => {
if (!pattern.trim()) return true;
try {
const regex = new RegExp(pattern, 'i');
const fullFileName = file.originalName;
return (
regex.test(file.originalName) ||
// regex.test(file.extension) ||
// regex.test(file.extension?.replace(".", "")) ||
regex.test(fullFileName)
);
} catch (error) {
console.warn('正则表达式错误:', error);
setMatchError(
`正则表达式错误: ${
error instanceof Error ? error.message : '未知错误'
}`,
);
return false;
}
},
[],
);
// 修复的占位符替换函数
const replacePlaceholders = useCallback(
(pattern: string, file: FileItem, fileIndex: number) => {
let result = pattern;
// 计算序号
let number: number;
if (rule.numberDirection === 'up') {
number = rule.startNumber + fileIndex;
} else {
number = rule.startNumber - fileIndex;
}
// 先用临时标记替换非数字占位符
const tempMarkers = {
name: '___TEMP_NAME___',
ext: '___TEMP_EXT___',
EXT: '___TEMP_EXT_UPPER___',
};
// 第一步：替换非数字占位符为临时标记
result = result.replace(/\$name/g, tempMarkers.name);
result = result.replace(/\$EXT/g, tempMarkers.EXT);
result = result.replace(/\$ext/g, tempMarkers.ext);
// 第二步：替换数字占位符（按长度从长到短，避免冲突）
result = result.replace(/\$nnnn/g, number.toString().padStart(4, '0'));
result = result.replace(/\$nnn/g, number.toString().padStart(3, '0'));
result = result.replace(/\$nn/g, number.toString().padStart(2, '0'));
result = result.replace(/\$n/g, number.toString());
// 第三步：将临时标记替换为实际值
result = result.replace(
new RegExp(tempMarkers.name, 'g'),
file.originalName,
);
// result = result.replace(
// new RegExp(tempMarkers.ext, "g"),
// // file.extension.replace(".", "")
// );
// result = result.replace(
// new RegExp(tempMarkers.EXT, "g"),
// file.extension.replace(".", "").toUpperCase()
// );
return result;
},
[rule.startNumber, rule.numberDirection],
);
// 使用 useMemo 缓存计算结果
const previewResults = useMemo(() => {
setMatchError('');
const matchedFiles: FileItem[] = [];
const allResults: RenameResult[] = [];
files.forEach((file) => {
const isMatched = rule.useMatch
? isFileMatched(file, rule.matchPattern)
: true;
if (isMatched) {
matchedFiles.push(file);
}
});
files.forEach((file) => {
const isMatched = rule.useMatch
? isFileMatched(file, rule.matchPattern)
: true;
if (!isMatched || !rule.pattern) {
allResults.push({
...file,
newName: file.originalName,
isChanged: false,
isMatched,
});
return;
}
const matchedIndex = matchedFiles.findIndex((f) => f.id === file.id);
const newName = replacePlaceholders(rule.pattern, file, matchedIndex);
const isChanged = newName !== file.originalName;
allResults.push({
...file,
newName,
isChanged,
isMatched,
});
});
return allResults;
}, [files, rule, isFileMatched, replacePlaceholders]);
// 调用预览回调
useEffect(() => {
if (onPreview) {
onPreview(previewResults);
}
}, [previewResults]);
// // 重置规则
// const handleReset = useCallback(() => {
// setRule({
// pattern: "$name$nn",
// startNumber: 1,
// numberDirection: "up",
// matchPattern: "",
// useMatch: false,
// numberPadding: 2,
// });
// setMatchError("");
// }, []);
// 规则更新处理函数
const updateRule = useCallback((updates: Partial<RenameRule>) => {
setRule((prev) => ({ ...prev, ...updates }));
if (updates.matchPattern !== undefined) {
setMatchError('');
}
}, []);
// // 插入占位符
// const insertPlaceholder = useCallback(
// (placeholder: string) => {
// const input = document.querySelector(
// ".pattern-input"
// ) as HTMLInputElement;
// if (input) {
// const start = input.selectionStart || 0;
// const end = input.selectionEnd || 0;
// const currentValue = rule.pattern;
// const newValue =
// currentValue.slice(0, start) + placeholder + currentValue.slice(end);
// updateRule({ pattern: newValue });
// setTimeout(() => {
// input.focus();
// input.setSelectionRange(
// start + placeholder.length,
// start + placeholder.length
// );
// }, 0);
// }
// },
// [rule.pattern, updateRule]
// );
// // 递增起始编号
// const incrementStartNumber = useCallback(() => {
// updateRule({ startNumber: rule.startNumber + 1 });
// }, [rule.startNumber, updateRule]);
// // 递减起始编号
// const decrementStartNumber = useCallback(() => {
// updateRule({ startNumber: Math.max(0, rule.startNumber - 1) });
// }, [rule.startNumber, updateRule]);
// 快速设置常用模式
const setQuickPattern = useCallback(
(pattern: string) => {
updateRule({ pattern });
},
[updateRule],
);
return (
<Card className={`rename-rule-card ${className || ''}`}>
<div className="rename-rule-card-preview">
<div className="left">
<Text strong style={{ marginBottom: 8, display: 'block' }}>
预览:
</Text>
{previewResults.map((item) => (
<p key={item.id}>{`${item.newName}`}</p>
))}
</div>
<Space direction="vertical" style={{ width: '100%' }} size="large">
{/* 错误提示 */}
{matchError && (
<Alert
message="匹配模式错误"
description={matchError}
type="error"
icon={<ExclamationCircleOutlined />}
closable
onClose={() => setMatchError('')}
/>
)}
<Space wrap>
<Text strong>快速模式:</Text>
<Button
size="small"
onClick={() => setQuickPattern('$name$nn')}
type={rule.pattern === '$name$nn' ? 'primary' : 'default'}
>
原名+序号
</Button>
<Button
size="small"
onClick={() => setQuickPattern('$nn_$name')}
type={rule.pattern === '$nn_$name' ? 'primary' : 'default'}
>
序号+原名
</Button>
<Button
size="small"
onClick={() => setQuickPattern('新文件$nnn')}
type={rule.pattern === '新文件$nnn' ? 'primary' : 'default'}
>
新文件+序号
</Button>
<Button
size="small"
onClick={() => setQuickPattern('$name_副本$nn')}
type={rule.pattern === '$name_副本$nn' ? 'primary' : 'default'}
>
原名+副本
</Button>
</Space>
{/* 命名模式 */}
<Space>
<Input
className="pattern-input"
placeholder="例如: $name$nn 或 新文件$nnn"
value={rule.pattern}
allowClear
onChange={(e) => updateRule({ pattern: e.target.value })}
suffix={
<Tooltip title="使用占位符创建命名规则">
<QuestionCircleOutlined style={{ color: '#bfbfbf' }} />
</Tooltip>
}
/>
</Space>
<Input
placeholder="例如: photo (匹配包含photo的文件) 或 \.jpg$ (匹配jpg文件)"
value={rule.matchPattern}
allowClear
onChange={(e) => updateRule({ matchPattern: e.target.value })}
/>
<Space>
<Text strong>起始编号:</Text>
<InputNumber
min={0}
max={9999}
value={rule.startNumber}
onChange={(value) => updateRule({ startNumber: value || 1 })}
style={{ width: '60%', textAlign: 'center' }}
controls={true}
/>
<Select
value={rule.numberDirection}
onChange={(value) => updateRule({ numberDirection: value })}
style={{ width: '100%' }}
>
<Option value="up">
<Space>
<UpOutlined />
递增
</Space>
</Option>
<Option value="down">
<Space>
<DownOutlined />
递减
</Space>
</Option>
</Select>
</Space>
</Space>
</div>
</Card>
);
};
export default React.memo(RenameRuleComponent);

111
src/components/TagEditor/index.tsx Normal file
View File

@@ -0,0 +1,111 @@
// src/components/TagEditor/index.tsx
import { PlusOutlined } from '@ant-design/icons';
import type { TagProps } from 'antd';
import { Input, Space, Tag } from 'antd';
import React, { useMemo, useState } from 'react';
interface TagEditorProps {
value?: string[];
onChange?: (value: string[], active?: number) => void;
placeholder?: string;
maxCount?: number;
tagProps?: TagProps;
disabled?: boolean;
editable?: boolean;
}
const TagEditor: React.FC<TagEditorProps> = ({
value = [],
onChange,
placeholder = '请输入标签',
maxCount,
tagProps,
editable = true,
disabled = false,
}) => {
// const [tags, setTags] = useState<string[]>(value);
const [inputVisible, setInputVisible] = useState(false);
const [inputValue, setInputValue] = useState('');
const tags = useMemo(() => {
console.log(value);
return value || [];
}, [value]);
const handleClose = (removedTag: string) => {
const active = tags.indexOf(removedTag);
const newTags = tags.filter((tag) => tag !== removedTag);
onChange?.(newTags, active);
};
const showInput = () => {
setInputVisible(true);
};
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value);
};
const handleInputConfirm = () => {
if (inputValue && !tags.includes(inputValue)) {
const newTags = [...tags, inputValue];
onChange?.(newTags);
}
setInputVisible(false);
setInputValue('');
};
const handleInputBlur = () => {
handleInputConfirm();
};
const canAddMore = !maxCount || tags.length < maxCount;
return (
<Space wrap>
{tags.map((tag) => (
<Tag
key={tag}
closable={!disabled}
onClose={() => handleClose(tag)}
{...tagProps}
>
{tag}
</Tag>
))}
{inputVisible ? (
<Input
type="text"
size="small"
style={{ width: 110 }}
value={inputValue}
onChange={handleInputChange}
onBlur={handleInputBlur}
onPressEnter={handleInputConfirm}
placeholder={placeholder}
autoFocus
/>
) : (
canAddMore &&
editable &&
!disabled && (
<Tag
onClick={showInput}
style={{
background: '#fff',
borderStyle: 'dashed',
cursor: 'pointer',
}}
>
<PlusOutlined /> 添加标签
</Tag>
)
)}
</Space>
);
};
export default TagEditor;

691
src/components/Tinymce/demo.tsx Normal file
View File

@@ -0,0 +1,691 @@
// components/RichEditor/index.tsx
import { Editor } from '@tinymce/tinymce-react';
import { message } from 'antd';
import React, { useCallback, useEffect, useState } from 'react';
import type { Editor as TinyMCEEditor } from 'tinymce';
import './index.less';
export interface RichEditorProps {
value?: string;
onChange?: (content: string) => void;
height?: number;
placeholder?: string;
disabled?: boolean;
uploadConfig?: {
action: string;
headers?: Record<string, string>;
maxSize?: number;
acceptTypes?: string[];
data?: Record<string, any>;
};
showWordCount?: boolean;
maxWords?: number;
}
const RichEditor: React.FC<RichEditorProps> = ({
value = '',
onChange,
height = 400,
placeholder = '请输入内容...',
disabled = false,
showWordCount = true,
maxWords,
uploadConfig = {
action: '/api/upload/image',
maxSize: 5,
acceptTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
},
}) => {
const [uploading, setUploading] = useState(false);
const [wordCount, setWordCount] = useState(0);
const [charCount, setCharCount] = useState(0);
// 自定义字数统计函数
const countWords = (text: string) => {
const plainText = text.replace(/<[^>]*>/g, '');
const cleanText = plainText.replace(/\s+/g, ' ').trim();
if (!cleanText) return { words: 0, characters: 0 };
const chineseChars = cleanText.match(/[\u4e00-\u9fa5]/g) || [];
const englishWords = cleanText.match(/[a-zA-Z]+/g) || [];
const numbers = cleanText.match(/\d+/g) || [];
const words = chineseChars.length + englishWords.length + numbers.length;
const characters = cleanText.length;
return { words, characters };
};
const handleEditorChange = (content: string) => {
onChange?.(content);
if (showWordCount) {
const { words, characters } = countWords(content);
setWordCount(words);
setCharCount(characters);
if (maxWords && words > maxWords) {
message.warning(
`内容超出字数限制，当前 ${words} 字，限制 ${maxWords} 字`,
);
}
}
};
useEffect(() => {
if (showWordCount && value) {
const { words, characters } = countWords(value);
setWordCount(words);
setCharCount(characters);
}
}, [value, showWordCount]);
const uploadFile = useCallback(
async (file: File): Promise<string> => {
return new Promise((resolve, reject) => {
const formData = new FormData();
formData.append('file', file);
if (uploadConfig.data) {
Object.keys(uploadConfig.data).forEach((key) => {
if (uploadConfig.data) formData.append(key, uploadConfig.data[key]);
});
}
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
console.log(`上传进度: ${percent}%`);
}
});
xhr.addEventListener('load', () => {
if (xhr.status === 200) {
try {
const response = JSON.parse(xhr.responseText);
if (response.code === 200 && response.data?.url) {
resolve(response.data.url);
} else {
reject(response.message || '上传失败');
}
} catch (_error) {
reject('响应解析失败');
}
} else {
reject(`上传失败: ${xhr.status}`);
}
});
xhr.addEventListener('error', () => {
reject('网络错误');
});
if (uploadConfig.headers) {
Object.keys(uploadConfig.headers).forEach((key) => {
if (uploadConfig.headers)
xhr.setRequestHeader(key, uploadConfig.headers[key]);
});
}
xhr.open('POST', uploadConfig.action);
xhr.send(formData);
});
},
[uploadConfig],
);
const handleImageUpload = useCallback(
(blobInfo: any, _: (percent: number) => void): Promise<string> => {
return new Promise((resolve, reject) => {
try {
setUploading(true);
const file = blobInfo.blob();
uploadFile(file).then((url) => {
resolve(url);
message.success('图片上传成功');
});
} catch (error) {
reject(error);
message.error(typeof error === 'string' ? error : '上传失败');
} finally {
setUploading(false);
}
});
},
[uploadFile],
);
const handleCustomUpload = useCallback(
(editor: TinyMCEEditor) => {
const input = document.createElement('input');
input.type = 'file';
input.accept = uploadConfig.acceptTypes?.join(',') || 'image/*';
input.multiple = true;
const handleFileChange = async (event: Event) => {
const target = event.target as HTMLInputElement;
const files = Array.from(target.files || []);
if (files.length === 0) return;
setUploading(true);
try {
for (const file of files) {
const isValidType = uploadConfig.acceptTypes?.includes(file.type);
if (!isValidType) {
message.error(`文件 ${file.name} 类型不支持`);
continue;
}
const isValidSize =
file.size / 1024 / 1024 < (uploadConfig.maxSize || 5);
if (!isValidSize) {
message.error(
`文件 ${file.name} 大小超过 ${uploadConfig.maxSize || 5}MB`,
);
continue;
}
try {
const url = await uploadFile(file);
const imgHtml = `<img src="${url}" alt="${file.name}" style="max-width: 100%; height: auto;" />`;
editor.insertContent(imgHtml);
message.success(`${file.name} 上传成功`);
} catch (error) {
message.error(`${file.name} 上传失败: ${error}`);
}
}
} finally {
setUploading(false);
}
};
input.addEventListener('change', handleFileChange);
input.click();
},
[uploadConfig, uploadFile],
);
// 全展开的工具栏配置
const editorConfig = {
height,
menubar: 'file edit view insert format tools table help',
plugins: [
'advlist',
'autolink',
'lists',
'link',
'image',
'charmap',
'preview',
'anchor',
'searchreplace',
'visualblocks',
'code',
'fullscreen',
'insertdatetime',
'media',
'table',
'help',
'wordcount',
'emoticons',
'template',
'codesample',
'hr',
'pagebreak',
'nonbreaking',
'toc',
'imagetools',
'textpattern',
'noneditable',
'quickbars',
'accordion',
],
// 修改为全展开的工具栏配置
toolbar: [
// 第一行：撤销重做 + 格式选择 + 字体
'undo redo | blocks fontfamily fontsize',
// 第二行：文本格式
'bold italic underline strikethrough subscript superscript | forecolor backcolor',
// 第三行：对齐和列表
'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
// 第四行：插入功能
'link customupload image media table emoticons charmap insertdatetime hr pagebreak',
// 第五行：高级功能
'codesample accordion blockquote | searchreplace visualblocks code',
// 第六行：其他工具
'removeformat | fullscreen preview help',
].join(' | '),
// 设置工具栏模式为换行显示，而不是滑动
toolbar_mode: 'wrap' as const, // 改为 wrap 模式，全部展开
// 工具栏分组，每组之间有分隔符
toolbar_groups: {
history: { icon: 'undo', tooltip: '历史操作' },
formatting: { icon: 'bold', tooltip: '文本格式' },
alignment: { icon: 'align-left', tooltip: '对齐方式' },
indentation: { icon: 'indent', tooltip: '缩进' },
insert: { icon: 'plus', tooltip: '插入' },
tools: { icon: 'preferences', tooltip: '工具' },
},
font_family_formats: [
'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif',
'苹方=PingFang SC,Microsoft YaHei,sans-serif',
'宋体=SimSun,serif',
'黑体=SimHei,sans-serif',
'楷体=KaiTi,serif',
'Arial=arial,helvetica,sans-serif',
'Times New Roman=times new roman,times,serif',
'Courier New=courier new,courier,monospace',
].join(';'),
fontsize_formats:
'8px 9px 10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 36px 48px 72px',
block_formats: [
'段落=p',
'标题1=h1',
'标题2=h2',
'标题3=h3',
'标题4=h4',
'标题5=h5',
'标题6=h6',
'预格式化=pre',
'地址=address',
'代码=code',
].join(';'),
// 字数统计配置
wordcount_countregex: /[\w\u2019\u4e00-\u9fa5]+/g,
wordcount_cleanregex: /[0-9.(),;:!?%#$?\x27\x22_+=\\/-]*/g,
// 颜色配置
color_map: [
'000000',
'黑色',
'993300',
'深红色',
'333300',
'深黄色',
'003300',
'深绿色',
'003366',
'深青色',
'000080',
'深蓝色',
'333399',
'蓝色',
'333333',
'深灰色',
'800000',
'栗色',
'FF6600',
'橙色',
'808000',
'橄榄色',
'008000',
'绿色',
'008080',
'青色',
'0000FF',
'蓝色',
'666699',
'灰蓝色',
'808080',
'灰色',
'FF0000',
'红色',
'FF9900',
'琥珀色',
'99CC00',
'黄绿色',
'339966',
'海绿色',
'33CCCC',
'青绿色',
'3366FF',
'蓝色',
'800080',
'紫色',
'999999',
'中灰色',
'FF00FF',
'洋红色',
'FFCC00',
'金色',
'FFFF00',
'黄色',
'00FF00',
'酸橙色',
'00FFFF',
'水蓝色',
'00CCFF',
'天蓝色',
'993366',
'红紫色',
'FFFFFF',
'白色',
],
// 代码高亮配置
codesample_languages: [
{ text: 'HTML/XML', value: 'markup' },
{ text: 'JavaScript', value: 'javascript' },
{ text: 'TypeScript', value: 'typescript' },
{ text: 'CSS', value: 'css' },
{ text: 'SCSS', value: 'scss' },
{ text: 'Python', value: 'python' },
{ text: 'Java', value: 'java' },
{ text: 'C++', value: 'cpp' },
{ text: 'C#', value: 'csharp' },
{ text: 'PHP', value: 'php' },
{ text: 'Ruby', value: 'ruby' },
{ text: 'Go', value: 'go' },
{ text: 'Rust', value: 'rust' },
{ text: 'SQL', value: 'sql' },
{ text: 'JSON', value: 'json' },
{ text: 'Bash', value: 'bash' },
],
// 表格配置
table_default_attributes: {
border: '1',
},
table_default_styles: {
'border-collapse': 'collapse',
width: '100%',
},
table_class_list: [
{ title: '无样式', value: '' },
{ title: '简单表格', value: 'simple-table' },
{ title: '条纹表格', value: 'striped-table' },
{ title: '边框表格', value: 'bordered-table' },
],
// 链接配置
link_default_target: '_blank',
link_assume_external_targets: true,
link_context_toolbar: true,
// 图片配置
image_advtab: true,
image_caption: true,
// 媒体配置
media_live_embeds: true,
media_filter_html: false,
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
font-size: 14px;
line-height: 1.6;
margin: 16px;
color: #333;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 24px;
margin-bottom: 16px;
font-weight: 600;
line-height: 1.25;
}
h1 { font-size: 2em; color: #1a1a1a; }
h2 { font-size: 1.5em; color: #2a2a2a; }
h3 { font-size: 1.25em; color: #3a3a3a; }
p { margin-bottom: 16px; }
img {
max-width: 100%;
height: auto;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin: 8px 0;
}
table {
border-collapse: collapse;
width: 100%;
margin: 16px 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
table td, table th {
border: 1px solid #e8e8e8;
padding: 12px;
text-align: left;
}
table th {
background-color: #f8f9fa;
font-weight: 600;
color: #495057;
}
blockquote {
border-left: 4px solid #1890ff;
margin: 16px 0;
padding: 8px 16px;
background-color: #f6f8fa;
color: #666;
font-style: italic;
}
code {
background-color: #f1f3f4;
padding: 2px 4px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
color: #d73a49;
}
pre {
background-color: #f8f8f8;
border: 1px solid #e1e4e8;
border-radius: 6px;
padding: 16px;
overflow-x: auto;
margin: 16px 0;
}
pre code {
background: none;
padding: 0;
color: inherit;
}
`,
placeholder,
branding: false,
elementpath: true,
resize: 'both' as const,
statusbar: showWordCount,
// 图片上传配置
images_upload_handler: handleImageUpload,
automatic_uploads: true,
images_reuse_filename: true,
images_upload_url: uploadConfig.action,
images_upload_base_path: '',
images_upload_credentials: true,
// 粘贴配置
paste_data_images: true,
paste_as_text: false,
paste_webkit_styles: 'none',
paste_merge_formats: true,
paste_remove_styles_if_webkit: true,
// 文件选择器配置
file_picker_types: 'image media',
file_picker_callback: (
callback: (url: string, meta?: any) => void,
// value: string,
meta: any,
) => {
if (meta.filetype === 'image') {
const input = document.createElement('input');
input.type = 'file';
input.accept = uploadConfig.acceptTypes?.join(',') || 'image/*';
const handleChange = async (event: Event) => {
const target = event.target as HTMLInputElement;
const file = target.files?.[0];
if (!file) return;
const isValidType = uploadConfig.acceptTypes?.includes(file.type);
const isValidSize =
file.size / 1024 / 1024 < (uploadConfig.maxSize || 5);
if (!isValidType) {
message.error('文件类型不支持');
return;
}
if (!isValidSize) {
message.error(`文件大小不能超过 ${uploadConfig.maxSize || 5}MB`);
return;
}
try {
setUploading(true);
const url = await uploadFile(file);
callback(url, { alt: file.name });
message.success('图片上传成功');
} catch (error) {
message.error('上传失败');
console.error('Upload error:', error);
} finally {
setUploading(false);
}
};
input.addEventListener('change', handleChange);
input.click();
}
},
// 快速工具栏
quickbars_selection_toolbar:
'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
quickbars_insert_toolbar: 'quickimage quicktable',
// 文本模式
textpattern_patterns: [
{ start: '*', end: '*', format: 'italic' },
{ start: '**', end: '**', format: 'bold' },
{ start: '#', format: 'h1' },
{ start: '##', format: 'h2' },
{ start: '###', format: 'h3' },
{ start: '####', format: 'h4' },
{ start: '#####', format: 'h5' },
{ start: '######', format: 'h6' },
{ start: '1. ', cmd: 'InsertOrderedList' },
{ start: '* ', cmd: 'InsertUnorderedList' },
{ start: '- ', cmd: 'InsertUnorderedList' },
],
// 初始化设置
setup: (editor: TinyMCEEditor) => {
// 注册自定义上传按钮
editor.ui.registry.addButton('customupload', {
text: uploading ? '上传中...' : '上传',
icon: 'upload',
tooltip: '上传图片（支持多选）',
enabled: !disabled && !uploading,
onAction: () => {
handleCustomUpload(editor);
},
});
// 监听内容变化，实时更新字数统计
editor.on('input change undo redo', () => {
if (showWordCount) {
const content = editor.getContent();
const { words, characters } = countWords(content);
setWordCount(words);
setCharCount(characters);
}
});
editor.on('init', () => {
console.log('编辑器初始化完成');
// 初始化字数统计
if (showWordCount && value) {
const { words, characters } = countWords(value);
setWordCount(words);
setCharCount(characters);
}
});
},
// 其他配置
convert_urls: false,
remove_script_host: false,
relative_urls: false,
language: 'zh_CN',
directionality: 'ltr' as const,
// 高级配置
extended_valid_elements: 'script[src|async|defer|type|charset]',
// 性能配置
browser_spellcheck: true,
contextmenu: 'link image table',
};
return (
<div className="rich-editor-wrapper">
<Editor
value={value}
onEditorChange={handleEditorChange}
init={editorConfig}
disabled={disabled}
/>
{/* 自定义字数统计显示 */}
{showWordCount && (
<div className="word-count-display">
<span className="word-count">
字数: {wordCount}
{maxWords && (
<span className={wordCount > maxWords ? 'over-limit' : ''}>
/{maxWords}
</span>
)}
</span>
<span className="char-count">字符: {charCount}</span>
</div>
)}
{uploading && (
<div className="upload-overlay">
<div className="upload-spinner">
<div className="spinner"></div>
<span>上传中...</span>
</div>
</div>
)}
</div>
);
};
export default RichEditor;

145
src/components/Tinymce/index.less Normal file
View File

@@ -0,0 +1,145 @@
/* components/RichEditor/index.css */
.rich-editor-wrapper {
position: relative;
border: 1px solid #d9d9d9;
border-radius: 6px;
overflow: hidden;
transition: all 0.3s;
background: #fff;
}
.rich-editor-wrapper:hover {
border-color: #4096ff;
}
.rich-editor-wrapper:focus-within {
border-color: #4096ff;
box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.2);
}
.rich-editor-wrapper .tox-tinymce {
border: none !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.rich-editor-wrapper .tox-editor-header {
border-bottom: 1px solid #e8e8e8 !important;
background: #fafafa !important;
}
.rich-editor-wrapper .tox-toolbar__primary {
background: #fafafa !important;
}
.rich-editor-wrapper .tox-statusbar {
border-top: 1px solid #e8e8e8 !important;
background: #fafafa !important;
}
/* 自定义按钮样式 */
.rich-editor-wrapper .tox-tbtn--enabled {
background: transparent !important;
}
.rich-editor-wrapper .tox-tbtn--enabled:hover {
background: #e6f7ff !important;
border-color: #91d5ff !important;
}
.rich-editor-wrapper .tox-tbtn--enabled:active {
background: #bae7ff !important;
}
/* 上传状态覆盖层 */
.upload-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
backdrop-filter: blur(2px);
}
.upload-spinner {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.spinner {
width: 32px;
height: 32px;
border: 3px solid #f3f3f3;
border-top: 3px solid #1890ff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.upload-spinner span {
color: #666;
font-size: 14px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.rich-editor-wrapper .tox-toolbar__primary {
flex-wrap: wrap;
}
.rich-editor-wrapper .tox-toolbar__group {
margin: 2px;
}
}
/* 图片样式优化 */
.rich-editor-wrapper .tox-edit-area img {
max-width: 100% !important;
height: auto !important;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 4px 0;
cursor: pointer;
transition: transform 0.2s;
}
.rich-editor-wrapper .tox-edit-area img:hover {
transform: scale(1.02);
}
/* 表格样式优化 */
.rich-editor-wrapper .tox-edit-area table {
border-collapse: collapse;
width: 100%;
margin: 8px 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.rich-editor-wrapper .tox-edit-area table td,
.rich-editor-wrapper .tox-edit-area table th {
border: 1px solid #e8e8e8;
padding: 8px 12px;
}
.rich-editor-wrapper .tox-edit-area table th {
background-color: #fafafa;
font-weight: 600;
}

262
src/components/Tinymce/index.tsx Normal file
View File

@@ -0,0 +1,262 @@
import { Editor } from '@tinymce/tinymce-react';
import { message } from 'antd';
import React, { useCallback, useState } from 'react';
import type { Editor as TinyMCEEditor } from 'tinymce';
export interface RichEditorProps {
value?: string;
onChange?: (content: string) => void;
height?: number;
placeholder?: string;
disabled?: boolean;
uploadConfig?: {
action: string;
headers?: Record<string, string>;
maxSize?: number;
acceptTypes?: string[];
data?: Record<string, any>;
};
showWordCount?: boolean;
maxWords?: number;
}
const RichEditor: React.FC<RichEditorProps> = ({
// value = "",
// onChange,
// height = 400,
// placeholder = "请输入内容...",
disabled = false,
// showWordCount = true,
// maxWords,
uploadConfig = {
action: '/api/upload/image',
maxSize: 5,
acceptTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
},
}) => {
const [uploading, setUploading] = useState<boolean>(false);
const uploadFile = useCallback(
async (file: File): Promise<string> => {
return new Promise((resolve, reject) => {
const formData = new FormData();
formData.append('file', file);
if (uploadConfig.data) {
Object.keys(uploadConfig.data).forEach((key) => {
formData.append(key, uploadConfig.data?.[key]);
});
}
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
console.log(`上传进度: ${percent}%`);
}
});
xhr.addEventListener('load', () => {
if (xhr.status === 200) {
try {
const response = JSON.parse(xhr.responseText);
if (response.code === 200 && response.data?.url) {
resolve(response.data.url);
} else {
reject(response.message || '上传失败');
}
} catch (_error) {
reject('响应解析失败');
}
} else {
reject(`上传失败: ${xhr.status}`);
}
});
xhr.addEventListener('error', () => {
reject('网络错误');
});
if (uploadConfig.headers) {
Object.keys(uploadConfig.headers).forEach((key) => {
xhr.setRequestHeader(key, uploadConfig.headers![key]);
});
}
xhr.open('POST', uploadConfig.action);
xhr.send(formData);
});
},
[uploadConfig],
);
const handleImageUpload = useCallback(
(blobInfo: any, _: (percent: number) => void): Promise<string> => {
return new Promise((resolve, reject) => {
try {
setUploading(true);
const file = blobInfo.blob();
uploadFile(file).then((url) => {
resolve(url);
});
message.success('图片上传成功');
} catch (error) {
reject(error);
message.error(typeof error === 'string' ? error : '上传失败');
} finally {
setUploading(false);
}
});
},
[uploadFile],
);
const handleCustomUpload = useCallback(
(editor: TinyMCEEditor) => {
const input = document.createElement('input');
input.type = 'file';
input.accept = uploadConfig.acceptTypes?.join(',') || 'image/*';
input.multiple = true;
const handleFileChange = async (event: Event) => {
const target = event.target as HTMLInputElement;
const files = Array.from(target.files || []);
if (files.length === 0) return;
setUploading(true);
try {
for (const file of files) {
const isValidType = uploadConfig.acceptTypes?.includes(file.type);
if (!isValidType) {
message.error(`文件 ${file.name} 类型不支持`);
continue;
}
const isValidSize =
file.size / 1024 / 1024 < (uploadConfig.maxSize || 5);
if (!isValidSize) {
message.error(
`文件 ${file.name} 大小超过 ${uploadConfig.maxSize || 5}MB`,
);
continue;
}
try {
const url = await uploadFile(file);
const imgHtml = `<img src="${url}" alt="${file.name}" style="max-width: 100%; height: auto;" />`;
editor.insertContent(imgHtml);
message.success(`${file.name} 上传成功`);
} catch (error) {
message.error(`${file.name} 上传失败: ${error}`);
}
}
} finally {
setUploading(false);
}
};
input.addEventListener('change', handleFileChange);
input.click();
},
[uploadConfig, uploadFile],
);
return (
<Editor
apiKey="xt51qhzvj8q9mxzxytigtp0nu94v4rz7dska2dbqeilkxo99"
init={{
plugins: [
// Core editing features
'anchor',
'autolink',
'charmap',
'codesample',
'emoticons',
'link',
'lists',
'media',
'searchreplace',
'table',
'visualblocks',
'wordcount',
// Your account includes a free trial of TinyMCE premium features
// Try the most popular premium features until Oct 8, 2025:
'checklist',
'mediaembed',
'casechange',
'formatpainter',
'pageembed',
'a11ychecker',
'tinymcespellchecker',
'permanentpen',
'powerpaste',
'advtable',
'advcode',
'advtemplate',
'ai',
'uploadcare',
'mentions',
'tinycomments',
'tableofcontents',
'footnotes',
'mergetags',
'autocorrect',
'typography',
'inlinecss',
'markdown',
'importword',
'exportword',
'exportpdf',
],
menubar: false,
toolbar:
'undo redo | blocks | bold italic forecolor | ' +
'alignleft aligncenter | ' +
'alignright alignjustify | bullist numlist outdent indent customupload | ' +
'removeformat ',
tinycomments_mode: 'embedded',
tinycomments_author: 'Author name',
toolbar_mode: 'sliding',
mergetags_list: [
{ value: 'First.Name', title: 'First Name' },
{ value: 'Email', title: 'Email' },
],
ai_request: (
_: any,
respondWith: { string: (arg0: () => Promise<never>) => any },
) =>
respondWith.string(() =>
Promise.reject('See docs to implement AI Assistant'),
),
language: 'zh-CN',
// 其他配置
convert_urls: false,
remove_script_host: false,
uploadcare_public_key: '0ad3671d77f59c5756dd',
setup: (editor: TinyMCEEditor) => {
// 注册自定义上传按钮
editor.ui.registry.addButton('customupload', {
text: uploading ? '上传中...' : '上传',
icon: 'upload',
tooltip: '上传图片（支持多选）',
enabled: !disabled && !uploading,
onAction: () => {
handleCustomUpload(editor);
},
});
},
// 图片上传配置
images_upload_handler: handleImageUpload,
// 性能配置
browser_spellcheck: true,
contextmenu: 'link image table',
}}
initialValue="Welcome to TinyMCE!"
/>
);
};
export default React.memo(RichEditor);

8
src/components/Upload/UploadCard/index.module.less Normal file
View File

@@ -0,0 +1,8 @@
.uploader-card {
background-color: #fff;
:global {
.ant-upload-drag {
background-color: #fff;
}
}
}

167
src/components/Upload/UploadCard/index.tsx Normal file
View File

@@ -0,0 +1,167 @@
import {
DeleteOutlined,
FileTextOutlined,
PlayCircleOutlined,
} from '@ant-design/icons';
import { message, Upload } from 'antd';
import type { RcFile, UploadFile, UploadProps } from 'antd/lib/upload';
import React, { useState } from 'react';
import { createSample } from '@/services/ai/sample';
import styles from './index.module.less';
const { Dragger } = Upload;
interface AudioUploaderProps {
value?: UploadFile[] | UploadFile | null;
onChange?: (file: UploadFile[] | UploadFile | null) => void;
maxSize?: number;
accept?: string;
disabled?: boolean;
maxCount?: number;
placeholder?: string;
}
const AudioUploader: React.FC<AudioUploaderProps> = ({
value,
onChange,
maxSize = 10,
accept = '.mp3,.wav,.flac,.aac,.ogg',
disabled = false,
maxCount = 10,
placeholder = '点击或拖拽音频文件到此区域上传',
}) => {
const [fileList, setFileList] = useState<UploadFile[]>(() => {
if (Array.isArray(value)) {
return value;
} else if (value) {
return [value];
}
return [];
});
const [uploading, setUploading] = useState<boolean>(false);
const beforeUpload = (file: RcFile): boolean => {
const isAudio = file.type.startsWith('audio/');
if (!isAudio) {
message.error('只能上传音频文件！');
return false;
}
// 检查文件大小
const isLtMaxSize = file.size / 1024 / 1024 < maxSize;
if (!isLtMaxSize) {
message.error(`音频文件大小不能超过 ${maxSize}MB！`);
return false;
}
// 检查文件数量限制
if (fileList.length >= maxCount) {
message.error(`最多只能上传 ${maxCount} 个文件！`);
return false;
}
return true;
};
// 实际的后端接口上传
const uploadToServer = async (file: File) => {
const formData = new FormData();
formData.append('files', file);
const response = await createSample(formData);
message.success('上传成功！');
return response;
};
const customRequest: UploadProps['customRequest'] = async (options) => {
const { file, onSuccess, onError, onProgress } = options;
try {
setUploading(true);
// 模拟进度更新
onProgress?.({ percent: 10 });
// 调用后端接口
const result = await uploadToServer(file as File);
console.log(result, 'res');
onProgress?.({ percent: 100 });
if (result) {
// 构造返回数据
const responseData = {
url: result[0].fileUrl,
name: result[0].fileName || (file as File).name,
uid: (file as any).uid,
status: 'done' as const,
response: result,
};
onSuccess?.(responseData);
} else {
throw new Error(result.message || '上传失败');
}
} catch (error) {
console.error('Upload error:', error);
onError?.(error as Error);
message.error(`上传失败: ${(error as Error).message}`);
} finally {
setUploading(false);
}
};
// const handleChange: UploadProps["onChange"] = ({
// fileList: newFileList,
// file,
// }) => {
// setFileList(newFileList);
// onChange?.(newFileList);
// };
const handleRemove = (file: UploadFile): boolean => {
const newFileList = fileList.filter((item) => item.uid !== file.uid);
setFileList(newFileList);
onChange?.(newFileList);
return true;
};
const handlePreview = (file: UploadFile): void => {
const audioUrl = file.url || (file.response as any)?.url;
if (audioUrl) {
const audio = new Audio(audioUrl);
audio.play().catch(() => {
message.error('音频播放失败');
});
}
};
const uploadProps: UploadProps = {
name: 'file',
multiple: true,
fileList,
accept,
disabled: disabled || uploading,
beforeUpload,
customRequest,
// onChange: handleChange,
onRemove: handleRemove,
onPreview: handlePreview,
showUploadList: {
showPreviewIcon: true,
showRemoveIcon: true,
previewIcon: <PlayCircleOutlined />,
removeIcon: <DeleteOutlined />,
},
};
return (
<div className={styles['uploader-card']}>
<Dragger {...uploadProps}>
<p className="">
<FileTextOutlined style={{ fontSize: 36 }} />
</p>
<p className="ant-upload-text">{placeholder}</p>
<p className="ant-upload-hint">
支持格式：{accept}，单次最多同时上传 {maxCount} 个文件
</p>
</Dragger>
</div>
);
};
export default AudioUploader;

41
src/constants/index.ts
View File

@@ -1 +1,40 @@
export const formStatusType = { create: '创建', update: '编辑', test: '测试' }; export const formStatusType: { [key: string]: string } = {
create: '创建',
update: '编辑',
test: '测试',
detail: '详情',
};
export const tenantStatus = [
{ label: '开启', value: 0 },
{ label: '关闭', value: 1 },
];
export const modlaTypeText: { [key: string]: string } = {
edit: '编辑',
add: '新增',
menu: '菜单权限',
data: '数据权限',
prod_status: '商品状态控制',
prod_audit: '商品上架审核',
prod_sku: '',
};
export const SystemDataScopeEnum = {
ALL: 1, // 全部数据权限
DEPT_CUSTOM: 2, // 指定部门数据权限
DEPT_ONLY: 3, // 部门数据权限
DEPT_AND_CHILD: 4, // 部门及以下数据权限
DEPT_SELF: 5, // 仅本人数据权限
};
export const systemDataScopetStatus = [
{ label: '全部数据权限', value: 1 },
{ label: '指定部门数据权限', value: 2 },
{ label: '部门数据权限', value: 3 },
{ label: '部门及以下数据权限', value: 4 },
{ label: '仅本人数据权限', value: 5 },
];
export const dateFormat = 'YYYY-MM-DD';
export const dateFormatS = 'YYYY-MM-DD HH:mm:ss';

55
src/constants/trade.ts Normal file
View File

@@ -0,0 +1,55 @@
import type { BadgeProps } from 'antd';
export enum OrderStatus {
All = 1,
PendingPayment = 10,
PendingConfirmation = 20,
PendingService = 30,
PendingAcceptance = 40,
Completed = 50,
Cancelled = 60,
Refunded = 70,
}
export const OrderBtnLableMap: Record<OrderStatus, string> = {
[OrderStatus.PendingPayment]: '取消订单',
[OrderStatus.PendingConfirmation]: '接单确定',
[OrderStatus.PendingService]: '准备完成 开始服务',
[OrderStatus.PendingAcceptance]: '服务完成上报',
[OrderStatus.All]: '',
[OrderStatus.Completed]: '',
[OrderStatus.Cancelled]: '',
[OrderStatus.Refunded]: '',
};
// 状态标签映射
export const OrderStatusLabels: Record<
OrderStatus,
{ label: string; color: string }
> = {
[OrderStatus.All]: { label: '所有订单', color: 'default' },
[OrderStatus.PendingPayment]: { label: '等待付款', color: 'danger' },
[OrderStatus.PendingConfirmation]: { label: '等待确定', color: 'warning' },
[OrderStatus.PendingService]: { label: '等待服务', color: 'primary' },
[OrderStatus.PendingAcceptance]: { label: '等待验收', color: 'success' },
[OrderStatus.Completed]: { label: '已完成', color: 'secondary' },
[OrderStatus.Cancelled]: { label: '已取消', color: 'secondary' },
[OrderStatus.Refunded]: { label: '已退款', color: 'secondary' },
};
export const mapOrderStatusToBadgeStatus = (
statusColor: string,
): BadgeProps['status'] => {
const statusMap: Record<string, BadgeProps['status']> = {
success: 'success',
processing: 'processing',
default: 'default',
error: 'error',
warning: 'warning',
primary: 'processing',
danger: 'error',
secondary: 'default',
};
return statusMap[statusColor] || 'default';
};

22
src/global.less
View File

@@ -92,3 +92,25 @@ ol {
} }
} }
} }
.page-container {
background: #fff;
width: 100%;
height: 100%;
padding: 16px;
border-radius: 8px;
.ant-tabs {
.ant-pro-query-filter-container {
form {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
}
.ant-pro-table {
.ant-pro-card-body {
padding: 0px;
}
}
}
}

4
src/manifest.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "Ant Design Pro", "name": "百业到家",
"short_name": "Ant Design Pro", "short_name": "百业到家",
"display": "standalone", "display": "standalone",
"start_url": "./?utm_source=homescreen", "start_url": "./?utm_source=homescreen",
"theme_color": "#002140", "theme_color": "#002140",

4
src/pages/Welcome.tsx
View File

@@ -116,7 +116,7 @@ const Welcome: React.FC = () => {
color: token.colorTextHeading, color: token.colorTextHeading,
}} }}
> >
欢迎使用 Ant Design Pro 欢迎使用 百业到家
</div> </div>
<p <p
style={{ style={{
@@ -128,7 +128,7 @@ const Welcome: React.FC = () => {
width: '65%', width: '65%',
}} }}
> >
Ant Design Pro 是一个整合了 umi，Ant Design 和 ProComponents 百业到家 是一个整合了 umi，Ant Design 和 ProComponents
的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。 的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
</p> </p>
<div <div

83
src/pages/ai/sample-tag/components/tag-manager.tsx Normal file
View File

@@ -0,0 +1,83 @@
// 使用示例 - App.tsx
import { Modal, message, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import RenameRule, {
type FileItem,
type RenameResult,
} from '@/components/RenameRule';
import { updateSamples } from '@/services/ai/sample';
const TagManager: React.FC<{
visible: boolean;
files: FileItem[];
onCancel?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
onOk?: () => void;
}> = ({ visible, files: beforeFiles, onCancel, onOk }) => {
const [files, setFiles] = useState<FileItem[]>(beforeFiles);
useEffect(() => {
setFiles(beforeFiles);
}, [beforeFiles]);
const [previewResults, setPreviewResults] = useState<RenameResult[]>([]);
const [loading, setLoading] = useState(false);
// 预览回调o+
const handlePreview = (results: RenameResult[]) => {
setPreviewResults(results);
};
const handleOk = async () => {
try {
setLoading(true);
const results = previewResults.map((result) => ({
id: result.id,
sampleName: `${result.newName}`,
}));
await updateSamples(results);
onOk?.();
message.success('重命名成功');
} finally {
setLoading(false);
}
};
// // 重命名回调
// const handleRename = async (results: RenameResult[]) => {
// setLoading(true);
// try {
// console.log("执行预览:", results);
// // 模拟API调用
// await new Promise((resolve) => setTimeout(resolve, 1000));
// message.success(`成功重命名 ${results.length} 个文件`);
// } catch (error) {
// message.error("重命名失败");
// } finally {
// setLoading(false);
// }
// };
return (
<Modal
width={800}
onCancel={onCancel}
onOk={handleOk}
open={visible}
title="重命名文件"
>
<div style={{ padding: '24px' }}>
<Space direction="vertical" style={{ width: '100%' }} size="large">
{/* 独立的重命名规则组件 */}
<RenameRule
files={files}
onPreview={handlePreview}
// onRename={handleRename}
loading={loading}
/>
</Space>
</div>
</Modal>
);
};
export default TagManager;

173
src/pages/ai/sample-tag/config.tsx Normal file
View File

@@ -0,0 +1,173 @@
import type { ProColumns } from '@ant-design/pro-components';
import GroupTagSelect from '@/components/GroupTag/GroupTagSelect';
import {
type AiSampleRespVO,
createSampleTag,
createSampleTagGroup,
deleteSampleTag,
deleteSampleTagGroup,
getSampleTagGroup,
getSampleTagPage,
updateSampleTag,
updateSampleTagGroup,
} from '@/services/ai/sample';
export const baseTenantColumns: ProColumns<AiSampleRespVO>[] = [
{
title: '样本名称',
dataIndex: 'sampleName',
// width: 500,
},
{
title: '注释',
dataIndex: 'remark',
hideInSearch: true,
},
{
title: '标签',
hideInTable: true,
dataIndex: 'tagIds',
valueType: 'select',
search: {
transform: (value) => {
console.log(value);
return value.join(',');
},
},
renderFormItem: (_) => {
return (
<GroupTagSelect
request={{
groupsApi: {
get: getSampleTagGroup,
create: createSampleTagGroup,
delete: deleteSampleTagGroup,
update: updateSampleTagGroup,
},
tagsApi: {
get: getSampleTagPage,
create: createSampleTag,
delete: deleteSampleTag,
update: updateSampleTag,
},
}}
editable
placeholder="请选择技术栈"
/>
);
},
},
{
title: '样本格式',
hideInTable: true,
dataIndex: 'sample_mine_type',
},
];
// export const formColumns = (data: {
// type: string;
// grade: number;
// }): ProFormColumnsType[] => [
// {
// title: "类目",
// dataIndex: "grade",
// valueType: "radio",
// fieldProps: {
// value: data.grade || 1,
// options: [
// { label: "一级类目", value: 1 },
// { label: "二级类目", value: 2 },
// { label: "三级类目", value: 3 },
// ],
// disabled: data.type === "create",
// },
// },
// {
// title: "类目名称",
// dataIndex: "username",
// formItemProps: {
// rules: [
// {
// required: true,
// message: "请输入用户名",
// },
// ],
// },
// },
// {
// title: "排序权重",
// dataIndex: "sort",
// valueType: "digit",
// },
// {
// title: "类目描述",
// dataIndex: "description",
// valueType: "textarea",
// renderFormItem: () => {
// return <TinyMCEEditor />;
// },
// },
// {
// title: "关联父级",
// dataIndex: "parentId",
// valueType: "select",
// hideInForm: data.grade - 1 === 0,
// },
// {
// title: "类目icon",
// dataIndex: "icon",
// },
// {
// title: "类目标签",
// dataIndex: "tages",
// renderFormItem: () => {
// return (
// <TagEditor
// placeholder="输入标签名称"
// maxCount={10}
// tagProps={{
// color: "blue",
// }}
// />
// );
// },
// },
// {
// title: "类目状态",
// dataIndex: "status",
// hideInForm: data.type === "create",
// },
// {
// title: "类目ID",
// dataIndex: "categoryId",
// hideInForm: data.type === "create",
// },
// {
// title: "创建时间",
// dataIndex: "createTime",
// valueType: "dateTime",
// hideInForm: data.type === "create",
// },
// {
// title: "创建人",
// dataIndex: "creator",
// hideInForm: data.type === "create",
// },
// {
// title: "更新时间",
// dataIndex: "updateTime",
// valueType: "dateTime",
// hideInForm: data.type === "create",
// },
// {
// title: "更新人",
// dataIndex: "updator",
// hideInForm: data.type === "create",
// },
// ];
// {
// title: "模板内容",
// dataIndex: "content",
// valueType: "textarea",
// },

328
src/pages/ai/sample-tag/detail.tsx Normal file
View File

@@ -0,0 +1,328 @@
import { ProForm, ProFormGroup, ProFormText } from '@ant-design/pro-components';
import { Button, message, Space, Tag } from 'antd';
import type { RowSelectionType } from 'antd/es/table/interface';
import type { FormInstance } from 'antd/lib';
import dayjs from 'dayjs';
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import GroupTagModal from '@/components/GroupTag/GroupTagModal';
import type { TagItem } from '@/components/GroupTag/types';
import type { FileItem } from '@/components/RenameRule';
import {
createSampleTag,
createSampleTagGroup,
deleteSample,
deleteSampleTag,
deleteSampleTagGroup,
deleteSampleTagRelate,
getSampleTagGroup,
getSampleTagPage,
relateSample,
updateSamples,
updateSampleTag,
updateSampleTagGroup,
} from '@/services/ai/sample';
import TagManager from './components/tag-manager';
interface SampleTagDetailProps<T> {
onRefresh?: (type?: string) => void;
type: RowSelectionType;
data?: T[];
}
const SampleTagDetail = <T extends Record<string, any>>(
props: SampleTagDetailProps<T>,
) => {
const formRef = useRef<FormInstance>(null);
const { type = 'radio', data } = props;
const [modalVisible, setModalVisible] = useState<boolean>(false);
const [tagManagerVisible, setTagManagerVisible] = useState<boolean>(false);
const [value, setValue] = useState<{
tagId?: number | number[];
id?: number;
remark?: string;
sampleIds?: number[];
tags?: TagItem[];
updateTime?: number;
createTime?: number;
sampleSize?: number;
sampleMineType?: string;
sampleTime?: number;
}>({});
const handleAddTag = useCallback(() => {
setModalVisible(true);
}, [modalVisible]);
// const radioData = data && data[0];
// // 当 radioData 改变时更新表单值
useEffect(() => {
if (type === 'radio') {
const item = data?.[0];
setValue({ ...item, sampleIds: [item?.id] });
} else {
const sampleIds = data?.map((sample) => sample.id) || [];
const tags = data?.map((sample) => {
return sample.tags;
});
const map = new Map();
const tags_total = tags
?.flat()
.filter((v) => !map.has(v.id) && map.set(v.id, v));
setValue({ tags: tags_total as TagItem[], sampleIds });
}
}, [type, data]);
useEffect(() => {
formRef.current?.setFieldsValue(value);
}, [value]);
const tagNames = useMemo<FileItem[]>(() => {
return (
data?.map((tag) => {
return {
id: tag.id,
originalName: tag.sampleName,
};
}) || []
);
}, [data]);
const onListAddTag = async (tags: TagItem[]) => {
const sampleIds = data?.map((sample) => sample.id);
const ids = tags?.map((tag) => tag.id);
await relateSample({ tagId: ids, sampleIds: sampleIds as number[] });
setModalVisible(false);
const map = new Map();
const newTags = [...(value.tags || []), ...tags];
const tags_total = newTags
?.flat()
.filter((v) => !map.has(v.id) && map.set(v.id, v));
setValue({ ...value, tags: tags_total });
// 执行刷新回调
message.success('添加标签成功');
if (props.onRefresh) {
props.onRefresh();
}
};
const handleDeleteAll = async () => {
const ids = data?.map((sample) => sample.id);
if (ids) {
await deleteSample(ids.join(','));
message.success('删除成功');
if (props.onRefresh) {
props.onRefresh('delete');
}
}
};
// 下载
const handleDownloadAll = () => {};
const handleTagManager = () => {
setTagManagerVisible(true);
};
const forMap = (tags: TagItem[]) => (
<div style={{ display: 'inline-block', marginBottom: 10 }}>
{tags.map((tag) => (
<Tag
closable
key={tag.id}
style={{ marginBottom: 10 }}
onClose={async (e) => {
e.preventDefault();
await deleteSampleTagRelate({
sampleIds: value.sampleIds || [],
tagId: [tag.id],
});
message.success('删除成功');
props?.onRefresh?.();
setValue({ ...value, tags: tags.filter((t) => t.id !== tag.id) });
}}
>
{tag.tagName}
</Tag>
))}
</div>
);
const onRename = () => {
props.onRefresh?.();
setTagManagerVisible(false);
};
return (
<>
<ProForm name="validate_other" formRef={formRef} submitter={false}>
{type === 'radio' && (
<ProFormGroup title="预览">
{data?.[0].sampleFilePath && (
<audio
controls
preload="true"
crossOrigin="anonymous"
style={{ marginBottom: 24 }}
>
<source src={data[0].sampleFilePath} />
<track kind="captions" />
</audio>
)}
</ProFormGroup>
)}
<ProFormGroup title="基本信息">
{type === 'radio' && (
<ProFormText
width="md"
name="sampleName"
placeholder="请输入样本名称"
fieldProps={{
onBlur: async (e) => {
if (e.target.value) {
const newData =
data?.map((sample) => {
return {
id: sample.id,
sampleName: e.target.value,
};
}) || [];
await updateSamples(newData);
props?.onRefresh?.();
message.success('更新成功');
}
},
}}
rules={[{ required: true, message: '样本名称不能为空' }]}
/>
)}
<ProFormText
width="md"
fieldProps={{
onBlur: async (e) => {
if (e.target.value) {
const newData =
data?.map((sample) => {
return {
id: sample.id,
remark: e.target.value,
};
}) || [];
await updateSamples(newData);
props?.onRefresh?.();
}
},
}}
name="remark"
placeholder="请输入注释"
/>
</ProFormGroup>
<ProFormGroup title="标签">
{/* <Form.Item name="tag"> */}
{forMap(value.tags || [])}
</ProFormGroup>
<Button
type="dashed"
block
style={{ marginBottom: 24 }}
onClick={handleAddTag}
>
添加标签
</Button>
<ProFormGroup title="文本信息" block></ProFormGroup>
<Space size={10} style={{ width: '100%', marginBottom: 12 }}>
<span>添加日期: </span>
<span>{dayjs(value.createTime).format('YYYY-MM-DD HH:mm:ss')}</span>
</Space>
<Space size={10} style={{ width: '100%', marginBottom: 12 }}>
<span>修改日期</span>
<span>{dayjs(value.updateTime).format('YYYY-MM-DD HH:mm:ss')}</span>
</Space>
<Space size={10} style={{ width: '100%', marginBottom: 12 }}>
<span>文件大小: </span>
<span>{value.sampleSize}</span>
</Space>
<Space size={10} style={{ width: '100%', marginBottom: 12 }}>
<span>格式: </span>
<span>{value.sampleMineType}</span>
</Space>
{type === 'checkbox' && (
<>
<ProFormGroup title="其他"></ProFormGroup>
<Button
block
style={{ marginBottom: 24 }}
onClick={handleTagManager}
>
批量重命名
</Button>
<Button
block
style={{ marginBottom: 24 }}
onClick={handleDownloadAll}
>
下载到本地
</Button>
<Button
block
color="danger"
style={{ marginBottom: 24 }}
onClick={handleDeleteAll}
>
删除样本
</Button>
</>
)}
</ProForm>
<GroupTagModal
visible={modalVisible}
onCancel={() => setModalVisible(false)}
onChange={onListAddTag}
editable={false}
value={value?.tags}
request={{
groupsApi: {
get: getSampleTagGroup,
create: createSampleTagGroup,
delete: deleteSampleTagGroup,
update: updateSampleTagGroup,
},
tagsApi: {
get: getSampleTagPage,
create: createSampleTag,
delete: deleteSampleTag,
update: updateSampleTag,
},
}}
title="管理技术标签"
width={800}
height={500}
/>
<TagManager
visible={tagManagerVisible}
files={tagNames}
onOk={onRename}
onCancel={() => setTagManagerVisible(false)}
></TagManager>
<Space style={{ width: '100%', justifyContent: 'center', padding: 12 }}>
<Button color="danger" onClick={() => {}}>
下载
</Button>
<Button color="danger" variant="solid" onClick={handleDeleteAll}>
删除
</Button>
</Space>
</>
);
};
export default React.memo(SampleTagDetail) as <T extends Record<string, any>>(
props: SampleTagDetailProps<T>,
) => React.ReactElement;

21
src/pages/ai/sample-tag/index.module.less Normal file
View File

@@ -0,0 +1,21 @@
.tag-content {
display: flex;
width: 100%;
background: #fff;
overflow: auto;
:global {
.ant-pro-table {
flex: 1 auto;
}
.detail {
display: flex;
flex-direction: column;
border-left: 1px solid #e8e8e8;
width: 400px;
padding: 16px;
form {
flex: 1;
}
}
}
}

127
src/pages/ai/sample-tag/index.tsx Normal file
View File

@@ -0,0 +1,127 @@
import type { ActionType } from '@ant-design/pro-components';
import type { RowSelectionType } from 'antd/es/table/interface';
import React, { useRef, useState } from 'react';
import EnhancedProTable from '@/components/EnhancedProTable';
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
import GroupTagModal from '@/components/GroupTag/GroupTagModal';
import UploadCard from '@/components/Upload/UploadCard';
import {
type AiSampleRespVO,
createSampleTag,
createSampleTagGroup,
deleteSampleTag,
deleteSampleTagGroup,
getSamplePage,
getSampleTagGroup,
getSampleTagPage,
type SampleReqVo,
updateSampleTag,
updateSampleTagGroup,
} from '@/services/ai/sample';
import { baseTenantColumns } from './config';
import SampleTagDetail from './detail';
import styles from './index.module.less';
const SampleTag: React.FC = () => {
const tableRef = useRef<ActionType>(null);
const [modalVisible, setModalVisible] = useState(false);
const [selectedRows, setSelectedRows] = useState<AiSampleRespVO[]>([]);
const [selectTableType, setSelectTableType] =
useState<RowSelectionType>('radio');
const handleAll = (selectTableType: RowSelectionType) => {
setSelectedRows([]);
setSelectTableType(selectTableType === 'radio' ? 'checkbox' : 'radio');
};
const handleTags = () => {
setModalVisible(true);
};
const toolbarActions: ToolbarAction[] = [
{
key: 'add',
label: selectTableType === 'checkbox' ? '取消编辑' : '批量编辑',
onClick: () => handleAll(selectTableType),
},
{
key: 'tags',
label: '标签管理',
type: 'primary',
onClick: handleTags,
},
];
const onFetch = async (params: SampleReqVo) => {
const data = await getSamplePage({
...params,
});
return {
data: data.list,
total: data.total,
success: true,
};
};
const onRefresh = (type?: string) => {
tableRef.current?.reload();
tableRef.current?.onValuesChange({}, {});
type && setSelectedRows([]);
};
return (
<>
<UploadCard />
<div className={styles['tag-content']}>
<EnhancedProTable<AiSampleRespVO>
ref={tableRef}
columns={baseTenantColumns}
request={onFetch}
toolbarActions={toolbarActions}
headerTitle="样本列表"
showIndex={false}
enableRowClick={true}
rowSelection={{
type: selectTableType,
selectedRowKeys: selectedRows.map((item) => item.id) as React.Key[],
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
{selectedRows.length > 0 && (
<div className="detail">
<SampleTagDetail<AiSampleRespVO>
type={selectTableType}
data={selectedRows}
onRefresh={onRefresh}
/>
</div>
)}
</div>
<GroupTagModal
visible={modalVisible}
onCancel={() => setModalVisible(false)}
editable={true}
request={{
groupsApi: {
get: getSampleTagGroup,
create: createSampleTagGroup,
delete: deleteSampleTagGroup,
update: updateSampleTagGroup,
},
tagsApi: {
get: getSampleTagPage,
create: createSampleTag,
delete: deleteSampleTag,
update: updateSampleTag,
},
}}
title="管理技术标签"
width={800}
height={500}
/>
</>
);
};
export default SampleTag;

156
src/pages/prod/category/config.tsx Normal file
View File

@@ -0,0 +1,156 @@
import type {
ProColumns,
ProFormColumnsType,
} from '@ant-design/pro-components';
import dayjs from 'dayjs';
import TagEditor from '@/components/TagEditor';
import TinyMCEEditor from '@/components/Tinymce';
export const baseTenantColumns: ProColumns<API.CategoryDO>[] = [
{
title: '类目名称',
dataIndex: 'categoryName',
width: 100,
},
{
title: '类目ID',
dataIndex: 'categoryId',
},
{
title: '类目层级',
dataIndex: 'grade',
hideInSearch: true, // 在搜索表单中隐藏
},
{
title: '父级类目',
dataIndex: 'parentName',
hideInSearch: true, // 在搜索表单中隐藏
},
{
title: '排序权重',
dataIndex: 'sort',
hideInSearch: true, // 在搜索表单中隐藏
},
{
title: '状态',
dataIndex: 'status',
valueType: 'switch',
hideInSearch: true,
},
{
title: '创建时间',
dataIndex: 'createTime',
valueType: 'dateRange',
hideInSearch: true, // 在搜索表单中隐藏
render: (_, record: API.CategoryDO) =>
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
},
];
export const formColumns = (data: {
type: string;
grade: number;
}): ProFormColumnsType[] => [
{
title: '类目',
dataIndex: 'grade',
valueType: 'radio',
fieldProps: {
value: data.grade || 1,
options: [
{ label: '一级类目', value: 1 },
{ label: '二级类目', value: 2 },
{ label: '三级类目', value: 3 },
],
disabled: data.type === 'create',
},
},
{
title: '类目名称',
dataIndex: 'username',
formItemProps: {
rules: [
{
required: true,
message: '请输入用户名',
},
],
},
},
{
title: '排序权重',
dataIndex: 'sort',
valueType: 'digit',
},
{
title: '类目描述',
dataIndex: 'description',
valueType: 'textarea',
renderFormItem: () => {
return <TinyMCEEditor />;
},
},
{
title: '关联父级',
dataIndex: 'parentId',
valueType: 'select',
hideInForm: data.grade - 1 === 0,
},
{
title: '类目icon',
dataIndex: 'icon',
},
{
title: '类目标签',
dataIndex: 'tages',
renderFormItem: () => {
return (
<TagEditor
placeholder="输入标签名称"
maxCount={10}
tagProps={{
color: 'blue',
}}
/>
);
},
},
{
title: '类目状态',
dataIndex: 'status',
hideInForm: data.type === 'create',
},
{
title: '类目ID',
dataIndex: 'categoryId',
hideInForm: data.type === 'create',
},
{
title: '创建时间',
dataIndex: 'createTime',
valueType: 'dateTime',
hideInForm: data.type === 'create',
},
{
title: '创建人',
dataIndex: 'creator',
hideInForm: data.type === 'create',
},
{
title: '更新时间',
dataIndex: 'updateTime',
valueType: 'dateTime',
hideInForm: data.type === 'create',
},
{
title: '更新人',
dataIndex: 'updator',
hideInForm: data.type === 'create',
},
];
// {
// title: "模板内容",
// dataIndex: "content",
// valueType: "textarea",
// },

129
src/pages/prod/category/index.tsx Normal file
View File

@@ -0,0 +1,129 @@
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import type { TabsProps } from 'antd';
import { Tabs } from 'antd';
import { useCallback, useRef, useState } from 'react';
import ConfigurableDrawerForm, {
type ConfigurableDrawerFormRef,
} from '@/components/DrawerForm';
import EnhancedProTable from '@/components/EnhancedProTable';
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
import { formStatusType } from '@/constants';
import { getCategoryList } from '@/services/prodApi/category';
import { baseTenantColumns, formColumns } from './config';
const ProdCategory = () => {
const tableRef = useRef<ActionType>(null);
const [type, setType] = useState<'create' | 'update' | 'test'>('create');
const [grade, setGrade] = useState<string>('');
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
const onChange = useCallback(
(key: string) => {
setGrade(key);
},
[grade],
);
const onFetch = async (params: API.getProductCategoryCategoryListParams) => {
const data = await getCategoryList({
...params,
grade: grade ? Number(grade) : undefined,
});
return {
data: data,
success: true,
};
};
const handleAdd = () => {
setType('create');
configurableDrawerRef.current?.open();
};
const toolbarActions: ToolbarAction[] = [
{
key: 'add',
label: '新建',
type: 'primary',
icon: <PlusOutlined />,
onClick: handleAdd,
},
];
const handleEdit = async (row: API.CategoryDO) => {
setType('update');
configurableDrawerRef.current?.open(row);
};
const handleSubmit = async (values: API.CategoryDO) => {
console.log('values', values);
// const success = await handleAdd(values as API.CategoryDO);
// if (success) {
// handleClose();
// }
return true;
};
const actionColumns: ProColumns<API.CategoryDO> = {
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 120,
render: (_text: React.ReactNode, record: API.CategoryDO, _: number) => [
<a key="edit" onClick={() => handleEdit(record)}>
编辑
</a>,
<a key="detail">详情</a>,
],
};
const columns = [...baseTenantColumns, actionColumns];
const renderChildren = () => {
return (
<>
<EnhancedProTable<API.CategoryDO>
ref={tableRef}
columns={columns}
rowKey="categoryId"
request={onFetch}
toolbarActions={toolbarActions}
headerTitle="短信渠道"
showIndex={false}
showSelection={false}
/>
<ConfigurableDrawerForm
ref={configurableDrawerRef}
title={formStatusType[type]}
// width="50vw"
columns={formColumns({ grade: Number(grade), type })}
onSubmit={handleSubmit}
/>
</>
);
};
const items: TabsProps['items'] = [
{
key: '',
label: '全部分类',
children: renderChildren(),
},
{
key: '3',
label: '三级分类',
children: renderChildren(),
},
{
key: '2',
label: '二级分类',
children: renderChildren(),
},
{
key: '1',
label: '一级分类',
children: renderChildren(),
},
];
return <Tabs defaultActiveKey={grade} items={items} onChange={onChange} />;
};
export default ProdCategory;

5
src/pages/prod/list/index.tsx Normal file
View File

@@ -0,0 +1,5 @@
const ProdList = () => {
return <div>ProdList</div>;
};
export default ProdList;

170
src/pages/system/dept/config.tsx Normal file
View File

@@ -0,0 +1,170 @@
import type {
ProColumns,
ProFormColumnsType,
} from '@ant-design/pro-components';
import { Tag } from 'antd';
import dayjs from 'dayjs';
import { tenantStatus } from '@/constants';
import type { DeptVO } from '@/services/system/dept';
import { getStatusLabel } from '@/utils/constant';
export const baseDeptColumns: ProColumns<DeptVO>[] = [
{
title: '部门名称',
dataIndex: 'name',
ellipsis: true,
hideInSearch: true,
},
// { prop: "leaderUserId", label: "负责人", width: 100 },
{
title: '负责人',
dataIndex: 'leaderUserId',
hideInSearch: true,
},
// { prop: "sort", label: "排序", width: 100 },
{
title: '排序',
dataIndex: 'sort',
hideInSearch: true,
},
// {
// prop: "status",
// label: "状态",
// width: 100,
// render: (record) => (
// <ElTag type={record.status == 1 ? "info" : "primary"}>
// {getStatusLabel(tenantStatus, record.status)}
// </ElTag>
// )
// },
{
title: '状态',
dataIndex: 'status',
hideInSearch: true,
render: (_, record: DeptVO) => [
<Tag
key={record.status}
color={record.status === 1 ? 'default' : 'processing'}
>
{getStatusLabel(tenantStatus, record.status)}
</Tag>,
],
},
// {
// prop: "createTime",
// label: "创建时间",
// width: 160,
// render: (row) => dateFormatter(row.createTime)
// },
{
title: '创建时间',
dataIndex: 'createTime',
valueType: 'dateRange',
search: {
transform: (value) => {
return {
'createTime[0]': dayjs(value[0])
.startOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
'createTime[1]': dayjs(value[1])
.endOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
};
},
},
render: (_, record: DeptVO) =>
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
},
];
export const formColumns = (_type: string): ProFormColumnsType[] => [
{
title: '上级部门',
dataIndex: 'parentId',
valueType: 'treeSelect',
fieldProps: () => {
return {
multiple: true,
placeholder: '请选择上级部门',
options: [{ label: '11', value: 5016 }],
};
},
},
{
title: '部门名称',
dataIndex: 'name',
valueType: 'text',
formItemProps: {
rules: [
{
required: true,
message: '请输入部门名称',
},
],
},
},
{
title: '显示顺序',
dataIndex: 'sort',
valueType: 'digit',
fieldProps: {
min: 0,
},
formItemProps: {
rules: [
{
required: true,
message: '请输入显示顺序',
},
],
},
},
{
title: '负责人',
dataIndex: 'leaderUserId',
formItemProps: {
rules: [
{
required: true,
message: '请选择负责人',
},
],
},
},
{
title: '邮箱',
dataIndex: 'email',
formItemProps: {
rules: [
{
required: true,
message: '请输入邮箱',
},
],
},
},
{
title: '状态',
dataIndex: 'status',
valueType: 'select',
fieldProps: {
options: [
{
label: '正常',
value: 1,
},
{
label: '禁用',
value: 2,
},
],
},
formItemProps: {
rules: [
{
required: true,
},
],
},
},
];

133
src/pages/system/dept/index.tsx
View File

@@ -1,5 +1,136 @@
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { Popconfirm } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import ConfigurableDrawerForm, {
type ConfigurableDrawerFormRef,
} from '@/components/DrawerForm';
import EnhancedProTable from '@/components/EnhancedProTable';
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
import { formStatusType } from '@/constants';
import {
createDept,
type DeptReqVO,
type DeptVO,
deleteDept,
getDeptPage,
updateDept,
} from '@/services/system/dept';
import { handleTree } from '@/utils/tree';
import { baseDeptColumns, formColumns } from './config';
const SyStemDept = () => { const SyStemDept = () => {
return <>SyStemDept</>; const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
const tableRef = useRef<ActionType>(null);
const [type, setType] = useState<'create' | 'update'>('create');
const [id, setId] = useState<number>(0);
const handleEdit = (record: DeptVO) => {
setType('update');
setId(record.id);
configurableDrawerRef.current?.open(record);
};
const onFetch = async (
params: DeptReqVO & {
pageSize?: number;
current?: number;
},
) => {
const data = await getDeptPage({
...params,
pageNo: params.current,
pageSize: params.pageSize,
});
return {
data: handleTree(data),
success: true,
total: data.total,
};
};
const handleAdd = () => {
setType('create');
configurableDrawerRef.current?.open({});
};
const handleSubmit = useCallback(
async (values: DeptVO) => {
if (type === 'create') {
await createDept(values);
} else {
await updateDept({
...values,
id,
});
}
tableRef.current?.reload();
return true;
},
[type, id],
);
const toolbarActions: ToolbarAction[] = [
{
key: 'add',
label: '新建',
type: 'primary',
icon: <PlusOutlined />,
onClick: handleAdd,
},
];
const actionColumns: ProColumns<DeptVO> = {
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 120,
render: (_text: React.ReactNode, record: DeptVO, _: any, action: any) => [
<a key="editable" onClick={() => handleEdit(record)}>
编辑
</a>,
<Popconfirm
title="是否删除?"
key="delete"
onConfirm={async () => {
await deleteDept(record.id);
action?.reload();
}}
okText="是"
cancelText="否"
>
<a>删除</a>
</Popconfirm>,
],
};
const columns = [...baseDeptColumns, actionColumns];
return (
<>
<EnhancedProTable<DeptVO>
ref={tableRef}
columns={columns}
request={onFetch}
toolbarActions={toolbarActions}
headerTitle="租户列表"
showIndex={false}
showSelection={false}
expandable={{
defaultExpandAllRows: true,
}}
/>
<ConfigurableDrawerForm
ref={configurableDrawerRef}
title={formStatusType[type]}
columns={formColumns(type)}
onSubmit={handleSubmit}
/>
</>
);
}; };
export default SyStemDept; export default SyStemDept;

120
src/pages/system/dict/config.tsx Normal file
View File

@@ -0,0 +1,120 @@
import type {
ProColumns,
ProFormColumnsType,
} from '@ant-design/pro-components';
import { Tag } from 'antd';
import dayjs from 'dayjs';
import { tenantStatus } from '@/constants';
import type { DictTypeVO } from '@/services/system/dict/dict.type';
export const baseDictTypeColumns: ProColumns<DictTypeVO>[] = [
{
title: '字典编号',
dataIndex: 'id',
width: 80,
align: 'left',
hideInSearch: true,
},
{
title: '字典名称',
dataIndex: 'name',
width: 120,
},
{
title: '字典类型',
dataIndex: 'type',
width: 120,
},
{
title: '状态',
dataIndex: 'status',
width: 100,
render: (_, record) => (
<Tag
key={record.status}
color={record.status === 1 ? 'default' : 'processing'}
>
{record.status === 1 ? '正常' : '禁用'}
</Tag>
),
},
{
title: '备注',
dataIndex: 'remark',
width: 120,
hideInSearch: true, // 在搜索表单中隐藏
},
{
title: '创建时间',
dataIndex: 'createTime',
valueType: 'dateRange',
search: {
transform: (value) => {
return {
'createTime[0]': dayjs(value[0])
.startOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
'createTime[1]': dayjs(value[1])
.endOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
};
},
},
render: (_, record: DictTypeVO) =>
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
},
];
export const formColumns = (type: string): ProFormColumnsType[] => [
{
title: '字典名称',
dataIndex: 'name',
valueType: 'text',
colProps: {
span: 12,
},
formItemProps: {
rules: [
{
required: true,
message: '请输入字典名称',
},
],
},
},
{
title: '字典类型',
dataIndex: 'type',
valueType: 'text',
fieldProps: {
disabled: type === 'update',
},
colProps: {
span: 12,
},
formItemProps: {
rules: [
{
required: true,
message: '请输入字典类型',
},
],
},
},
{
title: '状态',
dataIndex: 'status',
valueType: 'select',
fieldProps: {
options: tenantStatus,
},
},
{
title: '备注',
dataIndex: 'remark',
valueType: 'textarea',
colProps: {
span: 24,
},
},
];

189
src/pages/system/dict/data/config.tsx Normal file
View File

@@ -0,0 +1,189 @@
import type {
ProColumns,
ProFormColumnsType,
} from '@ant-design/pro-components';
import { Tag } from 'antd';
import dayjs from 'dayjs';
import { tenantStatus } from '@/constants';
import type { DictDataVO } from '@/services/system/dict/dict.data';
import { getStatusLabel } from '@/utils/constant';
export const baseDictDataColumns: ProColumns<DictDataVO>[] = [
{
title: '字典编码',
dataIndex: 'id',
width: 80,
hideInSearch: true,
},
{
title: '字典标签',
dataIndex: 'label',
width: 120,
},
{
title: '字典键值',
dataIndex: 'value',
width: 120,
},
{
title: '字典排序',
dataIndex: 'sort',
width: 80,
},
{
title: '状态',
dataIndex: 'status',
width: 80,
render: (_, record) => (
<Tag color={record.status === 1 ? 'red' : 'green'}>
{getStatusLabel(tenantStatus, record.status)}
</Tag>
),
},
{
title: '颜色类型',
dataIndex: 'colorType',
width: 80,
},
{
title: 'CSS Class',
dataIndex: 'cssClass',
width: 120,
},
{
title: '备注',
dataIndex: 'remark',
width: 120,
},
{
title: '创建时间',
dataIndex: 'createTime',
valueType: 'dateRange',
search: {
transform: (value) => {
return {
'createTime[0]': dayjs(value[0])
.startOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
'createTime[1]': dayjs(value[1])
.endOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
};
},
},
render: (_, record: DictDataVO) =>
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
},
];
export const formColumns = (_type: string): ProFormColumnsType[] => [
{
title: '字典类型',
dataIndex: 'dictType',
fieldProps: {
disabled: true,
},
},
{
title: '字典标签',
dataIndex: 'label',
formItemProps: {
rules: [
{
required: true,
message: '请输入字典标签',
},
],
},
},
{
title: '字典键值',
dataIndex: 'value',
formItemProps: {
rules: [
{
required: true,
message: '请输入字典键值',
},
],
},
},
{
title: '显示排序',
dataIndex: 'sort',
valueType: 'digit',
fieldProps: {
min: 0,
max: 9999,
},
formItemProps: {
rules: [
{
required: true,
message: '请输入排序',
},
],
},
},
{
title: '状态',
dataIndex: 'status',
valueType: 'select',
fieldProps: {
options: [
{
label: '启用',
value: 1,
},
{
label: '禁用',
value: 0,
},
],
},
formItemProps: {
rules: [
{
required: true,
},
],
},
},
{
title: '颜色类型',
dataIndex: 'colorType',
valueType: 'select',
fieldProps: {
options: [
{
label: '默认(waiting)',
value: 'waiting',
},
{
label: '成功(success)',
value: 'success',
},
{
label: '信息(processing)',
value: 'processing',
},
{
label: '失败(error)',
value: 'error',
},
{
label: '警告(warning)',
value: 'warning',
},
],
},
},
{
title: 'CSS Class',
dataIndex: 'cssClass',
},
{
title: '备注',
dataIndex: 'remark',
},
];

139
src/pages/system/dict/data/index.tsx Normal file
View File

@@ -0,0 +1,139 @@
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { useParams } from '@umijs/max';
import { Popconfirm } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import ConfigurableDrawerForm, {
type ConfigurableDrawerFormRef,
} from '@/components/DrawerForm';
import EnhancedProTable from '@/components/EnhancedProTable';
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
import { formStatusType } from '@/constants';
import {
createDictData,
type DictDataVO,
deleteDictData,
getDictDataPage,
updateDictData,
} from '@/services/system/dict/dict.data';
import { baseDictDataColumns, formColumns } from './config';
const SyStemDictData = () => {
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
const tableRef = useRef<ActionType>(null);
const [type, setType] = useState<'create' | 'update'>('create');
const [id, setId] = useState<number>(0);
const routerParams = useParams();
console.log(routerParams);
const handleEdit = (record: DictDataVO) => {
setType('update');
setId(record.id);
configurableDrawerRef.current?.open(record);
};
const onFetch = async (params: { pageSize?: number; current?: number }) => {
const data = await getDictDataPage({
...params,
dictType: routerParams.type,
pageNo: params.current,
pageSize: params.pageSize,
});
return {
data: data.list,
success: true,
total: data.total,
};
};
const handleAdd = () => {
setType('create');
configurableDrawerRef.current?.open({
dictType: routerParams.type,
});
};
const handleSubmit = useCallback(
async (values: DictDataVO) => {
if (type === 'create') {
await createDictData(values);
} else {
await updateDictData({
...values,
id,
});
}
tableRef.current?.reload();
return true;
},
[type, id],
);
const toolbarActions: ToolbarAction[] = [
{
key: 'add',
label: '新建',
type: 'primary',
icon: <PlusOutlined />,
onClick: handleAdd,
},
];
const actionColumns: ProColumns<DictDataVO> = {
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 120,
render: (
_text: React.ReactNode,
record: DictDataVO,
_: any,
action: any,
) => [
<a key="editable" onClick={() => handleEdit(record)}>
编辑
</a>,
<Popconfirm
title="是否删除?"
key="delete"
onConfirm={async () => {
await deleteDictData(record.id);
action?.reload();
}}
okText="是"
cancelText="否"
>
<a>删除</a>
</Popconfirm>,
],
};
const columns = [...baseDictDataColumns, actionColumns];
return (
<>
<EnhancedProTable<DictDataVO>
ref={tableRef}
columns={columns}
request={onFetch}
toolbarActions={toolbarActions}
headerTitle="租户列表"
showIndex={false}
showSelection={false}
/>
<ConfigurableDrawerForm
ref={configurableDrawerRef}
title={formStatusType[type]}
columns={formColumns(type)}
onSubmit={handleSubmit}
/>
</>
);
};
export default SyStemDictData;

141
src/pages/system/dict/index.tsx
View File

@@ -1,5 +1,144 @@
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { history } from '@umijs/max';
import { Popconfirm } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import ConfigurableDrawerForm, {
type ConfigurableDrawerFormRef,
} from '@/components/DrawerForm';
import EnhancedProTable from '@/components/EnhancedProTable';
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
import { formStatusType } from '@/constants';
import {
createDictType,
type DictTypeVO,
deleteDictType,
getDictTypePage,
updateDictType,
} from '@/services/system/dict/dict.type';
import { baseDictTypeColumns, formColumns } from './config';
const SyStemDict = () => { const SyStemDict = () => {
return <>SyStemDict</>; const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
const tableRef = useRef<ActionType>(null);
const [type, setType] = useState<'create' | 'update'>('create');
const [id, setId] = useState<number>(0);
//获取路由数据
const handleEdit = (record: DictTypeVO) => {
setType('update');
setId(record.id);
configurableDrawerRef.current?.open(record);
};
const onFetch = async (params: { pageSize?: number; current?: number }) => {
const data = await getDictTypePage({
...params,
pageNo: params.current,
pageSize: params.pageSize,
});
return {
data: data.list,
success: true,
total: data.total,
};
};
const handleAdd = () => {
setType('create');
configurableDrawerRef.current?.open({});
};
const handleSubmit = useCallback(
async (values: DictTypeVO) => {
if (type === 'create') {
await createDictType(values);
} else {
await updateDictType({
...values,
id,
});
}
tableRef.current?.reload();
return true;
},
[type, id],
);
const toolbarActions: ToolbarAction[] = [
{
key: 'add',
label: '新建',
type: 'primary',
icon: <PlusOutlined />,
onClick: handleAdd,
},
];
const actionColumns: ProColumns<DictTypeVO> = {
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 120,
render: (
_text: React.ReactNode,
record: DictTypeVO,
_: any,
action: any,
) => [
<a key="editable" onClick={() => handleEdit(record)}>
编辑
</a>,
<Popconfirm
title="是否删除?"
key="delete"
onConfirm={async () => {
await deleteDictType(record.id);
action?.reload();
}}
okText="是"
cancelText="否"
>
<a>删除</a>
</Popconfirm>,
<a
key="data"
onClick={() =>
history.push({
pathname: '/system/dict/data/' + record.type,
})
}
>
数据
</a>,
],
};
const columns = [...baseDictTypeColumns, actionColumns];
return (
<>
<EnhancedProTable<DictTypeVO>
ref={tableRef}
columns={columns}
request={onFetch}
toolbarActions={toolbarActions}
headerTitle="租户列表"
showIndex={false}
showSelection={false}
/>
<ConfigurableDrawerForm
ref={configurableDrawerRef}
title={formStatusType[type]}
columns={formColumns(type)}
onSubmit={handleSubmit}
/>
</>
);
}; };
export default SyStemDict; export default SyStemDict;

125
src/pages/system/menu/config.tsx Normal file
View File

@@ -0,0 +1,125 @@
// src/pages/system/menu/config.tsx
import type {
ProColumns,
ProFormColumnsType,
} from '@ant-design/pro-components';
import { Switch } from 'antd';
import type { MenuVO } from '@/services/system/menu';
export const baseMenuColumns: ProColumns<MenuVO>[] = [
{
title: '菜单名称',
dataIndex: 'name',
width: 150,
},
{
title: '图标',
dataIndex: 'icon',
width: 60,
render: (_, record: MenuVO) => (
<span>
{record.icon ? <i className={`anticon ${record.icon}`} /> : '—'}
</span>
),
},
{
title: '排序',
dataIndex: 'sort',
width: 80,
},
{
title: '权限标识',
dataIndex: 'permission',
width: 150,
},
{
title: '组件路径',
dataIndex: 'component',
width: 150,
},
{
title: '组件名称',
dataIndex: 'componentName',
width: 150,
},
{
title: '状态',
dataIndex: 'status',
width: 80,
render: (_, record: MenuVO) => (
<Switch
checked={record.status === 1}
disabled={true} // 可后续改为可编辑
/>
),
},
];
export const formColumns = (_type: string): ProFormColumnsType[] => [
{
title: '菜单名称',
dataIndex: 'name',
formItemProps: {
rules: [
{
required: true,
message: '请输入菜单名称',
},
],
},
},
{
title: '图标',
dataIndex: 'icon',
valueType: 'select',
fieldProps: {
placeholder: '请选择图标',
options: [
{ label: '商品', value: 'icon-product' },
{ label: '系统', value: 'icon-system' },
{ label: '用户', value: 'icon-user' },
{ label: '设置', value: 'icon-setting' },
],
},
},
{
title: '排序',
dataIndex: 'sort',
valueType: 'digit',
fieldProps: {
placeholder: '请输入排序值',
},
},
{
title: '权限标识',
dataIndex: 'permission',
fieldProps: {
placeholder: '请输入权限标识',
},
},
{
title: '组件路径',
dataIndex: 'component',
fieldProps: {
placeholder: '请输入组件路径',
},
},
{
title: '组件名称',
dataIndex: 'componentName',
fieldProps: {
placeholder: '请输入组件名称',
},
},
{
title: '状态',
dataIndex: 'status',
valueType: 'select',
fieldProps: {
options: [
{ label: '启用', value: 1 },
{ label: '禁用', value: 0 },
],
},
},
];

127
src/pages/system/menu/index.tsx
View File

@@ -1,5 +1,126 @@
const SyStemMenu = () => { // src/pages/system/menu/index.tsx
return <>SyStemMenu</>;
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { Popconfirm } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import ConfigurableDrawerForm, {
type ConfigurableDrawerFormRef,
} from '@/components/DrawerForm';
import EnhancedProTable from '@/components/EnhancedProTable';
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
import { formStatusType } from '@/constants';
import {
createMenu,
deleteMenu,
getMenuList,
type MenuReqVO,
type MenuVO,
updateMenu,
} from '@/services/system/menu';
import { handleTree } from '@/utils/tree';
import { baseMenuColumns, formColumns } from './config';
const SystemMenu = () => {
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
const tableRef = useRef<ActionType>(null);
const [type, setType] = useState<'create' | 'update'>('create');
const [id, setId] = useState<number>(0);
const handleEdit = (record: MenuVO) => {
setType('update');
setId(record.id);
configurableDrawerRef.current?.open(record);
}; };
export default SyStemMenu; const onFetch = async (params: MenuReqVO) => {
const data = await getMenuList({
...params,
});
return {
data: handleTree(data),
success: true,
total: data.total,
};
};
const handleAdd = () => {
setType('create');
configurableDrawerRef.current?.open({});
};
const handleSubmit = useCallback(
async (values: MenuVO) => {
if (type === 'create') {
await createMenu(values);
} else {
await updateMenu({
...values,
id,
});
}
tableRef.current?.reload();
return true;
},
[type, id],
);
const toolbarActions: ToolbarAction[] = [
{
key: 'add',
label: '新建',
type: 'primary',
icon: <PlusOutlined />,
onClick: handleAdd,
},
];
const actionColumns: ProColumns<MenuVO> = {
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 120,
render: (_text: React.ReactNode, record: MenuVO, _: any, action: any) => [
<a key="editable" onClick={() => handleEdit(record)}>
编辑
</a>,
<Popconfirm
title="是否删除?"
key="delete"
onConfirm={async () => {
await deleteMenu(record.id);
action?.reload();
}}
okText="是"
cancelText="否"
>
<a>删除</a>
</Popconfirm>,
],
};
const columns = [...baseMenuColumns, actionColumns];
return (
<>
<EnhancedProTable<MenuVO>
ref={tableRef}
columns={columns}
request={onFetch}
toolbarActions={toolbarActions}
headerTitle="租户列表"
showIndex={false}
showSelection={false}
/>
<ConfigurableDrawerForm
ref={configurableDrawerRef}
title={formStatusType[type]}
columns={formColumns(type)}
onSubmit={handleSubmit}
/>
</>
);
};
export default SystemMenu;

3
src/pages/system/messages/mail/account/config.tsx
View File

@@ -1,6 +1,5 @@
import type { import type {
ProColumns, ProColumns,
ProDescriptionsItemProps,
ProFormColumnsType, ProFormColumnsType,
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
@@ -160,7 +159,7 @@ export const formColumns = (): ProFormColumnsType[] => [
}, },
]; ];
export const formTestColumns = (type: string): ProFormColumnsType[] => [ export const formTestColumns = (): ProFormColumnsType[] => [
{ {
title: '模板内容', title: '模板内容',
dataIndex: 'content', dataIndex: 'content',

21
src/pages/system/messages/mail/account/index.tsx
View File

@@ -15,18 +15,17 @@ import { formStatusType } from '@/constants';
import { import {
createMailAccount, createMailAccount,
deleteMailAccount, deleteMailAccount,
getMailAccount,
getMailAccountPage, getMailAccountPage,
type MailAccountVO, type MailAccountVO,
updateMailAccount, updateMailAccount,
} from '@/services/system/message/mail/account'; } from '@/services/system/message/mail/account';
import { baseTenantColumns, formColumns, formTestColumns } from './config'; import { baseTenantColumns, formColumns } from './config';
const SyStemMessageSmsTemplate = () => { const SyStemMessageSmsTemplate = () => {
const tableRef = useRef<ActionType>(null); const tableRef = useRef<ActionType>(null);
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null); const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
const [type, setType] = useState<'create' | 'update' | 'test'>('create'); const [type, setType] = useState<'create' | 'update' | 'test'>('create');
const testRef = useRef<ConfigurableDrawerFormRef>(null); // const testRef = useRef<ConfigurableDrawerFormRef>(null);
const [currentItem, setCurrentItem] = useState<MailAccountVO>(); const [currentItem, setCurrentItem] = useState<MailAccountVO>();
const onFetch = async ( const onFetch = async (
params: MailAccountVO & { params: MailAccountVO & {
@@ -46,11 +45,11 @@ const SyStemMessageSmsTemplate = () => {
}; };
}; };
const handleSend = async (record: MailAccountVO) => { // const handleSend = async (record: MailAccountVO) => {
setType('test'); // setType("test");
setCurrentItem(record); // setCurrentItem(record);
testRef.current?.open(record); // testRef.current?.open(record);
}; // };
const handleEdit = (record: MailAccountVO) => { const handleEdit = (record: MailAccountVO) => {
setType('update'); setType('update');
@@ -68,10 +67,10 @@ const SyStemMessageSmsTemplate = () => {
if (type === 'create') { if (type === 'create') {
await createMailAccount(values); await createMailAccount(values);
message.success('创建成功'); message.success('创建成功');
} else { } else if (currentItem?.id) {
await updateMailAccount({ await updateMailAccount({
...values, ...values,
id: currentItem!.id, id: currentItem.id,
}); });
message.success('编辑成功'); message.success('编辑成功');
} }
@@ -97,7 +96,7 @@ const SyStemMessageSmsTemplate = () => {
fixed: 'right', fixed: 'right',
width: 120, width: 120,
render: ( render: (
text: React.ReactNode, _text: React.ReactNode,
record: MailAccountVO, record: MailAccountVO,
_: number, _: number,
action: ProCoreActionType | undefined, action: ProCoreActionType | undefined,

121
src/pages/system/post/config.tsx Normal file
View File

@@ -0,0 +1,121 @@
import type {
ProColumns,
ProFormColumnsType,
} from '@ant-design/pro-components';
import { Tag } from 'antd';
import dayjs from 'dayjs';
import { tenantStatus } from '@/constants';
import type { PostVO } from '@/services/system/post';
import { getStatusLabel } from '@/utils/constant';
export const basePostColumns: ProColumns<PostVO>[] = [
{
title: '岗位编号',
dataIndex: 'id',
width: 80,
},
{
title: '岗位名称',
dataIndex: 'name',
width: 120,
},
{
title: '岗位编码',
dataIndex: 'code',
width: 120,
},
{
title: '岗位顺序',
dataIndex: 'sort',
width: 80,
},
{
title: '岗位备注',
dataIndex: 'remark',
width: 120,
},
{
title: '状态',
dataIndex: 'status',
width: 100,
render: (_, record: PostVO) => [
<Tag
key={record.status}
color={record.status === 1 ? 'default' : 'processing'}
>
{getStatusLabel(tenantStatus, record.status)}
</Tag>,
],
},
{
title: '创建时间',
dataIndex: 'createTime',
valueType: 'dateRange',
search: {
transform: (value) => {
return {
'createTime[0]': dayjs(value[0])
.startOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
'createTime[1]': dayjs(value[1])
.endOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
};
},
},
render: (_, record: PostVO) =>
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
},
];
export const formColumns = (_type: string): ProFormColumnsType[] => [
{
title: '岗位名称',
dataIndex: 'name',
formItemProps: {
rules: [
{
required: true,
message: '请输入岗位名称',
},
],
},
},
{
title: '岗位编码',
dataIndex: 'code',
formItemProps: {
rules: [
{
required: true,
message: '请输入岗位编码',
},
],
},
},
{
title: '岗位顺序',
dataIndex: 'sort',
valueType: 'digit',
fieldProps: {
placeholder: '请输入排序值',
},
},
{
title: '状态',
dataIndex: 'status',
valueType: 'select',
fieldProps: {
placeholder: '请选择状态',
options: tenantStatus,
},
},
{
title: '备注',
dataIndex: 'remark',
valueType: 'textarea',
fieldProps: {
placeholder: '请输入备注',
},
},
];

129
src/pages/system/post/index.tsx
View File

@@ -1,5 +1,132 @@
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { Popconfirm } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import ConfigurableDrawerForm, {
type ConfigurableDrawerFormRef,
} from '@/components/DrawerForm';
import EnhancedProTable from '@/components/EnhancedProTable';
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
import { formStatusType } from '@/constants';
import {
createPost,
deletePost,
getPostPage,
type PostReqVO,
type PostVO,
updatePost,
} from '@/services/system/post';
import { basePostColumns, formColumns } from './config';
const SyStemPost = () => { const SyStemPost = () => {
return <>SyStemPost</>; const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
const tableRef = useRef<ActionType>(null);
const [type, setType] = useState<'create' | 'update'>('create');
const [id, setId] = useState<number>(0);
const handleEdit = (record: PostVO) => {
setType('update');
setId(record.id);
configurableDrawerRef.current?.open(record);
};
const onFetch = async (
params: PostReqVO & {
pageSize?: number;
current?: number;
},
) => {
const data = await getPostPage({
...params,
pageNo: params.current,
pageSize: params.pageSize,
});
return {
data: data.list,
success: true,
total: data.total,
};
};
const handleAdd = () => {
setType('create');
configurableDrawerRef.current?.open({});
};
const handleSubmit = useCallback(
async (values: PostVO) => {
if (type === 'create') {
await createPost(values);
} else {
await updatePost({
...values,
id,
});
}
tableRef.current?.reload();
return true;
},
[type, id],
);
const toolbarActions: ToolbarAction[] = [
{
key: 'add',
label: '新建',
type: 'primary',
icon: <PlusOutlined />,
onClick: handleAdd,
},
];
const actionColumns: ProColumns<PostVO> = {
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 120,
render: (_text: React.ReactNode, record: PostVO, _: any, action: any) => [
<a key="editable" onClick={() => handleEdit(record)}>
编辑
</a>,
<Popconfirm
title="是否删除?"
key="delete"
onConfirm={async () => {
await deletePost(record.id);
action?.reload();
}}
okText="是"
cancelText="否"
>
<a>删除</a>
</Popconfirm>,
],
};
const columns = [...basePostColumns, actionColumns];
return (
<>
<EnhancedProTable<PostVO>
ref={tableRef}
columns={columns}
request={onFetch}
toolbarActions={toolbarActions}
headerTitle="租户列表"
showIndex={false}
showSelection={false}
/>
<ConfigurableDrawerForm
ref={configurableDrawerRef}
title={formStatusType[type]}
columns={formColumns(type)}
onSubmit={handleSubmit}
/>
</>
);
}; };
export default SyStemPost; export default SyStemPost;

143
src/pages/system/role/config.tsx Normal file
View File

@@ -0,0 +1,143 @@
import type {
ProColumns,
ProFormColumnsType,
} from '@ant-design/pro-components';
import { Tag } from 'antd';
import dayjs from 'dayjs';
import { tenantStatus } from '@/constants';
import type { RoleVO } from '@/services/system/role';
import { getStatusLabel } from '@/utils/constant';
export const baseTenantColumns: ProColumns<RoleVO>[] = [
{
title: '角色编号',
dataIndex: 'id',
width: 100,
hideInSearch: true, // 在搜索表单中隐藏
},
{
title: '角色名称',
dataIndex: 'name',
width: 100,
},
{
title: '角色类型',
dataIndex: 'type',
width: 100,
render: (_, record: RoleVO) => [
<Tag key={record.type} color={record.type === 1 ? 'error' : 'processing'}>
{record.type === 1 ? '内置' : '自定义'}
</Tag>,
],
hideInSearch: true,
},
{
title: '角色标识',
dataIndex: 'code',
width: 150,
render: (_, record: RoleVO) => [
<Tag key={record.code} color={record.type === 1 ? 'error' : 'processing'}>
{record.code}
</Tag>,
],
hideInSearch: true,
},
{
title: '显示顺序',
dataIndex: 'sort',
width: 100,
hideInSearch: true,
},
{
title: '备注',
dataIndex: 'remark',
hideInSearch: true, // 在搜索表单中隐藏
},
{
title: '租户状态',
dataIndex: 'status',
width: 100,
render: (_, record: RoleVO) => [
<Tag
key={record.status}
color={record.status === 1 ? 'default' : 'processing'}
>
{getStatusLabel(tenantStatus, record.status)}
</Tag>,
],
},
{
title: '创建时间',
dataIndex: 'createTime',
valueType: 'dateRange',
search: {
transform: (value) => {
return {
'createTime[0]': dayjs(value[0])
.startOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
'createTime[1]': dayjs(value[1])
.endOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
};
},
},
render: (_, record: RoleVO) =>
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
},
];
export const formColumns = (_type: string): ProFormColumnsType[] => [
{
title: '角色名称',
dataIndex: 'name',
formItemProps: {
rules: [
{
required: true,
message: '请输入角色名称',
},
],
},
},
{
title: '角色标识',
dataIndex: 'code',
formItemProps: {
rules: [
{
required: true,
message: '请输入角色名称',
},
],
},
},
{
title: '显示顺序',
dataIndex: 'sort',
valueType: 'digit',
fieldProps: {
placeholder: '请输入显示顺序',
},
},
{
title: '租户状态',
dataIndex: 'status',
valueType: 'select',
fieldProps: {
multiple: true,
placeholder: '请选择租户状态',
options: tenantStatus,
},
},
{
title: '备注',
dataIndex: 'remark',
valueType: 'textarea',
fieldProps: {
placeholder: '请输入备注',
min: 5,
max: 20,
},
},
];

129
src/pages/system/role/index.tsx
View File

@@ -1,5 +1,132 @@
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { Popconfirm } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import ConfigurableDrawerForm, {
type ConfigurableDrawerFormRef,
} from '@/components/DrawerForm';
import EnhancedProTable from '@/components/EnhancedProTable';
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
import { formStatusType } from '@/constants';
import {
createRole,
deleteRole,
getRolePage,
type RolePageReqVO,
type RoleVO,
updateRole,
} from '@/services/system/role';
import { baseTenantColumns, formColumns } from './config';
const SyStemRole = () => { const SyStemRole = () => {
return <>SyStemRole</>; const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
const tableRef = useRef<ActionType>(null);
const [type, setType] = useState<'create' | 'update'>('create');
const [id, setId] = useState<number>(0);
const handleEdit = (record: RoleVO) => {
setType('update');
setId(record.id);
configurableDrawerRef.current?.open(record);
};
const onFetch = async (
params: RolePageReqVO & {
pageSize?: number;
current?: number;
},
) => {
const data = await getRolePage({
...params,
pageNo: params.current,
pageSize: params.pageSize,
});
return {
data: data.list,
success: true,
total: data.total,
};
};
const handleAdd = () => {
setType('create');
configurableDrawerRef.current?.open({});
};
const handleSubmit = useCallback(
async (values: RoleVO) => {
if (type === 'create') {
await createRole(values);
} else {
await updateRole({
...values,
id,
});
}
tableRef.current?.reload();
return true;
},
[type, id],
);
const toolbarActions: ToolbarAction[] = [
{
key: 'add',
label: '新建',
type: 'primary',
icon: <PlusOutlined />,
onClick: handleAdd,
},
];
const actionColumns: ProColumns<RoleVO> = {
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 120,
render: (_text: React.ReactNode, record: RoleVO, _: any, action: any) => [
<a key="editable" onClick={() => handleEdit(record)}>
编辑
</a>,
<Popconfirm
title="是否删除?"
key="delete"
onConfirm={async () => {
await deleteRole(record.id);
action?.reload();
}}
okText="是"
cancelText="否"
>
<a>删除</a>
</Popconfirm>,
],
};
const columns = [...baseTenantColumns, actionColumns];
return (
<>
<EnhancedProTable<RoleVO>
ref={tableRef}
columns={columns}
request={onFetch}
toolbarActions={toolbarActions}
headerTitle="租户列表"
showIndex={false}
showSelection={false}
/>
<ConfigurableDrawerForm
ref={configurableDrawerRef}
title={formStatusType[type]}
columns={formColumns(type)}
onSubmit={handleSubmit}
/>
</>
);
}; };
export default SyStemRole; export default SyStemRole;

10
src/pages/system/tenant/list/config.tsx
View File

@@ -29,7 +29,6 @@ export const baseTenantColumns: ProColumns<TenantVO>[] = [
request: async () => { request: async () => {
const packageList: { id: number; name: string }[] = const packageList: { id: number; name: string }[] =
await getTenantPackageList(); await getTenantPackageList();
console.log(packageList);
packageList.map((item) => ({ label: item.name, value: item.id })); packageList.map((item) => ({ label: item.name, value: item.id }));
return packageList.map((item) => ({ label: item.name, value: item.id })); return packageList.map((item) => ({ label: item.name, value: item.id }));
}, },
@@ -83,7 +82,14 @@ export const baseTenantColumns: ProColumns<TenantVO>[] = [
valueType: 'dateRange', valueType: 'dateRange',
search: { search: {
transform: (value) => { transform: (value) => {
return [`${value[0]} 00:00:00`, `${value[1]} 00:00:00`]; return {
'createTime[0]': dayjs(value[0])
.startOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
'createTime[1]': dayjs(value[1])
.endOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
};
}, },
}, },
render: (_, record: TenantVO) => render: (_, record: TenantVO) =>

7
src/pages/system/tenant/list/index.tsx
View File

@@ -1,8 +1,7 @@
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components'; import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { Modal, Popconfirm } from 'antd'; import { Popconfirm } from 'antd';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { ref } from 'process';
import React, { createContext, useCallback, useRef, useState } from 'react'; import React, { createContext, useCallback, useRef, useState } from 'react';
import ConfigurableDrawerForm, { import ConfigurableDrawerForm, {
type ConfigurableDrawerFormRef, type ConfigurableDrawerFormRef,
@@ -93,7 +92,7 @@ const TenantList = () => {
valueType: 'option', valueType: 'option',
fixed: 'right', fixed: 'right',
width: 120, width: 120,
render: (text: React.ReactNode, record: TenantVO, _: any, action: any) => [ render: (_text: React.ReactNode, record: TenantVO, _: any, action: any) => [
<a key="editable" onClick={() => handleEdit(record)}> <a key="editable" onClick={() => handleEdit(record)}>
编辑 编辑
</a>, </a>,
@@ -122,8 +121,6 @@ const TenantList = () => {
headerTitle="租户列表" headerTitle="租户列表"
showIndex={false} showIndex={false}
showSelection={false} showSelection={false}
showActions
maxActionCount={3}
/> />
<ConfigurableDrawerForm <ConfigurableDrawerForm

109
src/pages/system/tenant/package/config.tsx Normal file
View File

@@ -0,0 +1,109 @@
import type {
ProColumns,
ProFormColumnsType,
} from '@ant-design/pro-components';
import dayjs from 'dayjs';
import type { TenantPackageVO } from '@/services/system/tenant/package';
export const baseTenantColumns: ProColumns<TenantPackageVO>[] = [
{
title: '套餐编号',
dataIndex: 'id',
width: 100,
hideInSearch: true, // 在搜索表单中隐藏
},
{
title: '套餐名',
dataIndex: 'name',
},
{
title: '状态',
dataIndex: 'status',
valueType: 'select',
valueEnum: {
all: { text: '全部', status: 'Default' },
open: { text: '未解决', status: 'Error' },
closed: { text: '已解决', status: 'Success' },
},
},
{
title: '备注',
dataIndex: 'remark',
hideInSearch: true, // 在搜索表单中隐藏
},
{
title: '创建时间',
dataIndex: 'createTime',
valueType: 'dateRange',
search: {
transform: (value) => {
return {
'createTime[0]': dayjs(value[0])
.startOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
'createTime[1]': dayjs(value[1])
.endOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
};
},
},
render: (_, record: TenantPackageVO) =>
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
},
];
export const formColumns = (_type: string): ProFormColumnsType[] => [
{
title: '套餐名',
dataIndex: 'name',
formItemProps: {
rules: [
{
required: true,
message: '请输入用户名',
},
],
},
},
{
title: '套餐权限',
dataIndex: 'menuIds',
valueType: 'treeSelect',
fieldProps: {
multiple: true,
placeholder: '请选择租户权限',
options: [{ lable: '11', value: 5016 }],
},
},
{
title: '租户状态',
dataIndex: 'status',
valueType: 'radio',
formItemProps: {
rules: [
{
required: true,
message: '请选择租户状态',
},
],
},
fieldProps: {
placeholder: '请选择套餐类型',
options: [
{
label: '开启',
value: 1,
},
{
label: '关闭',
value: 0,
},
],
},
},
{
title: '备注',
dataIndex: 'remark',
valueType: 'textarea',
},
];

134
src/pages/system/tenant/package/index.tsx
View File

@@ -1,5 +1,137 @@
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { Popconfirm } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import ConfigurableDrawerForm, {
type ConfigurableDrawerFormRef,
} from '@/components/DrawerForm';
import EnhancedProTable from '@/components/EnhancedProTable';
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
import { formStatusType } from '@/constants';
import {
createTenantPackage,
deleteTenantPackage,
getTenantPackagePage,
type TenantPackagePageReqVO,
type TenantPackageVO,
updateTenantPackage,
} from '@/services/system/tenant/package';
import { baseTenantColumns, formColumns } from './config';
const TenantPackage = () => { const TenantPackage = () => {
return <div>TenantPackage</div>; const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
const tableRef = useRef<ActionType>(null);
const [type, setType] = useState<'create' | 'update'>('create');
const [id, setId] = useState<number>(0);
const handleEdit = (record: TenantPackageVO) => {
setType('update');
setId(record.id);
configurableDrawerRef.current?.open(record);
};
const onFetch = async (
params: TenantPackagePageReqVO & {
pageSize?: number;
current?: number;
},
) => {
const data = await getTenantPackagePage({
...params,
pageNo: params.current,
pageSize: params.pageSize,
});
return {
data: data.list,
success: true,
total: data.total,
};
};
const handleAdd = () => {
setType('create');
configurableDrawerRef.current?.open({});
};
const handleSubmit = useCallback(
async (values: TenantPackageVO) => {
if (type === 'create') {
await createTenantPackage(values);
} else {
await updateTenantPackage({
...values,
id,
});
}
tableRef.current?.reload();
return true;
},
[type, id],
);
const toolbarActions: ToolbarAction[] = [
{
key: 'add',
label: '新建',
type: 'primary',
icon: <PlusOutlined />,
onClick: handleAdd,
},
];
const actionColumns: ProColumns<TenantPackageVO> = {
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 120,
render: (
_text: React.ReactNode,
record: TenantPackageVO,
_: any,
action: any,
) => [
<a key="editable" onClick={() => handleEdit(record)}>
编辑
</a>,
<Popconfirm
title="是否删除?"
key="delete"
onConfirm={async () => {
await deleteTenantPackage(record.id);
action?.reload();
}}
okText="是"
cancelText="否"
>
<a>删除</a>
</Popconfirm>,
],
};
const columns = [...baseTenantColumns, actionColumns];
return (
<>
<EnhancedProTable<TenantPackageVO>
ref={tableRef}
columns={columns}
request={onFetch}
toolbarActions={toolbarActions}
headerTitle="租户列表"
showIndex={false}
showSelection={false}
/>
<ConfigurableDrawerForm
ref={configurableDrawerRef}
title={formStatusType[type]}
columns={formColumns(type)}
onSubmit={handleSubmit}
/>
</>
);
}; };
export default TenantPackage; export default TenantPackage;

220
src/pages/system/user/config.tsx Normal file
View File

@@ -0,0 +1,220 @@
import type {
ProColumns,
ProCoreActionType,
ProFormColumnsType,
} from '@ant-design/pro-components';
import { Modal, message, Switch } from 'antd';
import dayjs from 'dayjs';
import { updateUserStatus } from '@/services/system/user';
import type { UserVO } from '@/services/system/user/index';
export const baseTenantColumns: ProColumns<UserVO>[] = [
{
title: '用户编号',
dataIndex: 'id',
width: 80,
hideInSearch: true, // 在搜索表单中隐藏
},
{
title: '用户名称',
dataIndex: 'username',
width: 100,
},
{
title: '用户昵称',
dataIndex: 'nickname',
width: 100,
hideInSearch: true,
},
{
title: '部门',
dataIndex: 'deptName',
width: 100,
},
{
title: '手机号码',
dataIndex: 'mobile',
width: 100,
},
{
title: '状态',
dataIndex: 'status',
valueType: 'select',
valueEnum: {
all: { text: '全部', status: 'Default' },
open: { text: '未解决', status: 'Error' },
closed: { text: '已解决', status: 'Success' },
},
render: (
_dom: React.ReactNode,
record: UserVO,
_index: number,
action: ProCoreActionType | undefined,
) => [
<Switch
key={record.id}
checked={record.status === 0}
onChange={async (_checked) => {
const text = record.status ? '启用' : '停用';
Modal.confirm({
title: '确认操作',
content: `确认要"${text}""${record.username}"用户吗?`,
onOk: async () => {
const status = record.status === 0 ? 1 : 0;
await updateUserStatus(record.id, status);
message.success('修改成功');
action?.reload();
// 执行状态变更逻辑
},
});
// await message.confirm("修改成功");
}}
></Switch>,
],
},
{
title: '创建时间',
dataIndex: 'createTime',
valueType: 'dateRange',
search: {
transform: (value) => {
return {
'createTime[0]': dayjs(value[0])
.startOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
'createTime[1]': dayjs(value[1])
.endOf('day')
.format('YYYY-MM-DD HH:mm:ss'),
};
},
},
render: (_, record: UserVO) =>
dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
},
{
title: '备注',
dataIndex: 'remark',
hideInSearch: true, // 在搜索表单中隐藏
},
];
export const formColumns = (type: string): ProFormColumnsType[] => [
{
title: '用户昵称',
dataIndex: 'nickname',
formItemProps: {
rules: [
{
required: true,
message: '请输入用户名',
},
],
},
},
{
title: '归属部门',
dataIndex: 'deptId',
valueType: 'treeSelect',
fieldProps: {
multiple: true,
placeholder: '请选择归属部门',
options: [{ lable: '11', value: 5016 }],
},
},
{
title: '手机号码',
dataIndex: 'mobile',
formItemProps: {
rules: [
{
required: true,
message: '请输入联系手机',
},
],
},
},
// { prop: "email", label: "邮箱", type: "input", inputType: "email" },
{
title: '邮箱',
dataIndex: 'email',
valueType: 'text',
fieldProps: {
type: 'email',
placeholder: '请输入邮箱',
},
formItemProps: {
rules: [
{
required: true,
message: '请输入邮箱',
},
],
},
},
{
title: '用户名称',
dataIndex: 'username',
hideInForm: type === 'update',
},
{
title: '用户密码',
dataIndex: 'password',
valueType: 'password',
hideInForm: type === 'update',
fieldProps: {
placeholder: '请输入用户密码',
autoComplete: 'new-password',
},
formItemProps: {
rules: [
{
required: true,
message: '请输入用户密码',
},
],
},
},
{
title: '用户性别',
dataIndex: 'sex',
valueType: 'select',
fieldProps: {
placeholder: '请选择性别',
options: [
{
label: '男',
value: 1,
},
{
label: '女',
value: 2,
},
],
},
},
{
title: '岗位',
dataIndex: 'postIds',
valueType: 'select',
fieldProps: {
mode: 'multiple',
placeholder: '请选择岗位',
options: [
{
label: '管理员',
value: 1,
},
{
label: '普通用户',
value: 2,
},
],
},
formItemProps: {},
},
{
title: '备注',
dataIndex: 'remark',
valueType: 'textarea',
},
];

127
src/pages/system/user/index.tsx
View File

@@ -1,5 +1,130 @@
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { Popconfirm } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import ConfigurableDrawerForm, {
type ConfigurableDrawerFormRef,
} from '@/components/DrawerForm';
import EnhancedProTable from '@/components/EnhancedProTable';
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
import { formStatusType } from '@/constants';
import {
createUser,
deleteUser,
getUserPage,
type UserReqVO,
type UserVO,
updateUser,
} from '@/services/system/user';
import { baseTenantColumns, formColumns } from './config';
const SyStemUser = () => { const SyStemUser = () => {
return <>SyStemUser</>; const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
const tableRef = useRef<ActionType>(null);
const [type, setType] = useState<'create' | 'update'>('create');
const [id, setId] = useState<number>(0);
const handleEdit = (record: UserVO) => {
setType('update');
setId(record.id);
configurableDrawerRef.current?.open(record);
};
const onFetch = async (
params: UserReqVO & {
pageSize?: number;
current?: number;
},
) => {
const data = await getUserPage({
...params,
pageNo: params.current,
pageSize: params.pageSize,
});
return {
data: data.list,
success: true,
total: data.total,
};
};
const handleAdd = () => {
setType('create');
configurableDrawerRef.current?.open({});
};
const handleSubmit = useCallback(
async (values: UserVO) => {
if (type === 'create') {
await createUser(values);
} else {
await updateUser({
...values,
id,
});
}
tableRef.current?.reload();
return true;
},
[type, id],
);
const toolbarActions: ToolbarAction[] = [
{
key: 'add',
label: '新建',
type: 'primary',
icon: <PlusOutlined />,
onClick: handleAdd,
},
];
const actionColumns: ProColumns<UserVO> = {
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 120,
render: (_text: React.ReactNode, record: UserVO, _: any, action: any) => [
<a key="editable" onClick={() => handleEdit(record)}>
编辑
</a>,
<Popconfirm
title="是否删除?"
key="delete"
onConfirm={async () => {
await deleteUser(record.id);
action?.reload();
}}
okText="是"
cancelText="否"
>
<a>删除</a>
</Popconfirm>,
],
};
const columns = [...baseTenantColumns, actionColumns];
return (
<>
<EnhancedProTable<UserVO>
ref={tableRef}
columns={columns}
request={onFetch}
toolbarActions={toolbarActions}
headerTitle="租户列表"
showIndex={false}
showSelection={false}
/>
<ConfigurableDrawerForm
ref={configurableDrawerRef}
title={formStatusType[type]}
columns={formColumns(type)}
onSubmit={handleSubmit}
/>
</>
);
}; };
export default SyStemUser; export default SyStemUser;

147
src/pages/trade/order/config.tsx Normal file
View File

@@ -0,0 +1,147 @@
import type { ProColumns } from '@ant-design/pro-components';
import { Button, Space, Tag, Typography } from 'antd';
import dayjs from 'dayjs';
import { dateFormat, dateFormatS } from '@/constants';
import type { TradeOrderPageRespVO } from '@/services/trade/order';
const { Text, Paragraph } = Typography;
export const baseOrderColumns: ProColumns<TradeOrderPageRespVO>[] = [
{
title: '商品',
dataIndex: 'spuName',
hideInSearch: true,
width: '100%',
ellipsis: true,
render: (_, record) => (
<Paragraph>
<Paragraph ellipsis style={{ marginBottom: 0 }}>
{record.spuName}
</Paragraph>
<div>{record.skuName}</div>
<Space>
<div>
<Text type="secondary">数量：</Text>
<Text>{record.count}</Text>
</div>
<div>
<Text type="secondary">单价：</Text>
<Text>
{record.price}/{record.unit}
</Text>
</div>
<div>
<Text type="secondary">到手价：</Text>
<Text>
{record.handedPrice}/{record.unit}
</Text>
</div>
</Space>
</Paragraph>
),
},
{
title: '服务',
dataIndex: 'serveAddress',
hideInSearch: true,
ellipsis: true,
width: '100%',
render: (_, record) => (
<Space direction="vertical" style={{ width: '100%' }}>
<Paragraph ellipsis style={{ marginBottom: 0 }}>
<Text type="secondary">预约时间：</Text>
<Text>{dayjs(record.subTime).format(dateFormatS)}</Text>
<Tag style={{ marginLeft: 10 }}>预约</Tag>
<Tag color="error" style={{ marginLeft: 10 }}>
加急
</Tag>
</Paragraph>
<Paragraph ellipsis style={{ marginBottom: 0 }}>
<Text type="secondary">服务地址：</Text>
<Text>
{record.serveAddress}
服务地址：服务地址：服务地址：服务地址：服务地址：服务地址：
</Text>
</Paragraph>
<div>
<Text type="secondary">用户备注：</Text>
<Text>{record.userRemark}</Text>
</div>
</Space>
),
},
{
title: '财务',
dataIndex: 'price',
hideInSearch: true,
width: '100',
render: (_, record) => (
<Space direction="vertical">
<div>
<Text type="secondary">实付金额：</Text>
<Text>{record.payPrice}</Text>
</div>
<div>
<Text type="secondary">支付方式：</Text>
<Text>{record.payType}</Text>
</div>
<div>
<Text type="secondary">财务状态：</Text>
<Text>{record.financeStatus}</Text>
</div>
</Space>
),
},
{
title: '卖家名称',
dataIndex: 'merchantName',
hideInTable: true,
},
{
title: '买家昵称/手机号',
dataIndex: 'userSearch',
hideInTable: true,
},
{
title: '订单类目',
dataIndex: 'orderCategoryId',
valueType: 'select',
hideInTable: true,
},
{
title: '订单来源',
dataIndex: 'orderTerminal',
valueType: 'select',
hideInTable: true,
},
{
title: '财务状态',
dataIndex: 'financeStatus',
valueType: 'select',
hideInTable: true,
},
{
title: '售后状态',
dataIndex: 'afterSaleStatus',
valueType: 'select',
hideInTable: true,
},
{
title: '预约状态',
dataIndex: 'subType',
valueType: 'select',
hideInTable: true,
},
{
title: '创建时间',
dataIndex: 'createTime',
valueType: 'dateRange',
hideInTable: true,
},
{
title: '预约时间',
dataIndex: 'subTime',
valueType: 'dateRange',
hideInTable: true,
},
];

195
src/pages/trade/order/detail/component/info/basic-info.tsx Normal file
View File

@@ -0,0 +1,195 @@
import { ProCard } from '@ant-design/pro-components';
import { Avatar, Button, Card, Empty, Space, Steps, Typography } from 'antd';
import dayjs from 'dayjs';
import RcResizeObserver from 'rc-resize-observer';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { OrderStatus, OrderStatusLabels } from '@/constants/trade';
import type { TradeOrderBaseInfo } from '@/services/trade/order';
import { type BtnType, renderBaseInfoOrder } from './config';
import styles from './index.module.less';
const { Title, Text } = Typography;
const BasicInfo: React.FC<{ data?: TradeOrderBaseInfo; id: number }> = (
props,
) => {
const { data } = props;
const [orderStatus, setOrderStatus] = useState<number>(0);
useEffect(() => {
if (data) {
setOrderStatus(Number(data.orderStatus));
}
}, [data]);
const [responsive, setResponsive] = useState(false);
const renderTitle = useCallback(() => {
return (
<Space size={16}>
<div>
<Text type="secondary">订单编号：</Text>
<Text copyable>{data?.orderNo}</Text>
</div>
<div>
<Text type="secondary">订单类目：</Text>
<Text>{data?.orderCategoryId}</Text>
<Text>ID:</Text>
<Text copyable>{data?.id}</Text>
</div>
<div>
<Text type="secondary">订单来源：</Text>
<Text>{data?.orderCategoryName}</Text>
</div>
<div>
<Avatar size={20} src={data?.userAvatar} />
<Text>{data?.userInfo}</Text>
</div>
</Space>
);
}, [data]);
const handleClick = useCallback(
(type: BtnType) => {
if (type === 'confirm') {
//还未完成的按钮事件
console.log(data?.orderStatus);
} else if (type === 'sales') {
//新建售后事件
}
console.log(type);
},
[data],
);
const renderOrderStatus = useMemo(() => {
if (data) return renderBaseInfoOrder(data, handleClick);
}, [data]);
return (
<div className={styles['order-info']}>
<Card title="基本信息">
{data ? (
<ProCard
size="small"
title={renderTitle()}
bordered
headerBordered
gutter={8}
className="order-info-card"
>
<ProCard colSpan="300px">
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: 10,
alignItems: 'center',
}}
>
{renderOrderStatus}
</div>
</ProCard>
<ProCard layout="center">
<RcResizeObserver
key="resize-observer"
onResize={(offset) => {
setResponsive(offset.width < 460);
}}
>
<Steps
size="small"
progressDot
style={{ width: '100%' }}
current={orderStatus / 10}
direction={responsive ? 'vertical' : 'horizontal'}
items={[
{
title: `创建订单`,
description: (
<Space direction="vertical" size={0}>
{dayjs(data.createTime).format('YYYY-MM-DD')}
{dayjs(data.createTime).format('HH:mm:ss')}
</Space>
),
},
{
title: `${
OrderStatusLabels[OrderStatus.PendingPayment].label
} ${
orderStatus > OrderStatus.PendingPayment
? '(已付款)'
: ''
}`,
description: (
<Space direction="vertical" size={0}>
{dayjs(data.createTime).format('YYYY-MM-DD')}
{dayjs(data.createTime).format('HH:mm:ss')}
</Space>
),
},
{
title: `${
OrderStatusLabels[OrderStatus.PendingConfirmation].label
} ${
orderStatus > OrderStatus.PendingConfirmation
? '(已确定)'
: ''
}`,
description: (
<Space direction="vertical" size={0}>
{/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
{dayjs(data.finishTime).format("HH:mm:ss")} */}
</Space>
),
},
{
title: `${
OrderStatusLabels[OrderStatus.PendingService].label
} ${
orderStatus > OrderStatus.PendingService
? '(已开始)'
: ''
}`,
description: (
<Space direction="vertical" size={0}>
{/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
{dayjs(data.finishTime).format("HH:mm:ss")} */}
</Space>
),
},
{
title: `${
OrderStatusLabels[OrderStatus.PendingAcceptance].label
} ${
orderStatus > OrderStatus.PendingAcceptance
? '(已验收)'
: ''
}`,
description: (
<Space direction="vertical" size={0}>
{/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
{dayjs(data.finishTime).format("HH:mm:ss")} */}
</Space>
),
},
{
title: '完成',
description: (
<Space direction="vertical" size={0}>
{dayjs(data.finishTime).format('YYYY-MM-DD')}
{dayjs(data.finishTime).format('HH:mm:ss')}
</Space>
),
},
]}
/>
</RcResizeObserver>
</ProCard>
</ProCard>
) : (
<Empty />
)}
</Card>
</div>
);
};
export default React.memo(BasicInfo);

172
src/pages/trade/order/detail/component/info/config.tsx Normal file
View File

@@ -0,0 +1,172 @@
import type { ProColumns } from '@ant-design/pro-components';
import { Button, Tag, Typography } from 'antd';
import type { BaseType } from 'antd/es/typography/Base';
import dayjs from 'dayjs';
import { dateFormat } from '@/constants';
import {
OrderBtnLableMap,
OrderStatus,
OrderStatusLabels,
} from '@/constants/trade';
import type { DeptVO } from '@/services/system/dept';
import type { TradeOrderBaseInfo } from '@/services/trade/order';
const { Title, Text, Paragraph } = Typography;
export const baseOrderColumns: ProColumns<DeptVO>[] = [
{
title: '商品',
dataIndex: 'name',
width: '33.33%',
render: (_, record) => (
<Tag color={record.status === 1 ? 'green' : 'red'}>{record.name}</Tag>
),
},
{
title: '服务',
dataIndex: 'leaderUserId',
hideInSearch: true,
},
{
title: '财务',
dataIndex: 'sort',
hideInSearch: true,
},
];
const sharedOnCell = (_: DeptVO, index?: number) => {
if (index === 3) {
return { colSpan: 0 };
}
return {};
};
export const surchargeInfoColumns: ProColumns<DeptVO>[] = [
{
title: '服务附加费',
dataIndex: 'name',
width: '33.33%',
render: (_, record, index) => {
if (index === 3) {
return 33333;
}
return (
<Tag color={record.status === 1 ? 'green' : 'red'}>{record.name}</Tag>
);
},
onCell: (_, index) => ({
colSpan: index === 3 ? 4 : 1,
}),
},
{
title: '费用详情',
dataIndex: 'leaderUserId',
onCell: sharedOnCell,
},
{
title: '付款信息',
dataIndex: 'sort',
onCell: sharedOnCell,
},
{
title: '退款信息',
dataIndex: 'leaderUserId1',
onCell: sharedOnCell,
},
];
export type BtnType = 'sales' | 'confirm';
export const renderBaseInfoOrder = (
data: TradeOrderBaseInfo,
handleClick: (type: BtnType) => void,
): React.ReactNode => {
const orderStatusObj =
OrderStatusLabels[data.orderStatus as unknown as OrderStatus];
console.log(orderStatusObj, data);
return (
<>
<Title
type={(orderStatusObj.color as BaseType) || ''}
level={4}
style={{ margin: 0 }}
>
{data?.orderStatus && orderStatusObj.label}
</Title>
<span>
<Text type="secondary">剩余</Text>
<Text>4分30秒</Text>
</span>
{data.orderStatus &&
Number(data.orderStatus) === OrderStatus.Refunded && (
<Paragraph>
<Text type="secondary">退款时间：</Text>
<Text>退款时间</Text>
</Paragraph>
)}
{data.orderStatus &&
(Number(data.orderStatus) === OrderStatus.Completed ||
Number(data.orderStatus) === OrderStatus.Refunded) && (
<Paragraph>
<Text type="secondary">服务完成时间：</Text>
<Text>{dayjs(data.finishTime).format(dateFormat)}</Text>
</Paragraph>
)}
{data.orderStatus &&
Number(data.orderStatus) === OrderStatus.Completed && (
<Paragraph>
<Text type="secondary">售后保障期：</Text>
<Tag
color={
data.propertyStatus && Number(data.propertyStatus) === 1
? 'default'
: 'gay'
}
>
未过期
</Tag>
<Tag
color={
data.propertyStatus && Number(data.propertyStatus) === 1
? 'gay'
: 'default'
}
>
已过期
</Tag>
<Text>{data.propertyTime}</Text>
</Paragraph>
)}
{/* 取消 */}
{data.orderStatus &&
Number(data.orderStatus) === OrderStatus.Cancelled && (
<>
<Paragraph>
<Text type="secondary">取消时间：</Text>
<Text>取消时间</Text>
</Paragraph>
<Paragraph>
<Text type="secondary">取消原因：</Text>
<Text>{data.cancelReason}</Text>
</Paragraph>
<Paragraph>
<Text type="secondary">备注：</Text>
<Text>{data?.merchantRemark}</Text>
</Paragraph>
</>
)}
{data.orderStatus &&
Number(data.orderStatus) <= OrderStatus.PendingAcceptance && (
<Button type="primary" block onClick={() => handleClick('confirm')}>
{OrderBtnLableMap[data.orderStatus as unknown as OrderStatus]}
</Button>
)}
{data.orderStatus &&
Number(data.orderStatus) <= OrderStatus.Completed && (
<Button block onClick={() => handleClick('sales')}>
新建售后
</Button>
)}
</>
);
};

34
src/pages/trade/order/detail/component/info/index.module.less Normal file
View File

@@ -0,0 +1,34 @@
.order-info {
:global {
.ant-pro-card-header {
background: rgba(0, 0, 0, 0.02);
}
.ant-pro-card-col {
flex: 1 auto;
overflow: auto;
}
.order-info-card {
.ant-pro-card-col {
flex: 1 auto;
overflow: auto;
display: flex;
align-items: center;
}
}
.order-paragraph {
margin-bottom: 0;
}
.ant-pro-card-body {
padding: 0px;
}
.ant-steps-item-icon {
height: 8px !important;
line-height: 8px !important;
}
.ant-steps-item-active {
.ant-steps-icon-dot {
height: 10px !important;
}
}
}
}

137
src/pages/trade/order/detail/component/info/prod-info.tsx Normal file
View File

@@ -0,0 +1,137 @@
import { ProCard } from '@ant-design/pro-components';
import { Button, Card, Image, Space, Tag, Typography } from 'antd';
import React, { useCallback } from 'react';
import type { TradeProductInfo } from '@/services/trade/order';
import styles from './index.module.less';
const { Text, Paragraph } = Typography;
const ProdInfo: React.FC<{ data?: TradeProductInfo; id: number }> = (props) => {
const { data = {}, id } = props;
const renderTitle = useCallback(() => {
return (
<Space style={{ height: '100%' }} size={16}>
<Paragraph className="order-paragraph">百业到家</Paragraph>
<Paragraph className="order-paragraph">
<Text type="secondary"> 商品 ID：</Text>
<Text copyable>8877777</Text>
</Paragraph>
<Paragraph className="order-paragraph">
<Text type="secondary">SKU ID：</Text>
<Text copyable>8877777</Text>
</Paragraph>
</Space>
);
}, []);
return (
<div className={styles['order-info']}>
<Card title="商品信息">
<ProCard
size="small"
title={renderTitle()}
bordered
headerBordered
gutter={8}
extra={<Button size="small">交易快照</Button>}
>
<ProCard
layout="default"
colSpan={'50%'}
style={{ borderRight: '1px solid rgba(5,5,5,0.06)' }}
>
<Space>
<Image
width={64}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
<div>
<Text>商品名称</Text>
<Paragraph className="order-paragraph">
<Text>规格：</Text>
<Text type="secondary"> 标准,单独火化,基础清洁</Text>
</Paragraph>
<Space wrap size={0} direction="horizontal">
<Paragraph
className="order-paragraph"
style={{ marginRight: 16 }}
>
<Text type="secondary">数量：</Text>
<Text> 1</Text>
</Paragraph>
<Paragraph
className="order-paragraph"
style={{ marginRight: 16 }}
>
<Text type="secondary">单价：</Text>
<Text> ¥100 件</Text>
</Paragraph>
<Paragraph
className="order-paragraph"
style={{ marginRight: 16 }}
>
<Text type="secondary">到手价：</Text>
<Text> ¥80 件</Text>
</Paragraph>
<Paragraph className="order-paragraph">
<Text type="secondary">成本价：</Text>
<Text> ¥50 件/-</Text>
</Paragraph>
</Space>
</div>
</Space>
<Paragraph style={{ marginTop: 16 }}>
<Tag>标签</Tag>
<Tag>标签</Tag>
<Tag>标签</Tag>
<Tag>标签</Tag>
<Tag>标签</Tag>
</Paragraph>
<Paragraph className="order-paragraph">
<Text type="secondary">商品描述：</Text>
<Paragraph className="order-paragraph">
商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品
</Paragraph>
</Paragraph>
</ProCard>
<ProCard
style={{
borderRight: '1px solid rgba(5,5,5,0.06)',
height: '100%',
}}
>
<Space direction="vertical">
<Text>付款信息</Text>
<Paragraph className="order-paragraph">
<Text type="secondary">商品总价：</Text>
<Text>¥500</Text>
</Paragraph>
<Paragraph className="order-paragraph">
<Text type="secondary">商品总价：</Text>
<Text>¥500</Text>
</Paragraph>
<Paragraph>
<Text type="secondary">商品总价：</Text>
<Text>¥500</Text>
</Paragraph>
</Space>
</ProCard>
<ProCard>
<Space direction="vertical">
<Text>退款信息</Text>
<Paragraph className="order-paragraph">
<Text type="secondary">累计退款金额：</Text>
<Text>¥500</Text>
</Paragraph>
<Paragraph className="order-paragraph">
<Text type="secondary">累计退款数量：</Text>
<Text>1</Text>
</Paragraph>
</Space>
</ProCard>
</ProCard>
</Card>
</div>
);
};
export default React.memo(ProdInfo);

80
src/pages/trade/order/detail/component/info/select-info.tsx Normal file
View File

@@ -0,0 +1,80 @@
import { ProCard } from '@ant-design/pro-components';
import { Card, Space } from 'antd';
import React from 'react';
import EnhancedProTable from '@/components/EnhancedProTable';
import {
type DeptReqVO,
type DeptVO,
getDeptPage,
} from '@/services/system/dept';
import type { TradeExtendCostInfo } from '@/services/trade/order';
import { baseOrderColumns } from '../../../config';
import styles from './index.module.less';
const SelectInfo: React.FC<{ data?: TradeExtendCostInfo; id: number }> = (
props,
) => {
const { data = {}, id } = props;
const onFetch = async (
params: DeptReqVO & {
pageSize?: number;
current?: number;
},
) => {
const data = await getDeptPage({
...params,
pageNo: params.current,
pageSize: params.pageSize,
});
return {
data: data,
success: true,
total: data.total,
};
};
return (
<div className={styles['order-info']}>
<Card title="可选服务">
<Space direction="vertical" style={{ width: '100%' }} size={16}>
<ProCard split="vertical" bordered>
<ProCard size="small" title="服务" headerBordered>
1111
</ProCard>
<ProCard size="small" title="付款信息" headerBordered>
1111
</ProCard>
<ProCard size="small" title="退款信息" headerBordered>
1111
</ProCard>
</ProCard>
<EnhancedProTable<DeptVO>
columns={baseOrderColumns}
request={onFetch}
showIndex={false}
size="small"
search={false}
showActions={false}
showSelection={false}
bordered
pagination={false}
/>
<ProCard split="vertical" bordered>
<ProCard size="small" title="纪念品" headerBordered>
1111
</ProCard>
<ProCard size="small" title="付款信息" headerBordered>
1111
</ProCard>
<ProCard size="small" title="退款摘要" headerBordered>
1111
</ProCard>
</ProCard>
</Space>
</Card>
</div>
);
};
export default React.memo(SelectInfo);

102
src/pages/trade/order/detail/component/info/service-info.tsx Normal file
View File

@@ -0,0 +1,102 @@
import { ProCard } from '@ant-design/pro-components';
import { Button, Card, Image, Space, Typography } from 'antd';
import React from 'react';
import type { TradeServeInfo } from '@/services/trade/order';
import styles from './index.module.less';
const { Text, Paragraph } = Typography;
const ServiceInfo: React.FC<{ data?: TradeServeInfo; id: number }> = (
props,
) => {
const { data = {}, id } = props;
return (
<div className={styles['order-info']}>
<Card title="服务信息">
<ProCard split="vertical">
<ProCard
title="遗体信息"
extra={<Button size="small">修改记录</Button>}
size="small"
colSpan="30%"
headerBordered
>
<Paragraph>
<Text type="secondary">姓名：</Text>
<Text>钱多多</Text>
</Paragraph>
<Paragraph>
<Text type="secondary">宠物品种：</Text>
<Text>钱多多</Text>
</Paragraph>
<Paragraph>
<Text type="secondary">体型/体重：</Text>
<Text>钱多多</Text>
</Paragraph>
<Paragraph>
<Text type="secondary">离世时间：</Text>
<Text>钱多多</Text>
</Paragraph>
<Paragraph>
<Text type="secondary">离世原因：</Text>
<Text>钱多多</Text>
</Paragraph>
<Paragraph>
<Text type="secondary">遗体照片：</Text>
<Space wrap>
<Image
width={48}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
<Image
width={48}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
<Image
width={48}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
<Image
width={48}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
<Image
width={48}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</Space>
</Paragraph>
</ProCard>
<ProCard
size="small"
title="预约信息"
headerBordered
extra={<Button size="small">修改记录</Button>}
>
<Paragraph>
<Text type="secondary">离世时间：</Text>
<Text>钱多多</Text>
</Paragraph>
<Paragraph>
<Text type="secondary">更改规则：</Text>
<Text>钱多多</Text>
</Paragraph>
<Paragraph>
<Text type="secondary">预约时间：</Text>
<Text>钱多多</Text>
</Paragraph>
<Paragraph>
<Text type="secondary">用户备注：</Text>
<Text>钱多多</Text>
</Paragraph>
<Paragraph>
<Text type="secondary">客服备注：</Text>
<Text>钱多多</Text>
</Paragraph>
</ProCard>
</ProCard>
</Card>
</div>
);
};
export default React.memo(ServiceInfo);

53
src/pages/trade/order/detail/component/info/surcharge-info.tsx Normal file
View File

@@ -0,0 +1,53 @@
import { Card } from 'antd';
import React from 'react';
import EnhancedProTable from '@/components/EnhancedProTable';
import {
type DeptReqVO,
type DeptVO,
getDeptPage,
} from '@/services/system/dept';
import type { TradeExtendServeInfo } from '@/services/trade/order';
import { surchargeInfoColumns } from './config';
import styles from './index.module.less';
const SurchargeInfo: React.FC<{ data?: TradeExtendServeInfo; id: number }> = (
props,
) => {
const { data, id } = props;
const onFetch = async (
params: DeptReqVO & {
pageSize?: number;
current?: number;
},
) => {
const data = await getDeptPage({
...params,
pageNo: params.current,
pageSize: params.pageSize,
});
return {
data: data,
success: true,
total: data.total,
};
};
return (
<div className={styles['order-info']}>
<Card title="服务信息">
<EnhancedProTable<DeptVO>
columns={surchargeInfoColumns}
request={onFetch}
showIndex={false}
size="small"
search={false}
showActions={false}
showSelection={false}
bordered
pagination={false}
/>
</Card>
</div>
);
};
export default React.memo(SurchargeInfo);

27
src/pages/trade/order/detail/index.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { Tabs, type TabsProps } from 'antd';
import React from 'react';
import type { TradeOrderPageRespVO } from '@/services/trade/order';
import OrderInfo from './order-info';
const DetailCom: React.FC<{ data?: TradeOrderPageRespVO }> = (props) => {
const items: TabsProps['items'] = [
{
key: '1',
label: '订单信息 ',
children: <OrderInfo data={props.data} />,
},
{
key: '2',
label: '服务履约',
children: '服务履约',
},
{
key: '3',
label: '商品配送',
children: '商品配送',
},
];
return <Tabs defaultActiveKey="1" items={items} />;
};
export default React.memo(DetailCom);

38
src/pages/trade/order/detail/order-info.tsx Normal file
View File

@@ -0,0 +1,38 @@
import { Space } from 'antd';
import React, { useCallback, useEffect, useState } from 'react';
import {
getTradeOrderDetail,
type TradeOrderDetailRespVO,
} from '@/services/trade/order';
import BasicInfo from './component/info/basic-info'; //基本信息（通版）
import ProdInfo from './component/info/prod-info'; //商品信息（通版）
import SelectInfo from './component/info/select-info'; //可选服务（殡葬专属字段）
import ServiceInfo from './component/info/service-info';
import SurchargeInfo from './component/info/surcharge-info'; //服务附加费（殡葬专属字段）
const OrderDetail: React.FC<{ data?: TradeOrderDetailRespVO }> = (props) => {
const { data } = props;
const [detais, setDetails] = useState<TradeOrderDetailRespVO>();
const fetch = useCallback(async () => {
if (data?.id) {
const res = await getTradeOrderDetail(data.id);
setDetails(res);
}
}, [data]);
useEffect(() => {
fetch();
}, [data]);
return (
<Space direction="vertical" size={24} style={{ width: '100%' }}>
<BasicInfo data={detais?.tradeOrderInfoBase} id={data?.id} />
<ProdInfo data={detais?.tradeProductInfo} id={data?.id} />
<ServiceInfo data={detais?.tradeServeInfo} id={data?.id} />
<SelectInfo data={detais?.tradeExtendCostInfo} id={data?.id} />
<SurchargeInfo data={detais?.tradeExtendServeInfo} id={data?.id} />
</Space>
);
};
export default React.memo(OrderDetail);

9
src/pages/trade/order/index.module.less Normal file
View File

@@ -0,0 +1,9 @@
.trade-order {
:global {
.expanded-row-top {
order: -1; /* 在 Flex 布局中将元素移到前面 */
position: relative;
margin: 0 -16px 16px -16px; /* 调整边距以填满整行 */
}
}
}

28
src/pages/trade/order/index.tsx Normal file
View File

@@ -0,0 +1,28 @@
import type { TabsProps } from 'antd';
import { Tabs } from 'antd';
import React from 'react';
import { OrderStatusLabels } from '@/constants/trade';
import styles from './index.module.less';
import OrderListItem from './list';
// const onChange = (key: string) => {
// console.log(key);
// };
const OrderList: React.FC = () => {
const items: TabsProps['items'] = Object.entries(OrderStatusLabels).map(
([value, list]) => ({
key: value,
label: list.label,
children: <OrderListItem orderStatus={Number(value)} />,
}),
);
return (
<div className={`${styles['trade-order']} "page-container" `}>
<Tabs defaultActiveKey="1" items={items} />
</div>
);
};
export default OrderList;

293
src/pages/trade/order/list.tsx Normal file
View File

@@ -0,0 +1,293 @@
import {
type ActionType,
ProCard,
type ProColumns,
} from '@ant-design/pro-components';
import {
Avatar,
Badge,
Button,
Divider,
Input,
message,
Space,
Statistic,
Typography,
} from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import ConfigurableDrawerForm, {
type ConfigurableDrawerFormRef,
} from '@/components/DrawerForm';
import EnhancedProTable from '@/components/EnhancedProTable';
import { baseOrderColumns } from './config';
const { Search } = Input;
const { Text } = Typography;
import { DownOutlined, UpOutlined, UserOutlined } from '@ant-design/icons';
import PopconfirmForm, {
type PopconfirmFormRef,
} from '@/components/PopconfirmForm';
import {
mapOrderStatusToBadgeStatus,
type OrderStatus,
OrderStatusLabels,
} from '@/constants/trade';
import {
getTradeOrderPage,
type TradeOrderPageRespVO,
type TradeReq,
} from '@/services/trade/order';
import DetailCom from './detail';
const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
const { orderStatus } = props;
const tableRef = useRef<ActionType>(null);
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
const [modalData, setModalData] = useState<TradeOrderPageRespVO>();
const [isShowTotal, setIsShowTotal] = useState<boolean>(false);
const popconfirmFormRef = useRef<PopconfirmFormRef>(null);
const onFetch = async (
params: TradeReq & {
pageSize?: number;
current?: number;
},
) => {
const data = await getTradeOrderPage({
...params,
orderStatus,
pageNo: params.current,
pageSize: params.pageSize,
});
return {
data: data.list,
success: true,
total: data.total,
};
};
const handleDetail = useCallback((record: TradeOrderPageRespVO) => {
setModalData(record);
configurableDrawerRef.current?.open();
}, []);
const handleOrder = useCallback((id?: number) => {
console.log(id, '取消订单');
// await updateTradeOrder(values.id);
}, []);
const handleUpdate = async (_values: TradeOrderPageRespVO) => {
try {
// await updateTradeOrder(values.id);
return true;
} finally {
message.success('更新成功');
}
// await updateTradeOrder(values.id);
};
const actionColumns: ProColumns<TradeOrderPageRespVO> = {
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (_text: React.ReactNode, record: TradeOrderPageRespVO) => [
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: 4,
justifyContent: 'center',
}}
key={record.id}
>
<a key="cancel" onClick={() => handleOrder(record.id)}>
取消订单
</a>
<a key="cancel" onClick={() => handleOrder(record.id)}>
开始服务
</a>
<a key="cancel" onClick={() => handleOrder(record.id)}>
新建售后
</a>
<a key="detail" onClick={() => handleDetail(record)}>
订单详情
</a>
<PopconfirmForm
ref={popconfirmFormRef}
columns={[
{
title: '备注',
name: 'userRemark',
valueType: 'textarea',
fieldProps: { rows: 4, autoFocus: false },
},
]}
onSubmit={handleUpdate}
>
<a
key="remark"
onClick={() => popconfirmFormRef.current?.open(record)}
>
添加备注
</a>
</PopconfirmForm>
</div>,
],
};
const onClose = useCallback(() => {
configurableDrawerRef.current?.close();
}, []);
const handleRow = (record: TradeOrderPageRespVO) => {
return {
'data-record': JSON.stringify(record),
className: 'order-row-with-info',
};
};
const components = {
body: {
row: (props: any) => {
const { children, ...restProps } = props;
const record = props['data-record']
? JSON.parse(props['data-record'])
: undefined;
return (
<>
{record && (
<tr style={{ background: 'rgba(0, 0, 0, 0.06)' }}>
<td
colSpan={columns.length}
style={{
padding: '0px 8px',
borderBottom: '1px solid #f0f0f0',
color: '#666',
}}
>
<Space>
<Badge
status={mapOrderStatusToBadgeStatus(
OrderStatusLabels[record.orderStatus as OrderStatus]
.color,
)}
text={
OrderStatusLabels[record.orderStatus as OrderStatus]
.label
}
size="small"
/>
<Divider />
<span> {record.orderCategoryName}</span>
<span> {record.createTime}</span>
<span>{record.orderNum}</span>
<span> {record.payType}</span>
<Space>
<Avatar icon={<UserOutlined />} />
{/* <Image src={record.picUrl} width={64} /> */}
百业到家旗舰店
</Space>
<Space>
{record.userAvatar ? (
<Avatar src={record.userAvatar} />
) : (
<Avatar icon={<UserOutlined />} />
)}
{record.userNickName || record.userName}
<span>{record.userMobile} </span>
</Space>
</Space>
</td>
</tr>
)}
<tr {...restProps}>{children}</tr>
</>
);
},
},
header: {
cell: (props: any) => {
const { children, ...restProps } = props;
console.log(restProps, children);
return <th {...restProps}>{children}</th>;
},
},
};
const columns = [...baseOrderColumns, actionColumns];
const handleIsTotal = useCallback(() => {
setIsShowTotal(!isShowTotal);
}, [isShowTotal]);
const handleSearch = useCallback((value: string) => {
console.log('搜索', value);
tableRef.current?.reload();
}, []);
return (
<>
<Space
style={{
padding: '18px',
background: '#fff',
width: '100%',
marginBottom: 16,
}}
>
<Search
placeholder="商品名称/商品ID/订单号"
enterButton
onSearch={handleSearch}
/>
<Button
icon={isShowTotal ? <DownOutlined /> : <UpOutlined />}
onClick={handleIsTotal}
>
统计
</Button>
</Space>
{isShowTotal && (
<ProCard.Group direction="row" style={{ marginBottom: 18 }}>
<ProCard layout="center" style={{ background: '#f5f5f5' }}>
<Statistic title="订单数量" value={79.0} precision={2} />
</ProCard>
<ProCard layout="center" style={{ background: '#f5f5f5' }}>
<Statistic title="实付金额" value={112893.0} precision={2} />
</ProCard>
<ProCard layout="center" style={{ background: '#f5f5f5' }}>
<Statistic title="实收金额" value={93} suffix="/ 100" />
</ProCard>
</ProCard.Group>
)}
<EnhancedProTable<TradeOrderPageRespVO>
ref={tableRef}
columns={columns}
request={onFetch}
headerTitle="销售管理"
showIndex={false}
showSelection={false}
search={{ defaultCollapsed: true }}
onRow={handleRow}
components={components}
/>
<ConfigurableDrawerForm
ref={configurableDrawerRef}
width="80vw"
title={`订单：${modalData?.orderNum}`}
bodyStyle={{
background: '#f5f5f5',
paddingTop: 8,
}}
footer={<Button onClick={onClose}>关闭</Button>}
>
<DetailCom data={modalData} />
</ConfigurableDrawerForm>
</>
);
};
export default OrderListItem;

86
src/requestErrorConfig.ts
View File

@@ -1,25 +1,19 @@
import type { RequestOptions } from '@@/plugin-request/request'; import type { RequestOptions } from '@@/plugin-request/request';
import type { RequestConfig } from '@umijs/max'; import type { RequestConfig } from '@umijs/max';
import { request } from '@umijs/max'; import { request } from '@umijs/max';
import { message, notification } from 'antd'; import { message } from 'antd';
import { deleteUserCache } from '@/hooks/web/useCache'; import { getAccessToken, getRefreshToken, setToken } from './utils/auth';
import {
getAccessToken,
getRefreshToken,
getTenantId,
setToken,
} from './utils/auth';
const tenantEnable = process.env.VITE_APP_TENANT_ENABLE; // const tenantEnable = process.env.VITE_APP_TENANT_ENABLE;
// const { result_code, base_url, request_timeout } = config; // const { result_code, base_url, request_timeout } = config;
// 错误处理方案： 错误类型 // 错误处理方案： 错误类型
enum ErrorShowType { // enum ErrorShowType {
SILENT = 0, // SILENT = 0,
WARN_MESSAGE = 1, // WARN_MESSAGE = 1,
ERROR_MESSAGE = 2, // ERROR_MESSAGE = 2,
NOTIFICATION = 3, // NOTIFICATION = 3,
REDIRECT = 9, // REDIRECT = 9,
} // }
// 与后端约定的响应数据格式 // 与后端约定的响应数据格式
interface ResponseStructure { interface ResponseStructure {
success: boolean; success: boolean;
@@ -27,27 +21,28 @@ interface ResponseStructure {
code?: number; code?: number;
msg?: string; msg?: string;
} }
const ignoreMsgs = [
'无效的刷新令牌', // 刷新令牌被删除时，不用提示 // const ignoreMsgs = [
'刷新令牌已过期', // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面 // "无效的刷新令牌", // 刷新令牌被删除时，不用提示
]; // "刷新令牌已过期", // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面
// ];
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
export const requestEventBus = new EventEmitter(); export const requestEventBus = new EventEmitter();
const errorCode: { [key: string]: string } = { // const errorCode: { [key: string]: string } = {
'400': '请求参数不正确', // "400": "请求参数不正确",
'401': '账号未登录', // "401": "账号未登录",
'403': '当前操作没有权限', // "403": "当前操作没有权限",
'404': '访问资源不存在', // "404": "访问资源不存在",
'405': '请求方法不正确', // "405": "请求方法不正确",
'423': '请求失败，请稍后重试', // "423": "请求失败，请稍后重试",
'429': '请求失败，请稍后重试', // "429": "请求失败，请稍后重试",
'500': '系统异常', // "500": "系统异常",
'501': '功能未实现/未开启', // "501": "功能未实现/未开启",
'502': '错误的配置项', // "502": "错误的配置项",
'900': '重复请求，请稍后重试', // "900": "重复请求，请稍后重试",
default: '系统未知错误，请反馈给管理员', // default: "系统未知错误，请反馈给管理员",
}; // };
/** /**
* @name 错误处理 * @name 错误处理
@@ -113,7 +108,7 @@ export const errorConfig: RequestConfig = {
const errorInfo: ResponseStructure | undefined = error.info; const errorInfo: ResponseStructure | undefined = error.info;
if (error.name === 'BizError') { if (error.name === 'BizError') {
if (errorInfo) { if (errorInfo) {
const { msg, code } = errorInfo; const { msg } = errorInfo;
message.error(msg); message.error(msg);
} }
} else if (error.response) { } else if (error.response) {
@@ -123,7 +118,7 @@ export const errorConfig: RequestConfig = {
} else if (error.request) { } else if (error.request) {
message.error('None response! Please retry.'); message.error('None response! Please retry.');
} else { } else {
message.error('发送请求时出了点问题:' + error.msg); message.error(`发送请求时出了点问题:${error.msg}`);
} }
}, },
}, },
@@ -165,6 +160,9 @@ export const errorConfig: RequestConfig = {
// // 如果是忽略的错误码，直接返回 msg 异常 // // 如果是忽略的错误码，直接返回 msg 异常
// return Promise.reject(msg); // return Promise.reject(msg);
// } // }
if (!config.url) {
throw new Error('请求URL不能为空');
}
// 发送请求时出了点问题 // 发送请求时出了点问题
if (code === 401) { if (code === 401) {
if (!isRefreshToken) { if (!isRefreshToken) {
@@ -180,22 +178,28 @@ export const errorConfig: RequestConfig = {
// 2.1 刷新成功，则回放队列的请求 + 当前请求 // 2.1 刷新成功，则回放队列的请求 + 当前请求
setToken(refreshTokenRes); setToken(refreshTokenRes);
// 发出 token 刷新事件 // 发出 token 刷新事件
requestEventBus.emit('token-refreshed'); // 刷新当前路由
} catch (e) { // window.location.reload();
// requestEventBus.emit('token-refreshed');
} catch (_) {
// 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。 // 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。
// 提示是否要登出。即不回放当前请求！不然会形成递归 // 提示是否要登出。即不回放当前请求！不然会形成递归
return handleAuthorized(); return handleAuthorized();
} finally { } finally {
isRefreshToken = false; isRefreshToken = false;
} }
return request(config.url!, config); return request(config.url, config);
} else { } else {
console.log('刷新令牌失败'); console.log('刷新令牌失败');
//添加到队列，等待刷新获取到新的令牌 //添加到队列，等待刷新获取到新的令牌
return new Promise((resolve) => { return new Promise((resolve) => {
requestList.push(() => { requestList.push(() => {
config.headers!.Authorization = 'Bearer ' + getAccessToken(); // 让每个请求携带自定义token 请根据实际情况自行修改 if (!config.url) {
resolve(request(config.url!, config)); throw new Error('请求URL不能为空');
}
if (config.headers)
config.headers.Authorization = `Bearer ${getAccessToken()}`; // 让每个请求携带自定义token 请根据实际情况自行修改
resolve(request(config.url, config));
}); });
}); });
} }

246
src/services/ai/sample/index.ts Normal file
View File

@@ -0,0 +1,246 @@
import { request } from "@umijs/max";
export interface SampleVo {
/**
* 创建时间
*/
createTime?: string[];
/**
* 页码，从 1 开始", example = "1
*/
remark?: string;
/**
* 样本文件id
*/
sampleFileId?: number;
/**
* 样本格式
*/
sampleMineType?: string;
/**
* 样本名称
*/
sampleName?: string;
/**
* 样本大小
*/
sampleSize?: string;
/**
* 样本时长
*/
sampleTime?: string[];
}
/**
* 返回数据
*
* PageResultAiSampleRespVO
*/
export interface PageResultAiSampleRespVO {
/**
* 数据
*/
list?: AiSampleRespVO[];
/**
* 总量
*/
total?: number;
}
/**
* com.tashow.cloud.ai.controller.admin.aisample.vo.AiSampleRespVO
*
* AiSampleRespVO
*/
export interface AiSampleRespVO {
/**
* 创建时间
*/
createTime?: string;
/**
* 主键
*/
id?: number;
/**
* 样本注释
*/
remark?: string;
/**
* 样本文件id
*/
sampleFileId?: number;
/**
* 样本格式
*/
sampleMineType?: string;
/**
* 样本名称
*/
sampleName?: string;
/**
* 样本大小
*/
sampleSize?: string;
/**
* 样本时长
*/
sampleTime?: string;
}
export interface SampleReqVo extends PageParam {
name?: string;
status?: number;
}
// 获得样本库分页
export const getSamplePage = async (params: SampleReqVo) => {
return request("/ai/sample/page", {
method: "GET",
params,
});
};
export const getSample = async (id: number) => {
return request("/ai/sample/get", {
method: "GET",
params: { id },
});
};
// 创建样本库
export const createSample = (formData: FormData) => {
return request("/ai/sample/create", {
method: "POST",
headers: {
"Content-Type": "multipart/form-data",
},
data: formData,
});
};
export const updateSample = (params: SampleReqVo) => {
return request("/ai/sample/update", {
method: "PUT",
data: params,
});
};
export const deleteSample = (id: string) => {
return request("/ai/sample/delete", {
method: "DELETE",
params: { id },
});
};
//获得样本标签分组库列表
export const getSampleTagGroup = async () => {
return request("/ai/sampleTagGroup/list", {
method: "GET",
});
};
//创建样本标签分组库
export const createSampleTagGroup = (data: { groupName: string }) => {
return request("/ai/sampleTagGroup/create", {
method: "POST",
data,
});
};
//添加关联标签
export const relateSample = (data: {
tagId: number[];
sampleIds: number[];
}) => {
return request("/ai/sample/relate", {
method: "PUT",
data,
});
};
// 删除管理标签
export const deleteSampleTagRelate = (data: {
tagId: number[];
sampleIds: number[];
}) => {
return request("/ai/sample/deleteRelate", {
method: "DELETE",
data,
});
};
//更新样本库
export const updateSamples = (
params: { id: number; remark?: string; sampleName?: string }[]
) => {
return request("/ai/sample/updates", {
method: "PUT",
data: params,
});
};
// 删除样本标签分组库
export const deleteSampleTagGroup = async (id?: number) => {
return request("/ai/sampleTagGroup/delete", {
method: "DELETE",
params: { id },
});
};
//更新样本标签分组库
export const updateSampleTagGroup = async (params: {
id: number;
groupName: string;
}) => {
return request("/ai/sampleTagGroup/update", {
method: "PUT",
data: params,
});
};
//获得样本标签库分页
export const getSampleTagPage = async (params: {
groupId?: number;
pageNo?: number;
pageSize?: number;
}) => {
return request("/ai/sampleTag/page", {
method: "GET",
params,
});
};
//创建样本标签库
export const createSampleTag = (data: {
groupIds: number[];
tagName: string;
}) => {
return request("/ai/sampleTag/create", {
method: "POST",
data,
});
};
// 删除样本标签库
export const deleteSampleTag = async (id?: number) => {
return request("/ai/sampleTag/delete", {
method: "DELETE",
params: { id },
});
};
//更新样本标签库
export const updateSampleTag = async (params: {
groupIds: number[];
tagName: string;
}) => {
return request("/ai/sampleTag/update", {
method: "PUT",
data: params,
});
};

13
src/services/prodApi/category.ts
View File

@@ -3,25 +3,22 @@
import { request } from "@umijs/max"; import { request } from "@umijs/max";
/** 获取菜单页面的表 GET /product/category/categoryList */ /** 获取菜单页面的表 GET /product/category/categoryList */
export async function getProductCategoryCategoryList( export async function getCategoryList(
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象) // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
params: API.getProductCategoryCategoryListParams, params: API.getProductCategoryCategoryListParams,
options?: { [key: string]: any } options?: { [key: string]: any }
) { ) {
return request<API.CommonResultListCategoryDto>( return request("/product/category/categoryList", {
"/product/category/categoryList",
{
method: "GET", method: "GET",
params: { params: {
...params, ...params,
}, },
...(options || {}), ...(options || {}),
} });
);
} }
/** 创建产品类目 创建产品类目 POST /product/category/create */ /** 创建产品类目 创建产品类目 POST /product/category/create */
export async function postProductCategoryCreate( export async function postCategoryCreate(
body: API.CategorySaveReqVO, body: API.CategorySaveReqVO,
options?: { [key: string]: any } options?: { [key: string]: any }
) { ) {
@@ -36,7 +33,7 @@ export async function postProductCategoryCreate(
} }
/** 更新产品类目 更新产品类目 PUT /product/category/update */ /** 更新产品类目 更新产品类目 PUT /product/category/update */
export async function putProductCategoryUpdate( export async function putCategoryUpdate(
body: API.CategorySaveReqVO, body: API.CategorySaveReqVO,
options?: { [key: string]: any } options?: { [key: string]: any }
) { ) {

89
src/services/system/dept/index.ts Normal file
View File

@@ -0,0 +1,89 @@
import { request } from "@umijs/max";
export interface DeptVO {
id: number;
name: string;
parentId: number;
status: number;
sort: number;
leaderUserId: number;
phone: string;
email: string;
createTime: Date;
}
export interface DeptReqVO extends PageParam {
name?: string;
status?: number;
}
// 查询部门（精简)列表
// export const getSimpleDeptList = async (): Promise<Dept[]> => {
// return await request.get({ url: "/system/dept/simple-list" });
// };
export const getSimpleDeptList = async () => {
return request("/system/dept/simple-list", {
method: "GET",
});
};
// 查询部门列表
// export const getDeptPage = async (params: DeptReq): Promise<Dept[]> => {
// return await request.get({ url: "/system/dept/list", params });
// };
export const getDeptPage = (params: DeptReqVO) => {
return request("/system/dept/list", {
method: "GET",
params,
});
};
// 查询部门详情
// export const getDept = async (id: number) => {
// return await request.get({ url: "/system/dept/get?id=" + id });
// };
export const getDept = (id: number) => {
return request("/system/dept/get", {
method: "GET",
params: { id },
});
};
// 新增部门
// export const createDept = async (data: Dept) => {
// return await request.post({ url: "/system/dept/create", data: data });
// };
export const createDept = (data: DeptVO) => {
return request("/system/dept/create", {
method: "POST",
data,
});
};
// 修改部门
// export const updateDept = async (params: Dept) => {
// return await request.put({ url: "/system/dept/update", data: params });
// };
export const updateDept = (params: DeptVO) => {
return request("/system/dept/update", {
method: "PUT",
data: params,
});
};
// 删除部门
// export const deleteDept = async (id: number) => {
// return await request.delete({ url: "/system/dept/delete?id=" + id });
// };
export const deleteDept = (id: number) => {
return request("/system/dept/delete", {
method: "DELETE",
params: { id },
});
};

101
src/services/system/dict/dict.data.ts Normal file
View File

@@ -0,0 +1,101 @@
import { request } from "@umijs/max";
export type DictDataVO = {
id: number;
sort: number | undefined;
label: string;
value: string;
dictType: string;
status: number;
colorType: string;
cssClass: string;
remark: string;
createTime: Date;
};
export interface DictDataReqVO extends PageParam {
dictType?: string;
createTime?: Date;
}
// 查询字典数据（精简)列表
// export const getSimpleDictDataList = () => {
// return request.get({ url: "/system/dict-data/simple-list" });
// };
export const getSimpleDictDataList = () => {
return request("/system/dict-data/simple-list", {
method: "GET",
});
};
// 查询字典数据列表
// export const getDictDataPage = (params: PageParam) => {
// return request.get({ url: "/system/dict-data/page", params });
// };
export const getDictDataPage = (params: DictDataReqVO) => {
return request("/system/dict-data/page", {
method: "GET",
params,
});
};
// 查询字典数据详情
// export const getDictData = (id: number) => {
// return request.get({ url: "/system/dict-data/get?id=" + id });
// };
export const getDictData = (id: number) => {
return request("/system/dict-data/get", {
method: "GET",
params: { id },
});
};
// 新增字典数据
// export const createDictData = (data: DictData) => {
// return request.post({ url: "/system/dict-data/create", data });
// };
export const createDictData = (data: DictDataVO) => {
return request("/system/dict-data/create", {
method: "POST",
data,
});
};
// 修改字典数据
// export const updateDictData = (data: DictData) => {
// return request.put({ url: "/system/dict-data/update", data });
// };
export const updateDictData = (data: DictDataVO) => {
return request("/system/dict-data/update", {
method: "PUT",
data,
});
};
// 删除字典数据
// export const deleteDictData = (id: number) => {
// return request.delete({ url: "/system/dict-data/delete?id=" + id });
// };
export const deleteDictData = (id: number) => {
return request("/system/dict-data/delete", {
method: "DELETE",
params: { id },
});
};
// 导出字典类型数据
// export const exportDictData = (params: DictData) => {
// return request.download({ url: "/system/dict-data/export", params });
// };
export const exportDictData = (params: DictDataVO) => {
return request("/system/dict-data/export", {
method: "GET",
params,
});
};

101
src/services/system/dict/dict.type.ts Normal file
View File

@@ -0,0 +1,101 @@
import { request } from "@umijs/max";
export interface DictTypeVO extends PageParam {
id: number;
name: string;
type: string;
status: number;
remark: string;
createTime: Date;
}
export interface DictReqVO extends PageParam {
name?: string;
status?: number;
type?: string;
createTime?: Date;
}
// 查询字典（精简)列表
// export const getSimpleDictTypeList = () => {
// return request.get({ url: "/system/dict-type/list-all-simple" });
// };
export const getSimpleDictTypeList = () => {
return request("/system/dict-type/list-all-simple", {
method: "GET",
});
};
// 查询字典列表
// export const getDictTypePage = (
// params: DictReq
// ): Promise<PageResult<DictType[]>> => {
// return request.get({ url: "/system/dict-type/page", params });
// };
export const getDictTypePage = (params: PageParam) => {
return request("/system/dict-type/page", {
method: "GET",
params,
});
};
// // 查询字典详情
// export const getDictType = (id?: number) => {
// return request.get({ url: "/system/dict-type/get?id=" + id });
// };
export const getDictType = (id: number) => {
return request("/system/dict-type/get", {
method: "GET",
params: { id },
});
};
// 新增字典
// export const createDictType = (data: DictType) => {
// return request.post({ url: "/system/dict-type/create", data });
// };
export const createDictType = (data: DictTypeVO) => {
return request("/system/dict-type/create", {
method: "POST",
data,
});
};
// 修改字典
// export const updateDictType = (data: DictType) => {
// return request.put({ url: "/system/dict-type/update", data });
// };
export const updateDictType = (data: DictTypeVO) => {
return request("/system/dict-type/update", {
method: "PUT",
data,
});
};
// 删除字典
// export const deleteDictType = (id: number) => {
// return request.delete({ url: "/system/dict-type/delete?id=" + id });
// };
export const deleteDictType = (id: number) => {
return request("/system/dict-type/delete", {
method: "DELETE",
params: { id },
});
};
// 导出字典类型
// export const exportDictType = (params: DictType) => {
// return request.download({ url: "/system/dict-type/export", params });
// };
export const exportDictType = (params: DictTypeVO) => {
return request("/system/dict-type/export", {
method: "POST",
params,
});
};

49
src/services/system/menu/index.ts
View File

@@ -19,32 +19,81 @@ export interface MenuVO {
children?: MenuVO[]; children?: MenuVO[];
} }
export interface MenuReqVO {
name?: string;
status?: 0 | 1;
}
// 查询菜单（精简）列表 // 查询菜单（精简）列表
export const getSimpleMenusList = () => {
return request("/system/menu/simple-list", {
method: "GET",
});
};
// export const getSimpleMenusList = () => { // export const getSimpleMenusList = () => {
// return request.get({ url: '/system/menu/simple-list' }) // return request.get({ url: '/system/menu/simple-list' })
// } // }
// // 查询菜单列表 // // 查询菜单列表
export const getMenuList = (params: MenuReqVO) => {
return request("/system/menu/list", {
method: "GET",
params,
});
};
// export const getMenuList = (params) => { // export const getMenuList = (params) => {
// return request.get({ url: '/system/menu/list', params }) // return request.get({ url: '/system/menu/list', params })
// } // }
// // 获取菜单详情 // // 获取菜单详情
export const getMenu = (id: number) => {
return request("/system/menu/get", {
method: "GET",
params: { id },
});
};
// export const getMenu = (id: number) => { // export const getMenu = (id: number) => {
// return request.get({ url: '/system/menu/get?id=' + id }) // return request.get({ url: '/system/menu/get?id=' + id })
// } // }
// // 新增菜单 // // 新增菜单
export const createMenu = (data: MenuVO) => {
return request("/system/menu/create", {
method: "POST",
data,
});
};
// export const createMenu = (data: MenuVO) => { // export const createMenu = (data: MenuVO) => {
// return request.post({ url: '/system/menu/create', data }) // return request.post({ url: '/system/menu/create', data })
// } // }
// // 修改菜单 // // 修改菜单
export const updateMenu = (data: MenuVO) => {
return request("/system/menu/update", {
method: "PUT",
data,
});
};
// export const updateMenu = (data: MenuVO) => { // export const updateMenu = (data: MenuVO) => {
// return request.put({ url: '/system/menu/update', data }) // return request.put({ url: '/system/menu/update', data })
// } // }
// // 删除菜单 // // 删除菜单
export const deleteMenu = (id: number) => {
return request("/system/menu/delete", {
method: "DELETE",
params: { id },
});
};
// export const deleteMenu = (id: number) => { // export const deleteMenu = (id: number) => {
// return request.delete({ url: '/system/menu/delete?id=' + id }) // return request.delete({ url: '/system/menu/delete?id=' + id })
// } // }

Some files were not shown because too many files have changed in this diff Show More