Compare commits
13 Commits
88097e386b
...
1e5ea1879b
| Author | SHA1 | Date | |
|---|---|---|---|
| 1e5ea1879b | |||
| 5163e4dee8 | |||
| 263a7d3e20 | |||
| 2821e864da | |||
| 3c7473f8d1 | |||
| a5b7207f44 | |||
| ed92397237 | |||
| 9eb4f52f0e | |||
| b4d3535b91 | |||
| 39f9e0e714 | |||
| 9c510636c5 | |||
| 10f78b7cff | |||
| 4e9ebc76f7 |
@@ -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: 'https://petshy.tashowz.com/',
|
||||
// 配置了这个可以从 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: { '^': '' },
|
||||
},
|
||||
|
||||
101
config/routes.ts
101
config/routes.ts
@@ -13,70 +13,73 @@
|
||||
|
||||
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: '/',
|
||||
redirect: '/welcome',
|
||||
},
|
||||
{
|
||||
path: '/trade',
|
||||
name: '交易管理',
|
||||
routes: [
|
||||
{
|
||||
name: '订单管理',
|
||||
path: '/trade/order',
|
||||
component: './trade/order/index',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
path: '/prod1',
|
||||
name: '商品管理1',
|
||||
routes: [
|
||||
{
|
||||
path: '', // 空路径，匹配 /prod
|
||||
redirect: 'list', // 相对路径重定向
|
||||
},
|
||||
{
|
||||
name: '商品1',
|
||||
path: '/prod1/list',
|
||||
component: './prod/list/index',
|
||||
},
|
||||
{
|
||||
name: '类目管理',
|
||||
path: '/prod1/category',
|
||||
component: './prod/category/index',
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// path: "/system1",
|
||||
// name: "system1",
|
||||
// icon: "smile",
|
||||
// path: "/system",
|
||||
// name: "系统管理",
|
||||
// routes: [
|
||||
// {
|
||||
// name: "tenant",
|
||||
// path: "/system1/tenant",
|
||||
// routes: [
|
||||
// {
|
||||
// name: "package",
|
||||
// path: "/system1/tenant/package",
|
||||
// component: "system/tenant/package",
|
||||
// },
|
||||
// ],
|
||||
// name: "商品管理",
|
||||
// path: "/system/menu",
|
||||
// component: "./system/menu/index",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
path: "/admin",
|
||||
name: "admin",
|
||||
icon: "crown",
|
||||
access: "canAdmin",
|
||||
routes: [
|
||||
{
|
||||
path: "/admin",
|
||||
redirect: "/admin/sub-page",
|
||||
},
|
||||
{
|
||||
path: "/admin/sub-page",
|
||||
name: "sub-page",
|
||||
component: "./Admin",
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// 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,
|
||||
};
|
||||
@@ -45,8 +45,10 @@
|
||||
"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"
|
||||
},
|
||||
|
||||
22
pnpm-lock.yaml
generated
22
pnpm-lock.yaml
generated
@@ -35,12 +35,18 @@ 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
|
||||
@@ -9023,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:
|
||||
@@ -10232,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'}
|
||||
@@ -23302,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
|
||||
@@ -24854,6 +24874,8 @@ snapshots:
|
||||
dependencies:
|
||||
real-require: 0.1.0
|
||||
|
||||
throttle-debounce@2.3.0: {}
|
||||
|
||||
throttle-debounce@5.0.2: {}
|
||||
|
||||
through@2.3.8: {}
|
||||
|
||||
145
src/app.tsx
145
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,15 @@ 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';
|
||||
import type { MenuVO } from './services/system/menu';
|
||||
import { loopMenuItem } from './utils/menuUtils';
|
||||
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
const isDevOrTest = isDev || process.env.CI;
|
||||
@@ -36,6 +28,8 @@ const loginPath = '/user/login';
|
||||
|
||||
// 全局存储菜单数据和路由映射
|
||||
|
||||
const dynamicRoutesAdded = false;
|
||||
// 标记是否已添加动态路由
|
||||
/**
|
||||
* @see https://umijs.org/docs/api/runtime-config#getinitialstate
|
||||
* */
|
||||
@@ -43,9 +37,11 @@ export async function getInitialState(): Promise<{
|
||||
settings?: Partial<LayoutSettings>;
|
||||
currentUser?: UserInfoVO;
|
||||
loading?: boolean;
|
||||
menus?: MenuVO[];
|
||||
fetchUserInfo?: () => Promise<UserInfoVO | undefined>;
|
||||
}> {
|
||||
const { wsCache } = useCache();
|
||||
const dictStore = useDictStore();
|
||||
const fetchUserInfo = async () => {
|
||||
// history.push(loginPath);
|
||||
try {
|
||||
@@ -57,6 +53,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;
|
||||
@@ -75,12 +75,14 @@ export async function getInitialState(): Promise<{
|
||||
) {
|
||||
const currentUser = wsCache.get(CACHE_KEY.USER);
|
||||
if (getAccessToken() && !currentUser) {
|
||||
fetchUserInfo();
|
||||
await fetchUserInfo();
|
||||
}
|
||||
const menus = wsCache.get(CACHE_KEY.ROLE_ROUTERS);
|
||||
console.log(111);
|
||||
return {
|
||||
fetchUserInfo,
|
||||
currentUser,
|
||||
menus,
|
||||
settings: defaultSettings as Partial<LayoutSettings>,
|
||||
};
|
||||
}
|
||||
@@ -198,15 +200,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] 格式
|
||||
@@ -232,87 +234,36 @@ export const request: RequestConfig = {
|
||||
return searchParams.toString();
|
||||
},
|
||||
};
|
||||
// umi 4 使用 modifyRoutes
|
||||
export function patchClientRoutes({ routes }: { routes: any }) {
|
||||
|
||||
// Umi 4 支持异步的 patchClientRoutes
|
||||
export async function patchClientRoutes({ routes }: any) {
|
||||
const { wsCache } = useCache();
|
||||
console.log(2222);
|
||||
const globalMenus = wsCache.get(CACHE_KEY.ROLE_ROUTERS);
|
||||
|
||||
// 先尝试从缓存获取
|
||||
let menus = wsCache.get(CACHE_KEY.ROLE_ROUTERS);
|
||||
|
||||
// 如果缓存没有，且有 token，则获取
|
||||
if (!menus && getAccessToken()) {
|
||||
try {
|
||||
const data = await getInfo();
|
||||
wsCache.set(CACHE_KEY.USER, data);
|
||||
wsCache.set(CACHE_KEY.ROLE_ROUTERS, data.menus);
|
||||
menus = data.menus;
|
||||
} catch (error) {
|
||||
console.error('获取菜单失败:', error);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!menus || menus.length === 0) {
|
||||
return;
|
||||
}
|
||||
const routerIndex = routes.findIndex((item: any) => item.path === '/');
|
||||
const parentId = routes[routerIndex].id;
|
||||
|
||||
if (globalMenus) {
|
||||
routes[routerIndex]['routes'].push(...loopMenuItem(globalMenus, parentId));
|
||||
if (menus) {
|
||||
const r = loopMenuItem(menus, parentId);
|
||||
console.log(r, routes);
|
||||
routes[routerIndex].routes.push(...r);
|
||||
}
|
||||
}
|
||||
|
||||
const loopMenuItem = (menus: any[], pId: number | string): any[] => {
|
||||
return menus.flatMap((item) => {
|
||||
let Component: React.ComponentType<any> | null = null;
|
||||
console.log(findFirstLeafRoute(item), 'item');
|
||||
if (item.component && item.component.length > 0) {
|
||||
// 防止配置了路由，但本地暂未添加对应的页面，产生的错误
|
||||
Component = React.lazy(() => {
|
||||
const importComponent = () => import(`@/pages/${item.component}`);
|
||||
const import404 = () => import('@/pages/404');
|
||||
return importComponent().catch(import404);
|
||||
});
|
||||
}
|
||||
if (item.children && item.children.length > 0) {
|
||||
return [
|
||||
{
|
||||
path: item.path,
|
||||
name: item.name,
|
||||
// icon: item.icon,
|
||||
id: item.id,
|
||||
parentId: pId,
|
||||
|
||||
children: [
|
||||
{
|
||||
path: item.url,
|
||||
element: <Navigate to={item.children[0].url} replace />,
|
||||
},
|
||||
...loopMenuItem(item.children, item.menuID),
|
||||
],
|
||||
},
|
||||
];
|
||||
} else {
|
||||
// console.log(findFirstLeafRoute(newItem));
|
||||
return [
|
||||
{
|
||||
path: item.path,
|
||||
name: item.name,
|
||||
// icon: item.icon,
|
||||
id: item.menuID,
|
||||
parentId: pId,
|
||||
redirect: '/system/tenant/list',
|
||||
element: (
|
||||
<React.Suspense
|
||||
fallback={<Spin style={{ width: '100%', height: '100%' }} />}
|
||||
>
|
||||
{Component && <Component />}
|
||||
</React.Suspense>
|
||||
),
|
||||
children: [], // 添加缺失的 children 属性
|
||||
},
|
||||
];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const findFirstLeafRoute = (menuItem: any, parent = '/'): string | null => {
|
||||
// 如果没有子菜单，返回当前路径
|
||||
|
||||
if (!menuItem.children || menuItem.children.length === 0) {
|
||||
return parent + menuItem.path;
|
||||
}
|
||||
|
||||
// 递归查找第一个叶子节点
|
||||
for (const child of menuItem.children) {
|
||||
const leafRoute = findFirstLeafRoute(child, menuItem.path + '/');
|
||||
if (leafRoute) {
|
||||
return leafRoute;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
@@ -1,16 +1,25 @@
|
||||
import type { ProFormColumnsType } from '@ant-design/pro-components';
|
||||
import { BetaSchemaForm } from '@ant-design/pro-components';
|
||||
import { Button, type ColProps, Drawer, Space, Typography } from 'antd';
|
||||
import React, { forwardRef, useImperativeHandle } from 'react';
|
||||
import { Button, type ColProps, Drawer, Space } from 'antd';
|
||||
import type { FormInstance } from 'antd/lib';
|
||||
import React, {
|
||||
Children,
|
||||
cloneElement,
|
||||
forwardRef,
|
||||
useImperativeHandle,
|
||||
} from 'react';
|
||||
|
||||
interface ConfigurableDrawerFormProps {
|
||||
title?: string;
|
||||
columns: ProFormColumnsType[];
|
||||
columns?: ProFormColumnsType[];
|
||||
onSubmit?: (values: any) => Promise<boolean>;
|
||||
initialValues?: Record<string, any>;
|
||||
width?: number | string;
|
||||
labelCol?: ColProps;
|
||||
wrapperCol?: ColProps;
|
||||
footer: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
bodyStyle: React.CSSProperties;
|
||||
}
|
||||
|
||||
export interface ConfigurableDrawerFormRef {
|
||||
@@ -31,6 +40,9 @@ const ConfigurableDrawerForm = forwardRef<
|
||||
onSubmit,
|
||||
initialValues,
|
||||
width = 600,
|
||||
footer,
|
||||
children,
|
||||
bodyStyle = {},
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
@@ -38,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) {
|
||||
@@ -49,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) {
|
||||
@@ -68,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}
|
||||
@@ -101,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} // 隐藏默认关闭按钮
|
||||
@@ -109,24 +112,34 @@ const ConfigurableDrawerForm = forwardRef<
|
||||
width={width}
|
||||
footer={
|
||||
<Space style={{ width: '100%', justifyContent: 'end' }}>
|
||||
<Button onClick={() => setOpen(false)}>取消</Button>
|
||||
<Button loading={loading} type="primary" onClick={handleSubmit}>
|
||||
保存
|
||||
</Button>
|
||||
{footer ? (
|
||||
footer
|
||||
) : (
|
||||
<>
|
||||
<Button onClick={() => setOpen(false)}>取消</Button>
|
||||
<Button loading={loading} type="primary" onClick={handleSubmit}>
|
||||
保存
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
{/* {customHeader} */}
|
||||
<BetaSchemaForm
|
||||
initialValues={formData}
|
||||
layoutType="Form"
|
||||
formRef={formRef}
|
||||
columns={columns}
|
||||
layout="horizontal"
|
||||
labelCol={labelCol}
|
||||
wrapperCol={wrapperCol}
|
||||
submitter={false}
|
||||
/>
|
||||
{columns ? (
|
||||
<BetaSchemaForm
|
||||
initialValues={formData}
|
||||
layoutType="Form"
|
||||
formRef={formRef}
|
||||
columns={columns}
|
||||
layout="horizontal"
|
||||
labelCol={labelCol}
|
||||
wrapperCol={wrapperCol}
|
||||
submitter={false}
|
||||
/>
|
||||
) : (
|
||||
renderChildren()
|
||||
// children
|
||||
)}
|
||||
</Drawer>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
// components/EnhancedProTable/EnhancedProTable.tsx
|
||||
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
type ActionType,
|
||||
type ParamsType,
|
||||
ProTable,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Button, Space } from 'antd';
|
||||
import React, { forwardRef, useCallback, useMemo, useState } from 'react';
|
||||
import { Button } from 'antd';
|
||||
import React, { forwardRef, useCallback } from 'react';
|
||||
import { formatPaginationTotal } from '@/utils/antd/tableHelpers';
|
||||
import type { BaseRecord, EnhancedProTableProps } from './types';
|
||||
|
||||
@@ -18,128 +17,76 @@ 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,
|
||||
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 toolbarElements =
|
||||
toolbarActions?.map((action) => {
|
||||
return (
|
||||
<Button
|
||||
key={action.key}
|
||||
type={action.type}
|
||||
danger={action.danger}
|
||||
disabled={action.disabled}
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => action.onClick(selectedRowKeys, selectedRows)}
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
);
|
||||
}) || [];
|
||||
// return [
|
||||
// <Button
|
||||
// key="button"
|
||||
// icon={<PlusOutlined />}
|
||||
// onClick={}
|
||||
// type="primary"
|
||||
// >
|
||||
// 新建
|
||||
// </Button>,
|
||||
// ];
|
||||
return toolbarElements;
|
||||
}, [toolbarActions]);
|
||||
const toolBarRender = useCallback(() => {
|
||||
const toolbarElements =
|
||||
toolbarActions?.map((action) => {
|
||||
return (
|
||||
<Button
|
||||
key={action.key}
|
||||
type={action.type}
|
||||
danger={action.danger}
|
||||
disabled={action.disabled}
|
||||
// icon={action.icon ?? <PlusOutlined />}
|
||||
onClick={() => action.onClick()}
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
);
|
||||
}) || [];
|
||||
return toolbarElements;
|
||||
}, [toolbarActions]);
|
||||
return (
|
||||
<ProTable<T, U>
|
||||
{...restProps}
|
||||
columns={columns}
|
||||
actionRef={ref}
|
||||
request={request}
|
||||
rowKey={rowKey || 'id'}
|
||||
rowSelection={rowSelection}
|
||||
rowKey={rowKey}
|
||||
rowSelection={props.rowSelection ?? false}
|
||||
toolBarRender={toolBarRender}
|
||||
manualRequest={false}
|
||||
showSorterTooltip
|
||||
tableAlertRender={tableAlertRender}
|
||||
scroll={{ x: 'max-content' }}
|
||||
search={{
|
||||
labelWidth: 'auto',
|
||||
defaultCollapsed: false,
|
||||
...restProps.search,
|
||||
}}
|
||||
options={{
|
||||
fullScreen: true,
|
||||
reload: true,
|
||||
setting: true,
|
||||
density: true,
|
||||
...restProps.options,
|
||||
}}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
pageSize: 10,
|
||||
showTotal: formatPaginationTotal,
|
||||
...restProps.pagination,
|
||||
}}
|
||||
// scroll={{ x: "max-content" }}
|
||||
scroll={{ x: 1200 }}
|
||||
components={components}
|
||||
search={
|
||||
search
|
||||
? {
|
||||
labelWidth: 'auto',
|
||||
defaultCollapsed: false,
|
||||
...search,
|
||||
}
|
||||
: false
|
||||
}
|
||||
options={
|
||||
search
|
||||
? {
|
||||
fullScreen: true,
|
||||
reload: true,
|
||||
setting: true,
|
||||
density: true,
|
||||
...restProps.options,
|
||||
}
|
||||
: false
|
||||
}
|
||||
pagination={
|
||||
pagination
|
||||
? {
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
pageSize: 10,
|
||||
showTotal: formatPaginationTotal,
|
||||
}
|
||||
: false
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -58,6 +58,8 @@ export interface EnhancedProTableProps<T extends BaseRecord, U = any>
|
||||
params: U & { current?: number; pageSize?: number },
|
||||
) => Promise<ApiResponse<T>>;
|
||||
loading?: boolean; // 添加 loading 属性
|
||||
enableRowClick?: boolean; //开启行内点击
|
||||
clickableRowClassName?: string;
|
||||
actions?: TableAction<T>[];
|
||||
toolbarActions?: ToolbarAction[];
|
||||
permissions?: string[];
|
||||
|
||||
@@ -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);
|
||||
@@ -7,11 +7,12 @@ import React, { useMemo, useState } from 'react';
|
||||
|
||||
interface TagEditorProps {
|
||||
value?: string[];
|
||||
onChange?: (value: string[]) => void;
|
||||
onChange?: (value: string[], active?: number) => void;
|
||||
placeholder?: string;
|
||||
maxCount?: number;
|
||||
tagProps?: TagProps;
|
||||
disabled?: boolean;
|
||||
editable?: boolean;
|
||||
}
|
||||
|
||||
const TagEditor: React.FC<TagEditorProps> = ({
|
||||
@@ -20,6 +21,7 @@ const TagEditor: React.FC<TagEditorProps> = ({
|
||||
placeholder = '请输入标签',
|
||||
maxCount,
|
||||
tagProps,
|
||||
editable = true,
|
||||
disabled = false,
|
||||
}) => {
|
||||
// const [tags, setTags] = useState<string[]>(value);
|
||||
@@ -27,12 +29,15 @@ const TagEditor: React.FC<TagEditorProps> = ({
|
||||
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);
|
||||
onChange?.(newTags, active);
|
||||
};
|
||||
|
||||
const showInput = () => {
|
||||
@@ -85,6 +90,7 @@ const TagEditor: React.FC<TagEditorProps> = ({
|
||||
/>
|
||||
) : (
|
||||
canAddMore &&
|
||||
editable &&
|
||||
!disabled && (
|
||||
<Tag
|
||||
onClick={showInput}
|
||||
|
||||
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;
|
||||
@@ -2,6 +2,7 @@ export const formStatusType: { [key: string]: string } = {
|
||||
create: '创建',
|
||||
update: '编辑',
|
||||
test: '测试',
|
||||
detail: '详情',
|
||||
};
|
||||
|
||||
export const tenantStatus = [
|
||||
@@ -34,3 +35,12 @@ export const systemDataScopetStatus = [
|
||||
{ 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;
|
||||
@@ -2,10 +2,12 @@ import type {
|
||||
ProColumns,
|
||||
ProFormColumnsType,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Tag } from 'antd';
|
||||
|
||||
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>[] = [
|
||||
{
|
||||
@@ -29,14 +31,12 @@ export const baseDictTypeColumns: ProColumns<DictTypeVO>[] = [
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 100,
|
||||
render: (_, record) => (
|
||||
<Tag
|
||||
key={record.status}
|
||||
color={record.status === 1 ? 'default' : 'processing'}
|
||||
>
|
||||
{record.status === 1 ? '正常' : '禁用'}
|
||||
</Tag>
|
||||
),
|
||||
valueType: 'select',
|
||||
render: (_, record) => {
|
||||
return (
|
||||
<DictTag type={DICT_TYPE.COMMON_STATUS} value={record.status}></DictTag>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
|
||||
@@ -19,6 +19,9 @@ export const baseDictDataColumns: ProColumns<DictDataVO>[] = [
|
||||
title: '字典标签',
|
||||
dataIndex: 'label',
|
||||
width: 120,
|
||||
render: (_, record) => (
|
||||
<Tag color={record.cssClass || record.colorType}>{record.label}</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '字典键值',
|
||||
@@ -44,9 +47,13 @@ export const baseDictDataColumns: ProColumns<DictDataVO>[] = [
|
||||
title: '颜色类型',
|
||||
dataIndex: 'colorType',
|
||||
width: 80,
|
||||
render: (_, record) => (
|
||||
<Tag color={record.colorType}>{record.colorType}</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'CSS Class',
|
||||
|
||||
dataIndex: 'cssClass',
|
||||
width: 120,
|
||||
},
|
||||
@@ -133,11 +140,11 @@ export const formColumns = (_type: string): ProFormColumnsType[] => [
|
||||
options: [
|
||||
{
|
||||
label: '启用',
|
||||
value: 1,
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 0,
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -156,23 +163,23 @@ export const formColumns = (_type: string): ProFormColumnsType[] => [
|
||||
fieldProps: {
|
||||
options: [
|
||||
{
|
||||
label: '默认(waiting)',
|
||||
value: 'waiting',
|
||||
label: <Tag color="default">默认(default)</Tag>,
|
||||
value: 'default',
|
||||
},
|
||||
{
|
||||
label: '成功(success)',
|
||||
label: <Tag color="success">成功(success)</Tag>,
|
||||
value: 'success',
|
||||
},
|
||||
{
|
||||
label: '信息(processing)',
|
||||
label: <Tag color="processing">信息(processing)</Tag>,
|
||||
value: 'processing',
|
||||
},
|
||||
{
|
||||
label: '失败(error)',
|
||||
label: <Tag color="error">失败(error)</Tag>,
|
||||
value: 'error',
|
||||
},
|
||||
{
|
||||
label: '警告(warning)',
|
||||
label: <Tag color="warning">警告(warning)</Tag>,
|
||||
value: 'warning',
|
||||
},
|
||||
],
|
||||
@@ -181,6 +188,7 @@ export const formColumns = (_type: string): ProFormColumnsType[] => [
|
||||
{
|
||||
title: 'CSS Class',
|
||||
dataIndex: 'cssClass',
|
||||
tooltip: '输入rgb颜色值或#16进制颜色值',
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
|
||||
@@ -1,10 +1,27 @@
|
||||
// src/pages/system/menu/config.tsx
|
||||
import type {
|
||||
ProColumns,
|
||||
ProFormColumnsType,
|
||||
import {
|
||||
type ProColumns,
|
||||
type ProFormColumnsType,
|
||||
ProFormRadio,
|
||||
ProFormText,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Switch } from 'antd';
|
||||
import type { MenuVO } from '@/services/system/menu';
|
||||
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>[] = [
|
||||
{
|
||||
@@ -16,6 +33,7 @@ export const baseMenuColumns: ProColumns<MenuVO>[] = [
|
||||
title: '图标',
|
||||
dataIndex: 'icon',
|
||||
width: 60,
|
||||
hideInSearch: true,
|
||||
render: (_, record: MenuVO) => (
|
||||
<span>
|
||||
{record.icon ? <i className={`anticon ${record.icon}`} /> : '—'}
|
||||
@@ -26,36 +44,59 @@ export const baseMenuColumns: ProColumns<MenuVO>[] = [
|
||||
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: (_, record: MenuVO) => (
|
||||
render: (_dom, record: MenuVO, _: any, action: any) => (
|
||||
<Switch
|
||||
checked={record.status === 1}
|
||||
disabled={true} // 可后续改为可编辑
|
||||
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',
|
||||
@@ -69,39 +110,105 @@ export const formColumns = (_type: string): ProFormColumnsType[] => [
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
dataIndex: 'icon',
|
||||
valueType: 'select',
|
||||
title: '菜单类型',
|
||||
dataIndex: 'type',
|
||||
valueType: 'radioButton',
|
||||
fieldProps: {
|
||||
placeholder: '请选择图标',
|
||||
placeholder: '请选择菜单类型',
|
||||
options: [
|
||||
{ label: '商品', value: 'icon-product' },
|
||||
{ label: '系统', value: 'icon-system' },
|
||||
{ label: '用户', value: 'icon-user' },
|
||||
{ label: '设置', value: 'icon-setting' },
|
||||
{ label: '目录', value: 1 },
|
||||
{ label: '菜单', value: 2 },
|
||||
{ label: '按钮', value: 3 },
|
||||
],
|
||||
},
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入菜单类型',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
valueType: 'digit',
|
||||
title: '菜单图标',
|
||||
dataIndex: 'icon',
|
||||
fieldProps: {
|
||||
placeholder: '请输入排序值',
|
||||
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: 'permission',
|
||||
title: '路由地址',
|
||||
dataIndex: 'path',
|
||||
tooltip:
|
||||
'访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头',
|
||||
fieldProps: {
|
||||
placeholder: '请输入权限标识',
|
||||
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: '组件路径',
|
||||
title: '组件地址',
|
||||
dataIndex: 'component',
|
||||
fieldProps: {
|
||||
placeholder: '请输入组件路径',
|
||||
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,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -110,16 +217,152 @@ export const formColumns = (_type: string): ProFormColumnsType[] => [
|
||||
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: 'status',
|
||||
valueType: 'select',
|
||||
title: '权限标识',
|
||||
dataIndex: 'permission',
|
||||
tooltip:
|
||||
"Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)",
|
||||
fieldProps: {
|
||||
options: [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '禁用', value: 0 },
|
||||
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,8 +1,9 @@
|
||||
// src/pages/system/menu/index.tsx
|
||||
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { Popconfirm } from 'antd';
|
||||
import { useModel } from '@umijs/max';
|
||||
import { Modal, Popconfirm } from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
@@ -10,6 +11,8 @@ import ConfigurableDrawerForm, {
|
||||
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,
|
||||
@@ -24,10 +27,11 @@ 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);
|
||||
@@ -47,7 +51,19 @@ const SystemMenu = () => {
|
||||
};
|
||||
const handleAdd = () => {
|
||||
setType('create');
|
||||
configurableDrawerRef.current?.open({});
|
||||
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(
|
||||
@@ -74,6 +90,13 @@ const SystemMenu = () => {
|
||||
icon: <PlusOutlined />,
|
||||
onClick: handleAdd,
|
||||
},
|
||||
{
|
||||
key: 'reload',
|
||||
label: '刷新菜单缓存',
|
||||
type: 'primary',
|
||||
icon: <ReloadOutlined />,
|
||||
onClick: handleReload,
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumns: ProColumns<MenuVO> = {
|
||||
@@ -108,7 +131,7 @@ const SystemMenu = () => {
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
toolbarActions={toolbarActions}
|
||||
headerTitle="租户列表"
|
||||
headerTitle="菜单管理"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
/>
|
||||
@@ -118,6 +141,7 @@ const SystemMenu = () => {
|
||||
title={formStatusType[type]}
|
||||
columns={formColumns(type)}
|
||||
onSubmit={handleSubmit}
|
||||
width={900}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -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,8 +29,22 @@ export const baseTenantColumns: ProColumns<TenantVO>[] = [
|
||||
request: async () => {
|
||||
const packageList: { id: number; name: string }[] =
|
||||
await getTenantPackageList();
|
||||
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" },
|
||||
|
||||
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; //创建时间
|
||||
}
|
||||
436
src/services/trade/order/index.ts
Normal file
436
src/services/trade/order/index.ts
Normal file
@@ -0,0 +1,436 @@
|
||||
import { request } from "@umijs/max";
|
||||
export interface TradeReq {
|
||||
/**
|
||||
* 售后状态，示例：1
|
||||
*/
|
||||
afterSaleStatus?: number;
|
||||
/**
|
||||
* 创建时间
|
||||
*/
|
||||
createTime?: string[];
|
||||
/**
|
||||
* 财务状态，示例：1
|
||||
*/
|
||||
financeStatus?: number;
|
||||
/**
|
||||
* 卖家名称
|
||||
*/
|
||||
merchantName?: string;
|
||||
/**
|
||||
* 订单类目id，示例：1
|
||||
*/
|
||||
orderCategoryId?: number;
|
||||
/**
|
||||
* 订单状态，示例：1
|
||||
*/
|
||||
orderStatus?: number;
|
||||
/**
|
||||
* 订单来源，示例：1
|
||||
*/
|
||||
orderTerminal?: number;
|
||||
/**
|
||||
* 页码，从 1 开始", example = "1
|
||||
*/
|
||||
pageNo?: number;
|
||||
/**
|
||||
* 每页条数，最大值为 100"
|
||||
*/
|
||||
pageSize?: number;
|
||||
/**
|
||||
* 聚合检索字段（商品名称，商品id，订单号）
|
||||
*/
|
||||
prodSearch?: string;
|
||||
/**
|
||||
* 创建时间
|
||||
*/
|
||||
subTime?: string[];
|
||||
/**
|
||||
* 预约类型，示例：1
|
||||
*/
|
||||
subType?: number;
|
||||
/**
|
||||
* 聚合检索字段 买家昵称/手机号
|
||||
*/
|
||||
userSearch?: string;
|
||||
}
|
||||
export interface TradeOrderPageRespVO {
|
||||
/**
|
||||
* 购买的商品数量
|
||||
*/
|
||||
count?: number;
|
||||
/**
|
||||
* 下单时间
|
||||
*/
|
||||
createTime?: string;
|
||||
/**
|
||||
* 财务状态
|
||||
*/
|
||||
financeStatus?: string;
|
||||
/**
|
||||
* 到手价
|
||||
*/
|
||||
handedPrice?: number;
|
||||
/**
|
||||
* 订单编号
|
||||
*/
|
||||
id?: number;
|
||||
/**
|
||||
* 订单类目
|
||||
*/
|
||||
orderCategoryName?: string;
|
||||
/**
|
||||
* 订单流水号
|
||||
*/
|
||||
orderNum?: string;
|
||||
/**
|
||||
* 订单状态
|
||||
*/
|
||||
orderStatus?: number;
|
||||
/**
|
||||
* 订单来源
|
||||
*/
|
||||
orderTerminal?: number;
|
||||
/**
|
||||
* 预约时间
|
||||
*/
|
||||
subTime?: string;
|
||||
/**
|
||||
* 到手价
|
||||
*/
|
||||
payPrice?: number;
|
||||
/**
|
||||
* 支付方式
|
||||
*/
|
||||
payType?: string;
|
||||
/**
|
||||
* 商品图片
|
||||
*/
|
||||
picUrl?: string;
|
||||
/**
|
||||
* 单价
|
||||
*/
|
||||
price?: number;
|
||||
/**
|
||||
* 服务地址
|
||||
*/
|
||||
serveAddress?: string;
|
||||
/**
|
||||
* 商品规格
|
||||
*/
|
||||
skuName?: string;
|
||||
/**
|
||||
* 商品名称
|
||||
*/
|
||||
spuName?: string;
|
||||
/**
|
||||
* 单位
|
||||
*/
|
||||
unit?: string;
|
||||
/**
|
||||
* 用户头像
|
||||
*/
|
||||
userAvatar?: string;
|
||||
/**
|
||||
* 用户编号
|
||||
*/
|
||||
userId?: number;
|
||||
/**
|
||||
* 用户手机号
|
||||
*/
|
||||
userMobile?: string;
|
||||
/**
|
||||
* 用户姓名
|
||||
*/
|
||||
userName?: string;
|
||||
/**
|
||||
* 用户昵称
|
||||
*/
|
||||
userNickName?: string;
|
||||
/**
|
||||
* 用户备注 - 必填，示例：你猜
|
||||
*/
|
||||
userRemark?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 返回数据
|
||||
*
|
||||
* TradeOrderDetailRespVO
|
||||
*/
|
||||
export interface TradeOrderDetailRespVO {
|
||||
/**
|
||||
* 附加费信息
|
||||
*/
|
||||
tradeExtendCostInfo?: TradeExtendCostInfo;
|
||||
/**
|
||||
* 扩展服务信息
|
||||
*/
|
||||
tradeExtendServeInfo?: TradeExtendServeInfo;
|
||||
/**
|
||||
* 基本信息
|
||||
*/
|
||||
tradeOrderInfoBase?: TradeOrderBaseInfo;
|
||||
/**
|
||||
* 商品信息
|
||||
*/
|
||||
tradeProductInfo?: TradeProductInfo;
|
||||
/**
|
||||
* 服务信息
|
||||
*/
|
||||
tradeServeInfo?: TradeServeInfo;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* 附加费信息
|
||||
*
|
||||
* TradeExtendCostInfo
|
||||
*/
|
||||
export interface TradeExtendCostInfo {
|
||||
/**
|
||||
* 内部存储动态属性的 Map，键为属性名称，值为属性值
|
||||
*/
|
||||
properties?: MapObject;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* 内部存储动态属性的 Map，键为属性名称，值为属性值
|
||||
*
|
||||
* MapObject
|
||||
*/
|
||||
export interface MapObject {
|
||||
key?: { [key: string]: any };
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* 扩展服务信息
|
||||
*
|
||||
* TradeExtendServeInfo
|
||||
*/
|
||||
export interface TradeExtendServeInfo {
|
||||
/**
|
||||
* 内部存储动态属性的 Map，键为属性名称，值为属性值
|
||||
*/
|
||||
properties?: MapObject;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* 基本信息
|
||||
*
|
||||
* TradeOrderBaseInfo
|
||||
*/
|
||||
export interface TradeOrderBaseInfo {
|
||||
/**
|
||||
* 取消原因
|
||||
*/
|
||||
cancelReason?: string;
|
||||
/**
|
||||
* 取消时间
|
||||
*/
|
||||
cancelTime?: string;
|
||||
/**
|
||||
* 创建时间
|
||||
*/
|
||||
createTime?: string;
|
||||
/**
|
||||
* 优惠金额
|
||||
*/
|
||||
discountPrice?: string;
|
||||
/**
|
||||
* 完成时间
|
||||
*/
|
||||
finishTime?: string;
|
||||
/**
|
||||
* 订单id
|
||||
*/
|
||||
id?: string;
|
||||
/**
|
||||
* 实收金额
|
||||
*/
|
||||
livePrice?: string;
|
||||
/**
|
||||
* 商家备注
|
||||
*/
|
||||
merchantRemark?: string;
|
||||
/**
|
||||
* 订单类目
|
||||
*/
|
||||
orderCategoryId?: string;
|
||||
orderCategoryName?: string;
|
||||
/**
|
||||
* 订单编号
|
||||
*/
|
||||
orderNo?: string;
|
||||
/**
|
||||
* 订单状态
|
||||
*/
|
||||
orderStatus?: string;
|
||||
/**
|
||||
* 订单来源
|
||||
*/
|
||||
orderTerminal?: string;
|
||||
/**
|
||||
* 订单类型
|
||||
*/
|
||||
orderType?: string;
|
||||
/**
|
||||
* 支付渠道 （线上线下）
|
||||
*/
|
||||
payChannelCode?: string;
|
||||
/**
|
||||
* 交易流水号
|
||||
*/
|
||||
payOrderId?: string;
|
||||
/**
|
||||
* 订单金额
|
||||
*/
|
||||
payPrice?: number;
|
||||
/**
|
||||
* 支付时间
|
||||
*/
|
||||
payTime?: string;
|
||||
/**
|
||||
* 支付方式（支付宝微信）
|
||||
*/
|
||||
payType?: string;
|
||||
/**
|
||||
* 订单总价
|
||||
*/
|
||||
price?: string;
|
||||
/**
|
||||
* 保障状态
|
||||
*/
|
||||
propertyStatus?: string;
|
||||
/**
|
||||
* 保障时间
|
||||
*/
|
||||
propertyTime?: string;
|
||||
/**
|
||||
* 退款金额
|
||||
*/
|
||||
refundPrice?: string;
|
||||
/**
|
||||
* 退款时间
|
||||
*/
|
||||
refundTime?: string;
|
||||
/**
|
||||
* 用户信息
|
||||
*/
|
||||
userInfo?: string;
|
||||
userAvatar?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 商品信息
|
||||
*
|
||||
* TradeProductInfo
|
||||
*/
|
||||
export interface TradeProductInfo {
|
||||
/**
|
||||
* 购买数量
|
||||
*/
|
||||
count?: number;
|
||||
/**
|
||||
* 优惠金额
|
||||
*/
|
||||
discountPrice?: number;
|
||||
/**
|
||||
* 成本价
|
||||
*/
|
||||
expensePrice?: number;
|
||||
/**
|
||||
* 到手价（单价 - 优惠）
|
||||
*/
|
||||
handedPrice?: number;
|
||||
/**
|
||||
* 实付金额
|
||||
*/
|
||||
payPrice?: number;
|
||||
/**
|
||||
* 商品单价
|
||||
*/
|
||||
price?: number;
|
||||
/**
|
||||
* 保障
|
||||
*/
|
||||
properties?: string[];
|
||||
/**
|
||||
* 累计退款数量
|
||||
*/
|
||||
refundCount?: number;
|
||||
/**
|
||||
* 累计退款金额
|
||||
*/
|
||||
refundPrice?: number;
|
||||
/**
|
||||
* 服务内容
|
||||
*/
|
||||
serveContent?: string;
|
||||
/**
|
||||
* 店铺log
|
||||
*/
|
||||
shopLogoUrl?: string;
|
||||
/**
|
||||
* 店铺名称
|
||||
*/
|
||||
shopName?: string;
|
||||
/**
|
||||
* skuid
|
||||
*/
|
||||
skuId?: number;
|
||||
/**
|
||||
* 商品规格
|
||||
*/
|
||||
skuName?: string;
|
||||
/**
|
||||
* 商品规格图
|
||||
*/
|
||||
skuPicUrl?: string;
|
||||
/**
|
||||
* 商品id
|
||||
*/
|
||||
spuId?: number;
|
||||
/**
|
||||
* 商品名称
|
||||
*/
|
||||
spuName?: string;
|
||||
/**
|
||||
* 商品总价
|
||||
*/
|
||||
totalPrice?: number;
|
||||
/**
|
||||
* 商品单位
|
||||
*/
|
||||
unit?: string;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* 服务信息
|
||||
*
|
||||
* TradeServeInfo
|
||||
*/
|
||||
export interface TradeServeInfo {
|
||||
/**
|
||||
* 内部存储动态属性的 Map，键为属性名称，值为属性值
|
||||
*/
|
||||
properties?: MapObject;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
export const getTradeOrderPage = async (params: TradeReq) => {
|
||||
return request<PageResult<TradeOrderPageRespVO[]>>("/trade/order/page", {
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
export const getTradeOrderDetail = async (id: number) => {
|
||||
return request<IResponse<TradeOrderDetailRespVO>>("/trade/order/get-detail", {
|
||||
method: "GET",
|
||||
params: { id },
|
||||
});
|
||||
};
|
||||
174
src/utils/color.ts
Normal file
174
src/utils/color.ts
Normal file
@@ -0,0 +1,174 @@
|
||||
/**
|
||||
* 判断是否 十六进制颜色值.
|
||||
* 输入形式可为 #fff000 #f00
|
||||
*
|
||||
* @param String color 十六进制颜色值
|
||||
* @return Boolean
|
||||
*/
|
||||
export const isHexColor = (color: string) => {
|
||||
const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-f]{6})$/;
|
||||
return reg.test(color);
|
||||
};
|
||||
|
||||
/**
|
||||
* RGB 颜色值转换为 十六进制颜色值.
|
||||
* r, g, 和 b 需要在 [0, 255] 范围内
|
||||
*
|
||||
* @return String 类似#ff00ff
|
||||
* @param r
|
||||
* @param g
|
||||
* @param b
|
||||
*/
|
||||
export const rgbToHex = (r: number, g: number, b: number) => {
|
||||
// tslint:disable-next-line:no-bitwise
|
||||
const hex = ((r << 16) | (g << 8) | b).toString(16);
|
||||
return `#${new Array(Math.abs(hex.length - 7)).join('0')}${hex}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Transform a HEX color to its RGB representation
|
||||
* @param {string} hex The color to transform
|
||||
* @returns The RGB representation of the passed color
|
||||
*/
|
||||
export const hexToRGB = (hex: string, opacity?: number) => {
|
||||
let sHex = hex.toLowerCase();
|
||||
if (isHexColor(hex)) {
|
||||
if (sHex.length === 4) {
|
||||
let sColorNew = '#';
|
||||
for (let i = 1; i < 4; i += 1) {
|
||||
sColorNew += sHex.slice(i, i + 1).concat(sHex.slice(i, i + 1));
|
||||
}
|
||||
sHex = sColorNew;
|
||||
}
|
||||
const sColorChange: number[] = [];
|
||||
for (let i = 1; i < 7; i += 2) {
|
||||
sColorChange.push(parseInt(`0x${sHex.slice(i, i + 2)}`, 10));
|
||||
}
|
||||
return opacity
|
||||
? `RGBA(${sColorChange.join(',')},${opacity})`
|
||||
: `RGB(${sColorChange.join(',')})`;
|
||||
}
|
||||
return sHex;
|
||||
};
|
||||
|
||||
export const colorIsDark = (color: string) => {
|
||||
if (!isHexColor(color)) return;
|
||||
const [r, g, b] = hexToRGB(color)
|
||||
.replace(/(?:\(|\)|rgb|RGB)*/g, '')
|
||||
.split(',')
|
||||
.map((item) => Number(item));
|
||||
return r * 0.299 + g * 0.578 + b * 0.114 < 192;
|
||||
};
|
||||
|
||||
/**
|
||||
* Darkens a HEX color given the passed percentage
|
||||
* @param {string} color The color to process
|
||||
* @param {number} amount The amount to change the color by
|
||||
* @returns {string} The HEX representation of the processed color
|
||||
*/
|
||||
export const darken = (color: string, amount: number) => {
|
||||
color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
|
||||
amount = Math.trunc((255 * amount) / 100);
|
||||
return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(
|
||||
color.substring(2, 4),
|
||||
amount,
|
||||
)}${subtractLight(color.substring(4, 6), amount)}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Lightens a 6 char HEX color according to the passed percentage
|
||||
* @param {string} color The color to change
|
||||
* @param {number} amount The amount to change the color by
|
||||
* @returns {string} The processed color represented as HEX
|
||||
*/
|
||||
export const lighten = (color: string, amount: number) => {
|
||||
color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
|
||||
amount = Math.trunc((255 * amount) / 100);
|
||||
return `#${addLight(color.substring(0, 2), amount)}${addLight(
|
||||
color.substring(2, 4),
|
||||
amount,
|
||||
)}${addLight(color.substring(4, 6), amount)}`;
|
||||
};
|
||||
|
||||
/* Suma el porcentaje indicado a un color (RR, GG o BB) hexadecimal para aclararlo */
|
||||
/**
|
||||
* Sums the passed percentage to the R, G or B of a HEX color
|
||||
* @param {string} color The color to change
|
||||
* @param {number} amount The amount to change the color by
|
||||
* @returns {string} The processed part of the color
|
||||
*/
|
||||
const addLight = (color: string, amount: number) => {
|
||||
const cc = parseInt(color, 16) + amount;
|
||||
const c = cc > 255 ? 255 : cc;
|
||||
return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates luminance of an rgb color
|
||||
* @param {number} r red
|
||||
* @param {number} g green
|
||||
* @param {number} b blue
|
||||
*/
|
||||
const luminanace = (r: number, g: number, b: number) => {
|
||||
const a = [r, g, b].map((v) => {
|
||||
v /= 255;
|
||||
return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
|
||||
});
|
||||
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates contrast between two rgb colors
|
||||
* @param {string} rgb1 rgb color 1
|
||||
* @param {string} rgb2 rgb color 2
|
||||
*/
|
||||
const contrast = (rgb1: string[], rgb2: number[]) => {
|
||||
return (
|
||||
(luminanace(~~rgb1[0], ~~rgb1[1], ~~rgb1[2]) + 0.05) /
|
||||
(luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05)
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Determines what the best text color is (black or white) based con the contrast with the background
|
||||
* @param hexColor - Last selected color by the user
|
||||
*/
|
||||
export const calculateBestTextColor = (hexColor: string) => {
|
||||
const rgbColor = hexToRGB(hexColor.substring(1));
|
||||
const contrastWithBlack = contrast(rgbColor.split(','), [0, 0, 0]);
|
||||
|
||||
return contrastWithBlack >= 12 ? '#000000' : '#FFFFFF';
|
||||
};
|
||||
|
||||
/**
|
||||
* Subtracts the indicated percentage to the R, G or B of a HEX color
|
||||
* @param {string} color The color to change
|
||||
* @param {number} amount The amount to change the color by
|
||||
* @returns {string} The processed part of the color
|
||||
*/
|
||||
const subtractLight = (color: string, amount: number) => {
|
||||
const cc = parseInt(color, 16) - amount;
|
||||
const c = cc < 0 ? 0 : cc;
|
||||
return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
|
||||
};
|
||||
|
||||
// 预设颜色
|
||||
export const PREDEFINE_COLORS = [
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
'#409EFF',
|
||||
'#909399',
|
||||
'#C0C4CC',
|
||||
'#b7390b',
|
||||
'#ff7800',
|
||||
'#fad400',
|
||||
'#5b8c5f',
|
||||
'#00babd',
|
||||
'#1f73c3',
|
||||
'#711f57',
|
||||
];
|
||||
396
src/utils/common.ts
Normal file
396
src/utils/common.ts
Normal file
@@ -0,0 +1,396 @@
|
||||
import type { SkuConfig, SkuList } from '@/services/prod/prod-manager';
|
||||
|
||||
/**
|
||||
* @param str 需要转驼峰的下划线字符串
|
||||
* @returns 字符串驼峰
|
||||
*/
|
||||
export const underlineToHump = (str: string): string => {
|
||||
if (!str) return '';
|
||||
return str.replace(/-(\w)/g, (_, letter: string) => {
|
||||
return letter.toUpperCase();
|
||||
});
|
||||
};
|
||||
|
||||
export const setCssVar = (
|
||||
prop: string,
|
||||
val: any,
|
||||
dom = document.documentElement,
|
||||
) => {
|
||||
dom.style.setProperty(prop, val);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param str 需要转下划线的驼峰字符串
|
||||
* @returns 字符串下划线
|
||||
*/
|
||||
export const humpToUnderline = (str: string): string => {
|
||||
return str.replace(/([A-Z])/g, '-$1').toLowerCase();
|
||||
};
|
||||
|
||||
// copy to vben-admin
|
||||
|
||||
const objectToString = Object.prototype.toString;
|
||||
|
||||
export const is = (val: unknown, type: string) => {
|
||||
return objectToString.call(val) === `[object ${type}]`;
|
||||
};
|
||||
|
||||
export const isDef = <T = unknown>(val?: T): val is T => {
|
||||
return typeof val !== 'undefined';
|
||||
};
|
||||
|
||||
export const isUnDef = <T = unknown>(val?: T): val is T => {
|
||||
return !isDef(val);
|
||||
};
|
||||
|
||||
export const isObject = (val: any): val is Record<any, any> => {
|
||||
return val !== null && is(val, 'Object');
|
||||
};
|
||||
|
||||
export const isEmpty = (val: any): boolean => {
|
||||
if (val === null || val === undefined || typeof val === 'undefined') {
|
||||
return true;
|
||||
}
|
||||
if (isArray(val) || isString(val)) {
|
||||
return val.length === 0;
|
||||
}
|
||||
|
||||
if (val instanceof Map || val instanceof Set) {
|
||||
return val.size === 0;
|
||||
}
|
||||
|
||||
if (isObject(val)) {
|
||||
return Object.keys(val).length === 0;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
export const isDate = (val: unknown): val is Date => {
|
||||
return is(val, 'Date');
|
||||
};
|
||||
|
||||
export const isNull = (val: unknown): val is null => {
|
||||
return val === null;
|
||||
};
|
||||
|
||||
export const isNullAndUnDef = (val: unknown): val is null | undefined => {
|
||||
return isUnDef(val) && isNull(val);
|
||||
};
|
||||
|
||||
export const isNullOrUnDef = (val: unknown): val is null | undefined => {
|
||||
return isUnDef(val) || isNull(val);
|
||||
};
|
||||
|
||||
export const isNumber = (val: unknown): val is number => {
|
||||
return is(val, 'Number');
|
||||
};
|
||||
|
||||
export const isPromise = <T = any>(val: unknown): val is Promise<T> => {
|
||||
return (
|
||||
is(val, 'Promise') &&
|
||||
isObject(val) &&
|
||||
isFunction(val.then) &&
|
||||
isFunction(val.catch)
|
||||
);
|
||||
};
|
||||
|
||||
export const isString = (val: unknown): val is string => {
|
||||
return is(val, 'String');
|
||||
};
|
||||
|
||||
export const isFunction = (val: unknown): val is (...args: any[]) => any => {
|
||||
return typeof val === 'function';
|
||||
};
|
||||
|
||||
export const isBoolean = (val: unknown): val is boolean => {
|
||||
return is(val, 'Boolean');
|
||||
};
|
||||
|
||||
export const isRegExp = (val: unknown): val is RegExp => {
|
||||
return is(val, 'RegExp');
|
||||
};
|
||||
|
||||
export const isArray = (val: any): val is Array<any> => {
|
||||
return val && Array.isArray(val);
|
||||
};
|
||||
|
||||
export const isWindow = (val: any): val is Window => {
|
||||
return typeof window !== 'undefined' && is(val, 'Window');
|
||||
};
|
||||
|
||||
export const isElement = (val: unknown): val is Element => {
|
||||
return isObject(val) && !!val.tagName;
|
||||
};
|
||||
|
||||
export const isMap = (val: unknown): val is Map<any, any> => {
|
||||
return is(val, 'Map');
|
||||
};
|
||||
|
||||
export const isServer = typeof window === 'undefined';
|
||||
|
||||
export const isClient = !isServer;
|
||||
|
||||
export const isUrl = (path: string): boolean => {
|
||||
// fix:修复hash路由无法跳转的问题
|
||||
const reg =
|
||||
/(((^https?:(?:\/\/)?)(?:[-:&=+$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%#/.\w-_]*)?\??(?:[-+=&%@.\w_]*)#?(?:[\w]*))?)$/;
|
||||
return reg.test(path);
|
||||
};
|
||||
|
||||
export const isDark = (): boolean => {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
};
|
||||
|
||||
// 是否是图片链接
|
||||
export const isImgPath = (path: string): boolean => {
|
||||
return /(https?:\/\/|data:image\/).*?\.(png|jpg|jpeg|gif|svg|webp|ico)/gi.test(
|
||||
path,
|
||||
);
|
||||
};
|
||||
|
||||
export const isEmptyVal = (val: any): boolean => {
|
||||
return val === '' || val === null || val === undefined;
|
||||
};
|
||||
export const isExternal = (path: string): boolean => {
|
||||
return /https?/.test(path);
|
||||
};
|
||||
|
||||
/**
|
||||
* 查找数组对象的某个下标
|
||||
* @param {Array} ary 查找的数组
|
||||
* @param {Functon} fn 判断的方法
|
||||
*/
|
||||
// eslint-disable-next-line
|
||||
export const findIndex = <T = Recordable>(ary: Array<T>, fn: Fn): number => {
|
||||
if (ary.findIndex) {
|
||||
return ary.findIndex(fn);
|
||||
}
|
||||
let index = -1;
|
||||
ary.some((item: T, i: number, ary: Array<T>) => {
|
||||
const ret: T = fn(item, i, ary);
|
||||
if (ret) {
|
||||
index = i;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
return index;
|
||||
};
|
||||
|
||||
// 笛卡尔积函数
|
||||
|
||||
function cartesianProduct<T>(...arrays: T[][]): T[][] {
|
||||
return arrays.reduce(
|
||||
(acc, curr) => {
|
||||
const result: T[][] = [];
|
||||
acc.forEach((a) => {
|
||||
curr.forEach((c) => {
|
||||
result.push([...a, c]);
|
||||
});
|
||||
});
|
||||
return result;
|
||||
},
|
||||
[[]] as T[][],
|
||||
);
|
||||
}
|
||||
|
||||
export function generateSkuTableData(data: SkuConfig[]): SkuList[] {
|
||||
// 过滤掉prodPropValues为空的配置
|
||||
const validData = data.filter((config) => config.prodPropValues.length > 0);
|
||||
|
||||
// 如果所有配置都被过滤掉了，返回空数组
|
||||
if (validData.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const propValueArrays = validData.map((config) => config.prodPropValues);
|
||||
const combinations = cartesianProduct<{
|
||||
propValue: string;
|
||||
valueId?: number;
|
||||
state?: number;
|
||||
isExist?: number;
|
||||
}>(...propValueArrays);
|
||||
|
||||
return combinations.map((combination, index) => {
|
||||
const skuItem: SkuList = {
|
||||
skuName: combination.map((item) => item.propValue).join(','),
|
||||
basePrice: 0,
|
||||
isSpecs: index === 0 ? 1 : 0,
|
||||
status: 1,
|
||||
stocks: 0,
|
||||
isShelf: 1,
|
||||
// propIds: combination.map((item) => item.valueId).join(",")
|
||||
};
|
||||
|
||||
// 只添加有效配置的动态属性
|
||||
validData.forEach((config, configIndex) => {
|
||||
(skuItem as any)[config.propName] = combination[configIndex].propValue;
|
||||
});
|
||||
|
||||
return skuItem;
|
||||
});
|
||||
}
|
||||
|
||||
// 根据删除的SKU规格更新data状态
|
||||
function updateDataByDeletedSku(
|
||||
data: SkuConfig[],
|
||||
deletedSkuName: string,
|
||||
): SkuConfig[] {
|
||||
// 解析删除的SKU名称，获取各个属性值
|
||||
const deletedValues = deletedSkuName.split(',').map((v) => v.trim());
|
||||
|
||||
// 深拷贝data以避免修改原数据
|
||||
const updatedData = JSON.parse(JSON.stringify(data)) as SkuConfig[];
|
||||
|
||||
// 遍历每个属性配置
|
||||
updatedData.forEach((config, configIndex) => {
|
||||
if (configIndex < deletedValues.length) {
|
||||
const targetValue = deletedValues[configIndex];
|
||||
|
||||
// 找到对应的属性值并设置为失效
|
||||
config.prodPropValues.forEach(
|
||||
(propValue: {
|
||||
propValue: string;
|
||||
state?: number;
|
||||
isExist?: number;
|
||||
}) => {
|
||||
if (propValue.propValue === targetValue) {
|
||||
propValue.state = 0; // 设置为失效
|
||||
propValue.isExist = 0; // 设置为不存在
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return updatedData;
|
||||
}
|
||||
|
||||
// 批量处理多个删除的SKU
|
||||
function _updateDataByDeletedSkus(
|
||||
data: SkuConfig[],
|
||||
deletedSkuNames: string[],
|
||||
): SkuConfig[] {
|
||||
let updatedData = JSON.parse(JSON.stringify(data)) as SkuConfig[];
|
||||
|
||||
deletedSkuNames.forEach((skuName) => {
|
||||
updatedData = updateDataByDeletedSku(updatedData, skuName);
|
||||
});
|
||||
|
||||
return updatedData;
|
||||
}
|
||||
|
||||
// 根据属性名和属性值直接设置失效状态
|
||||
function _updateDataByPropValue(
|
||||
data: SkuConfig[],
|
||||
propName: string,
|
||||
propValue: string,
|
||||
state: 0 | 1 = 0,
|
||||
): SkuConfig[] {
|
||||
const updatedData = JSON.parse(JSON.stringify(data)) as SkuConfig[];
|
||||
|
||||
const targetConfig = updatedData.find(
|
||||
(config) => config.propName === propName,
|
||||
);
|
||||
if (targetConfig) {
|
||||
const targetPropValue = targetConfig.prodPropValues.find(
|
||||
(pv: {
|
||||
propValue: string;
|
||||
state?: number;
|
||||
isExist?: number;
|
||||
isExpire?: number;
|
||||
}) => pv.propValue === propValue,
|
||||
);
|
||||
if (targetPropValue) {
|
||||
targetPropValue.state = state;
|
||||
targetPropValue.isExist = state;
|
||||
}
|
||||
}
|
||||
|
||||
return updatedData;
|
||||
}
|
||||
|
||||
// 重新生成有效的SKU列表（过滤掉失效的属性值）
|
||||
export function generateValidSkuTableData(data: SkuConfig[]): SkuList[] {
|
||||
console.log(data);
|
||||
// 过滤出有效的属性值
|
||||
const validData = data
|
||||
.map((config) => ({
|
||||
...config,
|
||||
prodPropValues: config.prodPropValues.filter(
|
||||
(pv: { isExpire: number }) => pv.isExpire === 0,
|
||||
),
|
||||
}))
|
||||
.filter((config) => config.prodPropValues.length > 0);
|
||||
if (validData.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const propValueArrays = validData.map((config) => config.prodPropValues);
|
||||
const combinations = cartesianProduct<{
|
||||
propValue: string;
|
||||
valueId?: number;
|
||||
state?: number;
|
||||
isExist?: number;
|
||||
isExpire?: number;
|
||||
}>(...propValueArrays);
|
||||
|
||||
return combinations.map((combination) => {
|
||||
const skuItem: SkuList = {
|
||||
skuName: combination.map((item) => item.propValue).join(','),
|
||||
properties: combination.map((item) => item.propValue).join(','),
|
||||
basePrice: 0,
|
||||
isSpecs: 0,
|
||||
status: 1,
|
||||
stocks: 0,
|
||||
stocksFlg: 1,
|
||||
isShelf: 1,
|
||||
isExist: combination.some((item) => item.isExist) ? 1 : 0,
|
||||
};
|
||||
|
||||
validData.forEach((config, configIndex) => {
|
||||
(skuItem as any)[config.propName] = combination[configIndex].propValue;
|
||||
});
|
||||
|
||||
return skuItem;
|
||||
});
|
||||
}
|
||||
|
||||
export const generateUUID = () => {
|
||||
if (typeof crypto === 'object') {
|
||||
if (typeof crypto.randomUUID === 'function') {
|
||||
return crypto.randomUUID();
|
||||
}
|
||||
if (
|
||||
typeof crypto.getRandomValues === 'function' &&
|
||||
typeof Uint8Array === 'function'
|
||||
) {
|
||||
const callback = (c: any) => {
|
||||
const num = Number(c);
|
||||
return (
|
||||
num ^
|
||||
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (num / 4)))
|
||||
).toString(16);
|
||||
};
|
||||
return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, callback);
|
||||
}
|
||||
}
|
||||
let timestamp = Date.now();
|
||||
let performanceNow =
|
||||
(typeof performance !== 'undefined' &&
|
||||
performance.now &&
|
||||
performance.now() * 1000) ||
|
||||
0;
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||
let random = Math.random() * 16;
|
||||
if (timestamp > 0) {
|
||||
random = ((timestamp + random) % 16) | 0;
|
||||
timestamp = Math.floor(timestamp / 16);
|
||||
} else {
|
||||
random = ((performanceNow + random) % 16) | 0;
|
||||
performanceNow = Math.floor(performanceNow / 16);
|
||||
}
|
||||
return (c === 'x' ? random : (random & 0x3) | 0x8).toString(16);
|
||||
});
|
||||
};
|
||||
263
src/utils/dict.ts
Normal file
263
src/utils/dict.ts
Normal file
@@ -0,0 +1,263 @@
|
||||
/**
|
||||
* 数据字典工具类
|
||||
*/
|
||||
import { useDictStore } from '@/hooks/stores/dict';
|
||||
|
||||
export type AntDesignInfoType =
|
||||
| 'default'
|
||||
| 'primary'
|
||||
| 'success'
|
||||
| 'info'
|
||||
| 'warning'
|
||||
| 'danger'
|
||||
| undefined;
|
||||
|
||||
/**
|
||||
* 获取 dictType 对应的数据字典数组
|
||||
*
|
||||
* @param dictType 数据类型
|
||||
* @returns {*|Array} 数据字典数组
|
||||
*/
|
||||
export interface DictDataType {
|
||||
dictType: string;
|
||||
label: string;
|
||||
value: string | number | boolean;
|
||||
colorType: AntDesignInfoType;
|
||||
cssClass: string;
|
||||
}
|
||||
|
||||
export interface NumberDictDataType extends DictDataType {
|
||||
value: number;
|
||||
}
|
||||
|
||||
export interface StringDictDataType extends DictDataType {
|
||||
value: string;
|
||||
}
|
||||
|
||||
export const getDictOptions = (dictType: string) => {
|
||||
const dictStore = useDictStore();
|
||||
return dictStore.getDictByType(dictType) || [];
|
||||
};
|
||||
|
||||
export const getIntDictOptions = (dictType: string): NumberDictDataType[] => {
|
||||
// 获得通用的 DictDataType 列表
|
||||
const dictOptions: DictDataType[] = getDictOptions(dictType);
|
||||
// 转换成 number 类型的 NumberDictDataType 类型
|
||||
// why 需要特殊转换：避免 IDEA 在 v-for="dict in getIntDictOptions(...)" 时，el-option 的 key 会告警
|
||||
const dictOption: NumberDictDataType[] = [];
|
||||
dictOptions.forEach((dict: DictDataType) => {
|
||||
dictOption.push({
|
||||
...dict,
|
||||
value: parseInt(`${dict.value}`, 10),
|
||||
});
|
||||
});
|
||||
return dictOption;
|
||||
};
|
||||
|
||||
export const getStrDictOptions = (dictType: string) => {
|
||||
// 获得通用的 DictDataType 列表
|
||||
const dictOptions: DictDataType[] = getDictOptions(dictType);
|
||||
// 转换成 string 类型的 StringDictDataType 类型
|
||||
// why 需要特殊转换：避免 IDEA 在 v-for="dict in getStrDictOptions(...)" 时，el-option 的 key 会告警
|
||||
const dictOption: StringDictDataType[] = [];
|
||||
dictOptions.forEach((dict: DictDataType) => {
|
||||
dictOption.push({
|
||||
...dict,
|
||||
value: `${dict.value}`,
|
||||
});
|
||||
});
|
||||
return dictOption;
|
||||
};
|
||||
|
||||
export const getBoolDictOptions = (dictType: string) => {
|
||||
const dictOption: DictDataType[] = [];
|
||||
const dictOptions: DictDataType[] = getDictOptions(dictType);
|
||||
dictOptions.forEach((dict: DictDataType) => {
|
||||
dictOption.push({
|
||||
...dict,
|
||||
value: `${dict.value}` === 'true',
|
||||
});
|
||||
});
|
||||
return dictOption;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取指定字典类型的指定值对应的字典对象
|
||||
* @param dictType 字典类型
|
||||
* @param value 字典值
|
||||
* @return DictDataType 字典对象
|
||||
*/
|
||||
export const getDictObj = (
|
||||
dictType: string,
|
||||
value: any,
|
||||
): DictDataType | undefined => {
|
||||
const dictOptions: DictDataType[] = getDictOptions(dictType);
|
||||
for (const dict of dictOptions) {
|
||||
if (dict.value === `${value}`) {
|
||||
return dict;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获得字典数据的文本展示
|
||||
*
|
||||
* @param dictType 字典类型
|
||||
* @param value 字典数据的值
|
||||
* @return 字典名称
|
||||
*/
|
||||
export const getDictLabel = (dictType: string, value: any): string => {
|
||||
const dictOptions: DictDataType[] = getDictOptions(dictType);
|
||||
let dictLabel = '';
|
||||
dictOptions.forEach((dict: DictDataType) => {
|
||||
if (dict.value === `${value}`) {
|
||||
dictLabel = dict.label;
|
||||
}
|
||||
});
|
||||
return dictLabel;
|
||||
};
|
||||
|
||||
export enum DICT_TYPE {
|
||||
USER_TYPE = 'user_type',
|
||||
COMMON_STATUS = 'common_status',
|
||||
TERMINAL = 'terminal', // 终端
|
||||
DATE_INTERVAL = 'date_interval', // 数据间隔
|
||||
|
||||
// ========== 产品 模块 ==========
|
||||
PROD_STATUS = 'prod_status',
|
||||
CATEGORY_STATUS = 'category_status',
|
||||
// ========== SYSTEM 模块 ==========
|
||||
SYSTEM_USER_SEX = 'system_user_sex',
|
||||
SYSTEM_MENU_TYPE = 'system_menu_type',
|
||||
SYSTEM_ROLE_TYPE = 'system_role_type',
|
||||
SYSTEM_DATA_SCOPE = 'system_data_scope',
|
||||
SYSTEM_NOTICE_TYPE = 'system_notice_type',
|
||||
SYSTEM_LOGIN_TYPE = 'system_login_type',
|
||||
SYSTEM_LOGIN_RESULT = 'system_login_result',
|
||||
SYSTEM_SMS_CHANNEL_CODE = 'system_sms_channel_code',
|
||||
SYSTEM_SMS_TEMPLATE_TYPE = 'system_sms_template_type',
|
||||
SYSTEM_SMS_SEND_STATUS = 'system_sms_send_status',
|
||||
SYSTEM_SMS_RECEIVE_STATUS = 'system_sms_receive_status',
|
||||
SYSTEM_OAUTH2_GRANT_TYPE = 'system_oauth2_grant_type',
|
||||
SYSTEM_MAIL_SEND_STATUS = 'system_mail_send_status',
|
||||
SYSTEM_NOTIFY_TEMPLATE_TYPE = 'system_notify_template_type',
|
||||
SYSTEM_SOCIAL_TYPE = 'system_social_type',
|
||||
|
||||
// ========== INFRA 模块 ==========
|
||||
INFRA_BOOLEAN_STRING = 'infra_boolean_string',
|
||||
INFRA_JOB_STATUS = 'infra_job_status',
|
||||
INFRA_JOB_LOG_STATUS = 'infra_job_log_status',
|
||||
INFRA_API_ERROR_LOG_PROCESS_STATUS = 'infra_api_error_log_process_status',
|
||||
INFRA_CONFIG_TYPE = 'infra_config_type',
|
||||
INFRA_CODEGEN_TEMPLATE_TYPE = 'infra_codegen_template_type',
|
||||
INFRA_CODEGEN_FRONT_TYPE = 'infra_codegen_front_type',
|
||||
INFRA_CODEGEN_SCENE = 'infra_codegen_scene',
|
||||
INFRA_FILE_STORAGE = 'infra_file_storage',
|
||||
INFRA_OPERATE_TYPE = 'infra_operate_type',
|
||||
|
||||
// ========== BPM 模块 ==========
|
||||
BPM_MODEL_TYPE = 'bpm_model_type',
|
||||
BPM_MODEL_FORM_TYPE = 'bpm_model_form_type',
|
||||
BPM_TASK_CANDIDATE_STRATEGY = 'bpm_task_candidate_strategy',
|
||||
BPM_PROCESS_INSTANCE_STATUS = 'bpm_process_instance_status',
|
||||
BPM_TASK_STATUS = 'bpm_task_status',
|
||||
BPM_OA_LEAVE_TYPE = 'bpm_oa_leave_type',
|
||||
BPM_PROCESS_LISTENER_TYPE = 'bpm_process_listener_type',
|
||||
BPM_PROCESS_LISTENER_VALUE_TYPE = 'bpm_process_listener_value_type',
|
||||
|
||||
// ========== PAY 模块 ==========
|
||||
PAY_CHANNEL_CODE = 'pay_channel_code', // 支付渠道编码类型
|
||||
PAY_ORDER_STATUS = 'pay_order_status', // 商户支付订单状态
|
||||
PAY_REFUND_STATUS = 'pay_refund_status', // 退款订单状态
|
||||
PAY_NOTIFY_STATUS = 'pay_notify_status', // 商户支付回调状态
|
||||
PAY_NOTIFY_TYPE = 'pay_notify_type', // 商户支付回调状态
|
||||
PAY_TRANSFER_STATUS = 'pay_transfer_status', // 转账订单状态
|
||||
PAY_TRANSFER_TYPE = 'pay_transfer_type', // 转账订单状态
|
||||
|
||||
// ========== MP 模块 ==========
|
||||
MP_AUTO_REPLY_REQUEST_MATCH = 'mp_auto_reply_request_match', // 自动回复请求匹配类型
|
||||
MP_MESSAGE_TYPE = 'mp_message_type', // 消息类型
|
||||
|
||||
// ========== Member 会员模块 ==========
|
||||
MEMBER_POINT_BIZ_TYPE = 'member_point_biz_type', // 积分的业务类型
|
||||
MEMBER_EXPERIENCE_BIZ_TYPE = 'member_experience_biz_type', // 会员经验业务类型
|
||||
|
||||
// ========== MALL - 商品模块 ==========
|
||||
PRODUCT_SPU_STATUS = 'product_spu_status', //商品状态
|
||||
|
||||
// ========== MALL - 交易模块 ==========
|
||||
EXPRESS_CHARGE_MODE = 'trade_delivery_express_charge_mode', //快递的计费方式
|
||||
TRADE_AFTER_SALE_STATUS = 'trade_after_sale_status', // 售后 - 状态
|
||||
TRADE_AFTER_SALE_WAY = 'trade_after_sale_way', // 售后 - 方式
|
||||
TRADE_AFTER_SALE_TYPE = 'trade_after_sale_type', // 售后 - 类型
|
||||
TRADE_ORDER_TYPE = 'trade_order_type', // 订单 - 类型
|
||||
TRADE_ORDER_STATUS = 'trade_order_status', // 订单 - 状态
|
||||
TRADE_ORDER_ITEM_AFTER_SALE_STATUS = 'trade_order_item_after_sale_status', // 订单项 - 售后状态
|
||||
TRADE_DELIVERY_TYPE = 'trade_delivery_type', // 配送方式
|
||||
BROKERAGE_ENABLED_CONDITION = 'brokerage_enabled_condition', // 分佣模式
|
||||
BROKERAGE_BIND_MODE = 'brokerage_bind_mode', // 分销关系绑定模式
|
||||
BROKERAGE_BANK_NAME = 'brokerage_bank_name', // 佣金提现银行
|
||||
BROKERAGE_WITHDRAW_TYPE = 'brokerage_withdraw_type', // 佣金提现类型
|
||||
BROKERAGE_RECORD_BIZ_TYPE = 'brokerage_record_biz_type', // 佣金业务类型
|
||||
BROKERAGE_RECORD_STATUS = 'brokerage_record_status', // 佣金状态
|
||||
BROKERAGE_WITHDRAW_STATUS = 'brokerage_withdraw_status', // 佣金提现状态
|
||||
|
||||
// ========== MALL - 营销模块 ==========
|
||||
PROMOTION_DISCOUNT_TYPE = 'promotion_discount_type', // 优惠类型
|
||||
PROMOTION_PRODUCT_SCOPE = 'promotion_product_scope', // 营销的商品范围
|
||||
PROMOTION_COUPON_TEMPLATE_VALIDITY_TYPE = 'promotion_coupon_template_validity_type', // 优惠劵模板的有限期类型
|
||||
PROMOTION_COUPON_STATUS = 'promotion_coupon_status', // 优惠劵的状态
|
||||
PROMOTION_COUPON_TAKE_TYPE = 'promotion_coupon_take_type', // 优惠劵的领取方式
|
||||
PROMOTION_CONDITION_TYPE = 'promotion_condition_type', // 营销的条件类型枚举
|
||||
PROMOTION_BARGAIN_RECORD_STATUS = 'promotion_bargain_record_status', // 砍价记录的状态
|
||||
PROMOTION_COMBINATION_RECORD_STATUS = 'promotion_combination_record_status', // 拼团记录的状态
|
||||
PROMOTION_BANNER_POSITION = 'promotion_banner_position', // banner 定位
|
||||
|
||||
// ========== CRM - 客户管理模块 ==========
|
||||
CRM_AUDIT_STATUS = 'crm_audit_status', // CRM 审批状态
|
||||
CRM_BIZ_TYPE = 'crm_biz_type', // CRM 业务类型
|
||||
CRM_BUSINESS_END_STATUS_TYPE = 'crm_business_end_status_type', // CRM 商机结束状态类型
|
||||
CRM_RECEIVABLE_RETURN_TYPE = 'crm_receivable_return_type', // CRM 回款的还款方式
|
||||
CRM_CUSTOMER_INDUSTRY = 'crm_customer_industry', // CRM 客户所属行业
|
||||
CRM_CUSTOMER_LEVEL = 'crm_customer_level', // CRM 客户级别
|
||||
CRM_CUSTOMER_SOURCE = 'crm_customer_source', // CRM 客户来源
|
||||
CRM_PRODUCT_STATUS = 'crm_product_status', // CRM 商品状态
|
||||
CRM_PERMISSION_LEVEL = 'crm_permission_level', // CRM 数据权限的级别
|
||||
CRM_PRODUCT_UNIT = 'crm_product_unit', // CRM 产品单位
|
||||
CRM_FOLLOW_UP_TYPE = 'crm_follow_up_type', // CRM 跟进方式
|
||||
|
||||
// ========== ERP - 企业资源计划模块 ==========
|
||||
ERP_AUDIT_STATUS = 'erp_audit_status', // ERP 审批状态
|
||||
ERP_STOCK_RECORD_BIZ_TYPE = 'erp_stock_record_biz_type', // 库存明细的业务类型
|
||||
|
||||
// ========== AI - 人工智能模块 ==========
|
||||
AI_PLATFORM = 'ai_platform', // AI 平台
|
||||
AI_MODEL_TYPE = 'ai_model_type', // AI 模型类型
|
||||
AI_IMAGE_STATUS = 'ai_image_status', // AI 图片状态
|
||||
AI_MUSIC_STATUS = 'ai_music_status', // AI 音乐状态
|
||||
AI_GENERATE_MODE = 'ai_generate_mode', // AI 生成模式
|
||||
AI_WRITE_TYPE = 'ai_write_type', // AI 写作类型
|
||||
AI_WRITE_LENGTH = 'ai_write_length', // AI 写作长度
|
||||
AI_WRITE_FORMAT = 'ai_write_format', // AI 写作格式
|
||||
AI_WRITE_TONE = 'ai_write_tone', // AI 写作语气
|
||||
AI_WRITE_LANGUAGE = 'ai_write_language', // AI 写作语言
|
||||
|
||||
// ========== IOT - 物联网模块 ==========
|
||||
IOT_NET_TYPE = 'iot_net_type', // IOT 联网方式
|
||||
IOT_VALIDATE_TYPE = 'iot_validate_type', // IOT 数据校验级别
|
||||
IOT_PRODUCT_STATUS = 'iot_product_status', // IOT 产品状态
|
||||
IOT_PRODUCT_DEVICE_TYPE = 'iot_product_device_type', // IOT 产品设备类型
|
||||
IOT_DATA_FORMAT = 'iot_data_format', // IOT 数据格式
|
||||
IOT_PROTOCOL_TYPE = 'iot_protocol_type', // IOT 接入网关协议
|
||||
IOT_DEVICE_STATE = 'iot_device_state', // IOT 设备状态
|
||||
IOT_THING_MODEL_TYPE = 'iot_thing_model_type', // IOT 产品功能类型
|
||||
IOT_DATA_TYPE = 'iot_data_type', // IOT 数据类型
|
||||
IOT_THING_MODEL_UNIT = 'iot_thing_model_unit', // IOT 物模型单位
|
||||
IOT_RW_TYPE = 'iot_rw_type', // IOT 读写类型
|
||||
IOT_PLUGIN_DEPLOY_TYPE = 'iot_plugin_deploy_type', // IOT 插件部署类型
|
||||
IOT_PLUGIN_STATUS = 'iot_plugin_status', // IOT 插件状态
|
||||
IOT_PLUGIN_TYPE = 'iot_plugin_type', // IOT 插件类型
|
||||
IOT_DATA_BRIDGE_DIRECTION_ENUM = 'iot_data_bridge_direction_enum', // 桥梁方向
|
||||
IOT_DATA_BRIDGE_TYPE_ENUM = 'iot_data_bridge_type_enum', // 桥梁类型
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
// src/utils/menuUtils.ts
|
||||
import { MenuVO } from "@/services/system/menu";
|
||||
import type { MenuDataItem } from "@ant-design/pro-components";
|
||||
// src/utils/menuUtils.ts
|
||||
|
||||
// src/utils/menuUtils.ts
|
||||
// src/utils/route.ts
|
||||
export function transformMenuToRoutes(menuData: MenuVO[]): any[] {
|
||||
return menuData.map((item) => ({
|
||||
path: item.path,
|
||||
name: item.name,
|
||||
icon: item.icon,
|
||||
component: item.component,
|
||||
routes: item.children ? transformMenuToRoutes(item.children) : undefined,
|
||||
}));
|
||||
}
|
||||
|
||||
// src/utils/route.ts
|
||||
export function transformBackendMenuToFlatRoutes(menuData: any[]) {
|
||||
const flatRoutes: any[] = [];
|
||||
|
||||
function processMenu(items: any[], parentRouteId = "ant-design-pro-layout") {
|
||||
items.forEach((item) => {
|
||||
const currentRouteId = `route-${item.id}`;
|
||||
|
||||
// 处理路径 - 如果是子路由，需要组合完整路径
|
||||
let fullPath = item.path;
|
||||
if (item.parentId !== 0 && !item.path.startsWith("/")) {
|
||||
// 子路由需要相对路径
|
||||
fullPath = item.path;
|
||||
}
|
||||
|
||||
const route: any = {
|
||||
id: currentRouteId,
|
||||
path: fullPath,
|
||||
name: item.name,
|
||||
parentId: parentRouteId,
|
||||
};
|
||||
|
||||
// 添加图标（如果不是 # 的话）
|
||||
if (item.icon && item.icon !== "#") {
|
||||
route.icon = item.icon;
|
||||
}
|
||||
|
||||
// 添加组件路径
|
||||
if (item.component) {
|
||||
// 转换组件路径为动态导入格式
|
||||
route.component = item.component;
|
||||
}
|
||||
|
||||
// 其他属性
|
||||
if (!item.visible) {
|
||||
route.hideInMenu = true;
|
||||
}
|
||||
|
||||
flatRoutes.push(route);
|
||||
|
||||
// 递归处理子菜单
|
||||
if (item.children && item.children.length > 0) {
|
||||
processMenu(item.children, currentRouteId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
processMenu(menuData);
|
||||
return flatRoutes;
|
||||
}
|
||||
|
||||
export function transformMenuData(menuData: any[]) {
|
||||
const transformItem = (item: any, parentPath = "") => {
|
||||
const fullPath = item.path.startsWith("/")
|
||||
? item.path
|
||||
: `${parentPath}/${item.path}`;
|
||||
const result: any = {
|
||||
path: fullPath,
|
||||
name: item.name,
|
||||
key: `${item.id}`,
|
||||
};
|
||||
if (item.icon && item.icon !== "#") {
|
||||
result.icon = item.icon;
|
||||
}
|
||||
|
||||
if (!item.visible) {
|
||||
result.hideInMenu = true;
|
||||
}
|
||||
|
||||
if (item.children && item.children.length > 0) {
|
||||
result.children = item.children.map((child: any) =>
|
||||
transformItem(child, fullPath)
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
result;
|
||||
};
|
||||
return menuData.map((item) => transformItem(item));
|
||||
}
|
||||
69
src/utils/menuUtils.tsx
Normal file
69
src/utils/menuUtils.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import { Navigate } from '@umijs/max';
|
||||
import { Spin } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
export const loopMenuItem = (menus: any[], pId: number | string): any[] => {
|
||||
// console.log(menus, "menus");
|
||||
return menus.flatMap((item) => {
|
||||
let Component: React.ComponentType<any> | null = null;
|
||||
if (item.component && item.component.length > 0) {
|
||||
// 防止配置了路由，但本地暂未添加对应的页面，产生的错误
|
||||
Component = React.lazy(() => {
|
||||
const importComponent = () => import(`@/pages/${item.component}`);
|
||||
const import404 = () => import('@/pages/404');
|
||||
return importComponent().catch(import404);
|
||||
});
|
||||
}
|
||||
if (item.children && item.children.length > 0) {
|
||||
return [
|
||||
{
|
||||
path: item.path,
|
||||
name: item.name,
|
||||
// icon: item.icon,
|
||||
id: item.id,
|
||||
parentId: pId,
|
||||
children: [
|
||||
{
|
||||
path: item.path,
|
||||
element: (
|
||||
<Navigate
|
||||
to={getFirstLeafPath(item.children, item.path)}
|
||||
replace
|
||||
/>
|
||||
),
|
||||
},
|
||||
...loopMenuItem(item.children, item.menuID),
|
||||
],
|
||||
},
|
||||
];
|
||||
} else {
|
||||
return [
|
||||
{
|
||||
path: item.path,
|
||||
name: item.name,
|
||||
// icon: item.icon,
|
||||
id: item.menuID,
|
||||
parentId: pId,
|
||||
element: (
|
||||
<React.Suspense
|
||||
fallback={<Spin style={{ width: '100%', height: '100%' }} />}
|
||||
>
|
||||
{Component && <Component />}
|
||||
</React.Suspense>
|
||||
),
|
||||
children: [], // 添加缺失的 children 属性
|
||||
},
|
||||
];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function getFirstLeafPath(menus: any[], parentPath: string): string {
|
||||
const firstMenu = menus[0];
|
||||
const currentPath = `${parentPath}/${firstMenu.path}`;
|
||||
if (firstMenu.children && firstMenu.children.length > 0) {
|
||||
return getFirstLeafPath(firstMenu.children, currentPath);
|
||||
} else {
|
||||
return currentPath;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user