fix: 一些基本功能
This commit is contained in:
30
.vscode/extensions.json
vendored
30
.vscode/extensions.json
vendored
@@ -1,30 +0,0 @@
|
|||||||
{
|
|
||||||
"recommendations": [
|
|
||||||
// Vue 3 的语言支持
|
|
||||||
"Vue.volar",
|
|
||||||
// 将 ESLint JavaScript 集成到 VS Code 中。
|
|
||||||
"dbaeumer.vscode-eslint",
|
|
||||||
// Visual Studio Code 的官方 Stylelint 扩展
|
|
||||||
"stylelint.vscode-stylelint",
|
|
||||||
// 使用 Prettier 的代码格式化程序
|
|
||||||
"esbenp.prettier-vscode",
|
|
||||||
// 支持 dotenv 文件语法
|
|
||||||
"mikestead.dotenv",
|
|
||||||
// 源代码的拼写检查器
|
|
||||||
"streetsidesoftware.code-spell-checker",
|
|
||||||
// Tailwind CSS 的官方 VS Code 插件
|
|
||||||
"bradlc.vscode-tailwindcss",
|
|
||||||
// iconify 图标插件
|
|
||||||
"antfu.iconify",
|
|
||||||
// i18n 插件
|
|
||||||
"Lokalise.i18n-ally",
|
|
||||||
// CSS 变量提示
|
|
||||||
"vunguyentuan.vscode-css-variables",
|
|
||||||
// 在 package.json 中显示 PNPM catalog 的版本
|
|
||||||
"antfu.pnpm-catalog-lens"
|
|
||||||
],
|
|
||||||
"unwantedRecommendations": [
|
|
||||||
// 和 volar 冲突
|
|
||||||
"octref.vetur"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
37
.vscode/global.code-snippets
vendored
37
.vscode/global.code-snippets
vendored
@@ -1,37 +0,0 @@
|
|||||||
{
|
|
||||||
"import": {
|
|
||||||
"scope": "javascript,typescript",
|
|
||||||
"prefix": "im",
|
|
||||||
"body": ["import { $2 } from '$1';"],
|
|
||||||
"description": "Import a module",
|
|
||||||
},
|
|
||||||
"export-all": {
|
|
||||||
"scope": "javascript,typescript",
|
|
||||||
"prefix": "ex",
|
|
||||||
"body": ["export * from '$1';"],
|
|
||||||
"description": "Export a module",
|
|
||||||
},
|
|
||||||
"vue-script-setup": {
|
|
||||||
"scope": "vue",
|
|
||||||
"prefix": "<sc",
|
|
||||||
"body": [
|
|
||||||
"<script setup lang=\"ts\">",
|
|
||||||
"const props = defineProps<{",
|
|
||||||
" modelValue?: boolean,",
|
|
||||||
"}>()",
|
|
||||||
"$1",
|
|
||||||
"</script>",
|
|
||||||
"",
|
|
||||||
"<template>",
|
|
||||||
" <div>",
|
|
||||||
" <slot/>",
|
|
||||||
" </div>",
|
|
||||||
"</template>",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
"vue-computed": {
|
|
||||||
"scope": "javascript,typescript,vue",
|
|
||||||
"prefix": "com",
|
|
||||||
"body": ["computed(() => { $1 })"],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
42
.vscode/launch.json
vendored
42
.vscode/launch.json
vendored
@@ -1,42 +0,0 @@
|
|||||||
{
|
|
||||||
"$schema": "https://json.schemastore.org/launchsettings.json",
|
|
||||||
"version": "0.2.0",
|
|
||||||
"configurations": [
|
|
||||||
{
|
|
||||||
"type": "chrome",
|
|
||||||
"name": "vben admin playground dev",
|
|
||||||
"request": "launch",
|
|
||||||
"url": "http://localhost:5555",
|
|
||||||
"env": { "NODE_ENV": "development" },
|
|
||||||
"sourceMaps": true,
|
|
||||||
"webRoot": "${workspaceFolder}/playground"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "chrome",
|
|
||||||
"name": "vben admin antd dev",
|
|
||||||
"request": "launch",
|
|
||||||
"url": "http://localhost:5666",
|
|
||||||
"env": { "NODE_ENV": "development" },
|
|
||||||
"sourceMaps": true,
|
|
||||||
"webRoot": "${workspaceFolder}/apps/web-antd"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "chrome",
|
|
||||||
"name": "vben admin ele dev",
|
|
||||||
"request": "launch",
|
|
||||||
"url": "http://localhost:5777",
|
|
||||||
"env": { "NODE_ENV": "development" },
|
|
||||||
"sourceMaps": true,
|
|
||||||
"webRoot": "${workspaceFolder}/apps/web-ele"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "chrome",
|
|
||||||
"name": "vben admin naive dev",
|
|
||||||
"request": "launch",
|
|
||||||
"url": "http://localhost:5888",
|
|
||||||
"env": { "NODE_ENV": "development" },
|
|
||||||
"sourceMaps": true,
|
|
||||||
"webRoot": "${workspaceFolder}/apps/web-naive"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
227
.vscode/settings.json
vendored
227
.vscode/settings.json
vendored
@@ -1,227 +0,0 @@
|
|||||||
{
|
|
||||||
"tailwindCSS.experimental.configFile": "internal/tailwind-config/src/index.ts",
|
|
||||||
// workbench
|
|
||||||
"workbench.list.smoothScrolling": true,
|
|
||||||
"workbench.startupEditor": "newUntitledFile",
|
|
||||||
"workbench.tree.indent": 10,
|
|
||||||
"workbench.editor.highlightModifiedTabs": true,
|
|
||||||
"workbench.editor.closeOnFileDelete": true,
|
|
||||||
"workbench.editor.limit.enabled": true,
|
|
||||||
"workbench.editor.limit.perEditorGroup": true,
|
|
||||||
"workbench.editor.limit.value": 5,
|
|
||||||
|
|
||||||
// editor
|
|
||||||
"editor.tabSize": 2,
|
|
||||||
"editor.detectIndentation": false,
|
|
||||||
"editor.cursorBlinking": "expand",
|
|
||||||
"editor.largeFileOptimizations": false,
|
|
||||||
"editor.accessibilitySupport": "off",
|
|
||||||
"editor.cursorSmoothCaretAnimation": "on",
|
|
||||||
"editor.guides.bracketPairs": "active",
|
|
||||||
"editor.inlineSuggest.enabled": true,
|
|
||||||
"editor.suggestSelection": "recentlyUsedByPrefix",
|
|
||||||
"editor.acceptSuggestionOnEnter": "smart",
|
|
||||||
"editor.suggest.snippetsPreventQuickSuggestions": false,
|
|
||||||
"editor.stickyScroll.enabled": true,
|
|
||||||
"editor.hover.sticky": true,
|
|
||||||
"editor.suggest.insertMode": "replace",
|
|
||||||
"editor.bracketPairColorization.enabled": true,
|
|
||||||
"editor.autoClosingBrackets": "beforeWhitespace",
|
|
||||||
"editor.autoClosingDelete": "always",
|
|
||||||
"editor.autoClosingOvertype": "always",
|
|
||||||
"editor.autoClosingQuotes": "beforeWhitespace",
|
|
||||||
"editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
|
|
||||||
"editor.codeActionsOnSave": {
|
|
||||||
"source.fixAll.eslint": "explicit",
|
|
||||||
"source.fixAll.stylelint": "explicit",
|
|
||||||
"source.organizeImports": "never"
|
|
||||||
},
|
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
|
||||||
"[html]": {
|
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
||||||
},
|
|
||||||
"[css]": {
|
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
||||||
},
|
|
||||||
"[scss]": {
|
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
||||||
},
|
|
||||||
"[javascript]": {
|
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
||||||
},
|
|
||||||
"[typescript]": {
|
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
||||||
},
|
|
||||||
"[json]": {
|
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
||||||
},
|
|
||||||
"[markdown]": {
|
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
||||||
},
|
|
||||||
"[jsonc]": {
|
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
||||||
},
|
|
||||||
"[vue]": {
|
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
||||||
},
|
|
||||||
// extensions
|
|
||||||
"extensions.ignoreRecommendations": true,
|
|
||||||
|
|
||||||
// terminal
|
|
||||||
"terminal.integrated.cursorBlinking": true,
|
|
||||||
"terminal.integrated.persistentSessionReviveProcess": "never",
|
|
||||||
"terminal.integrated.tabs.enabled": true,
|
|
||||||
"terminal.integrated.scrollback": 10000,
|
|
||||||
"terminal.integrated.stickyScroll.enabled": true,
|
|
||||||
|
|
||||||
// files
|
|
||||||
"files.eol": "\n",
|
|
||||||
"files.insertFinalNewline": true,
|
|
||||||
"files.simpleDialog.enable": true,
|
|
||||||
"files.associations": {
|
|
||||||
"*.ejs": "html",
|
|
||||||
"*.art": "html",
|
|
||||||
"**/tsconfig.json": "jsonc",
|
|
||||||
"*.json": "jsonc",
|
|
||||||
"package.json": "json"
|
|
||||||
},
|
|
||||||
|
|
||||||
"files.exclude": {
|
|
||||||
"**/.eslintcache": true,
|
|
||||||
"**/bower_components": true,
|
|
||||||
"**/.turbo": true,
|
|
||||||
"**/.idea": true,
|
|
||||||
"**/tmp": true,
|
|
||||||
"**/.git": true,
|
|
||||||
"**/.svn": true,
|
|
||||||
"**/.hg": true,
|
|
||||||
"**/CVS": true,
|
|
||||||
"**/.stylelintcache": true,
|
|
||||||
"**/.DS_Store": true,
|
|
||||||
"**/vite.config.mts.*": true,
|
|
||||||
"**/tea.yaml": true
|
|
||||||
},
|
|
||||||
"files.watcherExclude": {
|
|
||||||
"**/.git/objects/**": true,
|
|
||||||
"**/.git/subtree-cache/**": true,
|
|
||||||
"**/.vscode/**": true,
|
|
||||||
"**/node_modules/**": true,
|
|
||||||
"**/tmp/**": true,
|
|
||||||
"**/bower_components/**": true,
|
|
||||||
"**/dist/**": true,
|
|
||||||
"**/yarn.lock": true
|
|
||||||
},
|
|
||||||
|
|
||||||
// search
|
|
||||||
"search.searchEditor.singleClickBehaviour": "peekDefinition",
|
|
||||||
"search.followSymlinks": false,
|
|
||||||
// 在使用搜索功能时，将这些文件夹/文件排除在外
|
|
||||||
"search.exclude": {
|
|
||||||
"**/node_modules": true,
|
|
||||||
"**/*.log": true,
|
|
||||||
"**/*.log*": true,
|
|
||||||
"**/bower_components": true,
|
|
||||||
"**/dist": true,
|
|
||||||
"**/elehukouben": true,
|
|
||||||
"**/.git": true,
|
|
||||||
"**/.github": true,
|
|
||||||
"**/.gitignore": true,
|
|
||||||
"**/.svn": true,
|
|
||||||
"**/.DS_Store": true,
|
|
||||||
"**/.vitepress/cache": true,
|
|
||||||
"**/.idea": true,
|
|
||||||
"**/.vscode": false,
|
|
||||||
"**/.yarn": true,
|
|
||||||
"**/tmp": true,
|
|
||||||
"*.xml": true,
|
|
||||||
"out": true,
|
|
||||||
"dist": true,
|
|
||||||
"node_modules": true,
|
|
||||||
"CHANGELOG.md": true,
|
|
||||||
"**/pnpm-lock.yaml": true,
|
|
||||||
"**/yarn.lock": true
|
|
||||||
},
|
|
||||||
|
|
||||||
"debug.onTaskErrors": "debugAnyway",
|
|
||||||
"diffEditor.ignoreTrimWhitespace": false,
|
|
||||||
"npm.packageManager": "pnpm",
|
|
||||||
|
|
||||||
"css.validate": false,
|
|
||||||
"less.validate": false,
|
|
||||||
"scss.validate": false,
|
|
||||||
|
|
||||||
// extension
|
|
||||||
"emmet.showSuggestionsAsSnippets": true,
|
|
||||||
"emmet.triggerExpansionOnTab": false,
|
|
||||||
|
|
||||||
"errorLens.enabledDiagnosticLevels": ["warning", "error"],
|
|
||||||
"errorLens.excludeBySource": ["cSpell", "Grammarly", "eslint"],
|
|
||||||
|
|
||||||
"stylelint.enable": true,
|
|
||||||
"stylelint.packageManager": "pnpm",
|
|
||||||
"stylelint.validate": ["css", "less", "postcss", "scss", "vue"],
|
|
||||||
"stylelint.customSyntax": "postcss-html",
|
|
||||||
"stylelint.snippet": ["css", "less", "postcss", "scss", "vue"],
|
|
||||||
|
|
||||||
"typescript.inlayHints.enumMemberValues.enabled": true,
|
|
||||||
"typescript.preferences.preferTypeOnlyAutoImports": true,
|
|
||||||
"typescript.preferences.includePackageJsonAutoImports": "on",
|
|
||||||
|
|
||||||
"eslint.validate": [
|
|
||||||
"javascript",
|
|
||||||
"typescript",
|
|
||||||
"javascriptreact",
|
|
||||||
"typescriptreact",
|
|
||||||
"vue",
|
|
||||||
"html",
|
|
||||||
"markdown",
|
|
||||||
"json",
|
|
||||||
"jsonc",
|
|
||||||
"json5"
|
|
||||||
],
|
|
||||||
|
|
||||||
"tailwindCSS.experimental.classRegex": [
|
|
||||||
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
|
|
||||||
],
|
|
||||||
|
|
||||||
"github.copilot.enable": {
|
|
||||||
"*": true,
|
|
||||||
"markdown": true,
|
|
||||||
"plaintext": false,
|
|
||||||
"yaml": false
|
|
||||||
},
|
|
||||||
|
|
||||||
"cssVariables.lookupFiles": ["packages/core/base/design/src/**/*.css"],
|
|
||||||
|
|
||||||
"i18n-ally.localesPaths": [
|
|
||||||
"packages/locales/src/langs",
|
|
||||||
"playground/src/locales/langs",
|
|
||||||
"apps/*/src/locales/langs"
|
|
||||||
],
|
|
||||||
"i18n-ally.pathMatcher": "{locale}/{namespace}.{ext}",
|
|
||||||
"i18n-ally.enabledParsers": ["json"],
|
|
||||||
"i18n-ally.sourceLanguage": "en",
|
|
||||||
"i18n-ally.displayLanguage": "zh-CN",
|
|
||||||
"i18n-ally.enabledFrameworks": ["vue", "react"],
|
|
||||||
"i18n-ally.keystyle": "nested",
|
|
||||||
"i18n-ally.sortKeys": true,
|
|
||||||
"i18n-ally.namespace": true,
|
|
||||||
|
|
||||||
// 控制相关文件嵌套展示
|
|
||||||
"explorer.fileNesting.enabled": true,
|
|
||||||
"explorer.fileNesting.expand": false,
|
|
||||||
"explorer.fileNesting.patterns": {
|
|
||||||
"*.ts": "$(capture).test.ts, $(capture).test.tsx, $(capture).spec.ts, $(capture).spec.tsx, $(capture).d.ts",
|
|
||||||
"*.tsx": "$(capture).test.ts, $(capture).test.tsx, $(capture).spec.ts, $(capture).spec.tsx,$(capture).d.ts",
|
|
||||||
"*.env": "$(capture).env.*",
|
|
||||||
"README.md": "README*,CHANGELOG*,LICENSE,CNAME",
|
|
||||||
"package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,.gitattributes,.gitignore,.gitpod.yml,.npmrc,.browserslistrc,.node-version,.git*,.tazerc.json",
|
|
||||||
"eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,cspell.json",
|
|
||||||
"tailwind.config.mjs": "postcss.*"
|
|
||||||
},
|
|
||||||
"commentTranslate.hover.enabled": false,
|
|
||||||
"commentTranslate.multiLineMerge": true,
|
|
||||||
"vue.server.hybridMode": true,
|
|
||||||
"typescript.tsdk": "node_modules/typescript/lib",
|
|
||||||
"oxc.enable": false
|
|
||||||
}
|
|
||||||
153
README.ja-JP.md
153
README.ja-JP.md
@@ -1,153 +0,0 @@
|
|||||||
<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
|
|
||||||
|
|
||||||
[](LICENSE)
|
|
||||||
|
|
||||||
<h1>Vue Vben Admin</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
[](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin)    
|
|
||||||
|
|
||||||
**日本語** | [English](./README.md) | [中文](./README.zh-CN.md)
|
|
||||||
|
|
||||||
## 紹介
|
|
||||||
|
|
||||||
Vue Vben Adminは、最新の`vue3`、`vite`、`TypeScript`などの主流技術を使用して開発された、無料でオープンソースの中・後端テンプレートです。すぐに使える中・後端のフロントエンドソリューションとして、学習の参考にもなります。
|
|
||||||
|
|
||||||
## アップグレード通知
|
|
||||||
|
|
||||||
これは最新バージョン5.0であり、以前のバージョンとは互換性がありません。新しいプロジェクトを開始する場合は、最新バージョンを使用することをお勧めします。古いバージョンを表示したい場合は、[v2ブランチ](https://github.com/vbenjs/vue-vben-admin/tree/v2)を使用してください。
|
|
||||||
|
|
||||||
## 特徴
|
|
||||||
|
|
||||||
- **最新技術スタック**: Vue 3やViteなどの最先端フロントエンド技術で開発
|
|
||||||
- **TypeScript**: アプリケーション規模のJavaScriptのための言語
|
|
||||||
- **テーマ**: 複数のテーマカラーが利用可能で、カスタマイズオプションも豊富
|
|
||||||
- **国際化**: 完全な内蔵国際化サポート
|
|
||||||
- **権限管理**: 動的ルートベースの権限生成ソリューションを内蔵
|
|
||||||
|
|
||||||
## プレビュー
|
|
||||||
|
|
||||||
- [Vben Admin](https://vben.pro/) - フルバージョンの中国語サイト
|
|
||||||
|
|
||||||
テストアカウント: vben/123456
|
|
||||||
|
|
||||||
<p align="center">
|
|
||||||
<img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
|
|
||||||
<img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
|
|
||||||
<img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
|
|
||||||
</p>
|
|
||||||
|
|
||||||
### Gitpodを使用
|
|
||||||
|
|
||||||
Gitpod（GitHub用の無料オンライン開発環境）でプロジェクトを開き、すぐにコーディングを開始します。
|
|
||||||
|
|
||||||
[](https://gitpod.io/#https://github.com/vbenjs/vue-vben-admin)
|
|
||||||
|
|
||||||
## ドキュメント
|
|
||||||
|
|
||||||
[ドキュメント](https://doc.vben.pro/)
|
|
||||||
|
|
||||||
## インストールと使用
|
|
||||||
|
|
||||||
- プロジェクトコードを取得
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git clone https://github.com/vbenjs/vue-vben-admin.git
|
|
||||||
```
|
|
||||||
|
|
||||||
- 依存関係のインストール
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd vue-vben-admin
|
|
||||||
|
|
||||||
corepack enable
|
|
||||||
|
|
||||||
pnpm install
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
- 実行
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm dev
|
|
||||||
```
|
|
||||||
|
|
||||||
- ビルド
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm build
|
|
||||||
```
|
|
||||||
|
|
||||||
## 変更ログ
|
|
||||||
|
|
||||||
[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
|
|
||||||
|
|
||||||
## 貢献方法
|
|
||||||
|
|
||||||
ご参加をお待ちしております！[Issueを提出](https://github.com/anncwb/vue-vben-admin/issues/new/choose)するか、Pull Requestを送信してください。
|
|
||||||
|
|
||||||
**Pull Request:**
|
|
||||||
|
|
||||||
1. コードをフォーク！
|
|
||||||
2. 自分のブランチを作成: `git checkout -b feat/xxxx`
|
|
||||||
3. 変更をコミット: `git commit -am 'feat(function): add xxxxx'`
|
|
||||||
4. ブランチをプッシュ: `git push origin feat/xxxx`
|
|
||||||
5. `pull request`を送信
|
|
||||||
|
|
||||||
## Git貢献提出規則
|
|
||||||
|
|
||||||
- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 規則 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
|
|
||||||
|
|
||||||
- `feat` 新機能の追加
|
|
||||||
- `fix` 問題/バグの修正
|
|
||||||
- `style` コードスタイルに関連し、実行結果に影響しない
|
|
||||||
- `perf` 最適化/パフォーマンス向上
|
|
||||||
- `refactor` リファクタリング
|
|
||||||
- `revert` 変更の取り消し
|
|
||||||
- `test` テスト関連
|
|
||||||
- `docs` ドキュメント/注釈
|
|
||||||
- `chore` 依存関係の更新/スキャフォールディング設定の変更など
|
|
||||||
- `ci` 継続的インテグレーション
|
|
||||||
- `types` 型定義ファイルの変更
|
|
||||||
- `wip` 開発中
|
|
||||||
|
|
||||||
## ブラウザサポート
|
|
||||||
|
|
||||||
ローカル開発には`Chrome 80+`ブラウザを推奨します
|
|
||||||
|
|
||||||
モダンブラウザをサポートし、IEはサポートしません
|
|
||||||
|
|
||||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
|
||||||
| :-: | :-: | :-: | :-: | :-: |
|
|
||||||
| サポートしない | 最新2バージョン | 最新2バージョン | 最新2バージョン | 最新2バージョン |
|
|
||||||
|
|
||||||
## メンテナー
|
|
||||||
|
|
||||||
[@Vben](https://github.com/anncwb)
|
|
||||||
|
|
||||||
## スター歴史
|
|
||||||
|
|
||||||
[](https://star-history.com/#vbenjs/vue-vben-admin&Date)
|
|
||||||
|
|
||||||
## 寄付
|
|
||||||
|
|
||||||
このプロジェクトが役に立つと思われた場合、作者にコーヒーを一杯おごってサポートを示すことができます！
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
|
|
||||||
|
|
||||||
## 貢献者
|
|
||||||
|
|
||||||
<a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
|
|
||||||
<img alt="Contributors"
|
|
||||||
src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
## Discord
|
|
||||||
|
|
||||||
- [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
|
|
||||||
|
|
||||||
## ライセンス
|
|
||||||
|
|
||||||
[MIT © Vben-2020](./LICENSE)
|
|
||||||
155
README.md
155
README.md
@@ -1,152 +1,7 @@
|
|||||||
<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
|
# 新萧康后台
|
||||||
|
|
||||||
[](LICENSE)
|
## 按钮权限
|
||||||
|
使用这种方式来授权
|
||||||
<h1>Vue Vben Admin</h1>
|
```vue
|
||||||
</div>
|
v-access:code="['Admin']
|
||||||
|
|
||||||
[](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin)    
|
|
||||||
|
|
||||||
**English** | [中文](./README.zh-CN.md) | [日本語](./README.ja-JP.md)
|
|
||||||
|
|
||||||
## Introduction
|
|
||||||
|
|
||||||
Vue Vben Admin is a free and open source middle and back-end template. Using the latest `vue3`, `vite`, `TypeScript` and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.
|
|
||||||
|
|
||||||
## Upgrade Notice
|
|
||||||
|
|
||||||
This is the latest version, 5.0, and it is not compatible with previous versions. If you are starting a new project, it is recommended to use the latest version. If you wish to view the old version, please use the [v2 branch](https://github.com/vbenjs/vue-vben-admin/tree/v2).
|
|
||||||
|
|
||||||
## Feature
|
|
||||||
|
|
||||||
- **Latest Technology Stack**: Developed with cutting-edge front-end technologies like Vue 3 and Vite
|
|
||||||
- **TypeScript**: A language for application-scale JavaScript
|
|
||||||
- **Themes**: Multiple theme colors available with customizable options
|
|
||||||
- **Internationalization**: Comprehensive built-in internationalization support
|
|
||||||
- **Permissions**: Built-in solution for dynamic route-based permission generation
|
|
||||||
|
|
||||||
## Preview
|
|
||||||
|
|
||||||
- [Vben Admin](https://vben.pro/) - Full version Chinese site
|
|
||||||
|
|
||||||
Test Account: vben/123456
|
|
||||||
|
|
||||||
<p align="center">
|
|
||||||
<img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
|
|
||||||
<img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
|
|
||||||
<img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
|
|
||||||
</p>
|
|
||||||
|
|
||||||
### Use Gitpod
|
|
||||||
|
|
||||||
Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.
|
|
||||||
|
|
||||||
[](https://gitpod.io/#https://github.com/vbenjs/vue-vben-admin)
|
|
||||||
|
|
||||||
## Documentation
|
|
||||||
|
|
||||||
[Document](https://doc.vben.pro/)
|
|
||||||
|
|
||||||
## Install and use
|
|
||||||
|
|
||||||
- Get the project code
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git clone https://github.com/vbenjs/vue-vben-admin.git
|
|
||||||
```
|
```
|
||||||
|
|
||||||
- Installation dependencies
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd vue-vben-admin
|
|
||||||
|
|
||||||
corepack enable
|
|
||||||
|
|
||||||
pnpm install
|
|
||||||
```
|
|
||||||
|
|
||||||
- run
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm dev
|
|
||||||
```
|
|
||||||
|
|
||||||
- build
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm build
|
|
||||||
```
|
|
||||||
|
|
||||||
## Change Log
|
|
||||||
|
|
||||||
[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
|
|
||||||
|
|
||||||
## How to contribute
|
|
||||||
|
|
||||||
You are very welcome to join！[Raise an issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) Or submit a Pull Request。
|
|
||||||
|
|
||||||
**Pull Request:**
|
|
||||||
|
|
||||||
1. Fork code!
|
|
||||||
2. Create your own branch: `git checkout -b feat/xxxx`
|
|
||||||
3. Submit your changes: `git commit -am 'feat(function): add xxxxx'`
|
|
||||||
4. Push your branch: `git push origin feat/xxxx`
|
|
||||||
5. submit`pull request`
|
|
||||||
|
|
||||||
## Git Contribution submission specification
|
|
||||||
|
|
||||||
- reference [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) specification ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
|
|
||||||
|
|
||||||
- `feat` Add new features
|
|
||||||
- `fix` Fix the problem/BUG
|
|
||||||
- `style` The code style is related and does not affect the running result
|
|
||||||
- `perf` Optimization/performance improvement
|
|
||||||
- `refactor` Refactor
|
|
||||||
- `revert` Undo edit
|
|
||||||
- `test` Test related
|
|
||||||
- `docs` Documentation/notes
|
|
||||||
- `chore` Dependency update/scaffolding configuration modification etc.
|
|
||||||
- `ci` Continuous integration
|
|
||||||
- `types` Type definition file changes
|
|
||||||
- `wip` In development
|
|
||||||
|
|
||||||
## Browser support
|
|
||||||
|
|
||||||
The `Chrome 80+` browser is recommended for local development
|
|
||||||
|
|
||||||
Support modern browsers, not IE
|
|
||||||
|
|
||||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
|
||||||
| :-: | :-: | :-: | :-: | :-: |
|
|
||||||
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
|
||||||
|
|
||||||
## Maintainer
|
|
||||||
|
|
||||||
[@Vben](https://github.com/anncwb)
|
|
||||||
|
|
||||||
## Star History
|
|
||||||
|
|
||||||
[](https://star-history.com/#vbenjs/vue-vben-admin&Date)
|
|
||||||
|
|
||||||
## Donate
|
|
||||||
|
|
||||||
If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aee;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
|
|
||||||
|
|
||||||
## Contributor
|
|
||||||
|
|
||||||
<a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
|
|
||||||
<img alt="Contributors"
|
|
||||||
src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
## Discord
|
|
||||||
|
|
||||||
- [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
[MIT © Vben-2020](./LICENSE)
|
|
||||||
|
|||||||
152
README.zh-CN.md
152
README.zh-CN.md
@@ -1,152 +0,0 @@
|
|||||||
<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
|
|
||||||
|
|
||||||
[](LICENSE)
|
|
||||||
|
|
||||||
<h1>Vue Vben Admin</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
[](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin)    
|
|
||||||
|
|
||||||
**中文** | [English](./README.md) | [日本語](./README.ja-JP.md)
|
|
||||||
|
|
||||||
## 简介
|
|
||||||
|
|
||||||
Vue Vben Admin 是 Vue Vben Admin 的升级版本。作为一个免费开源的中后台模板，它采用了最新的 Vue 3、Vite、TypeScript 等主流技术开发，开箱即用，可用于中后台前端开发，也适合学习参考。
|
|
||||||
|
|
||||||
## 升级提示
|
|
||||||
|
|
||||||
该版本为最新版本`5.0`, 与其他版本不兼容，如果你是新项目，建议使用最新版本。如果你想查看旧版本，请使用 [v2 分支](https://github.com/vbenjs/vue-vben-admin/tree/v2)
|
|
||||||
|
|
||||||
## 特性
|
|
||||||
|
|
||||||
- **最新技术栈**：使用 Vue3/vite 等前端前沿技术开发
|
|
||||||
- **TypeScript**: 应用程序级 JavaScript 的语言
|
|
||||||
- **主题**：提供多套主题色彩，可配置自定义主题
|
|
||||||
- **国际化**：内置完善的国际化方案
|
|
||||||
- **权限** 内置完善的动态路由权限生成方案
|
|
||||||
|
|
||||||
## 预览
|
|
||||||
|
|
||||||
- [Vben Admin](https://vben.pro/) - 完整版中文站点
|
|
||||||
|
|
||||||
测试账号: vben/123456
|
|
||||||
|
|
||||||
<p align="center">
|
|
||||||
<img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
|
|
||||||
<img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
|
|
||||||
<img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
|
|
||||||
</p>
|
|
||||||
|
|
||||||
### 使用 Gitpod
|
|
||||||
|
|
||||||
在 Gitpod（适用于 GitHub 的免费在线开发环境）中打开项目，并立即开始编码.
|
|
||||||
|
|
||||||
[](https://gitpod.io/#https://github.com/vbenjs/vue-vben-admin)
|
|
||||||
|
|
||||||
## 文档
|
|
||||||
|
|
||||||
[文档地址](https://doc.vben.pro/)
|
|
||||||
|
|
||||||
## 安装使用
|
|
||||||
|
|
||||||
- 获取项目代码
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git clone https://github.com/vbenjs/vue-vben-admin.git
|
|
||||||
```
|
|
||||||
|
|
||||||
- 安装依赖
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cd vue-vben-admin
|
|
||||||
|
|
||||||
corepack enable
|
|
||||||
|
|
||||||
pnpm install
|
|
||||||
```
|
|
||||||
|
|
||||||
- 运行
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm dev
|
|
||||||
```
|
|
||||||
|
|
||||||
- 打包
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm build
|
|
||||||
```
|
|
||||||
|
|
||||||
## 更新日志
|
|
||||||
|
|
||||||
[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
|
|
||||||
|
|
||||||
## 如何贡献
|
|
||||||
|
|
||||||
非常欢迎你的加入！[提一个 Issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) 或者提交一个 Pull Request。
|
|
||||||
|
|
||||||
**Pull Request:**
|
|
||||||
|
|
||||||
1. Fork 代码!
|
|
||||||
2. 创建自己的分支: `git checkout -b feature/xxxx`
|
|
||||||
3. 提交你的修改: `git commit -am 'feat(function): add xxxxx'`
|
|
||||||
4. 推送您的分支: `git push origin feature/xxxx`
|
|
||||||
5. 提交`pull request`
|
|
||||||
|
|
||||||
## Git 贡献提交规范
|
|
||||||
|
|
||||||
- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
|
|
||||||
|
|
||||||
- `feat` 增加新功能
|
|
||||||
- `fix` 修复问题/BUG
|
|
||||||
- `style` 代码风格相关无影响运行结果的
|
|
||||||
- `perf` 优化/性能提升
|
|
||||||
- `refactor` 重构
|
|
||||||
- `revert` 撤销修改
|
|
||||||
- `test` 测试相关
|
|
||||||
- `docs` 文档/注释
|
|
||||||
- `chore` 依赖更新/脚手架配置修改等
|
|
||||||
- `ci` 持续集成
|
|
||||||
- `types` 类型定义文件更改
|
|
||||||
- `wip` 开发中
|
|
||||||
|
|
||||||
## 浏览器支持
|
|
||||||
|
|
||||||
本地开发推荐使用`Chrome 80+` 浏览器
|
|
||||||
|
|
||||||
支持现代浏览器, 不支持 IE
|
|
||||||
|
|
||||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
|
||||||
| :-: | :-: | :-: | :-: | :-: |
|
|
||||||
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
|
||||||
|
|
||||||
## 维护者
|
|
||||||
|
|
||||||
[@Vben](https://github.com/anncwb)
|
|
||||||
|
|
||||||
## Star History
|
|
||||||
|
|
||||||
[](https://star-history.com/#vbenjs/vue-vben-admin&Date)
|
|
||||||
|
|
||||||
## 捐赠
|
|
||||||
|
|
||||||
如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
|
|
||||||
|
|
||||||
## Contributor
|
|
||||||
|
|
||||||
<a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
|
|
||||||
<img alt="Contributors"
|
|
||||||
src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
## Discord
|
|
||||||
|
|
||||||
- [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
[MIT © Vben-2020](./LICENSE)
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
# @vben/backend-mock
|
|
||||||
|
|
||||||
## Description
|
|
||||||
|
|
||||||
Vben Admin 数据 mock 服务，没有对接任何的数据库，所有数据都是模拟的，用于前端开发时提供数据支持。线上环境不再提供 mock 集成，可自行部署服务或者对接真实数据，由于 `mock.js` 等工具有一些限制，比如上传文件不行、无法模拟复杂的逻辑等，所以这里使用了真实的后端服务来实现。唯一麻烦的是本地需要同时启动后端服务和前端服务，但是这样可以更好的模拟真实环境。该服务不需要手动启动，已经集成在 vite 插件内，随应用一起启用。
|
|
||||||
|
|
||||||
## Running the app
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# development
|
|
||||||
$ pnpm run start
|
|
||||||
|
|
||||||
# production mode
|
|
||||||
$ pnpm run build
|
|
||||||
```
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import { verifyAccessToken } from '~/utils/jwt-utils';
|
|
||||||
import { unAuthorizedResponse } from '~/utils/response';
|
|
||||||
|
|
||||||
export default eventHandler((event) => {
|
|
||||||
const userinfo = verifyAccessToken(event);
|
|
||||||
if (!userinfo) {
|
|
||||||
return unAuthorizedResponse(event);
|
|
||||||
}
|
|
||||||
|
|
||||||
const codes =
|
|
||||||
MOCK_CODES.find((item) => item.username === userinfo.username)?.codes ?? [];
|
|
||||||
|
|
||||||
return useResponseSuccess(codes);
|
|
||||||
});
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
import {
|
|
||||||
clearRefreshTokenCookie,
|
|
||||||
setRefreshTokenCookie,
|
|
||||||
} from '~/utils/cookie-utils';
|
|
||||||
import { generateAccessToken, generateRefreshToken } from '~/utils/jwt-utils';
|
|
||||||
import { forbiddenResponse } from '~/utils/response';
|
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
|
||||||
const { password, username } = await readBody(event);
|
|
||||||
if (!password || !username) {
|
|
||||||
setResponseStatus(event, 400);
|
|
||||||
return useResponseError(
|
|
||||||
'BadRequestException',
|
|
||||||
'Username and password are required',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const findUser = MOCK_USERS.find(
|
|
||||||
(item) => item.username === username && item.password === password,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!findUser) {
|
|
||||||
clearRefreshTokenCookie(event);
|
|
||||||
return forbiddenResponse(event, 'Username or password is incorrect.');
|
|
||||||
}
|
|
||||||
|
|
||||||
const accessToken = generateAccessToken(findUser);
|
|
||||||
const refreshToken = generateRefreshToken(findUser);
|
|
||||||
|
|
||||||
setRefreshTokenCookie(event, refreshToken);
|
|
||||||
|
|
||||||
return useResponseSuccess({
|
|
||||||
...findUser,
|
|
||||||
accessToken,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import {
|
|
||||||
clearRefreshTokenCookie,
|
|
||||||
getRefreshTokenFromCookie,
|
|
||||||
} from '~/utils/cookie-utils';
|
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
|
||||||
const refreshToken = getRefreshTokenFromCookie(event);
|
|
||||||
if (!refreshToken) {
|
|
||||||
return useResponseSuccess('');
|
|
||||||
}
|
|
||||||
|
|
||||||
clearRefreshTokenCookie(event);
|
|
||||||
|
|
||||||
return useResponseSuccess('');
|
|
||||||
});
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
import {
|
|
||||||
clearRefreshTokenCookie,
|
|
||||||
getRefreshTokenFromCookie,
|
|
||||||
setRefreshTokenCookie,
|
|
||||||
} from '~/utils/cookie-utils';
|
|
||||||
import { verifyRefreshToken } from '~/utils/jwt-utils';
|
|
||||||
import { forbiddenResponse } from '~/utils/response';
|
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
|
||||||
const refreshToken = getRefreshTokenFromCookie(event);
|
|
||||||
if (!refreshToken) {
|
|
||||||
return forbiddenResponse(event);
|
|
||||||
}
|
|
||||||
|
|
||||||
clearRefreshTokenCookie(event);
|
|
||||||
|
|
||||||
const userinfo = verifyRefreshToken(refreshToken);
|
|
||||||
if (!userinfo) {
|
|
||||||
return forbiddenResponse(event);
|
|
||||||
}
|
|
||||||
|
|
||||||
const findUser = MOCK_USERS.find(
|
|
||||||
(item) => item.username === userinfo.username,
|
|
||||||
);
|
|
||||||
if (!findUser) {
|
|
||||||
return forbiddenResponse(event);
|
|
||||||
}
|
|
||||||
const accessToken = generateAccessToken(findUser);
|
|
||||||
|
|
||||||
setRefreshTokenCookie(event, refreshToken);
|
|
||||||
|
|
||||||
return accessToken;
|
|
||||||
});
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
export default eventHandler((event) => {
|
|
||||||
const { status } = getQuery(event);
|
|
||||||
setResponseStatus(event, Number(status));
|
|
||||||
return useResponseError(`${status}`);
|
|
||||||
});
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
import { faker } from '@faker-js/faker';
|
|
||||||
import { verifyAccessToken } from '~/utils/jwt-utils';
|
|
||||||
import { unAuthorizedResponse } from '~/utils/response';
|
|
||||||
|
|
||||||
function generateMockDataList(count: number) {
|
|
||||||
const dataList = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < count; i++) {
|
|
||||||
const dataItem = {
|
|
||||||
id: faker.string.uuid(),
|
|
||||||
imageUrl: faker.image.avatar(),
|
|
||||||
imageUrl2: faker.image.avatar(),
|
|
||||||
open: faker.datatype.boolean(),
|
|
||||||
status: faker.helpers.arrayElement(['success', 'error', 'warning']),
|
|
||||||
productName: faker.commerce.productName(),
|
|
||||||
price: faker.commerce.price(),
|
|
||||||
currency: faker.finance.currencyCode(),
|
|
||||||
quantity: faker.number.int({ min: 1, max: 100 }),
|
|
||||||
available: faker.datatype.boolean(),
|
|
||||||
category: faker.commerce.department(),
|
|
||||||
releaseDate: faker.date.past(),
|
|
||||||
rating: faker.number.float({ min: 1, max: 5 }),
|
|
||||||
description: faker.commerce.productDescription(),
|
|
||||||
weight: faker.number.float({ min: 0.1, max: 10 }),
|
|
||||||
color: faker.color.human(),
|
|
||||||
inProduction: faker.datatype.boolean(),
|
|
||||||
tags: Array.from({ length: 3 }, () => faker.commerce.productAdjective()),
|
|
||||||
};
|
|
||||||
|
|
||||||
dataList.push(dataItem);
|
|
||||||
}
|
|
||||||
|
|
||||||
return dataList;
|
|
||||||
}
|
|
||||||
|
|
||||||
const mockData = generateMockDataList(100);
|
|
||||||
|
|
||||||
export default eventHandler(async (event) => {
|
|
||||||
const userinfo = verifyAccessToken(event);
|
|
||||||
if (!userinfo) {
|
|
||||||
return unAuthorizedResponse(event);
|
|
||||||
}
|
|
||||||
|
|
||||||
await sleep(600);
|
|
||||||
|
|
||||||
const { page, pageSize, sortBy, sortOrder } = getQuery(event);
|
|
||||||
const listData = structuredClone(mockData);
|
|
||||||
if (sortBy && Reflect.has(listData[0], sortBy as string)) {
|
|
||||||
listData.sort((a, b) => {
|
|
||||||
if (sortOrder === 'asc') {
|
|
||||||
if (sortBy === 'price') {
|
|
||||||
return (
|
|
||||||
Number.parseFloat(a[sortBy as string]) -
|
|
||||||
Number.parseFloat(b[sortBy as string])
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return a[sortBy as string] > b[sortBy as string] ? 1 : -1;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (sortBy === 'price') {
|
|
||||||
return (
|
|
||||||
Number.parseFloat(b[sortBy as string]) -
|
|
||||||
Number.parseFloat(a[sortBy as string])
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return a[sortBy as string] < b[sortBy as string] ? 1 : -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return usePageResponseSuccess(page as string, pageSize as string, listData);
|
|
||||||
});
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export default defineEventHandler(() => 'Test get handler');
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export default defineEventHandler(() => 'Test post handler');
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { verifyAccessToken } from '~/utils/jwt-utils';
|
|
||||||
import { unAuthorizedResponse } from '~/utils/response';
|
|
||||||
|
|
||||||
export default eventHandler((event) => {
|
|
||||||
const userinfo = verifyAccessToken(event);
|
|
||||||
if (!userinfo) {
|
|
||||||
return unAuthorizedResponse(event);
|
|
||||||
}
|
|
||||||
return useResponseSuccess(userinfo);
|
|
||||||
});
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import type { NitroErrorHandler } from 'nitropack';
|
|
||||||
|
|
||||||
const errorHandler: NitroErrorHandler = function (error, event) {
|
|
||||||
event.node.res.end(`[Error Handler] ${error.stack}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default errorHandler;
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
import errorHandler from './error';
|
|
||||||
|
|
||||||
process.env.COMPATIBILITY_DATE = new Date().toISOString();
|
|
||||||
export default defineNitroConfig({
|
|
||||||
devErrorHandler: errorHandler,
|
|
||||||
errorHandler: '~/error',
|
|
||||||
routeRules: {
|
|
||||||
'/api/**': {
|
|
||||||
cors: true,
|
|
||||||
headers: {
|
|
||||||
'Access-Control-Allow-Credentials': 'true',
|
|
||||||
'Access-Control-Allow-Headers': '*',
|
|
||||||
'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
|
|
||||||
'Access-Control-Allow-Origin': '*',
|
|
||||||
'Access-Control-Expose-Headers': '*',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "@vben/backend-mock",
|
|
||||||
"version": "0.0.1",
|
|
||||||
"description": "",
|
|
||||||
"private": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"author": "",
|
|
||||||
"scripts": {
|
|
||||||
"build": "nitro build",
|
|
||||||
"start": "nitro dev"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@faker-js/faker": "catalog:",
|
|
||||||
"jsonwebtoken": "catalog:",
|
|
||||||
"nitropack": "catalog:"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/jsonwebtoken": "catalog:",
|
|
||||||
"h3": "catalog:"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "./tsconfig.json",
|
|
||||||
"exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "./.nitro/types/tsconfig.json"
|
|
||||||
}
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
import type { EventHandlerRequest, H3Event } from 'h3';
|
|
||||||
|
|
||||||
export function clearRefreshTokenCookie(event: H3Event<EventHandlerRequest>) {
|
|
||||||
deleteCookie(event, 'jwt', {
|
|
||||||
httpOnly: true,
|
|
||||||
sameSite: 'none',
|
|
||||||
secure: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setRefreshTokenCookie(
|
|
||||||
event: H3Event<EventHandlerRequest>,
|
|
||||||
refreshToken: string,
|
|
||||||
) {
|
|
||||||
setCookie(event, 'jwt', refreshToken, {
|
|
||||||
httpOnly: true,
|
|
||||||
maxAge: 24 * 60 * 60 * 1000,
|
|
||||||
sameSite: 'none',
|
|
||||||
secure: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getRefreshTokenFromCookie(event: H3Event<EventHandlerRequest>) {
|
|
||||||
const refreshToken = getCookie(event, 'jwt');
|
|
||||||
return refreshToken;
|
|
||||||
}
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
import type { EventHandlerRequest, H3Event } from 'h3';
|
|
||||||
|
|
||||||
import jwt from 'jsonwebtoken';
|
|
||||||
|
|
||||||
import { UserInfo } from './mock-data';
|
|
||||||
|
|
||||||
// TODO: Replace with your own secret key
|
|
||||||
const ACCESS_TOKEN_SECRET = 'access_token_secret';
|
|
||||||
const REFRESH_TOKEN_SECRET = 'refresh_token_secret';
|
|
||||||
|
|
||||||
export interface UserPayload extends UserInfo {
|
|
||||||
iat: number;
|
|
||||||
exp: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function generateAccessToken(user: UserInfo) {
|
|
||||||
return jwt.sign(user, ACCESS_TOKEN_SECRET, { expiresIn: '7d' });
|
|
||||||
}
|
|
||||||
|
|
||||||
export function generateRefreshToken(user: UserInfo) {
|
|
||||||
return jwt.sign(user, REFRESH_TOKEN_SECRET, {
|
|
||||||
expiresIn: '30d',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function verifyAccessToken(
|
|
||||||
event: H3Event<EventHandlerRequest>,
|
|
||||||
): null | Omit<UserInfo, 'password'> {
|
|
||||||
const authHeader = getHeader(event, 'Authorization');
|
|
||||||
if (!authHeader?.startsWith('Bearer')) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const token = authHeader.split(' ')[1];
|
|
||||||
try {
|
|
||||||
const decoded = jwt.verify(token, ACCESS_TOKEN_SECRET) as UserPayload;
|
|
||||||
|
|
||||||
const username = decoded.username;
|
|
||||||
const user = MOCK_USERS.find((item) => item.username === username);
|
|
||||||
const { password: _pwd, ...userinfo } = user;
|
|
||||||
return userinfo;
|
|
||||||
} catch {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function verifyRefreshToken(
|
|
||||||
token: string,
|
|
||||||
): null | Omit<UserInfo, 'password'> {
|
|
||||||
try {
|
|
||||||
const decoded = jwt.verify(token, REFRESH_TOKEN_SECRET) as UserPayload;
|
|
||||||
const username = decoded.username;
|
|
||||||
const user = MOCK_USERS.find((item) => item.username === username);
|
|
||||||
const { password: _pwd, ...userinfo } = user;
|
|
||||||
return userinfo;
|
|
||||||
} catch {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,189 +0,0 @@
|
|||||||
export interface UserInfo {
|
|
||||||
id: number;
|
|
||||||
password: string;
|
|
||||||
realName: string;
|
|
||||||
roles: string[];
|
|
||||||
username: string;
|
|
||||||
homePath?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const MOCK_USERS: UserInfo[] = [
|
|
||||||
{
|
|
||||||
id: 0,
|
|
||||||
password: '123456',
|
|
||||||
realName: 'Vben',
|
|
||||||
roles: ['super'],
|
|
||||||
username: 'vben',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
password: '123456',
|
|
||||||
realName: 'Admin',
|
|
||||||
roles: ['admin'],
|
|
||||||
username: 'admin',
|
|
||||||
homePath: '/workspace',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
password: '123456',
|
|
||||||
realName: 'Jack',
|
|
||||||
roles: ['user'],
|
|
||||||
username: 'jack',
|
|
||||||
homePath: '/analytics',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export const MOCK_CODES = [
|
|
||||||
// super
|
|
||||||
{
|
|
||||||
codes: ['AC_100100', 'AC_100110', 'AC_100120', 'AC_100010'],
|
|
||||||
username: 'vben',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// admin
|
|
||||||
codes: ['AC_100010', 'AC_100020', 'AC_100030'],
|
|
||||||
username: 'admin',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// user
|
|
||||||
codes: ['AC_1000001', 'AC_1000002'],
|
|
||||||
username: 'jack',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const dashboardMenus = [
|
|
||||||
{
|
|
||||||
component: 'BasicLayout',
|
|
||||||
meta: {
|
|
||||||
order: -1,
|
|
||||||
title: 'page.dashboard.title',
|
|
||||||
},
|
|
||||||
name: 'Dashboard',
|
|
||||||
path: '/',
|
|
||||||
redirect: '/analytics',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'Analytics',
|
|
||||||
path: '/analytics',
|
|
||||||
component: '/dashboard/analytics/index',
|
|
||||||
meta: {
|
|
||||||
affixTab: true,
|
|
||||||
title: 'page.dashboard.analytics',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Workspace',
|
|
||||||
path: '/workspace',
|
|
||||||
component: '/dashboard/workspace/index',
|
|
||||||
meta: {
|
|
||||||
title: 'page.dashboard.workspace',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
|
|
||||||
const roleWithMenus = {
|
|
||||||
admin: {
|
|
||||||
component: '/demos/access/admin-visible',
|
|
||||||
meta: {
|
|
||||||
icon: 'mdi:button-cursor',
|
|
||||||
title: 'demos.access.adminVisible',
|
|
||||||
},
|
|
||||||
name: 'AccessAdminVisibleDemo',
|
|
||||||
path: '/demos/access/admin-visible',
|
|
||||||
},
|
|
||||||
super: {
|
|
||||||
component: '/demos/access/super-visible',
|
|
||||||
meta: {
|
|
||||||
icon: 'mdi:button-cursor',
|
|
||||||
title: 'demos.access.superVisible',
|
|
||||||
},
|
|
||||||
name: 'AccessSuperVisibleDemo',
|
|
||||||
path: '/demos/access/super-visible',
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
component: '/demos/access/user-visible',
|
|
||||||
meta: {
|
|
||||||
icon: 'mdi:button-cursor',
|
|
||||||
title: 'demos.access.userVisible',
|
|
||||||
},
|
|
||||||
name: 'AccessUserVisibleDemo',
|
|
||||||
path: '/demos/access/user-visible',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
component: 'BasicLayout',
|
|
||||||
meta: {
|
|
||||||
icon: 'ic:baseline-view-in-ar',
|
|
||||||
keepAlive: true,
|
|
||||||
order: 1000,
|
|
||||||
title: 'demos.title',
|
|
||||||
},
|
|
||||||
name: 'Demos',
|
|
||||||
path: '/demos',
|
|
||||||
redirect: '/demos/access',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'AccessDemos',
|
|
||||||
path: '/demosaccess',
|
|
||||||
meta: {
|
|
||||||
icon: 'mdi:cloud-key-outline',
|
|
||||||
title: 'demos.access.backendPermissions',
|
|
||||||
},
|
|
||||||
redirect: '/demos/access/page-control',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'AccessPageControlDemo',
|
|
||||||
path: '/demos/access/page-control',
|
|
||||||
component: '/demos/access/index',
|
|
||||||
meta: {
|
|
||||||
icon: 'mdi:page-previous-outline',
|
|
||||||
title: 'demos.access.pageAccess',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'AccessButtonControlDemo',
|
|
||||||
path: '/demos/access/button-control',
|
|
||||||
component: '/demos/access/button-control',
|
|
||||||
meta: {
|
|
||||||
icon: 'mdi:button-cursor',
|
|
||||||
title: 'demos.access.buttonControl',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'AccessMenuVisible403Demo',
|
|
||||||
path: '/demos/access/menu-visible-403',
|
|
||||||
component: '/demos/access/menu-visible-403',
|
|
||||||
meta: {
|
|
||||||
authority: ['no-body'],
|
|
||||||
icon: 'mdi:button-cursor',
|
|
||||||
menuVisibleWithForbidden: true,
|
|
||||||
title: 'demos.access.menuVisible403',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
roleWithMenus[role],
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
};
|
|
||||||
|
|
||||||
export const MOCK_MENUS = [
|
|
||||||
{
|
|
||||||
menus: [...dashboardMenus, ...createDemosMenus('super')],
|
|
||||||
username: 'vben',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
menus: [...dashboardMenus, ...createDemosMenus('admin')],
|
|
||||||
username: 'admin',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
menus: [...dashboardMenus, ...createDemosMenus('user')],
|
|
||||||
username: 'jack',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
import type { EventHandlerRequest, H3Event } from 'h3';
|
|
||||||
|
|
||||||
export function useResponseSuccess<T = any>(data: T) {
|
|
||||||
return {
|
|
||||||
code: 0,
|
|
||||||
data,
|
|
||||||
error: null,
|
|
||||||
message: 'ok',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function usePageResponseSuccess<T = any>(
|
|
||||||
page: number | string,
|
|
||||||
pageSize: number | string,
|
|
||||||
list: T[],
|
|
||||||
{ message = 'ok' } = {},
|
|
||||||
) {
|
|
||||||
const pageData = pagination(
|
|
||||||
Number.parseInt(`${page}`),
|
|
||||||
Number.parseInt(`${pageSize}`),
|
|
||||||
list,
|
|
||||||
);
|
|
||||||
|
|
||||||
return {
|
|
||||||
...useResponseSuccess({
|
|
||||||
items: pageData,
|
|
||||||
total: list.length,
|
|
||||||
}),
|
|
||||||
message,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useResponseError(message: string, error: any = null) {
|
|
||||||
return {
|
|
||||||
code: -1,
|
|
||||||
data: null,
|
|
||||||
error,
|
|
||||||
message,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function forbiddenResponse(
|
|
||||||
event: H3Event<EventHandlerRequest>,
|
|
||||||
message = 'Forbidden Exception',
|
|
||||||
) {
|
|
||||||
setResponseStatus(event, 403);
|
|
||||||
return useResponseError(message, message);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function unAuthorizedResponse(event: H3Event<EventHandlerRequest>) {
|
|
||||||
setResponseStatus(event, 401);
|
|
||||||
return useResponseError('Unauthorized Exception', 'Unauthorized Exception');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function sleep(ms: number) {
|
|
||||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function pagination<T = any>(
|
|
||||||
pageNo: number,
|
|
||||||
pageSize: number,
|
|
||||||
array: T[],
|
|
||||||
): T[] {
|
|
||||||
const offset = (pageNo - 1) * Number(pageSize);
|
|
||||||
return offset + Number(pageSize) >= array.length
|
|
||||||
? array.slice(offset)
|
|
||||||
: array.slice(offset, offset + Number(pageSize));
|
|
||||||
}
|
|
||||||
@@ -26,6 +26,7 @@
|
|||||||
"#/*": "./src/*"
|
"#/*": "./src/*"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@ant-design/icons-vue": "^7.0.1",
|
||||||
"@vben/access": "workspace:*",
|
"@vben/access": "workspace:*",
|
||||||
"@vben/common-ui": "workspace:*",
|
"@vben/common-ui": "workspace:*",
|
||||||
"@vben/constants": "workspace:*",
|
"@vben/constants": "workspace:*",
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 491 B |
BIN
apps/web-antd/public/img/logo.png
Normal file
BIN
apps/web-antd/public/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
apps/web-antd/public/img/user-default-avatar.png
Normal file
BIN
apps/web-antd/public/img/user-default-avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
@@ -36,6 +36,8 @@ import {
|
|||||||
Upload,
|
Upload,
|
||||||
} from 'ant-design-vue';
|
} from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { registerComponent } from '#/components/form/component-map';
|
||||||
|
|
||||||
const withDefaultPlaceholder = <T extends Component>(
|
const withDefaultPlaceholder = <T extends Component>(
|
||||||
component: T,
|
component: T,
|
||||||
type: 'input' | 'select',
|
type: 'input' | 'select',
|
||||||
@@ -149,6 +151,8 @@ async function initComponentAdapter() {
|
|||||||
Upload,
|
Upload,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 自动注册自定义组件
|
||||||
|
registerComponent(components);
|
||||||
// 将组件注册到全局共享状态中
|
// 将组件注册到全局共享状态中
|
||||||
globalShareState.setComponents(components);
|
globalShareState.setComponents(components);
|
||||||
|
|
||||||
|
|||||||
@@ -6,5 +6,5 @@ import { requestClient } from '#/api/request';
|
|||||||
* 获取用户所有菜单
|
* 获取用户所有菜单
|
||||||
*/
|
*/
|
||||||
export async function getAllMenusApi() {
|
export async function getAllMenusApi() {
|
||||||
return requestClient.get<RouteRecordStringComponent[]>('/menu/all');
|
return requestClient.get<RouteRecordStringComponent[]>('auth/menu');
|
||||||
}
|
}
|
||||||
|
|||||||
17
apps/web-antd/src/api/core/upload.ts
Normal file
17
apps/web-antd/src/api/core/upload.ts
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import { requestClient } from '#/api/request';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 文件上传
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function uploadFile(data: any) {
|
||||||
|
return requestClient.upload('upload/image', data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通过文件id集合获取文件信息
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function getFileInfoByIds(data: any) {
|
||||||
|
return requestClient.post('/sys/fileInfo/getFileInfoByIds', data);
|
||||||
|
}
|
||||||
@@ -6,5 +6,5 @@ import { requestClient } from '#/api/request';
|
|||||||
* 获取用户信息
|
* 获取用户信息
|
||||||
*/
|
*/
|
||||||
export async function getUserInfoApi() {
|
export async function getUserInfoApi() {
|
||||||
return requestClient.get<UserInfo>('/user/info');
|
return requestClient.get<UserInfo>('auth/my-info');
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,9 +17,25 @@ import { message } from 'ant-design-vue';
|
|||||||
import { useAuthStore } from '#/store';
|
import { useAuthStore } from '#/store';
|
||||||
|
|
||||||
import { refreshTokenApi } from './core';
|
import { refreshTokenApi } from './core';
|
||||||
|
import {Base64} from "js-base64";
|
||||||
|
|
||||||
const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
|
const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
|
||||||
|
|
||||||
|
const arr = new Set([
|
||||||
|
'accept_tel',
|
||||||
|
'doctor',
|
||||||
|
'express_mobile',
|
||||||
|
'id_card',
|
||||||
|
'idcard',
|
||||||
|
'mobile',
|
||||||
|
'password',
|
||||||
|
'patient_mobile',
|
||||||
|
'phone',
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 敏感数据
|
||||||
|
const sensitiveData = new Set(['id_card', 'idcard']);
|
||||||
|
|
||||||
function createRequestClient(baseURL: string) {
|
function createRequestClient(baseURL: string) {
|
||||||
const client = new RequestClient({
|
const client = new RequestClient({
|
||||||
baseURL,
|
baseURL,
|
||||||
@@ -65,6 +81,15 @@ function createRequestClient(baseURL: string) {
|
|||||||
|
|
||||||
config.headers.Authorization = formatToken(accessStore.accessToken);
|
config.headers.Authorization = formatToken(accessStore.accessToken);
|
||||||
config.headers['Accept-Language'] = preferences.app.locale;
|
config.headers['Accept-Language'] = preferences.app.locale;
|
||||||
|
// 加密
|
||||||
|
// eslint-disable-next-line eqeqeq
|
||||||
|
if (config.data != null) {
|
||||||
|
config.data = getRes(config.data, false);
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line eqeqeq
|
||||||
|
if (config.params != null) {
|
||||||
|
config.params = getRes(config.params, false);
|
||||||
|
}
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -74,9 +99,29 @@ function createRequestClient(baseURL: string) {
|
|||||||
fulfilled: (response) => {
|
fulfilled: (response) => {
|
||||||
const { data: responseData, status } = response;
|
const { data: responseData, status } = response;
|
||||||
|
|
||||||
const { code, data } = responseData;
|
// 这里吧 data 换成了 result
|
||||||
if (status >= 200 && status < 400 && code === 0) {
|
const { code, result } = responseData;
|
||||||
return data;
|
// 判断返回状态码
|
||||||
|
if (status >= 200 && status < 400) {
|
||||||
|
switch (code) {
|
||||||
|
case 0: {
|
||||||
|
// 解密
|
||||||
|
// eslint-disable-next-line eqeqeq
|
||||||
|
if (result != null) {
|
||||||
|
return getRes(result);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
case 401: {
|
||||||
|
// 401 错误，需要重新登录
|
||||||
|
return doReAuthenticate();
|
||||||
|
}
|
||||||
|
case 403:
|
||||||
|
case 404:
|
||||||
|
case 500: {
|
||||||
|
throw Object.assign({}, response, { response });
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
throw Object.assign({}, response, { response });
|
throw Object.assign({}, response, { response });
|
||||||
@@ -112,3 +157,119 @@ function createRequestClient(baseURL: string) {
|
|||||||
export const requestClient = createRequestClient(apiURL);
|
export const requestClient = createRequestClient(apiURL);
|
||||||
|
|
||||||
export const baseRequestClient = new RequestClient({ baseURL: apiURL });
|
export const baseRequestClient = new RequestClient({ baseURL: apiURL });
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加解密方法
|
||||||
|
* @param obj
|
||||||
|
* @param isDecode
|
||||||
|
*/
|
||||||
|
function getRes(obj: any, isDecode = true) {
|
||||||
|
try {
|
||||||
|
for (const key in obj) {
|
||||||
|
if (Array.isArray(obj[key])) {
|
||||||
|
obj[key] = getRes(obj[key]);
|
||||||
|
} else if (typeof obj[key] === 'object') {
|
||||||
|
obj[key] = getRes(obj[key]);
|
||||||
|
} else {
|
||||||
|
// 判断obj[key]是否在arr中
|
||||||
|
if (arr.has(key)) {
|
||||||
|
let aseFile = '';
|
||||||
|
aseFile = isDecode
|
||||||
|
? customBase64Decode(obj[key])
|
||||||
|
: customBase64Encode(obj[key]);
|
||||||
|
const isGarbled =
|
||||||
|
// eslint-disable-next-line no-control-regex
|
||||||
|
/[\u0000-\u0008\v\f\u000E-\u001F\u007F-\u00FF\u{E000}-\u{F8FF}]/u.test(
|
||||||
|
aseFile,
|
||||||
|
);
|
||||||
|
if (isGarbled) {
|
||||||
|
aseFile = obj[key];
|
||||||
|
}
|
||||||
|
if (isDecode && sensitiveData.has(key)) {
|
||||||
|
// 数据脱敏，自动匹配姓名、手机号、身份证
|
||||||
|
switch (key) {
|
||||||
|
// case 'accept_name':
|
||||||
|
// case 'express_name':
|
||||||
|
// case 'express_region':
|
||||||
|
// case 'patient': {
|
||||||
|
// // 保留前两个字符，其余用星号代替
|
||||||
|
// aseFile = aseFile.slice(0, 1).padEnd(aseFile.length, '*');
|
||||||
|
// break;
|
||||||
|
// }
|
||||||
|
// case 'express_mobile':
|
||||||
|
// case 'mobile': {
|
||||||
|
// // 保留前三位和后四位，中间用星号代替
|
||||||
|
// aseFile =
|
||||||
|
// aseFile.slice(0, 3).padEnd(aseFile.length - 4, '*') +
|
||||||
|
// aseFile.slice(-4);
|
||||||
|
// break;
|
||||||
|
// }
|
||||||
|
case 'id_card':
|
||||||
|
case 'idcard': {
|
||||||
|
// 保留前六位和后四位，中间用星号代替
|
||||||
|
aseFile =
|
||||||
|
aseFile.slice(0, 6).padEnd(aseFile.length - 4, '*') +
|
||||||
|
aseFile.slice(-4);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
// 默认情况下，全部用星号代替
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
obj[key] = aseFile;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return obj;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('错误', error);
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解密
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
function customBase64Decode(data: string) {
|
||||||
|
// return data
|
||||||
|
try {
|
||||||
|
// 第一次Base64解码
|
||||||
|
const decodedFirst = Base64.decode(data);
|
||||||
|
// 截取从第30个字符开始往后的内容
|
||||||
|
const subStr = decodedFirst.slice(30);
|
||||||
|
// 第二次Base64解码
|
||||||
|
const base64 = Base64.decode(subStr);
|
||||||
|
return base64.length > 0 ? base64 : data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`解码Base64字符串【${data}】时发生错误`, error);
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加密
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
function customBase64Encode(data: string) {
|
||||||
|
// eslint-disable-next-line eqeqeq
|
||||||
|
if (data == null || data === '') return data;
|
||||||
|
// return data
|
||||||
|
try {
|
||||||
|
// 和加密方法差不多但是是要生成30个随机字符
|
||||||
|
let randomString = '';
|
||||||
|
for (let i = 0; i < 30; i++) {
|
||||||
|
const randomChar = String.fromCodePoint(
|
||||||
|
Math.floor(Math.random() * (126 - 32 + 1)) + 32,
|
||||||
|
);
|
||||||
|
randomString += randomChar;
|
||||||
|
}
|
||||||
|
const encoded = Base64.encode(data);
|
||||||
|
return Base64.encode(randomString + encoded);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`加密字符串【${data}】时发生错误`, error);
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
77
apps/web-antd/src/components/description/description.vue
Normal file
77
apps/web-antd/src/components/description/description.vue
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { DescItem } from './types';
|
||||||
|
|
||||||
|
import type { PropType } from 'vue';
|
||||||
|
|
||||||
|
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { componentMap } from '#/components/view/component-map';
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
title: { type: String, default: '' },
|
||||||
|
bordered: { type: Boolean, default: true },
|
||||||
|
size: {
|
||||||
|
type: String as PropType<'default' | 'middle' | 'small'>,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
column: {
|
||||||
|
type: [Number, Object],
|
||||||
|
default: () => {
|
||||||
|
// return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
|
||||||
|
return 12;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelStyle: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {
|
||||||
|
width: '120px',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
contentStyle: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {
|
||||||
|
width: '0px',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
schema: {
|
||||||
|
type: Array as PropType<DescItem[]>,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
data: { type: Object, default: undefined },
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Descriptions
|
||||||
|
:bordered="bordered"
|
||||||
|
:column="column"
|
||||||
|
:content-style="contentStyle"
|
||||||
|
:label-style="labelStyle"
|
||||||
|
:size="size"
|
||||||
|
:title="title ? title : undefined"
|
||||||
|
>
|
||||||
|
<template v-for="item in schema" :key="item.field">
|
||||||
|
<DescriptionsItem :label="item.label" :span="item.span">
|
||||||
|
<component
|
||||||
|
:is="(componentMap as Map<String, any>).get(item.component)"
|
||||||
|
v-if="(componentMap as Map<String, any>).has(item.component)"
|
||||||
|
:value="data?.[item.field]"
|
||||||
|
v-bind="{ ...item.componentProps }"
|
||||||
|
/>
|
||||||
|
<component
|
||||||
|
:is="item.render(data?.[item.field], data)"
|
||||||
|
v-else-if="
|
||||||
|
!(componentMap as Map<String, any>).has(item.component) &&
|
||||||
|
item.render
|
||||||
|
"
|
||||||
|
:value="data?.[item.field]"
|
||||||
|
v-bind="{ ...item.componentProps }"
|
||||||
|
/>
|
||||||
|
<template v-else>{{ data?.[item.field] }}</template>
|
||||||
|
</DescriptionsItem>
|
||||||
|
</template>
|
||||||
|
</Descriptions>
|
||||||
|
</template>
|
||||||
2
apps/web-antd/src/components/description/index.ts
Normal file
2
apps/web-antd/src/components/description/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export { default as Description } from './description.vue';
|
||||||
|
export type * from './types';
|
||||||
54
apps/web-antd/src/components/description/types.d.ts
vendored
Normal file
54
apps/web-antd/src/components/description/types.d.ts
vendored
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
import type { CollapseContainerOptions } from '@/components/Container';
|
||||||
|
import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
|
||||||
|
|
||||||
|
import type { CSSProperties, VNode } from 'vue';
|
||||||
|
|
||||||
|
export interface DescItem {
|
||||||
|
labelMinWidth?: number;
|
||||||
|
contentMinWidth?: number;
|
||||||
|
labelStyle?: CSSProperties;
|
||||||
|
field: string;
|
||||||
|
label: JSX.Element | string | VNode;
|
||||||
|
// Merge column
|
||||||
|
span?: number;
|
||||||
|
show?: (...arg: any) => boolean;
|
||||||
|
// render
|
||||||
|
render?: (
|
||||||
|
val: any,
|
||||||
|
data: Recordable,
|
||||||
|
) => Element | JSX.Element | number | string | undefined | VNode;
|
||||||
|
component: string;
|
||||||
|
componentProps?: any;
|
||||||
|
children?: DescItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DescriptionProps extends DescriptionsProps {
|
||||||
|
// Whether to include the collapse component
|
||||||
|
useCollapse?: boolean;
|
||||||
|
/**
|
||||||
|
* item configuration
|
||||||
|
* @type DescItem
|
||||||
|
*/
|
||||||
|
schema: DescItem[];
|
||||||
|
/**
|
||||||
|
* 数据
|
||||||
|
* @type object
|
||||||
|
*/
|
||||||
|
data: Recordable;
|
||||||
|
/**
|
||||||
|
* Built-in CollapseContainer component configuration
|
||||||
|
* @type CollapseContainerOptions
|
||||||
|
*/
|
||||||
|
collapseOptions?: CollapseContainerOptions;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DescInstance {
|
||||||
|
setDescProps(descProps: Partial<DescriptionProps>): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Register = (descInstance: DescInstance) => void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description:
|
||||||
|
*/
|
||||||
|
export type UseDescReturnType = [Register, DescInstance];
|
||||||
@@ -0,0 +1,104 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, markRaw, onMounted, watch } from 'vue';
|
||||||
|
|
||||||
|
import { useVbenForm } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { Spin } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { Description } from '#/components/description';
|
||||||
|
import { useSchemaStore } from '#/store/schema';
|
||||||
|
import { schemaToDetailForm } from '#/util/tool';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
tableName: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
view: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
addFieldPrefix: {
|
||||||
|
// 追加字段前辍
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const schemaStore = useSchemaStore();
|
||||||
|
const schema = computed(() => {
|
||||||
|
return schemaStore.getSchema(props.tableName);
|
||||||
|
});
|
||||||
|
const schemaDescItems = computed(() => {
|
||||||
|
return schemaToDetailForm(schema.value, props.data);
|
||||||
|
});
|
||||||
|
|
||||||
|
const formObj = computed(() => {
|
||||||
|
const [Form, api] = useVbenForm({
|
||||||
|
showDefaultActions: false,
|
||||||
|
...schema.value,
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
form: Form,
|
||||||
|
api,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
const cData = computed(() => {
|
||||||
|
const newData: any = {};
|
||||||
|
Object.keys(props.data || {}).forEach((key: string) => {
|
||||||
|
// 如果key不以addFieldPrefix为前辍，则自动追加
|
||||||
|
if (key.startsWith(props.addFieldPrefix)) {
|
||||||
|
newData[key] = props.data[key];
|
||||||
|
} else {
|
||||||
|
newData[props.addFieldPrefix + key] = props.data[key];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return newData;
|
||||||
|
});
|
||||||
|
watch(
|
||||||
|
() => props.tableName,
|
||||||
|
() => {
|
||||||
|
schemaStore.requestData(props.tableName);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
onMounted(() => {
|
||||||
|
schemaStore.requestData(props.tableName);
|
||||||
|
});
|
||||||
|
defineExpose({
|
||||||
|
getForm() {
|
||||||
|
return markRaw(formObj.value?.form);
|
||||||
|
},
|
||||||
|
getFormApi() {
|
||||||
|
return formObj.value?.api;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const spinning = computed(() => {
|
||||||
|
return Object.keys(schema.value).length === 0;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Spin :spinning="spinning">
|
||||||
|
<div v-if="view" class="desc-wrap">
|
||||||
|
<div v-for="item in schemaDescItems" :key="item.field" class="desc-card">
|
||||||
|
<Description
|
||||||
|
:data="cData"
|
||||||
|
:label-style="{
|
||||||
|
width: '120px',
|
||||||
|
}"
|
||||||
|
:schema="item.children"
|
||||||
|
:title="schemaDescItems.length === 1 ? undefined : item.label"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Spin v-else :spinning="spinning">
|
||||||
|
<component :is="markRaw(formObj?.form)" />
|
||||||
|
</Spin>
|
||||||
|
</Spin>
|
||||||
|
</template>
|
||||||
|
<style scoped lang="less">
|
||||||
|
@import '#/assets/styles/common-form.less';
|
||||||
|
@import '#/assets/styles/common-detail.less';
|
||||||
|
</style>
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as DynamicSchemaForm } from './dynamic-schema-form.vue';
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { VbenFormProps } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { onMounted, type PropType, ref, watch } from 'vue';
|
||||||
|
|
||||||
|
import { schemaToDetailForm } from '#/util/tool';
|
||||||
|
|
||||||
|
import { type DescItem, Description } from '../description';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
formOptions: {
|
||||||
|
type: Object as PropType<VbenFormProps>,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
descriptionProps: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const schemaDescItems = ref<DescItem[]>([]);
|
||||||
|
const initialSchemaDescItems = () => {
|
||||||
|
if (
|
||||||
|
Object.keys(props.formOptions).length > 0 &&
|
||||||
|
Object.keys(props.data).length > 0
|
||||||
|
) {
|
||||||
|
schemaDescItems.value = schemaToDetailForm(props.formOptions, props.data);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
initialSchemaDescItems();
|
||||||
|
});
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
() => {
|
||||||
|
initialSchemaDescItems();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => props.formOptions,
|
||||||
|
() => {
|
||||||
|
initialSchemaDescItems();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="desc-wrap">
|
||||||
|
<div
|
||||||
|
v-for="schema in schemaDescItems"
|
||||||
|
:key="schema.field"
|
||||||
|
class="desc-card"
|
||||||
|
>
|
||||||
|
<Description
|
||||||
|
:data="data"
|
||||||
|
:label-style="{
|
||||||
|
width: '150px',
|
||||||
|
}"
|
||||||
|
:schema="schema.children"
|
||||||
|
:title="schemaDescItems.length === 1 ? undefined : schema.label"
|
||||||
|
v-bind="descriptionProps"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped></style>
|
||||||
1
apps/web-antd/src/components/form-description/index.ts
Normal file
1
apps/web-antd/src/components/form-description/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default as FormDescription } from './form-description.vue';
|
||||||
32
apps/web-antd/src/components/form/component-map.ts
Normal file
32
apps/web-antd/src/components/form/component-map.ts
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import type { CustomComponentType } from './types';
|
||||||
|
|
||||||
|
import type { Component } from 'vue';
|
||||||
|
|
||||||
|
import { getFileNameWithoutExtension, toPascalCase } from '#/util/tool';
|
||||||
|
|
||||||
|
const componentMap = new Map<CustomComponentType | string, Component>();
|
||||||
|
// import.meta.glob() 直接引入所有的模块 Vite 独有的功能
|
||||||
|
const modules = import.meta.glob(
|
||||||
|
['./components/**/*.vue', '../../views/**/components/form/*.vue'],
|
||||||
|
{ eager: true },
|
||||||
|
);
|
||||||
|
// 加入到路由集合中
|
||||||
|
Object.keys(modules).forEach((key) => {
|
||||||
|
if (!key.includes('-ignore')) {
|
||||||
|
const mod = (modules as any)[key].default || {};
|
||||||
|
// ./components/ApiDict.vue
|
||||||
|
// 获取ApiDict
|
||||||
|
const compName = getFileNameWithoutExtension(key);
|
||||||
|
componentMap.set(toPascalCase(compName), mod);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
/**
|
||||||
|
* 注册组件
|
||||||
|
* @param components
|
||||||
|
*/
|
||||||
|
export const registerComponent = (components: any) => {
|
||||||
|
componentMap.forEach((value, key) => {
|
||||||
|
components[key] = value as Component;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export { componentMap };
|
||||||
62
apps/web-antd/src/components/form/components/avatar.vue
Normal file
62
apps/web-antd/src/components/form/components/avatar.vue
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { useVModel } from '@vueuse/core';
|
||||||
|
import { Upload } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { uploadFile } from '#/api/core/upload';
|
||||||
|
import { Icon } from '#/components/icon';
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
});
|
||||||
|
const props = defineProps({
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emits = defineEmits(['update:value']);
|
||||||
|
const mValue = useVModel(props, 'value', emits, {
|
||||||
|
defaultValue: props.value,
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
|
const customRequest = (e: any) => {
|
||||||
|
uploadFile({
|
||||||
|
file: e.file,
|
||||||
|
}).then((data: any) => {
|
||||||
|
mValue.value = data.url;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const handleRemove = (e: Event) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
mValue.value = '';
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Upload
|
||||||
|
:custom-request="customRequest"
|
||||||
|
:show-upload-list="false"
|
||||||
|
list-type="picture-card"
|
||||||
|
>
|
||||||
|
<div v-if="mValue" class="m-avatar-wrap">
|
||||||
|
<Icon
|
||||||
|
class="m-avatar-icon-delete"
|
||||||
|
icon="ant-design:delete-outlined"
|
||||||
|
@click="handleRemove"
|
||||||
|
/>
|
||||||
|
<img :src="value" width="100%" />
|
||||||
|
</div>
|
||||||
|
<Icon v-else icon="ant-design:plus-outlined" />
|
||||||
|
</Upload>
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.m-avatar-wrap {
|
||||||
|
position: relative;
|
||||||
|
height: 102px;
|
||||||
|
.m-avatar-icon-delete {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
162
apps/web-antd/src/components/form/components/upload.vue
Normal file
162
apps/web-antd/src/components/form/components/upload.vue
Normal file
@@ -0,0 +1,162 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted, type PropType, ref, useAttrs, watch } from 'vue';
|
||||||
|
|
||||||
|
import { useAccessStore } from '@vben/stores';
|
||||||
|
|
||||||
|
import { Button } from 'ant-design-vue';
|
||||||
|
import {
|
||||||
|
message,
|
||||||
|
Upload,
|
||||||
|
type UploadChangeParam,
|
||||||
|
type UploadFile,
|
||||||
|
} from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { getFileInfoByIds } from '#/api/core/upload';
|
||||||
|
import { Icon } from '#/components/icon';
|
||||||
|
import { omit } from '#/util/tool';
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'Upload',
|
||||||
|
inheritAttrs: false,
|
||||||
|
});
|
||||||
|
const props = defineProps({
|
||||||
|
value: {
|
||||||
|
// 文件id，多个使用英文逗号分割
|
||||||
|
type: [String] as PropType<string>,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
action: {
|
||||||
|
// 上传的地址
|
||||||
|
type: String,
|
||||||
|
default: `${import.meta.env.VITE_GLOB_API_URL}/sys/fileInfo/upload`,
|
||||||
|
},
|
||||||
|
headers: {
|
||||||
|
// 上传请求的 headers
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
// 是否禁用
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
listType: {
|
||||||
|
// 上传类型
|
||||||
|
type: String as PropType<'picture' | 'picture-card' | 'text'>,
|
||||||
|
default: 'text',
|
||||||
|
},
|
||||||
|
maxCount: {
|
||||||
|
// 最大上传数量
|
||||||
|
type: Number,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
uploadName: {
|
||||||
|
// 文件上传字段名,name被字段名覆写了，要换成uploadName
|
||||||
|
type: String,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
separator: {
|
||||||
|
// 文件id分隔符
|
||||||
|
type: String,
|
||||||
|
default: ',',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emits = defineEmits(['update:modelValue']);
|
||||||
|
const accessStore = useAccessStore();
|
||||||
|
const fileList = ref<UploadFile[]>([]);
|
||||||
|
const attrs = useAttrs();
|
||||||
|
const bindProps = computed(() => {
|
||||||
|
return {
|
||||||
|
...omit(attrs, ['onChange', 'onInput', 'onBlur', 'name']),
|
||||||
|
...props,
|
||||||
|
name: props.uploadName || 'file',
|
||||||
|
};
|
||||||
|
});
|
||||||
|
const _getFileInfoByIds = (val: string | string[] | undefined) => {
|
||||||
|
if (!val) return;
|
||||||
|
getFileInfoByIds({
|
||||||
|
fileInfoIds: val,
|
||||||
|
}).then((res) => {
|
||||||
|
fileList.value = res || [];
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const mValue = computed({
|
||||||
|
get() {
|
||||||
|
return props.value;
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
emits('update:modelValue', val);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const mHeaders = {
|
||||||
|
Authorization: `Bearer ${accessStore.accessToken}`,
|
||||||
|
...props.headers,
|
||||||
|
};
|
||||||
|
const handleChange = (info: UploadChangeParam) => {
|
||||||
|
if (info.file.status === 'done') {
|
||||||
|
// 更新file-list当前file的uid
|
||||||
|
fileList.value = fileList.value.map((item) => {
|
||||||
|
if (item.uid === info.file.uid) {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
uid: info.file.response.data.fileInfoId,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
mValue.value = fileList.value
|
||||||
|
.map((item) => {
|
||||||
|
return item.uid;
|
||||||
|
})
|
||||||
|
.join(props.separator);
|
||||||
|
} else if (info.file.status === 'error') {
|
||||||
|
message.error(`${info.file.name} file upload failed.`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleRemove = (file: any) => {
|
||||||
|
mValue.value = fileList.value
|
||||||
|
.filter((item: any) => item.uid !== file.uid)
|
||||||
|
.map((item: any) => item.uid)
|
||||||
|
.join(props.separator);
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
watch(
|
||||||
|
() => props.value,
|
||||||
|
(val) => {
|
||||||
|
_getFileInfoByIds(val);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
onMounted(() => {
|
||||||
|
_getFileInfoByIds(props.value);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Upload
|
||||||
|
v-model:file-list="fileList"
|
||||||
|
v-bind="bindProps"
|
||||||
|
:action="action"
|
||||||
|
:disabled="disabled"
|
||||||
|
:headers="mHeaders"
|
||||||
|
:list-type="listType"
|
||||||
|
:max-count="maxCount"
|
||||||
|
@change="handleChange"
|
||||||
|
@remove="handleRemove"
|
||||||
|
>
|
||||||
|
<template #default>
|
||||||
|
<Icon
|
||||||
|
v-if="listType === 'picture-card'"
|
||||||
|
:size="24"
|
||||||
|
icon="ant-design:plus-outlined"
|
||||||
|
/>
|
||||||
|
<Button v-else>
|
||||||
|
上传文件
|
||||||
|
<template #icon>
|
||||||
|
<Icon icon="ant-design:cloud-upload-outlined" />
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
<template v-for="item in Object.keys($slots)" #[item]="data">
|
||||||
|
<slot :name="item" v-bind="data || {}"></slot>
|
||||||
|
</template>
|
||||||
|
</Upload>
|
||||||
|
</template>
|
||||||
7
apps/web-antd/src/components/form/index.ts
Normal file
7
apps/web-antd/src/components/form/index.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
// export { default as ApiCheckboxGroup } from './components/api-checkbox-group.vue';
|
||||||
|
// export { default as ApiDict } from './components/api-dict.vue';
|
||||||
|
// export { default as ApiRadioGroup } from './components/api-radio-group.vue';
|
||||||
|
// export { default as ApiSelect } from './components/api-select.vue';
|
||||||
|
// export { default as ApiTreeSelect } from './components/api-tree-select.vue';
|
||||||
|
// export { default as IconPicker } from './components/icon-picker.vue';
|
||||||
|
export { default as Upload } from './components/upload.vue';
|
||||||
7
apps/web-antd/src/components/form/types/index.d.ts
vendored
Normal file
7
apps/web-antd/src/components/form/types/index.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
export type CustomComponentType =
|
||||||
|
| 'ApiCheckboxGroup'
|
||||||
|
| 'ApiDict'
|
||||||
|
| 'ApiRadioGroup'
|
||||||
|
| 'ApiSelect'
|
||||||
|
| 'ApiTreeSelect'
|
||||||
|
| 'IconPicker';
|
||||||
51
apps/web-antd/src/components/icon/icon.vue
Normal file
51
apps/web-antd/src/components/icon/icon.vue
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, h } from 'vue';
|
||||||
|
|
||||||
|
import { IconifyIcon as VbenIcon } from '@vben/icons';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '16px',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const iconComp = computed(() => {
|
||||||
|
if (props.icon.startsWith('http')) {
|
||||||
|
return () => h('img', { src: props.icon, class: 'm-icon__' });
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
const styles = computed(() => {
|
||||||
|
return {
|
||||||
|
fontSize: props.size.toString().endsWith('px')
|
||||||
|
? props.size
|
||||||
|
: `${props.size}px`,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<component :is="iconComp" v-if="iconComp" :style="styles" />
|
||||||
|
<VbenIcon v-else :icon="props.icon" :style="styles" class="m-icon__" />
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.m-icon__ {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: 0;
|
||||||
|
color: inherit;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: none;
|
||||||
|
vertical-align: -0.125em;
|
||||||
|
text-rendering: optimizelegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1
apps/web-antd/src/components/icon/index.ts
Normal file
1
apps/web-antd/src/components/icon/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default as Icon } from './icon.vue';
|
||||||
2
apps/web-antd/src/components/table-action/index.ts
Normal file
2
apps/web-antd/src/components/table-action/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export { default as TableAction } from './table-action.vue';
|
||||||
|
export type * from './types.d.ts';
|
||||||
225
apps/web-antd/src/components/table-action/table-action.vue
Normal file
225
apps/web-antd/src/components/table-action/table-action.vue
Normal file
@@ -0,0 +1,225 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { ButtonType } from 'ant-design-vue/es/button';
|
||||||
|
|
||||||
|
import type { ActionItem, PopConfirm } from './types';
|
||||||
|
|
||||||
|
import { computed, type PropType, toRaw } from 'vue';
|
||||||
|
|
||||||
|
import { useAccess } from '@vben/access';
|
||||||
|
import { isBoolean, isFunction } from '@vben/utils';
|
||||||
|
|
||||||
|
import { Button, Dropdown, Menu, Popconfirm, Space } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { Icon } from '#/components/icon';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
actions: {
|
||||||
|
type: Array as PropType<ActionItem[]>,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dropDownActions: {
|
||||||
|
type: Array as PropType<ActionItem[]>,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
divider: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const MenuItem = Menu.Item;
|
||||||
|
|
||||||
|
const { hasAccessByCodes } = useAccess();
|
||||||
|
function isIfShow(action: ActionItem): boolean {
|
||||||
|
const ifShow = action.ifShow;
|
||||||
|
|
||||||
|
let isIfShow = true;
|
||||||
|
|
||||||
|
if (isBoolean(ifShow)) {
|
||||||
|
isIfShow = ifShow;
|
||||||
|
}
|
||||||
|
if (isFunction(ifShow)) {
|
||||||
|
isIfShow = ifShow(action);
|
||||||
|
}
|
||||||
|
return isIfShow;
|
||||||
|
}
|
||||||
|
|
||||||
|
const getActions = computed(() => {
|
||||||
|
return (toRaw(props.actions) || [])
|
||||||
|
.filter((action) => {
|
||||||
|
return (
|
||||||
|
(hasAccessByCodes(action.auth || []) ||
|
||||||
|
(action.auth || []).length === 0) &&
|
||||||
|
isIfShow(action)
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.map((action) => {
|
||||||
|
const { popConfirm } = action;
|
||||||
|
return {
|
||||||
|
// getPopupContainer: document.body,
|
||||||
|
type: 'link' as ButtonType,
|
||||||
|
...action,
|
||||||
|
...popConfirm,
|
||||||
|
onConfirm: popConfirm?.confirm,
|
||||||
|
onCancel: popConfirm?.cancel,
|
||||||
|
enable: !!popConfirm,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
const getDropdownList = computed((): any[] => {
|
||||||
|
return (toRaw(props.dropDownActions) || [])
|
||||||
|
.filter((action) => {
|
||||||
|
return (
|
||||||
|
(hasAccessByCodes(action.auth || []) ||
|
||||||
|
(action.auth || []).length === 0) &&
|
||||||
|
isIfShow(action)
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.map((action, index) => {
|
||||||
|
const { label, popConfirm } = action;
|
||||||
|
return {
|
||||||
|
...action,
|
||||||
|
...popConfirm,
|
||||||
|
onConfirm: popConfirm?.confirm,
|
||||||
|
onCancel: popConfirm?.cancel,
|
||||||
|
text: label,
|
||||||
|
divider:
|
||||||
|
index < props.dropDownActions.length - 1 ? props.divider : false,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
const getPopConfirmProps = (attrs: PopConfirm) => {
|
||||||
|
const originAttrs: any = attrs;
|
||||||
|
delete originAttrs.icon;
|
||||||
|
if (attrs.confirm && isFunction(attrs.confirm)) {
|
||||||
|
originAttrs.onConfirm = attrs.confirm;
|
||||||
|
delete originAttrs.confirm;
|
||||||
|
}
|
||||||
|
if (attrs.cancel && isFunction(attrs.cancel)) {
|
||||||
|
originAttrs.onCancel = attrs.cancel;
|
||||||
|
delete originAttrs.cancel;
|
||||||
|
}
|
||||||
|
return originAttrs;
|
||||||
|
};
|
||||||
|
const getButtonProps = (action: ActionItem) => {
|
||||||
|
const res = {
|
||||||
|
type: action.type || 'primary',
|
||||||
|
...action,
|
||||||
|
};
|
||||||
|
delete res.icon;
|
||||||
|
return res;
|
||||||
|
};
|
||||||
|
const handleMenuClick = (e: any) => {
|
||||||
|
const action = getDropdownList.value[e.key];
|
||||||
|
if (action.onClick && isFunction(action.onClick)) {
|
||||||
|
action.onClick();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="m-table-action">
|
||||||
|
<Space
|
||||||
|
:size="
|
||||||
|
getActions?.some((item: ActionItem) => item.type === 'link') ? 0 : 8
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<template v-for="(action, index) in getActions" :key="index">
|
||||||
|
<Popconfirm
|
||||||
|
v-if="action.popConfirm"
|
||||||
|
v-bind="getPopConfirmProps(action.popConfirm)"
|
||||||
|
>
|
||||||
|
<template v-if="action.popConfirm.icon" #icon>
|
||||||
|
<Icon :icon="action.popConfirm.icon" />
|
||||||
|
</template>
|
||||||
|
<Button v-bind="getButtonProps(action)">
|
||||||
|
<template v-if="action.icon" #icon>
|
||||||
|
<Icon :icon="action.icon" />
|
||||||
|
</template>
|
||||||
|
{{ action.label }}
|
||||||
|
</Button>
|
||||||
|
</Popconfirm>
|
||||||
|
<Button v-else v-bind="getButtonProps(action)" @click="action.onClick">
|
||||||
|
<template v-if="action.icon" #icon>
|
||||||
|
<Icon :icon="action.icon" />
|
||||||
|
</template>
|
||||||
|
{{ action.label }}
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</Space>
|
||||||
|
|
||||||
|
<Dropdown v-if="getDropdownList.length > 0" :trigger="['hover']">
|
||||||
|
<slot name="more">
|
||||||
|
<Button size="small" type="link">
|
||||||
|
<template #icon>
|
||||||
|
<Icon class="icon-more" icon="ant-design:more-outlined" />
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</slot>
|
||||||
|
<template #overlay>
|
||||||
|
<Menu @click="handleMenuClick">
|
||||||
|
<MenuItem v-for="(action, index) in getDropdownList" :key="index">
|
||||||
|
<template v-if="action.popConfirm">
|
||||||
|
<Popconfirm v-bind="getPopConfirmProps(action.popConfirm)">
|
||||||
|
<template v-if="action.popConfirm.icon" #icon>
|
||||||
|
<Icon :icon="action.popConfirm.icon" />
|
||||||
|
</template>
|
||||||
|
<div
|
||||||
|
:class="
|
||||||
|
action.disabled === true
|
||||||
|
? 'cursor-not-allowed text-gray-300'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<Icon v-if="action.icon" :icon="action.icon" />
|
||||||
|
<span class="ml-1">{{ action.text }}</span>
|
||||||
|
</div>
|
||||||
|
</Popconfirm>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div
|
||||||
|
:class="
|
||||||
|
action.disabled === true
|
||||||
|
? 'cursor-not-allowed text-gray-300'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<Icon v-if="action.icon" :icon="action.icon" />
|
||||||
|
{{ action.label }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
</template>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="less">
|
||||||
|
/** 修复 iconify 位置问题 **/
|
||||||
|
.m-table-action {
|
||||||
|
.ant-btn > .iconify + span,
|
||||||
|
.ant-btn > span + .iconify {
|
||||||
|
margin-inline-start: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-btn > .iconify {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: 0;
|
||||||
|
color: inherit;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: none;
|
||||||
|
vertical-align: -0.125em;
|
||||||
|
text-rendering: optimizelegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
26
apps/web-antd/src/components/table-action/types.d.ts
vendored
Normal file
26
apps/web-antd/src/components/table-action/types.d.ts
vendored
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
|
||||||
|
import { TooltipProps } from 'ant-design-vue/es/tooltip/Tooltip';
|
||||||
|
|
||||||
|
export interface PopConfirm {
|
||||||
|
title: string;
|
||||||
|
okText?: string;
|
||||||
|
cancelText?: string;
|
||||||
|
confirm: Fn;
|
||||||
|
cancel?: Fn;
|
||||||
|
icon?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
export interface ActionItem extends ButtonProps {
|
||||||
|
onClick?: Fn;
|
||||||
|
label?: string;
|
||||||
|
color?: 'error' | 'success' | 'warning';
|
||||||
|
icon?: string;
|
||||||
|
popConfirm?: PopConfirm;
|
||||||
|
disabled?: boolean;
|
||||||
|
divider?: boolean;
|
||||||
|
// 权限编码控制是否显示
|
||||||
|
auth?: string[];
|
||||||
|
// 业务控制是否显示
|
||||||
|
ifShow?: ((action: ActionItem) => boolean) | boolean;
|
||||||
|
tooltip?: string | TooltipProps;
|
||||||
|
}
|
||||||
22
apps/web-antd/src/components/view/component-map.ts
Normal file
22
apps/web-antd/src/components/view/component-map.ts
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import type { Component } from 'vue';
|
||||||
|
|
||||||
|
import { getFileNameWithoutExtension, toPascalCase } from '#/util/tool';
|
||||||
|
|
||||||
|
const componentMap = new Map<string, Component>();
|
||||||
|
// import.meta.glob() 直接引入所有的模块 Vite 独有的功能
|
||||||
|
const modules = import.meta.glob(
|
||||||
|
['./components/**/*.vue', '../../views/**/components/view/*.vue'],
|
||||||
|
{ eager: true },
|
||||||
|
);
|
||||||
|
// 加入到路由集合中
|
||||||
|
Object.keys(modules).forEach((key) => {
|
||||||
|
if (!key.includes('-ignore')) {
|
||||||
|
const mod = (modules as any)[key].default || {};
|
||||||
|
// ./components/ApiDict.vue
|
||||||
|
// 获取ApiDict
|
||||||
|
const compName = getFileNameWithoutExtension(key);
|
||||||
|
componentMap.set(toPascalCase(compName), mod);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export { componentMap };
|
||||||
@@ -0,0 +1,98 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted, type PropType, ref } from 'vue';
|
||||||
|
|
||||||
|
import { requestClient } from '#/api/request';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
// 值
|
||||||
|
type: [String, Number, Array],
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
api: {
|
||||||
|
// 接口请求对象
|
||||||
|
type: [Function, String] as PropType<
|
||||||
|
((...arg: any) => Promise<any>) | String
|
||||||
|
>,
|
||||||
|
default() {
|
||||||
|
return () => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
resolve([]);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
params: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
cacheKey: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
requestMethod: {
|
||||||
|
type: String,
|
||||||
|
default: 'post',
|
||||||
|
},
|
||||||
|
valueField: {
|
||||||
|
type: String,
|
||||||
|
default: 'id',
|
||||||
|
},
|
||||||
|
labelField: {
|
||||||
|
type: String,
|
||||||
|
default: 'name',
|
||||||
|
},
|
||||||
|
// 分割符
|
||||||
|
split: {
|
||||||
|
type: String,
|
||||||
|
default: '/',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const currentData = ref([]);
|
||||||
|
const cValue = computed(() => {
|
||||||
|
return currentData.value
|
||||||
|
.map((item) => item[props.labelField])
|
||||||
|
.join(props.split);
|
||||||
|
});
|
||||||
|
onMounted(() => {
|
||||||
|
const api: (...arg: any) => Promise<any> =
|
||||||
|
typeof props.api === 'string'
|
||||||
|
? (params: any) => {
|
||||||
|
return (requestClient as any)[props.requestMethod](
|
||||||
|
props.api as any,
|
||||||
|
params,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
: (props.api as (...arg: any) => Promise<any>);
|
||||||
|
const searchType = 'IN';
|
||||||
|
const params =
|
||||||
|
props.requestMethod === 'get'
|
||||||
|
? {
|
||||||
|
params: {
|
||||||
|
...props.params,
|
||||||
|
[`m_${searchType}_${props.valueField}`]: props.value,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
...props.params,
|
||||||
|
[`m_${searchType}_${props.valueField}`]: props.value,
|
||||||
|
};
|
||||||
|
api(params).then((res) => {
|
||||||
|
if (res.length > 0) {
|
||||||
|
currentData.value = res;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div>{{ cValue }}</div>
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import ApiSelect from './api-select.vue';
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<ApiSelect />
|
||||||
|
</template>
|
||||||
67
apps/web-antd/src/components/view/components/api-dict.vue
Normal file
67
apps/web-antd/src/components/view/components/api-dict.vue
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted } from 'vue';
|
||||||
|
|
||||||
|
import { useDictStore } from '#/store/dict';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
code: {
|
||||||
|
type: String,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
// 值
|
||||||
|
type: [String, Number, Array],
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
split: {
|
||||||
|
// 分割符
|
||||||
|
type: String,
|
||||||
|
default: ',',
|
||||||
|
},
|
||||||
|
join: {
|
||||||
|
// 连接符
|
||||||
|
type: String,
|
||||||
|
default: ',',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const dictStore = useDictStore();
|
||||||
|
const cValue = computed(() => {
|
||||||
|
if (!props.value && props.value !== 0) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
const arr: Array<any> = [];
|
||||||
|
if (Array.isArray(props.value)) {
|
||||||
|
arr.push(...props.value);
|
||||||
|
} else {
|
||||||
|
arr.push(...props.value.toString().split(props.split));
|
||||||
|
}
|
||||||
|
const dictData = dictStore.getDictData(props.code as string);
|
||||||
|
const res: Array<any> = [];
|
||||||
|
arr.forEach((item) => {
|
||||||
|
for (let i = 0; i < dictData.length; i++) {
|
||||||
|
if (dictData[i].value?.toString() === item?.toString()) {
|
||||||
|
res.push(dictData[i].label);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (i === dictData.length - 1) {
|
||||||
|
res.push(item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.join(props.join);
|
||||||
|
});
|
||||||
|
onMounted(() => {
|
||||||
|
dictStore.requestData(props.code as string);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div>{{ cValue }}</div>
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import ApiSelect from './api-select.vue';
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<ApiSelect />
|
||||||
|
</template>
|
||||||
153
apps/web-antd/src/components/view/components/api-select.vue
Normal file
153
apps/web-antd/src/components/view/components/api-select.vue
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted, type PropType, watch } from 'vue';
|
||||||
|
|
||||||
|
import { requestClient } from '#/api/request';
|
||||||
|
import { useDictStore } from '#/store/dict';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
code: {
|
||||||
|
type: String,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
// 值
|
||||||
|
type: [Boolean, String, Number, Array],
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
split: {
|
||||||
|
// 分割符
|
||||||
|
type: String,
|
||||||
|
default: ',',
|
||||||
|
},
|
||||||
|
join: {
|
||||||
|
// 连接符
|
||||||
|
type: String,
|
||||||
|
default: ',',
|
||||||
|
},
|
||||||
|
api: {
|
||||||
|
// 接口请求对象
|
||||||
|
type: [Function, String] as PropType<
|
||||||
|
((...arg: any) => Promise<any>) | String
|
||||||
|
>,
|
||||||
|
default() {
|
||||||
|
return () => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
resolve([]);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
params: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
cacheKey: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
requestMethod: {
|
||||||
|
type: String,
|
||||||
|
default: 'post',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const dictStore = useDictStore();
|
||||||
|
/**
|
||||||
|
* 获取包含的id
|
||||||
|
*/
|
||||||
|
const getIncludeIds = () => {
|
||||||
|
if (!props.value && props.value !== 0) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const arr: Array<any> = [];
|
||||||
|
if (Array.isArray(props.value)) {
|
||||||
|
arr.push(...props.value);
|
||||||
|
} else {
|
||||||
|
arr.push(...props.value.toString().split(props.split));
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 获取缓存key
|
||||||
|
*/
|
||||||
|
const getCacheKey = () => {
|
||||||
|
let cacheKey = props.cacheKey;
|
||||||
|
if (typeof props.api === 'string' && !cacheKey) {
|
||||||
|
cacheKey = props.api as string;
|
||||||
|
}
|
||||||
|
return cacheKey;
|
||||||
|
};
|
||||||
|
const cValue = computed(() => {
|
||||||
|
if (!props.value && props.value !== 0) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
const arr: Array<any> = getIncludeIds();
|
||||||
|
const cacheKey = getCacheKey();
|
||||||
|
const dictData = dictStore.getSelectData(cacheKey, {
|
||||||
|
...props.params,
|
||||||
|
includeType: 2,
|
||||||
|
includeIds: getIncludeIds(),
|
||||||
|
});
|
||||||
|
const res: Array<any> = [];
|
||||||
|
arr.forEach((item) => {
|
||||||
|
for (let i = 0; i < dictData.length; i++) {
|
||||||
|
if (dictData[i].value?.toString() === item?.toString()) {
|
||||||
|
res.push(dictData[i].label);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (i === dictData.length - 1) {
|
||||||
|
res.push(item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.join(props.join);
|
||||||
|
});
|
||||||
|
const requestData = () => {
|
||||||
|
const api: (...arg: any) => Promise<any> =
|
||||||
|
typeof props.api === 'string'
|
||||||
|
? (params: any) => {
|
||||||
|
return (requestClient as any)[props.requestMethod](
|
||||||
|
props.api as any,
|
||||||
|
params,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
: (props.api as (...arg: any) => Promise<any>);
|
||||||
|
const cacheKey = getCacheKey();
|
||||||
|
const params =
|
||||||
|
props.requestMethod === 'get'
|
||||||
|
? {
|
||||||
|
params: {
|
||||||
|
...props.params,
|
||||||
|
includeType: 2,
|
||||||
|
includeIds: getIncludeIds(),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
...props.params,
|
||||||
|
includeType: 2,
|
||||||
|
includeIds: getIncludeIds(),
|
||||||
|
};
|
||||||
|
dictStore.select(api, params, cacheKey);
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
requestData();
|
||||||
|
});
|
||||||
|
watch(
|
||||||
|
() => props.value,
|
||||||
|
() => {
|
||||||
|
requestData();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div>{{ cValue }}</div>
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped></style>
|
||||||
102
apps/web-antd/src/components/view/components/api-tree-select.vue
Normal file
102
apps/web-antd/src/components/view/components/api-tree-select.vue
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted, type PropType, ref } from 'vue';
|
||||||
|
|
||||||
|
import { requestClient } from '#/api/request';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
// 值
|
||||||
|
type: [String, Number, Array],
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
api: {
|
||||||
|
// 接口请求对象
|
||||||
|
type: [Function, String] as PropType<
|
||||||
|
((...arg: any) => Promise<any>) | String
|
||||||
|
>,
|
||||||
|
default() {
|
||||||
|
return () => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
resolve([]);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
params: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
cacheKey: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
requestMethod: {
|
||||||
|
type: String,
|
||||||
|
default: 'post',
|
||||||
|
},
|
||||||
|
valueField: {
|
||||||
|
type: String,
|
||||||
|
default: 'id',
|
||||||
|
},
|
||||||
|
labelField: {
|
||||||
|
type: String,
|
||||||
|
default: 'name',
|
||||||
|
},
|
||||||
|
multiple: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 分割符
|
||||||
|
split: {
|
||||||
|
type: String,
|
||||||
|
default: '/',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const currentData = ref([]);
|
||||||
|
const cValue = computed(() => {
|
||||||
|
return currentData.value
|
||||||
|
.map((item) => item[props.labelField])
|
||||||
|
.join(props.split);
|
||||||
|
});
|
||||||
|
onMounted(() => {
|
||||||
|
const api: (...arg: any) => Promise<any> =
|
||||||
|
typeof props.api === 'string'
|
||||||
|
? (params: any) => {
|
||||||
|
return (requestClient as any)[props.requestMethod](
|
||||||
|
props.api as any,
|
||||||
|
params,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
: (props.api as (...arg: any) => Promise<any>);
|
||||||
|
const searchType = props.multiple ? 'IN' : 'EQ';
|
||||||
|
const params =
|
||||||
|
props.requestMethod === 'get'
|
||||||
|
? {
|
||||||
|
params: {
|
||||||
|
...props.params,
|
||||||
|
[`m_${searchType}_${props.valueField}`]: props.value,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
...props.params,
|
||||||
|
[`m_${searchType}_${props.valueField}`]: props.value,
|
||||||
|
};
|
||||||
|
api(params).then((res) => {
|
||||||
|
if (res.length > 0) {
|
||||||
|
currentData.value = res;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div>{{ cValue }}</div>
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped></style>
|
||||||
14
apps/web-antd/src/components/view/components/avatar.vue
Normal file
14
apps/web-antd/src/components/view/components/avatar.vue
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Image } from 'ant-design-vue';
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Image v-if="value" :src="value" :width="102" />
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped></style>
|
||||||
22
apps/web-antd/src/components/view/components/icon-picker.vue
Normal file
22
apps/web-antd/src/components/view/components/icon-picker.vue
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Icon } from '#/components/icon';
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
});
|
||||||
|
defineProps({
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '16px',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Icon v-if="value" :icon="value" :size="size" />
|
||||||
|
<span v-else></span>
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import Select from './select.vue';
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Select />
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped></style>
|
||||||
35
apps/web-antd/src/components/view/components/select.vue
Normal file
35
apps/web-antd/src/components/view/components/select.vue
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
value: {
|
||||||
|
type: [String, Boolean, Number, Array],
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
join: {
|
||||||
|
// 连接符
|
||||||
|
type: String,
|
||||||
|
default: ',',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const cValue = computed(() => {
|
||||||
|
return Array.isArray(props.value)
|
||||||
|
? props.options
|
||||||
|
.filter((item: any) => (props.value as Array<any>).includes(item.value))
|
||||||
|
.map((item: any) => item.label)
|
||||||
|
.join(props.join)
|
||||||
|
: (
|
||||||
|
props.options.find(
|
||||||
|
(item: any) => item.value?.toString() === props.value?.toString(),
|
||||||
|
) as any
|
||||||
|
)?.label;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div>{{ cValue }}</div>
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped></style>
|
||||||
25
apps/web-antd/src/components/view/components/switch.vue
Normal file
25
apps/web-antd/src/components/view/components/switch.vue
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, type PropType } from 'vue';
|
||||||
|
|
||||||
|
import { Switch } from 'ant-design-vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
// 值
|
||||||
|
value: {
|
||||||
|
type: [String, Number, Boolean] as PropType<boolean | number | string>,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emit = defineEmits(['update:value']);
|
||||||
|
const mValue = computed({
|
||||||
|
get() {
|
||||||
|
return props.value;
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
emit('update:value', val);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Switch v-model:checked="mValue" :disabled="true" />
|
||||||
|
</template>
|
||||||
25
apps/web-antd/src/components/view/components/upload.vue
Normal file
25
apps/web-antd/src/components/view/components/upload.vue
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { PropType } from 'vue';
|
||||||
|
|
||||||
|
import { Upload } from '#/components/form';
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
inheritAttrs: false,
|
||||||
|
});
|
||||||
|
defineProps({
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
listType: {
|
||||||
|
type: String as PropType<'picture' | 'picture-card' | 'text'>,
|
||||||
|
default: 'text',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Upload :disabled="true" :list-type="listType" :value="value">
|
||||||
|
<template #default></template>
|
||||||
|
</Upload>
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -4,9 +4,9 @@ import type { NotificationItem } from '@vben/layouts';
|
|||||||
import { computed, ref, watch } from 'vue';
|
import { computed, ref, watch } from 'vue';
|
||||||
|
|
||||||
import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
|
import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
|
||||||
import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
|
// import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
|
||||||
import { useWatermark } from '@vben/hooks';
|
import { useWatermark } from '@vben/hooks';
|
||||||
import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
|
// import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
|
||||||
import {
|
import {
|
||||||
BasicLayout,
|
BasicLayout,
|
||||||
LockScreen,
|
LockScreen,
|
||||||
@@ -15,41 +15,42 @@ import {
|
|||||||
} from '@vben/layouts';
|
} from '@vben/layouts';
|
||||||
import { preferences } from '@vben/preferences';
|
import { preferences } from '@vben/preferences';
|
||||||
import { useAccessStore, useUserStore } from '@vben/stores';
|
import { useAccessStore, useUserStore } from '@vben/stores';
|
||||||
import { openWindow } from '@vben/utils';
|
// import { openWindow } from '@vben/utils';
|
||||||
|
|
||||||
import { $t } from '#/locales';
|
// import { $t } from '#/locales';
|
||||||
import { useAuthStore } from '#/store';
|
import { useAuthStore } from '#/store';
|
||||||
import LoginForm from '#/views/_core/authentication/login.vue';
|
import LoginForm from '#/views/_core/authentication/login.vue';
|
||||||
|
|
||||||
const notifications = ref<NotificationItem[]>([
|
const notifications = ref<NotificationItem[]>([
|
||||||
{
|
// TODO 通知列表
|
||||||
avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
|
// {
|
||||||
date: '3小时前',
|
// avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
|
||||||
isRead: true,
|
// date: '3小时前',
|
||||||
message: '描述信息描述信息描述信息',
|
// isRead: true,
|
||||||
title: '收到了 14 份新周报',
|
// message: '描述信息描述信息描述信息',
|
||||||
},
|
// title: '收到了 14 份新周报',
|
||||||
{
|
// },
|
||||||
avatar: 'https://avatar.vercel.sh/1',
|
// {
|
||||||
date: '刚刚',
|
// avatar: 'https://avatar.vercel.sh/1',
|
||||||
isRead: false,
|
// date: '刚刚',
|
||||||
message: '描述信息描述信息描述信息',
|
// isRead: false,
|
||||||
title: '朱偏右 回复了你',
|
// message: '描述信息描述信息描述信息',
|
||||||
},
|
// title: '朱偏右 回复了你',
|
||||||
{
|
// },
|
||||||
avatar: 'https://avatar.vercel.sh/1',
|
// {
|
||||||
date: '2024-01-01',
|
// avatar: 'https://avatar.vercel.sh/1',
|
||||||
isRead: false,
|
// date: '2024-01-01',
|
||||||
message: '描述信息描述信息描述信息',
|
// isRead: false,
|
||||||
title: '曲丽丽 评论了你',
|
// message: '描述信息描述信息描述信息',
|
||||||
},
|
// title: '曲丽丽 评论了你',
|
||||||
{
|
// },
|
||||||
avatar: 'https://avatar.vercel.sh/satori',
|
// {
|
||||||
date: '1天前',
|
// avatar: 'https://avatar.vercel.sh/satori',
|
||||||
isRead: false,
|
// date: '1天前',
|
||||||
message: '描述信息描述信息描述信息',
|
// isRead: false,
|
||||||
title: '代办提醒',
|
// message: '描述信息描述信息描述信息',
|
||||||
},
|
// title: '代办提醒',
|
||||||
|
// },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
@@ -61,33 +62,34 @@ const showDot = computed(() =>
|
|||||||
);
|
);
|
||||||
|
|
||||||
const menus = computed(() => [
|
const menus = computed(() => [
|
||||||
{
|
// TODO 后续放个人中心
|
||||||
handler: () => {
|
// {
|
||||||
openWindow(VBEN_DOC_URL, {
|
// handler: () => {
|
||||||
target: '_blank',
|
// openWindow(VBEN_DOC_URL, {
|
||||||
});
|
// target: '_blank',
|
||||||
},
|
// });
|
||||||
icon: BookOpenText,
|
// },
|
||||||
text: $t('ui.widgets.document'),
|
// icon: BookOpenText,
|
||||||
},
|
// text: $t('ui.widgets.document'),
|
||||||
{
|
// },
|
||||||
handler: () => {
|
// {
|
||||||
openWindow(VBEN_GITHUB_URL, {
|
// handler: () => {
|
||||||
target: '_blank',
|
// openWindow(VBEN_GITHUB_URL, {
|
||||||
});
|
// target: '_blank',
|
||||||
},
|
// });
|
||||||
icon: MdiGithub,
|
// },
|
||||||
text: 'GitHub',
|
// icon: MdiGithub,
|
||||||
},
|
// text: 'GitHub',
|
||||||
{
|
// },
|
||||||
handler: () => {
|
// {
|
||||||
openWindow(`${VBEN_GITHUB_URL}/issues`, {
|
// handler: () => {
|
||||||
target: '_blank',
|
// openWindow(`${VBEN_GITHUB_URL}/issues`, {
|
||||||
});
|
// target: '_blank',
|
||||||
},
|
// });
|
||||||
icon: CircleHelp,
|
// },
|
||||||
text: $t('ui.widgets.qa'),
|
// icon: CircleHelp,
|
||||||
},
|
// text: $t('ui.widgets.qa'),
|
||||||
|
// },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const avatar = computed(() => {
|
const avatar = computed(() => {
|
||||||
@@ -96,6 +98,7 @@ const avatar = computed(() => {
|
|||||||
|
|
||||||
async function handleLogout() {
|
async function handleLogout() {
|
||||||
await authStore.logout(false);
|
await authStore.logout(false);
|
||||||
|
destroyWatermark();
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleNoticeClear() {
|
function handleNoticeClear() {
|
||||||
@@ -110,7 +113,9 @@ watch(
|
|||||||
async (enable) => {
|
async (enable) => {
|
||||||
if (enable) {
|
if (enable) {
|
||||||
await updateWatermark({
|
await updateWatermark({
|
||||||
content: `${userStore.userInfo?.username}`,
|
// 这里更改水印内容
|
||||||
|
// content: `${userStore.userInfo?.nick_name || import.meta.env.VITE_APP_TITLE}`,
|
||||||
|
content: `${userStore.userInfo?.nick_name}\r\n${userStore.userInfo?.phone || import.meta.env.VITE_APP_TITLE}`,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
destroyWatermark();
|
destroyWatermark();
|
||||||
@@ -127,10 +132,10 @@ watch(
|
|||||||
<template #user-dropdown>
|
<template #user-dropdown>
|
||||||
<UserDropdown
|
<UserDropdown
|
||||||
:avatar
|
:avatar
|
||||||
|
:description="userStore.userInfo?.email"
|
||||||
:menus
|
:menus
|
||||||
:text="userStore.userInfo?.realName"
|
:tag-text="userStore.userInfo?.roles?.name"
|
||||||
description="ann.vben@gmail.com"
|
:text="userStore.userInfo?.nick_name"
|
||||||
tag-text="Pro"
|
|
||||||
@logout="handleLogout"
|
@logout="handleLogout"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -9,5 +9,43 @@ export const overridesPreferences = defineOverridesPreferences({
|
|||||||
// overrides
|
// overrides
|
||||||
app: {
|
app: {
|
||||||
name: import.meta.env.VITE_APP_TITLE,
|
name: import.meta.env.VITE_APP_TITLE,
|
||||||
|
layout: 'sidebar-mixed-nav',
|
||||||
|
// 登录过期模式
|
||||||
|
loginExpiredMode: 'modal',
|
||||||
|
// 权限模式 frontend 默认前端控制 backend 后端控制
|
||||||
|
accessMode: 'backend',
|
||||||
|
enableRefreshToken: true,
|
||||||
|
defaultAvatar:
|
||||||
|
'https://yanydy.oss-cn-hangzhou.aliyuncs.com/uploads/20241219/2b38e38414a2b9383b8643983e3f69d7.png',
|
||||||
|
watermark: true,
|
||||||
|
// 是否开启检查更新
|
||||||
|
enableCheckUpdates: true,
|
||||||
|
// 检查更新的时间间隔，单位为分钟
|
||||||
|
checkUpdatesInterval: 1,
|
||||||
|
version: '1.0.0',
|
||||||
|
},
|
||||||
|
sidebar: {
|
||||||
|
extraCollapse: false,
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
// enable: true,
|
||||||
|
// fixed: true,
|
||||||
|
},
|
||||||
|
logo: {
|
||||||
|
enable: true,
|
||||||
|
source:
|
||||||
|
// 'https://yanydy.oss-cn-hangzhou.aliyuncs.com/uploads/20241219/2b38e38414a2b9383b8643983e3f69d7.png',
|
||||||
|
'/img/logo.png',
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
mode: 'auto',
|
||||||
|
builtinType: 'sky-blue',
|
||||||
|
colorPrimary: 'hsl(231 98% 65%)',
|
||||||
|
},
|
||||||
|
copyright: {
|
||||||
|
companyName: '萧康云医',
|
||||||
|
companySiteLink: 'https://admin.xiaokang88.com',
|
||||||
|
icp: '浙ICP备19041368号-2',
|
||||||
|
icpLink: 'https://beian.miit.gov.cn/#/Integrated/recordQuery',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -93,7 +93,7 @@ function setupAccessGuard(router: Router) {
|
|||||||
// 生成路由表
|
// 生成路由表
|
||||||
// 当前登录用户拥有的角色标识列表
|
// 当前登录用户拥有的角色标识列表
|
||||||
const userInfo = userStore.userInfo || (await authStore.fetchUserInfo());
|
const userInfo = userStore.userInfo || (await authStore.fetchUserInfo());
|
||||||
const userRoles = userInfo.roles ?? [];
|
const userRoles = userInfo?.roles ?? [];
|
||||||
|
|
||||||
// 生成菜单和路由
|
// 生成菜单和路由
|
||||||
const { accessibleMenus, accessibleRoutes } = await generateAccess({
|
const { accessibleMenus, accessibleRoutes } = await generateAccess({
|
||||||
|
|||||||
@@ -1,30 +1,30 @@
|
|||||||
import type { RouteRecordRaw } from 'vue-router';
|
// import type { RouteRecordRaw } from 'vue-router';
|
||||||
|
//
|
||||||
import { BasicLayout } from '#/layouts';
|
// import { BasicLayout } from '#/layouts';
|
||||||
import { $t } from '#/locales';
|
// import { $t } from '#/locales';
|
||||||
|
//
|
||||||
const routes: RouteRecordRaw[] = [
|
// const routes: RouteRecordRaw[] = [
|
||||||
{
|
// {
|
||||||
component: BasicLayout,
|
// component: BasicLayout,
|
||||||
meta: {
|
// meta: {
|
||||||
icon: 'ic:baseline-view-in-ar',
|
// icon: 'ic:baseline-view-in-ar',
|
||||||
keepAlive: true,
|
// keepAlive: true,
|
||||||
order: 1000,
|
// order: 1000,
|
||||||
title: $t('demos.title'),
|
// title: $t('demos.title'),
|
||||||
},
|
// },
|
||||||
name: 'Demos',
|
// name: 'Demos',
|
||||||
path: '/demos',
|
// path: '/demos',
|
||||||
children: [
|
// children: [
|
||||||
{
|
// {
|
||||||
meta: {
|
// meta: {
|
||||||
title: $t('demos.antd'),
|
// title: $t('demos.antd'),
|
||||||
},
|
// },
|
||||||
name: 'AntDesignDemos',
|
// name: 'AntDesignDemos',
|
||||||
path: '/demos/ant-design',
|
// path: '/demos/ant-design',
|
||||||
component: () => import('#/views/demos/antd/index.vue'),
|
// component: () => import('#/views/demos/antd/index.vue'),
|
||||||
},
|
// },
|
||||||
],
|
// ],
|
||||||
},
|
// },
|
||||||
];
|
// ];
|
||||||
|
//
|
||||||
export default routes;
|
// export default routes;
|
||||||
|
|||||||
45
apps/web-antd/src/router/routes/modules/sys.ts
Normal file
45
apps/web-antd/src/router/routes/modules/sys.ts
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import type { RouteRecordRaw } from 'vue-router';
|
||||||
|
|
||||||
|
import { BasicLayout } from '#/layouts';
|
||||||
|
|
||||||
|
const routes: RouteRecordRaw[] = [
|
||||||
|
{
|
||||||
|
component: BasicLayout,
|
||||||
|
meta: {
|
||||||
|
icon: 'carbon:cics-system-group',
|
||||||
|
keepAlive: true,
|
||||||
|
order: 1000,
|
||||||
|
title: '基础管理',
|
||||||
|
},
|
||||||
|
name: 'System',
|
||||||
|
path: '/system',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
meta: {
|
||||||
|
title: '管理员管理',
|
||||||
|
},
|
||||||
|
name: 'SystemUser',
|
||||||
|
path: '/system/user',
|
||||||
|
component: () => import('#/views/system/admin/index.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
meta: {
|
||||||
|
title: '角色管理',
|
||||||
|
},
|
||||||
|
name: 'SystemRole',
|
||||||
|
path: '/system/role',
|
||||||
|
component: () => import('#/views/system/role/index.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
meta: {
|
||||||
|
title: '菜单管理',
|
||||||
|
},
|
||||||
|
name: 'SystemMenu',
|
||||||
|
path: '/system/menu',
|
||||||
|
component: () => import('#/views/system/menu/index.vue'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default routes;
|
||||||
350
apps/web-antd/src/util/tool.ts
Normal file
350
apps/web-antd/src/util/tool.ts
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
import type { VbenFormProps } from '#/adapter/form';
|
||||||
|
import type { DescItem } from '#/components/description';
|
||||||
|
|
||||||
|
import { isFunction } from '@vben/utils';
|
||||||
|
|
||||||
|
export const omit = (obj: any, keysToOmit: string[]) => {
|
||||||
|
// 如果 obj 不是对象或者 keysToOmit 不是数组，则直接返回 obj
|
||||||
|
if (typeof obj !== 'object' || !Array.isArray(keysToOmit)) {
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建一个新的对象，避免修改原始对象
|
||||||
|
const result = {} as any;
|
||||||
|
|
||||||
|
// 遍历 obj 的所有键值对
|
||||||
|
for (const key in obj) {
|
||||||
|
// 如果当前键不在要忽略的键列表中，则复制到新对象
|
||||||
|
if (!keysToOmit.includes(key)) {
|
||||||
|
result[key] = obj[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
export const get = (object: any, path: string) => {
|
||||||
|
// 如果 object 不是对象或者 path 不是字符串，则直接返回 defaultValue
|
||||||
|
if (
|
||||||
|
typeof object !== 'object' ||
|
||||||
|
object === null ||
|
||||||
|
typeof path !== 'string'
|
||||||
|
) {
|
||||||
|
return object;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 将路径字符串转换为数组
|
||||||
|
const pathArray = path.split('.').filter(Boolean); // 过滤掉空字符串
|
||||||
|
let current = object;
|
||||||
|
|
||||||
|
// 遍历路径数组
|
||||||
|
for (const element of pathArray) {
|
||||||
|
// 如果当前层级不是对象或没有对应的键，则返回 defaultValue
|
||||||
|
if (
|
||||||
|
typeof current !== 'object' ||
|
||||||
|
current === null ||
|
||||||
|
!(element in current)
|
||||||
|
) {
|
||||||
|
return object;
|
||||||
|
}
|
||||||
|
// 更新 current 到下一层级
|
||||||
|
current = current[element];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 返回最终找到的值
|
||||||
|
return current;
|
||||||
|
};
|
||||||
|
export const ifDetail = (renderCallbackParams: any): boolean => {
|
||||||
|
const schema = renderCallbackParams.schema;
|
||||||
|
if (isFunction(schema.ifDetail)) {
|
||||||
|
return schema.ifDetail(renderCallbackParams);
|
||||||
|
}
|
||||||
|
return schema.ifDetail !== false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将表单元数据转换为详情表单
|
||||||
|
* @param formOptions
|
||||||
|
* @param values
|
||||||
|
*/
|
||||||
|
export const schemaToDetailForm = (
|
||||||
|
formOptions: VbenFormProps,
|
||||||
|
values: any,
|
||||||
|
): DescItem[] => {
|
||||||
|
const group: Array<DescItem> = [];
|
||||||
|
const formSchemas = formOptions.schema;
|
||||||
|
if (!Array.isArray(formSchemas)) return group;
|
||||||
|
for (let i = 0; i < formSchemas.length; i++) {
|
||||||
|
const item = formSchemas[i];
|
||||||
|
// 找到分割线
|
||||||
|
if (item?.component === 'Divider') {
|
||||||
|
group.push({
|
||||||
|
field: item.fieldName,
|
||||||
|
label: item.label,
|
||||||
|
children: [],
|
||||||
|
} as unknown as DescItem);
|
||||||
|
// 将分割线后面的数据添加到group中
|
||||||
|
for (let j = i + 1; j < formSchemas.length; j++) {
|
||||||
|
const nextItem = formSchemas[j];
|
||||||
|
// 找到下面的分割线
|
||||||
|
if (nextItem?.component === 'Divider') {
|
||||||
|
// 中断
|
||||||
|
i = j - 1;
|
||||||
|
break;
|
||||||
|
} else {
|
||||||
|
if (
|
||||||
|
ifDetail({
|
||||||
|
schema: nextItem,
|
||||||
|
values,
|
||||||
|
model: values,
|
||||||
|
field: item.fieldName,
|
||||||
|
})
|
||||||
|
) {
|
||||||
|
group[group.length - 1]?.children?.push({
|
||||||
|
field: nextItem?.fieldName,
|
||||||
|
label: nextItem?.label,
|
||||||
|
span: nextItem?.detailSpan || 12,
|
||||||
|
component: nextItem?.component,
|
||||||
|
componentProps: nextItem?.componentProps,
|
||||||
|
} as DescItem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (group.length > 0) {
|
||||||
|
return group;
|
||||||
|
}
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
field: 'baseinfo',
|
||||||
|
label: '基本信息',
|
||||||
|
children: formSchemas
|
||||||
|
.filter((item) => {
|
||||||
|
return ifDetail({
|
||||||
|
schema: item,
|
||||||
|
values,
|
||||||
|
model: values,
|
||||||
|
field: item.fieldName,
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.map((item) => {
|
||||||
|
return {
|
||||||
|
field: item.fieldName,
|
||||||
|
label: item.label,
|
||||||
|
span: item.detailSpan || 12,
|
||||||
|
component: item.component,
|
||||||
|
componentProps: item.componentProps,
|
||||||
|
} as DescItem;
|
||||||
|
}),
|
||||||
|
} as DescItem,
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取子节点id
|
||||||
|
export const getChildIds = (record: any) => {
|
||||||
|
const ids = [record.id];
|
||||||
|
record.children?.forEach((item: any) => {
|
||||||
|
ids.push(...getChildIds(item));
|
||||||
|
});
|
||||||
|
return ids;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取所有叶子节点
|
||||||
|
* @param treeData
|
||||||
|
*/
|
||||||
|
export const getLeafNodeIds = (treeData: any) => {
|
||||||
|
const leafNodeIds: any = [];
|
||||||
|
|
||||||
|
function traverse(node: any) {
|
||||||
|
// 如果当前节点没有 children 或 children 是空数组，则它是叶子节点
|
||||||
|
if (!node.children || node.children.length === 0) {
|
||||||
|
leafNodeIds.push(node.id);
|
||||||
|
} else {
|
||||||
|
// 否则，递归遍历每个子节点
|
||||||
|
for (const child of node.children) {
|
||||||
|
traverse(child);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 遍历树的根节点
|
||||||
|
for (const root of treeData) {
|
||||||
|
traverse(root);
|
||||||
|
}
|
||||||
|
return leafNodeIds;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取所有节点id
|
||||||
|
* @param treeData
|
||||||
|
*/
|
||||||
|
export const getAllNodeIds = (treeData: any) => {
|
||||||
|
const allNodeIds: any = [];
|
||||||
|
|
||||||
|
function traverse(node: any) {
|
||||||
|
// 收集当前节点的 id
|
||||||
|
allNodeIds.push(node.id);
|
||||||
|
|
||||||
|
// 如果当前节点有 children，则递归遍历每个子节点
|
||||||
|
if (node.children && node.children.length > 0) {
|
||||||
|
for (const child of node.children) {
|
||||||
|
traverse(child);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 遍历树的根节点
|
||||||
|
for (const root of treeData) {
|
||||||
|
traverse(root);
|
||||||
|
}
|
||||||
|
|
||||||
|
return allNodeIds;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* -转大驼峰
|
||||||
|
* @param str
|
||||||
|
*/
|
||||||
|
export const toPascalCase = (str: any) => {
|
||||||
|
// 将连字符或下划线替换为空格，以便后续处理
|
||||||
|
const words = str.replaceAll(/[-_]/g, ' ').split(' ');
|
||||||
|
|
||||||
|
// 将每个单词的首字母大写，并将其余部分保持原样
|
||||||
|
const pascalCaseWords = words.map((word: any) => {
|
||||||
|
if (word) {
|
||||||
|
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
|
||||||
|
}
|
||||||
|
return word;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 将处理后的单词拼接成一个新的字符串
|
||||||
|
return pascalCaseWords.join('');
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 转-kebab
|
||||||
|
*/
|
||||||
|
export const toKebabCase = (str: string) => {
|
||||||
|
// 将每个单词的首字母小写，并在单词之间插入连字符
|
||||||
|
return str
|
||||||
|
.replaceAll(/([A-Z])/g, (match, _p1, offset) => {
|
||||||
|
// 如果是第一个字符，直接转为小写
|
||||||
|
if (offset === 0) {
|
||||||
|
return match.toLowerCase();
|
||||||
|
}
|
||||||
|
// 否则，在大写字母前加上连字符，并将大写字母转为小写
|
||||||
|
return `-${match.toLowerCase()}`;
|
||||||
|
})
|
||||||
|
.toLowerCase(); // 确保整个字符串都是小写
|
||||||
|
};
|
||||||
|
|
||||||
|
export function getFileNameWithoutExtension(path: string) {
|
||||||
|
// 使用正则表达式匹配最后一个 / 后面的所有字符，但不包括最后一个点（.）之后的内容
|
||||||
|
const match = path.match(/[^/]+(?=\.[^./]+$|$)/);
|
||||||
|
return match ? match[0].replace(/\.[^/.]+$/, '') : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 数据脱敏
|
||||||
|
* @param data
|
||||||
|
* @param type
|
||||||
|
*/
|
||||||
|
export function desensitize(data: string, type: 'bankCard' | 'idCard'): string {
|
||||||
|
if (!data) return '';
|
||||||
|
|
||||||
|
switch (type) {
|
||||||
|
case 'bankCard': {
|
||||||
|
// 银行卡号脱敏规则：显示前6位和后4位，中间用*代替
|
||||||
|
if (data.length < 12) {
|
||||||
|
throw new Error('Invalid bank card number length');
|
||||||
|
}
|
||||||
|
return data.slice(0, 6) + '*'.repeat(data.length - 10) + data.slice(-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'idCard': {
|
||||||
|
// 身份证号脱敏规则：显示前6位和后4位，中间用*代替
|
||||||
|
if (data.length !== 18) {
|
||||||
|
throw new Error('Invalid ID card number length');
|
||||||
|
}
|
||||||
|
return data.slice(0, 6) + '*'.repeat(10) + data.slice(-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
default: {
|
||||||
|
throw new Error('Unsupported desensitization type');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取操作系统的Icon
|
||||||
|
* @param str
|
||||||
|
*/
|
||||||
|
export function getIcon(str: string) {
|
||||||
|
switch (str) {
|
||||||
|
case 'Api Post': {
|
||||||
|
return 'logos:async-api-icon';
|
||||||
|
}
|
||||||
|
case 'Chrome': {
|
||||||
|
return 'devicon:chrome';
|
||||||
|
}
|
||||||
|
case 'Edge':
|
||||||
|
case 'Microsoft Edge': {
|
||||||
|
return 'logos:microsoft-edge';
|
||||||
|
}
|
||||||
|
case 'Firefox': {
|
||||||
|
return 'devicon:firefox';
|
||||||
|
}
|
||||||
|
case 'Linux': {
|
||||||
|
return 'logos:linux-tux';
|
||||||
|
}
|
||||||
|
case 'Mac': {
|
||||||
|
return 'wpf:mac-os';
|
||||||
|
}
|
||||||
|
case 'Safari': {
|
||||||
|
return 'devicon:safari';
|
||||||
|
}
|
||||||
|
case 'Windows': {
|
||||||
|
return 'logos:microsoft-windows-icon';
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
return 'logos:microsoft-windows-icon';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取接诊状态
|
||||||
|
* @param status
|
||||||
|
*/
|
||||||
|
export function getRegisterStatus(status: number) {
|
||||||
|
switch (status) {
|
||||||
|
case 0: {
|
||||||
|
return '待支付';
|
||||||
|
}
|
||||||
|
case 1: {
|
||||||
|
return '待接诊';
|
||||||
|
}
|
||||||
|
case 2: {
|
||||||
|
return '接诊中';
|
||||||
|
}
|
||||||
|
case 3: {
|
||||||
|
return '已结束';
|
||||||
|
}
|
||||||
|
case 4: {
|
||||||
|
return '已取消';
|
||||||
|
}
|
||||||
|
case 5: {
|
||||||
|
return '待评价';
|
||||||
|
}
|
||||||
|
case 6: {
|
||||||
|
return '已评价';
|
||||||
|
}
|
||||||
|
case 7: {
|
||||||
|
return '已拒诊';
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
return '未知状态';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -33,11 +33,9 @@ const formSchema = computed((): VbenFormSchema[] => {
|
|||||||
componentProps: {
|
componentProps: {
|
||||||
codeLength: CODE_LENGTH,
|
codeLength: CODE_LENGTH,
|
||||||
createText: (countdown: number) => {
|
createText: (countdown: number) => {
|
||||||
const text =
|
return countdown > 0
|
||||||
countdown > 0
|
|
||||||
? $t('authentication.sendText', [countdown])
|
? $t('authentication.sendText', [countdown])
|
||||||
: $t('authentication.sendCode');
|
: $t('authentication.sendCode');
|
||||||
return text;
|
|
||||||
},
|
},
|
||||||
placeholder: $t('authentication.code'),
|
placeholder: $t('authentication.code'),
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,18 +1,24 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { VbenFormSchema } from '@vben/common-ui';
|
|
||||||
import type { BasicOption } from '@vben/types';
|
import type { BasicOption } from '@vben/types';
|
||||||
|
|
||||||
import { computed, markRaw } from 'vue';
|
import { computed, markRaw, ref, useTemplateRef } from 'vue';
|
||||||
|
|
||||||
|
import { AuthenticationCodeLogin, type VbenFormSchema } from '@vben/common-ui';
|
||||||
import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
|
import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
|
||||||
import { $t } from '@vben/locales';
|
import { $t } from '@vben/locales';
|
||||||
|
|
||||||
|
import { sendVerificationCode } from '#/api';
|
||||||
import { useAuthStore } from '#/store';
|
import { useAuthStore } from '#/store';
|
||||||
|
import {message} from "ant-design-vue";
|
||||||
|
|
||||||
defineOptions({ name: 'Login' });
|
defineOptions({ name: 'Login' });
|
||||||
|
|
||||||
|
const loginRef =
|
||||||
|
useTemplateRef<InstanceType<typeof AuthenticationCodeLogin>>('loginRef');
|
||||||
const authStore = useAuthStore();
|
const authStore = useAuthStore();
|
||||||
|
const CODE_LENGTH = 6;
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
const MOCK_USER_OPTIONS: BasicOption[] = [
|
const MOCK_USER_OPTIONS: BasicOption[] = [
|
||||||
{
|
{
|
||||||
label: 'Super',
|
label: 'Super',
|
||||||
@@ -30,7 +36,7 @@ const MOCK_USER_OPTIONS: BasicOption[] = [
|
|||||||
|
|
||||||
const formSchema = computed((): VbenFormSchema[] => {
|
const formSchema = computed((): VbenFormSchema[] => {
|
||||||
return [
|
return [
|
||||||
{
|
/* {
|
||||||
component: 'VbenSelect',
|
component: 'VbenSelect',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
options: MOCK_USER_OPTIONS,
|
options: MOCK_USER_OPTIONS,
|
||||||
@@ -43,7 +49,7 @@ const formSchema = computed((): VbenFormSchema[] => {
|
|||||||
.min(1, { message: $t('authentication.selectAccount') })
|
.min(1, { message: $t('authentication.selectAccount') })
|
||||||
.optional()
|
.optional()
|
||||||
.default('vben'),
|
.default('vben'),
|
||||||
},
|
},*/
|
||||||
{
|
{
|
||||||
component: 'VbenInput',
|
component: 'VbenInput',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
@@ -57,8 +63,8 @@ const formSchema = computed((): VbenFormSchema[] => {
|
|||||||
);
|
);
|
||||||
if (findUser) {
|
if (findUser) {
|
||||||
form.setValues({
|
form.setValues({
|
||||||
password: '123456',
|
password: 'qiqi991012',
|
||||||
username: findUser.value,
|
username: '15100000000',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -67,7 +73,12 @@ const formSchema = computed((): VbenFormSchema[] => {
|
|||||||
},
|
},
|
||||||
fieldName: 'username',
|
fieldName: 'username',
|
||||||
label: $t('authentication.username'),
|
label: $t('authentication.username'),
|
||||||
rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
|
rules: z
|
||||||
|
.string()
|
||||||
|
.min(1, { message: $t('authentication.mobileTip') })
|
||||||
|
.refine((v) => /^\d{11}$/.test(v), {
|
||||||
|
message: $t('authentication.mobileErrortip'),
|
||||||
|
}),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
component: 'VbenInputPassword',
|
component: 'VbenInputPassword',
|
||||||
@@ -77,6 +88,53 @@ const formSchema = computed((): VbenFormSchema[] => {
|
|||||||
fieldName: 'password',
|
fieldName: 'password',
|
||||||
label: $t('authentication.password'),
|
label: $t('authentication.password'),
|
||||||
rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
|
rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
|
||||||
|
/* .regex(
|
||||||
|
/^(?=.*[A-Z0-9])(?=.*[!@#$%^&*])[A-Z0-9!@#$%^&*]{5,18}$/i,
|
||||||
|
'密码由5-18位数字、字母、特殊字符组成。',
|
||||||
|
)*/
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'VbenPinInput',
|
||||||
|
componentProps: {
|
||||||
|
codeLength: CODE_LENGTH,
|
||||||
|
createText: (countdown: number) => {
|
||||||
|
return countdown > 0
|
||||||
|
? $t('authentication.sendText', [countdown])
|
||||||
|
: $t('authentication.sendCode');
|
||||||
|
},
|
||||||
|
placeholder: $t('authentication.code'),
|
||||||
|
handleSendCode: async () => {
|
||||||
|
// 模拟发送验证码
|
||||||
|
// Simulate sending verification code
|
||||||
|
loading.value = true;
|
||||||
|
const formApi = loginRef.value?.getFormApi();
|
||||||
|
if (!formApi) {
|
||||||
|
loading.value = false;
|
||||||
|
throw new Error('formApi is not ready');
|
||||||
|
}
|
||||||
|
await formApi.validateField('username');
|
||||||
|
const isPhoneReady = await formApi.isFieldValid('username');
|
||||||
|
if (!isPhoneReady) {
|
||||||
|
loading.value = false;
|
||||||
|
throw new Error('Phone number is not Ready');
|
||||||
|
}
|
||||||
|
const password = await formApi.isFieldValid('password');
|
||||||
|
if (!password) {
|
||||||
|
loading.value = false;
|
||||||
|
throw new Error('密码不符合要求 number is not Ready');
|
||||||
|
}
|
||||||
|
const { username } = await formApi.getValues();
|
||||||
|
// 验证username的手机号格式
|
||||||
|
await sendVerificationCode(username);
|
||||||
|
loading.value = false;
|
||||||
|
message.success('发送成功，请注意查收');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fieldName: 'code',
|
||||||
|
label: $t('authentication.code'),
|
||||||
|
rules: z.string().length(CODE_LENGTH, {
|
||||||
|
message: $t('authentication.codeTip', [CODE_LENGTH]),
|
||||||
|
}),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
component: markRaw(SliderCaptcha),
|
component: markRaw(SliderCaptcha),
|
||||||
@@ -91,8 +149,15 @@ const formSchema = computed((): VbenFormSchema[] => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<AuthenticationLogin
|
<AuthenticationLogin
|
||||||
|
ref="loginRef"
|
||||||
:form-schema="formSchema"
|
:form-schema="formSchema"
|
||||||
:loading="authStore.loginLoading"
|
:loading="authStore.loginLoading"
|
||||||
|
:show-code-login="false"
|
||||||
|
:show-forget-password="false"
|
||||||
|
:show-qrcode-login="false"
|
||||||
|
:show-register="false"
|
||||||
|
:show-remember-me="false"
|
||||||
|
:show-third-party-login="false"
|
||||||
@submit="authStore.authLogin"
|
@submit="authStore.authLogin"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -0,0 +1,49 @@
|
|||||||
|
import { requestClient } from '#/api/request';
|
||||||
|
const prefix = 'express-companies/';
|
||||||
|
/**
|
||||||
|
* 分页查询用户列表
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function getExpressCompaniesList(data: any) {
|
||||||
|
return requestClient.get<any>(`${prefix}list`, { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 分页查询用户列表
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function getExpressCompaniesOption(data: any) {
|
||||||
|
return requestClient.get<any>(`${prefix}option`, { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取快递公司详情
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
export async function getExpressCompaniesInfo(id: number) {
|
||||||
|
return requestClient.get<any>(`${prefix}detail`, { params: { id } });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增快递公司
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function createExpressCompanies(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}create`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编辑快递公司
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function updateExpressCompanies(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}update`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除快递公司
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function deleteExpressCompanies(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}delete`, data);
|
||||||
|
}
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { useVbenForm } from '#/adapter/form';
|
||||||
|
|
||||||
|
import { createExpressCompanies, updateExpressCompanies } from '../api';
|
||||||
|
import { modalFormProps } from '../config/form';
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'FormModelDemo',
|
||||||
|
});
|
||||||
|
|
||||||
|
const isUpdate = ref(false);
|
||||||
|
const gridApi = ref();
|
||||||
|
|
||||||
|
const [Form, formApi] = useVbenForm(modalFormProps);
|
||||||
|
|
||||||
|
const [Modal, modalApi] = useVbenModal({
|
||||||
|
fullscreenButton: false,
|
||||||
|
draggable: true,
|
||||||
|
onCancel() {
|
||||||
|
modalApi.close();
|
||||||
|
},
|
||||||
|
onConfirm: async () => {
|
||||||
|
formApi.validate().then(async (e: any) => {
|
||||||
|
if (e.valid) {
|
||||||
|
const values = await formApi.getValues();
|
||||||
|
modalApi.setState({ loading: true, confirmLoading: true });
|
||||||
|
const submitApi = isUpdate.value
|
||||||
|
? updateExpressCompanies
|
||||||
|
: createExpressCompanies;
|
||||||
|
submitApi(values)
|
||||||
|
.then(() => {
|
||||||
|
message.success('保存成功');
|
||||||
|
gridApi.value?.reload();
|
||||||
|
modalApi.close();
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
modalApi.setState({ loading: false, confirmLoading: false });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
await formApi.validateAndSubmitForm();
|
||||||
|
},
|
||||||
|
onOpenChange(isOpen: boolean) {
|
||||||
|
gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
|
||||||
|
if (isOpen) {
|
||||||
|
const { values, update } = modalApi.getData<Record<string, any>>();
|
||||||
|
if (values) {
|
||||||
|
isUpdate.value = update;
|
||||||
|
formApi.setValues(values);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Modal :title="`${isUpdate === true ? '编辑' : '新增'}快递公司`" class="w-[30%]">
|
||||||
|
<Form />
|
||||||
|
</Modal>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
import type { VbenFormProps } from '#/adapter/form';
|
||||||
|
|
||||||
|
export const modalFormProps: VbenFormProps = {
|
||||||
|
wrapperClass: 'grid-cols-12', // 24栅格,
|
||||||
|
commonConfig: {
|
||||||
|
formItemClass: 'col-span-12',
|
||||||
|
// 所有表单项
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// handleSubmit: onSubmit,
|
||||||
|
layout: 'horizontal',
|
||||||
|
schema: [
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
fieldName: 'id',
|
||||||
|
label: 'ID',
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
dependencies: {
|
||||||
|
show: false,
|
||||||
|
triggerFields: ['id'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入快递公司昵称',
|
||||||
|
},
|
||||||
|
fieldName: 'name',
|
||||||
|
label: '快递公司名称',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入快递公司编码',
|
||||||
|
},
|
||||||
|
fieldName: 'code',
|
||||||
|
label: '快递公司编码',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入快递公司类型',
|
||||||
|
},
|
||||||
|
fieldName: 'type',
|
||||||
|
label: '快递公司类型',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// component: 'Avatar',
|
||||||
|
// fieldName: 'logo',
|
||||||
|
// label: 'LOGO',
|
||||||
|
// rules: 'required',
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
component: 'Textarea',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入快递公司介绍',
|
||||||
|
},
|
||||||
|
fieldName: 'introduce',
|
||||||
|
label: '快递公司介绍',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
showDefaultActions: false,
|
||||||
|
};
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import type { VbenFormProps } from '#/adapter/form';
|
||||||
|
|
||||||
|
// import dayjs from 'dayjs';
|
||||||
|
|
||||||
|
export const formOptions: VbenFormProps = {
|
||||||
|
// 默认展开
|
||||||
|
collapsed: false,
|
||||||
|
schema: [
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '输入名称',
|
||||||
|
},
|
||||||
|
defaultValue: '',
|
||||||
|
fieldName: 'name',
|
||||||
|
label: '快递公司名称',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// component: 'RangePicker',
|
||||||
|
// componentProps: {
|
||||||
|
// format: 'YYYY-MM-DD', // 确保格式与你需要的一致
|
||||||
|
// },
|
||||||
|
// // defaultValue: [dayjs().startOf('month'), dayjs()],
|
||||||
|
// fieldName: 'search_time',
|
||||||
|
// label: '时间范围',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
// 控制表单是否显示折叠按钮
|
||||||
|
showCollapseButton: true,
|
||||||
|
submitButtonOptions: {
|
||||||
|
content: '查询',
|
||||||
|
},
|
||||||
|
// 是否在字段值改变时提交表单
|
||||||
|
submitOnChange: true,
|
||||||
|
// 按下回车时是否提交表单
|
||||||
|
submitOnEnter: false,
|
||||||
|
};
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import { getExpressCompaniesList } from '../api';
|
||||||
|
|
||||||
|
interface RowType {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
logo: string;
|
||||||
|
introduce: string;
|
||||||
|
created_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const gridOptions: VxeGridProps<RowType> = {
|
||||||
|
checkboxConfig: {
|
||||||
|
highlight: true,
|
||||||
|
labelField: '',
|
||||||
|
},
|
||||||
|
columnConfig: {
|
||||||
|
useKey: true,
|
||||||
|
},
|
||||||
|
rowConfig: {
|
||||||
|
useKey: true,
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{ type: 'checkbox', width: 60 },
|
||||||
|
{ field: 'id', align: 'left', title: 'ID', width: 100 },
|
||||||
|
{ field: 'name', align: 'left', title: '快递公司每次' },
|
||||||
|
{ field: 'code', title: '快递公司编码' },
|
||||||
|
{ field: 'type', title: '快递公司类型' },
|
||||||
|
{ field: 'created_at', title: '上传时间' },
|
||||||
|
{ type: 'html', title: '操作', slots: { default: 'action' } },
|
||||||
|
],
|
||||||
|
keepSource: true,
|
||||||
|
pagerConfig: {},
|
||||||
|
proxyConfig: {
|
||||||
|
ajax: {
|
||||||
|
// 请求后端接口方法
|
||||||
|
query: async ({ page }, formValues) => {
|
||||||
|
return await getExpressCompaniesList({
|
||||||
|
page: page.currentPage,
|
||||||
|
pageSize: page.pageSize,
|
||||||
|
...formValues,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
height: 'auto',
|
||||||
|
border: false,
|
||||||
|
toolbarConfig: {
|
||||||
|
// 是否显示搜索表单控制按钮
|
||||||
|
// @ts-ignore 正式环境时有完整的类型声明
|
||||||
|
search: true,
|
||||||
|
refresh: true, // 刷新
|
||||||
|
print: false, // 打印
|
||||||
|
export: false, // 导出
|
||||||
|
// custom: true, // 自定义列
|
||||||
|
zoom: true, // 最大化最小化
|
||||||
|
slots: {
|
||||||
|
buttons: 'toolbar-buttons',
|
||||||
|
},
|
||||||
|
custom: {
|
||||||
|
// 自定义列-图标
|
||||||
|
icon: 'vxe-icon-menu',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
showOverflow: false,
|
||||||
|
};
|
||||||
@@ -0,0 +1,155 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { VxeGridListeners } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { Page, useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { Button, Image, message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||||
|
import { TableAction } from '#/components/table-action';
|
||||||
|
|
||||||
|
import { deleteExpressCompanies } from './api';
|
||||||
|
import FormModalDemo from './components/modal.vue';
|
||||||
|
import { formOptions } from './config/search';
|
||||||
|
import { gridOptions } from './config/table';
|
||||||
|
|
||||||
|
const hasTopTableDropDownActions = ref(false);
|
||||||
|
|
||||||
|
const gridEvents: VxeGridListeners<any> = {
|
||||||
|
checkboxChange() {
|
||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
const records = gridApi.grid.getCheckboxRecords();
|
||||||
|
hasTopTableDropDownActions.value = records.length > 0;
|
||||||
|
},
|
||||||
|
checkboxAll() {
|
||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
const records = gridApi.grid.getCheckboxRecords();
|
||||||
|
hasTopTableDropDownActions.value = records.length > 0;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const [Grid, gridApi] = useVbenVxeGrid({
|
||||||
|
formOptions,
|
||||||
|
gridOptions,
|
||||||
|
gridEvents,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [FormModal, formModalApi] = useVbenModal({
|
||||||
|
connectedComponent: FormModalDemo,
|
||||||
|
});
|
||||||
|
|
||||||
|
const showModal = (data = {}, isUpdate = false) => {
|
||||||
|
formModalApi.setData({
|
||||||
|
// 表单值
|
||||||
|
values: data,
|
||||||
|
update: isUpdate,
|
||||||
|
gridApi,
|
||||||
|
});
|
||||||
|
formModalApi.open();
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteApi = (row: any) => {
|
||||||
|
let ids = [];
|
||||||
|
if (row) {
|
||||||
|
ids.push(row);
|
||||||
|
} else {
|
||||||
|
ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
|
||||||
|
}
|
||||||
|
deleteExpressCompanies({ ids }).then(() => {
|
||||||
|
message.success('删除成功!');
|
||||||
|
gridApi.reload();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Page auto-content-height title="快递公司管理">
|
||||||
|
<FormModal />
|
||||||
|
<Grid>
|
||||||
|
<template #toolbar-buttons>
|
||||||
|
<TableAction
|
||||||
|
:actions="[
|
||||||
|
{
|
||||||
|
label: '新增',
|
||||||
|
type: 'primary',
|
||||||
|
icon: 'ant-design:plus-outlined',
|
||||||
|
// auth: ['超级快递公司', 'sys:user:save'],
|
||||||
|
onClick: showModal.bind(null),
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:drop-down-actions="[
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
icon: 'ant-design:delete-outlined',
|
||||||
|
ifShow: hasTopTableDropDownActions,
|
||||||
|
// auth: ['超级快递公司', 'sys:user:save'],
|
||||||
|
popConfirm: {
|
||||||
|
title: '确定删除吗？',
|
||||||
|
confirm: deleteApi.bind(null, false),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template #more>
|
||||||
|
<Button style="margin-left: 16px">
|
||||||
|
批量操作
|
||||||
|
<Icon icon="ant-design:down-outlined" />
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</TableAction>
|
||||||
|
</template>
|
||||||
|
<template #logo="{ row }">
|
||||||
|
<Image :src="row.logo" height="30" width="30" />
|
||||||
|
</template>
|
||||||
|
<template #toolbar-tools></template>
|
||||||
|
<template #action="{ row }">
|
||||||
|
<TableAction
|
||||||
|
:actions="[
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
type: 'link',
|
||||||
|
icon: 'uil:edit',
|
||||||
|
size: 'small',
|
||||||
|
// auth: ['express-companies', 'sys:role:detail'],
|
||||||
|
onClick: showModal.bind(null, row, true),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
type: 'link',
|
||||||
|
icon: 'ant-design:delete-outlined',
|
||||||
|
size: 'small',
|
||||||
|
// auth: ['express-companies', 'sys:role:detail'],
|
||||||
|
popConfirm: {
|
||||||
|
title: '确定删除吗？',
|
||||||
|
confirm: deleteApi.bind(null, row.id),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:drop-down-actions="[
|
||||||
|
// {
|
||||||
|
// label: '编辑',
|
||||||
|
// type: 'link',
|
||||||
|
// icon: 'ant-design:delete-outlined',
|
||||||
|
// size: 'small',
|
||||||
|
// // auth: ['express-companies', 'sys:role:detail'],
|
||||||
|
// onClick: showModal.bind(null, row, true),
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: '删除',
|
||||||
|
// type: 'link',
|
||||||
|
// icon: 'ant-design:delete-outlined',
|
||||||
|
// size: 'small',
|
||||||
|
// // auth: ['express-companies', 'sys:role:detail'],
|
||||||
|
// popConfirm: {
|
||||||
|
// title: '确定删除吗？',
|
||||||
|
// confirm: deleteApi.bind(null, row.id),
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</Grid>
|
||||||
|
</Page>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
import { requestClient } from '#/api/request';
|
||||||
|
|
||||||
|
const prefix = 'order/';
|
||||||
|
/**
|
||||||
|
* 分页查询用户列表
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function getOrderList(data: any) {
|
||||||
|
return requestClient.get<any>(`${prefix}list`, { params: data });
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 分页查询用户列表
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function getOrderStatusOption(data: any) {
|
||||||
|
return requestClient.get<any>(`${prefix}status-option`, { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取订单详情
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
export async function getOrderInfo(id: number) {
|
||||||
|
return requestClient.get<any>(`${prefix}detail`, { params: { id } });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增订单
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function createOrder(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}create`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编辑订单
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function updateOrder(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}update`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除订单
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function deleteOrder(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}delete`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 订单发货
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function sendOrder(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}ware-send`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 订单物流追踪
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function expressDetailByOrderId(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`express-detail/detail-by-order`, data);
|
||||||
|
}
|
||||||
@@ -0,0 +1,275 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { Card, Descriptions, Image, Tag, Timeline } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { expressDetailByOrderId } from '../api';
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'DetailModal',
|
||||||
|
});
|
||||||
|
|
||||||
|
const gridApi = ref();
|
||||||
|
// 订单信息
|
||||||
|
const data = ref({});
|
||||||
|
// 快递信息
|
||||||
|
const expressDetail = ref({});
|
||||||
|
// 订单发货方式
|
||||||
|
const deliveryMethod = ref(-1);
|
||||||
|
|
||||||
|
const [Modal, modalApi] = useVbenModal({
|
||||||
|
fullscreenButton: false,
|
||||||
|
draggable: true,
|
||||||
|
onCancel() {
|
||||||
|
modalApi.close();
|
||||||
|
},
|
||||||
|
onConfirm: async () => {
|
||||||
|
modalApi.close();
|
||||||
|
},
|
||||||
|
onOpenChange(isOpen: boolean) {
|
||||||
|
gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
|
||||||
|
if (isOpen) {
|
||||||
|
const { values } = modalApi.getData<Record<string, any>>();
|
||||||
|
if (values) {
|
||||||
|
data.value = values;
|
||||||
|
deliveryMethod.value = data.value.delivery_method;
|
||||||
|
getExpressDetail();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
async function getExpressDetail() {
|
||||||
|
expressDetail.value = await expressDetailByOrderId({
|
||||||
|
order_id: data.value.id,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取物流信息标签颜色
|
||||||
|
* @param status
|
||||||
|
*/
|
||||||
|
function getColor(status: any) {
|
||||||
|
switch (status) {
|
||||||
|
case '在途': {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
case '揽收': {
|
||||||
|
return 'orange';
|
||||||
|
}
|
||||||
|
case '派件': {
|
||||||
|
return 'blue';
|
||||||
|
}
|
||||||
|
case '签收': {
|
||||||
|
return 'green';
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Modal class="w-[80%]" title="订单详情">
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<h3 class="mt-4">订单信息</h3>
|
||||||
|
<Descriptions
|
||||||
|
:column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
|
||||||
|
bordered
|
||||||
|
class="mt-4"
|
||||||
|
>
|
||||||
|
<Descriptions.Item label="订单号">
|
||||||
|
{{ data.order_no }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="订单类型">
|
||||||
|
{{ data.order_type === 1 ? '普通订单' : '其他' }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="总支付价格">
|
||||||
|
{{ data.total_pay_price }} 元
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="物品总价">
|
||||||
|
{{ data.items_price }} 元
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="市场价">
|
||||||
|
{{ data.market_price }} 元
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="运费">
|
||||||
|
{{ data.trans_expenses }} 元
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="是否免邮">
|
||||||
|
{{ data.free_ship === 1 ? '是' : '否' }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="状态">
|
||||||
|
{{ data.status === 0 ? '待处理' : '已处理' }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="配送方式">
|
||||||
|
{{ deliveryMethod === 0 ? '快递到家' : '药店自提' }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="患者">{{ data.patient }}</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="医生">
|
||||||
|
{{ data.doctor.name }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="处方来源">
|
||||||
|
{{ data.store.name }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
|
||||||
|
<div class="mt-4">
|
||||||
|
<h3>{{ deliveryMethod === 0 ? '收货人' : '就诊人' }}信息</h3>
|
||||||
|
<Descriptions
|
||||||
|
:column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
|
||||||
|
bordered
|
||||||
|
class="mt-4"
|
||||||
|
>
|
||||||
|
<Descriptions.Item
|
||||||
|
:label="deliveryMethod === 0 ? '收货人' : '就诊人'"
|
||||||
|
>
|
||||||
|
<span v-if="deliveryMethod === 0">{{ data.address?.name }}</span>
|
||||||
|
<span v-else>
|
||||||
|
{{
|
||||||
|
data.express_name || data.patient?.name || data.cancel_remark
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="联系电话">
|
||||||
|
{{ data.address?.mobile || data.patient_mobile }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item v-if="deliveryMethod === 0" label="配送地址">
|
||||||
|
{{
|
||||||
|
`${data.address?.province || ''} ${data.address?.region || ''} ${data.address?.detail_address || ''}`
|
||||||
|
}}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item v-else label="自提地址">
|
||||||
|
{{ `${data.store?.position || ''} ` }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="发货备注">
|
||||||
|
{{ data.cancel_remark || '无' }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4">
|
||||||
|
<h3>订单商品</h3>
|
||||||
|
<Card
|
||||||
|
v-for="(item, index) in data.product_order_items"
|
||||||
|
:key="index"
|
||||||
|
class="mb-4 mt-5"
|
||||||
|
>
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<div
|
||||||
|
class="mr-6 h-32 w-32 overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<Image :src="item.drug_image" alt="" height="100%" width="100%" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>{{ item.drug_name }}</h4>
|
||||||
|
<p>规格: {{ item.drug.specification }}</p>
|
||||||
|
<p>数量: {{ item.number }}</p>
|
||||||
|
<p>单价: {{ item.price }} 元</p>
|
||||||
|
<p>
|
||||||
|
厂家:
|
||||||
|
{{
|
||||||
|
item.drug
|
||||||
|
? item.drug.source_info != null
|
||||||
|
? item.drug.source_info.name
|
||||||
|
: item.drug.source
|
||||||
|
: '暂无'
|
||||||
|
}}
|
||||||
|
</p>
|
||||||
|
<!-- <p>总价: {{ item.total_price }} 元</p>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4">
|
||||||
|
<h3>处方信息</h3>
|
||||||
|
<Descriptions
|
||||||
|
:column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
|
||||||
|
bordered
|
||||||
|
class="mt-4"
|
||||||
|
>
|
||||||
|
<Descriptions.Item label="处方编号">
|
||||||
|
{{ data.prescription.content.prescription_no }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="诊断">
|
||||||
|
{{ data.prescription.content.clinical_diagnose }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="医嘱">
|
||||||
|
{{ data.prescription.content.doctor_order }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="开药医生">
|
||||||
|
{{ data.prescription.content.doctor.name }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="科室">
|
||||||
|
{{ data.prescription.content.doctor.depart.name }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="职称">
|
||||||
|
{{ data.prescription.content.doctor.title.name }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
</div>
|
||||||
|
<div v-if="deliveryMethod === 0">
|
||||||
|
<div class="mt-4">
|
||||||
|
<h3>物流信息</h3>
|
||||||
|
<Descriptions
|
||||||
|
:column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
|
||||||
|
bordered
|
||||||
|
class="mt-4"
|
||||||
|
>
|
||||||
|
<Descriptions.Item label="物流公司">
|
||||||
|
{{ expressDetail.express_company_name }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="运单号">
|
||||||
|
{{ expressDetail.express_no }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="最新状态">
|
||||||
|
{{ expressDetail.state_txt }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4">
|
||||||
|
<h3>物流追踪</h3>
|
||||||
|
<Timeline class="mt-4">
|
||||||
|
<Timeline.Item
|
||||||
|
v-for="(detail, index) in expressDetail.detail"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<Tag :color="getColor(detail.status)">
|
||||||
|
{{ detail.status }}
|
||||||
|
</Tag>
|
||||||
|
<p>{{ detail.detail_at }}</p>
|
||||||
|
<p>{{ detail.detail }}</p>
|
||||||
|
</Timeline.Item>
|
||||||
|
</Timeline>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.ant-descriptions-item-label {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-4 {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-4 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-x-4 > * + * {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { useVbenForm } from '#/adapter/form';
|
||||||
|
import { sendOrder } from '#/views/business/order/product-order/api';
|
||||||
|
import { modalFormProps } from '#/views/business/order/product-order/config/form';
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'FormModelDemo',
|
||||||
|
});
|
||||||
|
|
||||||
|
const isUpdate = ref(false);
|
||||||
|
const gridApi = ref();
|
||||||
|
const orderNo = ref('');
|
||||||
|
|
||||||
|
const [Form, formApi] = useVbenForm(modalFormProps);
|
||||||
|
|
||||||
|
const [Modal, modalApi] = useVbenModal({
|
||||||
|
fullscreenButton: false,
|
||||||
|
draggable: true,
|
||||||
|
onCancel() {
|
||||||
|
modalApi.close();
|
||||||
|
},
|
||||||
|
onConfirm: async () => {
|
||||||
|
formApi.validate().then(async (e: any) => {
|
||||||
|
if (e.valid) {
|
||||||
|
const values = await formApi.getValues();
|
||||||
|
modalApi.setState({ loading: true, confirmLoading: true });
|
||||||
|
const submitApi = sendOrder;
|
||||||
|
submitApi(values)
|
||||||
|
.then(() => {
|
||||||
|
message.success('发货成功');
|
||||||
|
gridApi.value?.reload();
|
||||||
|
modalApi.close();
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
modalApi.setState({ loading: false, confirmLoading: false });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
await formApi.validateAndSubmitForm();
|
||||||
|
},
|
||||||
|
onOpenChange(isOpen: boolean) {
|
||||||
|
gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
|
||||||
|
if (isOpen) {
|
||||||
|
const { values, update } = modalApi.getData<Record<string, any>>();
|
||||||
|
if (values) {
|
||||||
|
orderNo.value = values.order_no;
|
||||||
|
isUpdate.value = update;
|
||||||
|
formApi.setValues(values);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Modal :title="`订单：【 ${orderNo} 】发货`" class="w-[30%]">
|
||||||
|
<Form />
|
||||||
|
</Modal>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
import type { VbenFormProps } from '#/adapter/form';
|
||||||
|
|
||||||
|
import { getExpressCompaniesOption } from '#/views/business/express/express-company/api';
|
||||||
|
|
||||||
|
export const modalFormProps: VbenFormProps = {
|
||||||
|
wrapperClass: 'grid-cols-12', // 24栅格,
|
||||||
|
commonConfig: {
|
||||||
|
formItemClass: 'col-span-12',
|
||||||
|
// 所有表单项
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// handleSubmit: onSubmit,
|
||||||
|
layout: 'horizontal',
|
||||||
|
schema: [
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
fieldName: 'order_id',
|
||||||
|
label: 'ID',
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
dependencies: {
|
||||||
|
show: false,
|
||||||
|
triggerFields: ['oreder_id'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入快递单号',
|
||||||
|
},
|
||||||
|
fieldName: 'express_no',
|
||||||
|
label: '快递单号',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'ApiSelect',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
// filterOption: true,
|
||||||
|
showSearch: true,
|
||||||
|
filterOption: (input: string, option: any) => {
|
||||||
|
// 自定义过滤逻辑，确保可以根据 name 进行搜索
|
||||||
|
return option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||||
|
},
|
||||||
|
// 菜单接口转options格式
|
||||||
|
afterFetch: (data: { id: number; name: string }[]) => {
|
||||||
|
return data.map((item: any) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.code,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
api: getExpressCompaniesOption,
|
||||||
|
placeholder: '请选择',
|
||||||
|
},
|
||||||
|
fieldName: 'express_company_code',
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
label: '快递公司',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Textarea',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入订单备注',
|
||||||
|
},
|
||||||
|
fieldName: 'introduce',
|
||||||
|
label: '发货备注',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
showDefaultActions: false,
|
||||||
|
};
|
||||||
@@ -0,0 +1,108 @@
|
|||||||
|
import type { VbenFormProps } from '#/adapter/form';
|
||||||
|
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import {getOrderStatusOption} from "#/views/business/order/product-order/api";
|
||||||
|
|
||||||
|
export const formOptions: VbenFormProps = {
|
||||||
|
// 默认展开
|
||||||
|
collapsed: false,
|
||||||
|
schema: [
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '输入订单号',
|
||||||
|
},
|
||||||
|
defaultValue: '',
|
||||||
|
fieldName: 'order_no',
|
||||||
|
label: '订单号',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'ApiSelect',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
filterOption: true,
|
||||||
|
// showSearch: true,
|
||||||
|
// 菜单接口转options格式
|
||||||
|
afterFetch: (data: { id: number; name: string }[]) => {
|
||||||
|
return data.map((item: any) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
api: getOrderStatusOption,
|
||||||
|
placeholder: '请选择',
|
||||||
|
},
|
||||||
|
fieldName: 'status',
|
||||||
|
label: '订单状态',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'VbenSelect',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
filterOption: true,
|
||||||
|
showSearch: true,
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '快递到家',
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '诊所自提',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
placeholder: '请选择',
|
||||||
|
},
|
||||||
|
fieldName: 'delivery_method',
|
||||||
|
label: '发货方式',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'VbenSelect',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
filterOption: true,
|
||||||
|
showSearch: true,
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '中药',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '西药',
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '中成药',
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '产品服务包',
|
||||||
|
value: 5,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
placeholder: '请选择',
|
||||||
|
},
|
||||||
|
fieldName: 'prescription_type',
|
||||||
|
label: '订单类型',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'RangePicker',
|
||||||
|
componentProps: {
|
||||||
|
format: 'YYYY-MM-DD', // 确保格式与你需要的一致
|
||||||
|
},
|
||||||
|
defaultValue: [dayjs().startOf('month'), dayjs()],
|
||||||
|
fieldName: 'search_time',
|
||||||
|
label: '时间范围',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 控制表单是否显示折叠按钮
|
||||||
|
showCollapseButton: true,
|
||||||
|
submitButtonOptions: {
|
||||||
|
content: '查询',
|
||||||
|
},
|
||||||
|
// 是否在字段值改变时提交表单
|
||||||
|
// submitOnChange: true,
|
||||||
|
// submitOnChange: true,
|
||||||
|
// 按下回车时是否提交表单
|
||||||
|
submitOnEnter: false,
|
||||||
|
};
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import { getOrderList } from '#/views/business/order/product-order/api';
|
||||||
|
|
||||||
|
interface RowType {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
logo: string;
|
||||||
|
introduce: string;
|
||||||
|
created_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const gridOptions: VxeGridProps<RowType> = {
|
||||||
|
checkboxConfig: {
|
||||||
|
highlight: true,
|
||||||
|
labelField: '',
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
// { type: 'checkbox', width: 60 },
|
||||||
|
{ type: 'expand', width: 80, slots: { content: 'expand-content' } },
|
||||||
|
{ field: 'id', align: 'left', title: 'ID', width: 100 },
|
||||||
|
{ field: 'order_no', align: 'left', title: '订单号' },
|
||||||
|
{
|
||||||
|
field: 'user.avatarUrl',
|
||||||
|
title: '下单用户信息',
|
||||||
|
slots: { default: 'avatar' },
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{ field: 'store.name', title: '诊所名称' },
|
||||||
|
{
|
||||||
|
field: 'address.name',
|
||||||
|
title: '收货人姓名',
|
||||||
|
slots: { default: 'address-name' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'address.mobile',
|
||||||
|
title: '收货人联系方式',
|
||||||
|
slots: { default: 'address-mobile' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'delivery_method',
|
||||||
|
title: '订单类型&邮寄方式&订单状态',
|
||||||
|
slots: { default: 'delivery-method' },
|
||||||
|
},
|
||||||
|
{ field: 'items_price', title: '总价' },
|
||||||
|
{ field: 'pay_time', title: '支付时间', slots: { default: 'pay-time' } },
|
||||||
|
{ field: 'created_at', title: '下单时间' },
|
||||||
|
{
|
||||||
|
type: 'html',
|
||||||
|
title: '操作',
|
||||||
|
align: 'right',
|
||||||
|
slots: { default: 'action' },
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
keepSource: true,
|
||||||
|
pagerConfig: {},
|
||||||
|
columnConfig: {
|
||||||
|
useKey: true,
|
||||||
|
},
|
||||||
|
rowConfig: {
|
||||||
|
useKey: true,
|
||||||
|
},
|
||||||
|
// scrollY: {
|
||||||
|
// enabled: true,
|
||||||
|
// gt: 0,
|
||||||
|
// },
|
||||||
|
proxyConfig: {
|
||||||
|
ajax: {
|
||||||
|
// 请求后端接口方法
|
||||||
|
query: async ({ page }, formValues) => {
|
||||||
|
return await getOrderList({
|
||||||
|
page: page.currentPage,
|
||||||
|
pageSize: page.pageSize,
|
||||||
|
...formValues,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
height: 'auto',
|
||||||
|
border: false,
|
||||||
|
toolbarConfig: {
|
||||||
|
// 是否显示搜索表单控制按钮
|
||||||
|
// @ts-ignore 正式环境时有完整的类型声明
|
||||||
|
search: true,
|
||||||
|
refresh: true, // 刷新
|
||||||
|
print: false, // 打印
|
||||||
|
export: false, // 导出
|
||||||
|
// custom: true, // 自定义列
|
||||||
|
zoom: true, // 最大化最小化
|
||||||
|
slots: {
|
||||||
|
buttons: 'toolbar-buttons',
|
||||||
|
},
|
||||||
|
custom: {
|
||||||
|
// 自定义列-图标
|
||||||
|
icon: 'vxe-icon-menu',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
expandConfig: {
|
||||||
|
// expandAll: true,
|
||||||
|
},
|
||||||
|
showOverflow: false,
|
||||||
|
};
|
||||||
315
apps/web-antd/src/views/business/order/product-order/index.vue
Normal file
315
apps/web-antd/src/views/business/order/product-order/index.vue
Normal file
@@ -0,0 +1,315 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { VxeGridListeners } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { Page, useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { Button, Image, message, Tag } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||||
|
import { TableAction } from '#/components/table-action';
|
||||||
|
|
||||||
|
import FormModalDemo from './components/modal.vue';
|
||||||
|
import DetailModal from './components/detail.vue';
|
||||||
|
import { formOptions } from './config/search';
|
||||||
|
import { gridOptions } from './config/table';
|
||||||
|
|
||||||
|
const hasTopTableDropDownActions = ref(false);
|
||||||
|
|
||||||
|
const gridEvents: VxeGridListeners<any> = {
|
||||||
|
checkboxChange() {
|
||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
const records = gridApi.grid.getCheckboxRecords();
|
||||||
|
hasTopTableDropDownActions.value = records.length > 0;
|
||||||
|
},
|
||||||
|
checkboxAll() {
|
||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
const records = gridApi.grid.getCheckboxRecords();
|
||||||
|
hasTopTableDropDownActions.value = records.length > 0;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const [Grid, gridApi] = useVbenVxeGrid({
|
||||||
|
formOptions,
|
||||||
|
gridOptions,
|
||||||
|
gridEvents,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [FormModal, formModalApi] = useVbenModal({
|
||||||
|
connectedComponent: FormModalDemo,
|
||||||
|
});
|
||||||
|
const [Modal, modalApi] = useVbenModal({
|
||||||
|
connectedComponent: DetailModal,
|
||||||
|
});
|
||||||
|
|
||||||
|
const infoModal = (data = {}) => {
|
||||||
|
modalApi.setData({
|
||||||
|
// 表单值
|
||||||
|
values: data,
|
||||||
|
gridApi,
|
||||||
|
});
|
||||||
|
modalApi.open();
|
||||||
|
// message.success(`正在开发${JSON.stringify(data)}`);
|
||||||
|
};
|
||||||
|
// const showModal = (data = {}, isUpdate = false) => {
|
||||||
|
// formModalApi.setData({
|
||||||
|
// // 表单值
|
||||||
|
// values: data,
|
||||||
|
// update: isUpdate,
|
||||||
|
// gridApi,
|
||||||
|
// });
|
||||||
|
// formModalApi.open();
|
||||||
|
// };
|
||||||
|
|
||||||
|
const wareSend = (data = {}) => {
|
||||||
|
formModalApi.setData({
|
||||||
|
// 表单值
|
||||||
|
values: {
|
||||||
|
order_id: data?.id,
|
||||||
|
order_no: data?.order_no,
|
||||||
|
},
|
||||||
|
gridApi,
|
||||||
|
});
|
||||||
|
formModalApi.open();
|
||||||
|
};
|
||||||
|
const expandAll = () => {
|
||||||
|
gridApi.grid?.setAllRowExpand(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const collapseAll = () => {
|
||||||
|
gridApi.grid?.setAllRowExpand(false);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Page auto-content-height title="订单管理">
|
||||||
|
<FormModal />
|
||||||
|
<Modal />
|
||||||
|
<Grid>
|
||||||
|
<template #toolbar-buttons>
|
||||||
|
<TableAction
|
||||||
|
:actions="[
|
||||||
|
{
|
||||||
|
label: '展开全部',
|
||||||
|
type: 'primary',
|
||||||
|
// auth: ['超级菜单', 'sys:user:save'],
|
||||||
|
onClick: expandAll.bind(null),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '收起全部',
|
||||||
|
type: 'primary',
|
||||||
|
// auth: ['超级菜单', 'sys:user:save'],
|
||||||
|
onClick: collapseAll.bind(null),
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:drop-down-actions="[]"
|
||||||
|
>
|
||||||
|
<template #more>
|
||||||
|
<Button style="margin-left: 16px">
|
||||||
|
批量操作
|
||||||
|
<Icon icon="ant-design:down-outlined" />
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</TableAction>
|
||||||
|
</template>
|
||||||
|
<template #avatar="{ row }">
|
||||||
|
<Image :src="row.user.avatarurl || '/img/user-default-avatar.png'" />
|
||||||
|
{{ row.user.nickname }}
|
||||||
|
</template>
|
||||||
|
<template #address-name="{ row }">
|
||||||
|
{{
|
||||||
|
row.address?.name ||
|
||||||
|
row.express_name ||
|
||||||
|
row.patient?.name ||
|
||||||
|
row.cancel_remark
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
<template #address-mobile="{ row }">
|
||||||
|
{{ row.address?.mobile || row.patient_mobile }}
|
||||||
|
</template>
|
||||||
|
<template #pay-time="{ row }">
|
||||||
|
{{ row?.pay_time || '未支付' }}
|
||||||
|
</template>
|
||||||
|
<template #delivery-method="{ row }">
|
||||||
|
<div v-if="row.order_type === 1">
|
||||||
|
<Tag v-if="row.prescription_type === 1" color="orange">中药订单</Tag>
|
||||||
|
<Tag v-else-if="row.prescription_type === 2" color="blue">
|
||||||
|
商品订单【西药】
|
||||||
|
</Tag>
|
||||||
|
<Tag v-else-if="row.prescription_type === 3" color="purple">
|
||||||
|
商品订单【非处方药】
|
||||||
|
</Tag>
|
||||||
|
<Tag v-else-if="row.prescription_type === 4" color="green">
|
||||||
|
已退款
|
||||||
|
</Tag>
|
||||||
|
<Tag v-else-if="row.prescription_type === 5" color="pink">
|
||||||
|
产品服务包
|
||||||
|
</Tag>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3">
|
||||||
|
<Tag v-if="row.delivery_method === 1" color="blue">【到店自提】</Tag>
|
||||||
|
<Tag v-else-if="row.delivery_method === 0" color="green">
|
||||||
|
【上门快递】
|
||||||
|
</Tag>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3">
|
||||||
|
<Tag v-if="row.status === 0" color="red">待支付</Tag>
|
||||||
|
<Tag v-else-if="row.status === 1" color="orange">待发货</Tag>
|
||||||
|
<Tag v-else-if="row.status === 2" color="blue">待收货</Tag>
|
||||||
|
<Tag v-else-if="row.status === 3" color="purple">待评价</Tag>
|
||||||
|
<Tag v-else-if="row.status === 4" color="green">已退款</Tag>
|
||||||
|
<Tag v-else-if="row.status === 5" color="pink">退款中</Tag>
|
||||||
|
<Tag v-else-if="row.status === 6" color="cyan">已收货</Tag>
|
||||||
|
<Tag v-else-if="row.status === 7" color="green">确认收货</Tag>
|
||||||
|
<Tag v-else-if="row.status === 8" color="#B22222">拒绝退款</Tag>
|
||||||
|
<Tag v-else-if="row.status === 9" color="gray">已取消</Tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #toolbar-tools></template>
|
||||||
|
<template #action="{ row }">
|
||||||
|
<TableAction
|
||||||
|
:actions="[
|
||||||
|
{
|
||||||
|
label: '详情',
|
||||||
|
type: 'link',
|
||||||
|
icon: 'uil:edit',
|
||||||
|
size: 'small',
|
||||||
|
// auth: ['order', 'sys:role:detail'],
|
||||||
|
onClick: infoModal.bind(null, row),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '发货',
|
||||||
|
type: 'link',
|
||||||
|
icon: 'ri:send-plane-fill',
|
||||||
|
// auth: ['超级订单', 'sys:user:save'],
|
||||||
|
onClick: wareSend.bind(null, row),
|
||||||
|
// popConfirm: {
|
||||||
|
// title: '确定发货吗？',
|
||||||
|
// confirm: wareSend.bind(null, row),
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:drop-down-actions="[
|
||||||
|
// {
|
||||||
|
// label: '发货',
|
||||||
|
// type: 'link',
|
||||||
|
// icon: 'ri:send-plane-fill',
|
||||||
|
// // auth: ['超级订单', 'sys:user:save'],
|
||||||
|
// popConfirm: {
|
||||||
|
// title: '确定发货吗？',
|
||||||
|
// confirm: wareSend.bind(null, false),
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #expand-content="{ row }">
|
||||||
|
<div
|
||||||
|
v-if="row.prescription_type === 2 || row.prescription_type === 5"
|
||||||
|
class="product-list mt-5"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in row.product_order_items"
|
||||||
|
:key="index"
|
||||||
|
class="box-card mb-6 rounded-lg p-4"
|
||||||
|
>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="mr-6 h-32 w-32 overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
:src="item.drug_image"
|
||||||
|
alt=""
|
||||||
|
height="100%"
|
||||||
|
width="100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 mt-5 text-sm">
|
||||||
|
<span class="text-gray-500 dark:text-gray-400">商品编号：</span>
|
||||||
|
X00{{ index + 1 }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow space-y-2">
|
||||||
|
<div class="text-sm">
|
||||||
|
<span class="text-gray-500 dark:text-gray-400">商品名称:</span>
|
||||||
|
{{ item.drug_name }}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm">
|
||||||
|
<span class="text-gray-500 dark:text-gray-400">商品规格:</span>
|
||||||
|
{{ item.drug ? item.drug.specification : '暂无' }}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm">
|
||||||
|
<span class="text-gray-500 dark:text-gray-400">商品数量:</span>
|
||||||
|
{{ item.number }}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm">
|
||||||
|
<span class="text-gray-500 dark:text-gray-400">商品厂家:</span>
|
||||||
|
{{ item.drug ? item.drug.source_info != null ? item.drug.source_info.name : item.drug.source : '暂无' }}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm">
|
||||||
|
<span class="text-gray-500 dark:text-gray-400">商品价格:</span>
|
||||||
|
{{ item.price }} 元
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="row.prescription_type === 1" class="medication-details mt-5 p-10">
|
||||||
|
<span class="mb-2 font-medium">药品明细：</span>
|
||||||
|
<ul class="custom-list pl-6">
|
||||||
|
<li
|
||||||
|
v-for="(item, index) in row.product_order_items"
|
||||||
|
:key="index"
|
||||||
|
class="custom-list-item"
|
||||||
|
>
|
||||||
|
【{{ item.drug.drug_number }}】 {{ item.drug_name }} （* {{item.number}}）
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div v-if="!row.prescription_type"></div>
|
||||||
|
<div
|
||||||
|
class="order-summary mt-6 flex justify-center space-x-4 rounded-lg bg-gray-100 p-4 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<span class="text-sm">采购价：{{ row.market_price || '0.00' }}</span>
|
||||||
|
<span class="text-sm">快递费：{{ row.trans_expenses || '0.00' }}</span>
|
||||||
|
<span class="text-sm">诊疗费：{{ row.treatement_price || '0.00' }}</span>
|
||||||
|
<span class="text-sm">加工费：{{ row.process_price || '0.00' }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Grid>
|
||||||
|
</Page>
|
||||||
|
</template>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.custom-list {
|
||||||
|
list-style-type: none;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-list-item {
|
||||||
|
background-color: rgba(64, 158, 255, 0.04);
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(64, 158, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background-color: #409eff;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
import { requestClient } from '#/api/request';
|
||||||
|
|
||||||
|
const prefix = 'service-pack/';
|
||||||
|
/**
|
||||||
|
* 分页查询用户列表
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function getServicePackList(data: any) {
|
||||||
|
return requestClient.get<any>(`${prefix}list`, { params: data });
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 分页查询用户列表
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function getServicePackOption(data: any) {
|
||||||
|
return requestClient.get<any>(`${prefix}option`, { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取产品服务包详情
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
export async function getServicePackInfo(id: number) {
|
||||||
|
return requestClient.get<any>(`${prefix}detail`, { params: { id } });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增产品服务包
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function createServicePack(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}create`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编辑产品服务包
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function updateServicePack(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}update`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除产品服务包
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function deleteServicePack(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}delete`, data);
|
||||||
|
}
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
|
import { useUserStore } from '@vben/stores';
|
||||||
|
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { useVbenForm } from '#/adapter/form';
|
||||||
|
|
||||||
|
import { createServicePack, updateServicePack } from '../api';
|
||||||
|
import { modalFormProps } from '../config/form';
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'FormModelDemo',
|
||||||
|
});
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
const isUpdate = ref(false);
|
||||||
|
const gridApi = ref();
|
||||||
|
|
||||||
|
const [Form, formApi] = useVbenForm(modalFormProps);
|
||||||
|
|
||||||
|
const [Modal, modalApi] = useVbenModal({
|
||||||
|
fullscreenButton: false,
|
||||||
|
draggable: true,
|
||||||
|
onCancel() {
|
||||||
|
modalApi.close();
|
||||||
|
},
|
||||||
|
onConfirm: async () => {
|
||||||
|
formApi.validate().then(async (e: any) => {
|
||||||
|
if (e.valid) {
|
||||||
|
const values = await formApi.getValues();
|
||||||
|
modalApi.setState({ loading: true, confirmLoading: true });
|
||||||
|
const submitApi = isUpdate.value
|
||||||
|
? updateServicePack
|
||||||
|
: createServicePack;
|
||||||
|
submitApi(values)
|
||||||
|
.then(() => {
|
||||||
|
message.success('保存成功');
|
||||||
|
gridApi.value?.reload();
|
||||||
|
modalApi.close();
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
modalApi.setState({ loading: false, confirmLoading: false });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
await formApi.validateAndSubmitForm();
|
||||||
|
},
|
||||||
|
onOpenChange(isOpen: boolean) {
|
||||||
|
gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
|
||||||
|
if (isOpen) {
|
||||||
|
const { values, update } = modalApi.getData<Record<string, any>>();
|
||||||
|
if (values) {
|
||||||
|
isUpdate.value = update;
|
||||||
|
formApi.setValues(values);
|
||||||
|
if (userStore?.userInfo?.roles?.user_type === 3 && !isUpdate.value) {
|
||||||
|
formApi.setValues({
|
||||||
|
supplier_id: userStore?.userInfo?.supplier_id,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Modal
|
||||||
|
:title="`${isUpdate === true ? '编辑' : '新增'}产品服务包`"
|
||||||
|
class="w-[30%]"
|
||||||
|
>
|
||||||
|
<Form />
|
||||||
|
</Modal>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,243 @@
|
|||||||
|
import type { VbenFormProps } from '#/adapter/form';
|
||||||
|
|
||||||
|
import { useUserStore } from '@vben/stores';
|
||||||
|
|
||||||
|
import { getSupplierOption } from '#/views/system/supplier/api';
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
export const modalFormProps: VbenFormProps = {
|
||||||
|
wrapperClass: 'grid-cols-12', // 24栅格,
|
||||||
|
commonConfig: {
|
||||||
|
formItemClass: 'col-span-12',
|
||||||
|
// 所有表单项
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// handleSubmit: onSubmit,
|
||||||
|
layout: 'horizontal',
|
||||||
|
schema: [
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
fieldName: 'id',
|
||||||
|
label: 'ID',
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
dependencies: {
|
||||||
|
show: false,
|
||||||
|
triggerFields: ['id'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
fieldName: 'showSelect',
|
||||||
|
label: 'ID',
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
dependencies: {
|
||||||
|
show: false,
|
||||||
|
triggerFields: ['id'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Avatar',
|
||||||
|
fieldName: 'image',
|
||||||
|
label: '产品图片',
|
||||||
|
rules: 'required',
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'ApiSelect',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
showSearch: true,
|
||||||
|
filterOption: (input: string, option: any) => {
|
||||||
|
// 自定义过滤逻辑，确保可以根据 name 进行搜索
|
||||||
|
return option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||||
|
},
|
||||||
|
// 菜单接口转options格式
|
||||||
|
afterFetch: (data: { id: number; name: string }[]) => {
|
||||||
|
return data.map((item: any) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
api: getSupplierOption,
|
||||||
|
placeholder: '请选择',
|
||||||
|
},
|
||||||
|
dependencies: {
|
||||||
|
disabled() {
|
||||||
|
return userStore?.userInfo?.roles?.user_type === 3;
|
||||||
|
},
|
||||||
|
triggerFields: ['supplier_id'],
|
||||||
|
},
|
||||||
|
fieldName: 'supplier_id',
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
label: '所属供应商',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入服务包昵称',
|
||||||
|
},
|
||||||
|
fieldName: 'drug_name',
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
label: '服务包昵称',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入服务包别名',
|
||||||
|
},
|
||||||
|
fieldName: 'drug_alias',
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
label: '服务包别名',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入服务包编号',
|
||||||
|
},
|
||||||
|
fieldName: 'drug_number',
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
label: '服务包编号',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入功能',
|
||||||
|
},
|
||||||
|
fieldName: 'function',
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
label: '功能',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// component: 'VbenInput',
|
||||||
|
// componentProps: {
|
||||||
|
// placeholder: '请输入规格',
|
||||||
|
// },
|
||||||
|
// fieldName: 'specification',
|
||||||
|
// formItemClass: 'col-span-6',
|
||||||
|
// label: '规格',
|
||||||
|
// rules: 'required',
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
component: 'VbenSelect',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择规格',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '7天',
|
||||||
|
value: '7天',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '14天',
|
||||||
|
value: '14天',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '30天',
|
||||||
|
value: '30天',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '60天',
|
||||||
|
value: '60天',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '90天',
|
||||||
|
value: '90天',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '180天',
|
||||||
|
value: '180天',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
fieldName: 'specification',
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
label: '规格',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'RadioGroup',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '草稿',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '下架',
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '上架',
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
defaultValue: 1,
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
fieldName: 'status',
|
||||||
|
label: '商品状态',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'InputNumber',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入平台分成',
|
||||||
|
},
|
||||||
|
suffix: () => '%',
|
||||||
|
defaultValue: 15,
|
||||||
|
fieldName: 'platform_ledger',
|
||||||
|
formItemClass: 'col-span-4',
|
||||||
|
label: '平台分成',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'InputNumber',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入诊所分成',
|
||||||
|
},
|
||||||
|
suffix: () => '%',
|
||||||
|
defaultValue: 35,
|
||||||
|
fieldName: 'store_ledger',
|
||||||
|
formItemClass: 'col-span-4',
|
||||||
|
label: '诊所分成',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'InputNumber',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入供应商分成',
|
||||||
|
},
|
||||||
|
suffix: () => '%',
|
||||||
|
defaultValue: 50,
|
||||||
|
fieldName: 'supplier_ledger',
|
||||||
|
formItemClass: 'col-span-4',
|
||||||
|
label: '供应商分成',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Textarea',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入服务包介绍',
|
||||||
|
},
|
||||||
|
fieldName: 'small_info',
|
||||||
|
label: '服务包介绍',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Avatar',
|
||||||
|
fieldName: 'instruction',
|
||||||
|
label: '产品说明书',
|
||||||
|
rules: 'required',
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
showDefaultActions: false,
|
||||||
|
};
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import type { VbenFormProps } from '#/adapter/form';
|
||||||
|
|
||||||
|
// import dayjs from 'dayjs';
|
||||||
|
|
||||||
|
export const formOptions: VbenFormProps = {
|
||||||
|
// 默认展开
|
||||||
|
collapsed: false,
|
||||||
|
schema: [
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '输入名称',
|
||||||
|
},
|
||||||
|
defaultValue: '',
|
||||||
|
fieldName: 'name',
|
||||||
|
label: '产品服务包名称',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// component: 'RangePicker',
|
||||||
|
// componentProps: {
|
||||||
|
// format: 'YYYY-MM-DD', // 确保格式与你需要的一致
|
||||||
|
// },
|
||||||
|
// // defaultValue: [dayjs().startOf('month'), dayjs()],
|
||||||
|
// fieldName: 'search_time',
|
||||||
|
// label: '时间范围',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
// 控制表单是否显示折叠按钮
|
||||||
|
showCollapseButton: true,
|
||||||
|
submitButtonOptions: {
|
||||||
|
content: '查询',
|
||||||
|
},
|
||||||
|
// 是否在字段值改变时提交表单
|
||||||
|
submitOnChange: true,
|
||||||
|
// 按下回车时是否提交表单
|
||||||
|
submitOnEnter: false,
|
||||||
|
};
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import { getServicePackList } from '../api';
|
||||||
|
|
||||||
|
interface RowType {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
logo: string;
|
||||||
|
introduce: string;
|
||||||
|
created_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const gridOptions: VxeGridProps<RowType> = {
|
||||||
|
checkboxConfig: {
|
||||||
|
highlight: true,
|
||||||
|
labelField: '',
|
||||||
|
},
|
||||||
|
columnConfig: {
|
||||||
|
useKey: true,
|
||||||
|
},
|
||||||
|
rowConfig: {
|
||||||
|
useKey: true,
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{ type: 'checkbox', width: 60 },
|
||||||
|
{ field: 'id', align: 'left', title: 'ID', width: 100 },
|
||||||
|
{ field: 'drug_name', align: 'left', title: '服务包名称' },
|
||||||
|
{ field: 'pinyin_simple', title: '拼音' },
|
||||||
|
{ field: 'supplier.name', title: '供应商' },
|
||||||
|
{
|
||||||
|
field: 'image',
|
||||||
|
align: 'left',
|
||||||
|
title: '产品图片',
|
||||||
|
slots: { default: 'image' },
|
||||||
|
width: 130,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'instruction',
|
||||||
|
align: 'left',
|
||||||
|
title: '说明书',
|
||||||
|
slots: { default: 'instruction' },
|
||||||
|
width: 130,
|
||||||
|
},
|
||||||
|
{ field: 'function', title: '主要功能' },
|
||||||
|
{ field: 'specification', title: '规格' },
|
||||||
|
{ field: 'status', title: '状态', slots: { default: 'status' } },
|
||||||
|
{ field: 'created_at', title: '发布时间' },
|
||||||
|
{ type: 'html', title: '操作', slots: { default: 'action' } },
|
||||||
|
],
|
||||||
|
keepSource: true,
|
||||||
|
pagerConfig: {},
|
||||||
|
proxyConfig: {
|
||||||
|
ajax: {
|
||||||
|
// 请求后端接口方法
|
||||||
|
query: async ({ page }, formValues) => {
|
||||||
|
return await getServicePackList({
|
||||||
|
page: page.currentPage,
|
||||||
|
pageSize: page.pageSize,
|
||||||
|
...formValues,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
height: 'auto',
|
||||||
|
border: false,
|
||||||
|
toolbarConfig: {
|
||||||
|
// 是否显示搜索表单控制按钮
|
||||||
|
// @ts-ignore 正式环境时有完整的类型声明
|
||||||
|
search: true,
|
||||||
|
refresh: true, // 刷新
|
||||||
|
print: false, // 打印
|
||||||
|
export: false, // 导出
|
||||||
|
// custom: true, // 自定义列
|
||||||
|
zoom: true, // 最大化最小化
|
||||||
|
slots: {
|
||||||
|
buttons: 'toolbar-buttons',
|
||||||
|
},
|
||||||
|
custom: {
|
||||||
|
// 自定义列-图标
|
||||||
|
icon: 'vxe-icon-menu',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
showOverflow: false,
|
||||||
|
};
|
||||||
163
apps/web-antd/src/views/business/product/service-pack/index.vue
Normal file
163
apps/web-antd/src/views/business/product/service-pack/index.vue
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { VxeGridListeners } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { Page, useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { Button, Image, message, Tag } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||||
|
import { TableAction } from '#/components/table-action';
|
||||||
|
|
||||||
|
import { deleteServicePack } from './api';
|
||||||
|
import FormModalDemo from './components/modal.vue';
|
||||||
|
import { formOptions } from './config/search';
|
||||||
|
import { gridOptions } from './config/table';
|
||||||
|
|
||||||
|
const hasTopTableDropDownActions = ref(false);
|
||||||
|
|
||||||
|
const gridEvents: VxeGridListeners<any> = {
|
||||||
|
checkboxChange() {
|
||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
const records = gridApi.grid.getCheckboxRecords();
|
||||||
|
hasTopTableDropDownActions.value = records.length > 0;
|
||||||
|
},
|
||||||
|
checkboxAll() {
|
||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
const records = gridApi.grid.getCheckboxRecords();
|
||||||
|
hasTopTableDropDownActions.value = records.length > 0;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const [Grid, gridApi] = useVbenVxeGrid({
|
||||||
|
formOptions,
|
||||||
|
gridOptions,
|
||||||
|
gridEvents,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [FormModal, formModalApi] = useVbenModal({
|
||||||
|
connectedComponent: FormModalDemo,
|
||||||
|
});
|
||||||
|
|
||||||
|
const showModal = (data = {}, isUpdate = false) => {
|
||||||
|
formModalApi.setData({
|
||||||
|
// 表单值
|
||||||
|
values: data,
|
||||||
|
update: isUpdate,
|
||||||
|
gridApi,
|
||||||
|
});
|
||||||
|
formModalApi.open();
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteApi = (row: any) => {
|
||||||
|
let ids = [];
|
||||||
|
if (row) {
|
||||||
|
ids.push(row);
|
||||||
|
} else {
|
||||||
|
ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
|
||||||
|
}
|
||||||
|
deleteServicePack({ ids }).then(() => {
|
||||||
|
message.success('删除成功!');
|
||||||
|
gridApi.reload();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Page auto-content-height title="产品服务包管理">
|
||||||
|
<FormModal />
|
||||||
|
<Grid>
|
||||||
|
<template #toolbar-buttons>
|
||||||
|
<TableAction
|
||||||
|
:actions="[
|
||||||
|
{
|
||||||
|
label: '新增',
|
||||||
|
type: 'primary',
|
||||||
|
icon: 'ant-design:plus-outlined',
|
||||||
|
// auth: ['超级产品服务包', 'sys:user:save'],
|
||||||
|
onClick: showModal.bind(null),
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:drop-down-actions="[
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
icon: 'ant-design:delete-outlined',
|
||||||
|
ifShow: hasTopTableDropDownActions,
|
||||||
|
// auth: ['超级产品服务包', 'sys:user:save'],
|
||||||
|
popConfirm: {
|
||||||
|
title: '确定删除吗？',
|
||||||
|
confirm: deleteApi.bind(null, false),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template #more>
|
||||||
|
<Button style="margin-left: 16px">
|
||||||
|
批量操作
|
||||||
|
<Icon icon="ant-design:down-outlined" />
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</TableAction>
|
||||||
|
</template>
|
||||||
|
<template #image="{ row }">
|
||||||
|
<Image :src="row.image" height="30" width="30" />
|
||||||
|
</template>
|
||||||
|
<template #instruction="{ row }">
|
||||||
|
<div class="div" style="width: 120px;height: 120px; overflow: scroll">
|
||||||
|
<Image :src="row.instruction" height="30" width="30" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #status="{ row }">
|
||||||
|
<Tag :color="row.status_color">{{ row.status_txt }}</Tag>
|
||||||
|
</template>
|
||||||
|
<template #toolbar-tools></template>
|
||||||
|
<template #action="{ row }">
|
||||||
|
<TableAction
|
||||||
|
:actions="[
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
type: 'link',
|
||||||
|
icon: 'uil:edit',
|
||||||
|
size: 'small',
|
||||||
|
// auth: ['service-pack', 'sys:role:detail'],
|
||||||
|
onClick: showModal.bind(null, row, true),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
type: 'link',
|
||||||
|
icon: 'ant-design:delete-outlined',
|
||||||
|
size: 'small',
|
||||||
|
// auth: ['service-pack', 'sys:role:detail'],
|
||||||
|
popConfirm: {
|
||||||
|
title: '确定删除吗？',
|
||||||
|
confirm: deleteApi.bind(null, row.id),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:drop-down-actions="[
|
||||||
|
// {
|
||||||
|
// label: '编辑',
|
||||||
|
// type: 'link',
|
||||||
|
// icon: 'ant-design:delete-outlined',
|
||||||
|
// size: 'small',
|
||||||
|
// // auth: ['service-pack', 'sys:role:detail'],
|
||||||
|
// onClick: showModal.bind(null, row, true),
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: '删除',
|
||||||
|
// type: 'link',
|
||||||
|
// icon: 'ant-design:delete-outlined',
|
||||||
|
// size: 'small',
|
||||||
|
// // auth: ['service-pack', 'sys:role:detail'],
|
||||||
|
// popConfirm: {
|
||||||
|
// title: '确定删除吗？',
|
||||||
|
// confirm: deleteApi.bind(null, row.id),
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</Grid>
|
||||||
|
</Page>
|
||||||
|
</template>
|
||||||
@@ -17,6 +17,7 @@ import {
|
|||||||
WorkbenchTodo,
|
WorkbenchTodo,
|
||||||
WorkbenchTrends,
|
WorkbenchTrends,
|
||||||
} from '@vben/common-ui';
|
} from '@vben/common-ui';
|
||||||
|
import { LogoSvgICON } from '@vben/icons';
|
||||||
import { preferences } from '@vben/preferences';
|
import { preferences } from '@vben/preferences';
|
||||||
import { useUserStore } from '@vben/stores';
|
import { useUserStore } from '@vben/stores';
|
||||||
import { openWindow } from '@vben/utils';
|
import { openWindow } from '@vben/utils';
|
||||||
@@ -30,59 +31,77 @@ const userStore = useUserStore();
|
|||||||
// 例如：url: /dashboard/workspace
|
// 例如：url: /dashboard/workspace
|
||||||
const projectItems: WorkbenchProjectItem[] = [
|
const projectItems: WorkbenchProjectItem[] = [
|
||||||
{
|
{
|
||||||
color: '',
|
color: 'blue',
|
||||||
content: '不要等待机会，而要创造机会。',
|
content: '不要等待机会，而要创造机会。',
|
||||||
date: '2021-04-01',
|
date: '2021-04-01',
|
||||||
group: '开源组',
|
group: '萧康云医科技',
|
||||||
icon: 'carbon:logo-github',
|
icon: LogoSvgICON,
|
||||||
title: 'Github',
|
title: '萧康后台管理系统-旧版本',
|
||||||
url: 'https://github.com',
|
url: 'https://admin.xiaokang88.com',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
color: '#3fb27f',
|
color: 'blue',
|
||||||
content: '现在的你决定将来的你。',
|
content: '数据可视化平台。',
|
||||||
date: '2021-04-01',
|
date: '2021-04-01',
|
||||||
group: '算法组',
|
group: '萧康云医科技',
|
||||||
icon: 'ion:logo-vue',
|
icon: 'fluent-color:data-bar-vertical-ascending-20',
|
||||||
title: 'Vue',
|
title: '数据大屏',
|
||||||
url: 'https://vuejs.org',
|
url: 'http://dls.xiaokang88.com',
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#e18525',
|
|
||||||
content: '没有什么才能比努力更重要。',
|
|
||||||
date: '2021-04-01',
|
|
||||||
group: '上班摸鱼',
|
|
||||||
icon: 'ion:logo-html5',
|
|
||||||
title: 'Html5',
|
|
||||||
url: 'https://developer.mozilla.org/zh-CN/docs/Web/HTML',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#bf0c2c',
|
|
||||||
content: '热情和欲望可以突破一切难关。',
|
|
||||||
date: '2021-04-01',
|
|
||||||
group: 'UI',
|
|
||||||
icon: 'ion:logo-angular',
|
|
||||||
title: 'Angular',
|
|
||||||
url: 'https://angular.io',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#00d8ff',
|
|
||||||
content: '健康的身体是实现目标的基石。',
|
|
||||||
date: '2021-04-01',
|
|
||||||
group: '技术牛',
|
|
||||||
icon: 'bx:bxl-react',
|
|
||||||
title: 'React',
|
|
||||||
url: 'https://reactjs.org',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#EBD94E',
|
|
||||||
content: '路是走出来的，而不是空想出来的。',
|
|
||||||
date: '2021-04-01',
|
|
||||||
group: '架构组',
|
|
||||||
icon: 'ion:logo-javascript',
|
|
||||||
title: 'Js',
|
|
||||||
url: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript',
|
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// color: '',
|
||||||
|
// content: '不要等待机会，而要创造机会。',
|
||||||
|
// date: '2021-04-01',
|
||||||
|
// group: '开源组',
|
||||||
|
// icon: 'carbon:logo-github',
|
||||||
|
// title: 'Github',
|
||||||
|
// url: 'https://github.com',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// color: '#3fb27f',
|
||||||
|
// content: '现在的你决定将来的你。',
|
||||||
|
// date: '2021-04-01',
|
||||||
|
// group: '算法组',
|
||||||
|
// icon: 'ion:logo-vue',
|
||||||
|
// title: 'Vue',
|
||||||
|
// url: 'https://vuejs.org',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// color: '#e18525',
|
||||||
|
// content: '没有什么才能比努力更重要。',
|
||||||
|
// date: '2021-04-01',
|
||||||
|
// group: '上班摸鱼',
|
||||||
|
// icon: 'ion:logo-html5',
|
||||||
|
// title: 'Html5',
|
||||||
|
// url: 'https://developer.mozilla.org/zh-CN/docs/Web/HTML',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// color: '#bf0c2c',
|
||||||
|
// content: '热情和欲望可以突破一切难关。',
|
||||||
|
// date: '2021-04-01',
|
||||||
|
// group: 'UI',
|
||||||
|
// icon: 'ion:logo-angular',
|
||||||
|
// title: 'Angular',
|
||||||
|
// url: 'https://angular.io',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// color: '#00d8ff',
|
||||||
|
// content: '健康的身体是实现目标的基石。',
|
||||||
|
// date: '2021-04-01',
|
||||||
|
// group: '技术牛',
|
||||||
|
// icon: 'bx:bxl-react',
|
||||||
|
// title: 'React',
|
||||||
|
// url: 'https://reactjs.org',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// color: '#EBD94E',
|
||||||
|
// content: '路是走出来的，而不是空想出来的。',
|
||||||
|
// date: '2021-04-01',
|
||||||
|
// group: '架构组',
|
||||||
|
// icon: 'ion:logo-javascript',
|
||||||
|
// title: 'Js',
|
||||||
|
// url: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript',
|
||||||
|
// },
|
||||||
];
|
];
|
||||||
|
|
||||||
// 同样，这里的 url 也可以使用以 http 开头的外部链接
|
// 同样，这里的 url 也可以使用以 http 开头的外部链接
|
||||||
@@ -102,26 +121,26 @@ const quickNavItems: WorkbenchQuickNavItem[] = [
|
|||||||
{
|
{
|
||||||
color: '#e18525',
|
color: '#e18525',
|
||||||
icon: 'ion:layers-outline',
|
icon: 'ion:layers-outline',
|
||||||
title: '组件',
|
title: '管理员管理',
|
||||||
url: '/demos/features/icons',
|
url: '/system/user',
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#3fb27f',
|
|
||||||
icon: 'ion:settings-outline',
|
|
||||||
title: '系统管理',
|
|
||||||
url: '/demos/features/login-expired', // 这里的 URL 是示例，实际项目中需要根据实际情况进行调整
|
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// color: '#3fb27f',
|
||||||
|
// icon: 'ion:settings-outline',
|
||||||
|
// title: '系统管理',
|
||||||
|
// url: '/demos/features/login-expired', // 这里的 URL 是示例，实际项目中需要根据实际情况进行调整
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
color: '#4daf1bc9',
|
color: '#4daf1bc9',
|
||||||
icon: 'ion:key-outline',
|
icon: 'ion:key-outline',
|
||||||
title: '权限管理',
|
title: '平台管理',
|
||||||
url: '/demos/access/page-control',
|
url: '/platform',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
color: '#00d8ff',
|
color: '#00d8ff',
|
||||||
icon: 'ion:bar-chart-outline',
|
icon: 'ion:bar-chart-outline',
|
||||||
title: '图表',
|
title: '供应商管理',
|
||||||
url: '/analytics',
|
url: '/supplier',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -159,59 +178,59 @@ const todoItems = ref<WorkbenchTodoItem[]>([
|
|||||||
]);
|
]);
|
||||||
const trendItems: WorkbenchTrendItem[] = [
|
const trendItems: WorkbenchTrendItem[] = [
|
||||||
{
|
{
|
||||||
avatar: 'svg:avatar-1',
|
avatar: 'svg:logo',
|
||||||
content: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
|
content: `萧康云医上线啦！`,
|
||||||
date: '刚刚',
|
date: '2025-1-7',
|
||||||
title: '威廉',
|
title: '萧康云医',
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-2',
|
|
||||||
content: `关注了 <a>威廉</a> `,
|
|
||||||
date: '1个小时前',
|
|
||||||
title: '艾文',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-3',
|
|
||||||
content: `发布了 <a>个人动态</a> `,
|
|
||||||
date: '1天前',
|
|
||||||
title: '克里斯',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-4',
|
|
||||||
content: `发表文章 <a>如何编写一个Vite插件</a> `,
|
|
||||||
date: '2天前',
|
|
||||||
title: 'Vben',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-1',
|
|
||||||
content: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
|
|
||||||
date: '3天前',
|
|
||||||
title: '皮特',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-2',
|
|
||||||
content: `关闭了问题 <a>如何运行项目</a> `,
|
|
||||||
date: '1周前',
|
|
||||||
title: '杰克',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-3',
|
|
||||||
content: `发布了 <a>个人动态</a> `,
|
|
||||||
date: '1周前',
|
|
||||||
title: '威廉',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-4',
|
|
||||||
content: `推送了代码到 <a>Github</a>`,
|
|
||||||
date: '2021-04-01 20:00',
|
|
||||||
title: '威廉',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
avatar: 'svg:avatar-4',
|
|
||||||
content: `发表文章 <a>如何编写使用 Admin Vben</a> `,
|
|
||||||
date: '2021-03-01 20:00',
|
|
||||||
title: 'Vben',
|
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// avatar: 'svg:avatar-2',
|
||||||
|
// content: `关注了 <a>威廉</a> `,
|
||||||
|
// date: '1个小时前',
|
||||||
|
// title: '艾文',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// avatar: 'svg:avatar-3',
|
||||||
|
// content: `发布了 <a>个人动态</a> `,
|
||||||
|
// date: '1天前',
|
||||||
|
// title: '克里斯',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// avatar: 'svg:avatar-4',
|
||||||
|
// content: `发表文章 <a>如何编写一个Vite插件</a> `,
|
||||||
|
// date: '2天前',
|
||||||
|
// title: 'Vben',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// avatar: 'svg:avatar-1',
|
||||||
|
// content: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
|
||||||
|
// date: '3天前',
|
||||||
|
// title: '皮特',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// avatar: 'svg:avatar-2',
|
||||||
|
// content: `关闭了问题 <a>如何运行项目</a> `,
|
||||||
|
// date: '1周前',
|
||||||
|
// title: '杰克',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// avatar: 'svg:avatar-3',
|
||||||
|
// content: `发布了 <a>个人动态</a> `,
|
||||||
|
// date: '1周前',
|
||||||
|
// title: '威廉',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// avatar: 'svg:avatar-4',
|
||||||
|
// content: `推送了代码到 <a>Github</a>`,
|
||||||
|
// date: '2021-04-01 20:00',
|
||||||
|
// title: '威廉',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// avatar: 'svg:avatar-4',
|
||||||
|
// content: `发表文章 <a>如何编写使用 Admin Vben</a> `,
|
||||||
|
// date: '2021-03-01 20:00',
|
||||||
|
// title: 'Vben',
|
||||||
|
// },
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@@ -231,6 +250,20 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
|
|||||||
console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
|
console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取当天的日期和天气
|
||||||
|
function getTodayDate() {
|
||||||
|
const today = new Date();
|
||||||
|
const options: Intl.DateTimeFormatOptions = {
|
||||||
|
weekday: 'long',
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
};
|
||||||
|
return today.toLocaleDateString('zh-CN', options);
|
||||||
|
}
|
||||||
|
const todayDate = getTodayDate();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -239,9 +272,15 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
|
|||||||
:avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
|
:avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
|
||||||
>
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
|
哈喽, {{ userStore.userInfo?.nick_name }} -
|
||||||
|
{{ userStore.userInfo?.roles?.name }}, 开始您一天的工作吧！
|
||||||
|
<!-- <Button type="primary" v-access:code="['Super Admin']">测我是超级管理员</Button>-->
|
||||||
|
<!-- <Button type="primary" v-access:code="['Admin']">测我是管理员</Button>-->
|
||||||
|
</template>
|
||||||
|
<!-- <template #description> 今日晴，20℃ - 32℃！ </template>-->
|
||||||
|
<template #description>
|
||||||
|
{{ todayDate }}
|
||||||
</template>
|
</template>
|
||||||
<template #description> 今日晴，20℃ - 32℃！ </template>
|
|
||||||
</WorkbenchHeader>
|
</WorkbenchHeader>
|
||||||
|
|
||||||
<div class="mt-5 flex flex-col lg:flex-row">
|
<div class="mt-5 flex flex-col lg:flex-row">
|
||||||
@@ -256,10 +295,10 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
|
|||||||
title="快捷导航"
|
title="快捷导航"
|
||||||
@click="navTo"
|
@click="navTo"
|
||||||
/>
|
/>
|
||||||
<WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
|
<!-- <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />-->
|
||||||
<AnalysisChartCard class="mt-5" title="访问来源">
|
<!-- <AnalysisChartCard class="mt-5" title="访问来源">-->
|
||||||
<AnalyticsVisitsSource />
|
<!-- <AnalyticsVisitsSource />-->
|
||||||
</AnalysisChartCard>
|
<!-- </AnalysisChartCard>-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,66 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { Page } from '@vben/common-ui';
|
|
||||||
|
|
||||||
import { Button, Card, message, notification, Space } from 'ant-design-vue';
|
|
||||||
|
|
||||||
type NotificationType = 'error' | 'info' | 'success' | 'warning';
|
|
||||||
|
|
||||||
function info() {
|
|
||||||
message.info('How many roads must a man walk down');
|
|
||||||
}
|
|
||||||
|
|
||||||
function error() {
|
|
||||||
message.error({
|
|
||||||
content: 'Once upon a time you dressed so fine',
|
|
||||||
duration: 2500,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function warning() {
|
|
||||||
message.warning('How many roads must a man walk down');
|
|
||||||
}
|
|
||||||
function success() {
|
|
||||||
message.success('Cause you walked hand in hand With another man in my place');
|
|
||||||
}
|
|
||||||
|
|
||||||
function notify(type: NotificationType) {
|
|
||||||
notification[type]({
|
|
||||||
duration: 2500,
|
|
||||||
message: '说点啥呢',
|
|
||||||
type,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Page
|
|
||||||
description="支持多语言，主题功能集成切换等"
|
|
||||||
title="Ant Design Vue组件使用演示"
|
|
||||||
>
|
|
||||||
<Card class="mb-5" title="按钮">
|
|
||||||
<Space>
|
|
||||||
<Button>Default</Button>
|
|
||||||
<Button type="primary"> Primary </Button>
|
|
||||||
<Button> Info </Button>
|
|
||||||
<Button danger> Error </Button>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
<Card class="mb-5" title="Message">
|
|
||||||
<Space>
|
|
||||||
<Button @click="info"> 信息 </Button>
|
|
||||||
<Button danger @click="error"> 错误 </Button>
|
|
||||||
<Button @click="warning"> 警告 </Button>
|
|
||||||
<Button @click="success"> 成功 </Button>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card class="mb-5" title="Notification">
|
|
||||||
<Space>
|
|
||||||
<Button @click="notify('info')"> 信息 </Button>
|
|
||||||
<Button danger @click="notify('error')"> 错误 </Button>
|
|
||||||
<Button @click="notify('warning')"> 警告 </Button>
|
|
||||||
<Button @click="notify('success')"> 成功 </Button>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
</Page>
|
|
||||||
</template>
|
|
||||||
47
apps/web-antd/src/views/doctor/doctor-reception/api/index.ts
Normal file
47
apps/web-antd/src/views/doctor/doctor-reception/api/index.ts
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
import { requestClient } from '#/api/request';
|
||||||
|
const prefix = 'doctor-reception/';
|
||||||
|
/**
|
||||||
|
* 分页查询用户列表
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function getPatientList(data: any) {
|
||||||
|
return requestClient.get<any>(`${prefix}patient-list`, { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取患者详情
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
export async function getPatientItem(id: number) {
|
||||||
|
return requestClient.get<any>(`${prefix}patient-item`, { params: { id } });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取商品列表
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
export async function getProductListDoctorReception(data: any) {
|
||||||
|
return requestClient.get<any>(`${prefix}product-list`, { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取药品使用方式列表
|
||||||
|
*/
|
||||||
|
export async function getDrugUseList() {
|
||||||
|
return requestClient.get<any>(`${prefix}drug-use-list`, {});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 接诊
|
||||||
|
*/
|
||||||
|
export async function receptionApi(id) {
|
||||||
|
return requestClient.post<any>(`${prefix}reception`, {id:id});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加西药药方
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function addWestPrescription(data: any) {
|
||||||
|
return requestClient.post<any>(`${prefix}add-west-prescription`, data);
|
||||||
|
}
|
||||||
@@ -0,0 +1,292 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { Page, useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { Button } from 'ant-design-vue';
|
||||||
|
|
||||||
|
const item = ref<Record<string, any>>({});
|
||||||
|
|
||||||
|
const [Modal, modalApi] = useVbenModal({
|
||||||
|
fullscreenButton: false,
|
||||||
|
draggable: true,
|
||||||
|
onCancel() {
|
||||||
|
modalApi.close();
|
||||||
|
},
|
||||||
|
onOpenChange(isOpen: boolean) {
|
||||||
|
if (isOpen) {
|
||||||
|
const { values } = modalApi.getData<Record<string, any>>();
|
||||||
|
if (values) item.value = values;
|
||||||
|
console.log(item.value, 'sssssssssssssssss');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleWindowPrint(ele, fileName) {
|
||||||
|
// 获取要打印的元素
|
||||||
|
const printBox = document.querySelector('.print-box');
|
||||||
|
if (!printBox) {
|
||||||
|
console.error('找不到具有 "print-box" 类的元素');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建一个隐藏的iframe
|
||||||
|
const iframe = document.createElement('iframe');
|
||||||
|
iframe.style.position = 'fixed';
|
||||||
|
iframe.style.right = '0';
|
||||||
|
iframe.style.bottom = '0';
|
||||||
|
iframe.style.width = '0';
|
||||||
|
iframe.style.height = '0';
|
||||||
|
iframe.style.border = '0';
|
||||||
|
document.body.append(iframe);
|
||||||
|
|
||||||
|
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
||||||
|
|
||||||
|
// 写入HTML结构
|
||||||
|
iframeDoc.open();
|
||||||
|
iframeDoc.write(`
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>${fileName || '文档打印'}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
${printBox.outerHTML}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`);
|
||||||
|
|
||||||
|
// 复制原页面的所有样式
|
||||||
|
const styles = document.querySelectorAll('style, link[rel="stylesheet"]');
|
||||||
|
styles.forEach((style) => {
|
||||||
|
if (style.tagName === 'LINK') {
|
||||||
|
const link = document.createElement('link');
|
||||||
|
link.rel = 'stylesheet';
|
||||||
|
link.href = style.href; // 使用绝对路径
|
||||||
|
iframeDoc.head.append(link);
|
||||||
|
} else {
|
||||||
|
iframeDoc.head.append(style.cloneNode(true));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
iframeDoc.close();
|
||||||
|
|
||||||
|
// 加载完成后触发打印
|
||||||
|
iframe.contentWindow.addEventListener('load', () => {
|
||||||
|
iframe.contentWindow.print();
|
||||||
|
// 打印后移除iframe
|
||||||
|
setTimeout(() => {
|
||||||
|
iframe.remove();
|
||||||
|
}, 1000); // 确保打印对话框已弹出
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解密方法示例（需要根据实际加密方式实现）
|
||||||
|
const decrypt = (str: string) => str; // 简单base64解码示例
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Modal class="w-[60%]" title="中药处方详情">
|
||||||
|
<Page>
|
||||||
|
<Button type="primary" @click="handleWindowPrint('#demo', '处方')">
|
||||||
|
打印处方
|
||||||
|
</Button>
|
||||||
|
<div class="prescription-container print-box">
|
||||||
|
<!-- 头部信息 -->
|
||||||
|
<div class="prescription-header">
|
||||||
|
<div class="header-top">
|
||||||
|
<span>处方编号: {{ item.prescription_no }}</span>
|
||||||
|
<div class="prescription-type">普通处方</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="clinic-name">{{ item.content?.doctor.name }} 处方笺</h2>
|
||||||
|
<div class="prescription-date">开具日期: {{ item.created_at }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 患者信息 -->
|
||||||
|
<div class="patient-info">
|
||||||
|
<div class="info-row">
|
||||||
|
<span>姓名: {{ decrypt(item.content?.patient.name) }}</span>
|
||||||
|
<span>性别: {{ item.content?.patient.sex === 1 ? '男' : '女' }}</span>
|
||||||
|
<span>年龄: {{ item.content?.patient.age }}</span>
|
||||||
|
<span>类别: {{ item.content?.category }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span>科室: {{ item.content?.doctor.depart?.name }}</span>
|
||||||
|
<span>诊断: {{ item.content?.clinical_diagnose }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 药品列表 -->
|
||||||
|
<div class="medicine-list">
|
||||||
|
<div class="rp-title">Rp</div>
|
||||||
|
<div
|
||||||
|
v-for="(recipe, index) in item.content?.repice"
|
||||||
|
:key="index"
|
||||||
|
class="recipe-item"
|
||||||
|
>
|
||||||
|
<!-- <div class="medicine-item" v-for="drug in JSON.parse(recipe.content)" :key="drug?.id">-->
|
||||||
|
<div class="medicine-item">
|
||||||
|
<!-- {{JSON.parse(recipe.content)}}-->
|
||||||
|
<span class="drug-name">{{
|
||||||
|
JSON.parse(recipe.content).name ||
|
||||||
|
JSON.parse(recipe.content).drug_name
|
||||||
|
}}</span>
|
||||||
|
<span class="drug-quantity">{{ JSON.parse(recipe.content).number
|
||||||
|
}}{{ JSON.parse(recipe.content).unit?.name }}</span>
|
||||||
|
<div v-if="JSON.parse(recipe.content).useWay" class="usage-info">
|
||||||
|
{{ JSON.parse(recipe.content).useWay }}
|
||||||
|
</div>
|
||||||
|
<!-- <span class="drug-name">{{ drug?.name || drug?.drug_name }}</span>-->
|
||||||
|
<!-- <span class="drug-quantity">{{ drug?.number }}{{ drug?.unit?.name }}</span>-->
|
||||||
|
<!-- <div v-if="drug?.useWay" class="usage-info">-->
|
||||||
|
<!-- {{ drug.useWay }}-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</div>
|
||||||
|
<!-- <div class="preparation-info">-->
|
||||||
|
<!-- 煎服方法: 每日{{ recipe.deployment }}次，共{{ recipe.dosage }}剂-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div class="preparation-info">
|
||||||
|
使用方法: {{ recipe.instruction }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 医嘱及签名 -->
|
||||||
|
<div class="footer-section">
|
||||||
|
<div class="medical-advice">
|
||||||
|
<label>医嘱:</label>
|
||||||
|
{{ item.content?.doctor_order }}
|
||||||
|
</div>
|
||||||
|
<div class="signature-area">
|
||||||
|
<div class="signature">
|
||||||
|
<label>开方医生:</label>
|
||||||
|
{{ item.content?.doctor.name }}
|
||||||
|
</div>
|
||||||
|
<div class="signature">
|
||||||
|
<label>审核药师:</label>
|
||||||
|
{{ item?.first_view_info?.name || '' }}
|
||||||
|
</div>
|
||||||
|
<div class="signature">
|
||||||
|
<label>调配人:</label>
|
||||||
|
{{ item.content?.doctor.name }}
|
||||||
|
</div>
|
||||||
|
<div class="signature">
|
||||||
|
<label>核对人:</label>
|
||||||
|
{{ item?.again_view_info?.name || '' }}
|
||||||
|
</div>
|
||||||
|
<div class="signature">
|
||||||
|
<label>发药人:</label>
|
||||||
|
{{ item.content?.doctor.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="price-info">总价: ￥{{ item.total_pay_price }}</div>
|
||||||
|
<div class="validity">处方有效期: {{ item.valid_hours }}小时</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Page>
|
||||||
|
</Modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.prescription-container {
|
||||||
|
padding: 20px;
|
||||||
|
font-family: 'SimSun', serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prescription-header {
|
||||||
|
border-bottom: 2px solid #000;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prescription-type {
|
||||||
|
border: 1px solid #666;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clinic-name {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.patient-info .info-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medicine-list {
|
||||||
|
margin: 20px 0 200px 0;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rp-title {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipe-item {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medicine-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 8px 0;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drug-name {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preparation-info {
|
||||||
|
color: #666;
|
||||||
|
margin-top: 12px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medical-advice {
|
||||||
|
color: #c00;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signature-area {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signature {
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-info {
|
||||||
|
margin-top: 20px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.validity {
|
||||||
|
color: #666;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,549 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { Page, useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ContainerOutlined,
|
||||||
|
MinusOutlined,
|
||||||
|
PlusOutlined,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
import {
|
||||||
|
Badge,
|
||||||
|
Card,
|
||||||
|
CardMeta,
|
||||||
|
Col,
|
||||||
|
Image,
|
||||||
|
InputNumber,
|
||||||
|
InputSearch,
|
||||||
|
message,
|
||||||
|
Popover,
|
||||||
|
Row,
|
||||||
|
Select,
|
||||||
|
SelectOption,
|
||||||
|
} from 'ant-design-vue';
|
||||||
|
|
||||||
|
import {
|
||||||
|
getDrugUseList,
|
||||||
|
getProductListDoctorReception,
|
||||||
|
} from '#/views/doctor/doctor-reception/api';
|
||||||
|
|
||||||
|
const searchKey = ref('');
|
||||||
|
const type = ref(1);
|
||||||
|
const currentDrugs = ref();
|
||||||
|
const activePatientId = ref(0);
|
||||||
|
const drugList = ref([]);
|
||||||
|
const selectList = ref([]);
|
||||||
|
const drugUseNum = ref([]);
|
||||||
|
const drugUseFrequency = ref([]);
|
||||||
|
const drugUseType = ref([]);
|
||||||
|
const drugUnit = ref([]);
|
||||||
|
const drugTime = ref([]);
|
||||||
|
const selectProductId = ref(0);
|
||||||
|
const previewImage = ref('');
|
||||||
|
|
||||||
|
const visible = ref<boolean>(false);
|
||||||
|
const setVisible = (value, instruction = ''): void => {
|
||||||
|
visible.value = value;
|
||||||
|
previewImage.value = instruction;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCurrentDrugs = () => {
|
||||||
|
selectList.value = JSON.parse(
|
||||||
|
localStorage.getItem(`prescriptionData${activePatientId.value}`) || '{}',
|
||||||
|
);
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 获取商品列表
|
||||||
|
* @param searchKey
|
||||||
|
*/
|
||||||
|
function getDrugListByWesternModal(searchKey = '') {
|
||||||
|
if (searchKey === '' && type.value === 1) {
|
||||||
|
drugList.value = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
getCurrentDrugs();
|
||||||
|
getProductListDoctorReception({
|
||||||
|
store_id: 2,
|
||||||
|
type: type.value,
|
||||||
|
name: searchKey,
|
||||||
|
}).then((res) => {
|
||||||
|
// 循环res添加select_number = 0
|
||||||
|
res.forEach((item) => {
|
||||||
|
const matched = selectList.value.find(
|
||||||
|
(value) => value.index_id === item.id,
|
||||||
|
);
|
||||||
|
item.select_number = matched ? matched.select_number : 0;
|
||||||
|
item.drug.number = matched ? matched.number : 1;
|
||||||
|
});
|
||||||
|
drugList.value = res;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function getDrugUseListByWesternModal() {
|
||||||
|
getDrugUseList().then((res) => {
|
||||||
|
drugUseNum.value = res.drug_use_num;
|
||||||
|
drugUseFrequency.value = res.drug_use_frequency;
|
||||||
|
drugUseType.value = res.drug_use_type;
|
||||||
|
drugUnit.value = res.drug_unit;
|
||||||
|
drugTime.value = res.drug_time;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 添加商品
|
||||||
|
* @param {object} data - 商品对象
|
||||||
|
*/
|
||||||
|
function addProducts(data) {
|
||||||
|
// 查找是否已存在
|
||||||
|
const existItem = selectList.value.find((item) => item.index_id === data.id);
|
||||||
|
|
||||||
|
// 新建商品对象避免污染原始数据
|
||||||
|
const newProduct = {
|
||||||
|
index_id: data.id,
|
||||||
|
id: data.drug.id,
|
||||||
|
drug_name: data.drug.drug_name,
|
||||||
|
number: data.drug.number,
|
||||||
|
use_num: drugUseNum.value.find(
|
||||||
|
(item) => item.id === data.drug.frequency_id,
|
||||||
|
),
|
||||||
|
use_type: drugUseType.value.find((item) => item.id === data.drug.type_id),
|
||||||
|
use_frequency: drugUseFrequency.value.find(
|
||||||
|
(item) => item.id === data.drug.frequency_id,
|
||||||
|
),
|
||||||
|
unit: drugUnit.value.find((item) => item.id === data.drug.unit_id),
|
||||||
|
price: data.price,
|
||||||
|
time_id: data.drug.time_id,
|
||||||
|
type_id: data.drug.type_id,
|
||||||
|
frequency_id: data.drug.frequency_id,
|
||||||
|
unit_id: data.drug.unit_id,
|
||||||
|
image: data.drug.image,
|
||||||
|
instruction: data.drug.instruction,
|
||||||
|
type: data.drug.type,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (existItem) {
|
||||||
|
// 增量操作
|
||||||
|
const newNumber = existItem.select_number + 1;
|
||||||
|
|
||||||
|
// 提前验证
|
||||||
|
if (newNumber > 100) {
|
||||||
|
message.error(`${existItem.drug_name}数量不能大于100！`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新选中列表
|
||||||
|
selectList.value = selectList.value.map((item) =>
|
||||||
|
item.index_id === data.id ? { ...item, select_number: newNumber } : item,
|
||||||
|
);
|
||||||
|
|
||||||
|
syncDrugList(data.id, newNumber); // 同步到药品列表
|
||||||
|
message.success(`${existItem.drug_name}数量已增加至${newNumber}！`);
|
||||||
|
} else {
|
||||||
|
// 首次添加，初始化数量为1
|
||||||
|
newProduct.select_number = 1;
|
||||||
|
|
||||||
|
// 添加前验证
|
||||||
|
if (newProduct.select_number > 100) {
|
||||||
|
message.error(`${newProduct.drug_name}数量不能大于100！`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
selectList.value.push(newProduct);
|
||||||
|
console.log(selectList.value, 'ssssssssss');
|
||||||
|
syncDrugList(newProduct.index_id, 1); // 同步到药品列表
|
||||||
|
message.success(`已将${newProduct.drug_name}添加到清单中！`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 减少商品
|
||||||
|
* @param {object} data - 商品对象
|
||||||
|
*/
|
||||||
|
function propProducts(data) {
|
||||||
|
const existItem = selectList.value.find((item) => item.index_id === data.id);
|
||||||
|
if (!existItem) {
|
||||||
|
message.error(`${data.drug.drug_name}不在清单中！`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const newNumber = existItem.select_number - 1;
|
||||||
|
|
||||||
|
// 提前验证
|
||||||
|
if (newNumber < 0) {
|
||||||
|
message.error(`${data.drug.drug_name}数量不能小于0！`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newNumber === 0) {
|
||||||
|
// 移出清单
|
||||||
|
selectList.value = selectList.value.filter(
|
||||||
|
(item) => item.index_id !== data.id,
|
||||||
|
);
|
||||||
|
syncDrugList(data.id, 0); // 同步清零
|
||||||
|
message.success(`${data.drug.drug_name}已从清单移出！`);
|
||||||
|
} else {
|
||||||
|
// 更新数量
|
||||||
|
selectList.value = selectList.value.map((item) =>
|
||||||
|
item.index_id === data.id ? { ...item, select_number: newNumber } : item,
|
||||||
|
);
|
||||||
|
syncDrugList(data.id, newNumber); // 同步更新
|
||||||
|
message.success(`${data.drug.drug_name}数量已减少至${newNumber}！`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 同步更新药品列表
|
||||||
|
* @param {number} productId - 药品ID
|
||||||
|
* @param {number} number - 新的数量
|
||||||
|
*/
|
||||||
|
function syncDrugList(productId, number) {
|
||||||
|
drugList.value = drugList.value.map((item) =>
|
||||||
|
item.id === productId ? { ...item, select_number: number } : item,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [Modal, modalApi] = useVbenModal({
|
||||||
|
fullscreenButton: false,
|
||||||
|
draggable: true,
|
||||||
|
onCancel() {
|
||||||
|
modalApi.close();
|
||||||
|
},
|
||||||
|
onConfirm: async () => {
|
||||||
|
localStorage.setItem(
|
||||||
|
`prescriptionData${activePatientId.value}`,
|
||||||
|
// JSON.stringify(selectData),
|
||||||
|
JSON.stringify(selectList.value),
|
||||||
|
);
|
||||||
|
currentDrugs.value();
|
||||||
|
modalApi.close();
|
||||||
|
message.success('保存成功');
|
||||||
|
},
|
||||||
|
onOpenChange(isOpen: boolean) {
|
||||||
|
if (isOpen) {
|
||||||
|
// getCurrentDrugs
|
||||||
|
currentDrugs.value = isOpen ? modalApi.getData()?.getCurrentDrugs : null;
|
||||||
|
const { values, activePatient_id } =
|
||||||
|
modalApi.getData<Record<string, any>>();
|
||||||
|
if (values) {
|
||||||
|
type.value = values;
|
||||||
|
activePatientId.value = activePatient_id;
|
||||||
|
getDrugListByWesternModal();
|
||||||
|
getDrugUseListByWesternModal();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function selectProductChange(id) {
|
||||||
|
selectProductId.value = id;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选择频次
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
function selectFrequencyChange(id) {
|
||||||
|
drugList.value = drugList.value.map((item) =>
|
||||||
|
// 修改item下面drug的 frequency_id = id
|
||||||
|
item.id === selectProductId.value
|
||||||
|
? {
|
||||||
|
...item,
|
||||||
|
drug: {
|
||||||
|
...item.drug,
|
||||||
|
frequency_id: id,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: item,
|
||||||
|
);
|
||||||
|
selectList.value = selectList.value.map((item) =>
|
||||||
|
// 修改item下面drug的 frequency_id = id
|
||||||
|
item.index_id === selectProductId.value
|
||||||
|
? {
|
||||||
|
...item,
|
||||||
|
frequency_id: id,
|
||||||
|
use_frequency: drugUseFrequency.value.find(
|
||||||
|
(value) => value.id === id,
|
||||||
|
),
|
||||||
|
}
|
||||||
|
: item,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选择使用时间
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
function selectTimeChange(id) {
|
||||||
|
drugList.value = drugList.value.map((item) =>
|
||||||
|
// 修改item下面drug的 frequency_id = id
|
||||||
|
item.id === selectProductId.value
|
||||||
|
? {
|
||||||
|
...item,
|
||||||
|
drug: {
|
||||||
|
...item.drug,
|
||||||
|
time_id: id,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: item,
|
||||||
|
);
|
||||||
|
selectList.value = selectList.value.map((item) =>
|
||||||
|
// 修改item下面drug的 frequency_id = id
|
||||||
|
item.index_id === selectProductId.value
|
||||||
|
? {
|
||||||
|
...item,
|
||||||
|
time_id: id,
|
||||||
|
use_num: drugTime.value.find((value) => value.id === id),
|
||||||
|
}
|
||||||
|
: item,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选择使用方法
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
function selectTypeChange(id) {
|
||||||
|
drugList.value = drugList.value.map((item) =>
|
||||||
|
// 修改item下面drug的 frequency_id = id
|
||||||
|
item.id === selectProductId.value
|
||||||
|
? {
|
||||||
|
...item,
|
||||||
|
drug: {
|
||||||
|
...item.drug,
|
||||||
|
type_id: id,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: item,
|
||||||
|
);
|
||||||
|
selectList.value = selectList.value.map((item) =>
|
||||||
|
// 修改item下面drug的 frequency_id = id
|
||||||
|
item.index_id === selectProductId.value
|
||||||
|
? {
|
||||||
|
...item,
|
||||||
|
type_id: id,
|
||||||
|
use_type: drugUseType.value.find((value) => value.id === id),
|
||||||
|
}
|
||||||
|
: item,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选择单位
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
function selectUnitChange(id) {
|
||||||
|
drugList.value = drugList.value.map((item) =>
|
||||||
|
// 修改item下面drug的 frequency_id = id
|
||||||
|
item.id === selectProductId.value
|
||||||
|
? {
|
||||||
|
...item,
|
||||||
|
drug: {
|
||||||
|
...item.drug,
|
||||||
|
unit_id: id,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: item,
|
||||||
|
);
|
||||||
|
selectList.value = selectList.value.map((item) =>
|
||||||
|
// 修改item下面drug的 frequency_id = id
|
||||||
|
item.index_id === selectProductId.value
|
||||||
|
? {
|
||||||
|
...item,
|
||||||
|
unit_id: id,
|
||||||
|
unit: drugUnit.value.find((value) => value.id === id),
|
||||||
|
}
|
||||||
|
: item,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateProductNumber(id, number) {
|
||||||
|
if (number > 100 || number <= 0) {
|
||||||
|
message.error('数量不能大于100或小于1');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
drugList.value = drugList.value.map((item) =>
|
||||||
|
// 修改item下面drug的 frequency_id = id
|
||||||
|
item.id === id
|
||||||
|
? {
|
||||||
|
...item,
|
||||||
|
drug: {
|
||||||
|
...item.drug,
|
||||||
|
number,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: item,
|
||||||
|
);
|
||||||
|
|
||||||
|
selectList.value = selectList.value.map((item) =>
|
||||||
|
// 修改item下面drug的 frequency_id = id
|
||||||
|
item.index_id === id
|
||||||
|
? {
|
||||||
|
...item,
|
||||||
|
number,
|
||||||
|
}
|
||||||
|
: item,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- <Modal class="w-[60%]" title="西（中成）药列表">-->
|
||||||
|
<Modal class="w-[60%]" title="商品列表">
|
||||||
|
<Image
|
||||||
|
:preview="{
|
||||||
|
visible,
|
||||||
|
onVisibleChange: setVisible,
|
||||||
|
}"
|
||||||
|
:src="previewImage"
|
||||||
|
:style="{ display: 'none' }"
|
||||||
|
:width="200"
|
||||||
|
/>
|
||||||
|
<Page>
|
||||||
|
<Row :gutter="12">
|
||||||
|
<Col :span="24">
|
||||||
|
<InputSearch
|
||||||
|
:model="searchKey"
|
||||||
|
enter-button
|
||||||
|
placeholder="请输入商品名称或拼音首拼"
|
||||||
|
@search="getDrugListByWesternModal"
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col v-for="item in drugList" :key="item.id" :span="6">
|
||||||
|
<Badge :count="item.select_number" class="mt-5">
|
||||||
|
<Card hoverable>
|
||||||
|
<template #cover>
|
||||||
|
<Image :height="200" :src="item.drug?.image" />
|
||||||
|
</template>
|
||||||
|
<template #actions>
|
||||||
|
<MinusOutlined key="prop" @click="propProducts(item)" />
|
||||||
|
<ContainerOutlined
|
||||||
|
@click="setVisible(true, item.drug.instruction)"
|
||||||
|
/>
|
||||||
|
<PlusOutlined key="add" @click="addProducts(item)" />
|
||||||
|
<!-- <EllipsisOutlined key="ellipsis" />-->
|
||||||
|
</template>
|
||||||
|
<CardMeta
|
||||||
|
:description="item.drug?.pinyin_simple"
|
||||||
|
:title="item.drug?.drug_name"
|
||||||
|
>
|
||||||
|
<template #avatar>
|
||||||
|
<a-avatar src="https://joeschmoe.io/api/v1/random" />
|
||||||
|
</template>
|
||||||
|
</CardMeta>
|
||||||
|
<div class="card-box mt-5" style="padding: 10px 5px">
|
||||||
|
<Popover>
|
||||||
|
<p class="drug-function text-xs">
|
||||||
|
功效：{{ item.drug?.function }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<template #content>
|
||||||
|
<p>功效：{{ item.drug?.function }}</p>
|
||||||
|
<p>用法：{{ item.drug?.usage }}</p>
|
||||||
|
</template>
|
||||||
|
</Popover>
|
||||||
|
<p class="text-source mt-5">{{ item.drug?.source }}</p>
|
||||||
|
<!-- 选择频次-->
|
||||||
|
<Select
|
||||||
|
:value="item.drug?.frequency_id"
|
||||||
|
class="mt-3 w-1/3"
|
||||||
|
@change="selectFrequencyChange"
|
||||||
|
@dropdown-visible-change="selectProductChange(item.id)"
|
||||||
|
>
|
||||||
|
<SelectOption
|
||||||
|
v-for="(value, index) in drugUseFrequency"
|
||||||
|
:key="index"
|
||||||
|
:value="value.id"
|
||||||
|
>
|
||||||
|
{{ value.name }}
|
||||||
|
</SelectOption>
|
||||||
|
</Select>
|
||||||
|
<!-- 选择时间-->
|
||||||
|
<Select
|
||||||
|
:value="item.drug?.time_id"
|
||||||
|
class="mt-3 w-1/3"
|
||||||
|
@change="selectTimeChange"
|
||||||
|
@dropdown-visible-change="selectProductChange(item.id)"
|
||||||
|
>
|
||||||
|
<SelectOption
|
||||||
|
v-for="(value, index) in drugTime"
|
||||||
|
:key="index"
|
||||||
|
:value="value.id"
|
||||||
|
>
|
||||||
|
{{ value.name }}
|
||||||
|
</SelectOption>
|
||||||
|
</Select>
|
||||||
|
<!-- 选择使用方法-->
|
||||||
|
<Select
|
||||||
|
:value="item.drug?.type_id"
|
||||||
|
class="mt-3 w-1/3"
|
||||||
|
@change="selectTypeChange"
|
||||||
|
@dropdown-visible-change="selectProductChange(item.id)"
|
||||||
|
>
|
||||||
|
<SelectOption
|
||||||
|
v-for="(value, index) in drugUseType"
|
||||||
|
:key="index"
|
||||||
|
:value="value.id"
|
||||||
|
>
|
||||||
|
{{ value.name }}
|
||||||
|
</SelectOption>
|
||||||
|
</Select>
|
||||||
|
<div class="mt-3">
|
||||||
|
<!-- 选择单位-->
|
||||||
|
<InputNumber :value="item.drug.number" class="w-1/2">
|
||||||
|
<template #addonBefore>
|
||||||
|
<MinusOutlined
|
||||||
|
key="prop"
|
||||||
|
@click="
|
||||||
|
updateProductNumber(
|
||||||
|
item.id,
|
||||||
|
item.drug.number > 1 ? item.drug.number - 1 : 0,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #addonAfter>
|
||||||
|
<PlusOutlined
|
||||||
|
key="add"
|
||||||
|
@click="
|
||||||
|
updateProductNumber(
|
||||||
|
item.id,
|
||||||
|
item.drug.number < 100 ? item.drug.number + 1 : 100,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</InputNumber>
|
||||||
|
<Select
|
||||||
|
:value="item.drug?.unit_id"
|
||||||
|
class="w-1/2"
|
||||||
|
@change="selectUnitChange"
|
||||||
|
@dropdown-visible-change="selectProductChange(item.id)"
|
||||||
|
>
|
||||||
|
<SelectOption
|
||||||
|
v-for="(value, index) in drugUnit"
|
||||||
|
:key="index"
|
||||||
|
:value="value.id"
|
||||||
|
>
|
||||||
|
{{ value.name }}
|
||||||
|
</SelectOption>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Badge>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Page>
|
||||||
|
</Modal>
|
||||||
|
</template>
|
||||||
|
<style lang="scss">
|
||||||
|
.drug-function {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.text-source {
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
840
apps/web-antd/src/views/doctor/doctor-reception/index.vue
Normal file
840
apps/web-antd/src/views/doctor/doctor-reception/index.vue
Normal file
@@ -0,0 +1,840 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {computed, ref, watch} from 'vue';
|
||||||
|
|
||||||
|
import { Page, useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Descriptions,
|
||||||
|
Empty,
|
||||||
|
Image,
|
||||||
|
ImagePreviewGroup,
|
||||||
|
InputNumber,
|
||||||
|
message,
|
||||||
|
Tag,
|
||||||
|
Textarea,
|
||||||
|
Timeline,
|
||||||
|
TimelineItem,
|
||||||
|
RadioGroup,
|
||||||
|
RadioButton,
|
||||||
|
} from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { getRegisterStatus } from '#/util/tool';
|
||||||
|
import {
|
||||||
|
addWestPrescription,
|
||||||
|
getPatientItem,
|
||||||
|
getPatientList,
|
||||||
|
receptionApi,
|
||||||
|
} from '#/views/doctor/doctor-reception/api';
|
||||||
|
|
||||||
|
import PrescrtionDetail from './components/PrescrtionDetail.vue';
|
||||||
|
import WesternModal from './components/WesternModal.vue';
|
||||||
|
|
||||||
|
interface Patient {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
mobile: string;
|
||||||
|
status: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UserPatientHealthInquiry {
|
||||||
|
id: number;
|
||||||
|
user_patient_id: number;
|
||||||
|
liver_function: number;
|
||||||
|
renal_function: number;
|
||||||
|
liver_index: string;
|
||||||
|
renal_index: string;
|
||||||
|
person_history: string;
|
||||||
|
allergic_history: string;
|
||||||
|
person_status: number;
|
||||||
|
allergic_status: number;
|
||||||
|
family_status: number;
|
||||||
|
family_history: number;
|
||||||
|
is_delete: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tabType = ref(0);
|
||||||
|
const category = ref(0);
|
||||||
|
const receptionStatus = ref(0);
|
||||||
|
const updateTabType = ref(false);
|
||||||
|
// 患者数据
|
||||||
|
const patients = ref<Patient[]>([]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取患者列表
|
||||||
|
*/
|
||||||
|
function getPatientListByReception() {
|
||||||
|
getPatientList({}).then((res) => {
|
||||||
|
patients.value = res;
|
||||||
|
|
||||||
|
if (updateTabType.value === false) {
|
||||||
|
const activePatientId = localStorage.getItem(`doctorReception-id`);
|
||||||
|
if (activePatientId !== null) {
|
||||||
|
// 从patients.value中找到当前选中的id并且触发selectPatient方法
|
||||||
|
patients.value.forEach((patient) => {
|
||||||
|
if (patient.id === Number.parseInt(activePatientId)) {
|
||||||
|
selectPatient(patient, false);
|
||||||
|
updateTabType.value = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
getPatientListByReception();
|
||||||
|
// 每5秒更新数据
|
||||||
|
setInterval(getPatientListByReception, 30_000);
|
||||||
|
|
||||||
|
// 药品分类
|
||||||
|
const categories = [
|
||||||
|
{ label: '中药', value: 1 },
|
||||||
|
{ label: '中成(西)药', value: 2 },
|
||||||
|
// { label: '西药', value: 2 },
|
||||||
|
{ label: '保健商品', value: 3 },
|
||||||
|
// { label: '中成药商品', value: 4 },
|
||||||
|
{ label: '服务包', value: 5 },
|
||||||
|
];
|
||||||
|
|
||||||
|
// 当前状态
|
||||||
|
const activePatient = ref<null | Patient>(null);
|
||||||
|
const patientInfo = ref<null | Patient>(null);
|
||||||
|
const userPatientHealthInquiry = ref<null | UserPatientHealthInquiry>(null);
|
||||||
|
const activeCategory = ref(2);
|
||||||
|
const diagnosis = ref('');
|
||||||
|
const medicalAdvice = ref('');
|
||||||
|
const treatmentPrice = ref(0);
|
||||||
|
const selectPatientId = ref(0);
|
||||||
|
const prescriptionList = ref([]);
|
||||||
|
|
||||||
|
const totalCost = computed(() => {
|
||||||
|
if (currentDrugs.value.length === 0) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return currentDrugs.value.reduce(
|
||||||
|
(sum, drug) => sum + drug.price * (drug.select_number || 1),
|
||||||
|
0,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const visible = ref<boolean>(false);
|
||||||
|
const previewImage = ref([]);
|
||||||
|
/**
|
||||||
|
* 说明书预览
|
||||||
|
* @param value
|
||||||
|
* @param instruction
|
||||||
|
*/
|
||||||
|
const setVisible = (value, instruction = ''): void => {
|
||||||
|
previewImage.value = [];
|
||||||
|
if (instruction == '') {
|
||||||
|
message.error('该产品没有说明书！');
|
||||||
|
} else {
|
||||||
|
if (typeof instruction === 'string') {
|
||||||
|
// 如果有逗号，则进行分割 没有则追加到previewImage
|
||||||
|
console.log(instruction, value, 'sssssss');
|
||||||
|
if (instruction.includes(',')) {
|
||||||
|
instruction = instruction.split(',');
|
||||||
|
previewImage.value = instruction;
|
||||||
|
} else {
|
||||||
|
previewImage.value.push(instruction);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
visible.value = value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 选择华女这操作
|
||||||
|
* @param patient
|
||||||
|
* @param isUpdateTabType
|
||||||
|
*/
|
||||||
|
const selectPatient = (patient: Patient, isUpdateTabType = true) => {
|
||||||
|
selectPatientId.value = patient.id;
|
||||||
|
receptionStatus.value = patient.status;
|
||||||
|
if (isUpdateTabType === true) {
|
||||||
|
tabType.value = 1;
|
||||||
|
} else {
|
||||||
|
// 获取doctorReception-type并赋值
|
||||||
|
if (localStorage.getItem(`doctorReception-type`) !== null) {
|
||||||
|
tabType.value = Number.parseInt(
|
||||||
|
localStorage.getItem(`doctorReception-type`),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
activePatient.value = patient.user_patient;
|
||||||
|
getPatientItem(patient.id).then((value) => {
|
||||||
|
patientInfo.value = value;
|
||||||
|
userPatientHealthInquiry.value = value.user_patient_health_inquiry;
|
||||||
|
prescriptionList.value = value.prescription;
|
||||||
|
});
|
||||||
|
|
||||||
|
localStorage.setItem(
|
||||||
|
`doctorReception-id`,
|
||||||
|
// JSON.stringify(selectData),
|
||||||
|
JSON.stringify(patient.id),
|
||||||
|
);
|
||||||
|
getCurrentDrugs();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 数量增加
|
||||||
|
const increment = (index: number) => {
|
||||||
|
currentDrugs.value[index].select_number++;
|
||||||
|
saveToLocalStorage();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 数量减少
|
||||||
|
const decrement = (index: number) => {
|
||||||
|
if (currentDrugs.value[index].select_number > 1) {
|
||||||
|
currentDrugs.value[index].select_number--;
|
||||||
|
saveToLocalStorage();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 保存到本地存储
|
||||||
|
const saveToLocalStorage = () => {
|
||||||
|
localStorage.setItem(
|
||||||
|
`prescriptionData${activePatient.value?.id}`,
|
||||||
|
JSON.stringify(currentDrugs.value),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 删除药品（本地）
|
||||||
|
* @param index
|
||||||
|
*/
|
||||||
|
const removeDrug = (index: number) => {
|
||||||
|
currentDrugs.value.splice(index, 1);
|
||||||
|
updateLocalStorage();
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 修改缓存的处方信息
|
||||||
|
*/
|
||||||
|
const updateLocalStorage = () => {
|
||||||
|
localStorage.setItem(
|
||||||
|
`prescriptionData${activePatient.value?.id}`,
|
||||||
|
JSON.stringify(currentDrugs.value),
|
||||||
|
);
|
||||||
|
getCurrentDrugs();
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentDrugs = ref([]);
|
||||||
|
/**
|
||||||
|
* 获取缓存的处方信息
|
||||||
|
*/
|
||||||
|
const getCurrentDrugs = () => {
|
||||||
|
currentDrugs.value = JSON.parse(
|
||||||
|
localStorage.getItem(`prescriptionData${activePatient.value?.id}`) || '[]',
|
||||||
|
);
|
||||||
|
};
|
||||||
|
getCurrentDrugs();
|
||||||
|
/**
|
||||||
|
* 发送处方
|
||||||
|
*/
|
||||||
|
const sendPrescription = () => {
|
||||||
|
if (diagnosis.value === '') {
|
||||||
|
message.error('诊断结果不能为空');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (medicalAdvice.value === '') {
|
||||||
|
message.error('医嘱不能为空');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 发送处方逻辑
|
||||||
|
console.log('处方已发送', {
|
||||||
|
patient: activePatient.value,
|
||||||
|
drugs: currentDrugs.value,
|
||||||
|
diagnosis: diagnosis.value,
|
||||||
|
medicalAdvice: medicalAdvice.value,
|
||||||
|
total: totalCost.value,
|
||||||
|
});
|
||||||
|
addWestPrescription({
|
||||||
|
patient: activePatient.value,
|
||||||
|
drugs: currentDrugs.value,
|
||||||
|
diagnosis: diagnosis.value,
|
||||||
|
medicalAdvice: medicalAdvice.value,
|
||||||
|
total: totalCost.value,
|
||||||
|
category: category.value,
|
||||||
|
drug_type: tabType.value,
|
||||||
|
register_id: Number.parseInt(localStorage.getItem(`doctorReception-id`)),
|
||||||
|
treatment_price: treatmentPrice.value,
|
||||||
|
}).then(() => {
|
||||||
|
message.success('处方已发送');
|
||||||
|
// 清空当前数据
|
||||||
|
// currentDrugs.value = [];
|
||||||
|
// diagnosis.value = '';
|
||||||
|
// medicalAdvice.value = '';
|
||||||
|
// updateLocalStorage();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 进入处方界面
|
||||||
|
const showPrescription = () => {
|
||||||
|
// 打开处方模态框逻辑
|
||||||
|
tabType.value = 2;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 监听tabType.value变化
|
||||||
|
watch(
|
||||||
|
() => tabType.value,
|
||||||
|
(newValue) => {
|
||||||
|
if (newValue === 1) {
|
||||||
|
getPatientItem(selectPatientId.value).then((value) => {
|
||||||
|
patientInfo.value = value;
|
||||||
|
userPatientHealthInquiry.value = value.user_patient_health_inquiry;
|
||||||
|
prescriptionList.value = value.prescription;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
localStorage.setItem(
|
||||||
|
`doctorReception-type`,
|
||||||
|
// JSON.stringify(selectData),
|
||||||
|
JSON.stringify(newValue),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const [WesternDrugModal, WesternDrugModalApi] = useVbenModal({
|
||||||
|
connectedComponent: WesternModal,
|
||||||
|
});
|
||||||
|
const [PrescrtionDetailModal, PrescrtionDetailModalApi] = useVbenModal({
|
||||||
|
connectedComponent: PrescrtionDetail,
|
||||||
|
});
|
||||||
|
const openWesternModal = () => {
|
||||||
|
// 打开西药处方模态框逻辑
|
||||||
|
WesternDrugModalApi.setData({
|
||||||
|
values: activeCategory.value,
|
||||||
|
activePatient_id: activePatient.value?.id,
|
||||||
|
getCurrentDrugs,
|
||||||
|
});
|
||||||
|
WesternDrugModalApi.open();
|
||||||
|
};
|
||||||
|
const openPrescriptionDetail = (values) => {
|
||||||
|
// 打开西药处方模态框逻辑
|
||||||
|
PrescrtionDetailModalApi.setData({
|
||||||
|
values,
|
||||||
|
});
|
||||||
|
PrescrtionDetailModalApi.open();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据创制string来把字符串的逗号分开变成数组
|
||||||
|
function splitString(str: string) {
|
||||||
|
if (!str) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
return str.split(',');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 切换tab
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
function tabChange(id) {
|
||||||
|
localStorage.setItem(
|
||||||
|
`prescriptionData${activePatient.value?.id}`,
|
||||||
|
JSON.stringify([]),
|
||||||
|
);
|
||||||
|
currentDrugs.value = [];
|
||||||
|
activeCategory.value = id;
|
||||||
|
}
|
||||||
|
|
||||||
|
function reception() {
|
||||||
|
receptionApi(localStorage.getItem(`doctorReception-id`)).then((value) => {
|
||||||
|
message.success('接诊成功');
|
||||||
|
updateTabType.value = false;
|
||||||
|
getPatientListByReception();
|
||||||
|
receptionStatus.value = 2;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="container-box">
|
||||||
|
<!-- 左侧患者列表 -->
|
||||||
|
<div class="patient-panel">
|
||||||
|
<div
|
||||||
|
v-for="patient in patients"
|
||||||
|
:key="patient.user_patient.id"
|
||||||
|
:class="{ active: selectPatientId === patient.id }"
|
||||||
|
class="patient-card"
|
||||||
|
@click="selectPatient(patient)"
|
||||||
|
>
|
||||||
|
<div class="patient-info">
|
||||||
|
<h3>{{ patient.user_patient.name }}</h3>
|
||||||
|
<p class="phone">{{ patient.user_patient.mobile }}</p>
|
||||||
|
<span :class="getRegisterStatus(patient.status)" class="status">{{
|
||||||
|
getRegisterStatus(patient.status)
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧处方区域 -->
|
||||||
|
<Page v-if="tabType === 1" class="prescription-panel">
|
||||||
|
<div class="prescription-header">
|
||||||
|
<Button v-if="receptionStatus === 1" class="send-btn" type="primary" @click="reception">
|
||||||
|
接诊
|
||||||
|
</Button>
|
||||||
|
<Button v-if="receptionStatus === 2" class="send-btn" type="primary" @click="showPrescription">
|
||||||
|
开具处方
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div class="prescription-content">
|
||||||
|
<Descriptions
|
||||||
|
:column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 2 }"
|
||||||
|
bordered
|
||||||
|
title="患者信息"
|
||||||
|
>
|
||||||
|
<Descriptions.Item label="患者姓名">
|
||||||
|
{{ activePatient.name }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="患者年龄">
|
||||||
|
{{ activePatient.age }}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="患者性别">
|
||||||
|
{{
|
||||||
|
activePatient.sex === 1
|
||||||
|
? '男'
|
||||||
|
: activePatient.sex === 2
|
||||||
|
? '女'
|
||||||
|
: '未填写'
|
||||||
|
}}
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
<Descriptions
|
||||||
|
v-if="userPatientHealthInquiry"
|
||||||
|
:column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 2 }"
|
||||||
|
bordered
|
||||||
|
class="mt-5"
|
||||||
|
title="健康信息"
|
||||||
|
>
|
||||||
|
<Descriptions.Item label="肝功能">
|
||||||
|
<span>{{
|
||||||
|
userPatientHealthInquiry.liver_function === 0 ? '正常' : '异常'
|
||||||
|
}}</span>
|
||||||
|
<p
|
||||||
|
v-if="userPatientHealthInquiry.liver_function === 1"
|
||||||
|
class="mt-3"
|
||||||
|
>
|
||||||
|
<Tag
|
||||||
|
v-for="item in splitString(
|
||||||
|
userPatientHealthInquiry.liver_index,
|
||||||
|
)"
|
||||||
|
color="#455cda"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</Tag>
|
||||||
|
</p>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="肾功能">
|
||||||
|
<span>{{
|
||||||
|
userPatientHealthInquiry.renal_function === 0 ? '正常' : '异常'
|
||||||
|
}}</span>
|
||||||
|
<p
|
||||||
|
v-if="userPatientHealthInquiry.renal_function === 1"
|
||||||
|
class="mt-3"
|
||||||
|
>
|
||||||
|
<Tag
|
||||||
|
v-for="item in splitString(
|
||||||
|
userPatientHealthInquiry.renal_index,
|
||||||
|
)"
|
||||||
|
color="#455cda"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</Tag>
|
||||||
|
</p>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="既往史">
|
||||||
|
<span>{{
|
||||||
|
userPatientHealthInquiry.person_status === 0 ? '无' : '有'
|
||||||
|
}}</span>
|
||||||
|
<p v-if="userPatientHealthInquiry.person_status === 1" class="mt-3">
|
||||||
|
<Tag
|
||||||
|
v-for="item in splitString(
|
||||||
|
userPatientHealthInquiry.person_history,
|
||||||
|
)"
|
||||||
|
color="#455cda"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</Tag>
|
||||||
|
</p>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="过敏史">
|
||||||
|
<span>{{
|
||||||
|
userPatientHealthInquiry.allergic_status === 0 ? '无' : '有'
|
||||||
|
}}</span>
|
||||||
|
<p
|
||||||
|
v-if="userPatientHealthInquiry.allergic_status === 1"
|
||||||
|
class="mt-3"
|
||||||
|
>
|
||||||
|
<Tag
|
||||||
|
v-for="item in splitString(
|
||||||
|
userPatientHealthInquiry.allergic_history,
|
||||||
|
)"
|
||||||
|
color="#455cda"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</Tag>
|
||||||
|
</p>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="家庭遗传史">
|
||||||
|
<span>{{
|
||||||
|
userPatientHealthInquiry.family_status === 0 ? '无' : '有'
|
||||||
|
}}</span>
|
||||||
|
<p v-if="userPatientHealthInquiry.family_status === 1" class="mt-3">
|
||||||
|
<Tag
|
||||||
|
v-for="item in splitString(
|
||||||
|
userPatientHealthInquiry.family_history,
|
||||||
|
)"
|
||||||
|
color="#455cda"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</Tag>
|
||||||
|
</p>
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
|
||||||
|
<Descriptions
|
||||||
|
:column="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }"
|
||||||
|
class="mt-5"
|
||||||
|
title="处方记录"
|
||||||
|
>
|
||||||
|
<Descriptions.Item>
|
||||||
|
<Timeline>
|
||||||
|
<TimelineItem v-for="item in prescriptionList" :key="item.id">
|
||||||
|
<Tag color="#455cda">{{ item.prescription_no }}</Tag>
|
||||||
|
<Button type="link" @click="openPrescriptionDetail(item)">
|
||||||
|
查看处方
|
||||||
|
</Button>
|
||||||
|
<span class="time-line-item-created">{{
|
||||||
|
item.created_at
|
||||||
|
}}</span>
|
||||||
|
</TimelineItem>
|
||||||
|
</Timeline>
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
</div>
|
||||||
|
</Page>
|
||||||
|
|
||||||
|
<Page v-if="tabType === 2" class="prescription-panel">
|
||||||
|
<Button class="mb-10" type="primary" @click="tabType = 1">
|
||||||
|
返回上一页
|
||||||
|
</Button>
|
||||||
|
<div class="prescription-header">
|
||||||
|
<h2>{{ activePatient.name }} 的处方</h2>
|
||||||
|
<Button class="send-btn" type="primary" @click="sendPrescription">
|
||||||
|
发送处方
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 药品分类导航 -->
|
||||||
|
<div class="drug-categories">
|
||||||
|
<button
|
||||||
|
v-for="category in categories"
|
||||||
|
:key="category.value"
|
||||||
|
:class="{ active: activeCategory === category.value }"
|
||||||
|
@click="tabChange(category.value)"
|
||||||
|
>
|
||||||
|
{{ category.label }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-5">
|
||||||
|
<Button type="primary" @click="openWesternModal"> 添加药品 </Button>
|
||||||
|
<RadioGroup v-model:value="category">
|
||||||
|
<RadioButton value="1">自费</RadioButton>
|
||||||
|
<RadioButton value="2">医保</RadioButton>
|
||||||
|
</RadioGroup>
|
||||||
|
</div>
|
||||||
|
<div style="width: 0; height: 0; overflow: hidden">
|
||||||
|
<ImagePreviewGroup
|
||||||
|
:preview="{
|
||||||
|
visible,
|
||||||
|
onVisibleChange: setVisible,
|
||||||
|
}"
|
||||||
|
:style="{ display: 'none' }"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
v-for="image in previewImage"
|
||||||
|
v-if="visible === true"
|
||||||
|
:src="image"
|
||||||
|
:width="200"
|
||||||
|
/>
|
||||||
|
</ImagePreviewGroup>
|
||||||
|
</div>
|
||||||
|
<!-- 已选药品列表 -->
|
||||||
|
<div class="selected-drugs">
|
||||||
|
<div class="drug-table">
|
||||||
|
<div class="table-header">
|
||||||
|
<span>商品图片</span>
|
||||||
|
<span>商品名称</span>
|
||||||
|
<span>数量</span>
|
||||||
|
<span>单价</span>
|
||||||
|
<span>操作</span>
|
||||||
|
</div>
|
||||||
|
<div class="table-body">
|
||||||
|
<div
|
||||||
|
v-for="(drug, index) in currentDrugs"
|
||||||
|
:key="drug.id"
|
||||||
|
class="table-row"
|
||||||
|
>
|
||||||
|
<div style="width: 120px; margin: 0 auto;">
|
||||||
|
<Image :src="drug.image" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<span>药品名称：{{ drug.drug_name }}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span
|
||||||
|
>用法：{{
|
||||||
|
`${drug.use_type?.name}，${drug.use_num?.name}，${drug.use_type?.name}，每次${drug.number}${drug.unit?.name}`
|
||||||
|
}}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="quantity-control">
|
||||||
|
<Button type="primary" @click="decrement(index)">-</Button>
|
||||||
|
<span style="margin: 0 20px">{{ drug.select_number }}</span>
|
||||||
|
<Button type="primary" @click="increment(index)">+</Button>
|
||||||
|
</div>
|
||||||
|
<span>{{ drug.price }}</span>
|
||||||
|
<div>
|
||||||
|
<Button type="link" @click="removeDrug(index)">删除</Button>
|
||||||
|
<Button
|
||||||
|
v-if="drug.instruction !== ''"
|
||||||
|
type="link"
|
||||||
|
@click="setVisible(true, drug.instruction)"
|
||||||
|
>
|
||||||
|
查看说明书
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 诊断和医嘱 -->
|
||||||
|
<div class="diagnosis-area">
|
||||||
|
<Textarea
|
||||||
|
v-model:value="diagnosis"
|
||||||
|
placeholder="输入诊断结果..."
|
||||||
|
/>
|
||||||
|
<Textarea
|
||||||
|
v-model:value="medicalAdvice"
|
||||||
|
placeholder="输入医嘱..."
|
||||||
|
/>
|
||||||
|
<InputNumber
|
||||||
|
v-model:value="treatmentPrice"
|
||||||
|
placeholder="请输入诊疗价格"
|
||||||
|
>
|
||||||
|
<template #addonAfter> /元 </template>
|
||||||
|
</InputNumber>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 费用总计 -->
|
||||||
|
<div class="total-cost">总计：¥{{ totalCost.toFixed(2) }}</div>
|
||||||
|
</Page>
|
||||||
|
<div v-else-if="tabType === 0" class="prescription-panel">
|
||||||
|
<Empty />
|
||||||
|
</div>
|
||||||
|
<WesternDrugModal />
|
||||||
|
<PrescrtionDetailModal />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container-box {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 300px 1fr;
|
||||||
|
min-height: 90vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.patient-panel {
|
||||||
|
border-right: 1px solid #e4e7ed;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.dark .patient-panel {
|
||||||
|
border-right: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.patient-card {
|
||||||
|
padding: 1rem;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.dark .patient-card {
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.patient-card.active {
|
||||||
|
border-left: 4px solid #455cda;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.待支付 {
|
||||||
|
background: #f4f4f5;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
.status.待接诊 {
|
||||||
|
background: #fef0f0;
|
||||||
|
color: #f56c6c;
|
||||||
|
}
|
||||||
|
.status.接诊中 {
|
||||||
|
background: #f0f9eb;
|
||||||
|
color: #67c23a;
|
||||||
|
}
|
||||||
|
.status.已结束 {
|
||||||
|
background: #f4f4f5;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
.status.已取消 {
|
||||||
|
background: #fef0f0;
|
||||||
|
color: #f56c6c;
|
||||||
|
}
|
||||||
|
.status.待评价 {
|
||||||
|
background: #f4f4f5;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
.status.已评价 {
|
||||||
|
background: #f4f4f5;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
.status.已拒诊 {
|
||||||
|
background: #f4f4f5;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .status.待接诊,
|
||||||
|
.dark .status.已接诊 {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prescription-panel {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drug-categories {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drug-categories button {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .drug-categories button {
|
||||||
|
border: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drug-categories button.active {
|
||||||
|
color: #fff;
|
||||||
|
border-color: transparent;
|
||||||
|
animation: pulse 0.5s /*infinite*/;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background: #455cda;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.drug-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 12px;
|
||||||
|
margin: 8px 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drug-item:hover {
|
||||||
|
transform: translateX(4px);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-drugs {
|
||||||
|
margin: 1rem 0;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .selected-drugs {
|
||||||
|
border: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-body {
|
||||||
|
max-height: 30vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-header {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr;
|
||||||
|
padding: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr;
|
||||||
|
padding: 12px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
text-align: center;
|
||||||
|
height: auto;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .table-row {
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-btn {
|
||||||
|
cursor: pointer;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diagnosis-area textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
padding: 8px;
|
||||||
|
margin: 8px 0;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .diagnosis-area textarea {
|
||||||
|
border: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-cost {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #f56c6c;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prescription-content {
|
||||||
|
margin-top: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-line-item-created {
|
||||||
|
color: #909399;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
61
apps/web-antd/src/views/finance/withdrawal/api/index.ts
Normal file
61
apps/web-antd/src/views/finance/withdrawal/api/index.ts
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import { requestClient } from '#/api/request';
|
||||||
|
const prefix = 'withdrawal-application/';
|
||||||
|
/**
|
||||||
|
* 分页查询用户列表
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function getWithdrawalApplicationList(data: any) {
|
||||||
|
return requestClient.get<any>(`${prefix}list`, { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取提现记录详情
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
export async function getWithdrawalApplicationInfo(id: number) {
|
||||||
|
return requestClient.get<any>(`${prefix}detail`, { params: { id } });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增提现记录
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function createWithdrawalApplicationWithdrawal(
|
||||||
|
data: Record<string, any>,
|
||||||
|
) {
|
||||||
|
return requestClient.post<any>(`${prefix}withdrawal`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增提现记录
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function createWithdrawalApplication(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}create`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编辑提现记录
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function updateWithdrawalApplication(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}update`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除提现记录
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function deleteWithdrawalApplication(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}delete`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除提现记录
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
export async function resetPassword(id: number) {
|
||||||
|
return requestClient.post<any>(`${prefix}reset-password`, {
|
||||||
|
id,
|
||||||
|
});
|
||||||
|
}
|
||||||
51
apps/web-antd/src/views/finance/withdrawal/api/settlement.ts
Normal file
51
apps/web-antd/src/views/finance/withdrawal/api/settlement.ts
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
import { requestClient } from '#/api/request';
|
||||||
|
const prefix = 'settlement/';
|
||||||
|
/**
|
||||||
|
* 分页查询用户列表
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function getSettlementList(data: any) {
|
||||||
|
return requestClient.get<any>(`${prefix}list`, { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取管理员详情
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
export async function getSettlementInfo(id: number) {
|
||||||
|
return requestClient.get<any>(`${prefix}detail`, { params: { id } });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增管理员
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function createSettlement(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}create`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编辑管理员
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function updateSettlement(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}update`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除管理员
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function deleteSettlement(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}delete`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除管理员
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
export async function resetPassword(id: number) {
|
||||||
|
return requestClient.post<any>(`${prefix}reset-password`, {
|
||||||
|
id,
|
||||||
|
});
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user