Compare commits
17 Commits
aaa
...
5163e4dee8
| Author | SHA1 | Date | |
|---|---|---|---|
| 5163e4dee8 | |||
| 263a7d3e20 | |||
| 2821e864da | |||
| 3c7473f8d1 | |||
| a5b7207f44 | |||
| ed92397237 | |||
| 9eb4f52f0e | |||
| b4d3535b91 | |||
| 39f9e0e714 | |||
| 9c510636c5 | |||
| 10f78b7cff | |||
| 4e9ebc76f7 | |||
| 88097e386b | |||
| 82d043a414 | |||
| 34cd919441 | |||
| 12495b6d85 | |||
| 9363dc0d6e |
@@ -4,8 +4,8 @@ NODE_ENV=development
|
||||
VITE_DEV=true
|
||||
|
||||
# 请求路径
|
||||
# VITE_BASE_URL='http://114.132.60.20:48080'
|
||||
VITE_BASE_URL='http://192.168.1.114:48080' # 理君
|
||||
VITE_BASE_URL='http://114.132.60.20:48080'
|
||||
# VITE_BASE_URL='http://192.168.1.114:48080' # 理君
|
||||
|
||||
|
||||
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
|
||||
@@ -14,6 +14,8 @@ VITE_UPLOAD_TYPE=server
|
||||
# 接口地址
|
||||
VITE_API_URL=/admin-api
|
||||
|
||||
VITE_API_URL_PREFIX=/ai/sample/create
|
||||
|
||||
# 是否删除debugger
|
||||
VITE_DROP_DEBUGGER=false
|
||||
|
||||
|
||||
12
.github/FUNDING.yml
vendored
12
.github/FUNDING.yml
vendored
@@ -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
48
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@@ -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
28
.github/ISSUE_TEMPLATE/feature_request.md
vendored
@@ -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
34
.github/ISSUE_TEMPLATE/question.md
vendored
@@ -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
11
.github/dependabot.yml
vendored
@@ -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
31
.github/workflows/ci.yml
vendored
@@ -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
21
.github/workflows/coverage.yml
vendored
@@ -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
30
.github/workflows/deploy.yml
vendored
@@ -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
14
.github/workflows/emoji-helper.yml
vendored
@@ -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
37
.github/workflows/issue-labeled.yml
vendored
@@ -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，提前感谢和期待您的贡献。
|
||||
|
||||
|
||||
|
||||
- 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 仓库。
|
||||
|
||||
|
||||
34
.github/workflows/issue-open-check.yml
vendored
34
.github/workflows/issue-open-check.yml
vendored
@@ -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
40
.github/workflows/preview-build.yml
vendored
@@ -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
100
.github/workflows/preview-deploy.yml
vendored
@@ -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
24
.github/workflows/preview-start.yml
vendored
@@ -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 -->'
|
||||
@@ -83,7 +83,7 @@ export default defineConfig({
|
||||
* @name layout 插件
|
||||
* @doc https://umijs.org/docs/max/layout-menu
|
||||
*/
|
||||
title: 'Ant Design Pro',
|
||||
title: '百业到家',
|
||||
layout: {
|
||||
locale: true,
|
||||
...defaultSettings,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { ProLayoutProps } from "@ant-design/pro-components";
|
||||
import type { ProLayoutProps } from '@ant-design/pro-components';
|
||||
|
||||
/**
|
||||
* @name
|
||||
@@ -7,21 +7,26 @@ const Settings: ProLayoutProps & {
|
||||
pwa?: boolean;
|
||||
logo?: string;
|
||||
} = {
|
||||
navTheme: "light",
|
||||
navTheme: 'light',
|
||||
// 拂晓蓝
|
||||
colorPrimary: "#1890ff",
|
||||
layout: "mix",
|
||||
contentWidth: "Fluid",
|
||||
colorPrimary: '#1890ff',
|
||||
layout: 'mix',
|
||||
contentWidth: 'Fluid',
|
||||
fixedHeader: true,
|
||||
fixSiderbar: true,
|
||||
colorWeak: false,
|
||||
title: "百业到家云控台",
|
||||
title: '百业到家云控台',
|
||||
pwa: true,
|
||||
logo: "/logo.svg",
|
||||
iconfontUrl: "",
|
||||
logo: '/logo.svg',
|
||||
iconfontUrl: '',
|
||||
splitMenus: true,
|
||||
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
|
||||
},
|
||||
};
|
||||
|
||||
@@ -15,7 +15,9 @@ export default {
|
||||
// localhost:8000/api/** -> https://preview.pro.ant.design/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
|
||||
// 依赖 origin 的功能可能需要这个，比如 cookie
|
||||
changeOrigin: true,
|
||||
@@ -28,7 +30,7 @@ export default {
|
||||
test: {
|
||||
// localhost:8000/api/** -> https://preview.pro.ant.design/api/**
|
||||
'/api/': {
|
||||
target: 'https://proapi.azurewebsites.net',
|
||||
target: 'https://petshy.tashowz.com/',
|
||||
changeOrigin: true,
|
||||
pathRewrite: { '^': '' },
|
||||
},
|
||||
|
||||
@@ -13,70 +13,41 @@
|
||||
|
||||
export default [
|
||||
{
|
||||
path: "/user",
|
||||
path: '/user',
|
||||
layout: false,
|
||||
routes: [
|
||||
{
|
||||
name: "login",
|
||||
path: "/user/login",
|
||||
component: "./user/login",
|
||||
name: 'login',
|
||||
path: '/user/login',
|
||||
component: './user/login',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/welcome",
|
||||
name: "welcome",
|
||||
icon: "smile",
|
||||
component: "./Welcome",
|
||||
path: '/welcome',
|
||||
name: 'welcome',
|
||||
icon: 'smile',
|
||||
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",
|
||||
name: "admin",
|
||||
icon: "crown",
|
||||
access: "canAdmin",
|
||||
path: '/',
|
||||
redirect: '/welcome',
|
||||
},
|
||||
{
|
||||
path: '/trade',
|
||||
name: '交易管理',
|
||||
routes: [
|
||||
{
|
||||
path: "/admin",
|
||||
redirect: "/admin/sub-page",
|
||||
},
|
||||
{
|
||||
path: "/admin/sub-page",
|
||||
name: "sub-page",
|
||||
component: "./Admin",
|
||||
name: '订单管理',
|
||||
path: '/trade',
|
||||
component: './trade/order/index',
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// name: 'list.table-list',
|
||||
// icon: 'table',
|
||||
// path: '/list',
|
||||
// component: './table-list',
|
||||
// },
|
||||
{
|
||||
path: "/",
|
||||
redirect: "/welcome",
|
||||
},
|
||||
{
|
||||
component: "404",
|
||||
component: '404',
|
||||
layout: false,
|
||||
path: "*",
|
||||
path: '*',
|
||||
},
|
||||
];
|
||||
|
||||
14
mock/ap.ts
Normal file
14
mock/ap.ts
Normal 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
868
mock/login.ts
Normal 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
113
mock/notices.ts
@@ -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({
|
||||
data: [
|
||||
{
|
||||
id: '000000001',
|
||||
id: "000000001",
|
||||
avatar:
|
||||
'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/MSbDR4FR2MUAAAAAAAAAAAAAFl94AQBr',
|
||||
title: '你收到了 14 份新周报',
|
||||
datetime: '2017-08-09',
|
||||
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',
|
||||
"https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/MSbDR4FR2MUAAAAAAAAAAAAAFl94AQBr",
|
||||
title: "你收到了 14 份新周报",
|
||||
datetime: "2017-08-09",
|
||||
type: "notification",
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
export default {
|
||||
'GET /api/notices': getNotices,
|
||||
"GET /api/notices": getSampleTag,
|
||||
};
|
||||
|
||||
276
mock/order.ts
Normal file
276
mock/order.ts
Normal 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,
|
||||
};
|
||||
@@ -15,6 +15,7 @@
|
||||
"jest": "jest",
|
||||
"lint": "npm run biome:lint && npm run tsc",
|
||||
"lint-staged": "lint-staged",
|
||||
"lint:fix": "eslint --fix --quiet",
|
||||
"biome:lint": "npx @biomejs/biome lint",
|
||||
"openapi": "max openapi",
|
||||
"prepare": "husky",
|
||||
@@ -38,13 +39,17 @@
|
||||
"@ant-design/icons": "^5.6.1",
|
||||
"@ant-design/pro-components": "^2.8.9",
|
||||
"@ant-design/v5-patch-for-react-19": "^1.0.3",
|
||||
"@tinymce/tinymce-react": "^6.3.0",
|
||||
"antd": "^5.26.4",
|
||||
"antd-style": "^3.7.0",
|
||||
"classnames": "^2.5.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"jsencrypt": "^3.5.4",
|
||||
"rc-resize-observer": "^1.4.3",
|
||||
"react": "^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"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
51
pnpm-lock.yaml
generated
51
pnpm-lock.yaml
generated
@@ -17,6 +17,9 @@ importers:
|
||||
'@ant-design/v5-patch-for-react-19':
|
||||
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)
|
||||
'@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:
|
||||
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)
|
||||
@@ -32,12 +35,21 @@ importers:
|
||||
jsencrypt:
|
||||
specifier: ^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:
|
||||
specifier: ^19.1.0
|
||||
version: 19.1.1
|
||||
react-dom:
|
||||
specifier: ^19.1.0
|
||||
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:
|
||||
specifier: ^1.1.1
|
||||
version: 1.1.1
|
||||
@@ -2551,6 +2563,16 @@ packages:
|
||||
'@types/react-dom':
|
||||
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':
|
||||
resolution: {integrity: sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==}
|
||||
engines: {node: '>= 6'}
|
||||
@@ -9007,6 +9029,11 @@ packages:
|
||||
react: ^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:
|
||||
resolution: {integrity: sha512-cgumW29mwROIqyp8NXStYsoIm27+8FqnxykiLSawWjOxGIBeLuN/+p2srei5SRIumcJefOkOIHP+NDck05RgHg==}
|
||||
peerDependencies:
|
||||
@@ -10216,6 +10243,10 @@ packages:
|
||||
thread-stream@0.15.2:
|
||||
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:
|
||||
resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
|
||||
engines: {node: '>=12.22'}
|
||||
@@ -10246,6 +10277,9 @@ packages:
|
||||
tinyexec@1.0.1:
|
||||
resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
|
||||
|
||||
tinymce@8.1.2:
|
||||
resolution: {integrity: sha512-KITxHEEHRlxC5xOnxA123eAJ67NgsWxNphtItWt9TRu07DiTZrWIqJeIKRX9euE51/l3kJO4WQiqoBXKTJJGsA==}
|
||||
|
||||
titleize@3.0.0:
|
||||
resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
|
||||
engines: {node: '>=12'}
|
||||
@@ -14715,6 +14749,14 @@ snapshots:
|
||||
'@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@2.0.0': {}
|
||||
@@ -23275,6 +23317,11 @@ snapshots:
|
||||
react-fast-compare: 3.2.2
|
||||
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):
|
||||
dependencies:
|
||||
'@formatjs/intl-displaynames': 1.2.10
|
||||
@@ -24827,6 +24874,8 @@ snapshots:
|
||||
dependencies:
|
||||
real-require: 0.1.0
|
||||
|
||||
throttle-debounce@2.3.0: {}
|
||||
|
||||
throttle-debounce@5.0.2: {}
|
||||
|
||||
through@2.3.8: {}
|
||||
@@ -24850,6 +24899,8 @@ snapshots:
|
||||
|
||||
tinyexec@1.0.1: {}
|
||||
|
||||
tinymce@8.1.2: {}
|
||||
|
||||
titleize@3.0.0: {}
|
||||
|
||||
tldts-core@6.1.86: {}
|
||||
|
||||
41
src/app.tsx
41
src/app.tsx
@@ -1,15 +1,9 @@
|
||||
import type { Settings as LayoutSettings } from '@ant-design/pro-components';
|
||||
import { SettingDrawer } from '@ant-design/pro-components';
|
||||
import type { RequestConfig, RunTimeLayoutConfig } from '@umijs/max';
|
||||
import { history, Link, Navigate } from '@umijs/max';
|
||||
import { Modal, Spin } from 'antd';
|
||||
import React, {
|
||||
Children,
|
||||
Component,
|
||||
createContext,
|
||||
JSX,
|
||||
Suspense,
|
||||
} from 'react';
|
||||
import { history, Navigate } from '@umijs/max';
|
||||
import { Spin } from 'antd';
|
||||
import React from 'react';
|
||||
import {
|
||||
AvatarDropdown,
|
||||
AvatarName,
|
||||
@@ -18,17 +12,13 @@ import {
|
||||
SelectLang,
|
||||
} from '@/components';
|
||||
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 { errorConfig } from './requestErrorConfig';
|
||||
import '@ant-design/v5-patch-for-react-19';
|
||||
import { getAccessToken, getRefreshToken, getTenantId } from '@/utils/auth';
|
||||
import {
|
||||
transformBackendMenuToFlatRoutes,
|
||||
transformMenuToRoutes,
|
||||
} from '@/utils/menuUtils';
|
||||
import { useDictStore } from '@/hooks/stores/dict';
|
||||
import { getAccessToken, getTenantId } from '@/utils/auth';
|
||||
import { CACHE_KEY, useCache } from './hooks/web/useCache';
|
||||
import { MenuVO } from './services/system/menu';
|
||||
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
const isDevOrTest = isDev || process.env.CI;
|
||||
@@ -46,6 +36,7 @@ export async function getInitialState(): Promise<{
|
||||
fetchUserInfo?: () => Promise<UserInfoVO | undefined>;
|
||||
}> {
|
||||
const { wsCache } = useCache();
|
||||
const dictStore = useDictStore();
|
||||
const fetchUserInfo = async () => {
|
||||
// history.push(loginPath);
|
||||
try {
|
||||
@@ -57,6 +48,10 @@ export async function getInitialState(): Promise<{
|
||||
wsCache.set(CACHE_KEY.USER, data);
|
||||
wsCache.set(CACHE_KEY.ROLE_ROUTERS, data.menus);
|
||||
|
||||
if (!dictStore.getIsSetDict) {
|
||||
await dictStore.setDictMap();
|
||||
}
|
||||
|
||||
// 转换菜单格式
|
||||
|
||||
return data;
|
||||
@@ -198,15 +193,15 @@ export const request: RequestConfig = {
|
||||
};
|
||||
// 如果有token，则添加Authorization头
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${getAccessToken()}`;
|
||||
headers.Authorization = `Bearer ${getAccessToken()}`;
|
||||
}
|
||||
return { url, options: { ...options, headers } };
|
||||
},
|
||||
],
|
||||
|
||||
// 添加参数序列化配置
|
||||
paramsSerializer: (params) => {
|
||||
const searchParams = new URLSearchParams();
|
||||
|
||||
const appendParams = (key: string, value: any) => {
|
||||
if (Array.isArray(value)) {
|
||||
// 特殊处理 createTime 数组，转换为 createTime[0] 和 createTime[1] 格式
|
||||
@@ -235,20 +230,19 @@ export const request: RequestConfig = {
|
||||
// umi 4 使用 modifyRoutes
|
||||
export function patchClientRoutes({ routes }: { routes: any }) {
|
||||
const { wsCache } = useCache();
|
||||
console.log(2222);
|
||||
const globalMenus = wsCache.get(CACHE_KEY.ROLE_ROUTERS);
|
||||
const routerIndex = routes.findIndex((item: any) => item.path === '/');
|
||||
const parentId = routes[routerIndex].id;
|
||||
|
||||
if (globalMenus) {
|
||||
routes[routerIndex]['routes'].push(...loopMenuItem(globalMenus, parentId));
|
||||
routes[routerIndex].routes.push(...loopMenuItem(globalMenus, parentId));
|
||||
}
|
||||
}
|
||||
|
||||
const loopMenuItem = (menus: any[], pId: number | string): any[] => {
|
||||
return menus.flatMap((item) => {
|
||||
let Component: React.ComponentType<any> | null = null;
|
||||
console.log(findFirstLeafRoute(item), 'item');
|
||||
// console.log(findFirstLeafRoute(item), 'item');
|
||||
if (item.component && item.component.length > 0) {
|
||||
// 防止配置了路由，但本地暂未添加对应的页面，产生的错误
|
||||
Component = React.lazy(() => {
|
||||
@@ -299,7 +293,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) {
|
||||
@@ -308,7 +302,8 @@ const findFirstLeafRoute = (menuItem: any, parent = '/'): string | null => {
|
||||
|
||||
// 递归查找第一个叶子节点
|
||||
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) {
|
||||
return leafRoute;
|
||||
}
|
||||
|
||||
@@ -1,18 +1,25 @@
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import type { ProFormColumnsType } from '@ant-design/pro-components';
|
||||
import { BetaSchemaForm, DrawerForm } from '@ant-design/pro-components';
|
||||
import { Button, type ColProps, Drawer, Space, Typography } from 'antd';
|
||||
import React, { forwardRef, useImperativeHandle } from 'react';
|
||||
import { BetaSchemaForm } from '@ant-design/pro-components';
|
||||
import { Button, type ColProps, Drawer, Space } from 'antd';
|
||||
import type { FormInstance } from 'antd/lib';
|
||||
import React, {
|
||||
Children,
|
||||
cloneElement,
|
||||
forwardRef,
|
||||
useImperativeHandle,
|
||||
} from 'react';
|
||||
|
||||
const { Title } = Typography;
|
||||
interface ConfigurableDrawerFormProps {
|
||||
title?: string;
|
||||
columns: ProFormColumnsType[];
|
||||
columns?: ProFormColumnsType[];
|
||||
onSubmit?: (values: any) => Promise<boolean>;
|
||||
initialValues?: Record<string, any>;
|
||||
width?: number;
|
||||
width?: number | string;
|
||||
labelCol?: ColProps;
|
||||
wrapperCol?: ColProps;
|
||||
footer: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
bodyStyle: React.CSSProperties;
|
||||
}
|
||||
|
||||
export interface ConfigurableDrawerFormRef {
|
||||
@@ -33,6 +40,9 @@ const ConfigurableDrawerForm = forwardRef<
|
||||
onSubmit,
|
||||
initialValues,
|
||||
width = 600,
|
||||
footer,
|
||||
children,
|
||||
bodyStyle = {},
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
@@ -40,7 +50,7 @@ const ConfigurableDrawerForm = forwardRef<
|
||||
const [formData, setFormData] = React.useState(initialValues || {});
|
||||
const [loading, setLoading] = React.useState<boolean>(false);
|
||||
// 添加表单实例引用
|
||||
const formRef = React.useRef<any>(null);
|
||||
const formRef = React.useRef<FormInstance>(null);
|
||||
useImperativeHandle(ref, () => ({
|
||||
open: (data) => {
|
||||
if (data) {
|
||||
@@ -51,7 +61,17 @@ const ConfigurableDrawerForm = forwardRef<
|
||||
},
|
||||
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 () => {
|
||||
try {
|
||||
if (onSubmit) {
|
||||
@@ -70,31 +90,7 @@ const ConfigurableDrawerForm = forwardRef<
|
||||
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 (
|
||||
<Drawer
|
||||
title={title}
|
||||
@@ -103,6 +99,11 @@ const ConfigurableDrawerForm = forwardRef<
|
||||
textAlign: 'left',
|
||||
position: 'relative',
|
||||
},
|
||||
body: {
|
||||
background: 'var(--ant-background-color)',
|
||||
padding: 'var(--ant-padding-lg)',
|
||||
...bodyStyle,
|
||||
},
|
||||
}}
|
||||
destroyOnHidden
|
||||
closable={true} // 隐藏默认关闭按钮
|
||||
@@ -111,14 +112,20 @@ const ConfigurableDrawerForm = forwardRef<
|
||||
width={width}
|
||||
footer={
|
||||
<Space style={{ width: '100%', justifyContent: 'end' }}>
|
||||
{footer ? (
|
||||
footer
|
||||
) : (
|
||||
<>
|
||||
<Button onClick={() => setOpen(false)}>取消</Button>
|
||||
<Button loading={loading} type="primary" onClick={handleSubmit}>
|
||||
保存
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
{/* {customHeader} */}
|
||||
{columns ? (
|
||||
<BetaSchemaForm
|
||||
initialValues={formData}
|
||||
layoutType="Form"
|
||||
@@ -129,6 +136,10 @@ const ConfigurableDrawerForm = forwardRef<
|
||||
wrapperCol={wrapperCol}
|
||||
submitter={false}
|
||||
/>
|
||||
) : (
|
||||
renderChildren()
|
||||
// children
|
||||
)}
|
||||
</Drawer>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -1,33 +1,14 @@
|
||||
// components/EnhancedProTable/EnhancedProTable.tsx
|
||||
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
type ActionType,
|
||||
type ParamsType,
|
||||
ProColumns,
|
||||
ProTable,
|
||||
TableDropdown,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Button, Space } from 'antd';
|
||||
import React, {
|
||||
act,
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import {
|
||||
buildTableDropdownMenuItems,
|
||||
formatPaginationTotal,
|
||||
handleTableDropdownSelect,
|
||||
} from '@/utils/antd/tableHelpers';
|
||||
import {
|
||||
type BaseRecord,
|
||||
type EnhancedProTableProps,
|
||||
TableAction,
|
||||
ToolbarAction,
|
||||
} from './types';
|
||||
import { Button } from 'antd';
|
||||
import React, { forwardRef, useCallback } from 'react';
|
||||
import { formatPaginationTotal } from '@/utils/antd/tableHelpers';
|
||||
import type { BaseRecord, EnhancedProTableProps } from './types';
|
||||
|
||||
function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
|
||||
props: EnhancedProTableProps<T, U>,
|
||||
@@ -36,69 +17,15 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
|
||||
const {
|
||||
columns,
|
||||
request,
|
||||
actions = [],
|
||||
permissions = [],
|
||||
checkPermission = () => true,
|
||||
components,
|
||||
search = {},
|
||||
toolbarActions,
|
||||
showIndex = true,
|
||||
showSelection = true,
|
||||
showActions = true,
|
||||
maxActionCount = 2,
|
||||
onAdd,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onView,
|
||||
onExport,
|
||||
customToolbarRender,
|
||||
customActionRender,
|
||||
rowKey = 'id',
|
||||
pagination = true,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||||
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 toolBarRender = useCallback(() => {
|
||||
const toolbarElements =
|
||||
toolbarActions?.map((action) => {
|
||||
return (
|
||||
@@ -107,60 +34,59 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
|
||||
type={action.type}
|
||||
danger={action.danger}
|
||||
disabled={action.disabled}
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => action.onClick(selectedRowKeys, selectedRows)}
|
||||
// icon={action.icon ?? <PlusOutlined />}
|
||||
onClick={() => action.onClick()}
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
);
|
||||
}) || [];
|
||||
// return [
|
||||
// <Button
|
||||
// key="button"
|
||||
// icon={<PlusOutlined />}
|
||||
// onClick={}
|
||||
// type="primary"
|
||||
// >
|
||||
// 新建
|
||||
// </Button>,
|
||||
// ];
|
||||
return toolbarElements;
|
||||
},
|
||||
[toolbarActions],
|
||||
);
|
||||
}, [toolbarActions]);
|
||||
return (
|
||||
<ProTable<T, U>
|
||||
{...restProps}
|
||||
columns={columns}
|
||||
actionRef={ref}
|
||||
request={request}
|
||||
rowKey="id"
|
||||
rowSelection={rowSelection}
|
||||
rowKey={rowKey}
|
||||
rowSelection={props.rowSelection ?? false}
|
||||
toolBarRender={toolBarRender}
|
||||
manualRequest={false}
|
||||
showSorterTooltip
|
||||
tableAlertRender={tableAlertRender}
|
||||
// tableAlertOptionRender={tableAlertOptionRender}
|
||||
scroll={{ x: 'max-content' }}
|
||||
search={{
|
||||
// scroll={{ x: "max-content" }}
|
||||
scroll={{ x: 1200 }}
|
||||
components={components}
|
||||
search={
|
||||
search
|
||||
? {
|
||||
labelWidth: 'auto',
|
||||
defaultCollapsed: false,
|
||||
...restProps.search,
|
||||
}}
|
||||
options={{
|
||||
...search,
|
||||
}
|
||||
: false
|
||||
}
|
||||
options={
|
||||
search
|
||||
? {
|
||||
fullScreen: true,
|
||||
reload: true,
|
||||
setting: true,
|
||||
density: true,
|
||||
...restProps.options,
|
||||
}}
|
||||
pagination={{
|
||||
}
|
||||
: false
|
||||
}
|
||||
pagination={
|
||||
pagination
|
||||
? {
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
pageSize: 10,
|
||||
showTotal: formatPaginationTotal,
|
||||
...restProps.pagination,
|
||||
}}
|
||||
}
|
||||
: false
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
// components/EnhancedProTable/types.ts
|
||||
import {
|
||||
ProTableProps,
|
||||
ProColumns,
|
||||
import type {
|
||||
ActionType,
|
||||
} from "@ant-design/pro-components";
|
||||
import { ButtonProps } from "antd";
|
||||
import React from "react";
|
||||
ProColumns,
|
||||
ProTableProps,
|
||||
} from '@ant-design/pro-components';
|
||||
import type { ButtonProps } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
export interface BaseRecord {
|
||||
id: number;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface ApiResponse<T> {
|
||||
data: T[];
|
||||
total: number;
|
||||
total?: number;
|
||||
success: boolean;
|
||||
message?: string;
|
||||
}
|
||||
@@ -32,7 +31,7 @@ export interface TableAction<T = any> {
|
||||
key: string;
|
||||
label: string;
|
||||
icon?: React.ReactNode;
|
||||
type?: ButtonProps["type"];
|
||||
type?: ButtonProps['type'];
|
||||
danger?: boolean;
|
||||
disabled?: (record: T) => boolean;
|
||||
visible?: (record: T) => boolean;
|
||||
@@ -44,7 +43,7 @@ export interface ToolbarAction {
|
||||
key: string;
|
||||
label: string;
|
||||
icon?: React.ReactNode;
|
||||
type?: ButtonProps["type"];
|
||||
type?: ButtonProps['type'];
|
||||
danger?: boolean;
|
||||
disabled?: boolean;
|
||||
onClick: (selectedKeys?: React.Key[], selectedRows?: any[]) => void;
|
||||
@@ -53,12 +52,14 @@ export interface ToolbarAction {
|
||||
}
|
||||
|
||||
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>[];
|
||||
request?: (
|
||||
params: U & { current?: number; pageSize?: number }
|
||||
params: U & { current?: number; pageSize?: number },
|
||||
) => Promise<ApiResponse<T>>;
|
||||
loading?: boolean; // 添加 loading 属性
|
||||
enableRowClick?: boolean; //开启行内点击
|
||||
clickableRowClassName?: string;
|
||||
actions?: TableAction<T>[];
|
||||
toolbarActions?: ToolbarAction[];
|
||||
permissions?: string[];
|
||||
@@ -73,11 +74,11 @@ export interface EnhancedProTableProps<T extends BaseRecord, U = any>
|
||||
onView?: (record: T) => void;
|
||||
onExport?: (selectedRows: T[]) => void;
|
||||
customToolbarRender?: (
|
||||
defaultActions: React.ReactNode[]
|
||||
defaultActions: React.ReactNode[],
|
||||
) => React.ReactNode[];
|
||||
customActionRender?: (
|
||||
record: T,
|
||||
defaultActions: React.ReactNode[]
|
||||
defaultActions: React.ReactNode[],
|
||||
) => React.ReactNode[];
|
||||
}
|
||||
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
import { GithubOutlined } from "@ant-design/icons";
|
||||
import { DefaultFooter } from "@ant-design/pro-components";
|
||||
import React from "react";
|
||||
import { GithubOutlined } from '@ant-design/icons';
|
||||
import { DefaultFooter } from '@ant-design/pro-components';
|
||||
import React from 'react';
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
return (
|
||||
<DefaultFooter
|
||||
style={{
|
||||
background: "none",
|
||||
background: 'none',
|
||||
}}
|
||||
copyright="20250923"
|
||||
links={[
|
||||
{
|
||||
key: "by",
|
||||
title: "百业到家",
|
||||
href: "/welcome",
|
||||
key: 'by',
|
||||
title: '百业到家',
|
||||
href: '/welcome',
|
||||
blankTarget: true,
|
||||
},
|
||||
{
|
||||
key: "github",
|
||||
key: 'github',
|
||||
title: <GithubOutlined />,
|
||||
href: "https://github.com/ant-design/ant-design-pro",
|
||||
href: 'https://github.com/ant-design/ant-design-pro',
|
||||
blankTarget: true,
|
||||
},
|
||||
{
|
||||
key: "Ant Design",
|
||||
title: "Ant Design",
|
||||
href: "https://ant.design",
|
||||
key: 'bydj',
|
||||
title: '宠悦',
|
||||
href: 'https://ant.design',
|
||||
blankTarget: true,
|
||||
},
|
||||
]}
|
||||
|
||||
301
src/components/GroupTag/GroupTagCore.less
Normal file
301
src/components/GroupTag/GroupTagCore.less
Normal 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
343
src/components/GroupTag/GroupTagCore.tsx
Normal 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
63
src/components/GroupTag/GroupTagModal.tsx
Normal 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
400
src/components/GroupTag/GroupTagSelect.less
Normal 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
100
src/components/GroupTag/GroupTagSelect.tsx
Normal 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
98
src/components/GroupTag/TagsModal.tsx
Normal 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
179
src/components/GroupTag/component.tsx
Normal 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
96
src/components/GroupTag/types.ts
Normal 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
96
src/components/PopconfirmForm/index.tsx
Normal 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
170
src/components/RenameRule/index.less
Normal 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
398
src/components/RenameRule/index.tsx
Normal 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
111
src/components/TagEditor/index.tsx
Normal 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
691
src/components/Tinymce/demo.tsx
Normal 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
145
src/components/Tinymce/index.less
Normal 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
262
src/components/Tinymce/index.tsx
Normal 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
8
src/components/Upload/UploadCard/index.module.less
Normal 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
167
src/components/Upload/UploadCard/index.tsx
Normal 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;
|
||||
93
src/components/XTag/index.tsx
Normal file
93
src/components/XTag/index.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import type { TagProps } from 'antd';
|
||||
import { Tag } from 'antd';
|
||||
import React, { useMemo } from 'react';
|
||||
import { isHexColor } from '@/utils/color';
|
||||
import { isArray, isBoolean, isNumber, isString } from '@/utils/common';
|
||||
import type { DictDataType } from '@/utils/dict';
|
||||
import { getDictOptions } from '@/utils/dict';
|
||||
|
||||
interface DictTagProps {
|
||||
type: string;
|
||||
value: string | number | boolean | Array<string | number | boolean>;
|
||||
// 字符串分隔符 只有当 value 传入值为字符串时有效
|
||||
separator?: string;
|
||||
// 每个 tag 之间的间隔，默认为 5px
|
||||
gutter?: string;
|
||||
}
|
||||
|
||||
const DictTag: React.FC<DictTagProps> = ({
|
||||
type,
|
||||
value,
|
||||
separator = ',',
|
||||
gutter = '5px',
|
||||
}) => {
|
||||
const valueArr = useMemo(() => {
|
||||
// 1. 是 Number 类型和 Boolean 类型的情况
|
||||
if (isNumber(value) || isBoolean(value)) {
|
||||
return [String(value)];
|
||||
}
|
||||
// 2. 是字符串（进一步判断是否有包含分隔符号 -> separator）
|
||||
else if (isString(value)) {
|
||||
return value.split(separator);
|
||||
}
|
||||
// 3. 数组
|
||||
else if (isArray(value)) {
|
||||
return value.map(String);
|
||||
}
|
||||
return [];
|
||||
}, [value, separator]);
|
||||
|
||||
// 解决自定义字典标签值为零时标签不渲染的问题
|
||||
if (!type || value === undefined || value === null || value === '') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const dictOptions = getDictOptions(type);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="dict-tag"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
gap: gutter,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{dictOptions
|
||||
.filter((dict: DictDataType) => valueArr.includes(String(dict.value)))
|
||||
.map((dict: DictDataType) => {
|
||||
// 处理 tag 类型
|
||||
const colorType: TagProps['color'] = dict.colorType || undefined;
|
||||
|
||||
// if (dict.colorType !== "primary" && dict.colorType !== "default") {
|
||||
// colorType = dict.colorType || undefined;
|
||||
// }
|
||||
|
||||
// 处理自定义颜色
|
||||
const customColor =
|
||||
dict?.cssClass && isHexColor(dict?.cssClass)
|
||||
? dict?.cssClass
|
||||
: undefined;
|
||||
|
||||
console.log(customColor, 'customColor');
|
||||
console.log(colorType, 'colorType');
|
||||
|
||||
return (
|
||||
<Tag
|
||||
key={`${dict.value}-${dict.label}`}
|
||||
color={customColor || colorType}
|
||||
style={{
|
||||
...(customColor ? { color: '#fff' } : {}), // 自定义背景颜色时文字为白色
|
||||
margin: 0, // 去除默认 margin，使用 gap 控制间距
|
||||
}}
|
||||
>
|
||||
{dict.label}
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DictTag;
|
||||
@@ -1 +1,46 @@
|
||||
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';
|
||||
// ========== COMMON 模块 ==========
|
||||
// 全局通用状态枚举
|
||||
export const CommonStatusEnum = {
|
||||
ENABLE: 0, // 开启
|
||||
DISABLE: 1, // 禁用
|
||||
};
|
||||
|
||||
55
src/constants/trade.ts
Normal file
55
src/constants/trade.ts
Normal 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';
|
||||
};
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
131
src/hooks/antd/useMessage.ts
Normal file
131
src/hooks/antd/useMessage.ts
Normal file
@@ -0,0 +1,131 @@
|
||||
// src/hooks/antd/useMessage.ts
|
||||
import { Modal, message, notification } from 'antd';
|
||||
|
||||
export const useMessage = () => {
|
||||
return {
|
||||
// 消息提示
|
||||
info(content: string) {
|
||||
message.info(content);
|
||||
},
|
||||
// 错误消息
|
||||
error(content: string) {
|
||||
message.error(content);
|
||||
},
|
||||
// 成功消息
|
||||
success(content: string) {
|
||||
message.success(content);
|
||||
},
|
||||
// 警告消息
|
||||
warning(content: string) {
|
||||
message.warning(content);
|
||||
},
|
||||
// 弹出提示
|
||||
alert(content: string) {
|
||||
Modal.info({
|
||||
title: '提示',
|
||||
content: content,
|
||||
okText: '确定',
|
||||
});
|
||||
},
|
||||
// 错误提示
|
||||
alertError(content: string) {
|
||||
Modal.error({
|
||||
title: '提示',
|
||||
content: content,
|
||||
okText: '确定',
|
||||
});
|
||||
},
|
||||
// 成功提示
|
||||
alertSuccess(content: string) {
|
||||
Modal.success({
|
||||
title: '提示',
|
||||
content: content,
|
||||
okText: '确定',
|
||||
});
|
||||
},
|
||||
// 警告提示
|
||||
alertWarning(content: string) {
|
||||
Modal.warning({
|
||||
title: '提示',
|
||||
content: content,
|
||||
okText: '确定',
|
||||
});
|
||||
},
|
||||
// 通知提示
|
||||
notify(content: string) {
|
||||
notification.info({
|
||||
message: content,
|
||||
});
|
||||
},
|
||||
// 错误通知
|
||||
notifyError(content: string) {
|
||||
notification.error({
|
||||
message: content,
|
||||
});
|
||||
},
|
||||
// 成功通知
|
||||
notifySuccess(content: string) {
|
||||
notification.success({
|
||||
message: content,
|
||||
});
|
||||
},
|
||||
// 警告通知
|
||||
notifyWarning(content: string) {
|
||||
notification.warning({
|
||||
message: content,
|
||||
});
|
||||
},
|
||||
// 确认窗体
|
||||
confirm(content: string, tip?: string) {
|
||||
return new Promise<boolean>((resolve) => {
|
||||
Modal.confirm({
|
||||
title: tip ? tip : '提示',
|
||||
content: content,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: () => resolve(true),
|
||||
onCancel: () => resolve(false),
|
||||
});
|
||||
});
|
||||
},
|
||||
// 删除窗体
|
||||
delConfirm(content?: string, tip?: string) {
|
||||
return new Promise<boolean>((resolve) => {
|
||||
Modal.confirm({
|
||||
title: tip ? tip : '提示',
|
||||
content: content ? content : '是否确认删除？',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: () => resolve(true),
|
||||
onCancel: () => resolve(false),
|
||||
});
|
||||
});
|
||||
},
|
||||
// 导出窗体
|
||||
exportConfirm(content?: string, tip?: string) {
|
||||
return new Promise<boolean>((resolve) => {
|
||||
Modal.confirm({
|
||||
title: tip ? tip : '提示',
|
||||
content: content ? content : '是否确认导出？',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: () => resolve(true),
|
||||
onCancel: () => resolve(false),
|
||||
});
|
||||
});
|
||||
},
|
||||
// 提交内容
|
||||
prompt(content: string, tip: string) {
|
||||
return new Promise<boolean>((resolve) => {
|
||||
Modal.confirm({
|
||||
title: tip,
|
||||
content: content,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: () => resolve(true),
|
||||
onCancel: () => resolve(false),
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
111
src/hooks/stores/dict.ts
Normal file
111
src/hooks/stores/dict.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
import { CACHE_KEY, useCache } from '@/hooks/web/useCache';
|
||||
import type { DictDataVO } from '@/services/system/dict/dict.data';
|
||||
import { getSimpleDictDataList } from '@/services/system/dict/dict.data';
|
||||
|
||||
export interface DictValueType {
|
||||
value: any;
|
||||
label: string;
|
||||
clorType?: string;
|
||||
cssClass?: string;
|
||||
}
|
||||
|
||||
export interface DictTypeType {
|
||||
dictType: string;
|
||||
dictValue: DictValueType[];
|
||||
}
|
||||
|
||||
export interface DictState {
|
||||
dictMap: Record<string, any[]>;
|
||||
isSetDict: boolean;
|
||||
}
|
||||
|
||||
export const useDictStore = () => {
|
||||
const { wsCache } = useCache();
|
||||
const state: DictState = {
|
||||
dictMap: {},
|
||||
isSetDict: false,
|
||||
};
|
||||
|
||||
const getDictMap = (): Recordable => {
|
||||
const dictMap = wsCache.get(CACHE_KEY.DICT_CACHE);
|
||||
if (dictMap) {
|
||||
state.dictMap = dictMap;
|
||||
}
|
||||
return state.dictMap;
|
||||
};
|
||||
|
||||
const getIsSetDict = (): boolean => {
|
||||
return state.isSetDict;
|
||||
};
|
||||
|
||||
const setDictMap = async () => {
|
||||
const dictMap = wsCache.get(CACHE_KEY.DICT_CACHE);
|
||||
if (dictMap) {
|
||||
state.dictMap = dictMap;
|
||||
state.isSetDict = true;
|
||||
} else {
|
||||
const res = await getSimpleDictDataList();
|
||||
// 设置数据
|
||||
const dictDataMap: Record<string, any[]> = {};
|
||||
|
||||
res.forEach((dictData: DictDataVO) => {
|
||||
// 获得 dictType 层级
|
||||
if (!dictDataMap[dictData.dictType]) {
|
||||
dictDataMap[dictData.dictType] = [];
|
||||
}
|
||||
|
||||
// 处理 dictValue 层级
|
||||
dictDataMap[dictData.dictType].push({
|
||||
value: dictData.value,
|
||||
label: dictData.label,
|
||||
colorType: dictData.colorType,
|
||||
cssClass: dictData.cssClass,
|
||||
});
|
||||
});
|
||||
state.dictMap = dictDataMap;
|
||||
state.isSetDict = true;
|
||||
wsCache.set(CACHE_KEY.DICT_CACHE, dictDataMap, { exp: 60 }); // 60 秒 过期
|
||||
}
|
||||
};
|
||||
|
||||
const getDictByType = (type: string) => {
|
||||
if (!state.isSetDict) {
|
||||
setDictMap();
|
||||
}
|
||||
return state.dictMap[type];
|
||||
};
|
||||
|
||||
const resetDict = async () => {
|
||||
wsCache.delete(CACHE_KEY.DICT_CACHE);
|
||||
const res = await getSimpleDictDataList();
|
||||
// 设置数据
|
||||
const dictDataMap: Record<string, any[]> = {};
|
||||
|
||||
res.forEach((dictData: DictDataVO) => {
|
||||
// 获得 dictType 层级
|
||||
if (!dictDataMap[dictData.dictType]) {
|
||||
dictDataMap[dictData.dictType] = [];
|
||||
}
|
||||
|
||||
// 处理 dictValue 层级
|
||||
dictDataMap[dictData.dictType].push({
|
||||
value: dictData.value,
|
||||
label: dictData.label,
|
||||
colorType: dictData.colorType,
|
||||
cssClass: dictData.cssClass,
|
||||
});
|
||||
});
|
||||
state.dictMap = dictDataMap;
|
||||
state.isSetDict = true;
|
||||
wsCache.set(CACHE_KEY.DICT_CACHE, dictDataMap, { exp: 60 }); // 60 秒 过期
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
getDictMap,
|
||||
getIsSetDict,
|
||||
setDictMap,
|
||||
getDictByType,
|
||||
resetDict,
|
||||
};
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "Ant Design Pro",
|
||||
"short_name": "Ant Design Pro",
|
||||
"name": "百业到家",
|
||||
"short_name": "百业到家",
|
||||
"display": "standalone",
|
||||
"start_url": "./?utm_source=homescreen",
|
||||
"theme_color": "#002140",
|
||||
|
||||
@@ -116,7 +116,7 @@ const Welcome: React.FC = () => {
|
||||
color: token.colorTextHeading,
|
||||
}}
|
||||
>
|
||||
欢迎使用 Ant Design Pro
|
||||
欢迎使用 百业到家
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
@@ -128,7 +128,7 @@ const Welcome: React.FC = () => {
|
||||
width: '65%',
|
||||
}}
|
||||
>
|
||||
Ant Design Pro 是一个整合了 umi，Ant Design 和 ProComponents
|
||||
百业到家 是一个整合了 umi，Ant Design 和 ProComponents
|
||||
的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
|
||||
</p>
|
||||
<div
|
||||
|
||||
83
src/pages/ai/sample-tag/components/tag-manager.tsx
Normal file
83
src/pages/ai/sample-tag/components/tag-manager.tsx
Normal 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
173
src/pages/ai/sample-tag/config.tsx
Normal 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
328
src/pages/ai/sample-tag/detail.tsx
Normal 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
21
src/pages/ai/sample-tag/index.module.less
Normal 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
127
src/pages/ai/sample-tag/index.tsx
Normal 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
156
src/pages/prod/category/config.tsx
Normal 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
129
src/pages/prod/category/index.tsx
Normal 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
5
src/pages/prod/list/index.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
const ProdList = () => {
|
||||
return <div>ProdList</div>;
|
||||
};
|
||||
|
||||
export default ProdList;
|
||||
170
src/pages/system/dept/config.tsx
Normal file
170
src/pages/system/dept/config.tsx
Normal 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,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -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 = () => {
|
||||
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;
|
||||
|
||||
120
src/pages/system/dict/config.tsx
Normal file
120
src/pages/system/dict/config.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import DictTag from '@/components/XTag';
|
||||
import { tenantStatus } from '@/constants';
|
||||
import type { DictTypeVO } from '@/services/system/dict/dict.type';
|
||||
import { DICT_TYPE } from '@/utils/dict';
|
||||
|
||||
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,
|
||||
valueType: 'select',
|
||||
render: (_, record) => {
|
||||
return (
|
||||
<DictTag type={DICT_TYPE.COMMON_STATUS} value={record.status}></DictTag>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
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,
|
||||
},
|
||||
},
|
||||
];
|
||||
197
src/pages/system/dict/data/config.tsx
Normal file
197
src/pages/system/dict/data/config.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
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,
|
||||
render: (_, record) => (
|
||||
<Tag color={record.cssClass || record.colorType}>{record.label}</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
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,
|
||||
render: (_, record) => (
|
||||
<Tag color={record.colorType}>{record.colorType}</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
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: 0,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '颜色类型',
|
||||
dataIndex: 'colorType',
|
||||
valueType: 'select',
|
||||
fieldProps: {
|
||||
options: [
|
||||
{
|
||||
label: <Tag color="default">默认(default)</Tag>,
|
||||
value: 'default',
|
||||
},
|
||||
{
|
||||
label: <Tag color="success">成功(success)</Tag>,
|
||||
value: 'success',
|
||||
},
|
||||
{
|
||||
label: <Tag color="processing">信息(processing)</Tag>,
|
||||
value: 'processing',
|
||||
},
|
||||
{
|
||||
label: <Tag color="error">失败(error)</Tag>,
|
||||
value: 'error',
|
||||
},
|
||||
{
|
||||
label: <Tag color="warning">警告(warning)</Tag>,
|
||||
value: 'warning',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'CSS Class',
|
||||
dataIndex: 'cssClass',
|
||||
tooltip: '输入rgb颜色值或#16进制颜色值',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark',
|
||||
},
|
||||
];
|
||||
139
src/pages/system/dict/data/index.tsx
Normal file
139
src/pages/system/dict/data/index.tsx
Normal 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;
|
||||
@@ -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 = () => {
|
||||
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;
|
||||
|
||||
368
src/pages/system/menu/config.tsx
Normal file
368
src/pages/system/menu/config.tsx
Normal file
@@ -0,0 +1,368 @@
|
||||
// src/pages/system/menu/config.tsx
|
||||
import {
|
||||
type ProColumns,
|
||||
type ProFormColumnsType,
|
||||
ProFormRadio,
|
||||
ProFormText,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Switch } from 'antd';
|
||||
import { CommonStatusEnum } from '@/constants';
|
||||
import { useMessage } from '@/hooks/antd/useMessage';
|
||||
import {
|
||||
getSimpleMenusList,
|
||||
type MenuVO,
|
||||
updateMenu,
|
||||
} from '@/services/system/menu';
|
||||
import { handleTree } from '@/utils/tree';
|
||||
|
||||
const handleStatus = async (record: MenuVO) => {
|
||||
const message = useMessage(); // 消息弹窗
|
||||
const text = record.status === CommonStatusEnum.ENABLE ? '停用' : '启用';
|
||||
await message.confirm(`确认要"${text}""${record.name}"菜单吗?`);
|
||||
const status = record.status === 0 ? 1 : 0;
|
||||
await updateMenu({ ...record, status });
|
||||
};
|
||||
|
||||
export const baseMenuColumns: ProColumns<MenuVO>[] = [
|
||||
{
|
||||
title: '菜单名称',
|
||||
dataIndex: 'name',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
dataIndex: 'icon',
|
||||
width: 60,
|
||||
hideInSearch: true,
|
||||
render: (_, record: MenuVO) => (
|
||||
<span>
|
||||
{record.icon ? <i className={`anticon ${record.icon}`} /> : '—'}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
width: 80,
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '权限标识',
|
||||
dataIndex: 'permission',
|
||||
width: 150,
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '组件路径',
|
||||
dataIndex: 'component',
|
||||
width: 150,
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '组件名称',
|
||||
dataIndex: 'componentName',
|
||||
width: 150,
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 80,
|
||||
render: (_dom, record: MenuVO, _: any, action: any) => (
|
||||
<Switch
|
||||
onClick={async () => {
|
||||
await handleStatus(record);
|
||||
action?.reload();
|
||||
}}
|
||||
checked={record.status === 0}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export const formColumns = (_type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '上级菜单',
|
||||
dataIndex: 'parentId',
|
||||
valueType: 'treeSelect',
|
||||
request: async () => {
|
||||
const res = await getSimpleMenusList();
|
||||
console.log(res);
|
||||
const menu: Tree = { id: 0, name: '主类目', children: [] };
|
||||
menu.children = handleTree(res);
|
||||
return [menu];
|
||||
},
|
||||
fieldProps: {
|
||||
fieldNames: { label: 'name', value: 'id', children: 'children' },
|
||||
placeholder: '请选择上级菜单',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '菜单名称',
|
||||
dataIndex: 'name',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入菜单名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '菜单类型',
|
||||
dataIndex: 'type',
|
||||
valueType: 'radioButton',
|
||||
fieldProps: {
|
||||
placeholder: '请选择菜单类型',
|
||||
options: [
|
||||
{ label: '目录', value: 1 },
|
||||
{ label: '菜单', value: 2 },
|
||||
{ label: '按钮', value: 3 },
|
||||
],
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入菜单类型',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '菜单图标',
|
||||
dataIndex: 'icon',
|
||||
fieldProps: {
|
||||
placeholder: '请选择图标',
|
||||
},
|
||||
dependencies: ['type'],
|
||||
renderFormItem: (_schema, _config, form) => {
|
||||
const type = form.getFieldValue('type');
|
||||
if (type === 3) return null;
|
||||
return (
|
||||
<ProFormText
|
||||
formItemProps={{
|
||||
style: {
|
||||
marginBottom: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '路由地址',
|
||||
dataIndex: 'path',
|
||||
tooltip:
|
||||
'访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头',
|
||||
fieldProps: {
|
||||
placeholder: '请输入路由地址',
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入菜单路径',
|
||||
},
|
||||
],
|
||||
},
|
||||
dependencies: ['type'],
|
||||
renderFormItem: (_schema, _config, form) => {
|
||||
const type = form.getFieldValue('type');
|
||||
if (type === 3) return null;
|
||||
return (
|
||||
<ProFormText
|
||||
formItemProps={{
|
||||
style: {
|
||||
marginBottom: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '组件地址',
|
||||
dataIndex: 'component',
|
||||
fieldProps: {
|
||||
placeholder: '请输入组件地址',
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入组件地址',
|
||||
},
|
||||
],
|
||||
},
|
||||
dependencies: ['type'],
|
||||
renderFormItem: (_schema, _config, form) => {
|
||||
const type = form.getFieldValue('type');
|
||||
if (type !== 2) return null;
|
||||
return (
|
||||
<ProFormText
|
||||
formItemProps={{
|
||||
style: {
|
||||
marginBottom: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '组件名称',
|
||||
dataIndex: 'componentName',
|
||||
fieldProps: {
|
||||
placeholder: '请输入组件名称',
|
||||
},
|
||||
dependencies: ['type'],
|
||||
renderFormItem: (_schema, _config, form) => {
|
||||
const type = form.getFieldValue('type');
|
||||
if (type !== 2) return null;
|
||||
|
||||
return (
|
||||
<ProFormText
|
||||
formItemProps={{
|
||||
style: {
|
||||
marginBottom: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '权限标识',
|
||||
dataIndex: 'permission',
|
||||
tooltip:
|
||||
"Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)",
|
||||
fieldProps: {
|
||||
placeholder: '请输入权限标识',
|
||||
},
|
||||
dependencies: ['type'],
|
||||
renderFormItem: (_schema, _config, form) => {
|
||||
const type = form.getFieldValue('type');
|
||||
if (type === 1) return null;
|
||||
return (
|
||||
<ProFormText
|
||||
formItemProps={{
|
||||
style: {
|
||||
marginBottom: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '显示排序',
|
||||
dataIndex: 'sort',
|
||||
valueType: 'digit',
|
||||
fieldProps: {
|
||||
style: {
|
||||
width: '100%',
|
||||
},
|
||||
placeholder: '请输入排序值',
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入排序值',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: '菜单状态',
|
||||
dataIndex: 'status',
|
||||
valueType: 'radio',
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ label: '启用', value: 0 },
|
||||
{ label: '禁用', value: 1 },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '显示状态',
|
||||
dataIndex: 'visible',
|
||||
valueType: 'radio',
|
||||
tooltip: '选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问',
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ label: '显示', value: true },
|
||||
{ label: '隐藏', value: false },
|
||||
],
|
||||
},
|
||||
dependencies: ['type'],
|
||||
renderFormItem: (_schema, _config, form) => {
|
||||
const type = form.getFieldValue('type');
|
||||
if (type === 3) return null;
|
||||
return (
|
||||
<ProFormRadio.Group
|
||||
formItemProps={{
|
||||
style: {
|
||||
marginBottom: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '总是显示',
|
||||
dataIndex: 'alwaysShow',
|
||||
valueType: 'radio',
|
||||
tooltip: '选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单',
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ label: '总是', value: true },
|
||||
{ label: '不是', value: false },
|
||||
],
|
||||
},
|
||||
dependencies: ['type'],
|
||||
renderFormItem: (_schema, _config, form) => {
|
||||
const type = form.getFieldValue('type');
|
||||
if (type === 3) return null;
|
||||
return (
|
||||
<ProFormRadio.Group
|
||||
formItemProps={{
|
||||
style: {
|
||||
marginBottom: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
dataIndex: 'keepAlive',
|
||||
title: '缓存状态',
|
||||
valueType: 'radio',
|
||||
tooltip: '选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段',
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ label: '总是', value: true },
|
||||
{ label: '不是', value: false },
|
||||
],
|
||||
},
|
||||
dependencies: ['type'],
|
||||
renderFormItem: (_schema, _config, form) => {
|
||||
const type = form.getFieldValue('type');
|
||||
if (type === 3) return null;
|
||||
return (
|
||||
<ProFormRadio.Group
|
||||
formItemProps={{
|
||||
style: {
|
||||
marginBottom: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -1,5 +1,150 @@
|
||||
const SyStemMenu = () => {
|
||||
return <>SyStemMenu</>;
|
||||
// src/pages/system/menu/index.tsx
|
||||
|
||||
import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { useModel } from '@umijs/max';
|
||||
import { Modal, 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 { useMessage } from '@/hooks/antd/useMessage';
|
||||
import { CACHE_KEY, useCache } from '@/hooks/web/useCache';
|
||||
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 { wsCache } = useCache();
|
||||
const message = useMessage(); // 消息弹窗
|
||||
const [type, setType] = useState<'create' | 'update'>('create');
|
||||
const [id, setId] = useState<number>(0);
|
||||
const { initialState, setInitialState } = useModel('@@initialState');
|
||||
const handleEdit = (record: MenuVO) => {
|
||||
setType('update');
|
||||
setId(record.id);
|
||||
|
||||
configurableDrawerRef.current?.open(record);
|
||||
};
|
||||
|
||||
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({ type: 1 });
|
||||
};
|
||||
|
||||
const handleReload = async () => {
|
||||
try {
|
||||
await message.confirm('即将更新缓存刷新浏览器！', '刷新菜单缓存');
|
||||
// 清空，从而触发刷新
|
||||
// wsCache.delete(CACHE_KEY.USER);
|
||||
// wsCache.delete(CACHE_KEY.ROLE_ROUTERS);
|
||||
await initialState?.fetchUserInfo?.();
|
||||
// 刷新浏览器
|
||||
location.reload();
|
||||
} catch {}
|
||||
};
|
||||
|
||||
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,
|
||||
},
|
||||
{
|
||||
key: 'reload',
|
||||
label: '刷新菜单缓存',
|
||||
type: 'primary',
|
||||
icon: <ReloadOutlined />,
|
||||
onClick: handleReload,
|
||||
},
|
||||
];
|
||||
|
||||
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}
|
||||
width={900}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyStemMenu;
|
||||
export default SystemMenu;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import type {
|
||||
ProColumns,
|
||||
ProDescriptionsItemProps,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import dayjs from 'dayjs';
|
||||
@@ -160,7 +159,7 @@ export const formColumns = (): ProFormColumnsType[] => [
|
||||
},
|
||||
];
|
||||
|
||||
export const formTestColumns = (type: string): ProFormColumnsType[] => [
|
||||
export const formTestColumns = (): ProFormColumnsType[] => [
|
||||
{
|
||||
title: '模板内容',
|
||||
dataIndex: 'content',
|
||||
|
||||
@@ -15,18 +15,17 @@ import { formStatusType } from '@/constants';
|
||||
import {
|
||||
createMailAccount,
|
||||
deleteMailAccount,
|
||||
getMailAccount,
|
||||
getMailAccountPage,
|
||||
type MailAccountVO,
|
||||
updateMailAccount,
|
||||
} from '@/services/system/message/mail/account';
|
||||
import { baseTenantColumns, formColumns, formTestColumns } from './config';
|
||||
import { baseTenantColumns, formColumns } from './config';
|
||||
|
||||
const SyStemMessageSmsTemplate = () => {
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [type, setType] = useState<'create' | 'update' | 'test'>('create');
|
||||
const testRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
// const testRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [currentItem, setCurrentItem] = useState<MailAccountVO>();
|
||||
const onFetch = async (
|
||||
params: MailAccountVO & {
|
||||
@@ -46,11 +45,11 @@ const SyStemMessageSmsTemplate = () => {
|
||||
};
|
||||
};
|
||||
|
||||
const handleSend = async (record: MailAccountVO) => {
|
||||
setType('test');
|
||||
setCurrentItem(record);
|
||||
testRef.current?.open(record);
|
||||
};
|
||||
// const handleSend = async (record: MailAccountVO) => {
|
||||
// setType("test");
|
||||
// setCurrentItem(record);
|
||||
// testRef.current?.open(record);
|
||||
// };
|
||||
|
||||
const handleEdit = (record: MailAccountVO) => {
|
||||
setType('update');
|
||||
@@ -68,10 +67,10 @@ const SyStemMessageSmsTemplate = () => {
|
||||
if (type === 'create') {
|
||||
await createMailAccount(values);
|
||||
message.success('创建成功');
|
||||
} else {
|
||||
} else if (currentItem?.id) {
|
||||
await updateMailAccount({
|
||||
...values,
|
||||
id: currentItem!.id,
|
||||
id: currentItem.id,
|
||||
});
|
||||
message.success('编辑成功');
|
||||
}
|
||||
@@ -97,7 +96,7 @@ const SyStemMessageSmsTemplate = () => {
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (
|
||||
text: React.ReactNode,
|
||||
_text: React.ReactNode,
|
||||
record: MailAccountVO,
|
||||
_: number,
|
||||
action: ProCoreActionType | undefined,
|
||||
|
||||
121
src/pages/system/post/config.tsx
Normal file
121
src/pages/system/post/config.tsx
Normal 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: '请输入备注',
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -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 = () => {
|
||||
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;
|
||||
|
||||
143
src/pages/system/role/config.tsx
Normal file
143
src/pages/system/role/config.tsx
Normal 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,
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -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 = () => {
|
||||
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;
|
||||
|
||||
@@ -2,10 +2,10 @@ import type {
|
||||
ProColumns,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { DatePicker, Modal, Popconfirm } from 'antd';
|
||||
import { FormInstance } from 'antd/lib';
|
||||
import { Tag } from 'antd';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import { deleteTenant, type TenantVO } from '@/services/system/tenant/list';
|
||||
import type { TenantVO } from '@/services/system/tenant/list';
|
||||
import { getTenantPackageList } from '@/services/system/tenant/package';
|
||||
|
||||
export const baseTenantColumns: ProColumns<TenantVO>[] = [
|
||||
@@ -29,9 +29,22 @@ export const baseTenantColumns: ProColumns<TenantVO>[] = [
|
||||
request: async () => {
|
||||
const packageList: { id: number; name: string }[] =
|
||||
await getTenantPackageList();
|
||||
console.log(packageList);
|
||||
packageList.map((item) => ({ label: item.name, value: item.id }));
|
||||
return packageList.map((item) => ({ label: item.name, value: item.id }));
|
||||
const newData = packageList.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
const defData = [{ value: 0, label: '系统' }];
|
||||
return [...defData, ...newData];
|
||||
},
|
||||
render: (dom, record) => {
|
||||
return (
|
||||
<Tag
|
||||
key={record.id}
|
||||
color={record.packageId === 0 ? 'error' : 'success'}
|
||||
>
|
||||
{dom}
|
||||
</Tag>
|
||||
);
|
||||
},
|
||||
// valueEnum: {
|
||||
// all: { text: "全部", status: "Default" },
|
||||
@@ -83,7 +96,14 @@ export const baseTenantColumns: ProColumns<TenantVO>[] = [
|
||||
valueType: 'dateRange',
|
||||
search: {
|
||||
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) =>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { Modal, Popconfirm } from 'antd';
|
||||
import { Popconfirm } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { ref } from 'process';
|
||||
import React, { createContext, useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
@@ -93,7 +92,7 @@ const TenantList = () => {
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
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>,
|
||||
@@ -122,8 +121,6 @@ const TenantList = () => {
|
||||
headerTitle="租户列表"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
showActions
|
||||
maxActionCount={3}
|
||||
/>
|
||||
|
||||
<ConfigurableDrawerForm
|
||||
|
||||
109
src/pages/system/tenant/package/config.tsx
Normal file
109
src/pages/system/tenant/package/config.tsx
Normal 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',
|
||||
},
|
||||
];
|
||||
@@ -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 = () => {
|
||||
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;
|
||||
|
||||
220
src/pages/system/user/config.tsx
Normal file
220
src/pages/system/user/config.tsx
Normal 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',
|
||||
},
|
||||
];
|
||||
@@ -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 = () => {
|
||||
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;
|
||||
|
||||
147
src/pages/trade/order/config.tsx
Normal file
147
src/pages/trade/order/config.tsx
Normal 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
195
src/pages/trade/order/detail/component/info/basic-info.tsx
Normal 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
172
src/pages/trade/order/detail/component/info/config.tsx
Normal 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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -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
137
src/pages/trade/order/detail/component/info/prod-info.tsx
Normal 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
80
src/pages/trade/order/detail/component/info/select-info.tsx
Normal 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
102
src/pages/trade/order/detail/component/info/service-info.tsx
Normal 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);
|
||||
@@ -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
27
src/pages/trade/order/detail/index.tsx
Normal 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
38
src/pages/trade/order/detail/order-info.tsx
Normal 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
9
src/pages/trade/order/index.module.less
Normal 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
28
src/pages/trade/order/index.tsx
Normal 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
293
src/pages/trade/order/list.tsx
Normal 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;
|
||||
@@ -1,25 +1,19 @@
|
||||
import type { RequestOptions } from '@@/plugin-request/request';
|
||||
import type { RequestConfig } from '@umijs/max';
|
||||
import { request } from '@umijs/max';
|
||||
import { message, notification } from 'antd';
|
||||
import { deleteUserCache } from '@/hooks/web/useCache';
|
||||
import {
|
||||
getAccessToken,
|
||||
getRefreshToken,
|
||||
getTenantId,
|
||||
setToken,
|
||||
} from './utils/auth';
|
||||
import { message } from 'antd';
|
||||
import { getAccessToken, getRefreshToken, 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;
|
||||
// 错误处理方案： 错误类型
|
||||
enum ErrorShowType {
|
||||
SILENT = 0,
|
||||
WARN_MESSAGE = 1,
|
||||
ERROR_MESSAGE = 2,
|
||||
NOTIFICATION = 3,
|
||||
REDIRECT = 9,
|
||||
}
|
||||
// enum ErrorShowType {
|
||||
// SILENT = 0,
|
||||
// WARN_MESSAGE = 1,
|
||||
// ERROR_MESSAGE = 2,
|
||||
// NOTIFICATION = 3,
|
||||
// REDIRECT = 9,
|
||||
// }
|
||||
// 与后端约定的响应数据格式
|
||||
interface ResponseStructure {
|
||||
success: boolean;
|
||||
@@ -27,27 +21,28 @@ interface ResponseStructure {
|
||||
code?: number;
|
||||
msg?: string;
|
||||
}
|
||||
const ignoreMsgs = [
|
||||
'无效的刷新令牌', // 刷新令牌被删除时，不用提示
|
||||
'刷新令牌已过期', // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面
|
||||
];
|
||||
|
||||
// const ignoreMsgs = [
|
||||
// "无效的刷新令牌", // 刷新令牌被删除时，不用提示
|
||||
// "刷新令牌已过期", // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面
|
||||
// ];
|
||||
|
||||
import { EventEmitter } from 'events';
|
||||
export const requestEventBus = new EventEmitter();
|
||||
const errorCode: { [key: string]: string } = {
|
||||
'400': '请求参数不正确',
|
||||
'401': '账号未登录',
|
||||
'403': '当前操作没有权限',
|
||||
'404': '访问资源不存在',
|
||||
'405': '请求方法不正确',
|
||||
'423': '请求失败，请稍后重试',
|
||||
'429': '请求失败，请稍后重试',
|
||||
'500': '系统异常',
|
||||
'501': '功能未实现/未开启',
|
||||
'502': '错误的配置项',
|
||||
'900': '重复请求，请稍后重试',
|
||||
default: '系统未知错误，请反馈给管理员',
|
||||
};
|
||||
// const errorCode: { [key: string]: string } = {
|
||||
// "400": "请求参数不正确",
|
||||
// "401": "账号未登录",
|
||||
// "403": "当前操作没有权限",
|
||||
// "404": "访问资源不存在",
|
||||
// "405": "请求方法不正确",
|
||||
// "423": "请求失败，请稍后重试",
|
||||
// "429": "请求失败，请稍后重试",
|
||||
// "500": "系统异常",
|
||||
// "501": "功能未实现/未开启",
|
||||
// "502": "错误的配置项",
|
||||
// "900": "重复请求，请稍后重试",
|
||||
// default: "系统未知错误，请反馈给管理员",
|
||||
// };
|
||||
|
||||
/**
|
||||
* @name 错误处理
|
||||
@@ -113,7 +108,7 @@ export const errorConfig: RequestConfig = {
|
||||
const errorInfo: ResponseStructure | undefined = error.info;
|
||||
if (error.name === 'BizError') {
|
||||
if (errorInfo) {
|
||||
const { msg, code } = errorInfo;
|
||||
const { msg } = errorInfo;
|
||||
message.error(msg);
|
||||
}
|
||||
} else if (error.response) {
|
||||
@@ -123,7 +118,7 @@ export const errorConfig: RequestConfig = {
|
||||
} else if (error.request) {
|
||||
message.error('None response! Please retry.');
|
||||
} else {
|
||||
message.error('发送请求时出了点问题:' + error.msg);
|
||||
message.error(`发送请求时出了点问题:${error.msg}`);
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -165,6 +160,9 @@ export const errorConfig: RequestConfig = {
|
||||
// // 如果是忽略的错误码，直接返回 msg 异常
|
||||
// return Promise.reject(msg);
|
||||
// }
|
||||
if (!config.url) {
|
||||
throw new Error('请求URL不能为空');
|
||||
}
|
||||
// 发送请求时出了点问题
|
||||
if (code === 401) {
|
||||
if (!isRefreshToken) {
|
||||
@@ -180,22 +178,28 @@ export const errorConfig: RequestConfig = {
|
||||
// 2.1 刷新成功，则回放队列的请求 + 当前请求
|
||||
setToken(refreshTokenRes);
|
||||
// 发出 token 刷新事件
|
||||
requestEventBus.emit('token-refreshed');
|
||||
} catch (e) {
|
||||
// 刷新当前路由
|
||||
// window.location.reload();
|
||||
// requestEventBus.emit('token-refreshed');
|
||||
} catch (_) {
|
||||
// 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。
|
||||
// 提示是否要登出。即不回放当前请求！不然会形成递归
|
||||
return handleAuthorized();
|
||||
} finally {
|
||||
isRefreshToken = false;
|
||||
}
|
||||
return request(config.url!, config);
|
||||
return request(config.url, config);
|
||||
} else {
|
||||
console.log('刷新令牌失败');
|
||||
//添加到队列，等待刷新获取到新的令牌
|
||||
return new Promise((resolve) => {
|
||||
requestList.push(() => {
|
||||
config.headers!.Authorization = 'Bearer ' + getAccessToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
resolve(request(config.url!, config));
|
||||
if (!config.url) {
|
||||
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
246
src/services/ai/sample/index.ts
Normal 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,
|
||||
});
|
||||
};
|
||||
210
src/services/prod/prod-manager/index.ts
Normal file
210
src/services/prod/prod-manager/index.ts
Normal file
@@ -0,0 +1,210 @@
|
||||
export interface Prod extends PageParam {
|
||||
/**
|
||||
* 商品简称
|
||||
*/
|
||||
abbreviation?: string;
|
||||
/**
|
||||
* 是否特殊日期（节假日周末什么的）0关1开
|
||||
*/
|
||||
additionalFeeSwitch?: number;
|
||||
/**
|
||||
* 是否特殊时段0关1开
|
||||
*/
|
||||
additionalSwitch?: number;
|
||||
/**
|
||||
* 品牌
|
||||
*/
|
||||
brand?: string;
|
||||
/**
|
||||
* 简要描述,卖点等
|
||||
*/
|
||||
brief?: string;
|
||||
/**
|
||||
* 商品分类
|
||||
*/
|
||||
categoryId?: number;
|
||||
/**
|
||||
* 详细描述
|
||||
*/
|
||||
content?: string;
|
||||
/**
|
||||
* 创建时间
|
||||
*/
|
||||
createTime?: string;
|
||||
/**
|
||||
* 创建者，目前使用 SysUser 的 id 编号
|
||||
*
|
||||
* 使用 String 类型的原因是，未来可能会存在非数值的情况，留好拓展性。
|
||||
*/
|
||||
creator?: string;
|
||||
/**
|
||||
* 是否删除
|
||||
*/
|
||||
deleted?: number;
|
||||
/**
|
||||
* 是否紧急响应服务0关1开
|
||||
*/
|
||||
emergencySwitch?: number;
|
||||
/**
|
||||
* 商品轮播图片，以,分割
|
||||
*/
|
||||
imgs?: string;
|
||||
/**
|
||||
* 是否置灰0否1是
|
||||
*/
|
||||
isProhibit?: number;
|
||||
/**
|
||||
* 关键词
|
||||
*/
|
||||
keyword?: string;
|
||||
/**
|
||||
* 是否接单上线0关1开
|
||||
*/
|
||||
orderLimitSwitch?: number;
|
||||
/**
|
||||
* 商品主图
|
||||
*/
|
||||
pic?: string;
|
||||
/**
|
||||
* 审核备注
|
||||
*/
|
||||
processNotes?: string;
|
||||
/**
|
||||
* 产品ID
|
||||
*/
|
||||
prodId?: number;
|
||||
/**
|
||||
* 商品名称
|
||||
*/
|
||||
prodName?: string;
|
||||
/**
|
||||
* 商品编号
|
||||
*/
|
||||
prodNumber?: string;
|
||||
/**
|
||||
* 是否开启区域0关1开
|
||||
*/
|
||||
regionSwitch?: number;
|
||||
/**
|
||||
* 是否预约0关1开
|
||||
*/
|
||||
reservationSwitch?: number;
|
||||
/**
|
||||
* seo搜索
|
||||
*/
|
||||
seoSearch?: string;
|
||||
/**
|
||||
* seo标题
|
||||
*/
|
||||
seoShortName?: string;
|
||||
/**
|
||||
* 分享话术
|
||||
*/
|
||||
shareContent?: string;
|
||||
/**
|
||||
* 分享图
|
||||
*/
|
||||
shareImage?: string;
|
||||
/**
|
||||
* 店铺id
|
||||
*/
|
||||
shopId?: number;
|
||||
/**
|
||||
* 销量
|
||||
*/
|
||||
soldNum?: number;
|
||||
/**
|
||||
* 默认是1，正常状态（出售中）, 0：下架（仓库中） 2：待审核
|
||||
*/
|
||||
status?: number;
|
||||
/**
|
||||
* 标签
|
||||
*/
|
||||
tag?: string[];
|
||||
/**
|
||||
* 展示的权重
|
||||
*/
|
||||
top?: number;
|
||||
/**
|
||||
* 更新者，目前使用 SysUser 的 id 编号
|
||||
*
|
||||
* 使用 String 类型的原因是，未来可能会存在非数值的情况，留好拓展性。
|
||||
*/
|
||||
updater?: string;
|
||||
/**
|
||||
* 最后更新时间
|
||||
*/
|
||||
updateTime?: string;
|
||||
/**
|
||||
* 版本 乐观锁
|
||||
*/
|
||||
version?: number;
|
||||
/**
|
||||
* 视频
|
||||
*/
|
||||
video?: string;
|
||||
/**
|
||||
* 是否开启体重配置0关1开
|
||||
*/
|
||||
weightSwitch?: number;
|
||||
/**
|
||||
* 商品轮播图片，以,分割
|
||||
*/
|
||||
whiteImg?: string;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
export interface SkuList {
|
||||
skuName: string; //规格名称
|
||||
basePrice?: number; //基准价格 *
|
||||
price?: number; //"当前价"
|
||||
isSpecs?: number; //默认规格
|
||||
stocksFlg?: number; //库存类型
|
||||
status?: number; //状态
|
||||
stocks?: number; //可售数量
|
||||
isShelf?: number; //上/下架
|
||||
skuId?: number;
|
||||
isExist?: number;
|
||||
propIds?: string;
|
||||
deleteTime?: number; //删除时间
|
||||
remainingDays?: number; //保留时间
|
||||
id?: number;
|
||||
// 添加索引签名，允许动态属性
|
||||
[key: string]: string | number | undefined;
|
||||
}
|
||||
export interface SkuPropValues {
|
||||
id?: number;
|
||||
propValue: string;
|
||||
valueId: number;
|
||||
state: 0 | 1; // 0禁用1启用
|
||||
isExist: 0 | 1; //是否新增 0否1是
|
||||
sort: number;
|
||||
isExpire: 0 | 1 /**是否失效0否1是**/;
|
||||
}
|
||||
export interface SkuConfig {
|
||||
propName: string; //规格名字
|
||||
propId: number;
|
||||
id?: number;
|
||||
isExist?: number; // //是否新增 0否1是
|
||||
prodPropValues: SkuPropValues[]; //规格值
|
||||
}
|
||||
|
||||
export interface ProdDetail {
|
||||
prodName: string; //商品名称
|
||||
abbreviation?: string; //商品简称
|
||||
brief?: string; //商品概述
|
||||
prodNumber?: string; //商品编码
|
||||
brand?: string; //品牌
|
||||
shopId?: string; //商品所有权
|
||||
categoryId?: number; //关联类目
|
||||
tag?: string[]; //商品标签
|
||||
skuList: SkuList[];
|
||||
prodPropSaveReqVO: SkuConfig;
|
||||
}
|
||||
|
||||
export interface ProdReq extends PageParam {
|
||||
name?: string;
|
||||
status?: 0 | 1 | 2; //状态 1，正常状态（出售中）, 0：下架（仓库中） 2：待审核
|
||||
prodName?: string; // 商品名称
|
||||
createTime?: Date; //创建时间
|
||||
}
|
||||
@@ -3,25 +3,22 @@
|
||||
import { request } from "@umijs/max";
|
||||
|
||||
/** 获取菜单页面的表 GET /product/category/categoryList */
|
||||
export async function getProductCategoryCategoryList(
|
||||
export async function getCategoryList(
|
||||
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
|
||||
params: API.getProductCategoryCategoryListParams,
|
||||
options?: { [key: string]: any }
|
||||
) {
|
||||
return request<API.CommonResultListCategoryDto>(
|
||||
"/product/category/categoryList",
|
||||
{
|
||||
return request("/product/category/categoryList", {
|
||||
method: "GET",
|
||||
params: {
|
||||
...params,
|
||||
},
|
||||
...(options || {}),
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/** 创建产品类目 创建产品类目 POST /product/category/create */
|
||||
export async function postProductCategoryCreate(
|
||||
export async function postCategoryCreate(
|
||||
body: API.CategorySaveReqVO,
|
||||
options?: { [key: string]: any }
|
||||
) {
|
||||
@@ -36,7 +33,7 @@ export async function postProductCategoryCreate(
|
||||
}
|
||||
|
||||
/** 更新产品类目 更新产品类目 PUT /product/category/update */
|
||||
export async function putProductCategoryUpdate(
|
||||
export async function putCategoryUpdate(
|
||||
body: API.CategorySaveReqVO,
|
||||
options?: { [key: string]: any }
|
||||
) {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user