chore(frontend): 落地 ADS 治理体系并收录前端底座基线代码
This commit is contained in:
zhoulei
@@ -0,0 +1,17 @@
|
||||
#需要过滤文件
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
#编辑器目录和文件
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.local
|
||||
|
||||
pnpm-lock.yaml
|
||||
@@ -0,0 +1,55 @@
|
||||
# Repository Guidelines
|
||||
|
||||
AGENTS.md is the cross-vendor contributor guide (Claude, Codex, and others read it). Keep it in English by convention. It overlaps CLAUDE.md on purpose — this is the canonical version for non-Claude agents.
|
||||
|
||||
## Authority & Required Reading
|
||||
Rules in `.project.agents/CLAUDE.md` apply to every agent working here. Direct user instructions still take precedence.
|
||||
|
||||
The canonical contributor guide is `.project.agents/AGENTS.md`. Do not create or maintain a root-level `AGENTS.md` unless the user explicitly asks for one.
|
||||
|
||||
Before any code-changing task, read `.project.agents/SELF_CONSTRAINTS.md` and `.project.agents/VIBECODING_GUIDE.md`, then run `git status --short`. For product work, also read the relevant sections of `PRD.md`, `ARCHITECTURE.md`, `ROADMAP.md`, and `CONVENTIONS.md` under `.project.agents/docs/context/`. Shared front-backend constraints live in the workspace-level `docs/` (see `../../../docs/coding-standards.md`) — read the referenced sections instead of duplicating them here.
|
||||
|
||||
## Project Structure & Module Organization
|
||||
`abacus-static-framework` is an enterprise Vue 3 + TypeScript microservice front-end base (menu framework) built with Vue 3.5, TypeScript 5, Vite 6, Element Plus, vxe-table, Pinia, axios. Business code lives in `src/subsystem/**` (reference template: the `sms` examples, copy-and-rewrite); `src/framework/**` is READ-ONLY shared framework. No automated tests.
|
||||
|
||||
Target architecture is documented in `ARCHITECTURE.md`: framework (shared, read-only) / subsystem (business writable) / dynamic menu-permission routing.
|
||||
|
||||
## Source-of-Truth Rules
|
||||
`PRD.md` defines behavior and scope.
|
||||
`UIUX.md` defines visual and interaction rules.
|
||||
`ARCHITECTURE.md` is the authority for modules, dependencies, contracts, and directory layout. Derived documents follow upstream changes, not the other way around.
|
||||
|
||||
Feature changes must update `PRD.md`. Module, dependency, entity, or invariant changes must update `ARCHITECTURE.md` in the same commit. Do not let code and architecture drift for more than 24 hours.
|
||||
|
||||
## Build, Test, and Development Commands
|
||||
|
||||
```sh
|
||||
# Build (output goes straight to the target microservice's resources/html/vue/<app>/)
|
||||
npm run build:prod
|
||||
|
||||
# Run
|
||||
npm run dev
|
||||
|
||||
# Test
|
||||
No automated tests (manual smoke only)
|
||||
```
|
||||
|
||||
Environment: Node 18.20.7, npm mirror `https://registry.npmmirror.com`. Before local integration, adjust `vite.config.ts` (`build.outDir` → target service's `resources/html/vue/<app>/`; `server.proxy` → target backend) and `public/data/data.js` (`currentSubsystem`). After a framework upgrade, run `npm install`; never overwrite `public`, `vite.config.ts`, or `src/subsystem`.
|
||||
|
||||
## Architecture & Coding Style
|
||||
Use TypeScript, 2-space indentation. Kebab-case files, PascalCase component names (must equal the route `name`), `getXxx`/`saveXxx` API function names. Do not add modules that are not registered in `ARCHITECTURE.md`. Preserve the dependency DAG; no reverse dependencies and no cross-module private access. Avoid empty names such as `Manager`, `Helper`, `Util`, `Common`, `Misc`, or `Tools`.
|
||||
|
||||
UI/presentation code should consume state and send intents only — business logic goes into hooks/services; keep data-model types thin. Data access must go through the `request` wrapper (`src/framework/utils/request.ts`) — never raw `axios`/`fetch`; the wrapper handles service-alias mapping, token refresh, commonParam header, and response unwrapping (see shared spec §6).
|
||||
|
||||
## Testing Guidelines
|
||||
No automated test framework. Required validation from `ARCHITECTURE.md`: manual smoke per page flow (list / query / create / edit / export). Multi-datasource routing, Kafka consumption, XXL-JOB scheduling, Nacos config pull, and real database migrations require real-environment validation; mock/simulator-only evidence is not enough for those claims.
|
||||
|
||||
## Git, Logs, and PRs
|
||||
Do not pile new work onto unrelated dirty changes without calling it out. Prefer Conventional Commits such as `feat: ...`, `fix: ...`, `docs: ...`. This repository is part of a single git repo rooted at the workspace (`D:\workBuddySpace\member`); commit scope should stay within this subproject unless the change is cross-project (docs/).
|
||||
|
||||
Each independently verifiable feature, milestone, non-trivial fix, or refactor needs an execution log in `.project.agents/log/YYYY-MM-DD-<slug>.md` unless it is only a minor documentation edit. Logs must include what changed, relevant commits (or "uncommitted" with reason), verification performed, and next steps.
|
||||
|
||||
Pull requests should include scope, linked issues, screenshots for UI changes, environment/device coverage, and any documentation updates.
|
||||
|
||||
## Security & Configuration
|
||||
Do not commit secrets, credentials, build output, or personal IDE files. Agent configuration and generated agent notes belong under `.project.agents/`, not the repository root, `.claude/`, or a global home directory.
|
||||
@@ -0,0 +1,59 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file guides Claude Code (and other agents) when working in this repository.
|
||||
**保持本文件最新**：它是项目级入口——项目是什么、怎么构建、门控一切变更的规则。
|
||||
|
||||
## Project
|
||||
|
||||
`abacus-static-framework` 是企业级 **Vue 3 + TypeScript 微服务前端底座**（菜单框架），基于 Vue 3.5 / TypeScript 5 / Vite 6 / Element Plus / vxe-table / Pinia / axios。业务代码位于 `src/subsystem/**`（参考模板：`subsystem` 下的 sms 示例，供复制改写）；`src/framework/**` 为**只读共享框架**，业务不得修改。
|
||||
|
||||
- Entry point: `src/main.ts`
|
||||
- **只读/可写分区**：`src/framework/**` 只读；业务开发只写 `src/subsystem/**`（api / router / views / extend 及自建 components / hooks / store / styles / types / utils）。
|
||||
- **接口契约**（统一响应体、服务别名映射、token 自动刷新、commonParam）由 `src/framework/utils/request.ts` 强制实现，业务无感；共享约束详见 `../../../docs/coding-standards.md`（§6 接口契约、§4 前端规范）。
|
||||
- Known environment constraints: Node 18.20.7 + npm 淘宝镜像；`vite.config.ts` 的 `build.outDir` 与 `server.proxy` 需按目标微服务修改后才能联调/发布；`public/data/data.js` 的 `currentSubsystem`/`currentSubsystemName` 声明当前子系统。
|
||||
|
||||
## Common commands
|
||||
|
||||
```sh
|
||||
# Build（产物直出目标微服务 resources/html/vue/<应用名>/）
|
||||
npm run build:prod
|
||||
|
||||
# Run（本地开发，Vite 反代后端）
|
||||
npm run dev
|
||||
|
||||
# Test
|
||||
无自动化测试（人工冒烟验证）
|
||||
```
|
||||
|
||||
环境注意：首次使用需 `npm install --registry=https://registry.npmmirror.com`（或已配置镜像则 `npm install`）。框架升级后需重新 `npm install`；升级**不得覆盖** `public`、`vite.config.ts`、`src/subsystem`。
|
||||
|
||||
## Architecture
|
||||
|
||||
实现遵循 `.project.agents/docs/context/ARCHITECTURE.md` 的模块边界；模块清单（职责一句话）：
|
||||
|
||||
- **framework/**（只读共享框架）：api（框架级后端接口）、components/standard（标准组件：AbForm/AbQueryForm/vxe 表格等 10 项）、hooks（useVxeTableHandle 等通用组合式函数）、layout（菜单布局）、router（静态路由）、store（settings/permission/user 等 Pinia 状态）、styles、types、utils（standard 5 项 + request 请求管线）、views、directives（v-debounce/v-throttle）。
|
||||
- **subsystem/**（业务可写区）：api/<服务别名>（按 Controller 分 ts）、router/dynamicRouter.ts（菜单路由唯一注册点）、views/<一级>/<二级>（页面）、extend（框架扩展钩子）、以及业务自建 components/hooks/store/styles/types/utils。
|
||||
- 动态权限：`permissionStore.filterAsyncRoutes` 按 `url === path` 匹配后端菜单与 dynamicRouter 后 `addRoute`。
|
||||
|
||||
## Project-level rules
|
||||
|
||||
- **动手前必读两文件**——它们编码了本项目所有门控决策的经验：
|
||||
- `.project.agents/VIBECODING_GUIDE.md` — 实践指南（为什么 & 怎么做）
|
||||
- `.project.agents/SELF_CONSTRAINTS.md` — 硬约束（什么禁止、什么必须、何时停下）
|
||||
|
||||
任何非平凡任务，编辑前先跑 `SELF_CONSTRAINTS.md §A`（开工前自检）。
|
||||
|
||||
- **共享约束单一来源**：前后端共享的编码规范/接口契约/命名纪律，**只存在于工作区 `docs/`（`../../../docs/coding-standards.md`、`../../../docs/architecture.md`、`../../../docs/agent-guide.md`）**；本仓库 `.project.agents/docs/context/` 只写本仓库特有内容与指针，**禁止复制 docs/ 正文**。改共享内容先改 docs/ 再同步指针。
|
||||
|
||||
- **Agent 配置**一律写在 `.project.agents/` 下（或子目录），禁止写到仓库根、`.claude/` 或全局目录。
|
||||
|
||||
- **项目文档**位于 `.project.agents/docs/context/`（单层目录）：`PRD.md`（行为权威）、`ARCHITECTURE.md`（模块/依赖/契约）、`ROADMAP.md`（里程碑）、`CONVENTIONS.md`（命名/风格/提交）、`UIUX.md`（视觉与交互）。
|
||||
|
||||
- **源真相层级**（冲突时上游优先）：
|
||||
```
|
||||
PRD.md > ARCHITECTURE.md > UIUX.md > CONVENTIONS.md > 派生文档
|
||||
仓库级 CONVENTIONS 再下接共享 docs/coding-standards.md（仅作全仓公共约定引用）
|
||||
```
|
||||
上游变更须在同 commit 内回写受影响的派生文档；代码与架构漂移不得超过 24 小时。
|
||||
|
||||
- **路线图执行规则**：按 `.project.agents/docs/context/ROADMAP.md` 顺序推进，勾选与完成同 commit；milestone 级/多文件任务先写 plan/spec 再动手；每个 milestone 后按 `.project.agents/log/` 模板写执行日志。
|
||||
@@ -0,0 +1,130 @@
|
||||
# Agent 自我约束清单（本项目硬规则）
|
||||
|
||||
> 这是 Agent 在本项目工作时必须遵守的硬约束。每次开工前自查本清单，违反任何一条都应**先停下**，与用户对齐后再继续。
|
||||
> 完整背景与原理请见 [`VIBECODING_GUIDE.md`](./VIBECODING_GUIDE.md)。本清单只列"不许做什么 / 必须做什么"。
|
||||
>
|
||||
> 文档约定（本项目）：上游文档位于 `.project.agents/docs/context`，依次为
|
||||
> `PRD.md`（行为与范围）、`ARCHITECTURE.md`（模块/依赖/契约/目录）、`CONVENTIONS.md`（命名/风格/提交）。
|
||||
> 派生文档不得反向修改上游。
|
||||
|
||||
---
|
||||
|
||||
## A. 开工前的强制自检（每个新会话开始时执行）
|
||||
|
||||
在进行任何编辑动作之前，必须确认以下事项；任一项不满足则先暂停业务任务，处理掉再继续。
|
||||
|
||||
- [ ] **A1. 仓库是否在版本控制下？** 若否：立即停下，先初始化仓库 + 配置 ignore + 初始 commit。
|
||||
- [ ] **A2. 工作区是否干净？** 有未提交的旧改动？先与用户确认是否要先提交/暂存，**不允许在脏工作区上叠加新改动**。
|
||||
- [ ] **A3. 是否已有 `ARCHITECTURE.md`？**
|
||||
- 若否，且本次任务**涉及写业务代码**：先停下，按 `VIBECODING_GUIDE` 的流程产出架构文档，再写代码。
|
||||
- 若否，且本次任务**只是文档/讨论**：可继续，但应主动提醒用户补架构文档。
|
||||
- [ ] **A4. 任务的归属模块清楚吗？** 我能否在 `ARCHITECTURE.md` 的模块清单里指出"这个改动属于哪个模块"？指不出来则停下补架构。
|
||||
- [ ] **A5. 上游文档是否已读？** `PRD.md` / `ARCHITECTURE.md` / `CONVENTIONS.md` 中与本任务相关的章节是否读过？没读过先读，不要凭印象动手。
|
||||
|
||||
---
|
||||
|
||||
## B. 写代码时的硬约束
|
||||
|
||||
### B1. 模块边界
|
||||
- ❌ 不允许新增**未在 `ARCHITECTURE.md` 中登记**的模块；要新增必须先更新架构文档。
|
||||
- ❌ 不允许引入**反向依赖**（低层模块依赖高层模块）。需要时改为接口/回调倒置。
|
||||
- ❌ 不允许跨模块**直接访问私有实现**；只能走该模块对外暴露的接口。
|
||||
- ❌ 不允许出现 `Manager` / `Helper` / `Util` / `Common` / `Misc` / `Tools` 这类语义为空的新模块名；用动词+名词描述真实职责。
|
||||
|
||||
### B2. 单一职责
|
||||
- ❌ 不允许在 UI/展示层写业务判断或副作用（仅消费状态、发送意图）。
|
||||
- ❌ 不允许在数据模型类里堆业务方法；模型保持瘦，逻辑放 Service / UseCase。
|
||||
- ❌ 不允许"顺手"修改不在任务范围内的模块；越界的改动走单独提交并明确告知用户。
|
||||
|
||||
### B3. 文档同步（与代码改动**同一个 commit** 内）
|
||||
- 加/删/改功能 → 同步更新 `PRD.md`
|
||||
- 加/删/改模块或依赖 → 同步更新 `ARCHITECTURE.md`（模块清单 + 依赖图）
|
||||
- 派生文档发现与上游不一致 → 回去改上游，不能让派生文档自走
|
||||
|
||||
### B4. 注释与命名
|
||||
- 默认不写注释；只在 WHY 不明显时写一行。
|
||||
- 不写解释 WHAT 的注释（命名应自解释）。
|
||||
- 不写"为某 issue/任务而加"这类会随时间失效的注释。
|
||||
- 严格遵守 `CONVENTIONS.md` 中的命名规范（不存在则先补）。
|
||||
|
||||
### B5. 错误处理
|
||||
- 只在系统边界（用户输入、外部 API、文件 IO）做防御；内部模块互相信任。
|
||||
- 不为不可能发生的情况加 fallback。
|
||||
- 不引入向后兼容 shim，除非用户明确要求。
|
||||
|
||||
### B6. 实施日志（execution log）
|
||||
- **每完成一个可独立验收的部分（milestone 或子任务），必须在 `.project.agents/log` 写日志**。格式与时机见 `VIBECODING_GUIDE`。
|
||||
- 日志内必须包含本段的版本控制提交列表；若本段未提交，明确写出"未提交"及原因。
|
||||
- 完成路线图任一 milestone → **必须**写日志，且与该 milestone 的提交同一会话完成。
|
||||
- 单次会话即将结束（用户表示收工 / 上下文将被压缩）→ **必须**写一份兜底日志记录当前状态与下一步。
|
||||
- ❌ 不允许只提交不写日志（除非属于豁免情况：纯文档微调 / 被回滚的实验性探索）。
|
||||
- ❌ 不允许写日志但跳过更新 `ARCHITECTURE.md` —— 若本段触发架构变更，先改架构、再提交、再写日志。
|
||||
|
||||
---
|
||||
|
||||
## C. 改动范围控制
|
||||
|
||||
- ❌ 一次任务一个目的。不要"既加功能又重构又改样式"。
|
||||
- ❌ 不允许在 bug 修复任务中做无关清理。
|
||||
- ❌ 不允许引入"为未来准备"的抽象（YAGNI）；三处相似优于一处过度抽象。
|
||||
- ❌ 不允许半完成的实现（要么这次完成，要么不要开始）。
|
||||
|
||||
---
|
||||
|
||||
## D. 出问题时的排查纪律
|
||||
|
||||
bug 处理必须按下列顺序，**严禁跳步**：
|
||||
|
||||
1. 复现现象（明确触发路径）
|
||||
2. 在 `ARCHITECTURE.md` 上**圈出嫌疑模块**
|
||||
3. 检查跨模块**接口契约**
|
||||
4. 缩小到单模块后再读代码
|
||||
5. 修完后：若是架构问题，必须更新 `ARCHITECTURE.md` 或 `CONVENTIONS.md`
|
||||
|
||||
**禁止行为**：bug 一来就全仓 grep、试改一行看效果、连续 try-fail 循环。出现这种倾向立刻停下，回到第 2 步。
|
||||
|
||||
---
|
||||
|
||||
## E. 与用户的协作约束
|
||||
|
||||
- ❌ 不替用户做架构决策。涉及模块拆分、依赖方向、命名规范这类**长期影响**的决定，必须明确询问。
|
||||
- ❌ 不在用户没要求的时候主动创建文档（除非本清单或 `CLAUDE.md` 已要求）。
|
||||
- ❌ 不在没看代码的情况下凭推测回答 "X 是怎么实现的"。
|
||||
- ✅ 每次涉及架构/文档/规范变更，先告知影响面，再动手。
|
||||
- ✅ 用户的明确指示永远高于本清单和任何 skill。冲突时遵循用户。
|
||||
|
||||
---
|
||||
|
||||
## F. 触发"全员停车"的红线
|
||||
|
||||
出现以下任一情况，**立即停止当前任务，与用户对齐后再决定下一步**：
|
||||
|
||||
1. 发现自己在脏工作区上累积了大量未提交改动
|
||||
2. 发现自己正在新增一个"无处归属"的模块/文件
|
||||
3. 发现代码与 `ARCHITECTURE.md` 已经矛盾，且无法用小补丁同步
|
||||
4. 同一个 bug 连续 3 次尝试修复未果
|
||||
5. 用户的请求与本清单 / `CLAUDE.md` / 上游文档存在冲突 —— 必须先澄清，不能默默选边
|
||||
6. 即将做出"难以回滚"的动作（删除文件 / 重命名模块 / 调整目录结构 / 强制 push）
|
||||
|
||||
---
|
||||
|
||||
## G. 文件路径合规
|
||||
|
||||
- Agent 的配置文件**只**写入 `.project.agents` 子树，禁止写入仓库根目录或其他非约定位置。
|
||||
- 项目文档**只**写入 `.project.agents/docs/context`（不允许再分子目录，除非用户明确要求）。
|
||||
- 本清单（`SELF_CONSTRAINTS.md`）与指南（`VIBECODING_GUIDE.md`）位于 `.project.agents` 根，与 `CLAUDE.md` 同级。
|
||||
|
||||
---
|
||||
|
||||
## H. 自查触发器（什么时候重读本清单）
|
||||
|
||||
至少在以下时机重读本清单：
|
||||
|
||||
- 新会话开始，且任务涉及代码改动
|
||||
- 用户要求"加新功能"/"修 bug"/"重构"
|
||||
- 自己感到"差不多可以直接动手了" —— 这种感觉本身就是触发器
|
||||
- 即将创建超过 1 个新文件
|
||||
- 即将修改 3 个以上文件
|
||||
- 即将修改任何 `.project.agents/docs/context` 下的文档
|
||||
- **完成一个路线图 milestone 或子任务前**（确认是否需要按 §B6 写日志）
|
||||
- **会话即将结束前**（确认兜底日志已写）
|
||||
@@ -0,0 +1,252 @@
|
||||
# 项目开发实践指南（VIBECODING GUIDE）
|
||||
|
||||
> 本文档是基于"踩过的坑"沉淀下来的项目工作方式约定，适用于本仓库及后续所有同性质的项目。
|
||||
> 它的姊妹文件是 [`SELF_CONSTRAINTS.md`](./SELF_CONSTRAINTS.md) —— 那是 Agent 每次开工前必须自查的硬约束清单。
|
||||
> 本文回答 "为什么这么做"；`SELF_CONSTRAINTS.md` 回答 "具体不许做什么"。
|
||||
|
||||
---
|
||||
|
||||
## 0. 三条核心教训（本指南的来由，优先级严格递减）
|
||||
|
||||
1. **版本控制必须从第 0 天开始。**
|
||||
不是 "等做出点东西再说"，是写第一行代码之前先初始化仓库、写好 ignore 规则、提交一个空骨架。
|
||||
理由：高频改动 + 频繁推翻是 AI 协作的常态，没有版本控制兜底就等于在悬崖边裸奔。
|
||||
|
||||
2. **文档必须在写代码之前定下来。**
|
||||
需求、架构、路线图、开发规范、目录结构、命名规范、模块边界 —— 这些不是"做完之后补的"，是"做之前定的"。
|
||||
理由：一旦上下文被代码细节占满，后续每个新会话都只能 freestyle，项目会朝不可逆的方向漂移。
|
||||
|
||||
3. **架构 > UI > 用户体验。**
|
||||
最致命的不是界面丑、不是体验差，而是模块互相纠缠到无法定位问题。
|
||||
一个出问题就能立刻指认 "是 X 模块的责任" 的项目，比一个好看但耦合一团的项目，存活率高一个数量级。
|
||||
理由：耦合一旦发生，AI 协作模式会迅速放大它 —— 因为每次新会话都看不全全貌，只会在原有耦合上继续添乱。
|
||||
|
||||
> 这三条的优先级是严格递减的：先有版本控制，再有文档，再谈架构；架构稳了之后才轮到 UI 和体验。
|
||||
|
||||
---
|
||||
|
||||
## 1. 项目启动 Checklist（Day 0）
|
||||
|
||||
下列每一项都必须在写第一行业务代码之前完成。顺序即优先级。
|
||||
|
||||
### 1.1 仓库与版本控制
|
||||
- [ ] 初始化版本控制并立即建立 ignore 规则（语言 / IDE / 系统三类至少齐全）
|
||||
- [ ] 提交一个 **空骨架 commit**（README + ignore 规则 + 空目录结构），作为"零点参照系"
|
||||
- [ ] 约定分支模型（最简：主干 + 短命的功能分支；不要等到分叉时才想）
|
||||
- [ ] 约定 commit message 风格（推荐 Conventional Commits，至少要求动词开头 + 一句话原因）
|
||||
|
||||
### 1.2 文档骨架（必须先于代码存在）
|
||||
在 `.project.agents/docs/context` 下建立以下文件，**哪怕只有大纲也比没有强**：
|
||||
|
||||
| 文件 | 角色 | 上下游关系 |
|
||||
|---|---|---|
|
||||
| `PRD.md` | 产品需求（要做什么） | 上游 |
|
||||
| `ARCHITECTURE.md` | 架构（怎么拆） | 上游 |
|
||||
| `ROADMAP.md` | 路线图（什么时候做哪一块） | 由需求 + 架构推导 |
|
||||
| `CONVENTIONS.md` | 开发规范（命名、目录、提交、风格） | 上游 |
|
||||
| `UIUX.md` | 视觉与交互细节（仅有 UI 的项目需要） | 上游（与需求并列） |
|
||||
| 派生文档（实现 spec / 资产清单等） | 屏幕级实现 / 资产清单 | **派生**，由上游产生 |
|
||||
|
||||
**判断标准**：如果一个新会话的 Agent 只读需求 + 架构 + 开发规范就能正确开始一个任务 —— 文档就算合格。
|
||||
|
||||
### 1.3 Agent 协作配置
|
||||
- [ ] 在 `CLAUDE.md` 写明项目级规则（已有，保持更新）
|
||||
- [ ] 在本文件 + `SELF_CONSTRAINTS.md` 中固化经验
|
||||
- [ ] 在 `.project.agents/settings.json` 中配置必要的 hook / 权限（不要散落到根目录或全局）
|
||||
|
||||
---
|
||||
|
||||
## 2. 架构原则
|
||||
|
||||
### 2.1 三条硬规则
|
||||
|
||||
1. **单一职责到模块级**
|
||||
每个模块只回答一个问题。
|
||||
反例："一个模块既管数据持久化，又管网络请求，又管 UI 状态" —— 这种模块必须拆。
|
||||
|
||||
2. **依赖方向单向**
|
||||
高层依赖低层，UI 依赖业务，业务依赖数据；**反向依赖一律禁止**，遇到就用接口/事件/回调倒置。
|
||||
依赖关系必须能画成一张**有向无环图（DAG）**，且这张图要在 `ARCHITECTURE.md` 里画出来。
|
||||
|
||||
3. **跨模块只走"接口契约"**
|
||||
模块 A 想用模块 B 的能力，只能通过 B 暴露的接口/协议，不能 reach into B 的内部实现。
|
||||
接口契约必须在 `ARCHITECTURE.md` 中显式声明（哪怕只是函数签名清单）。
|
||||
|
||||
### 2.2 判断架构是否健康的三个问句
|
||||
|
||||
随时可以用这三个问句自检：
|
||||
|
||||
1. **指认问题**：现在出 bug 了，我能否在 30 秒内指出"这是哪个模块的责任"？
|
||||
2. **替换实现**：如果要把模块 X 整体换掉（换数据库、换框架），改动是否能控制在 X 内部 + 一个接口适配层？
|
||||
3. **新增功能归属**：用户要加一个新功能，我能否立刻说出它"属于哪个模块、或需要新增哪个模块"？
|
||||
|
||||
任何一个回答不出来，架构就有问题，**先停下修架构，再写代码**。
|
||||
|
||||
### 2.3 反耦合纪律
|
||||
|
||||
- **不在新功能开发时顺手重构无关模块**（重构走单独 commit + 单独会话）
|
||||
- **不在 UI 层做业务判断**（UI 只接收状态、发送意图）
|
||||
- **不让数据模型自己跑业务逻辑**（模型类保持瘦，业务放 Service / UseCase）
|
||||
- **不要"为了少写一个文件"把两个模块塞进同一个文件**
|
||||
|
||||
---
|
||||
|
||||
## 3. 项目架构文档生成流程
|
||||
|
||||
这是从零到 `ARCHITECTURE.md` 的标准流程。每一步都有产出物，下一步必须基于上一步的产出物。
|
||||
|
||||
### Step 1 — 需求收敛（产出 `PRD.md`）
|
||||
- 列功能清单，按 **核心 / 增强 / 可选** 三档分类
|
||||
- 每个核心功能写一句 "用户故事"（"作为 X，我想 Y，以便 Z"）
|
||||
- **冻结 MVP 范围**：圈出 MVP 包含哪些核心功能，其余明确标 "Out of MVP"
|
||||
|
||||
### Step 2 — 领域建模（产出 `ARCHITECTURE.md` §1 领域模型）
|
||||
- 列出所有**名词实体**（用户、订单、会话…）
|
||||
- 标注每个实体的字段、关系、生命周期
|
||||
- 标记哪些是**持久化实体**，哪些是**瞬态状态**
|
||||
|
||||
### Step 3 — 模块划分（产出 `ARCHITECTURE.md` §2 模块清单）
|
||||
对照领域模型与需求功能清单，拆分模块。每个模块写一张卡片：
|
||||
|
||||
```
|
||||
## 模块名：<Name>
|
||||
- 职责：一句话
|
||||
- 不负责：明确写出"不做什么"（防止职责蔓延）
|
||||
- 输入：从哪些模块/外部来
|
||||
- 输出：暴露给谁
|
||||
- 关键类型/接口：列签名（不写实现）
|
||||
- 持有状态：有没有自己的状态？
|
||||
```
|
||||
|
||||
**经验**：如果一个模块的"不负责"写不出来，说明它的职责还没想清楚，回到 Step 2。
|
||||
|
||||
### Step 4 — 依赖图（产出 `ARCHITECTURE.md` §3 依赖图）
|
||||
- 画出模块间依赖箭头（推荐 Mermaid，纯文本可 diff）
|
||||
- **手动验证 DAG**：从任一节点 DFS 不应回到自己
|
||||
- 标出"接口边界"：哪些依赖是接口注入，哪些是直接调用
|
||||
|
||||
### Step 5 — 路线图（产出 `ROADMAP.md`）
|
||||
按依赖图的拓扑顺序排开发节奏：
|
||||
- 先做被依赖最多的底层模块
|
||||
- 每个 milestone 必须能独立通过编译/构建并跑出某种"可见行为"
|
||||
- 写明每个 milestone 完成的"验收标准"（不是"做完了"，是"做完了之后能演示什么"）
|
||||
|
||||
### Step 6 — 开发规范（产出 `CONVENTIONS.md`）
|
||||
- 命名（类型 / 文件 / 目录 / 资产）
|
||||
- 代码风格（缩进 / 注释策略 / 错误处理边界）
|
||||
- 提交规范
|
||||
- 测试策略（哪些必须有测试，哪些不要求）
|
||||
|
||||
### Step 7 — 派生文档（产出实现 spec / 资产清单等）
|
||||
**只有上面 6 步都齐了，才能开始写派生文档**。
|
||||
派生文档必须显式引用上游章节（"对应 `ARCHITECTURE.md` §2.3 的 XxxService 模块"），方便后续 diff 校验。
|
||||
|
||||
---
|
||||
|
||||
## 4. 文档变更协议
|
||||
|
||||
文档不是写完就锁死的，但变更必须**沿着上下游传播**：
|
||||
|
||||
| 变更点 | 必须同步更新 |
|
||||
|---|---|
|
||||
| 需求加/删/改功能 | 架构模块清单、路线图、派生文档 |
|
||||
| 架构调整模块边界 | 依赖图、开发规范（如有命名调整）、派生文档 |
|
||||
| UI/UX 改视觉 token | 派生文档（实现 spec / 资产清单），不影响架构 |
|
||||
| 加新模块 | 架构 §2 + §3、路线图、开发规范（如新目录） |
|
||||
|
||||
**权威链**：`PRD.md > ARCHITECTURE.md > UIUX.md > CONVENTIONS.md > 派生文档`。
|
||||
派生文档永远不能**反向**修改上游。如果在派生文档中发现矛盾，回去改上游，再让派生文档重新对齐。
|
||||
**代码与架构漂移 > 24 小时即违规。**
|
||||
|
||||
---
|
||||
|
||||
## 5. 实施日志（execution log）
|
||||
|
||||
写代码 / 执行路线图期间，**每完成一个可独立验收的"部分"，必须在 `.project.agents/log` 写一份日志**。日志是给"下一个会话的我"看的 —— 让接手的会话能在不读所有代码的情况下知道：刚才完成了什么、哪些提交、下一步是什么。
|
||||
|
||||
### 5.1 何时写日志
|
||||
- 完成一个路线图 milestone
|
||||
- 完成一个 milestone 内独立可验收的子任务
|
||||
- 完成一次非平凡的重构 / bug 修复
|
||||
- 当前会话即将结束时（兜底，把上下文沉淀下来）
|
||||
|
||||
**判断标准**：如果这段工作下一个会话需要知道，就写。
|
||||
|
||||
### 5.2 日志文件命名
|
||||
`.project.agents/log/YYYY-MM-DD-<slug>.md`
|
||||
- `<slug>` = 简短动词 + 范围，kebab-case
|
||||
- 同日多份日志按写作顺序累积（不覆盖、不合并），文件名加序号后缀：`-1`、`-2`…
|
||||
|
||||
### 5.3 日志内容模板
|
||||
```markdown
|
||||
# <一句话标题：完成了什么>
|
||||
|
||||
- **日期**：YYYY-MM-DD
|
||||
- **关联**：路线图 M<N> / 子任务名 / 关联文档
|
||||
- **会话上下文**：（可选）本会话从哪开始接手的
|
||||
|
||||
## 做了什么
|
||||
- bullet 1
|
||||
- bullet 2
|
||||
|
||||
## 提交
|
||||
- `<short hash>` <commit subject>
|
||||
|
||||
（若本段未提交：明确写"未提交，工作树状态：…"并说明原因）
|
||||
|
||||
## 状态变更
|
||||
- 架构文档：是否动过？动了哪一节？
|
||||
- 需求/UI 文档：是否触发回归？
|
||||
- 测试：跑了什么，结果
|
||||
|
||||
## 下一步
|
||||
- 接下来要做的第一件事（具体到任务名）
|
||||
- 已知阻塞 / 待澄清项
|
||||
```
|
||||
|
||||
### 5.4 与提交的关系
|
||||
日志**不替代** commit message，commit message 仍按 `CONVENTIONS.md` 写；日志是提交的**索引与解释**。
|
||||
|
||||
### 5.5 不写日志的情况
|
||||
- 还没完成一个"可独立验收"的部分 —— 不要"写日志凑数"
|
||||
- 纯文档调整 —— commit 自身已足够说明
|
||||
- 实验性探索（最终被回滚的内容）—— 用 commit message 记录即可
|
||||
|
||||
---
|
||||
|
||||
## 6. 出问题时的排查流程
|
||||
|
||||
bug 来了不要直接钻进代码。按下列顺序：
|
||||
|
||||
1. **复现并定位现象**：能在哪个入口 / 哪个调用稳定复现？
|
||||
2. **回到架构图**：这个现象涉及哪些模块？沿着依赖图圈出可能责任方。
|
||||
3. **审查接口契约**：跨模块调用是否符合 `ARCHITECTURE.md` 中声明的接口？输入输出是否符合契约？
|
||||
4. **缩小到单模块**：把嫌疑缩小到一个模块后，再读该模块代码。
|
||||
5. **修复并回写经验**：如果发现是架构层面的漏洞，修完代码后**必须更新 `ARCHITECTURE.md` 或 `CONVENTIONS.md`**。
|
||||
|
||||
**反模式**：bug 一来就 grep 关键字、改一行试一下、再改一行试一下 —— 这是死亡螺旋，必须用流程压下去。
|
||||
|
||||
---
|
||||
|
||||
## 7. 反模式清单（"看到这些立刻警觉"）
|
||||
|
||||
- 出现语义为空的模块名（`Manager` / `Helper` / `Util` / `Common` / `Misc` / `Tools`）且行数 > 100 行
|
||||
- 一个文件 import 超过 10 个本地模块
|
||||
- 改一个 UI 改动需要动 3 个以上其他模块
|
||||
- 同一份业务逻辑在两个地方各写了一遍
|
||||
- PR 描述写"顺便修了 X"
|
||||
- 新增功能时发现"无处归属"，于是塞进入口文件或主组件
|
||||
- 文档与代码不一致超过 24 小时
|
||||
- 出现没有在 `ARCHITECTURE.md` 中登记的新模块/新依赖方向
|
||||
|
||||
任何一条出现，**先停下来回到本指南或架构文档，不要继续往前推**。
|
||||
|
||||
---
|
||||
|
||||
## 8. 本项目当前阶段
|
||||
|
||||
> 本节随项目演进，不是规则的一部分。由 Agent 在每个 milestone 后更新。
|
||||
|
||||
<!-- 由 /ads:init（2026-08-19，Retrofit）填入：本项目为前端底座模板，治理已入位。 -->
|
||||
- 当前状态：前端底座（`abacus-static-framework`）已完成治理落地（Retrofit），`src/framework/**` 只读、业务只写 `src/subsystem/**`；前后端共享约束单源化于工作区 `docs/`（`../../../docs/coding-standards.md`）。
|
||||
- 下一步合规动作：新业务子系统按 `docs/coding-standards.md §7`（AI 生成工作流）开发；任何新增模块、目录或依赖方向先回写本仓库 `ARCHITECTURE.md`，再写代码。
|
||||
@@ -0,0 +1,165 @@
|
||||
# abacus-static-framework — 架构文档（ARCHITECTURE）
|
||||
|
||||
> 模块、依赖、契约、目录布局的**唯一权威**（本仓库视角）。新增/重命名/移动模块或调整依赖方向，必须先改本文，再改代码（同一个 commit）。
|
||||
> 上游：`PRD.md`（行为）。前后端共享约束见工作区 `docs/`（`../../../../docs/coding-standards.md`、`../../../../docs/architecture.md`），本文不复制其正文。
|
||||
|
||||
## 0. 阅读指引
|
||||
|
||||
本文描述前端底座的模块划分与依赖方向；§2 模块清单与 §6 目录一一对应，§3.2 是跨模块接口契约（写代码必须遵守）。新会话先读 §2 + §6 定位任务归属，再动手。
|
||||
|
||||
## 1. 领域模型（Domain Model）
|
||||
|
||||
### 1.1 实体
|
||||
|
||||
前端无持久化实体；领域概念即运行时状态：
|
||||
|
||||
| 实体 | 字段 | 关系 | 持久化？ |
|
||||
|---|---|---|---|
|
||||
| 用户会话（userStore） | access_token/refresh_token/expires_dt/user_type | 全局单例 | 否（localStorage） |
|
||||
| 菜单/路由（permissionStore） | routes（过滤后）、menuTree | 依赖后端菜单接口 | 否（内存） |
|
||||
| 应用设置（settingsStore） | backendServices、loginType、loginAddress | 来自 window.frameBaseConfig | 否（运行时注入） |
|
||||
|
||||
### 1.2 派生概念（非持久化）
|
||||
|
||||
- `backendServices` 别名→真实服务名映射（`window.frameBaseConfig` 注入）。
|
||||
- 当前路由上下文（`currentRouter()`）用于组装 commonParam（menuName/moduleId/moduleName）。
|
||||
|
||||
### 1.3 不变量（任何模块都必须维护）
|
||||
|
||||
- I1. `src/framework/**` 只读：业务代码不得 import 后修改框架文件；框架变更只能由框架负责人进行。
|
||||
- I2. 业务请求一律经 `framework/utils/request.ts`，禁止裸 `axios`/`fetch`。
|
||||
- I3. 服务别名首段必须是 `settingsStore.backendServices` 中已注册的键。
|
||||
|
||||
## 2. 模块清单
|
||||
|
||||
按依赖层级从低到高排列。
|
||||
|
||||
### Layer 0 — framework/utils（基础设施）
|
||||
```
|
||||
## 模块名：framework/utils
|
||||
- 职责：请求管线（request.ts）、标准工具（standard/*：vxe、dataHandleUtil、globalHandle、security、baiduMap）
|
||||
- 不负责：业务逻辑、页面状态
|
||||
- 输入：各业务模块的请求配置
|
||||
- 输出：统一响应体解包后的数据 / Blob；标准工具函数
|
||||
- 关键类型/接口：request(config) -> Promise<data>；gridDefaultProps(opts)；useQueryParamsHandle(...)
|
||||
- 持有状态：token 刷新队列（模块内闭包）、settingsStore 引用
|
||||
```
|
||||
|
||||
### Layer 0 — framework/components/standard（视觉基座）
|
||||
```
|
||||
## 模块名：framework/components/standard
|
||||
- 职责：标准 UI 组件（AbForm/AbQueryForm/AbSection/ClickCopy/FilePreviewDialog/ImportExcel/LogShow/RealTimeSearchSelect/SensitiveText/Text/BottomFloat）
|
||||
- 不负责：业务特有布局（业务自建 components）
|
||||
- 输入：props/插槽
|
||||
- 输出：统一风格组件
|
||||
- 持有状态：无（受控组件）
|
||||
```
|
||||
|
||||
### Layer 1 — framework/store（有状态服务）
|
||||
```
|
||||
## 模块名：framework/store
|
||||
- 职责：全局 Pinia 状态（settings：backendServices/loginType；permission：菜单生成与过滤；user：token/业务域）
|
||||
- 不负责：页面级状态（业务自建 store）
|
||||
- 输入：window.frameBaseConfig、后端菜单接口
|
||||
- 输出：状态与 actions
|
||||
- 持有状态：是
|
||||
```
|
||||
|
||||
### Layer 2 — framework/router + hooks + directives（路由与通用逻辑）
|
||||
```
|
||||
## 模块名：framework/router + hooks + directives
|
||||
- 职责：静态路由与动态路由装配支持；useVxeTableHandle 等通用组合式函数；v-debounce/v-throttle 指令
|
||||
- 不负责：业务菜单路由（subsystem/router/dynamicRouter.ts）
|
||||
- 输入：permissionStore 过滤后的路由
|
||||
- 输出：可用路由表、表格查询联动能力
|
||||
- 持有状态：路由表（由 permissionStore 维护）
|
||||
```
|
||||
|
||||
### Layer 3 — subsystem（业务可写区）
|
||||
```
|
||||
## 模块名：subsystem
|
||||
- 职责：业务子系统（api 封装、dynamicRouter 菜单路由、views 页面、extend 扩展、自建 components/hooks/store/styles/types/utils）
|
||||
- 不负责：框架能力（一律复用 framework）
|
||||
- 输入：后端接口、用户操作
|
||||
- 输出：业务页面与接口调用
|
||||
- 持有状态：业务自身状态（自建 store）
|
||||
```
|
||||
|
||||
## 3. 依赖图（DAG）
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
subsystem --> framework_utils[framework/utils]
|
||||
subsystem --> framework_components[framework/components/standard]
|
||||
subsystem --> framework_hooks[framework/hooks]
|
||||
subsystem --> framework_router[framework/router]
|
||||
framework_router --> framework_store[framework/store]
|
||||
framework_hooks --> framework_utils
|
||||
framework_hooks --> framework_components
|
||||
framework_store --> framework_utils
|
||||
framework_utils --> framework_store
|
||||
```
|
||||
|
||||
### 3.1 依赖方向规则
|
||||
|
||||
- 高层依赖低层；业务（subsystem）依赖框架（framework），框架各层按上图单向；**反向依赖一律禁止**（如 framework 不得 import subsystem）。
|
||||
- 例外：`framework/utils/request.ts` 依赖 `framework/store`（settingsStore）获取别名映射——两者同属 framework 层，允许。
|
||||
|
||||
### 3.2 跨模块接口契约（写代码时必须遵守的签名）
|
||||
|
||||
```
|
||||
// module: framework/utils/request
|
||||
// request(config: {url, method, params|data, headers?, custom?}) -> Promise<data> // status===200 已解包 data；ArrayBuffer 返回整个 response
|
||||
// url 首段 = 服务别名（I3），自动携带 token/commonParam（I2）
|
||||
|
||||
// module: framework/utils/standard/vxe
|
||||
// gridDefaultProps(opts: {params, rowConfig, pagerConfig, proxyConfig, columns}) -> VxeGridProps
|
||||
|
||||
// module: framework/hooks/useVxeTableHandle
|
||||
// useQueryParamsHandle(params, page, sorts, filters) -> query params // 分页契约 {data,total}，见共享规范 §6.4
|
||||
// useTableQueryReload(...) / useInVxeGridSearch(...)
|
||||
```
|
||||
|
||||
## 4. 持久化与边界
|
||||
|
||||
- 无后端式持久化；前端持久化仅 token（localStorage，由 userStore 管理）。
|
||||
- 外部边界：所有 HTTP 请求必须经 request.ts；开发期经 vite proxy；运行时经 Nginx 反代；`window.frameBaseConfig` 由宿主页面注入（含 backendServices）。
|
||||
|
||||
## 5. 测试边界
|
||||
|
||||
- 无自动化单测（PRD 已声明）；每页面人工冒烟（列表/查询/新增/编辑/导出）。
|
||||
- 真机/真环境必验：多数据源路由、Kafka 消费、XXL-JOB 调度、Nacos 配置拉取、真实数据库迁移（属后端，但前端联调需一并验证）。
|
||||
|
||||
## 6. 目录结构（与 §2 模块清单一一对应）
|
||||
|
||||
```
|
||||
src/
|
||||
├── framework/ # Layer 0~2（只读共享）
|
||||
│ ├── api/ components/ hooks/ layout/ router/ store/ styles/ types/ utils/ views/ directives/
|
||||
│ └── utils/request.ts # 请求管线（契约见 §3.2）
|
||||
├── subsystem/ # Layer 3（业务可写区）
|
||||
│ ├── api/<服务别名>/ # 按 Controller 分 ts（如 sms/{index,applog,abnormal,config}.ts）
|
||||
│ ├── router/dynamicRouter.ts # 菜单路由唯一注册点
|
||||
│ ├── views/<一级菜单>/<二级菜单>/index.vue
|
||||
│ ├── extend/ # 框架扩展钩子
|
||||
│ └── (自建) components/ hooks/ store/ styles/ types/ utils/
|
||||
├── permission.ts # 全局路由守卫（生成/过滤动态路由）
|
||||
└── main.ts # 入口
|
||||
```
|
||||
|
||||
## 7. 自检（架构健康度三问）
|
||||
|
||||
1. 出 bug 了，能否 30 秒内指出是 framework 还是 subsystem、哪个子目录的责任？
|
||||
2. 替换 UI 库/表格库，改动能否控制在 framework/components 与 utils/standard 内 + 适配层？
|
||||
3. 加新业务页面，能否立刻说出落在 `subsystem/views/<一级>/<二级>/` 哪个位置？
|
||||
|
||||
## 8. 待办与已知技术负债
|
||||
|
||||
- 前端 README 引用的 `docs/` 文档中心已补齐（`../../../../docs/`）。
|
||||
- 旧框架兼容入口 `externalOldERPIndex`（data.js）仅在需要兼容历史模块时配置。
|
||||
|
||||
## 9. 文档变更协议
|
||||
|
||||
- 加/删模块或改依赖方向 → 改本文 §2 + §3，同一 commit。
|
||||
- 改对外签名（request/gridDefaultProps 等）→ 先改 §3.2，再改代码。
|
||||
- 与 `PRD.md` 冲突 → 以 `PRD.md` 为准，回改本文；与共享 `docs/coding-standards.md` 冲突 → 以 docs/ 为准并回改本文。
|
||||
@@ -0,0 +1,91 @@
|
||||
# abacus-static-framework — 开发规范（CONVENTIONS）
|
||||
|
||||
> 命名、目录、提交、风格、测试的权威（本仓库视角）。前后端共享约束见工作区 `docs/coding-standards.md`（`../../../../docs/coding-standards.md`），本文只写前端特有内容 + 指针，**禁止复制 docs/ 正文**。
|
||||
|
||||
## 0. 阅读指引
|
||||
|
||||
- 适用范围：`src/subsystem/**` 业务开发（`src/framework/**` 只读）。
|
||||
- 分工：ARCHITECTURE 管"拆成什么模块"；本文管"怎么命名/写"；共享编码规范、接口契约、AI 生成工作流在 `docs/coding-standards.md`。
|
||||
|
||||
## 1. 命名
|
||||
|
||||
### 1.1 标识符
|
||||
|
||||
- 组件名：PascalCase，且**必须与路由 `name` 一致**（`<script lang="ts">export default { name: 'Xxx' }</script>`）。
|
||||
- 文件/目录：kebab-case（如 `operationLog/index.vue`）；views 目录按一级/二级菜单名组织。
|
||||
- API 函数：`getXxx` / `saveXxx` / `deleteXxx` / `exportXxx`。
|
||||
- Pinia store：`use<Xxx>Store`。
|
||||
|
||||
### 1.2 模块命名（语义禁区）
|
||||
|
||||
- 禁止 `Manager` / `Helper` / `Util` / `Common` / `Misc` / `Tools` 这类语义为空的名字；用"动词+名词"（如 `useTableQueryReload`、`gridDefaultProps`）。
|
||||
|
||||
### 1.3 文件 / 1.4 目录 / 1.5 资产命名
|
||||
|
||||
- 文件按主类型命名：页面 `index.vue`（views 目录内）、API 按 Controller 分 `api/<服务别名>/<模块>.ts`、组合式函数 `use<Xxx>.ts`。
|
||||
- 目录：`api/<服务别名>/`、`views/<一级菜单>/<二级菜单>/`、`router/`、`extend/`；业务自建 `components/ hooks/ store/ styles/ types/ utils/`。
|
||||
- 资产：图标/图片放 `src/assets/` 或 `public/`（按是否需编译/保持原名选择）。
|
||||
|
||||
### 1.6 字符串与本地化
|
||||
|
||||
- 用户可见文案用中文；菜单标题在路由 `meta.title` 与后端菜单保持一致。
|
||||
|
||||
## 2. 代码风格
|
||||
|
||||
### 2.1 排版
|
||||
|
||||
- TypeScript / Vue：2 空格缩进；单行 ≤ 120 字符；`<script setup>` + 选项式 `name`。
|
||||
- 已配置 `unplugin-auto-import`（vue/vue-router/@vueuse/core + Element Plus resolver）：**禁止**手动 import 这些自动导入项。
|
||||
|
||||
### 2.2 分层纪律
|
||||
|
||||
- 页面组件只消费状态/发请求（经 `api/` 封装），不直接拼 URL、不裸 axios（见共享规范 §4.3/§6）。
|
||||
- 业务通用逻辑抽 `hooks/`；跨页面共享状态抽 `store/`；数据模型类型保持薄。
|
||||
|
||||
### 2.3 并发 / 2.4 错误处理
|
||||
|
||||
- 并发：请求层已处理 token 刷新并发队列；页面不自行管理并发刷新。
|
||||
- 错误：由 request.ts 统一弹窗（9xx 业务 / 5xx 系统 / 401/429/503）；页面只需处理成功分支与局部提示。
|
||||
|
||||
### 2.5 注释
|
||||
|
||||
- 默认不写注释；只在 WHY 不明显时写一行；不写解释 WHAT 的注释。
|
||||
|
||||
## 3. 提交规范
|
||||
|
||||
### 3.1 Commit message 风格
|
||||
|
||||
Conventional Commits：`type(scope): subject`。允许 type：`feat` / `fix` / `docs` / `refactor` / `test` / `chore`。例：`feat(sms): 新增操作日志查询页面`。
|
||||
|
||||
### 3.2 提交粒度 / 3.3 工作区纪律 / 3.4 分支模型
|
||||
|
||||
- 一次提交一个目的；不在脏工作区叠加不相关改动。
|
||||
- 分支模型：主干 + 短命功能分支（按需，单人开发可直推主干）。
|
||||
- 本仓库属于工作区单一 git 仓库（`D:\workBuddySpace\member`）；纯前端改动 commit 限定本目录，跨项目改动（docs/）单独 commit。
|
||||
|
||||
### 3.5 实施日志
|
||||
|
||||
- 规则见 `VIBECODING_GUIDE §5`：每个可独立验收的部分写 `.project.agents/log/YYYY-MM-DD-<slug>.md`。
|
||||
|
||||
## 4. 测试策略
|
||||
|
||||
### 4.1 框架 / 4.2 必须有测试的模块
|
||||
|
||||
- 无自动化测试框架（PRD 决策）；人工冒烟覆盖：列表查询、表单增改、导出、权限路由。
|
||||
|
||||
### 4.3 必须真机/真环境验证
|
||||
|
||||
- 涉及后端联动的场景：多数据源路由、Kafka 消费、XXL-JOB 调度、Nacos 配置拉取、真实数据库迁移——mock/模拟器不算数。
|
||||
|
||||
## 5. 与上游文档的同步矩阵
|
||||
|
||||
| 变更点 | 必须同步更新 |
|
||||
|---|---|
|
||||
| 新增/改动页面功能 | `PRD.md`（功能定义）；共享规范如有涉及先改 `docs/coding-standards.md` |
|
||||
| 新增模块/目录/依赖方向 | 本仓库 `ARCHITECTURE.md` §2+§3 |
|
||||
| 改 request/gridDefaultProps 等对外签名 | `ARCHITECTURE.md` §3.2 + `docs/coding-standards.md` §6 |
|
||||
| UI/视觉 token | 本仓库 `UIUX.md` |
|
||||
|
||||
## 6. 不在本文范围（明确划清）
|
||||
|
||||
- 模块拆分归 `ARCHITECTURE.md`；行为/范围归 `PRD.md`；前后端共享约束（接口契约/异常码/分页/APP_NAME）归 `docs/coding-standards.md`；视觉细节归 `UIUX.md`。
|
||||
@@ -0,0 +1,84 @@
|
||||
# abacus-static-framework — 产品需求文档（PRD）
|
||||
|
||||
> 行为与范围的**唯一权威**。功能的加/删/改必须先改本文，再动代码与下游文档。
|
||||
> 本文回答"做什么 / 给谁 / 为什么"，不回答"怎么实现"（那是 `ARCHITECTURE.md`）。
|
||||
|
||||
## 1. 产品愿景
|
||||
|
||||
为 abacus 微服务体系提供**可复用的企业级 Vue 3 前端底座**：业务团队（人 + AI）只需在 `src/subsystem/**` 编写业务页面与接口封装，即可获得统一的菜单框架、权限路由、请求管线（统一响应体/服务别名/token 刷新）与标准 UI 组件，实现跨系统一致的前端体验与低成本复制开发。
|
||||
|
||||
## 2. 目标用户与典型场景
|
||||
|
||||
- 用户画像：公司内部业务系统开发团队（前端开发、全栈、AI 辅助开发人员）。
|
||||
- 场景 1：作为业务开发，我想在底座上复制 `subsystem` 示例新建一个业务子系统，以便快速产出与既有系统风格一致的页面。
|
||||
- 场景 2：作为 AI 助手，我想依据 `docs/coding-standards.md` 把用户给出的界面直接生成前后端代码，以便无需逐条追问技术细节。
|
||||
- 场景 3：作为框架负责人，我想保证所有子系统的 UI 组件与交互模式统一，以便降低维护成本与学习成本。
|
||||
|
||||
## 3. 范围（Scope）
|
||||
|
||||
### 3.1 MVP 必含（In Scope）
|
||||
- 菜单框架与动态路由/权限（后端菜单 → `filterAsyncRoutes` 匹配 → `addRoute`）。
|
||||
- 请求管线：统一响应体解包、URL 服务别名映射、token 自动刷新（并发队列）、commonParam 审计头、Excel ArrayBuffer 分支。
|
||||
- 标准组件与工具（`framework/components/standard` 10 项、`framework/utils/standard` 5 项）。
|
||||
- `src/subsystem` 业务开发模板（sms 示例：api / dynamicRouter / views / extend）。
|
||||
- 治理体系：`.project.agents/`（CLAUDE/AGENTS/SELF_CONSTRAINTS/VIBECODING_GUIDE + context 文档）。
|
||||
|
||||
### 3.2 明确不做（Out of Scope）
|
||||
- 不包含具体业务功能（业务只存在于 `src/subsystem/**` 的复制改写）。
|
||||
- 不提供单元测试框架与 CI 流水线（人工冒烟验证）。
|
||||
- 不维护后端逻辑（后端属 `abacus.springboot.example` 仓库）。
|
||||
|
||||
## 4. 核心功能定义
|
||||
|
||||
### 4.1 菜单框架与权限路由（【核心】）
|
||||
- **用户故事**：作为业务用户，我想登录后只看到有权限的菜单并直达页面，以便安全高效地工作。
|
||||
- **行为**：`permissionStore.generateRoutes` 拉取后端菜单，按 `url === path` 与 `subsystem/router/dynamicRouter.ts` 匹配，过滤后 `router.addRoute`。
|
||||
- **边界 / 异常**：菜单数据未注册 → 页面不可见；`public/data/data.js` 的 `currentSubsystem` 决定当前子系统。
|
||||
|
||||
### 4.2 请求管线（【核心】）
|
||||
- **用户故事**：作为业务开发者，我想只写 URL 与参数就能完成带鉴权、带审计的接口调用，以便不重复处理公共逻辑。
|
||||
- **行为**：`framework/utils/request.ts` 强制：服务别名映射（`settingsStore.backendServices`）、`status===200` 自动解包 `data`、token 剩余 <10 分钟自动刷新并重放并发请求、自动携带 `commonParam`。
|
||||
- **边界 / 异常**：业务异常码首位 9、系统异常码首位 5 统一弹窗提示；ArrayBuffer（Excel）不解包返回整个 response；HTTP 401 跳登录。
|
||||
|
||||
### 4.3 标准组件与工具（【核心】）
|
||||
- **用户故事**：作为业务开发，我想优先使用框架标准件，以便页面风格统一且少写重复代码。
|
||||
- **行为**：UI 优先级 standard 组件 > vxe-table（仅表格）> Element Plus > 自研（泛用性高需提交框架负责人）；工具同理。
|
||||
- **边界 / 异常**：自研组件不得长期只存在于单个业务内。
|
||||
|
||||
## 5. 信息架构与导航
|
||||
|
||||
顶层为菜单框架（一级菜单 → 二级菜单 → `views/<一级>/<二级>/index.vue`）；`dynamicRouter.ts` 是业务路由唯一注册点；子系统编码由 `public/data/data.js` 声明；开发期经 `vite.config.ts server.proxy` 反代后端。
|
||||
|
||||
## 6. 数据模型（概念级）
|
||||
|
||||
前端无持久化业务实体；运行时状态：用户登录信息（token/user）、菜单与路由（permissionStore）、服务别名映射（settingsStore.backendServices）、业务域（getCurrentBusinessDomain）。
|
||||
|
||||
## 7. 非功能性需求
|
||||
|
||||
- 构建产物直接输出到后端微服务 `resources/html/vue/<应用名>/`，随 `*-bin.zip` 一起发布（动静分离）。
|
||||
- 请求超时 50s；上传限制由后端 multipart 控制（50MB）。
|
||||
- 框架升级不覆盖 `public`、`vite.config.ts`、`src/subsystem`。
|
||||
|
||||
## 8. 国际化与文案语气
|
||||
|
||||
中文为主；用户可见文案使用统一中文，保持简洁、操作导向；禁止硬编码无意义字符串。
|
||||
|
||||
## 9. 隐私与合规
|
||||
|
||||
前端不收集个人数据；仅透传后端鉴权与业务域信息（commonParam）；无上报逻辑。
|
||||
|
||||
## 10. 风险与缓解
|
||||
|
||||
- **APP_NAME 四处漏配静默失败**：按共享规范 §3 四联检（`bootstrap.yml`/扫描包/URL 首段/outDir）。
|
||||
- **框架升级覆盖业务**：升级前备份 `public`、`vite.config.ts`、`src/subsystem`。
|
||||
- **自研组件碎片化**：泛用组件必须走框架评审入库。
|
||||
|
||||
## 11. 发布里程碑（建议，待路线图细化）
|
||||
|
||||
- M0：治理与规范落地（本次已完成）。
|
||||
- M1+：按 `ROADMAP.md` 以第一个业务子系统复制改写验证模板可复制性。
|
||||
|
||||
## 12. 假设与待澄清项（复核时请逐条回应）
|
||||
|
||||
- Q1. 是否所有新业务子系统都采用"复制 sms 示例 + 改写"的方式起步？（默认：是）
|
||||
- Q2. 是否引入前端单元测试（如 Vitest）？（默认：否，人工冒烟）
|
||||
@@ -0,0 +1,54 @@
|
||||
# abacus-static-framework — 实施路线图（ROADMAP）
|
||||
|
||||
> 由 `PRD.md` + `ARCHITECTURE.md` 推导。按依赖图拓扑顺序排开发节奏。每完成一个复选框，在**同一个 commit**里打勾；每完成一个 milestone，按 `.project.agents/log/` 模板写日志。
|
||||
|
||||
## 0. 排序原则
|
||||
|
||||
- 先底层（framework 只读，不轻易动）后业务（subsystem）。
|
||||
- 本仓库为**底座模板**：里程碑以"验证模板可复制性 + 治理可持续性"为主线，而非业务功能交付。
|
||||
|
||||
## 1. 里程碑总览
|
||||
|
||||
| Milestone | 目标 | 验收（能演示什么） |
|
||||
|---|---|---|
|
||||
| M0 | 治理落地（本次）：git 单一仓库、docs/ 文档中心、.project.agents 全套、共享规范 | 克隆仓库 → `npm install` → `npm run dev` 可起；治理文档无残留 token |
|
||||
| M1 | 模板可复制性验证：按 `docs/coding-standards.md §7` 用第一个业务子系统（界面→代码）跑通全流程 | 新业务子系统页面可访问、接口联调通 |
|
||||
| M2 | 沉淀与回写：业务中发现的共性需求回写 framework/standard 或 docs/ | 标准件/规范有增量，框架评审入库 |
|
||||
|
||||
## 2. 里程碑详细
|
||||
|
||||
### M0 — 治理与规范落地（已完成）
|
||||
- [x] 版本控制 + ignore + 骨架提交（工作区单一仓库 `D:\workBuddySpace\member`）
|
||||
- [x] docs/ 文档中心（README / architecture / coding-standards / agent-guide）
|
||||
- [x] 本仓库 .project.agents 治理文件（CLAUDE / AGENTS / SELF_CONSTRAINTS / VIBECODING_GUIDE / settings / context 五文档）
|
||||
- [x] 完成门禁（治理文档无残留模板 token / FILL 标记）
|
||||
- **验收**：克隆仓库 → `npm install` → `npm run dev` 可起；治理文档无残留 token。
|
||||
|
||||
### M1 — 模板可复制性验证（首个业务子系统）
|
||||
- **依赖**：M0
|
||||
- [ ] 选定/新建业务子系统（复制 `subsystem` sms 示例改写）
|
||||
- [ ] 按 `docs/coding-standards.md §7`：界面 → views + api → dynamicRouter → 后端接口 → SQL → APP_NAME 四联检 → 联调冒烟
|
||||
- [ ] 后端菜单数据注册（`sql/data/`），前端菜单可见
|
||||
- **验收**：新子系统在 dev 环境跑通列表/查询/新增/编辑/导出全链路。
|
||||
|
||||
### M2 — 沉淀与回写
|
||||
- **依赖**：M1
|
||||
- [ ] 收集业务开发中的共性需求（组件/工具/规范盲点）
|
||||
- [ ] 泛用组件走框架评审纳入 `framework/components/standard`（或 standard utils）
|
||||
- [ ] 规范盲点回写 `docs/coding-standards.md`（先改 docs/ 再同步各仓库指针）
|
||||
- **验收**：标准件与规范有可见增量，且新业务直接复用。
|
||||
|
||||
## 3. 并行轨道（与代码 milestone 解耦）
|
||||
|
||||
- 无（CI/资产生成等暂不纳入；如团队需要可补充构建门禁脚本到 `.project.agents/scripts/`）。
|
||||
|
||||
## 4. 完成定义（DoD）
|
||||
|
||||
- 构建通过（`npm run build:prod` 无错）；涉及后端联动场景需后端启动联调。
|
||||
- 触及的架构变更已回写 `ARCHITECTURE.md`；共享约束变更先改 `docs/coding-standards.md`。
|
||||
- 已写执行日志（`.project.agents/log/YYYY-MM-DD-<slug>.md`）。
|
||||
|
||||
## 5. 跨 milestone 不变量
|
||||
|
||||
- I1~I3（ARCHITECTURE §1.3）：framework 只读、请求走 request.ts、别名已注册。
|
||||
- 任何新模块/目录先登记 `ARCHITECTURE.md` 再写代码。
|
||||
@@ -0,0 +1,68 @@
|
||||
# abacus-static-framework — UI/UX 设计指南
|
||||
|
||||
> 视觉与交互细节的权威（与 `PRD.md` 并列上游）。视觉/交互改动先改本文，再让派生实现对齐。
|
||||
> 本文面向业务子系统开发：**页面模式与标准组件是唯一推荐路径**（共享规范 `docs/coding-standards.md §4.4~4.7` 为强制约束，此处给设计视角的说明）。
|
||||
|
||||
## 1. 设计原则（优先级递减）
|
||||
|
||||
1. **复用优先**：先标准组件（`framework/components/standard`），再 vxe-table（仅表格），再 Element Plus，最后才自研。
|
||||
2. **模式一致**：查询+列表页用同一套骨架（AbQueryForm + vxe-grid），让所有子系统页面观感统一。
|
||||
3. **配置驱动**：表单/查询表单用 fieldConfigs 配置式，少写模板代码。
|
||||
4. **表格是主角**：业务数据以表格呈现，列字段名与后端响应字段对齐。
|
||||
|
||||
## 2. 视觉身份
|
||||
|
||||
- 无独立品牌视觉；跟随公司菜单框架既有主题；不引入自定义品牌色（见 §3 语义色）。
|
||||
|
||||
## 3. 色板与字体
|
||||
|
||||
- 色板：使用 Element Plus 主题变量与 `framework/styles/variables.scss` 中定义的语义变量（禁止在业务内散落硬编码 hex）。
|
||||
- 字体：沿用框架全局样式；字号层级用 Element Plus 默认（14px 正文 / 标题层级）。
|
||||
|
||||
## 4. 间距与栅格
|
||||
|
||||
- 页面骨架固定：`<Title>` 页头 → `.form-container`（查询区，AbQueryForm）→ `.table-container`（vxe-grid）；间距沿用框架示例（sms 示例页面）的既有值。
|
||||
- 弹窗内表单用 AbForm 的布局配置（默认 label 左对齐）。
|
||||
|
||||
## 5. 动效与触觉
|
||||
|
||||
- 无自定义动效需求；使用 Element Plus 默认过渡；表格行编辑为双击进入（`editConfig trigger:'dblclick', mode:'row'`）。
|
||||
|
||||
## 6. 状态系统
|
||||
|
||||
- 空态：vxe-grid 空数据默认展示；查询无结果提示由表格空态承担。
|
||||
- 加载：`loading` 状态由 vxe-grid/按钮统一管理。
|
||||
- 错误：接口错误由 request.ts 统一弹窗（业务 9xx / 系统 5xx），页面不重复提示。
|
||||
- 成功：新增/保存成功用 `ElMessage.success`（框架既有约定）。
|
||||
|
||||
## 7. 屏幕规范
|
||||
|
||||
### 7.1 查询+列表页（标准模式）
|
||||
```
|
||||
Title 页头
|
||||
AbQueryForm（fieldConfigs: input/daterange/select/radio + slot 自定义）
|
||||
vxe-grid（gridDefaultProps + proxyConfig.ajax.query；clientPage 按数据量选）
|
||||
el-dialog（新增/编辑，AbForm） / el-drawer（详情/日志）
|
||||
```
|
||||
### 7.2 可编辑表格页
|
||||
- `editConfig: { trigger: 'dblclick', mode: 'row' }` + `editRender: { name: 'input' }` + `@edit-closed` 保存（参考 `views/config/business/index.vue`）。
|
||||
### 7.3 容器页（List/Detail 切换）
|
||||
- 容器 `index.vue` 用 `:is` 动态切换 `list.vue` / `detail.vue`（参考 `views/document/interfacedoc/`）。
|
||||
|
||||
## 8. 可访问性
|
||||
|
||||
- 表单字段 label 必填；操作按钮带语义化文字；表格 `seq` 序号列保留。
|
||||
|
||||
## 9. 文案语气
|
||||
|
||||
- 按钮：动词短语（新增/编辑/删除/导出/查询/重置）。
|
||||
- 错误提示：简短、可直接行动的句子（由后端 message 提供，前端原样展示）。
|
||||
|
||||
## 10. 性能预算
|
||||
|
||||
- 列表默认服务端分页（`clientPage:false`），避免一次拉全量；大数据量禁客户端分页。
|
||||
- 查询表单默认收起多余条件（按需扩展）。
|
||||
|
||||
## 11. 视觉资产清单
|
||||
|
||||
- 一般业务无需产出视觉资产；如确需图标，放入 `src/assets/` 由构建处理（或 `public/` 保持原名），命名 kebab-case。
|
||||
@@ -0,0 +1,28 @@
|
||||
# 治理体系落地（ADS Retrofit）
|
||||
|
||||
- **日期**：2026-08-19
|
||||
- **关联**：ROADMAP M0
|
||||
- **会话上下文**：工作区两个参考模板（前端 abacus-static-framework、后端 abacus.springboot.example）此前无 git、无 docs/ 文档中心、无 .project.agents 治理。
|
||||
|
||||
## 做了什么
|
||||
|
||||
- 工作区根 `D:\workBuddySpace\member` 建单一 git 仓库 + `.gitignore`（node_modules/target/dist/.workbuddy 等）。
|
||||
- 创建 `docs/` 文档中心（单源化）：`README.md`（索引+映射表）、`architecture.md`（动静分离架构）、`coding-standards.md`（★前后端开发约束规范，约 4.5k 字）、`agent-guide.md`（AI 生成代码工作流与提示词协议）。
|
||||
- 本仓库落地 `.project.agents/`：CLAUDE.md / AGENTS.md / SELF_CONSTRAINTS.md / VIBECODING_GUIDE.md / settings.json / log/README.md + `docs/context/{PRD,ARCHITECTURE,ROADMAP,CONVENTIONS,UIUX}.md`，全部填充无残留 token。
|
||||
- 共享内容以指针引用 `../../../../docs/`（如 CONVENTIONS 引用 `coding-standards.md`），未复制正文。
|
||||
- 分析过程使用 CodeGraph MCP 索引后端（82 文件）与前端 subsystem（7 文件），符号级上下文工具受限，降级为关键文件定向读取（request.ts / vite.config / yml / pom / assembly / JcBillController 等）。
|
||||
|
||||
## 提交
|
||||
|
||||
- 见工作区根 git 提交（docs/ 文档中心、前端治理、后端治理三个原子提交）。
|
||||
|
||||
## 状态变更
|
||||
|
||||
- ARCHITECTURE：本仓库 ARCHITECTURE.md 已按实际结构（framework 只读 + subsystem 业务）编写；不变量 I1~I3。
|
||||
- PRD / UIUX：PRD、UIUX 均已填充；UIUX 面向业务子系统页面模式。
|
||||
- 测试：无代码改动，未触发。
|
||||
|
||||
## 下一步
|
||||
|
||||
- 按 ROADMAP M1 用第一个业务子系统（界面→代码）验证模板可复制性。
|
||||
- 待澄清项见 PRD §12（新业务复制起步方式 / 是否引入前端单测）。
|
||||
@@ -0,0 +1,54 @@
|
||||
# 实施日志（execution log）
|
||||
|
||||
本目录沉淀"做了什么 + 哪些提交 + 下一步"，供下一个会话接手用。
|
||||
规则与时机见 `../VIBECODING_GUIDE.md §5`；硬约束见 `../SELF_CONSTRAINTS.md §B6`。
|
||||
|
||||
---
|
||||
|
||||
## 文件命名
|
||||
|
||||
`YYYY-MM-DD-<slug>.md`
|
||||
|
||||
- `<slug>` = 简短动词 + 范围，kebab-case
|
||||
- 同日多份按写作顺序加 `-1`、`-2` 后缀
|
||||
|
||||
## 模板
|
||||
|
||||
```markdown
|
||||
# <一句话标题：完成了什么>
|
||||
|
||||
- **日期**：YYYY-MM-DD
|
||||
- **关联**：ROADMAP M<N> / 子任务名 / 关联文档
|
||||
- **会话上下文**：（可选）本会话从哪开始接手的
|
||||
|
||||
## 做了什么
|
||||
- bullet 1
|
||||
- bullet 2
|
||||
|
||||
## 提交
|
||||
- `<short hash>` <commit subject>
|
||||
|
||||
（若本段未提交：明确写"未提交，工作树状态：…"并说明原因）
|
||||
|
||||
## 状态变更
|
||||
- ARCHITECTURE：是否动过？动了哪一节？
|
||||
- PRD / UIUX：是否触发回归？
|
||||
- 测试：跑了什么，结果
|
||||
|
||||
## 下一步
|
||||
- 接下来要做的第一件事（具体到任务名）
|
||||
- 已知阻塞 / 待澄清项
|
||||
```
|
||||
|
||||
## 何时写
|
||||
|
||||
- 完成一个 ROADMAP milestone
|
||||
- 完成一个独立可验收的子任务
|
||||
- 完成非平凡的重构 / bug 修复
|
||||
- 会话即将结束（兜底）
|
||||
|
||||
## 何时不写
|
||||
|
||||
- 还没完成一个"可独立验收"的部分（别凑数）
|
||||
- 纯文档微调（commit 自身已够说明）
|
||||
- 实验性探索且最终 revert（commit 即可）
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [],
|
||||
"deny": []
|
||||
},
|
||||
"hooks": {}
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
# Vue 3 + TypeScript + Vite
|
||||
|
||||
> 📚 **团队文档中心**：前后端统一架构、编码标准、接口契约与 agent 协作边界见仓库同级 [`../docs/README.md`](../docs/README.md)（`architecture.md` / `coding-standards.md` / `agent-guide.md`）。业务开发请写在 `src/subsystem/**`，`src/framework/**` 为只读共享框架。
|
||||
|
||||
## 环境
|
||||
|
||||
### 安装node.js
|
||||
安装18.20.7版本
|
||||
|
||||
### 安装npm
|
||||
- 新版的nodejs已经集成了npm，输入 "npm -v" 来测试是否成功安装
|
||||
- 设置npm镜像源为淘宝镜像：npm config set registry https://registry.npmmirror.com
|
||||
|
||||
### 安装开发工具及插件
|
||||
安装Visual Studio Code开发工具
|
||||
安装Vue Language Features (Volar)插件 ： 为.vue单文件组件提供代码高亮以及语法支持
|
||||
安装TypeScript Vue Plugin (Volar)插件 ： ts语法支持
|
||||
安装JavaScript (ES6) code snippets插件 : es6的快捷语法
|
||||
|
||||
|
||||
#### 设置npm源为淘宝镜像
|
||||
npm install --registry=https://registry.npmmirror.com
|
||||
|
||||
### 安装依赖
|
||||
npm install
|
||||
|
||||
### 启动本地服务
|
||||
npm run dev
|
||||
|
||||
### 打包测试环境
|
||||
npm run build:stage
|
||||
|
||||
### 打包生产环境
|
||||
npm run build:prod
|
||||
|
||||
|
||||
|
||||
|
||||
# 框架文件、开发规范说明
|
||||
|
||||
## public
|
||||
|
||||
公共文件夹，不会被编译，以下情况适用
|
||||
1、不会被源码引用（例如 robots.txt）
|
||||
2、必须保持原有文件名（没有经过 hash）
|
||||
3、或者你压根不想引入该资源，只是想得到其 URL。
|
||||
|
||||
## src/assets
|
||||
公共静态文件夹，目录中文件会被编译
|
||||
|
||||
## src/framework
|
||||
|
||||
**api** 菜单框架访问后端服务接口
|
||||
**components** 框架提供公共组件
|
||||
**hooks** 组合式函数，集成了多个基础组件实现的通用函数
|
||||
**layout** 菜单框架布局组件
|
||||
**router** 静态路由
|
||||
**store** 菜单使用的状态机（菜单配置、用户登录信息等等）
|
||||
**styles** 公共css
|
||||
**types** 公共对象（分页参数对象、弹窗属性对象）
|
||||
**utils** 无状态ts函数、常量配置，例如时间处理工具
|
||||
**views** 二级菜单内容显示组件
|
||||
|
||||
## src/subsystem
|
||||
1.子系统开发目录
|
||||
|
||||
### 子系统第一次开发必做事项
|
||||
|
||||
**vite.config.ts**
|
||||
1、将“**build.outDir**”修改为编译后的输出路径，直接输出到微服务发布包“resources/html/微服务名称”中，与后端服务一起，按原有流程发布版本
|
||||
2、将“**server.proxy**”修改为微服务访问路径，在VSCode开发环境下，将代替nginx的作用
|
||||
|
||||
**public/data/data.js**
|
||||
|
||||
1、修改publicData.currentSubsystem数据，用于框架获取子系统菜单模块
|
||||
2、修改publicData.currentSubsystemName数据，用于框架获取子系统中文名称
|
||||
3、如存在需要兼容老框架的的前端页面，修改externalOldERPIndex数据，否则改为''
|
||||
|
||||
### 子系统后期更新框架注意事项
|
||||
|
||||
不需要覆盖的文件夹、文件,以下有改动，会特别说明，并单独修改
|
||||
|
||||
1、public
|
||||
|
||||
2、vite.config.ts
|
||||
|
||||
3、src\subsystem
|
||||
|
||||
|
||||
覆盖完文件后，执行npm install
|
||||
|
||||
### 开发规范
|
||||
|
||||
**api** 后端服务接口，按照微服务名称划分子文件夹(/api/pms)，按照Controller划分ts文件(/api/pms/product.ts)
|
||||
**router/dynamicRouter.ts** 菜单路由配置
|
||||
**views** 菜单内容组件，按照一、二级菜单划分文件夹(/views/一级菜单名称/二级菜单名称)
|
||||
**components** 子系统内部通用组件,如相同功能，在多个菜单内容组件中多次出现，可抽象为通用组件
|
||||
**hooks** 子系统内业务相关组合式函数，集成了多个基础组件实现的通用函数
|
||||
**store** 子系统内业务相关使用的状态机（参考框架使用场景）
|
||||
**styles** 子系统内业务相关公共css
|
||||
**types** 子系统内业务相关公共对象（参考框架使用场景）
|
||||
**utils** 子系统内业务相关处理ts函数、业务常量配置
|
||||
|
||||
|
||||
# UI组件使用规范
|
||||
|
||||
UI组件优先使用/src/framework/components/standard/中提供的UI组件，里面的组件使用都可以在框架提供的示例模块中找到使用代码。
|
||||
|
||||
如不满足或者没有，则表格组件使用vxe-table，除了表格组件，其他均使用elemen-plus提供的组件
|
||||
|
||||
如vxe-table、elemen-plus都不满足，则自己通过css、html实现组件化，并且泛用性高，请提交到框架负责人处，发布到公司的UI组件库
|
||||
|
||||
# JS/TS工具类推荐
|
||||
|
||||
相同功能优先使用/src/framework/utils/standard/中提供的ts，里面的组件使用都可以在框架提供的示例模块中找到使用代码。
|
||||
|
||||
已集成的其他ts工具：xe-utils
|
||||
|
||||
# 发布前注意事项
|
||||
1、如果是独立模块或者系统,在/data/doc/升级日志.md中，增加本次升级内容
|
||||
+286
@@ -0,0 +1,286 @@
|
||||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-auto-import
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const ElLoading: typeof import('element-plus/es')['ElLoading']
|
||||
const ElMessage: typeof import('element-plus/es')['ElMessage']
|
||||
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
|
||||
const ElNotification: typeof import('element-plus/es')['ElNotification']
|
||||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
|
||||
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const computedAsync: typeof import('@vueuse/core')['computedAsync']
|
||||
const computedEager: typeof import('@vueuse/core')['computedEager']
|
||||
const computedInject: typeof import('@vueuse/core')['computedInject']
|
||||
const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
|
||||
const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
|
||||
const controlledRef: typeof import('@vueuse/core')['controlledRef']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const createEventHook: typeof import('@vueuse/core')['createEventHook']
|
||||
const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
|
||||
const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
|
||||
const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
|
||||
const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
|
||||
const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
|
||||
const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
|
||||
const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
|
||||
const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const extendRef: typeof import('@vueuse/core')['extendRef']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isDefined: typeof import('@vueuse/core')['isDefined']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
|
||||
const onLongPress: typeof import('@vueuse/core')['onLongPress']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactify: typeof import('@vueuse/core')['reactify']
|
||||
const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
|
||||
const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
|
||||
const reactivePick: typeof import('@vueuse/core')['reactivePick']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
|
||||
const refDebounced: typeof import('@vueuse/core')['refDebounced']
|
||||
const refDefault: typeof import('@vueuse/core')['refDefault']
|
||||
const refThrottled: typeof import('@vueuse/core')['refThrottled']
|
||||
const refWithControl: typeof import('@vueuse/core')['refWithControl']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const resolveRef: typeof import('@vueuse/core')['resolveRef']
|
||||
const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const syncRef: typeof import('@vueuse/core')['syncRef']
|
||||
const syncRefs: typeof import('@vueuse/core')['syncRefs']
|
||||
const templateRef: typeof import('@vueuse/core')['templateRef']
|
||||
const throttledRef: typeof import('@vueuse/core')['throttledRef']
|
||||
const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toReactive: typeof import('@vueuse/core')['toReactive']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const toValue: typeof import('vue')['toValue']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
|
||||
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
|
||||
const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
|
||||
const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
|
||||
const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const unrefElement: typeof import('@vueuse/core')['unrefElement']
|
||||
const until: typeof import('@vueuse/core')['until']
|
||||
const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
|
||||
const useAnimate: typeof import('@vueuse/core')['useAnimate']
|
||||
const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
|
||||
const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
|
||||
const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
|
||||
const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
|
||||
const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
|
||||
const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
|
||||
const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
|
||||
const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
|
||||
const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
|
||||
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
|
||||
const useArraySome: typeof import('@vueuse/core')['useArraySome']
|
||||
const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
|
||||
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
|
||||
const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useBase64: typeof import('@vueuse/core')['useBase64']
|
||||
const useBattery: typeof import('@vueuse/core')['useBattery']
|
||||
const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
|
||||
const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
|
||||
const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
|
||||
const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
|
||||
const useCached: typeof import('@vueuse/core')['useCached']
|
||||
const useClipboard: typeof import('@vueuse/core')['useClipboard']
|
||||
const useCloned: typeof import('@vueuse/core')['useCloned']
|
||||
const useColorMode: typeof import('@vueuse/core')['useColorMode']
|
||||
const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
|
||||
const useCounter: typeof import('@vueuse/core')['useCounter']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVar: typeof import('@vueuse/core')['useCssVar']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
|
||||
const useCycleList: typeof import('@vueuse/core')['useCycleList']
|
||||
const useDark: typeof import('@vueuse/core')['useDark']
|
||||
const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
|
||||
const useDebounce: typeof import('@vueuse/core')['useDebounce']
|
||||
const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
|
||||
const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
|
||||
const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
|
||||
const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
|
||||
const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
|
||||
const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
|
||||
const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
|
||||
const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
|
||||
const useDraggable: typeof import('@vueuse/core')['useDraggable']
|
||||
const useDropZone: typeof import('@vueuse/core')['useDropZone']
|
||||
const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
|
||||
const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
|
||||
const useElementHover: typeof import('@vueuse/core')['useElementHover']
|
||||
const useElementSize: typeof import('@vueuse/core')['useElementSize']
|
||||
const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
|
||||
const useEventBus: typeof import('@vueuse/core')['useEventBus']
|
||||
const useEventListener: typeof import('@vueuse/core')['useEventListener']
|
||||
const useEventSource: typeof import('@vueuse/core')['useEventSource']
|
||||
const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
|
||||
const useFavicon: typeof import('@vueuse/core')['useFavicon']
|
||||
const useFetch: typeof import('@vueuse/core')['useFetch']
|
||||
const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
|
||||
const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
|
||||
const useFocus: typeof import('@vueuse/core')['useFocus']
|
||||
const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
|
||||
const useFps: typeof import('@vueuse/core')['useFps']
|
||||
const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
|
||||
const useGamepad: typeof import('@vueuse/core')['useGamepad']
|
||||
const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
|
||||
const useIdle: typeof import('@vueuse/core')['useIdle']
|
||||
const useImage: typeof import('@vueuse/core')['useImage']
|
||||
const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
|
||||
const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
|
||||
const useInterval: typeof import('@vueuse/core')['useInterval']
|
||||
const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
|
||||
const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
|
||||
const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
|
||||
const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
|
||||
const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
|
||||
const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
|
||||
const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
|
||||
const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
|
||||
const useMemoize: typeof import('@vueuse/core')['useMemoize']
|
||||
const useMemory: typeof import('@vueuse/core')['useMemory']
|
||||
const useMounted: typeof import('@vueuse/core')['useMounted']
|
||||
const useMouse: typeof import('@vueuse/core')['useMouse']
|
||||
const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
|
||||
const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
|
||||
const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
|
||||
const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
|
||||
const useNetwork: typeof import('@vueuse/core')['useNetwork']
|
||||
const useNow: typeof import('@vueuse/core')['useNow']
|
||||
const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
|
||||
const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
|
||||
const useOnline: typeof import('@vueuse/core')['useOnline']
|
||||
const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
|
||||
const useParallax: typeof import('@vueuse/core')['useParallax']
|
||||
const useParentElement: typeof import('@vueuse/core')['useParentElement']
|
||||
const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
|
||||
const usePermission: typeof import('@vueuse/core')['usePermission']
|
||||
const usePointer: typeof import('@vueuse/core')['usePointer']
|
||||
const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
|
||||
const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
|
||||
const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
|
||||
const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
|
||||
const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
|
||||
const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
|
||||
const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
|
||||
const usePrevious: typeof import('@vueuse/core')['usePrevious']
|
||||
const useRafFn: typeof import('@vueuse/core')['useRafFn']
|
||||
const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
|
||||
const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
|
||||
const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
|
||||
const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
|
||||
const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
|
||||
const useScroll: typeof import('@vueuse/core')['useScroll']
|
||||
const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
|
||||
const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
|
||||
const useShare: typeof import('@vueuse/core')['useShare']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useSorted: typeof import('@vueuse/core')['useSorted']
|
||||
const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
|
||||
const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
|
||||
const useStepper: typeof import('@vueuse/core')['useStepper']
|
||||
const useStorage: typeof import('@vueuse/core')['useStorage']
|
||||
const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
|
||||
const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
|
||||
const useSupported: typeof import('@vueuse/core')['useSupported']
|
||||
const useSwipe: typeof import('@vueuse/core')['useSwipe']
|
||||
const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
|
||||
const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
|
||||
const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
|
||||
const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
|
||||
const useThrottle: typeof import('@vueuse/core')['useThrottle']
|
||||
const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
|
||||
const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
|
||||
const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
|
||||
const useTimeout: typeof import('@vueuse/core')['useTimeout']
|
||||
const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
|
||||
const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
|
||||
const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
|
||||
const useTitle: typeof import('@vueuse/core')['useTitle']
|
||||
const useToNumber: typeof import('@vueuse/core')['useToNumber']
|
||||
const useToString: typeof import('@vueuse/core')['useToString']
|
||||
const useToggle: typeof import('@vueuse/core')['useToggle']
|
||||
const useTransition: typeof import('@vueuse/core')['useTransition']
|
||||
const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
|
||||
const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
|
||||
const useVModel: typeof import('@vueuse/core')['useVModel']
|
||||
const useVModels: typeof import('@vueuse/core')['useVModels']
|
||||
const useVibrate: typeof import('@vueuse/core')['useVibrate']
|
||||
const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
|
||||
const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
|
||||
const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
|
||||
const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
|
||||
const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
|
||||
const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
|
||||
const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
|
||||
const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
|
||||
const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchArray: typeof import('@vueuse/core')['watchArray']
|
||||
const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
|
||||
const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
|
||||
const watchDeep: typeof import('@vueuse/core')['watchDeep']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
|
||||
const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
|
||||
const watchOnce: typeof import('@vueuse/core')['watchOnce']
|
||||
const watchPausable: typeof import('@vueuse/core')['watchPausable']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
|
||||
const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
|
||||
const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
|
||||
const whenever: typeof import('@vueuse/core')['whenever']
|
||||
}
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
|
||||
}
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export {}
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
ElAside: typeof import('element-plus/es')['ElAside']
|
||||
ElAvatar: typeof import('element-plus/es')['ElAvatar']
|
||||
ElBacktop: typeof import('element-plus/es')['ElBacktop']
|
||||
ElBadge: typeof import('element-plus/es')['ElBadge']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElCollapse: typeof import('element-plus/es')['ElCollapse']
|
||||
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
ElContainer: typeof import('element-plus/es')['ElContainer']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDivider: typeof import('element-plus/es')['ElDivider']
|
||||
ElDrawer: typeof import('element-plus/es')['ElDrawer']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElHeader: typeof import('element-plus/es')['ElHeader']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElLink: typeof import('element-plus/es')['ElLink']
|
||||
ElMain: typeof import('element-plus/es')['ElMain']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSpace: typeof import('element-plus/es')['ElSpace']
|
||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElText: typeof import('element-plus/es')['ElText']
|
||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
|
||||
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
export interface ComponentCustomProperties {
|
||||
vLoading: typeof import('element-plus/es')['ElLoadingDirective']
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>首页</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="/data/data.js"></script>
|
||||
<!-- <script src="/frameconfig/index.js"></script> -->
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
let t=new Date().getTime()
|
||||
// document.write('<script src="/data/data.js?t=' + t + '"><\/script>');
|
||||
document.write('<script src="/frameconfig/index.js?t=' + t + '"><\/script>');
|
||||
</script>
|
||||
</html>
|
||||
+5366
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,53 @@
|
||||
{
|
||||
"name": "abacus-static-framework",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build:prod": "vite build --mode production &&vue-tsc --noEmit",
|
||||
"build:stage": "vite build --mode staging &&vue-tsc --noEmit",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"@vue-office/docx": "^1.6.0",
|
||||
"@vue-office/excel": "^1.7.2",
|
||||
"@vue-office/pdf": "^1.6.5",
|
||||
"@vueuse/core": "^10.2.1",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"axios": "^1.8.1",
|
||||
"consola": "^3.2.3",
|
||||
"crypto-js": "^4.2.0",
|
||||
"element-china-area-data": "^6.1.0",
|
||||
"element-plus": "^2.9.5",
|
||||
"exceljs": "^4.4.0",
|
||||
"fuse.js": "^6.6.2",
|
||||
"js-base64": "^3.7.7",
|
||||
"js-cookie": "^3.0.5",
|
||||
"markdown-it": "^14.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"path-to-regexp": "^6.2.1",
|
||||
"pinia": "^3.0.1",
|
||||
"sm-crypto": "^0.3.13",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0",
|
||||
"vxe-table": "^4.11.18",
|
||||
"vxe-table-plugin-export-xlsx": "^4.0.7",
|
||||
"xe-utils": "^3.7.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.3.1",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"sass": "^1.63.4",
|
||||
"typescript": "^5.0.2",
|
||||
"unplugin-auto-import": "^0.16.4",
|
||||
"unplugin-vue-components": "^0.25.1",
|
||||
"vite": "^6.0.0",
|
||||
"vite-plugin-style-import": "^2.0.0",
|
||||
"vue-tsc": "^1.4.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
// 全局变量
|
||||
// 用于定义通用模拟数据
|
||||
let publicData={
|
||||
currentSubsystemName:'系统管理',//当前子系统中文名称，与后端菜单子系统名称保持一致
|
||||
currentSubsystem:'sms',//当前子系统名称，与后端菜单子系统编码保持一致
|
||||
externalOldERPIndex:'/sms/sms/',//子系统动静分离版本页面地址配置，用于兼容历史模块使用
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
@@ -0,0 +1,24 @@
|
||||
|
||||
<template>
|
||||
<el-config-provider :locale="locale">
|
||||
<router-view />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { ElConfigProvider } from 'element-plus'
|
||||
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
ElConfigProvider,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
locale: zhCn,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 330 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 782 B |
Binary file not shown.
|
After Width: | Height: | Size: 512 B |
Binary file not shown.
|
After Width: | Height: | Size: 892 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 735 B |
Binary file not shown.
|
After Width: | Height: | Size: 763 B |
Binary file not shown.
|
After Width: | Height: | Size: 973 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 803 B |
Binary file not shown.
|
After Width: | Height: | Size: 698 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 308 B |
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 338 B |
Binary file not shown.
|
After Width: | Height: | Size: 437 B |
Binary file not shown.
|
After Width: | Height: | Size: 537 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
+297
@@ -0,0 +1,297 @@
|
||||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
// Generated by unplugin-auto-import
|
||||
export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const ElMessage: typeof import('element-plus/es')['ElMessage']
|
||||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
|
||||
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const computedAsync: typeof import('@vueuse/core')['computedAsync']
|
||||
const computedEager: typeof import('@vueuse/core')['computedEager']
|
||||
const computedInject: typeof import('@vueuse/core')['computedInject']
|
||||
const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
|
||||
const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
|
||||
const controlledRef: typeof import('@vueuse/core')['controlledRef']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const createEventHook: typeof import('@vueuse/core')['createEventHook']
|
||||
const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
|
||||
const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
|
||||
const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
|
||||
const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
|
||||
const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
|
||||
const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
|
||||
const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
|
||||
const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const extendRef: typeof import('@vueuse/core')['extendRef']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const injectLocal: typeof import('@vueuse/core')['injectLocal']
|
||||
const isDefined: typeof import('@vueuse/core')['isDefined']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
|
||||
const markRaw: typeof import('vue')['markRaw']
|
||||
const nextTick: typeof import('vue')['nextTick']
|
||||
const onActivated: typeof import('vue')['onActivated']
|
||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
|
||||
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
|
||||
const onLongPress: typeof import('@vueuse/core')['onLongPress']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
|
||||
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const provideLocal: typeof import('@vueuse/core')['provideLocal']
|
||||
const reactify: typeof import('@vueuse/core')['reactify']
|
||||
const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
|
||||
const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
|
||||
const reactivePick: typeof import('@vueuse/core')['reactivePick']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
|
||||
const refDebounced: typeof import('@vueuse/core')['refDebounced']
|
||||
const refDefault: typeof import('@vueuse/core')['refDefault']
|
||||
const refThrottled: typeof import('@vueuse/core')['refThrottled']
|
||||
const refWithControl: typeof import('@vueuse/core')['refWithControl']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const resolveRef: typeof import('@vueuse/core')['resolveRef']
|
||||
const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const syncRef: typeof import('@vueuse/core')['syncRef']
|
||||
const syncRefs: typeof import('@vueuse/core')['syncRefs']
|
||||
const templateRef: typeof import('@vueuse/core')['templateRef']
|
||||
const throttledRef: typeof import('@vueuse/core')['throttledRef']
|
||||
const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toReactive: typeof import('@vueuse/core')['toReactive']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const toValue: typeof import('vue')['toValue']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
|
||||
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
|
||||
const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
|
||||
const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
|
||||
const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const unrefElement: typeof import('@vueuse/core')['unrefElement']
|
||||
const until: typeof import('@vueuse/core')['until']
|
||||
const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
|
||||
const useAnimate: typeof import('@vueuse/core')['useAnimate']
|
||||
const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
|
||||
const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
|
||||
const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
|
||||
const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
|
||||
const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
|
||||
const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
|
||||
const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
|
||||
const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
|
||||
const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
|
||||
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
|
||||
const useArraySome: typeof import('@vueuse/core')['useArraySome']
|
||||
const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
|
||||
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
|
||||
const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useBase64: typeof import('@vueuse/core')['useBase64']
|
||||
const useBattery: typeof import('@vueuse/core')['useBattery']
|
||||
const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
|
||||
const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
|
||||
const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
|
||||
const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
|
||||
const useCached: typeof import('@vueuse/core')['useCached']
|
||||
const useClipboard: typeof import('@vueuse/core')['useClipboard']
|
||||
const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
|
||||
const useCloned: typeof import('@vueuse/core')['useCloned']
|
||||
const useColorMode: typeof import('@vueuse/core')['useColorMode']
|
||||
const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
|
||||
const useCounter: typeof import('@vueuse/core')['useCounter']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVar: typeof import('@vueuse/core')['useCssVar']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
|
||||
const useCycleList: typeof import('@vueuse/core')['useCycleList']
|
||||
const useDark: typeof import('@vueuse/core')['useDark']
|
||||
const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
|
||||
const useDebounce: typeof import('@vueuse/core')['useDebounce']
|
||||
const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
|
||||
const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
|
||||
const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
|
||||
const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
|
||||
const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
|
||||
const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
|
||||
const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
|
||||
const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
|
||||
const useDraggable: typeof import('@vueuse/core')['useDraggable']
|
||||
const useDropZone: typeof import('@vueuse/core')['useDropZone']
|
||||
const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
|
||||
const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
|
||||
const useElementHover: typeof import('@vueuse/core')['useElementHover']
|
||||
const useElementSize: typeof import('@vueuse/core')['useElementSize']
|
||||
const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
|
||||
const useEventBus: typeof import('@vueuse/core')['useEventBus']
|
||||
const useEventListener: typeof import('@vueuse/core')['useEventListener']
|
||||
const useEventSource: typeof import('@vueuse/core')['useEventSource']
|
||||
const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
|
||||
const useFavicon: typeof import('@vueuse/core')['useFavicon']
|
||||
const useFetch: typeof import('@vueuse/core')['useFetch']
|
||||
const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
|
||||
const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
|
||||
const useFocus: typeof import('@vueuse/core')['useFocus']
|
||||
const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
|
||||
const useFps: typeof import('@vueuse/core')['useFps']
|
||||
const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
|
||||
const useGamepad: typeof import('@vueuse/core')['useGamepad']
|
||||
const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
|
||||
const useId: typeof import('vue')['useId']
|
||||
const useIdle: typeof import('@vueuse/core')['useIdle']
|
||||
const useImage: typeof import('@vueuse/core')['useImage']
|
||||
const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
|
||||
const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
|
||||
const useInterval: typeof import('@vueuse/core')['useInterval']
|
||||
const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
|
||||
const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
|
||||
const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
|
||||
const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
|
||||
const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
|
||||
const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
|
||||
const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
|
||||
const useMemoize: typeof import('@vueuse/core')['useMemoize']
|
||||
const useMemory: typeof import('@vueuse/core')['useMemory']
|
||||
const useModel: typeof import('vue')['useModel']
|
||||
const useMounted: typeof import('@vueuse/core')['useMounted']
|
||||
const useMouse: typeof import('@vueuse/core')['useMouse']
|
||||
const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
|
||||
const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
|
||||
const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
|
||||
const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
|
||||
const useNetwork: typeof import('@vueuse/core')['useNetwork']
|
||||
const useNow: typeof import('@vueuse/core')['useNow']
|
||||
const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
|
||||
const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
|
||||
const useOnline: typeof import('@vueuse/core')['useOnline']
|
||||
const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
|
||||
const useParallax: typeof import('@vueuse/core')['useParallax']
|
||||
const useParentElement: typeof import('@vueuse/core')['useParentElement']
|
||||
const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
|
||||
const usePermission: typeof import('@vueuse/core')['usePermission']
|
||||
const usePointer: typeof import('@vueuse/core')['usePointer']
|
||||
const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
|
||||
const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
|
||||
const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
|
||||
const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
|
||||
const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
|
||||
const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
|
||||
const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
|
||||
const usePrevious: typeof import('@vueuse/core')['usePrevious']
|
||||
const useRafFn: typeof import('@vueuse/core')['useRafFn']
|
||||
const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
|
||||
const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
|
||||
const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
|
||||
const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
|
||||
const useScroll: typeof import('@vueuse/core')['useScroll']
|
||||
const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
|
||||
const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
|
||||
const useShare: typeof import('@vueuse/core')['useShare']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useSorted: typeof import('@vueuse/core')['useSorted']
|
||||
const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
|
||||
const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
|
||||
const useStepper: typeof import('@vueuse/core')['useStepper']
|
||||
const useStorage: typeof import('@vueuse/core')['useStorage']
|
||||
const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
|
||||
const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
|
||||
const useSupported: typeof import('@vueuse/core')['useSupported']
|
||||
const useSwipe: typeof import('@vueuse/core')['useSwipe']
|
||||
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||
const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
|
||||
const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
|
||||
const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
|
||||
const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
|
||||
const useThrottle: typeof import('@vueuse/core')['useThrottle']
|
||||
const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
|
||||
const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
|
||||
const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
|
||||
const useTimeout: typeof import('@vueuse/core')['useTimeout']
|
||||
const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
|
||||
const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
|
||||
const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
|
||||
const useTitle: typeof import('@vueuse/core')['useTitle']
|
||||
const useToNumber: typeof import('@vueuse/core')['useToNumber']
|
||||
const useToString: typeof import('@vueuse/core')['useToString']
|
||||
const useToggle: typeof import('@vueuse/core')['useToggle']
|
||||
const useTransition: typeof import('@vueuse/core')['useTransition']
|
||||
const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
|
||||
const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
|
||||
const useVModel: typeof import('@vueuse/core')['useVModel']
|
||||
const useVModels: typeof import('@vueuse/core')['useVModels']
|
||||
const useVibrate: typeof import('@vueuse/core')['useVibrate']
|
||||
const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
|
||||
const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
|
||||
const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
|
||||
const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
|
||||
const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
|
||||
const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
|
||||
const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
|
||||
const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
|
||||
const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchArray: typeof import('@vueuse/core')['watchArray']
|
||||
const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
|
||||
const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
|
||||
const watchDeep: typeof import('@vueuse/core')['watchDeep']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
|
||||
const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
|
||||
const watchOnce: typeof import('@vueuse/core')['watchOnce']
|
||||
const watchPausable: typeof import('@vueuse/core')['watchPausable']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
|
||||
const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
|
||||
const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
|
||||
const whenever: typeof import('@vueuse/core')['whenever']
|
||||
}
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
import request from '@/framework/utils/request';
|
||||
import { AxiosPromise } from 'axios';
|
||||
import { UserInfo } from './types';
|
||||
|
||||
function replaceAcasService(url){
|
||||
if(publicData.replaceAcasService){
|
||||
return url.replace('/acas/','/'+publicData.replaceAcasService+'/')
|
||||
}
|
||||
return url
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取路由列表
|
||||
*/
|
||||
export function listRoutes(params: any = {}) {
|
||||
return request({
|
||||
url: replaceAcasService('/acas/user/allowAccessMenuAndModules'),
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**获取key */
|
||||
export function getKey(params: any = {}) {
|
||||
return request({
|
||||
url:replaceAcasService('/acas/pk'),
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**刷新*/
|
||||
export function baseRefresh(url:string,data: any = {}) {
|
||||
return request({
|
||||
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
||||
url:replaceAcasService(url),
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**退出登录 */
|
||||
export function baseLogout(url:string,data: any = {}) {
|
||||
return request({
|
||||
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
||||
url:replaceAcasService(url),
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**登录后修改密码 */
|
||||
export function baseLoginUpdatePwd(url:string,data: any = {}) {
|
||||
return request({
|
||||
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
||||
url:replaceAcasService(url),
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**获取key */
|
||||
export function getEmployee(params: any = {}) {
|
||||
return request({
|
||||
url:replaceAcasService('/acas/employee/getEmployee'),
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**获取员工管理业务域*/
|
||||
export function getBusinessDomain(params: any = {}) {
|
||||
return request({
|
||||
url: replaceAcasService('/acas/user/loginUserdomain'),
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
/**获取有权限的子系统*/
|
||||
export function getAllowAccessSubsystem(params: any = {}) {
|
||||
return request({
|
||||
url: replaceAcasService('/acas/user/allowAccessSubsystem'),
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
/**获取员工信息 */
|
||||
export function getUsermessage(params: any = {}) {
|
||||
if (import.meta.env.MODE === 'development'){
|
||||
return new Promise((resolve) => {
|
||||
resolve({"user":{"tenantId":"0000","tenantName":"奥博克","userId":"0","userName":"系统管理员","deptId":"01","deptName":"开发部","avatarUrl":""}});
|
||||
});
|
||||
}else{
|
||||
return request({
|
||||
url:'/acas/user/message',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* 登录用户信息
|
||||
*/
|
||||
export interface UserInfo {
|
||||
dept: any;
|
||||
employee: any;
|
||||
roles: any;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
import request from '@/framework/utils/request';
|
||||
|
||||
/**获取异步事件列表 */
|
||||
export function queryAsyncEvents(params: any = {}) {
|
||||
return request({
|
||||
url:'/sms/asyncEvent/list',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<el-breadcrumb class="h-[50px] flex items-center">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
|
||||
<span
|
||||
v-if="
|
||||
item.redirect === 'noredirect' || index === breadcrumbs.length - 1
|
||||
"
|
||||
class="text-[var(--el-disabled-text-color)]"
|
||||
>{{ item.meta.title }}</span
|
||||
>
|
||||
<a v-else @click.prevent="handleLink(item)">
|
||||
{{ item.meta.title }}
|
||||
</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeMount, ref, watch } from "vue";
|
||||
import { useRoute, RouteLocationMatched } from "vue-router";
|
||||
import { compile } from "path-to-regexp";
|
||||
import router from "@/framework/router";
|
||||
// import { translateRouteTitleI18n } from "@/framework/utils/i18n";
|
||||
|
||||
const currentRoute = useRoute();
|
||||
const pathCompile = (path: string) => {
|
||||
const { params } = currentRoute;
|
||||
const toPath = compile(path);
|
||||
return toPath(params);
|
||||
};
|
||||
|
||||
const breadcrumbs = ref([] as Array<RouteLocationMatched>);
|
||||
|
||||
function getBreadcrumb() {
|
||||
console.log(currentRoute.matched,8888);
|
||||
|
||||
let matched = currentRoute.matched.filter(
|
||||
(item) => item.meta && item.meta.title
|
||||
);
|
||||
// const first = matched[0];
|
||||
// if (!isDashboard(first)) {
|
||||
// matched = [
|
||||
// { path: "/home", meta: { title: "首页" } } as any,
|
||||
// ].concat(matched);
|
||||
// }
|
||||
breadcrumbs.value = matched.filter((item) => {
|
||||
return item.meta && item.meta.title && item.meta.breadcrumb !== false;
|
||||
});
|
||||
}
|
||||
|
||||
function isDashboard(route: RouteLocationMatched) {
|
||||
const name = route && route.name;
|
||||
if (!name) {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
name.toString().trim().toLocaleLowerCase() ===
|
||||
"首页"
|
||||
);
|
||||
}
|
||||
|
||||
function handleLink(item: any) {
|
||||
const { redirect, path } = item;
|
||||
if (redirect) {
|
||||
router.push(redirect).catch((err) => {
|
||||
console.warn(err);
|
||||
});
|
||||
return;
|
||||
}
|
||||
router.push(pathCompile(path)).catch((err) => {
|
||||
console.warn(err);
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => currentRoute.path,
|
||||
(path) => {
|
||||
if (path.startsWith("/redirect/")) {
|
||||
return;
|
||||
}
|
||||
getBreadcrumb();
|
||||
}
|
||||
);
|
||||
|
||||
onBeforeMount(() => {
|
||||
getBreadcrumb();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
// 覆盖 element-plus 的样式
|
||||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__inner a {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="not-container">
|
||||
<img src="@/assets/img/403.png" class="not-img" alt="403" />
|
||||
<div class="not-detail">
|
||||
<h2>403</h2>
|
||||
<h4>抱歉，您无权访问该页面~🙅♂️🙅♀️</h4>
|
||||
<el-button type="primary" @click="router.push('/')"> 返回首页 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="403">
|
||||
// import { HOME_URL } from "@/config";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div class="not-container">
|
||||
<img src="@/assets/img/404.png" class="not-img" alt="404" />
|
||||
<div class="not-detail">
|
||||
<h2>404</h2>
|
||||
<h4>抱歉，您访问的页面不存在~</h4>
|
||||
<h4>有可能是您没有访问权限~</h4>
|
||||
<el-button type="primary" @click="router.push('/')"> 返回首页 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="404">
|
||||
// import { HOME_URL } from "@/config";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="not-container">
|
||||
<img src="@/assets/img/500.png" class="not-img" alt="500" />
|
||||
<div class="not-detail">
|
||||
<h2>500</h2>
|
||||
<h4>抱歉，您的网络不见了~🤦♂️🤦♀️</h4>
|
||||
<el-button type="primary" @click="router.push('/')"> 返回首页 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="500">
|
||||
// import { HOME_URL } from "@/config";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
.not-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.not-img {
|
||||
margin-right: 120px;
|
||||
}
|
||||
.not-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h2,
|
||||
h4 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 60px;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
h4 {
|
||||
margin: 30px 0 20px;
|
||||
font-size: 19px;
|
||||
font-weight: normal;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
.el-button {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<!-- <div class="hambuger-wrapper" :class="{active: isActive}" @click="toggleClick">
|
||||
<el-icon size="20">
|
||||
<Expand />
|
||||
</el-icon>
|
||||
</div> -->
|
||||
<div class="hambuger-wrapper" @click="toggleClick">
|
||||
<img :src="foldPng" style="width: 28px;height: 28px;" :style="{transform: isActive ? '' :'rotate(180deg)'}"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import foldPng from '@/assets/img/icon/fold.png'
|
||||
defineProps({
|
||||
isActive: {
|
||||
required: true,
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["toggleClick"]);
|
||||
|
||||
function toggleClick() {
|
||||
emit("toggleClick");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hambuger-wrapper{
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
background: rgba(0,0,0,.025);
|
||||
}
|
||||
}
|
||||
.active{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<img class="menu-img" :src="imgSrc"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import { getAssetsImages } from '@/framework/utils/index'
|
||||
const props = defineProps({
|
||||
path: {
|
||||
type: String,
|
||||
default: "/menu",
|
||||
},
|
||||
imgName: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: "",
|
||||
}
|
||||
});
|
||||
|
||||
const imgSrc = computed(() => getAssetsImages(props.imgName, props.path));
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.menu-img{
|
||||
margin-left: 3px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" title="批量添加" :destroy-on-close="true" width="580px" draggable top="1vh">
|
||||
<el-form label-width="120px">
|
||||
<el-form-item label="模板下载：">
|
||||
<el-button type="primary" @click="downloadFile">
|
||||
<el-icon color="#fff">
|
||||
<Download />
|
||||
</el-icon> 模板下载
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件上传：">
|
||||
<el-upload class="upload" drag :action="uploadUrl" :on-success="excelUploadSuccess" :on-error="excelUploadError" :before-upload="beforeExcelUpload">
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处，或<em>点击上传</em>
|
||||
</div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
请按模板上传文件
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import type {UploadRawFile } from 'element-plus'
|
||||
|
||||
let props = defineProps({
|
||||
templateName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
uploadUrl: String
|
||||
})
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
// 下载模板
|
||||
const downloadFile = () => {
|
||||
if (props.templateName === '') {
|
||||
return ElMessage({ type: 'error', message: '未配置模板下载路径' })
|
||||
}
|
||||
|
||||
let dom = document.createElement("a");
|
||||
dom.style.display = 'none'
|
||||
dom.target = '_blank'
|
||||
dom.href = `./templete/${props.templateName}`
|
||||
document.body.appendChild(dom);
|
||||
dom.click();
|
||||
document.body.removeChild(dom);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 文件上传之前判断
|
||||
* @param file 上传的文件
|
||||
* */
|
||||
const beforeExcelUpload = (file: UploadRawFile) => {
|
||||
const suffix = file.name.split('.').pop()
|
||||
const isExcel = ['xls', 'xlsx'].includes(suffix);
|
||||
if (!isExcel)
|
||||
ElMessage({type: 'warning',message: '上传文件只能是 xls / xlsx 格式' })
|
||||
|
||||
// const fileSize = file.size
|
||||
// if (!fileSize)
|
||||
// setTimeout(() => {
|
||||
// ElNotification({
|
||||
// title: "温馨提示",
|
||||
// message: `上传文件大小不能超过 ${parameter.value.fileSize}MB！`,
|
||||
// type: "warning"
|
||||
// });
|
||||
// }, 0);
|
||||
return isExcel;
|
||||
};
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
const excelUploadSuccess = (response: any) => {
|
||||
emit('success', response)
|
||||
}
|
||||
|
||||
// 上传错误提示
|
||||
const excelUploadError = () => {
|
||||
ElMessage({
|
||||
title: "温馨提示",
|
||||
message: `批量添加失败，请您重新上传！`,
|
||||
type: "error"
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
dialogVisible
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.upload {
|
||||
width: 80%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="" :class="'pagination ' + { hidden: hidden }">
|
||||
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:background="background"
|
||||
:layout="layout"
|
||||
:page-sizes="pageSizes"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import { computed, PropType } from "vue";
|
||||
import { scrollTo } from "@/framework/utils/scroll-to";
|
||||
|
||||
const props = defineProps({
|
||||
total: {
|
||||
required: true,
|
||||
type: Number as PropType<number>,
|
||||
default: 0,
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
pageSizes: {
|
||||
type: Array as PropType<number[]>,
|
||||
default() {
|
||||
return [10, 20, 30, 50];
|
||||
},
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: "total, sizes, prev, pager, next, jumper",
|
||||
},
|
||||
background: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
autoScroll: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
hidden: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["pagination", "update:page", "update:limit"]);
|
||||
|
||||
const currentPage = useVModel(props, "page", emit);
|
||||
|
||||
const pageSize = useVModel(props, "limit", emit);
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
emit("pagination", { page: currentPage, limit: val });
|
||||
if (props.autoScroll) {
|
||||
scrollTo(0, 800);
|
||||
}
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
currentPage.value = val;
|
||||
emit("pagination", { page: val, limit: props.limit });
|
||||
if (props.autoScroll) {
|
||||
scrollTo(0, 800);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pagination {
|
||||
padding: 20px 12px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<el-select v-model="value" :placeholder="placeholder" style="width: 100%;" clearable :filterable="filterable">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" style="max-width:480px;"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, computed, onMounted} from 'vue'
|
||||
/**
|
||||
* SearchSelect
|
||||
* @author nielang
|
||||
* @description 用于实时检索的下拉框
|
||||
* @property {String} placeholder input的placeholder
|
||||
* @property {Function} request 接口请求函数
|
||||
* @property {String} requestParam 接口请求参数名称
|
||||
* @property {Boolean} showOptionValue 选项中是否显示value属性
|
||||
* @property {String} optionValue 接口用于显示的属性（该属性将返回父组件用于检索）
|
||||
* @property {String} optionLabel 接口用于显示的属性
|
||||
* @property {Boolean} filterable 是否可搜索
|
||||
*/
|
||||
const props = defineProps({
|
||||
modelValue:{
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
request:{
|
||||
type: Function,
|
||||
require: true
|
||||
},
|
||||
requestParam: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
|
||||
showOptionValue: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
optionValue: {
|
||||
type: [String, Number],
|
||||
default: "id",
|
||||
},
|
||||
optionLabel: {
|
||||
type: [String, Number],
|
||||
default: "name",
|
||||
},
|
||||
filterable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const value = computed({
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set(value) {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
})
|
||||
|
||||
interface ListItem {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
const options = ref<ListItem[]>([])
|
||||
const initOptions = () => {
|
||||
if (props.request) {
|
||||
props.request(props.requestParam).then((data:any) => {
|
||||
options.value = data.map((item: any) => {
|
||||
return {
|
||||
value: item[props.optionValue],
|
||||
label: (props.showOptionValue ? `【${item[props.optionValue]}】` : '') + item[props.optionLabel]
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initOptions();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<el-select v-model="value" remote :placeholder="placeholder" style="width: 100%;" filterable
|
||||
:remote-method="remoteMethod" :loading="loading" clearable >
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" style="max-width:480px"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, computed} from 'vue'
|
||||
/**
|
||||
* SearchSelect
|
||||
* @author nielang
|
||||
* @description 用于实时检索的下拉框
|
||||
* @property {String} placeholder input的placeholder
|
||||
* @property {Function} request 接口请求函数
|
||||
* @property {String} requestParam 接口请求参数名称
|
||||
* @property {Boolean} showOptionValue 选项中是否显示value属性
|
||||
* @property {String} optionValue 接口用于显示的属性（该属性将返回父组件用于检索）
|
||||
* @property {String} optionLabel 接口用于显示的属性
|
||||
*/
|
||||
const props = defineProps({
|
||||
modelValue:{
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "请输入商品编码/名称",
|
||||
},
|
||||
request:{
|
||||
type: Function,
|
||||
require: true
|
||||
},
|
||||
requestParam: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
showOptionValue: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
optionValue: {
|
||||
type: [String, Number],
|
||||
default: "id",
|
||||
},
|
||||
optionLabel: {
|
||||
type: [String, Number],
|
||||
default: "name",
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const value = computed({
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set(value) {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
})
|
||||
|
||||
const loading = ref(false);
|
||||
interface ListItem {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
|
||||
const options = ref<ListItem[]>([])
|
||||
const remoteMethod = (query: string) => {
|
||||
if (query) {
|
||||
loading.value = true
|
||||
if (props.request) {
|
||||
const params:any = {}
|
||||
params[props.requestParam] = query
|
||||
props.request(params).then((data:any) => {
|
||||
loading.value = false
|
||||
options.value = data.map((item: any) => {
|
||||
return {
|
||||
value: item[props.optionValue],
|
||||
label: (props.showOptionValue ? `【${item[props.optionValue]}】` : '') + item[props.optionLabel]
|
||||
}
|
||||
})
|
||||
}).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
options.value = []
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!--主题-->
|
||||
<template>
|
||||
<div class="form-container ab-m-t-16 title">
|
||||
<el-page-header :icon="null" >
|
||||
<template #title>
|
||||
<div style="display:flex;align-items: center;">
|
||||
<slot name="titleBack"></slot>
|
||||
<span style="font-size: 25px;font-weight: 500;"><slot name="titleName"></slot></span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<span style="font-size: 15px;"><slot name="titleContent"></slot></span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<slot name="titleOperate"></slot>
|
||||
</template>
|
||||
</el-page-header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title{
|
||||
padding: 10px 0px 10px 10px;;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!-- 内容分隔组件 -->
|
||||
<template>
|
||||
<div class="title-container" >
|
||||
<div class="header" :style="{ backgroundColor: bgColor, fontSize, color, borderBottom: arrow?'1px solid #CDD0D6':'' }" @click="handleShow" >
|
||||
<div class="left">
|
||||
<span class="line" :style="{display: showLine? 'inline' : 'none', borderColor: lineColor}"></span> <span class="name">{{ title }}</span>
|
||||
</div>
|
||||
<div class="right" :style="{display: arrow? 'inline' : 'none'}">
|
||||
<el-icon :style="{transform: show ? 'rotate(90deg)' : '', transition: 'transform 0.2s linear'}"><ArrowRightBold /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" v-show="show" :style="{height: show ? 'auto' : '0px'}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
const props = defineProps({
|
||||
title: { type: String, required: true, }, //标签名称
|
||||
bgColor: { type: String, default: '#fff' },//背景颜色
|
||||
color: { type: String, default: '#222' },//文字颜色
|
||||
fontSize: { type: String, default: '20px' },//字体大小
|
||||
showLine: { type: Boolean, default: true },//是否显示图标
|
||||
lineColor: { type: String, default: '' },//图标颜色
|
||||
arrow: { type: Boolean, default: false },//展开、收起功能
|
||||
})
|
||||
|
||||
const show = ref(true)
|
||||
const handleShow = () => {
|
||||
if (!props.arrow) {
|
||||
return
|
||||
}
|
||||
show.value = !show.value
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
// border-bottom: 1px solid #CDD0D6;
|
||||
|
||||
.left{
|
||||
.line {
|
||||
width: 2px;
|
||||
border: 2px solid var(--el-color-primary);
|
||||
border-radius: 6px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.right{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.content{
|
||||
height: 0px;
|
||||
transition: height 2s ease;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
<!-- 点击复制 -->
|
||||
<template >
|
||||
<el-tooltip v-if="content" content="复制" placement="top" effect="dark">
|
||||
<el-icon class="ab-cursor-pointer" @click="useCopy(content)"><CopyDocument /></el-icon>
|
||||
</el-tooltip>
|
||||
{{ content }}
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCopy } from '@/framework/hooks/useCopy'
|
||||
|
||||
const props = defineProps({
|
||||
content: { type: String, required: true,}, //内容
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!--文档预览组件-->
|
||||
<template>
|
||||
<el-dialog title="预览" :model-value="dialogVisible" :before-close="handleClose" :modal="false" :show-close="true" :close-on-click-modal="false" append-to-body>
|
||||
<template #title>
|
||||
<span class="dialog-title">
|
||||
<el-button type="primary" @click="downloadFile()">下载文件</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<div v-if="['doc', 'docx'].includes(fileType)">
|
||||
<vue-office-docx :src="fileUrl" style="height: 70vh;overflow: auto" @rendered="rendered" @error="errorHandler" />
|
||||
</div>
|
||||
<div v-else-if="fileType == 'xlsx'">
|
||||
<vue-office-excel :src="fileUrl" style="height: 70vh;overflow: auto" @rendered="rendered" @error="errorHandler" />
|
||||
</div>
|
||||
<div v-else-if="fileType == 'pdf'">
|
||||
<vue-office-pdf :src="fileUrl" style="height: 70vh;overflow: auto" @rendered="rendered" @error="errorHandler" :options="{width: '100%',overflow: 'auto'}" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="['png', 'jpg', 'jpeg','gif'].includes(fileType)">
|
||||
<el-image :src="fileUrl" style="height: 70vh;overflow: auto" @rendered="rendered" @error="errorHandler" :options="{width: '100%',overflow: 'auto'}" />
|
||||
</div>
|
||||
|
||||
<div v-else="">
|
||||
<el-input v-model="textarea1" style="height: 70vh;overflow: auto" autosize type="textarea" :options="{width: '100%',overflow: 'auto'}" />
|
||||
</div>
|
||||
|
||||
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
// 引入VueOffice组件
|
||||
import VueOfficeDocx from '@vue-office/docx'
|
||||
import VueOfficeExcel from '@vue-office/excel'
|
||||
import VueOfficePdf from '@vue-office/pdf'
|
||||
import XEUtils from 'xe-utils'
|
||||
|
||||
// 引入相关样式
|
||||
import '@vue-office/docx/lib/index.css'
|
||||
import '@vue-office/excel/lib/index.css'
|
||||
|
||||
const textarea1=ref('')
|
||||
const emit = defineEmits(["closePreviewDialog"]);
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
fileName: { type: String, default: '' },// 文件url
|
||||
fileType: { type: String, default: '' },// 文件url
|
||||
fileUrl: { type: String, default: '' },// 文件url
|
||||
dialogVisible: { type: Boolean, default: false },// 控制显示
|
||||
})
|
||||
|
||||
const downloadFile = () => {
|
||||
if(XEUtils.startsWith(props.fileUrl, './')||XEUtils.startsWith(props.fileUrl, '/')){
|
||||
window.location.href=props.fileUrl
|
||||
}else{
|
||||
window.location.href=props.fileUrl
|
||||
}
|
||||
}
|
||||
|
||||
const rendered = () => {
|
||||
console.log('渲染完成')
|
||||
}
|
||||
const errorHandler = (e:any) => {
|
||||
console.error('渲染失败',e)
|
||||
ElMessage({message: '文档渲染失败',type: 'error',})
|
||||
}
|
||||
const handleClose = (done) => {
|
||||
emit('closePreviewDialog', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,103 @@
|
||||
<!-- 动态表单组件 -->
|
||||
<!-- 新功能禁止使用该组件 -->
|
||||
<template>
|
||||
<div class="form-container">
|
||||
<el-form ref="formRef" label-width="82px" :model="props.formModel" :rules="dFormRules">
|
||||
<el-row :gutter="props.gutter">
|
||||
<template v-for="(value, key, index) in props.formModel">
|
||||
<el-col class="ab-p-b-5" v-if="'section'===fieldConfigMap.get(key)?.type" :span="24" v-show="isShow(fieldConfigMap.get(key))">
|
||||
<AbSection :title="fieldConfigMap.get(key).name"></AbSection>
|
||||
</el-col>
|
||||
<el-col v-else :span="fieldConfigMap.get(key)?.span ? fieldConfigMap.get(key).span : props.span" v-show="isShow(fieldConfigMap.get(key))">
|
||||
<template v-if="fieldConfigMap.get(key)?.slot">
|
||||
<el-form-item :label-width="fieldConfigMap.get(key)?.labelWidth" :label="fieldConfigMap.get(key)?.name" :prop="fieldConfigMap.get(key)?.key" :required="fieldConfigMap.get(key)?.required">
|
||||
<slot :name="fieldConfigMap.get(key)?.slot"></slot>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<AbFormItem :formModel="props.formModel" :fieldSet="fieldConfigMap.get(key)"></AbFormItem>
|
||||
</template>
|
||||
</el-col>
|
||||
</template>
|
||||
<template #title>
|
||||
</template>
|
||||
<el-col :span="24" class="ab-text-right ab-m-b-18">
|
||||
<slot v-if="$slots['button']" name="button"></slot>
|
||||
<template v-else>
|
||||
<el-button type="primary" @click="executeSave(formRef)">保存</el-button>
|
||||
<el-button type="default" @click="formReset()">重置</el-button>
|
||||
</template>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import AbFormItem from "@/framework/components/standard/FormDynamic/abFormItem.vue";
|
||||
import AbSection from "@/framework/components/standard/AbSection/index.vue";
|
||||
const formRef = ref<FormInstance>() //表单引用
|
||||
const dFormRules = reactive<FormRules>({}) //验证规则
|
||||
const fieldConfigMap = ref(new Map()) //表单明细配置，Map<表单函数key,表单函数key对应配置>
|
||||
//组件传参
|
||||
let props = defineProps({
|
||||
formModel: { type: Object },//表单绑定数据
|
||||
fieldConfigs: { type: Array },//表单明细配置
|
||||
gutter: { type: Number, default: 0 },//栅格间隔
|
||||
span: { type: Number, default: 6 },//栅格占据的列数
|
||||
saveEvent: { type: Function },//保存事件
|
||||
resetEvent: { type: Function },//重置事件
|
||||
})
|
||||
|
||||
// 外部使用响应式函数，不需要监听
|
||||
// watch(() => props.fieldConfigs,(newValue, oldValue) => {
|
||||
// console.log(newValue);
|
||||
// },{ deep: true }
|
||||
// )
|
||||
|
||||
/**是否显示 */
|
||||
const isShow = (fieldConfig) => {
|
||||
if(fieldConfig&&undefined!==fieldConfig.show&&!fieldConfig.show)
|
||||
return false
|
||||
return true
|
||||
}
|
||||
/**数据处理 */
|
||||
const dataHandle = (fieldConfigs) => {
|
||||
for (let fc of fieldConfigs) {
|
||||
//转换map，方便获取数据
|
||||
fieldConfigMap.value.set(fc.key, fc)
|
||||
//设置表单验证规则
|
||||
if (undefined !== fc.rules) {
|
||||
dFormRules[fc.key] = fc.rules
|
||||
}
|
||||
//绑定表单默认数据
|
||||
if(!props.formModel[fc.key])
|
||||
props.formModel[fc.key] = (undefined !== fc.value ? fc.value : '')
|
||||
}
|
||||
}
|
||||
|
||||
dataHandle(props.fieldConfigs)
|
||||
|
||||
/**执行查询 */
|
||||
const executeSave = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl || !await formEl.validate((valid, fields) => { return valid })) {
|
||||
return
|
||||
}
|
||||
|
||||
if (props.saveEvent) props.saveEvent()
|
||||
}
|
||||
|
||||
/**重置查询条件 */
|
||||
const formReset = () => {
|
||||
if (props.resetEvent) {
|
||||
props.resetEvent()
|
||||
return
|
||||
}
|
||||
for (let fc of props.fieldConfigs) {
|
||||
props.formModel[fc.key] = (undefined !== fc.value ? fc.value : '')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
<!-- 动态表单明细组件 -->
|
||||
<!-- 新功能禁止使用该组件 -->
|
||||
<template>
|
||||
<el-form-item :label-width="props.fieldSet?.labelWidth" :label="props.fieldSet?.name" :prop="props.fieldSet?.key" :required="props.fieldSet?.required">
|
||||
<!-- 文本 -->
|
||||
<el-text v-if="props.fieldSet?.type==='text'" style="width: 100%;" v-model="formModel[props.fieldSet?.key]" >
|
||||
<Text :data="formModel[props.fieldSet?.key]"></Text>
|
||||
</el-text>
|
||||
<!-- 文本框 -->
|
||||
<el-input v-else-if="props.fieldSet?.type==='input'" v-model="formModel[props.fieldSet?.key]"
|
||||
:placeholder="props.fieldSet?.placeholder?props.fieldSet?.placeholder:'请输入'+props.fieldSet?.name"
|
||||
:disabled="props.fieldSet?.disabled" />
|
||||
<!-- 下拉框 -->
|
||||
<el-select v-else-if="props.fieldSet?.type==='select'" v-model="formModel[props.fieldSet?.key]"
|
||||
:placeholder="props.fieldSet?.placeholder?props.fieldSet?.placeholder:'请选择'+props.fieldSet?.name"
|
||||
:disabled="props.fieldSet?.disabled" clearable filterable style="width: 100%;">
|
||||
<el-option v-for="item in props.fieldSet?.listData" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" />
|
||||
</el-select>
|
||||
<!-- 单选 -->
|
||||
<el-radio-group v-else-if="props.fieldSet?.type==='radio'" v-model="formModel[props.fieldSet?.key]" :disabled="props.fieldSet?.disabled">
|
||||
<el-radio v-for="item in props.fieldSet?.listData" :label="item.value" :disabled="item.disabled">{{item.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<!-- 多选 -->
|
||||
<el-checkbox-group v-else-if="props.fieldSet?.type==='checkbox'" v-model="formModel[props.fieldSet?.key]" :disabled="props.fieldSet?.disabled">
|
||||
<el-checkbox v-for="item in props.fieldSet?.listData" :label="item.value" :disabled="item.disabled">{{item.label}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<!-- 时间选择器 -->
|
||||
<el-date-picker style="width: 100%;" v-else-if="dataPickerType.find((o: any) => o.type === props.fieldSet?.type) " v-model="formModel[props.fieldSet?.key]" :disabled="props.fieldSet?.disabled"
|
||||
:type="props.fieldSet?.type" unlink-panels range-separator="-"
|
||||
:start-placeholder="props.fieldSet?.placeholder?'开始'+props.fieldSet?.placeholder:'开始'+props.fieldSet?.name"
|
||||
:end-placeholder="props.fieldSet?.placeholder?'结束'+props.fieldSet?.placeholder:'结束'+props.fieldSet?.name"
|
||||
:value-format="dataPickerType.find((o: any) => o.type === props.fieldSet?.type).valueFormat" />
|
||||
<!-- 不指定类型、无类型不输出 -->
|
||||
<template v-else></template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Text from "@/framework/components/standard/Text/index.vue";
|
||||
/**时间选择器配置 */
|
||||
let dataPickerType=[
|
||||
{type:'year',valueFormat:'YYYY'},
|
||||
{type:'month',valueFormat:'YYYY-MM'},
|
||||
{type:'date' ,valueFormat:'YYYY-MM-DD'},
|
||||
{type:'dates' ,valueFormat:'YYYY-MM-DD'},
|
||||
{type:'datetime' ,valueFormat:'YYYY-MM-DD HH:mm:ss'},
|
||||
{type:'week' },
|
||||
{type:'datetimerange' ,valueFormat:'YYYY-MM-DD HH:mm:ss'},
|
||||
{type:'daterange' ,valueFormat:'YYYY-MM-DD'},
|
||||
{type:'monthrange',valueFormat:'YYYY-MM'},
|
||||
]
|
||||
let props = defineProps({
|
||||
formModel: {type:Object},//表单函数
|
||||
editable:{type:Boolean,default:true},//可编辑
|
||||
//当前字段设置
|
||||
fieldSet: {
|
||||
type:Object,
|
||||
default:{
|
||||
key:String,//字段Key
|
||||
name:String, //显示名称
|
||||
placeholder:String, //默认提示
|
||||
required:Boolean,//是否必填
|
||||
labelWidth:{type:String,default:'82px'},//标签宽度
|
||||
show: { type: Boolean, default: true },//是否显示
|
||||
disabled:Boolean,//是否禁用
|
||||
type:String,//输入类型，当前支持input、select、radio、checkbox
|
||||
//列表数据，当type为select、radio、checkbox时使用
|
||||
listData:{
|
||||
type:Array,
|
||||
default:[
|
||||
{
|
||||
value:String,//值
|
||||
text:String,//文本显示、
|
||||
disabled:Boolean,//是否禁用
|
||||
}
|
||||
]},
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
<!-- 动态查询表单组件 -->
|
||||
<!-- 新功能禁止使用该组件 -->
|
||||
<template>
|
||||
<div class="form-container">
|
||||
<div class="more-filter" @click="criteriaShow = !criteriaShow" v-if="criteriaShowNumber < fieldConfigMap.size">
|
||||
{{ criteriaShow ? '收起' : '展开' }}更多筛选
|
||||
<el-icon v-if="criteriaShow"><ArrowDown /></el-icon>
|
||||
<el-icon v-else><ArrowUp /></el-icon>
|
||||
</div>
|
||||
|
||||
<el-form ref="formRef" label-width="82px" :model="props.formModel" :rules="dFormRules">
|
||||
<el-row :gutter="props.gutter">
|
||||
<template v-for="(value, key, index) in props.formModel">
|
||||
<el-col :span="fieldConfigMap.get(key).span ? fieldConfigMap.get(key).span : props.span" v-show="isShow(fieldConfigMap.get(key))&&(!(props.criteriaShowNumber-1<index)?true:criteriaShow)">
|
||||
<!-- 自定义插槽-->
|
||||
<template v-if="fieldConfigMap.get(key).slot">
|
||||
<el-form-item :label-width="fieldConfigMap.get(key)?.labelWidth" :label="fieldConfigMap.get(key)?.name" :prop="fieldConfigMap.get(key)?.key" :required="fieldConfigMap.get(key)?.required">
|
||||
<slot :name="fieldConfigMap.get(key).slot"></slot>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<!-- 固定类型-->
|
||||
<template v-else>
|
||||
<AbFormItem :formModel="props.formModel" :fieldSet="fieldConfigMap.get(key)"></AbFormItem>
|
||||
</template>
|
||||
</el-col>
|
||||
</template>
|
||||
<el-col :span="3" class="ab-text-right ab-m-b-18" :offset="criteriaShow ? props.queryCriteriaOffset[1] : props.queryCriteriaOffset[0]">
|
||||
<el-button type="primary" v-throttle:click.delay[1000]="()=>executeQuery(formRef)" >查询</el-button>
|
||||
<el-button type="default" @click="formReset()">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import AbFormItem from "@/framework/components/standard/FormDynamic/abFormItem.vue";
|
||||
const criteriaShow = ref(false) //查询条件隐藏功能
|
||||
const formRef = ref<FormInstance>() //表单引用
|
||||
const dFormRules = reactive<FormRules>({}) //验证规则
|
||||
const fieldConfigMap = ref(new Map()) //表单明细配置，Map<表单函数key,表单函数key对应配置>
|
||||
//组件传参
|
||||
let props = defineProps({
|
||||
formModel: { type: Object },//表单绑定数据
|
||||
fieldConfigs: { type: Array },//表单明细配置
|
||||
gutter: { type: Number, default: 0 },//栅格间隔
|
||||
span: { type: Number, default: 6 },//栅格占据的列数
|
||||
queryEvent: { type: Function },//查询事件
|
||||
resetEvent: { type: Function },//重置事件
|
||||
queryCriteriaOffset: { type: Array, default: [0,6] },//查询条件偏移量,[收起偏移量,展开偏移量]
|
||||
criteriaShowNumber: { type: Number, default: 6 },//查询条件默认显示数量
|
||||
})
|
||||
|
||||
// 外部使用响应式函数，不需要监听
|
||||
// watch(() => props.fieldConfigs,(newValue, oldValue) => {
|
||||
// console.log(newValue);
|
||||
// },{ deep: true }
|
||||
// )
|
||||
|
||||
/**是否显示 */
|
||||
const isShow = (fieldConfig) => {
|
||||
if(undefined!==fieldConfig.show&&!fieldConfig.show)
|
||||
return false
|
||||
return true
|
||||
}
|
||||
/**数据处理 */
|
||||
const dataHandle = (fieldConfigs) => {
|
||||
for (let fc of fieldConfigs) {
|
||||
//转换map，方便获取数据
|
||||
fieldConfigMap.value.set(fc.key, fc)
|
||||
//设置表单验证规则
|
||||
if (undefined !== fc.rules) {
|
||||
dFormRules[fc.key] = fc.rules
|
||||
}
|
||||
//绑定表单默认数据
|
||||
if(!props.formModel[fc.key])
|
||||
props.formModel[fc.key] = (undefined !== fc.value ? fc.value : '')
|
||||
}
|
||||
}
|
||||
|
||||
dataHandle(props.fieldConfigs)
|
||||
|
||||
/**执行查询 */
|
||||
const executeQuery = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl || !await formEl.validate((valid, fields) => { return valid })) {
|
||||
return
|
||||
}
|
||||
if (props.queryEvent) props.queryEvent()
|
||||
}
|
||||
|
||||
/**重置查询条件 */
|
||||
const formReset = () => {
|
||||
if (props.resetEvent) {
|
||||
props.resetEvent()
|
||||
return
|
||||
}
|
||||
for (let fc of props.fieldConfigs) {
|
||||
props.formModel[fc.key] = (undefined !== fc.value ? fc.value : '')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
<!-- Excel上传组件 -->
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" title="文件上传" :destroy-on-close="true" width="580px" draggable top="1vh">
|
||||
<el-row justify="end">
|
||||
<el-col :span="24" style="text-align: center;">
|
||||
<el-text size="large">注意事项：上传文件必须符合模板格式要求，点此<el-link type="primary" @click="downloadFile"><el-text type="primary" size="large">下载模板</el-text></el-link >！ </el-text>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-upload ref="fileUpload" :headers="ht" :data="props.data" drag :auto-upload="false" :show-file-list="true" :action="props.uploadUrl" :on-success="excelUploadSuccess" :on-error="excelUploadError" :before-upload="beforeExcelUpload">
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处，或<em>点击上传</em>
|
||||
</div>
|
||||
</el-upload>
|
||||
|
||||
<el-row v-show="''!==uploadResult" style="margin-top:10px" justify="end">
|
||||
<el-col :span="24" style="text-align: right;">
|
||||
<el-alert type="success" :closable="false">
|
||||
<template #default>
|
||||
<el-text >
|
||||
上传结果:本次一共导入数据[<el-text type="primary">{{ uploadResult.totalNum }}</el-text>]条,
|
||||
成功[<el-text type="success" >{{ uploadResult.successNum }}</el-text>]条,
|
||||
<el-text v-if="uploadResult.updateNum>0" >修改[<el-text type="success" >{{ uploadResult.updateNum }}</el-text>]条,</el-text>
|
||||
失败[<el-text type="warning" >{{ uploadResult.failureNum }}</el-text>]条,
|
||||
<el-link type="primary" v-if="uploadResult.filePath!==''" :href="uploadResult.filePath" target="_blank">下载错误信息</el-link>
|
||||
</el-text>
|
||||
</template>
|
||||
</el-alert>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top:10px" justify="end">
|
||||
<el-col :span="12" style="text-align: right;">
|
||||
<el-button type="primary" @click="submitFile">上传</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type {UploadRawFile } from 'element-plus'
|
||||
import { getAllHeader } from "@/framework/store/modules/user";
|
||||
|
||||
|
||||
const fileUpload=ref()
|
||||
|
||||
const ht=getAllHeader()
|
||||
|
||||
let props = defineProps({
|
||||
//上传时附带的额外参数
|
||||
data: {},
|
||||
//模板名称（模板需要放在public/templete）
|
||||
templateName: { type: String, default: '', },
|
||||
//文件上传地址
|
||||
uploadUrl: String,
|
||||
//是否自定义结果处理
|
||||
customResultHandle:{ type: Boolean, default: false },
|
||||
//上传文件最大值，单位(MB)
|
||||
uploadMaxSize: { type: Number, default: 0 },
|
||||
})
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
// 下载模板
|
||||
const downloadFile = () => {
|
||||
if (props.templateName === '') {
|
||||
return ElMessage({ type: 'error', message: '未配置模板下载路径' })
|
||||
}
|
||||
let dom = document.createElement("a");
|
||||
dom.style.display = 'none'
|
||||
dom.target = '_blank'
|
||||
dom.href = `./templete/${props.templateName}`
|
||||
document.body.appendChild(dom);
|
||||
dom.click();
|
||||
document.body.removeChild(dom);
|
||||
}
|
||||
|
||||
const submitFile = () => {
|
||||
fileUpload.value.submit()
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 文件上传之前判断
|
||||
* @param file 上传的文件
|
||||
* */
|
||||
const beforeExcelUpload = (file: UploadRawFile) => {
|
||||
uploadResult.value=''
|
||||
if(!['xls', 'xlsx'].includes(file.name.split('.').pop())){
|
||||
ElMessage.warning('上传文件只能是 xls / xlsx 格式' )
|
||||
return false;
|
||||
}
|
||||
if(props.uploadMaxSize>0&&file.size>(props.uploadMaxSize*1024*1024)){
|
||||
ElMessage.warning('上传文件大小不能超过'+props.uploadMaxSize+'MB！')
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
const uploadResult = ref('')
|
||||
|
||||
const emit = defineEmits(['updateCheck','resultHandleEvent'])
|
||||
const excelUploadSuccess = (response: any) => {
|
||||
const { message,status,data } = response;
|
||||
if(200===response.status){
|
||||
if(props.customResultHandle){
|
||||
dialogVisible.value=false
|
||||
emit('resultHandleEvent', data)
|
||||
}else{
|
||||
if(data.handleSuccess){
|
||||
uploadResult.value=data
|
||||
}else{
|
||||
ElMessage.error("Excel文件处理失败:"+data.message);
|
||||
}
|
||||
|
||||
}
|
||||
}else{
|
||||
if (status === 401) {
|
||||
ElMessage.error('未通过身份验证');
|
||||
}
|
||||
const temp = String(status)[0]
|
||||
if (temp === '9') {
|
||||
ElMessage.error(message || '系统出错');
|
||||
console.error('系统异常', response.data);
|
||||
return
|
||||
}else{
|
||||
ElMessage.error('系统异常');
|
||||
console.error('系统异常', response.data);
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 上传错误提示
|
||||
const excelUploadError = (response: any) => {
|
||||
console.error(response);
|
||||
if (response.status === 401) {
|
||||
ElMessage.error('未通过身份验证');
|
||||
}else{
|
||||
ElMessage.error('文件上传服务异常');
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
dialogVisible
|
||||
});
|
||||
onMounted(() => {
|
||||
uploadResult.value=''
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!-- 底部浮动-->
|
||||
<template >
|
||||
<div ref="bfRootRef" :key="isFloat? 'bottom-float':'bottom-fix'" :class="[isFloat ? 'bottom-float':'bottom-fix']" >
|
||||
<slot v-if="$slots['content']" name="content"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
const bfRootRef= ref()
|
||||
//组件传参
|
||||
let props = defineProps({
|
||||
height: { type: String,default:'50px' },//浮动层高度
|
||||
backgroundColor: { type: String,default:'#fff' },//浮动层背景色
|
||||
getWidthEvent: { type: Function },//获取浮动层宽度
|
||||
})
|
||||
|
||||
const isFloat=ref(false)
|
||||
const width=ref('')
|
||||
const initScrollHeight=ref(0)
|
||||
const initClientHeight=ref(0)
|
||||
const handleScroll = () => {
|
||||
let clientHeight=document.documentElement.clientHeight || window.innerHeight
|
||||
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
|
||||
|
||||
let temp=(scrollTop + clientHeight+bfRootRef.value.offsetHeight)
|
||||
isFloat.value=(temp >= initScrollHeight.value)?false:true
|
||||
}
|
||||
const windowChangesListener = () => {
|
||||
width.value=props.getWidthEvent()+'px'
|
||||
}
|
||||
onMounted(() => {
|
||||
width.value=props.getWidthEvent()+'px'
|
||||
initScrollHeight.value=document.documentElement.scrollHeight || document.body.scrollHeight
|
||||
initClientHeight.value=document.documentElement.clientHeight || window.innerHeight
|
||||
handleScroll()
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
window.addEventListener('resize', windowChangesListener)
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bottom-float{
|
||||
position: fixed;
|
||||
height: v-bind('props.height');
|
||||
width: v-bind('width');
|
||||
bottom: 0vh;
|
||||
background-color: v-bind('props.backgroundColor');
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.bottom-fix{
|
||||
height: v-bind('props.height');
|
||||
width: v-bind('width');
|
||||
background-color: v-bind('props.backgroundColor');
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!--日志显示组件-->
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="12"><el-text tag="b" size="large">变更前内容</el-text></el-col>
|
||||
<el-col :span="12"><el-text tag="b" size="large">变更后内容</el-text></el-col>
|
||||
</el-row>
|
||||
<el-row style="height: 90%;margin-top: 10px;">
|
||||
<el-col :span="12">
|
||||
<div class="logContent">
|
||||
<!-- 优先插槽 -->
|
||||
<slot v-if="$slots['beforeContent']" name="beforeContent"></slot>
|
||||
<!-- 优先处理JSON格式 -->
|
||||
<pre v-else-if="isJsonString(props.beforeContent)">{{ JSON.parse(props.beforeContent)}}</pre>
|
||||
<!-- 默认输出 -->
|
||||
<el-text v-else="props.beforeContent">{{ props.beforeContent }}</el-text>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="logContent">
|
||||
<!-- 优先插槽 -->
|
||||
<slot v-if="$slots['content']" name="content"></slot>
|
||||
<!-- 优先处理JSON格式 -->
|
||||
<pre v-else-if="isJsonString(props.content)">{{ JSON.parse(props.content)}}</pre>
|
||||
<!-- 默认输出 -->
|
||||
<el-text v-else="props.content">{{ props.content }}</el-text>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { isJsonString } from '@/framework/utils/standard/dataHandleUtil.ts'
|
||||
|
||||
let props = defineProps({
|
||||
//变更前内容
|
||||
beforeContent: { type: String, default: '', },
|
||||
//变更后内容
|
||||
content: { type: String, default: '', },
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.logContent{
|
||||
border:1px solid;
|
||||
border-color: #707175;
|
||||
border-radius:5px;
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
padding-top: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
|
||||
<!-- 实时搜索下拉框组件 -->
|
||||
<template>
|
||||
<el-select v-model="value" remote :placeholder="placeholder" style="width: 100%;" filterable :remote-method="remoteMethod" :loading="loading" clearable
|
||||
:multiple="multiple" :collapse-tags="multiple" :collapse-tags-tooltip="multiple">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, computed} from 'vue'
|
||||
import { handleSelectData } from '@/framework/utils/standard/dataHandleUtil.ts'
|
||||
/**
|
||||
* 实时检索组件
|
||||
* SearchSelect
|
||||
* @author nielang
|
||||
* @description 用于实时检索的下拉框
|
||||
* @property {String} modelValue 使用v-model
|
||||
* @property {String} placeholder input的placeholder
|
||||
* @property {Boolean} multiple 是否支持多选
|
||||
* @property {Function} request 接口请求函数，默认请求参数{'keyword':'关键字'}
|
||||
* @property {Function} customRequestHandle 自定义请求参数处理
|
||||
* @property {Function} customResponseHandle 自定义响应结果处理
|
||||
* @property {Boolean} showOptionValue 选项中是否显示value属性，使用customResponseHandle后，该参数失效
|
||||
*/
|
||||
const props = defineProps({
|
||||
modelValue:{
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "请输入关键字",
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
request:{
|
||||
type: Function,
|
||||
require: true
|
||||
},
|
||||
customRequestHandle: {
|
||||
type: Function,
|
||||
require: false
|
||||
},
|
||||
customResponseHandle: {
|
||||
type: Function,
|
||||
require: false
|
||||
},
|
||||
showOptionValue: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const value = computed({
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set(value) {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
})
|
||||
|
||||
const loading = ref(false);
|
||||
interface ListItem {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const options = ref<ListItem[]>([])
|
||||
const remoteMethod = (keyword: string) => {
|
||||
if (keyword) {
|
||||
loading.value = true
|
||||
if (props.request) {
|
||||
let params:any = {keyword:keyword}
|
||||
//自定义请求参数处理
|
||||
if(props.customRequestHandle)
|
||||
params=props.customRequestHandle(params)
|
||||
props.request(params).then((data: any) => {
|
||||
//自定义响应结果处理
|
||||
if(props.customRequestHandle){
|
||||
options.value=props.customResponseHandle(data)
|
||||
}else{
|
||||
options.value=handleSelectData(data,props.showOptionValue)
|
||||
}
|
||||
})
|
||||
}
|
||||
loading.value = false
|
||||
} else {
|
||||
options.value = []
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<!--脱敏文本展示组件-->
|
||||
<template>
|
||||
<span :class="props.underline?'underline':''">
|
||||
<slot v-if="$slots.default"></slot>
|
||||
<template v-else-if="props.data" >
|
||||
<el-tooltip :content="props.aesDecrypt?decrypt(props.data,props.decryptKey):props.data" placement="bottom" effect="light">
|
||||
{{ desensitize(props.aesDecrypt?decrypt(props.data,props.decryptKey):props.data,props.type,props.custEvent) }}
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-else> </template>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { decrypt,desensitize,DesensitizationType } from '@/framework/utils/standard/security.ts'
|
||||
|
||||
let props = defineProps({
|
||||
data: { type: String, default: '', },//展示数据
|
||||
aesDecrypt:{type:Boolean,default: true},//是否aes解密
|
||||
decryptKey:{type:String,default: ''},//自定义密钥
|
||||
underline:{type:Boolean,default: false},//是否需要下划线
|
||||
type:DesensitizationType,//脱敏类型
|
||||
custEvent:{type: Function},//自定义脱敏方法
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.underline {
|
||||
border-bottom: 1px solid #CDD0D6;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,17 @@
|
||||
<!--文本展示组件-->
|
||||
<template>
|
||||
<span style="border-bottom: 1px solid #CDD0D6;width: 100%;display: block;">
|
||||
<slot v-if="$slots.default"></slot>
|
||||
<template v-else-if="props.data" >{{ props.data }}</template>
|
||||
<template v-else> </template>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
let props = defineProps({
|
||||
data: { type: String, default: '', },
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
/**
|
||||
* 防抖：在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效。
|
||||
* 使用：
|
||||
* <el-button v-debounce:click.delay[2000]="testDebounce">按钮防抖</el-button>
|
||||
* <el-button v-debounce:click.delay[2000]="()=>testDebounce('debounce')">按钮防抖传参</el-button>
|
||||
*/
|
||||
import { ObjectDirective } from 'vue'
|
||||
interface DebounceEl extends HTMLElement {
|
||||
debounceEvent: () => void
|
||||
}
|
||||
// 防抖指令封装
|
||||
const debounceDirective: ObjectDirective = {
|
||||
beforeMount(el: DebounceEl, binding: any) {
|
||||
let timer: number
|
||||
let delay: number = 1000
|
||||
const keys = Object.keys(binding.modifiers)
|
||||
if (keys) {
|
||||
const key: string | undefined = keys.find((key) => key.includes('delay'))?.toString()
|
||||
const value = (key ?? '').match(/(?<=\[).*?(?=\])/)
|
||||
if (value) delay = parseInt(value[0])
|
||||
}
|
||||
el.debounceEvent = () => {
|
||||
clearTimeout(timer)
|
||||
timer = window.setTimeout(() => {
|
||||
binding.value()
|
||||
}, delay)
|
||||
}
|
||||
el.addEventListener(binding.arg, el.debounceEvent)
|
||||
},
|
||||
beforeUnmount(el: DebounceEl, binding: any) {
|
||||
el.removeEventListener(binding.arg, el.debounceEvent)
|
||||
},
|
||||
}
|
||||
|
||||
export default debounceDirective
|
||||
@@ -0,0 +1,18 @@
|
||||
import { App, Directive } from "vue";
|
||||
import debounce from "./debounce";
|
||||
import throttle from "./throttle";
|
||||
|
||||
const directivesList: { [key: string]: Directive } = {
|
||||
debounce,
|
||||
throttle,
|
||||
};
|
||||
|
||||
const directives = {
|
||||
install: function (app: App<Element>) {
|
||||
Object.keys(directivesList).forEach(key => {
|
||||
app.directive(key, directivesList[key]);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default directives;
|
||||
@@ -0,0 +1,43 @@
|
||||
|
||||
/**
|
||||
*节流：规定时间内，只触发一次。比如我们设定500ms，在这个时间内，无论点击按钮多少次，它都只会触发一次。
|
||||
* 使用：
|
||||
* <el-button v-throttle:click.delay[2000]="testThrottle">按钮节流</el-button>
|
||||
* el-button v-throttle:click.delay[2000]="()=>testThrottle('throttle')">按钮节流传参</el-button>
|
||||
*
|
||||
*/
|
||||
import { ObjectDirective } from 'vue'
|
||||
|
||||
interface ThrottleEl extends HTMLElement {
|
||||
throttleEvent: () => void
|
||||
}
|
||||
|
||||
// 节流指令封装
|
||||
const throttleDirective: ObjectDirective = {
|
||||
beforeMount(el: ThrottleEl, binding: any) {
|
||||
let throttled = false
|
||||
let delay: number = 1000
|
||||
const keys = Object.keys(binding.modifiers)
|
||||
if (keys) {
|
||||
const key: string | undefined = keys.find((key) => key.includes('delay'))?.toString()
|
||||
const value = (key ?? '').match(/(?<=\[).*?(?=\])/)
|
||||
if (value) delay = parseInt(value[0])
|
||||
}
|
||||
el.throttleEvent = () => {
|
||||
if (!throttled) {
|
||||
binding.value()
|
||||
throttled = true
|
||||
setTimeout(() => {
|
||||
throttled = false
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
el.addEventListener(binding.arg, el.throttleEvent)
|
||||
},
|
||||
beforeUnmount(el: ThrottleEl, binding: any) {
|
||||
el.removeEventListener(binding.arg, el.throttleEvent)
|
||||
},
|
||||
}
|
||||
|
||||
export default throttleDirective
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
const { copy } = useClipboard({ legacy: true });
|
||||
|
||||
export function useCopy(data: string){
|
||||
copy(data)
|
||||
ElMessage({type: 'success',message: '复制成功' })
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
/**
|
||||
* 跨页全选
|
||||
* @param multipleTableRef 多选的表格
|
||||
* @param showData 显示的数据
|
||||
* @param idKey 选中的id名称
|
||||
* @param tableFilterData 过滤掉不能选择数据后的全部数据，如果没有不能选中的数据，则为全部数据
|
||||
* @returns checkAll： 跨页全选状态
|
||||
* checkedIds 选中的所有行的id
|
||||
* initTableRowCheckStatus 初始化选中行
|
||||
* handlMultipageSelect 跨页全选状态操作
|
||||
* handleRowSelect 操作行选中
|
||||
* handleAllSelect 操作当前页选中
|
||||
*/
|
||||
export function useCrossPageSelect(multipleTableRef: any, showData: any, idKey: string, tableFilterData: any) {
|
||||
|
||||
const checkAll = ref(false) // 跨页全选转态
|
||||
const checkedIds = ref([]) // 选中的ids
|
||||
|
||||
// 初始化行选中状态
|
||||
const initTableRowCheckStatus = () => {
|
||||
nextTick(() => {
|
||||
showData.value.forEach((item: any) => {
|
||||
if (checkedIds.value.includes(item[idKey])) {
|
||||
multipleTableRef.value!.toggleRowSelection(item, true)
|
||||
return
|
||||
}
|
||||
multipleTableRef.value!.toggleRowSelection(item, false)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => showData.value, () => {
|
||||
initTableRowCheckStatus()
|
||||
})
|
||||
watch([checkedIds, tableFilterData], ([ids, tableData]) => {
|
||||
ids.length === tableData.length ? (checkAll.value = true) : (checkAll.value = false)
|
||||
}, { deep: true })
|
||||
|
||||
// 跨页全选
|
||||
const handlMultipageSelect = (status: boolean) => {
|
||||
if (status) {
|
||||
checkedIds.value = tableFilterData.value.map((item: any) => item[idKey])
|
||||
// checkedIds.value = tableData.value.filter(val => val.channel == "渠道销售").map(item => item.icapplynum)
|
||||
} else {
|
||||
checkedIds.value = []
|
||||
}
|
||||
initTableRowCheckStatus()
|
||||
}
|
||||
|
||||
// 切换选中行
|
||||
const handleRowSelect = (selection: any, row: any) => {
|
||||
const id = row[idKey]
|
||||
const item = selection.find((item: any) => item[idKey] === id)
|
||||
|
||||
if (item) {
|
||||
if (!checkedIds.value.includes(id)) {
|
||||
checkedIds.value.push(id)
|
||||
}
|
||||
return
|
||||
}
|
||||
const index = checkedIds.value.indexOf(id)
|
||||
if (index !== -1) {
|
||||
checkedIds.value.splice(index, 1)
|
||||
}
|
||||
checkAll.value = false
|
||||
}
|
||||
// 单页全选
|
||||
const handleAllSelect = (selection: any) => {
|
||||
if (selection.length > 0) {
|
||||
selection.forEach((item: any) => {
|
||||
if (!checkedIds.value.includes(item[idKey])) {
|
||||
checkedIds.value.push(item[idKey])
|
||||
}
|
||||
});
|
||||
return
|
||||
}
|
||||
showData.value.forEach((item: any) => {
|
||||
const index = checkedIds.value.indexOf(item[idKey])
|
||||
if (index != -1) {
|
||||
checkedIds.value.splice(index, 1)
|
||||
}
|
||||
});
|
||||
checkAll.value = false
|
||||
}
|
||||
|
||||
return { checkAll, checkedIds, initTableRowCheckStatus, handlMultipageSelect, handleRowSelect, handleAllSelect }
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
|
||||
import { refDebounced } from '@vueuse/core'
|
||||
import XEUtils from 'xe-utils'
|
||||
|
||||
/**
|
||||
* 表内检索，用于假分页时进行表内搜索
|
||||
* @param tableData 全部数据
|
||||
* @param keys 需要检索的key
|
||||
* @returns 检索后的数据,检索关键词，总数，分页对象
|
||||
*/
|
||||
export function useInTableSearchAndPaging(tableData: any, keys: Array<string> = []){
|
||||
|
||||
const tableKeyword = ref('')
|
||||
const debounceTableKeyword = refDebounced(tableKeyword, 500)
|
||||
const total = ref(0);
|
||||
const paging = ref({
|
||||
page: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
|
||||
const showData = computed(()=>{
|
||||
const filterData = tableData.value.filter((item: any) => {
|
||||
if (keys.length > 0) {
|
||||
const values = []
|
||||
for (const key in item) {
|
||||
if (keys.includes(key)) {
|
||||
values.push(item[key])
|
||||
}
|
||||
}
|
||||
return values.some(val => String(val).includes(debounceTableKeyword.value))
|
||||
}
|
||||
return Object.values(item).some(val => String(val).includes(debounceTableKeyword.value))
|
||||
})
|
||||
|
||||
const data = filterData.slice((paging.value.page - 1) * paging.value.pageSize, (paging.value.page - 1) * paging.value.pageSize + paging.value.pageSize)
|
||||
total.value = filterData.length
|
||||
return data
|
||||
})
|
||||
|
||||
return {tableKeyword, showData, total, paging}
|
||||
}
|
||||
|
||||
/**
|
||||
* VxeGrid表内检索，用于真分页时进行表内搜索
|
||||
* @param filterName 关键字对象
|
||||
* @param grid 表格对象
|
||||
* @param tableData 全部数据对象
|
||||
* @param searchProps 需要检索的key
|
||||
* @param options 选项，{children: 'children'}是否作为子节点展示
|
||||
* @param allTreeExpand 是否展开树形结构子节点
|
||||
*/
|
||||
export function useInVxeTableSearch(filterName:any, grid:any, tableData: any, searchProps: Array<string> = [],options:any,allTreeExpand:boolean=false){
|
||||
const filterVal = XEUtils.toValueString(filterName.value).trim().toLowerCase()
|
||||
const $table = grid.value
|
||||
if(!$table)
|
||||
return false
|
||||
if (filterVal) {
|
||||
if(searchProps.length==0){
|
||||
searchProps=Object.keys(tableData.value[0])
|
||||
}
|
||||
const rest = XEUtils.searchTree(tableData.value, item => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1), options)
|
||||
grid.value.loadData(rest)
|
||||
if(allTreeExpand){
|
||||
// 搜索之后默认展开所有子节点
|
||||
nextTick(() => {
|
||||
$table.setAllTreeExpand(true)
|
||||
})
|
||||
}
|
||||
}else {
|
||||
$table.loadData(tableData.value)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* VxeGrid表内检索，用于真分页时进行表内搜索
|
||||
* @param filterName 关键字对象
|
||||
* @param grid 表格对象
|
||||
* @param tableData 全部数据对象
|
||||
* @param searchProps 需要检索的key
|
||||
* @param options 选项，{children: 'children'}是否作为子节点展示
|
||||
* @param allTreeExpand 是否展开树形结构子节点
|
||||
*/
|
||||
export function useInVxeTableSearchAndPageing(filterName:any, grid:any, tableData: any, searchProps: Array<string> = [],options:any,allTreeExpand:boolean=false,
|
||||
page:number,size:number){
|
||||
const filterVal = XEUtils.toValueString(filterName.value).trim().toLowerCase()
|
||||
const $table = grid.value
|
||||
if(!$table)
|
||||
return false
|
||||
if (filterVal) {
|
||||
if(searchProps.length==0){
|
||||
searchProps=Object.keys(tableData.value[0])
|
||||
}
|
||||
const rest = XEUtils.searchTree(tableData.value, item => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1), options)
|
||||
grid.value.loadData(rest.slice((page - 1) * size, page * size))//重新加载表格数据
|
||||
if(allTreeExpand){
|
||||
// 搜索之后默认展开所有子节点
|
||||
nextTick(() => {
|
||||
$table.setAllTreeExpand(true)
|
||||
})
|
||||
}
|
||||
}else {
|
||||
grid.value.loadData(tableData.value.slice((page - 1) * size, page * size))
|
||||
}
|
||||
}
|
||||
|
||||
export function useTableDataPageing(tableData: any,page:number,size:number){
|
||||
return tableData.slice((page - 1) * size, page * size)
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { h } from 'vue'
|
||||
|
||||
export function useRenderHeader(node: any) {
|
||||
const { column } = node
|
||||
let realWidth = 0;
|
||||
let span = document.createElement('span');
|
||||
span.innerText = column.label;
|
||||
document.body.appendChild(span);
|
||||
realWidth = span.getBoundingClientRect().width;
|
||||
column.minWidth = realWidth+16; // 可能还有边距/边框等值，需要根据实际情况加上
|
||||
document.body.removeChild(span);
|
||||
|
||||
return h('span', column.label)
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
import XEUtils from 'xe-utils'
|
||||
|
||||
|
||||
/**表格相关数据查询重置 */
|
||||
export async function useTableQueryReload(tableRef:any){
|
||||
const params = tableRef.params
|
||||
if(params&¶ms.tableDataCache) params.tableDataCache=[] //重置表格数据缓存
|
||||
if(params&¶ms.filterNameRef) params.filterNameRef='' //重置表内搜索内容
|
||||
if(!XEUtils.isUndefined(tableRef.proxyConfig)){
|
||||
tableRef.commitProxy('reload') //重置表格相关数据
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* vxe代理请求参数处理
|
||||
* @param tableData 表所有数据
|
||||
* @param page 第几页
|
||||
* @param size 每页多少条
|
||||
* @returns
|
||||
*/
|
||||
export function useQueryParamsHandle(queryFrom:{},page: any, sorts:any, filters:any){
|
||||
const queryParams: any = Object.assign({}, queryFrom)
|
||||
// 处理分页条件
|
||||
if (page) {
|
||||
queryParams.page = page.currentPage
|
||||
queryParams.size = page.pageSize
|
||||
}
|
||||
// 处理排序条件
|
||||
const firstSort = sorts[0]
|
||||
if (firstSort) {
|
||||
queryParams.sort = firstSort.field
|
||||
queryParams.order = firstSort.order
|
||||
}
|
||||
// 处理筛选条件
|
||||
filters.forEach(({ field, values }) => {
|
||||
queryParams[field] = values.join(',')
|
||||
})
|
||||
return queryParams
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据过滤
|
||||
* @param $table 表格引用
|
||||
* @param tableData 需要过滤的数据
|
||||
* @param filterEvent 过滤成功事件
|
||||
* @param resetEvent 重置过滤数据事件
|
||||
* @returns
|
||||
*/
|
||||
function dataFilter($table:any,tableData:[],filterEvent:undefined,resetEvent:undefined){
|
||||
let tableParams=$table.params
|
||||
const filterVal = XEUtils.toValueString(tableParams.filterNameRef).trim().toLowerCase()
|
||||
if (filterVal) {
|
||||
let searchProps=tableParams.searchProps
|
||||
/**如需要检索的key不存在，则从表格对象中获取全部列字段名 */
|
||||
if(XEUtils.isUndefined(searchProps)||searchProps.length==0){
|
||||
searchProps=$table.getTableColumn().visibleColumn.map(function(vcolumn) {
|
||||
return vcolumn.field;
|
||||
});
|
||||
}
|
||||
let options={children: (XEUtils.isUndefined(tableParams.children)||!tableParams.children)?'no':''}
|
||||
const filterData = XEUtils.searchTree(tableData, item => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1), options)
|
||||
if(!XEUtils.isUndefined(filterEvent)&&'function'===typeof filterEvent){
|
||||
filterEvent(filterData)
|
||||
}
|
||||
return filterData
|
||||
}else {
|
||||
if(!XEUtils.isUndefined(resetEvent)&&'function'===typeof resetEvent){
|
||||
resetEvent(tableData)
|
||||
}
|
||||
return tableData
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* VxeTable表内检索
|
||||
* @param tableRef 表格对象
|
||||
*/
|
||||
export function useInVxeTableSearch($table:any){
|
||||
let tableParams=$table.params
|
||||
const filterVal = XEUtils.toValueString(tableParams.filterNameRef).trim().toLowerCase()
|
||||
if (filterVal) {
|
||||
let searchProps=tableParams.searchProps
|
||||
/**如需要检索的key不存在，则从表格对象中获取全部列字段名 */
|
||||
if(XEUtils.isUndefined(searchProps)||searchProps.length==0){
|
||||
searchProps=$table.getTableColumn().visibleColumn.map(function(vcolumn) {
|
||||
return vcolumn.field;
|
||||
});
|
||||
}
|
||||
let options={children: (XEUtils.isUndefined(tableParams.children)||!tableParams.children)?'no':''}
|
||||
const filterData = XEUtils.searchTree(tableParams.tableDataCache, item => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1), options)
|
||||
return filterData
|
||||
}else {
|
||||
return tableParams.tableDataCache
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* VxeGrid表内检索
|
||||
* 服务端分页(params.clientPage不配置或者配置为false)，不会修改当前分页数据
|
||||
* @param tableRef 表格对象
|
||||
*/
|
||||
export function useInVxeGridSearch(tableRef:any){
|
||||
const $table = tableRef
|
||||
|
||||
if(!$table) {
|
||||
console.error('表格对象tableRef不存在');
|
||||
return false
|
||||
}
|
||||
if(!$table.params) {
|
||||
console.error('自定义参数配置params不存在');
|
||||
return false
|
||||
}
|
||||
let tableParams=$table.params
|
||||
/**客户端分页并且使用了代理配置，直接重新加载表格,通过useQueryAndClientPaging方法执行筛选操作 */
|
||||
if(tableParams.clientPage&&!XEUtils.isUndefined($table.proxyConfig)){
|
||||
$table.commitProxy('reload')
|
||||
return;
|
||||
}
|
||||
let tableData=[] //默认获取表格data中信息
|
||||
if(!XEUtils.isUndefined($table.data)){
|
||||
$table.data.forEach(function(o) {
|
||||
tableData.push(o)
|
||||
});
|
||||
}
|
||||
if(!XEUtils.isUndefined($table.getProxyInfo())&&null!=$table.getProxyInfo())
|
||||
tableData=$table.getProxyInfo().data //从表格代理信息中获取当前全量数据
|
||||
/**如tableDataRef不存在，则从表格对象中初始化全量数据-----已从表格代理信息中获取当前全量数据，该逻辑暂不使用*/
|
||||
// let tableData=tableParams.tableDataCache //待处理数据
|
||||
// if(null==tableData||tableData.length==0){
|
||||
// let visibleData=$table.getTableData().visibleData
|
||||
// tableData=new Array()
|
||||
// visibleData.forEach(function(v,k) {
|
||||
// tableData.push(v)
|
||||
// v.children.forEach(function(cv,ck) {
|
||||
// tableData.push(cv)
|
||||
// });
|
||||
// });
|
||||
// tableParams.tableDataCache=tableData
|
||||
// }
|
||||
dataFilter($table,tableData,
|
||||
function(filterData){
|
||||
$table.loadData(filterData)
|
||||
if(tableParams.allTreeExpand){
|
||||
// 搜索之后默认展开所有子节点
|
||||
nextTick(() => {
|
||||
$table.setAllTreeExpand(true)
|
||||
})
|
||||
}
|
||||
},function(resetData){
|
||||
$table.loadData(resetData)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询数据，并由客户端分页
|
||||
* @param tableRef 表格对象
|
||||
* @param page 分页信息
|
||||
* @param sorts 排序信息
|
||||
* @param requestMethod 执行查询的方法
|
||||
* @returns
|
||||
*/
|
||||
export async function useQueryAndClientPaging(tableRef:any,page: any, sorts:any, requestMethod:any){
|
||||
const $table = tableRef.value
|
||||
if(!$table) {
|
||||
console.error('表格对象tableRef不存在');
|
||||
return false
|
||||
}
|
||||
if(!$table.params) {
|
||||
console.error('自定义参数配置params不存在');
|
||||
return false
|
||||
}
|
||||
if(!$table.params.clientPage){
|
||||
console.error('自定义参数配置params.clientPage应该设置为true');
|
||||
return false
|
||||
}
|
||||
let cdata=$table.params.tableDataCache
|
||||
/**缓存中不存在数据，则发起请求，并初始化缓存 */
|
||||
if(cdata.length==0){
|
||||
let dataPromise= await requestMethod()
|
||||
$table.params.tableDataCache=dataPromise
|
||||
cdata=dataPromise
|
||||
}
|
||||
/**排序*/
|
||||
cdata=XEUtils.orderBy(cdata, sorts.map((sort:any) => [sort.field, sort.order]))
|
||||
/**如表内搜索存在关键字，则首先过滤数据 */
|
||||
cdata=dataFilter($table,cdata)
|
||||
return new Promise((resolve) => {
|
||||
resolve({
|
||||
total:cdata.length,
|
||||
data:cdata.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize)
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import { useTagsViewStore } from "@/framework/store/modules/tagsView";
|
||||
const tagsViewStore = useTagsViewStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="app-container" >
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive :include="tagsViewStore.cachedViews">
|
||||
<component :is="Component" :key="route.fullPath"/>
|
||||
</keep-alive>
|
||||
|
||||
</router-view>
|
||||
|
||||
<el-backtop target=".app-container" :right="30" :bottom="5" :visibility-height="50" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
// height: 100%;
|
||||
width: 100%;
|
||||
padding-top: 16px;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
.fixed-tags+.app-container {
|
||||
// min-height: 100vh;
|
||||
padding-top: 54px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<!-- 菜单列表-->
|
||||
<el-menu :default-active="activeMenu" :router="true" mode="horizontal"
|
||||
:background-color="settingsStore.currentLayoutColor.navrbarBackgroundColor"
|
||||
:text-color="settingsStore.currentLayoutColor.menuFontTextColor"
|
||||
:active-text-color="settingsStore.currentLayoutColor.activeMenuFontTextColor" >
|
||||
<el-sub-menu v-for="item in routers" :key="item.path" :index="item.path" >
|
||||
<template #title>{{ item.meta.title }}</template>
|
||||
<el-menu-item v-for="twoitem in item.children" :key="twoitem.path" :index="item.path+'/'+twoitem.path">{{ twoitem.meta.title }}</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRoutesStore } from "@/framework/store/modules/routes";
|
||||
import { useSettingsStore } from "@/framework/store/modules/settings";
|
||||
const settingsStore = useSettingsStore();
|
||||
const routesStore = useRoutesStore();
|
||||
|
||||
|
||||
const routers = computed(() => {
|
||||
return routesStore.routes.filter((item: any) => {
|
||||
return item.meta && item.meta.title && item.children && item.children.length > 0
|
||||
})
|
||||
})
|
||||
|
||||
let activeMenu = ref('')
|
||||
let router = useRouter()
|
||||
watch(() => router,
|
||||
(newValue) => {
|
||||
activeMenu.value = newValue.currentRoute.value.fullPath
|
||||
},
|
||||
{ immediate: true,deep: true }
|
||||
);
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-menu {
|
||||
height: 50px;
|
||||
border-bottom: none;
|
||||
|
||||
&>.el-menu-item {
|
||||
border-bottom: none;
|
||||
|
||||
&.is-active {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="header-left">
|
||||
<!-- 系统LOGO -->
|
||||
<img :src="logoUrl" alt="logo" class="ab-m-r-50" v-if="settingsStore.showLogo"/>
|
||||
<!-- 子系统选择功能-->
|
||||
<SubSystemSwitch></SubSystemSwitch>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import logoPng from '@/assets/img/logo.png'
|
||||
import { useSettingsStore } from "@/framework/store/modules/settings";
|
||||
import SubSystemSwitch from "@/framework/layoutpublic/SubSystemSwitch/index.vue"
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
|
||||
|
||||
let logoUrl = logoPng
|
||||
if(''!=settingsStore.logoAddress){
|
||||
logoUrl=settingsStore.logoAddress
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.header-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
.system-menu{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.current-menu{
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.other-menu{
|
||||
width: 480px;
|
||||
height: auto;
|
||||
color: rgba(255,255,255,0.45);
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 45px;
|
||||
.item{
|
||||
width: 115px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 10px;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.active{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="header-right">
|
||||
|
||||
<!-- 搜索组件 -->
|
||||
<HeaderSearch />
|
||||
<!-- 信息通知组件 -->
|
||||
<MessageNotify />
|
||||
<!-- 登录人信息 -->
|
||||
<NewUserDropDown></NewUserDropDown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import HeaderSearch from './Search.vue'
|
||||
import MessageNotify from '../MessageNotify/index.vue'
|
||||
import headPng from '@/assets/img/head.jpg'
|
||||
import { useUserStore } from "@/framework/store/modules/user";
|
||||
import { useSettingsStore } from "@/framework/store/modules/settings";
|
||||
import NewUserDropDown from "@/framework/layoutpublic/NewUserDropDown/index.vue"
|
||||
const settingsStore = useSettingsStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
let headAddress = headPng
|
||||
|
||||
if(''!=settingsStore.headAddress){
|
||||
headAddress=settingsStore.headAddress
|
||||
}
|
||||
|
||||
const logout = () =>{
|
||||
userStore.logout()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-right {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
.name {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}</style>
|
||||
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div :class="{ 'show': show }" class="header-search">
|
||||
<el-tooltip content="菜单搜索" placement="bottom" effect="light">
|
||||
<el-icon @click.stop="click">
|
||||
<Search />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
<el-select ref="headerSearchSelect" v-model="search" :remote-method="querySearch" filterable default-first-option
|
||||
remote placeholder="请输入菜单名称" class="header-search-select" @change="change">
|
||||
<el-option v-for="item in options" :key="item.path" :value="item" :label="item.item.title.join(' > ')" />
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Fuse from 'fuse.js'
|
||||
import path from 'path-browserify';
|
||||
import { ref, computed, watch, nextTick } from 'vue'
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRoutesStore } from "@/framework/store/modules/routes";
|
||||
const routesStore = useRoutesStore();
|
||||
let router = useRouter()
|
||||
|
||||
const search = ref('')
|
||||
const options = ref([])
|
||||
const searchPool = ref([])
|
||||
const show = ref(false)
|
||||
const fuse = ref({})
|
||||
|
||||
const routes = computed(() => {
|
||||
return routesStore.routes.filter((item: any) => {
|
||||
return item.meta && !item.meta.hidden && item.meta.title && item.children && item.children.length > 0
|
||||
})
|
||||
})
|
||||
|
||||
watch(searchPool, (list) => {
|
||||
initFuse(list)
|
||||
})
|
||||
watch(show, (value) => {
|
||||
if (value) {
|
||||
document.body.addEventListener('click', close)
|
||||
} else {
|
||||
document.body.removeEventListener('click', close)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const generateRoutes = (routes: any, basePath = '/', prefixTitle = []) => {
|
||||
let res: any = []
|
||||
|
||||
for (const router of routes) {
|
||||
const data:any = {
|
||||
path: path.resolve(basePath, router.path),
|
||||
title: [...prefixTitle]
|
||||
}
|
||||
|
||||
if (router.meta && router.meta.title) {
|
||||
data.title = [...data.title, router.meta.title]
|
||||
res.push(data)
|
||||
}
|
||||
if (router.children) {
|
||||
const tempRoutes: any = generateRoutes(router.children, data.path, data.title)
|
||||
if (tempRoutes.length >= 1) {
|
||||
res = [...res, ...tempRoutes]
|
||||
}
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
searchPool.value = generateRoutes(routes.value)
|
||||
|
||||
const initFuse = (list: any) => {
|
||||
fuse.value = new Fuse(list, {
|
||||
shouldSort: true,
|
||||
threshold: 0.4,
|
||||
location: 0,
|
||||
distance: 100,
|
||||
// maxPatternLength: 32,
|
||||
minMatchCharLength: 1,
|
||||
keys: [{
|
||||
name: 'title',
|
||||
weight: 0.7
|
||||
}, {
|
||||
name: 'path',
|
||||
weight: 0.3
|
||||
}]
|
||||
})
|
||||
}
|
||||
|
||||
const headerSearchSelect:any = ref(null)
|
||||
|
||||
const click = () => {
|
||||
show.value = !show.value
|
||||
if (show.value) {
|
||||
headerSearchSelect.value && headerSearchSelect.value.focus()
|
||||
}
|
||||
}
|
||||
const close = () => {
|
||||
headerSearchSelect.value && headerSearchSelect.value.blur()
|
||||
options.value = []
|
||||
show.value = false
|
||||
}
|
||||
const change = (val: any) => {
|
||||
router .push(val.item.path)
|
||||
search.value = ''
|
||||
options.value = []
|
||||
nextTick(() => {
|
||||
show.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const querySearch = (query) => {
|
||||
if (query !== '') {
|
||||
options.value = fuse.value.search(query)
|
||||
} else {
|
||||
options.value = []
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-search {
|
||||
font-size: 1.3rem;
|
||||
margin-right: 32px;
|
||||
margin-top: -2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.search-icon {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header-search-select {
|
||||
font-size: 18px;
|
||||
transition: width 0.2s;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
.el-input__inner {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
box-shadow: none !important;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.show {
|
||||
.header-search-select {
|
||||
width: 210px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="header-container">
|
||||
<HeaderLeft />
|
||||
<div class="center">
|
||||
<HeaderCenter />
|
||||
</div>
|
||||
<HeaderRight />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import HeaderLeft from "./Left.vue"
|
||||
import HeaderRight from "./Right.vue"
|
||||
import HeaderCenter from "./Center.vue"
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.header-container{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.center{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="message-notify" v-if="settingsStore.showMessageNotify">
|
||||
<el-badge :value="2" style="font-size: 1.3rem;">
|
||||
<el-icon class="icon" @mouseenter="showNotify = true" @mouseleave="onLeave">
|
||||
<Bell />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
|
||||
<div class="msg-list" v-show="showNotify" @mouseenter="onEnter" @mouseleave="showNotify = false">
|
||||
<div class="ab-m-b-10">
|
||||
<div class="msg-item" v-for="item in list" :key="item.id">
|
||||
<div class="left">
|
||||
<el-icon style="font-size: 1.3rem;">
|
||||
<Bell />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div>{{ item.title }}</div>
|
||||
<div class="date">{{ item.date }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="left">清空通知</div>
|
||||
<div class="right">查看更多</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useSettingsStore } from "@/framework/store/modules/settings";
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
const showNotify = ref(false)
|
||||
let timer: number = 0
|
||||
const onEnter = () => {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
const onLeave = () => {
|
||||
timer = window.setTimeout(() => {
|
||||
showNotify.value = false
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const list = ref([{
|
||||
title: '你有十五条售后问题要处理',
|
||||
date: '2023-06-30 10:21'
|
||||
},{
|
||||
title: '你有十五条售后问题要处理',
|
||||
date: '2023-06-30 10:21'
|
||||
}])
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-notify {
|
||||
|
||||
cursor: pointer;
|
||||
margin-right: 32px;
|
||||
margin-top: 3px;
|
||||
|
||||
.msg-list {
|
||||
width: 350px;
|
||||
height: auto;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
color: #333;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 70px;
|
||||
right: 50px;
|
||||
padding-top: 10px;
|
||||
|
||||
.msg-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
&:hover{
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.right{
|
||||
font-size: 14px;
|
||||
color: #303335;
|
||||
.date{
|
||||
margin-top: 3px;
|
||||
color: #b8bbbd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer{
|
||||
display: flex;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
.left{
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
&:hover{
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
&:hover{
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<!-- 左侧二级菜单 -->
|
||||
<div class="sidebar-container" :class="{'sidebar-container-close': !appStore.sidebar.opened}">
|
||||
<div class="top">
|
||||
<span class="menu-name" v-show="appStore.sidebar.opened">{{ activeMenuName }}</span>
|
||||
<Hamburger :is-active="appStore.sidebar.opened" @toggle-click="toggleSideBar" />
|
||||
</div>
|
||||
|
||||
<el-menu :default-active="activePath" :router="true" background-color="#F6F8FB" text-color="#303335" :collapse="!appStore.sidebar.opened" :collapse-transition="false">
|
||||
<el-menu-item v-for="item in subRoutes" :key="resolvePath(item.path)" :index="resolvePath(item.path)" >
|
||||
<template v-if="!appStore.sidebar.opened">
|
||||
{{ item.meta.title }}
|
||||
</template>
|
||||
<template #title >{{ item.meta.title }}</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Hamburger from "@/framework/components/Hamburger/index.vue";
|
||||
import path from 'path-browserify';
|
||||
import { isExternal } from '@/framework/utils/index';
|
||||
import { ref, watch} from 'vue'
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRoutesStore } from "@/framework/store/modules/routes";
|
||||
const routesStore = useRoutesStore();
|
||||
|
||||
import { useAppStore } from "@/framework/store/modules/app";
|
||||
const appStore = useAppStore()
|
||||
|
||||
/**
|
||||
* 左侧菜单栏显示/隐藏
|
||||
*/
|
||||
function toggleSideBar() {
|
||||
appStore.toggleSidebar(!appStore.sidebar.opened);
|
||||
}
|
||||
|
||||
let activePath= ref('')
|
||||
let activeMenuName = ref('')
|
||||
let activeMenuPath = ref('')
|
||||
let subRoutes:any = ref([])
|
||||
|
||||
|
||||
let router = useRouter()
|
||||
watch(
|
||||
() => router,
|
||||
(newValue) => {
|
||||
activePath.value = newValue.currentRoute.value.fullPath
|
||||
const path = newValue.currentRoute.value.matched[0].path
|
||||
const activeRoute = routesStore.routes.find((item: any) => item.path === path)
|
||||
if (activeRoute) {
|
||||
activeMenuName.value = activeRoute.meta.title
|
||||
activeMenuPath.value = activeRoute.path
|
||||
subRoutes.value = activeRoute.children
|
||||
}
|
||||
},
|
||||
{ immediate: true,deep: true }
|
||||
);
|
||||
|
||||
/**
|
||||
* 解析路径
|
||||
*
|
||||
* @param routePath 路由路径
|
||||
*/
|
||||
function resolvePath(routePath: string) {
|
||||
if (isExternal(routePath)) {
|
||||
return routePath;
|
||||
}
|
||||
// 完整路径 = 父级路径(/level/level_3) + 路由路径
|
||||
const fullPath = path.resolve(activeMenuPath.value, routePath); // 相对路径 → 绝对路径
|
||||
return fullPath;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sidebar-container {
|
||||
width: $sideBarWidth;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x:hidden;
|
||||
background-color: #F6F8FB;
|
||||
|
||||
.top{
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.menu-name{
|
||||
padding-left: 16px;
|
||||
color: #303335;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 10px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
:deep(.el-tooltip__trigger) {
|
||||
display: block;
|
||||
width: 64px;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar-container-close{
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.el-menu--vertical{
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<script setup lang="ts">
|
||||
import { useTagsViewStore, TagView } from "@/framework/store/modules/tagsView";
|
||||
|
||||
const tagAndTagSpacing = ref(4);
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
|
||||
const emits = defineEmits(["scroll"]);
|
||||
const emitScroll = () => {
|
||||
emits("scroll");
|
||||
};
|
||||
|
||||
const tagsViewStore = useTagsViewStore();
|
||||
|
||||
const scrollWrapper = computed(
|
||||
() => proxy?.$refs.scrollContainer.$refs.wrapRef
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
scrollWrapper.value.addEventListener("scroll", emitScroll, true);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
scrollWrapper.value.removeEventListener("scroll", emitScroll);
|
||||
});
|
||||
|
||||
function handleScroll(e: WheelEvent) {
|
||||
const eventDelta = (e as any).wheelDelta || -e.deltaY * 40;
|
||||
scrollWrapper.value.scrollLeft =
|
||||
scrollWrapper.value.scrollLeft + eventDelta / 4;
|
||||
}
|
||||
|
||||
function moveToTarget(currentTag: TagView) {
|
||||
const $container = proxy.$refs.scrollContainer.$el;
|
||||
const $containerWidth = $container.offsetWidth;
|
||||
const $scrollWrapper = scrollWrapper.value;
|
||||
|
||||
let firstTag = null;
|
||||
let lastTag = null;
|
||||
|
||||
// find first tag and last tag
|
||||
if (tagsViewStore.visitedViews.length > 0) {
|
||||
firstTag = tagsViewStore.visitedViews[0];
|
||||
lastTag = tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1];
|
||||
}
|
||||
|
||||
if (firstTag === currentTag) {
|
||||
$scrollWrapper.scrollLeft = 0;
|
||||
} else if (lastTag === currentTag) {
|
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
|
||||
} else {
|
||||
const tagListDom = document.getElementsByClassName("tags-item");
|
||||
const currentIndex = tagsViewStore.visitedViews.findIndex(
|
||||
(item) => item === currentTag
|
||||
);
|
||||
let prevTag = null;
|
||||
let nextTag = null;
|
||||
for (const k in tagListDom) {
|
||||
if (k !== "length" && Object.hasOwnProperty.call(tagListDom, k)) {
|
||||
if (
|
||||
(tagListDom[k] as any).dataset.path ===
|
||||
tagsViewStore.visitedViews[currentIndex - 1].path
|
||||
) {
|
||||
prevTag = tagListDom[k];
|
||||
}
|
||||
if (
|
||||
(tagListDom[k] as any).dataset.path ===
|
||||
tagsViewStore.visitedViews[currentIndex + 1].path
|
||||
) {
|
||||
nextTag = tagListDom[k];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// the tag's offsetLeft after of nextTag
|
||||
const afterNextTagOffsetLeft =
|
||||
(nextTag as any).offsetLeft +
|
||||
(nextTag as any).offsetWidth +
|
||||
tagAndTagSpacing.value;
|
||||
|
||||
// the tag's offsetLeft before of prevTag
|
||||
const beforePrevTagOffsetLeft =
|
||||
(prevTag as any).offsetLeft - tagAndTagSpacing.value;
|
||||
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
|
||||
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
|
||||
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
||||
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
moveToTarget,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-scrollbar
|
||||
ref="scrollContainer"
|
||||
class="scroll-container"
|
||||
:vertical="false"
|
||||
@wheel.prevent="handleScroll"
|
||||
>
|
||||
<slot />
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scroll-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
.el-scrollbar__bar {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
height: 49px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<!-- 标签页 -->
|
||||
<div class="tags-container">
|
||||
<scroll-pane ref="scrollPaneRef" @scroll="handleScroll">
|
||||
<router-link v-for="tag in visitedViews" :key="tag.path" :class="'tags-item ' + (isActive(tag) ? 'active' : '')"
|
||||
:data-path="tag.path" :to="{ path: tag.path, query: tag.query }"
|
||||
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''" @contextmenu.prevent="openTagMenu(tag, $event)">
|
||||
{{ tag.meta?.title }}
|
||||
<span v-if="!isAffix(tag)" class="tags-item-close" @click.prevent.stop="closeSelectedTag(tag)">×</span>
|
||||
</router-link>
|
||||
</scroll-pane>
|
||||
|
||||
<!-- tag标签操作菜单 -->
|
||||
<ul v-show="tagMenuVisible" class="tag-menu" :style="{ left: left + 'px', top: top + 'px' }">
|
||||
<li @click="refreshSelectedTag(selectedTag)">
|
||||
刷新
|
||||
</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
|
||||
关闭
|
||||
</li>
|
||||
<li @click="closeOtherTags">
|
||||
关闭其它标签页
|
||||
</li>
|
||||
<li v-if="!isFirstView()" @click="closeLeftTags">
|
||||
关闭左侧标签页
|
||||
</li>
|
||||
<li v-if="!isLastView()" @click="closeRightTags">
|
||||
关闭右侧标签页
|
||||
</li>
|
||||
<li @click="closeAllTags()">
|
||||
关闭所有标签页
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
nextTick,
|
||||
ref,
|
||||
watch,
|
||||
onMounted,
|
||||
} from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
import path from "path-browserify";
|
||||
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
import { usePermissionStore } from "@/framework/store/modules/permission";
|
||||
import { useTagsViewStore, TagView } from "@/framework/store/modules/tagsView";
|
||||
import ScrollPane from "./ScrollPane.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const permissionStore = usePermissionStore();
|
||||
const tagsViewStore = useTagsViewStore();
|
||||
|
||||
const { visitedViews } = storeToRefs(tagsViewStore);
|
||||
|
||||
const selectedTag = ref({});
|
||||
const scrollPaneRef = ref();
|
||||
const left = ref(0);
|
||||
const top = ref(0);
|
||||
const affixTags = ref<TagView[]>([]);
|
||||
|
||||
watch(
|
||||
route,
|
||||
() => {
|
||||
addTags();
|
||||
moveToCurrentTag();
|
||||
},
|
||||
{
|
||||
//初始化立即执行
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
const tagMenuVisible = ref(false); // 标签操作菜单显示状态
|
||||
watch(tagMenuVisible, (value) => {
|
||||
if (value) {
|
||||
document.body.addEventListener("click", closeTagMenu);
|
||||
} else {
|
||||
document.body.removeEventListener("click", closeTagMenu);
|
||||
}
|
||||
});
|
||||
|
||||
function filterAffixTags(routes: any[], basePath = "/") {
|
||||
let tags: TagView[] = [];
|
||||
|
||||
routes.forEach((route) => {
|
||||
|
||||
if (route.meta && route.meta.affix) {
|
||||
const tagPath = path.resolve(basePath, route.path);
|
||||
tags.push({
|
||||
fullPath: tagPath,
|
||||
path: tagPath,
|
||||
name: route.name,
|
||||
meta: { ...route.meta },
|
||||
});
|
||||
}
|
||||
|
||||
if (route.children) {
|
||||
const childTags = filterAffixTags(route.children, route.path);
|
||||
if (childTags.length >= 1) {
|
||||
tags = tags.concat(childTags);
|
||||
}
|
||||
}
|
||||
});
|
||||
return tags;
|
||||
}
|
||||
|
||||
function initTags() {
|
||||
const tags: TagView[] = filterAffixTags(permissionStore.routes);
|
||||
affixTags.value = tags;
|
||||
for (const tag of tags) {
|
||||
// Must have tag name
|
||||
if (tag.name) {
|
||||
tagsViewStore.addVisitedView(tag);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addTags() {
|
||||
if (route.name) {
|
||||
tagsViewStore.addView(route);
|
||||
}
|
||||
}
|
||||
|
||||
function moveToCurrentTag() {
|
||||
nextTick(() => {
|
||||
for (const r of tagsViewStore.visitedViews) {
|
||||
if (r.path === route.path) {
|
||||
scrollPaneRef.value.moveToTarget(r);
|
||||
// when query is different then update
|
||||
if (r.fullPath !== route.fullPath) {
|
||||
tagsViewStore.updateVisitedView(route);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function isActive(tag: TagView) {
|
||||
return tag.path === route.path;
|
||||
}
|
||||
|
||||
function isAffix(tag: TagView) {
|
||||
return tag.meta && tag.meta.affix;
|
||||
}
|
||||
|
||||
function isFirstView() {
|
||||
try {
|
||||
return (
|
||||
(selectedTag.value as TagView).fullPath ===
|
||||
tagsViewStore.visitedViews[1].fullPath ||
|
||||
(selectedTag.value as TagView).fullPath === "/index"
|
||||
);
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function isLastView() {
|
||||
try {
|
||||
return (
|
||||
(selectedTag.value as TagView).fullPath ===
|
||||
tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].fullPath
|
||||
);
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function refreshSelectedTag(view: TagView) {
|
||||
tagsViewStore.delCachedView(view);
|
||||
const { fullPath } = view;
|
||||
nextTick(() => {
|
||||
router.replace({ path: "/redirect" + fullPath }).catch((err) => {
|
||||
console.warn(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function toLastView(visitedViews: TagView[]) {
|
||||
const latestView = visitedViews.slice(-1)[0];
|
||||
if (latestView && latestView.fullPath) {
|
||||
router.push(latestView.fullPath);
|
||||
} else {
|
||||
router.replace({ path: "/redirect/" })
|
||||
}
|
||||
}
|
||||
|
||||
function closeSelectedTag(view: TagView) {
|
||||
tagsViewStore.delView(view).then((res: any) => {
|
||||
if (isActive(view)) {
|
||||
toLastView(res.visitedViews);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeLeftTags() {
|
||||
tagsViewStore.delLeftViews(selectedTag.value).then((res: any) => {
|
||||
if (
|
||||
!res.visitedViews.find((item: any) => item.fullPath === route.fullPath)
|
||||
) {
|
||||
toLastView(res.visitedViews);
|
||||
}
|
||||
});
|
||||
}
|
||||
function closeRightTags() {
|
||||
tagsViewStore.delRightViews(selectedTag.value).then((res: any) => {
|
||||
if (
|
||||
!res.visitedViews.find((item: any) => item.fullPath === route.fullPath)
|
||||
) {
|
||||
toLastView(res.visitedViews);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeOtherTags() {
|
||||
router.push(selectedTag.value);
|
||||
tagsViewStore.delOtherViews(selectedTag.value).then(() => {
|
||||
moveToCurrentTag();
|
||||
});
|
||||
}
|
||||
|
||||
function closeAllTags() {
|
||||
tagsViewStore.delAllViews().then((res: any) => {
|
||||
toLastView(res.visitedViews);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
import { useAppStore } from "@/framework/store/modules/app";
|
||||
const appStore = useAppStore()
|
||||
function openTagMenu(tag: TagView, e: MouseEvent) {
|
||||
left.value = e.clientX;
|
||||
top.value = e.clientY - 40;
|
||||
tagMenuVisible.value = true;
|
||||
selectedTag.value = tag;
|
||||
}
|
||||
|
||||
function closeTagMenu() {
|
||||
tagMenuVisible.value = false;
|
||||
}
|
||||
|
||||
function handleScroll() {
|
||||
closeTagMenu();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initTags();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tags-container {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
background-color: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
box-shadow: 0 1px 1px var(--el-box-shadow-light);
|
||||
position: relative;
|
||||
|
||||
.tags-item {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
margin: 4px 0 0 5px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background-color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 5px;
|
||||
content: "";
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&-close {
|
||||
border-radius: 100%;
|
||||
// font-size: 16px;
|
||||
padding: 0 4px;
|
||||
transform: scale(2);
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: rgb(0 0 0 / 16%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-menu {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
font-size: 12px;
|
||||
background: var(--el-bg-color-overlay);
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
|
||||
li {
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user