Compare commits
66 Commits
2026-01
...
8054b44e88
| Author | SHA1 | Date | |
|---|---|---|---|
| 8054b44e88 | |||
|
|
5eb5a01b50 | ||
|
|
e77c57f8d0 | ||
|
|
22011188a1 | ||
|
|
c72ba3e5db | ||
|
|
7f1c3e31c0 | ||
|
|
6c70a776a0 | ||
|
|
dc3b3cfc74 | ||
|
|
04c5eb7185 | ||
|
|
d0d62ab0af | ||
|
|
b3d671a93e | ||
|
|
888b8d1bf4 | ||
|
|
ee9cd057b8 | ||
|
|
8bca4191f2 | ||
|
|
69e6a1f93f | ||
|
|
71df1ac4be | ||
|
|
cd2be0f4aa | ||
|
|
855c569535 | ||
| 6a84d28101 | |||
|
|
1a69be62a0 | ||
|
|
02caca969e | ||
|
|
3f1af5e4cc | ||
|
|
88e9812d5f | ||
|
|
83a827ba5b | ||
| 40b1092718 | |||
|
|
83a1128884 | ||
| 1a44a2f9e0 | |||
|
|
5044c88946 | ||
|
|
51a862ed00 | ||
|
|
1ca8e536dd | ||
|
|
2445cfbff3 | ||
|
|
21ac0611cd | ||
|
|
ff841cfa93 | ||
|
|
01cc29c8b2 | ||
|
|
a324f7afcf | ||
|
|
4272f7756e | ||
|
|
070e404bbb | ||
| ed60e2b7f3 | |||
| 7785d4f708 | |||
| 0c64711dd8 | |||
|
|
d85dba8bf8 | ||
|
|
56b8158f4a | ||
| 765507398e | |||
| 9224ea17b8 | |||
| dc08f7d1ac | |||
| 1652b5faf8 | |||
|
|
fae2a7d735 | ||
|
|
bf3a99cbf3 | ||
|
|
2e7c0b7f44 | ||
|
|
98e0f9de02 | ||
|
|
21756e05d4 | ||
|
|
abfdf29a38 | ||
|
|
120892808b | ||
|
|
0f5cb1d3c5 | ||
| dbaa42ff7e | |||
|
|
48472bdb85 | ||
|
|
fafc5f82c4 | ||
| 93ee7e4034 | |||
|
|
7d2ce51510 | ||
|
|
9202da17f1 | ||
|
|
30eddd0572 | ||
|
|
15bd1ac6d2 | ||
|
|
f5c76c1b7a | ||
|
|
b25515b5db | ||
|
|
bfa061fb03 | ||
|
|
15e3d4aec8 |
6
.env.LN
Normal file
6
.env.LN
Normal file
@@ -0,0 +1,6 @@
|
||||
# 辽宁嵌入
|
||||
NODE_ENV = LN
|
||||
VITE_NAME="LN"
|
||||
# 电网一张图 地图图层
|
||||
VITE_NARIMAP=null
|
||||
VITE_NRGISCOMMON=null
|
||||
6
.env.LNqr
Normal file
6
.env.LNqr
Normal file
@@ -0,0 +1,6 @@
|
||||
# 辽宁嵌入
|
||||
NODE_ENV = LNqr
|
||||
VITE_NAME="LNqr"
|
||||
# 电网一张图 地图图层
|
||||
VITE_NARIMAP=null
|
||||
VITE_NRGISCOMMON=null
|
||||
156
README.md
156
README.md
@@ -1,78 +1,78 @@
|
||||
#### 介绍
|
||||
|
||||
```
|
||||
Vue 3 + TypeScript + Vite这个模板可以帮助您开始使用Vue 3和TypeScript在Vite中进行开发。该模板使用了Vue 3的<script setup>单文件组件,请查看script setup文档了解更多信息。
|
||||
```
|
||||
|
||||
#### 安装依赖&运行项目
|
||||
|
||||
> node version:^18.17.0 || >=20.5.0"
|
||||
|
||||
```shell
|
||||
#项目使用pnpm包管理器
|
||||
npm i pnpm -g
|
||||
|
||||
#安装依赖
|
||||
pnpm i
|
||||
|
||||
#运行项目
|
||||
npm run dev
|
||||
|
||||
#冀北现场启动命令 区分是否加载现场电网一张图内网api
|
||||
npm run dev:jibei
|
||||
|
||||
#去除后台所有模块名 如除/xxxx-boot
|
||||
npm run dev:removeMode
|
||||
|
||||
|
||||
|
||||
#因海南和冀北技术监督不同 通过修改文件的方式来区分
|
||||
#海南打包 需要吧pqs目录下supervise_hn 文件夹改成supervise 原文件改成supervise_jb
|
||||
#冀北打包 需要吧pqs目录下supervise_jb 文件夹改成supervise 原文件改成supervise_hn
|
||||
```
|
||||
|
||||
#### 页面编写-示例
|
||||
|
||||
```
|
||||
基础页面写法请查看`src/template`下的readme.md
|
||||
```
|
||||
|
||||
#### 开发规范
|
||||
|
||||
> 初衷:养成合理的习惯,精力留在技术调研、业务开发中。
|
||||
>
|
||||
> 常见点如下描述,更多的规范待前端开发人员有时间后,慢慢丰富。
|
||||
|
||||
- 命名风格:所有的包(文件夹)、文件名以小驼峰的风格命名,比如 xxxAaa,禁止 XxxAaa 或者 xxx-aaa。
|
||||
- 命名语义:禁止中文命名或拼音,英文命名借用下工具,稍微准确一点,不要与实际业务相差太远。
|
||||
- 功能组件创建风格:以**功能名称**命名文件夹,每个功能下以**index.vue**作为该功能的组件入口。正确示例参考:/src/views/auth/menu/index.vue。
|
||||
|
||||

|
||||
|
||||
- todo...:待后续补充。
|
||||
|
||||
#### 开发助手
|
||||
|
||||
##### 1、表格系列
|
||||
|
||||
- 页面表格以及表格页面按钮的弹出等功能参考:/views/pqs/voltageSags/sagGovern/index.vue
|
||||
- 表格中需要替换数据:
|
||||
|
||||
```js
|
||||
// 通过formatter函数返回实际需要返回的值
|
||||
{
|
||||
title: '数据来源', field: 'dataSource', minWidth: '130',
|
||||
formatter: (row: any) => {
|
||||
return row.dataSource == 0 ? '离线导入' : '监测点同步'
|
||||
}
|
||||
}****
|
||||
```
|
||||
|
||||
##### 2、样式系列
|
||||
|
||||
- 获取当前主体的高度:import { mainHeight } from '@/utils/layout'
|
||||
- 弹框内输入框长度设置 1 行 1 个 class="form-one" 1 行 2 个 class="form-two"
|
||||
|
||||
#### 依赖变更记录
|
||||
|
||||
- 2024-04-25 新增 vform3,by 洪圣文,用于页面表单设计保存为 json,命令:pnpm i vform3-builds
|
||||
#### 介绍
|
||||
|
||||
```
|
||||
Vue 3 + TypeScript + Vite这个模板可以帮助您开始使用Vue 3和TypeScript在Vite中进行开发。该模板使用了Vue 3的<script setup>单文件组件,请查看script setup文档了解更多信息。
|
||||
```
|
||||
|
||||
#### 安装依赖&运行项目
|
||||
|
||||
> node version:^18.17.0 || >=20.5.0"
|
||||
|
||||
```shell
|
||||
#项目使用pnpm包管理器
|
||||
npm i pnpm -g
|
||||
|
||||
#安装依赖
|
||||
pnpm i
|
||||
|
||||
#运行项目
|
||||
npm run dev
|
||||
|
||||
#jb现场启动命令 区分是否加载现场电网一张图内网api
|
||||
npm run dev:jibei
|
||||
|
||||
#去除后台所有模块名 如除/xxxx-boot
|
||||
npm run dev:removeMode
|
||||
|
||||
|
||||
|
||||
#因海南和jb技术监督不同 通过修改文件的方式来区分
|
||||
#海南打包 需要吧pqs目录下supervise_hn 文件夹改成supervise 原文件改成supervise_jb
|
||||
#jb打包 需要吧pqs目录下supervise_jb 文件夹改成supervise 原文件改成supervise_hn
|
||||
```
|
||||
|
||||
#### 页面编写-示例
|
||||
|
||||
```
|
||||
基础页面写法请查看`src/template`下的readme.md
|
||||
```
|
||||
|
||||
#### 开发规范
|
||||
|
||||
> 初衷:养成合理的习惯,精力留在技术调研、业务开发中。
|
||||
>
|
||||
> 常见点如下描述,更多的规范待前端开发人员有时间后,慢慢丰富。
|
||||
|
||||
- 命名风格:所有的包(文件夹)、文件名以小驼峰的风格命名,比如 xxxAaa,禁止 XxxAaa 或者 xxx-aaa。
|
||||
- 命名语义:禁止中文命名或拼音,英文命名借用下工具,稍微准确一点,不要与实际业务相差太远。
|
||||
- 功能组件创建风格:以**功能名称**命名文件夹,每个功能下以**index.vue**作为该功能的组件入口。正确示例参考:/src/views/auth/menu/index.vue。
|
||||
|
||||

|
||||
|
||||
- todo...:待后续补充。
|
||||
|
||||
#### 开发助手
|
||||
|
||||
##### 1、表格系列
|
||||
|
||||
- 页面表格以及表格页面按钮的弹出等功能参考:/views/pqs/voltageSags/sagGovern/index.vue
|
||||
- 表格中需要替换数据:
|
||||
|
||||
```js
|
||||
// 通过formatter函数返回实际需要返回的值
|
||||
{
|
||||
title: '数据来源', field: 'dataSource', minWidth: '130',
|
||||
formatter: (row: any) => {
|
||||
return row.dataSource == 0 ? '离线导入' : '监测点同步'
|
||||
}
|
||||
}****
|
||||
```
|
||||
|
||||
##### 2、样式系列
|
||||
|
||||
- 获取当前主体的高度:import { mainHeight } from '@/utils/layout'
|
||||
- 弹框内输入框长度设置 1 行 1 个 class="form-one" 1 行 2 个 class="form-two"
|
||||
|
||||
#### 依赖变更记录
|
||||
|
||||
- 2024-04-25 新增 vform3,by 洪圣文,用于页面表单设计保存为 json,命令:pnpm i vform3-builds
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<script src="/static/luckysheet/plugin.js"></script>
|
||||
<script src="/static/luckysheet/luckysheet.umd.js"></script>
|
||||
|
||||
<!-- 冀北地图 -->
|
||||
<!-- jb地图 -->
|
||||
<!--引入样式文件-->
|
||||
<script src="%VITE_NARIMAP%"></script>
|
||||
<!-- <script src="%VITE_NRGISCOMMON%"></script> -->
|
||||
|
||||
8813
package-lock.json
generated
8813
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
207
package.json
207
package.json
@@ -1,103 +1,108 @@
|
||||
{
|
||||
"name": "canneng-admin",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --mode dev",
|
||||
"dev:jibei": "vite --mode jibei",
|
||||
"dev:hainan": "vite --mode hainan",
|
||||
"dev:qujing": "vite --mode qujing",
|
||||
"dev:removeMode": "vite --mode removeMode",
|
||||
"build": "vite build --mode dev",
|
||||
"build:jibei": "vite build --mode jibei",
|
||||
"build:hainan": "vite build --mode hainan",
|
||||
"build:qujing": "vite build --mode qujing",
|
||||
"build:removeMode": "vite build --mode removeMode",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^7.0.2",
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"@form-create/designer": "^3.1.3",
|
||||
"@form-create/element-ui": "^3.1.24",
|
||||
"@fortawesome/fontawesome-free": "^6.5.1",
|
||||
"@kjgl77/datav-vue3": "^1.7.4",
|
||||
"@vue-office/docx": "^1.6.3",
|
||||
"@vue-office/excel": "^1.7.8",
|
||||
"@vue-office/pdf": "^2.0.2",
|
||||
"@vueuse/core": "^10.7.0",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"@wangeditor/plugin-formula": "^1.0.11",
|
||||
"axios": "^1.6.2",
|
||||
"bpmn-js": "8.9.0",
|
||||
"bpmn-js-properties-panel": "0.46.0",
|
||||
"bpmn-js-token-simulation": "^0.10.0",
|
||||
"bpmn-moddle": "^6.0.0",
|
||||
"camunda-bpmn-moddle": "^7.0.1",
|
||||
"crypto-js": "^4.2.0",
|
||||
"dayjs": "^1.11.10",
|
||||
"diagram-js": "^11.4.1",
|
||||
"diagram-js-minimap": "^2.0.4",
|
||||
"echarts": "^5.4.3",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"echarts4": "npm:echarts@^4.9.0",
|
||||
"element-plus": "^2.9.11",
|
||||
"exceljs": "^4.4.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"grid-layout-plus": "^1.1.0",
|
||||
"html2canvas": "^1.4.1",
|
||||
"jquery": "^3.7.1",
|
||||
"js-pinyin": "^0.2.5",
|
||||
"jsencrypt": "^3.3.2",
|
||||
"katex": "^0.16.11",
|
||||
"less": "^4.2.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"luckyexcel": "^1.0.1",
|
||||
"luckysheet": "^2.1.13",
|
||||
"mathjax": "^3.2.2",
|
||||
"min-dash": "^4.2.1",
|
||||
"mitt": "^3.0.1",
|
||||
"mqtt": "^5.13.3",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.1.7",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"qs": "^6.12.0",
|
||||
"screenfull": "^6.0.2",
|
||||
"splitpanes": "^3.1.5",
|
||||
"steady-xml": "0.1.0",
|
||||
"svg-pan-zoom": "^3.6.2",
|
||||
"use-element-plus-theme": "^0.0.5",
|
||||
"vexip-ui": "^2.3.28",
|
||||
"vue": "^3.3.11",
|
||||
"vue-baidu-map-3x": "^1.0.35",
|
||||
"vue-baidu-map-offline": "^1.0.7",
|
||||
"vue-demi": "^0.14.8",
|
||||
"vue-draggable-resizable": "3.0.0-beta.2",
|
||||
"vue-i18n": "9.10.2",
|
||||
"vue-katex": "^0.5.0",
|
||||
"vue-router": "4",
|
||||
"vue-types": "^5.1.1",
|
||||
"vxe-table": "^4.5.17",
|
||||
"vxe-table-plugin-export-xlsx": "^4.0.1",
|
||||
"web-storage-cache": "^1.1.1",
|
||||
"xe-utils": "^3.5.14",
|
||||
"yarn": "^1.22.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@purge-icons/generated": "^0.9.0",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@types/node": "^20.10.5",
|
||||
"@types/splitpanes": "^2.2.6",
|
||||
"@vitejs/plugin-vue": "^4.5.2",
|
||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||
"sass": "^1.69.5",
|
||||
"typescript": "^5.2.2",
|
||||
"unplugin-auto-import": "^0.16.7",
|
||||
"vite": "^5.0.8",
|
||||
"vite-plugin-mkcert": "^1.17.3",
|
||||
"vue-tsc": "^1.8.25"
|
||||
}
|
||||
"name": "canneng-admin",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --mode dev",
|
||||
"dev:jibei": "vite --mode jibei",
|
||||
"dev:hainan": "vite --mode hainan",
|
||||
"dev:qujing": "vite --mode qujing",
|
||||
"dev:LN": "vite --mode LN",
|
||||
"dev:LNqr": "vite --mode LNqr",
|
||||
"dev:removeMode": "vite --mode removeMode",
|
||||
"build": "vite build --mode dev",
|
||||
"build:jibei": "vite build --mode jibei",
|
||||
"build:hainan": "vite build --mode hainan",
|
||||
"build:qujing": "vite build --mode qujing",
|
||||
"build:LN": "vite build --mode LN",
|
||||
"build:LNqr": "vite build --mode LNqr",
|
||||
"build:removeMode": "vite build --mode removeMode",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^7.0.2",
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"@form-create/designer": "^3.1.3",
|
||||
"@form-create/element-ui": "^3.1.24",
|
||||
"@fortawesome/fontawesome-free": "^6.5.1",
|
||||
"@kjgl77/datav-vue3": "^1.7.4",
|
||||
"@vue-office/docx": "^1.6.3",
|
||||
"@vue-office/excel": "^1.7.8",
|
||||
"@vue-office/pdf": "^2.0.2",
|
||||
"@vueuse/core": "^10.7.0",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"@wangeditor/plugin-formula": "^1.0.11",
|
||||
"axios": "^1.6.2",
|
||||
"bpmn-js": "8.9.0",
|
||||
"bpmn-js-properties-panel": "0.46.0",
|
||||
"bpmn-js-token-simulation": "^0.10.0",
|
||||
"bpmn-moddle": "^6.0.0",
|
||||
"camunda-bpmn-moddle": "^7.0.1",
|
||||
"crypto-js": "^4.2.0",
|
||||
"dayjs": "^1.11.10",
|
||||
"diagram-js": "^11.4.1",
|
||||
"diagram-js-minimap": "^2.0.4",
|
||||
"echarts": "^5.4.3",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"echarts4": "npm:echarts@^4.9.0",
|
||||
"element-plus": "^2.9.11",
|
||||
"exceljs": "^4.4.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"grid-layout-plus": "^1.1.0",
|
||||
"html2canvas": "^1.4.1",
|
||||
"jquery": "^3.7.1",
|
||||
"js-pinyin": "^0.2.5",
|
||||
"jsencrypt": "^3.3.2",
|
||||
"katex": "^0.16.11",
|
||||
"less": "^4.2.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"luckyexcel": "^1.0.1",
|
||||
"luckysheet": "^2.1.13",
|
||||
"mathjax": "^3.2.2",
|
||||
"min-dash": "^4.2.1",
|
||||
"mitt": "^3.0.1",
|
||||
"mqtt": "^5.13.3",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.1.7",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"qs": "^6.12.0",
|
||||
"screenfull": "^6.0.2",
|
||||
"splitpanes": "^3.1.5",
|
||||
"steady-xml": "0.1.0",
|
||||
"svg-pan-zoom": "^3.6.2",
|
||||
"use-element-plus-theme": "^0.0.5",
|
||||
"vexip-ui": "^2.3.28",
|
||||
"vue": "^3.3.11",
|
||||
"vue-baidu-map-3x": "^1.0.35",
|
||||
"vue-baidu-map-offline": "^1.0.7",
|
||||
"vue-demi": "^0.14.8",
|
||||
"vue-draggable-resizable": "3.0.0-beta.2",
|
||||
"vue-i18n": "9.10.2",
|
||||
"vue-katex": "^0.5.0",
|
||||
"vue-router": "4",
|
||||
"vue-types": "^5.1.1",
|
||||
"vxe-pc-ui": "~4.15.19",
|
||||
"vxe-table": "^4.19.22",
|
||||
"vxe-table-plugin-export-xlsx": "^4.0.7",
|
||||
"web-storage-cache": "^1.1.1",
|
||||
"xe-utils": "^3.5.14",
|
||||
"yarn": "^1.22.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@purge-icons/generated": "^0.9.0",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@types/node": "^20.10.5",
|
||||
"@types/splitpanes": "^2.2.6",
|
||||
"@vitejs/plugin-vue": "^4.5.2",
|
||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||
"sass": "^1.69.5",
|
||||
"typescript": "^5.2.2",
|
||||
"unplugin-auto-import": "^0.16.7",
|
||||
"vite": "^5.0.8",
|
||||
"vite-plugin-mkcert": "^1.17.3",
|
||||
"vue-tsc": "^1.8.25"
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
16
src/App.vue
16
src/App.vue
@@ -9,14 +9,20 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
import useSetTheme from '@/utils/setTheme'
|
||||
import { onMounted } from 'vue'
|
||||
useSetTheme()
|
||||
onMounted(async () => {
|
||||
const fetchMqttUrl = async () => {
|
||||
const response = await fetch('/')
|
||||
const WebSocketUrl:any = response.headers.get('X-WebSocket-Url')
|
||||
const WebSocketUrl2:any = response.headers.get('X-WebSocket-Url2')
|
||||
const MqttUrl:any = response.headers.get('X-MqttUrl-Url')
|
||||
localStorage.setItem('WebSocketUrl2', WebSocketUrl2)
|
||||
const WebSocketUrl: any = response.headers.get('X-WebSocket-Url')
|
||||
const WebSocketUrl2: any = response.headers.get('X-WebSocket-Url2')
|
||||
const WebSocketUrl3: any = response.headers.get('X-WebSocket-Url3')
|
||||
const MqttUrl: any = response.headers.get('X-MqttUrl-Url')
|
||||
localStorage.setItem('WebSocketUrl', WebSocketUrl)
|
||||
localStorage.setItem('WebSocketUrl2', WebSocketUrl2)
|
||||
localStorage.setItem('WebSocketUrl3', WebSocketUrl3)
|
||||
localStorage.setItem('MqttUrl', MqttUrl)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchMqttUrl()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import createAxios from '@/utils/request'
|
||||
|
||||
|
||||
// 密码规则修改
|
||||
export function ruleUpdate(data) {
|
||||
return createAxios({
|
||||
@@ -24,3 +25,77 @@ export function unlockRoot(data) {
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//根据客户端名查询信息
|
||||
export function getClientInfoByPath() {
|
||||
|
||||
return createAxios({
|
||||
url: '/user-boot/authClient/getAuthClientByName/njcn',
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
//客户端会话配置更新
|
||||
export function updateClientSessionConfig(data) {
|
||||
return createAxios({
|
||||
url: '/user-boot/authClient/sessionConfigUpdate',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//获取用户配置
|
||||
export function getUserConfig() {
|
||||
return createAxios({
|
||||
url: '/user-boot/password/getUserStrategyList',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
//查询系统列表
|
||||
export function getSystemList() {
|
||||
return createAxios({
|
||||
url: '/system-boot/config/getSysConfigData',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//激活系统配置
|
||||
export function activeSystemConfig(data) {
|
||||
return createAxios({
|
||||
url: '/system-boot/config/updateSysConfig',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//删除系统配置
|
||||
export function deleteSystemConfig( data) {
|
||||
return createAxios({
|
||||
url: '/system-boot/config/removeSysConfigById',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
//新增系统配置
|
||||
export function addSystemConfig(data) {
|
||||
return createAxios({
|
||||
url: '/system-boot/config/addSysConfig',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//修改系统配置
|
||||
export function updateSystemConfig(data) {
|
||||
return createAxios({
|
||||
url: '/system-boot/config/updateSysConfig',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import request from '@/config/axios'
|
||||
import { requestData, requestDownload } from '@/utils/request'
|
||||
|
||||
// BPM 流程表达式 VO
|
||||
export interface ProcessExpressionVO {
|
||||
@@ -12,31 +12,36 @@ export interface ProcessExpressionVO {
|
||||
export const ProcessExpressionApi = {
|
||||
// 查询BPM 流程表达式分页
|
||||
getProcessExpressionPage: async (params: any) => {
|
||||
return await request.get({ url: `/bpm/process-expression/page`, params })
|
||||
return await requestData({ url: '/bpm/process-expression/page', method: 'GET', params })
|
||||
},
|
||||
|
||||
// 查询BPM 流程表达式详情
|
||||
getProcessExpression: async (id: number) => {
|
||||
return await request.get({ url: `/bpm/process-expression/get?id=` + id })
|
||||
return await requestData({ url: '/bpm/process-expression/get?id=' + id, method: 'GET' })
|
||||
},
|
||||
|
||||
// 新增BPM 流程表达式
|
||||
createProcessExpression: async (data: ProcessExpressionVO) => {
|
||||
return await request.post({ url: `/bpm/process-expression/create`, data })
|
||||
return await requestData({ url: '/bpm/process-expression/create', method: 'POST', data })
|
||||
},
|
||||
|
||||
// 修改BPM 流程表达式
|
||||
updateProcessExpression: async (data: ProcessExpressionVO) => {
|
||||
return await request.put({ url: `/bpm/process-expression/update`, data })
|
||||
return await requestData({ url: '/bpm/process-expression/update', method: 'PUT', data })
|
||||
},
|
||||
|
||||
// 删除BPM 流程表达式
|
||||
deleteProcessExpression: async (id: number) => {
|
||||
return await request.delete({ url: `/bpm/process-expression/delete?id=` + id })
|
||||
return await requestData({ url: '/bpm/process-expression/delete?id=' + id, method: 'DELETE' })
|
||||
},
|
||||
|
||||
// 导出BPM 流程表达式 Excel
|
||||
exportProcessExpression: async (params) => {
|
||||
return await request.download({ url: `/bpm/process-expression/export-excel`, params })
|
||||
return await requestDownload({
|
||||
url: '/bpm/process-expression/export-excel',
|
||||
method: 'GET',
|
||||
params,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import request from '@/config/axios'
|
||||
import { requestData } from '@/utils/request'
|
||||
|
||||
// BPM 流程监听器 VO
|
||||
export interface ProcessListenerVO {
|
||||
@@ -15,26 +15,26 @@ export interface ProcessListenerVO {
|
||||
export const ProcessListenerApi = {
|
||||
// 查询流程监听器分页
|
||||
getProcessListenerPage: async (params: any) => {
|
||||
return await request.get({ url: `/bpm/process-listener/page`, params })
|
||||
return await requestData({ url: '/bpm/process-listener/page', method: 'GET', params })
|
||||
},
|
||||
|
||||
// 查询流程监听器详情
|
||||
getProcessListener: async (id: number) => {
|
||||
return await request.get({ url: `/bpm/process-listener/get?id=` + id })
|
||||
return await requestData({ url: '/bpm/process-listener/get?id=' + id, method: 'GET' })
|
||||
},
|
||||
|
||||
// 新增流程监听器
|
||||
createProcessListener: async (data: ProcessListenerVO) => {
|
||||
return await request.post({ url: `/bpm/process-listener/create`, data })
|
||||
return await requestData({ url: '/bpm/process-listener/create', method: 'POST', data })
|
||||
},
|
||||
|
||||
// 修改流程监听器
|
||||
updateProcessListener: async (data: ProcessListenerVO) => {
|
||||
return await request.put({ url: `/bpm/process-listener/update`, data })
|
||||
return await requestData({ url: '/bpm/process-listener/update', method: 'PUT', data })
|
||||
},
|
||||
|
||||
// 删除流程监听器
|
||||
deleteProcessListener: async (id: number) => {
|
||||
return await request.delete({ url: `/bpm/process-listener/delete?id=` + id })
|
||||
return await requestData({ url: '/bpm/process-listener/delete?id=' + id, method: 'DELETE' })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,47 +1,41 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export type UserGroupVO = {
|
||||
id: number
|
||||
name: string
|
||||
description: string
|
||||
userIds: number[]
|
||||
status: number
|
||||
remark: string
|
||||
createTime: string
|
||||
}
|
||||
|
||||
// 创建用户组
|
||||
export const createUserGroup = async (data: UserGroupVO) => {
|
||||
return await request.post({
|
||||
url: '/bpm/user-group/create',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新用户组
|
||||
export const updateUserGroup = async (data: UserGroupVO) => {
|
||||
return await request.put({
|
||||
url: '/bpm/user-group/update',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除用户组
|
||||
export const deleteUserGroup = async (id: number) => {
|
||||
return await request.delete({ url: '/bpm/user-group/delete?id=' + id })
|
||||
}
|
||||
|
||||
// 获得用户组
|
||||
export const getUserGroup = async (id: number) => {
|
||||
return await request.get({ url: '/bpm/user-group/get?id=' + id })
|
||||
}
|
||||
|
||||
// 获得用户组分页
|
||||
export const getUserGroupPage = async (params) => {
|
||||
return await request.get({ url: '/bpm/user-group/page', params })
|
||||
}
|
||||
|
||||
// 获取用户组精简信息列表
|
||||
export const getUserGroupSimpleList = async (): Promise<UserGroupVO[]> => {
|
||||
return await request.get({ url: '/bpm/user-group/simple-list' })
|
||||
}
|
||||
import { requestData } from '@/utils/request'
|
||||
|
||||
export type UserGroupVO = {
|
||||
id: number
|
||||
name: string
|
||||
description: string
|
||||
userIds: number[]
|
||||
status: number
|
||||
remark: string
|
||||
createTime: string
|
||||
}
|
||||
|
||||
// 创建用户组
|
||||
export const createUserGroup = async (data: UserGroupVO) => {
|
||||
return await requestData({ url: '/bpm/user-group/create', method: 'POST', data })
|
||||
}
|
||||
|
||||
// 更新用户组
|
||||
export const updateUserGroup = async (data: UserGroupVO) => {
|
||||
return await requestData({ url: '/bpm/user-group/update', method: 'PUT', data })
|
||||
}
|
||||
|
||||
// 删除用户组
|
||||
export const deleteUserGroup = async (id: number) => {
|
||||
return await requestData({ url: '/bpm/user-group/delete?id=' + id, method: 'DELETE' })
|
||||
}
|
||||
|
||||
// 获得用户组
|
||||
export const getUserGroup = async (id: number) => {
|
||||
return await requestData({ url: '/bpm/user-group/get?id=' + id, method: 'GET' })
|
||||
}
|
||||
|
||||
// 获得用户组分页
|
||||
export const getUserGroupPage = async (params) => {
|
||||
return await requestData({ url: '/bpm/user-group/page', method: 'GET', params })
|
||||
}
|
||||
|
||||
// 获取用户组精简信息列表
|
||||
export const getUserGroupSimpleList = async (): Promise<UserGroupVO[]> => {
|
||||
return await requestData({ url: '/bpm/user-group/simple-list', method: 'GET' })
|
||||
}
|
||||
|
||||
@@ -129,7 +129,7 @@ export function queryAllByType(params: any) {
|
||||
//获取用户
|
||||
export function selectUserList(data: any) {
|
||||
return createAxios({
|
||||
url: '/supervision-boot/userReport/selectUserList',
|
||||
url: '/device-boot/userReport/selectUserList',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取区域中断终端
|
||||
export function getAreaOffDev(data) {
|
||||
export function getAreaOffDev(data:any) {
|
||||
return request({
|
||||
url: '/device-boot/device/getAreaOffDev',
|
||||
method: 'post',
|
||||
@@ -9,10 +9,28 @@ export function getAreaOffDev(data) {
|
||||
})
|
||||
}
|
||||
// 获取区域中断终端
|
||||
export function getYwZtSubstation(data) {
|
||||
export function getYwZtSubstation(data:any) {
|
||||
return request({
|
||||
url: '/device-boot/ywZt/getYwZtSubstation',
|
||||
method: 'GET',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
//终端周期检测
|
||||
export function terminalCheckPage(data:any) {
|
||||
return request({
|
||||
url: '/device-boot/alarm/terminalCheckPage',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function userCheckUpload(data:any) {
|
||||
return request({
|
||||
url: '/device-boot/userReport/userCheckUpload',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
@@ -45,3 +45,13 @@ export const getLineOverLimitData = (id: string) => {
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
//导出数据总览
|
||||
export function dataVerifyExcel(params: any) {
|
||||
return request({
|
||||
url: '/device-boot/dataVerify/dataVerifyExcel',
|
||||
method: 'get',
|
||||
params,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
@@ -31,4 +31,13 @@ export function getDevTypeList() {
|
||||
method: 'post',
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export const getDeviceTypeList = (params: any) => {
|
||||
return createAxios({
|
||||
url: '/device-boot/devType/pageDevTypeList',
|
||||
method: 'POST',
|
||||
data: params
|
||||
})
|
||||
}
|
||||
@@ -4,6 +4,10 @@ import request from '@/utils/request'
|
||||
export function getSubLineGiveAnAlarm(data: any) {
|
||||
return request({ url: '/harmonic-boot/gridDiagram/getSubLineGiveAnAlarm', method: 'post', data })
|
||||
}
|
||||
|
||||
export function getAreaObjAlarm(data: any) {
|
||||
return request({ url: '/harmonic-boot/gridDiagram/getAreaObjAlarm', method: 'post', data })
|
||||
}
|
||||
// 变电站详细列表
|
||||
export function getPollutionAlarmPageData(data: any) {
|
||||
return request({ url: '/harmonic-boot/gridDiagram/getPollutionAlarmPageData', method: 'post', data })
|
||||
@@ -182,3 +186,7 @@ export function limitTableDetail(data: any) {
|
||||
export function downPollutionSensitiveUser(data: any) {
|
||||
return request({ url: '/harmonic-boot/PollutionSubstation/downPollutionSensitiveUser', method: 'post', data })
|
||||
}
|
||||
//干扰源类型统计
|
||||
export function loadTypeVOList(data: any) {
|
||||
return request({ url: '/device-boot/gridDiagram/loadTypeVOList', method: 'post', data })
|
||||
}
|
||||
|
||||
103
src/api/device-boot/sensitiveLoadMange.ts
Normal file
103
src/api/device-boot/sensitiveLoadMange.ts
Normal file
@@ -0,0 +1,103 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 新增敏感用户
|
||||
export function saveUser(data: any) {
|
||||
return request({
|
||||
url: '/device-boot/pqSensitiveUser/save',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改敏感用户
|
||||
export function updateUser(data: any) {
|
||||
return request({
|
||||
url: '/device-boot/pqSensitiveUser/update',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除敏感用户
|
||||
export function deleteUser(data: any) {
|
||||
return request({
|
||||
url: '/device-boot/pqSensitiveUser/delete',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 干扰源接入功能删除流程
|
||||
*/
|
||||
export const deleteUserReport = (data: any) => {
|
||||
return request({
|
||||
url: '/device-boot/userReport/deleteUserReport',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 提交表单数据
|
||||
*/
|
||||
export const submitFormData = (data: any) => {
|
||||
return request({
|
||||
url: '/device-boot/userReport/add',
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 根据id获取用户档案录入的详细数据
|
||||
export const getById = (data: any) => {
|
||||
return request({
|
||||
url: '/device-boot/userReport/getById',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交表单数据
|
||||
*/
|
||||
export const addEditor = (data: any) => {
|
||||
return request({
|
||||
url: '/device-boot/userReportRenewal/addEditor',
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 根据id获取用户档案录入的详细数据
|
||||
export const getByDeptDevLine = (params: any) => {
|
||||
return request({
|
||||
url: '/device-boot/line/getByDeptDevLine',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 根据id获取用户档案录入的详细数据
|
||||
*/
|
||||
export const getUserReportUpdateById = (id: any) => {
|
||||
return request({
|
||||
url: '/device-boot/userReportRenewal/getUserReportUpdateById?businessId='+id,
|
||||
method: 'POST',
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
// 根据id获取用户档案录入的详细数据
|
||||
export const getUserReportById = (id: any) => {
|
||||
return request({
|
||||
url: '/device-boot/userReport/getUserReportById?id='+id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 根据id查询文件信息集合
|
||||
export const getFileById = (params: any) => {
|
||||
return request({
|
||||
url: '/device-boot/fileUrl/getFileById',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
@@ -2,13 +2,35 @@ import createAxios from '@/utils/request'
|
||||
import { genFileId, ElMessage, ElNotification } from 'element-plus'
|
||||
|
||||
//事件报告
|
||||
// export function getEventReport(data) {
|
||||
// return createAxios({
|
||||
// url: '/event-boot/report/getEventReport',
|
||||
// method: 'post',
|
||||
// data
|
||||
// })
|
||||
// }
|
||||
|
||||
export function getEventReport(data) {
|
||||
return createAxios({
|
||||
url: '/event-boot/report/getEventReport',
|
||||
url: '/event-boot/report/createEventReport',
|
||||
method: 'post',
|
||||
data
|
||||
data,
|
||||
responseType: 'blob'
|
||||
}).then(async res => {
|
||||
let load: any = await readJsonBlob(res)
|
||||
if (load.code) {
|
||||
if (load.data.code == 'A0011') {
|
||||
ElMessage.warning('下载失败!')
|
||||
} else {
|
||||
ElMessage.warning(load.data.message)
|
||||
}
|
||||
} else {
|
||||
return res
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 生成报告
|
||||
export function getAreaReport(data) {
|
||||
return createAxios({
|
||||
|
||||
@@ -1,106 +1,114 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getTypeIdData(data: any) {
|
||||
return request({
|
||||
url: '/system-boot/dictData/getTypeIdData',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getOnlineRateData2(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/onlineRateData/getOnlineRateData',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getAreaDept() {
|
||||
return request({
|
||||
url: '/user-boot/dept/loginDeptTree',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
export function getOnlineRateDataCensus(data:any) {
|
||||
return request({
|
||||
url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function IntegrityIcon(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/integrity/getIntegrityIcon',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getDeptIdAreaTree() {
|
||||
return request({
|
||||
url: '/system-boot/area/getDeptIdAreaTree',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
export function getOnlineRateData(data:any) {
|
||||
return request({
|
||||
url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getSubstationInfoById(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/PollutionSubstation/getSubstationInfoById',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getLineInfoById(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/PollutionSubstation/getLineInfoById',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getLineRank(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/PollutionSubstation/getLineRank',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function deptInfo(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/detailAnalysis/deptInfo',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getXbLineInfoById(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/detailAnalysis/getXbLineInfoById',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getSubInfoById(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/detailAnalysis/getSubInfoById',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getXbLineRank(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/detailAnalysis/getXbLineRank',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 数据补招
|
||||
export function FullRecall(data:any) {
|
||||
return request({
|
||||
url: '/data-processing-boot/data/FullRecall',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getTypeIdData(data: any) {
|
||||
return request({
|
||||
url: '/system-boot/dictData/getTypeIdData',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getOnlineRateData2(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/onlineRateData/getOnlineRateData',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getAreaDept() {
|
||||
return request({
|
||||
url: '/user-boot/dept/loginDeptTree',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
// 承载能力评估去除前缀
|
||||
export function getAreaDeptRemoveMode(params) {
|
||||
return request({
|
||||
url: '/user-boot/dept/loginDeptTree',
|
||||
method: 'GET',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
export function getOnlineRateDataCensus(data:any) {
|
||||
return request({
|
||||
url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function IntegrityIcon(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/integrity/getIntegrityIcon',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getDeptIdAreaTree() {
|
||||
return request({
|
||||
url: '/system-boot/area/getDeptIdAreaTree',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
export function getOnlineRateData(data:any) {
|
||||
return request({
|
||||
url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getSubstationInfoById(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/PollutionSubstation/getSubstationInfoById',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getLineInfoById(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/PollutionSubstation/getLineInfoById',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getLineRank(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/PollutionSubstation/getLineRank',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function deptInfo(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/detailAnalysis/deptInfo',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getXbLineInfoById(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/detailAnalysis/getXbLineInfoById',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getSubInfoById(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/detailAnalysis/getSubInfoById',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getXbLineRank(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/detailAnalysis/getXbLineRank',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 数据补招
|
||||
export function FullRecall(data:any) {
|
||||
return request({
|
||||
url: '/data-processing-boot/data/FullRecall',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
42
src/api/system-boot/MonitoringPoint.ts
Normal file
42
src/api/system-boot/MonitoringPoint.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
//查询所有模板
|
||||
export function getList(data: any) {
|
||||
return request({
|
||||
url: "/system-boot/EventTemplate/getList",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//字典树
|
||||
export function getDictTree(data: any) {
|
||||
return request({
|
||||
url: "/system-boot/reportDict/DictTree",
|
||||
method: "post",
|
||||
params:data
|
||||
});
|
||||
}
|
||||
//新增模板
|
||||
export function addData(data: any) {
|
||||
return request({
|
||||
url: "/system-boot/EventTemplate/add",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//修改模板
|
||||
export function updateData(data: any) {
|
||||
return request({
|
||||
url: "/system-boot/EventTemplate/update",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
//删除模板
|
||||
export function deleteData(data: any) {
|
||||
return request({
|
||||
url: "/system-boot/EventTemplate/delete",
|
||||
method: "post",
|
||||
data,
|
||||
});
|
||||
}
|
||||
43
src/api/system-boot/ReportTemplate.ts
Normal file
43
src/api/system-boot/ReportTemplate.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
//获取字典树数据
|
||||
export function getDictTree(data) {
|
||||
return request({
|
||||
url: "/system-boot/reportDict/DictTree",
|
||||
method: "post",
|
||||
params:data
|
||||
});
|
||||
}
|
||||
|
||||
//查询字典列表
|
||||
export function getReportDictList(data: any) {
|
||||
return request({
|
||||
url: "/system-boot/reportDict/getReportDictList",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
}
|
||||
//新增字典表
|
||||
export function addDict(data: any) {
|
||||
return request({
|
||||
url: "/system-boot/reportDict/addDict",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
}
|
||||
//更新字典表
|
||||
export function updateDict(data: any) {
|
||||
return request({
|
||||
url: "/system-boot/reportDict/updateDict",
|
||||
method: "put",
|
||||
data
|
||||
});
|
||||
}
|
||||
//删除字典表
|
||||
export function deleteDict(data: any) {
|
||||
return request({
|
||||
url: "/system-boot/reportDict/deleteDict",
|
||||
method: "delete",
|
||||
params:data
|
||||
});
|
||||
}
|
||||
37
src/api/system-boot/area.ts
Normal file
37
src/api/system-boot/area.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import request from '@/utils/request'
|
||||
//区域树形表格接口
|
||||
export function areaTree(data: any) {
|
||||
return request({
|
||||
url: '/system-boot/area/areaTree',
|
||||
method: 'post',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
export function areaAdd(data: any) {
|
||||
return request({
|
||||
url: '/system-boot/area/add',
|
||||
method: 'post',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
export function areaDelete(data: any) {
|
||||
return request({
|
||||
url: '/system-boot/area/delete',
|
||||
method: 'post',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
export function update(data: any) {
|
||||
return request({
|
||||
url: '/system-boot/area/update',
|
||||
method: 'post',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
export function selectPid(data: any) {
|
||||
return request({
|
||||
url: '/system-boot/area/selectPid',
|
||||
method: 'post',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
@@ -1,49 +1,49 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export type DictDataVO = {
|
||||
id: number | undefined
|
||||
sort: number | undefined
|
||||
label: string
|
||||
value: string
|
||||
dictType: string
|
||||
status: number
|
||||
colorType: string
|
||||
cssClass: string
|
||||
remark: string
|
||||
createTime: Date
|
||||
}
|
||||
|
||||
// 查询字典数据(精简)列表
|
||||
export const getSimpleDictDataList = () => {
|
||||
return request.get({ url: '/system/dict-data/simple-list' })
|
||||
}
|
||||
|
||||
// 查询字典数据列表
|
||||
export const getDictDataPage = (params: PageParam) => {
|
||||
return request.get({ url: '/system/dict-data/page', params })
|
||||
}
|
||||
|
||||
// 查询字典数据详情
|
||||
export const getDictData = (id: number) => {
|
||||
return request.get({ url: '/system/dict-data/get?id=' + id })
|
||||
}
|
||||
|
||||
// 新增字典数据
|
||||
export const createDictData = (data: DictDataVO) => {
|
||||
return request.post({ url: '/system/dict-data/create', data })
|
||||
}
|
||||
|
||||
// 修改字典数据
|
||||
export const updateDictData = (data: DictDataVO) => {
|
||||
return request.put({ url: '/system/dict-data/update', data })
|
||||
}
|
||||
|
||||
// 删除字典数据
|
||||
export const deleteDictData = (id: number) => {
|
||||
return request.delete({ url: '/system/dict-data/delete?id=' + id })
|
||||
}
|
||||
|
||||
// 导出字典类型数据
|
||||
export const exportDictData = (params) => {
|
||||
return request.download({ url: '/system/dict-data/export', params })
|
||||
}
|
||||
import { requestData, requestDownload } from '@/utils/request'
|
||||
|
||||
export type DictDataVO = {
|
||||
id: number | undefined
|
||||
sort: number | undefined
|
||||
label: string
|
||||
value: string
|
||||
dictType: string
|
||||
status: number
|
||||
colorType: string
|
||||
cssClass: string
|
||||
remark: string
|
||||
createTime: Date
|
||||
}
|
||||
|
||||
// 查询字典数据(精简)列表
|
||||
export const getSimpleDictDataList = () => {
|
||||
return requestData({ url: '/system/dict-data/simple-list', method: 'GET' })
|
||||
}
|
||||
|
||||
// 查询字典数据列表
|
||||
export const getDictDataPage = (params: PageParam) => {
|
||||
return requestData({ url: '/system/dict-data/page', method: 'GET', params })
|
||||
}
|
||||
|
||||
// 查询字典数据详情
|
||||
export const getDictData = (id: number) => {
|
||||
return requestData({ url: '/system/dict-data/get?id=' + id, method: 'GET' })
|
||||
}
|
||||
|
||||
// 新增字典数据
|
||||
export const createDictData = (data: DictDataVO) => {
|
||||
return requestData({ url: '/system/dict-data/create', method: 'POST', data })
|
||||
}
|
||||
|
||||
// 修改字典数据
|
||||
export const updateDictData = (data: DictDataVO) => {
|
||||
return requestData({ url: '/system/dict-data/update', method: 'PUT', data })
|
||||
}
|
||||
|
||||
// 删除字典数据
|
||||
export const deleteDictData = (id: number) => {
|
||||
return requestData({ url: '/system/dict-data/delete?id=' + id, method: 'DELETE' })
|
||||
}
|
||||
|
||||
// 导出字典类型数据
|
||||
export const exportDictData = (params) => {
|
||||
return requestDownload({ url: '/system/dict-data/export', method: 'GET', params, responseType: 'blob' })
|
||||
}
|
||||
|
||||
@@ -1,44 +1,45 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export type DictTypeVO = {
|
||||
id: number | undefined
|
||||
name: string
|
||||
type: string
|
||||
status: number
|
||||
remark: string
|
||||
createTime: Date
|
||||
}
|
||||
|
||||
// 查询字典(精简)列表
|
||||
export const getSimpleDictTypeList = () => {
|
||||
return request.get({ url: '/system/dict-type/list-all-simple' })
|
||||
}
|
||||
|
||||
// 查询字典列表
|
||||
export const getDictTypePage = (params: PageParam) => {
|
||||
return request.get({ url: '/system/dict-type/page', params })
|
||||
}
|
||||
|
||||
// 查询字典详情
|
||||
export const getDictType = (id: number) => {
|
||||
return request.get({ url: '/system/dict-type/get?id=' + id })
|
||||
}
|
||||
|
||||
// 新增字典
|
||||
export const createDictType = (data: DictTypeVO) => {
|
||||
return request.post({ url: '/system/dict-type/create', data })
|
||||
}
|
||||
|
||||
// 修改字典
|
||||
export const updateDictType = (data: DictTypeVO) => {
|
||||
return request.put({ url: '/system/dict-type/update', data })
|
||||
}
|
||||
|
||||
// 删除字典
|
||||
export const deleteDictType = (id: number) => {
|
||||
return request.delete({ url: '/system/dict-type/delete?id=' + id })
|
||||
}
|
||||
// 导出字典类型
|
||||
export const exportDictType = (params) => {
|
||||
return request.download({ url: '/system/dict-type/export', params })
|
||||
}
|
||||
import { requestData, requestDownload } from '@/utils/request'
|
||||
|
||||
export type DictTypeVO = {
|
||||
id: number | undefined
|
||||
name: string
|
||||
type: string
|
||||
status: number
|
||||
remark: string
|
||||
createTime: Date
|
||||
}
|
||||
|
||||
// 查询字典(精简)列表
|
||||
export const getSimpleDictTypeList = () => {
|
||||
return requestData({ url: '/system/dict-type/list-all-simple', method: 'GET' })
|
||||
}
|
||||
|
||||
// 查询字典列表
|
||||
export const getDictTypePage = (params: PageParam) => {
|
||||
return requestData({ url: '/system/dict-type/page', method: 'GET', params })
|
||||
}
|
||||
|
||||
// 查询字典详情
|
||||
export const getDictType = (id: number) => {
|
||||
return requestData({ url: '/system/dict-type/get?id=' + id, method: 'GET' })
|
||||
}
|
||||
|
||||
// 新增字典
|
||||
export const createDictType = (data: DictTypeVO) => {
|
||||
return requestData({ url: '/system/dict-type/create', method: 'POST', data })
|
||||
}
|
||||
|
||||
// 修改字典
|
||||
export const updateDictType = (data: DictTypeVO) => {
|
||||
return requestData({ url: '/system/dict-type/update', method: 'PUT', data })
|
||||
}
|
||||
|
||||
// 删除字典
|
||||
export const deleteDictType = (id: number) => {
|
||||
return requestData({ url: '/system/dict-type/delete?id=' + id, method: 'DELETE' })
|
||||
}
|
||||
|
||||
// 导出字典类型
|
||||
export const exportDictType = (params) => {
|
||||
return requestDownload({ url: '/system/dict-type/export', method: 'GET', params, responseType: 'blob' })
|
||||
}
|
||||
|
||||
@@ -1,49 +1,50 @@
|
||||
import request from '@/config/axios'
|
||||
import qs from 'qs'
|
||||
|
||||
export interface NotifyMessageVO {
|
||||
id: number
|
||||
userId: number
|
||||
userType: number
|
||||
templateId: number
|
||||
templateCode: string
|
||||
templateNickname: string
|
||||
templateContent: string
|
||||
templateType: number
|
||||
templateParams: string
|
||||
readStatus: boolean
|
||||
readTime: Date
|
||||
createTime: Date
|
||||
}
|
||||
|
||||
// 查询站内信消息列表
|
||||
export const getNotifyMessagePage = async (params: PageParam) => {
|
||||
return await request.get({ url: '/system/notify-message/page', params })
|
||||
}
|
||||
|
||||
// 获得我的站内信分页
|
||||
export const getMyNotifyMessagePage = async (params: PageParam) => {
|
||||
return await request.get({ url: '/system/notify-message/my-page', params })
|
||||
}
|
||||
|
||||
// 批量标记已读
|
||||
export const updateNotifyMessageRead = async (ids) => {
|
||||
return await request.put({
|
||||
url: '/system/notify-message/update-read?' + qs.stringify({ ids: ids }, { indices: false })
|
||||
})
|
||||
}
|
||||
|
||||
// 标记所有站内信为已读
|
||||
export const updateAllNotifyMessageRead = async () => {
|
||||
return await request.put({ url: '/system/notify-message/update-all-read' })
|
||||
}
|
||||
|
||||
// 获取当前用户的最新站内信列表
|
||||
export const getUnreadNotifyMessageList = async () => {
|
||||
return await request.get({ url: '/system/notify-message/get-unread-list' })
|
||||
}
|
||||
|
||||
// 获得当前用户的未读站内信数量
|
||||
export const getUnreadNotifyMessageCount = async () => {
|
||||
return await request.get({ url: '/system/notify-message/get-unread-count' })
|
||||
}
|
||||
import { requestData } from '@/utils/request'
|
||||
import qs from 'qs'
|
||||
|
||||
export interface NotifyMessageVO {
|
||||
id: number
|
||||
userId: number
|
||||
userType: number
|
||||
templateId: number
|
||||
templateCode: string
|
||||
templateNickname: string
|
||||
templateContent: string
|
||||
templateType: number
|
||||
templateParams: string
|
||||
readStatus: boolean
|
||||
readTime: Date
|
||||
createTime: Date
|
||||
}
|
||||
|
||||
// 查询站内信消息列表
|
||||
export const getNotifyMessagePage = async (params: any) => {
|
||||
return await requestData({ url: '/system/notify-message/page', method: 'GET', params })
|
||||
}
|
||||
|
||||
// 获得我的站内信分页
|
||||
export const getMyNotifyMessagePage = async (params: any) => {
|
||||
return await requestData({ url: '/system/notify-message/my-page', method: 'GET', params })
|
||||
}
|
||||
|
||||
// 批量标记已读
|
||||
export const updateNotifyMessageRead = async (ids: any) => {
|
||||
return await requestData({
|
||||
url: '/system/notify-message/update-read?' + qs.stringify({ ids: ids }, { indices: false }),
|
||||
method: 'PUT'
|
||||
})
|
||||
}
|
||||
|
||||
// 标记所有站内信为已读
|
||||
export const updateAllNotifyMessageRead = async () => {
|
||||
return await requestData({ url: '/system/notify-message/update-all-read', method: 'PUT' })
|
||||
}
|
||||
|
||||
// 获取当前用户的最新站内信列表
|
||||
export const getUnreadNotifyMessageList = async () => {
|
||||
return await requestData({ url: '/system/notify-message/get-unread-list', method: 'GET' })
|
||||
}
|
||||
|
||||
// 获得当前用户的未读站内信数量
|
||||
export const getUnreadNotifyMessageCount = async () => {
|
||||
return await requestData({ url: '/system/notify-message/get-unread-count', method: 'GET' })
|
||||
}
|
||||
|
||||
@@ -1,49 +1,49 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface NotifyTemplateVO {
|
||||
id?: number
|
||||
name: string
|
||||
nickname: string
|
||||
code: string
|
||||
content: string
|
||||
type?: number
|
||||
params: string
|
||||
status: number
|
||||
remark: string
|
||||
}
|
||||
|
||||
export interface NotifySendReqVO {
|
||||
userId: number | null
|
||||
templateCode: string
|
||||
templateParams: Map<String, Object>
|
||||
}
|
||||
|
||||
// 查询站内信模板列表
|
||||
export const getNotifyTemplatePage = async (params: PageParam) => {
|
||||
return await request.get({ url: '/system/notify-template/page', params })
|
||||
}
|
||||
|
||||
// 查询站内信模板详情
|
||||
export const getNotifyTemplate = async (id: number) => {
|
||||
return await request.get({ url: '/system/notify-template/get?id=' + id })
|
||||
}
|
||||
|
||||
// 新增站内信模板
|
||||
export const createNotifyTemplate = async (data: NotifyTemplateVO) => {
|
||||
return await request.post({ url: '/system/notify-template/create', data })
|
||||
}
|
||||
|
||||
// 修改站内信模板
|
||||
export const updateNotifyTemplate = async (data: NotifyTemplateVO) => {
|
||||
return await request.put({ url: '/system/notify-template/update', data })
|
||||
}
|
||||
|
||||
// 删除站内信模板
|
||||
export const deleteNotifyTemplate = async (id: number) => {
|
||||
return await request.delete({ url: '/system/notify-template/delete?id=' + id })
|
||||
}
|
||||
|
||||
// 发送站内信
|
||||
export const sendNotify = (data: NotifySendReqVO) => {
|
||||
return request.post({ url: '/system/notify-template/send-notify', data })
|
||||
}
|
||||
import { requestData } from '@/utils/request'
|
||||
|
||||
export interface NotifyTemplateVO {
|
||||
id?: number
|
||||
name: string
|
||||
nickname: string
|
||||
code: string
|
||||
content: string
|
||||
type?: number
|
||||
params: string
|
||||
status: number
|
||||
remark: string
|
||||
}
|
||||
|
||||
export interface NotifySendReqVO {
|
||||
userId: number | null
|
||||
templateCode: string
|
||||
templateParams: Map<String, Object>
|
||||
}
|
||||
|
||||
// 查询站内信模板列表
|
||||
export const getNotifyTemplatePage = async (params: PageParam) => {
|
||||
return await requestData({ url: '/system/notify-template/page', method: 'GET', params })
|
||||
}
|
||||
|
||||
// 查询站内信模板详情
|
||||
export const getNotifyTemplate = async (id: number) => {
|
||||
return await requestData({ url: '/system/notify-template/get?id=' + id, method: 'GET' })
|
||||
}
|
||||
|
||||
// 新增站内信模板
|
||||
export const createNotifyTemplate = async (data: NotifyTemplateVO) => {
|
||||
return await requestData({ url: '/system/notify-template/create', method: 'POST', data })
|
||||
}
|
||||
|
||||
// 修改站内信模板
|
||||
export const updateNotifyTemplate = async (data: NotifyTemplateVO) => {
|
||||
return await requestData({ url: '/system/notify-template/update', method: 'PUT', data })
|
||||
}
|
||||
|
||||
// 删除站内信模板
|
||||
export const deleteNotifyTemplate = async (id: number) => {
|
||||
return await requestData({ url: '/system/notify-template/delete?id=' + id, method: 'DELETE' })
|
||||
}
|
||||
|
||||
// 发送站内信
|
||||
export const sendNotify = (data: NotifySendReqVO) => {
|
||||
return requestData({ url: '/system/notify-template/send-notify', method: 'POST', data })
|
||||
}
|
||||
|
||||
@@ -1,215 +1,250 @@
|
||||
import request from '@/utils/request'
|
||||
import { LoginData } from '@/api/types'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import { sm3Digest } from '@/assets/commjs/sm3.js'
|
||||
import { sm2, encrypt } from '@/assets/commjs/sm2.js'
|
||||
|
||||
// 获取公钥
|
||||
export function gongkey(params?: any) {
|
||||
if (!params) {
|
||||
const adminInfo = useAdminInfo()
|
||||
params = {
|
||||
loginName: encrypt(adminInfo.$state.loginName)
|
||||
}
|
||||
}
|
||||
return request({
|
||||
url: '/user-boot/user/generateSm2Key',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export async function pwdSm3(pwd: any, loginName?: string) {
|
||||
let publicKey = await gongkey(
|
||||
loginName
|
||||
? {
|
||||
loginName: encrypt(loginName)
|
||||
}
|
||||
: false
|
||||
)
|
||||
let sm3Pwd = sm3Digest(pwd) //SM3加密
|
||||
return sm2(sm3Pwd + '|' + pwd, publicKey.data, 0)
|
||||
}
|
||||
|
||||
//登录获取token
|
||||
export async function login(params: any) {
|
||||
if (params.refresh_token == undefined) {
|
||||
params.password = await pwdSm3(params.password, params.username)
|
||||
}
|
||||
params.username = encrypt(params.username)
|
||||
return request({
|
||||
url: '/pqs-auth/oauth/token',
|
||||
method: 'post',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
//获取用户信息
|
||||
export function getUserById() {
|
||||
const adminInfo = useAdminInfo()
|
||||
return request({
|
||||
url: '/user-boot/user/getUserById?id=' + adminInfo.userIndex,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 刷新token
|
||||
// 导出一个名为refreshToken的函数,该函数返回一个Promise对象
|
||||
export function refreshToken(): Promise<any> {
|
||||
// 调用useAdminInfo函数获取管理员信息,并将其赋值给adminInfo变量
|
||||
const adminInfo = useAdminInfo()
|
||||
// 调用login函数,传入一个对象作为参数,该对象包含grant_type、refresh_token和username三个属性
|
||||
// grant_type设置为'refresh_token',表示使用刷新令牌的方式获取新的访问令牌
|
||||
// refresh_token使用adminInfo中的refresh_token属性
|
||||
// username使用adminInfo中的loginName属性
|
||||
// 返回login函数的调用结果,即一个Promise对象
|
||||
return login({
|
||||
grant_type: 'refresh_token',
|
||||
refresh_token: adminInfo.refresh_token,
|
||||
username: adminInfo.loginName
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取营销用户列表
|
||||
* @returns {AxiosPromise}
|
||||
*/
|
||||
export const getMarketList = () => {
|
||||
return request({
|
||||
url: '/user-boot/user/getMarketList',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
export function add(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/add',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function edit(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export async function passwordConfirm(pwd: string) {
|
||||
return request({
|
||||
url: '/user-boot/user/passwordConfirm?password=' + (await pwdSm3(pwd)),
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function deluser(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/delete',
|
||||
method: 'delete',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
export function activateUser(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/activateUser',
|
||||
method: 'put',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
export async function updatePassword(params: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/updatePassword',
|
||||
method: 'put',
|
||||
params: {
|
||||
id: params.id,
|
||||
newPassword: await pwdSm3(params.newPassword)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export async function updateFirstPassword(params: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/updateFirstPassword',
|
||||
method: 'put',
|
||||
data: {
|
||||
name: encrypt(params.name),
|
||||
password: await pwdSm3(params.password, params.name)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function checkUser(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/check',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function existMonitorDeptTree() {
|
||||
return request({
|
||||
url: '/user-boot/dept/existMonitorDeptTree',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
// 获取用户
|
||||
export function getUserByRoleType(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/getUserByRoleType?roleType=' + data,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取部门下所有用户
|
||||
export function listAllUserByDeptId(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/listAllUserByDeptId?deptId=' + data,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 根据id获取所有用户信息
|
||||
export function getUserListByIds(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/getUserListByIds',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询所有用户不包括管理员
|
||||
*/
|
||||
export const getUserSimpleList = () => {
|
||||
return request({
|
||||
url: '/user-boot/user/simpleList',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询所有用户包括管理员
|
||||
*/
|
||||
export const getAllUserSimpleList = () => {
|
||||
return request({
|
||||
url: '/user-boot/user/getAllUserSimpleList',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
export const getSysConfig = () => {
|
||||
return request({
|
||||
url: '/system-boot/config/getSysConfig',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 驾驶舱组件配置
|
||||
export const componentTree = () => {
|
||||
return request({
|
||||
url: '/user-boot/component/componentTree',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
import request from '@/utils/request'
|
||||
import { LoginData } from '@/api/types'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import { sm3Digest } from '@/assets/commjs/sm3.js'
|
||||
import { sm2, encrypt } from '@/assets/commjs/sm2.js'
|
||||
|
||||
// 获取公钥
|
||||
export function gongkey(params?: any) {
|
||||
if (!params) {
|
||||
const adminInfo = useAdminInfo()
|
||||
params = {
|
||||
loginName: encrypt(adminInfo.$state.loginName)
|
||||
}
|
||||
}
|
||||
return request({
|
||||
url: '/user-boot/user/generateSm2Key',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export async function pwdSm3(pwd: any, loginName?: string) {
|
||||
let publicKey = await gongkey(
|
||||
loginName
|
||||
? {
|
||||
loginName: encrypt(loginName)
|
||||
}
|
||||
: false
|
||||
)
|
||||
let sm3Pwd = sm3Digest(pwd) //SM3加密
|
||||
return sm2(sm3Pwd + '|' + pwd, publicKey.data, 0)
|
||||
}
|
||||
|
||||
//登录获取token
|
||||
export async function login(params: any) {
|
||||
if (params.refresh_token == undefined) {
|
||||
params.password = await pwdSm3(params.password, params.username)
|
||||
}
|
||||
params.username = encrypt(params.username)
|
||||
return request({
|
||||
url: '/pqs-auth/oauth/token',
|
||||
method: 'post',
|
||||
params
|
||||
})
|
||||
}
|
||||
//辽宁嵌入登录获取token
|
||||
export async function loginLNqr(data: any) {
|
||||
return request({
|
||||
url: '/pqs-auth/oauth/lnLogin',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
export async function lnRefreshToken(data: any) {
|
||||
return request({
|
||||
url: '/pqs-auth/oauth/lnRefreshToken',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
export async function logout() {
|
||||
return request({
|
||||
url: '/pqs-auth/oauth/logout',
|
||||
method: 'DELETE',
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//获取用户信息
|
||||
export function getUserById() {
|
||||
const adminInfo = useAdminInfo()
|
||||
return request({
|
||||
url: '/user-boot/user/getUserById?id=' + adminInfo.userIndex,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 刷新token
|
||||
// 导出一个名为refreshToken的函数,该函数返回一个Promise对象
|
||||
export function refreshToken(): Promise<any> {
|
||||
// 调用useAdminInfo函数获取管理员信息,并将其赋值给adminInfo变量
|
||||
const adminInfo = useAdminInfo()
|
||||
// 调用login函数,传入一个对象作为参数,该对象包含grant_type、refresh_token和username三个属性
|
||||
// grant_type设置为'refresh_token',表示使用刷新令牌的方式获取新的访问令牌
|
||||
// refresh_token使用adminInfo中的refresh_token属性
|
||||
// username使用adminInfo中的loginName属性
|
||||
// 返回login函数的调用结果,即一个Promise对象
|
||||
return login({
|
||||
grant_type: 'refresh_token',
|
||||
refresh_token: adminInfo.refresh_token,
|
||||
username: adminInfo.loginName
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function lnRefreshTokenTo(): Promise<any> {
|
||||
// 调用useAdminInfo函数获取管理员信息,并将其赋值给adminInfo变量
|
||||
const adminInfo = useAdminInfo()
|
||||
return lnRefreshToken({
|
||||
refreshToken: adminInfo.refresh_token,
|
||||
clientId: "njcn",
|
||||
clientSecret:"njcnpqs"
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取营销用户列表
|
||||
* @returns {AxiosPromise}
|
||||
*/
|
||||
export const getMarketList = () => {
|
||||
return request({
|
||||
url: '/user-boot/user/getMarketList',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
export function add(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/add',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function edit(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export async function passwordConfirm(pwd: string) {
|
||||
return request({
|
||||
url: '/user-boot/user/passwordConfirm?password=' + (await pwdSm3(pwd)),
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function deluser(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/delete',
|
||||
method: 'delete',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
export function activateUser(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/activateUser',
|
||||
method: 'put',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
export async function updatePassword(params: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/updatePassword',
|
||||
method: 'put',
|
||||
params: {
|
||||
id: params.id,
|
||||
newPassword: await pwdSm3(params.newPassword)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export async function updateFirstPassword(params: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/updateFirstPassword',
|
||||
method: 'put',
|
||||
data: {
|
||||
name: encrypt(params.name),
|
||||
password: await pwdSm3(params.password, params.name)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function checkUser(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/check',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function existMonitorDeptTree() {
|
||||
return request({
|
||||
url: '/user-boot/dept/existMonitorDeptTree',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
// 获取用户
|
||||
export function getUserByRoleType(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/getUserByRoleType?roleType=' + data,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取部门下所有用户
|
||||
export function listAllUserByDeptId(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/listAllUserByDeptId?deptId=' + data,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
// 根据id获取所有用户信息
|
||||
export function getUserListByIds(data: any) {
|
||||
return request({
|
||||
url: '/user-boot/user/getUserListByIds',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询所有用户不包括管理员
|
||||
*/
|
||||
export const getUserSimpleList = () => {
|
||||
return request({
|
||||
url: '/user-boot/user/simpleList',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询所有用户包括管理员
|
||||
*/
|
||||
export const getAllUserSimpleList = () => {
|
||||
return request({
|
||||
url: '/user-boot/user/getAllUserSimpleList',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
export const getSysConfig = () => {
|
||||
return request({
|
||||
url: '/system-boot/config/getSysConfig',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 驾驶舱组件配置
|
||||
export const componentTree = () => {
|
||||
return request({
|
||||
url: '/user-boot/component/componentTree',
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
BIN
src/assets/imgs/m0.png
Normal file
BIN
src/assets/imgs/m0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/imgs/m1.png
Normal file
BIN
src/assets/imgs/m1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/imgs/m2.png
Normal file
BIN
src/assets/imgs/m2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
src/assets/imgs/m3.png
Normal file
BIN
src/assets/imgs/m3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
src/assets/imgs/m4.png
Normal file
BIN
src/assets/imgs/m4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
File diff suppressed because one or more lines are too long
@@ -1,46 +1,46 @@
|
||||
<!-- 数据字典 Select 选择器 -->
|
||||
<template>
|
||||
<el-select class="w-1/1" v-bind="attrs">
|
||||
<template v-if="valueType === 'int'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getIntDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="valueType === 'str'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getStrDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="valueType === 'bool'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getBoolDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
|
||||
|
||||
// 接受父组件参数
|
||||
interface Props {
|
||||
dictType: string // 字典类型
|
||||
valueType: string // 字典值类型
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
dictType: '',
|
||||
valueType: 'str'
|
||||
})
|
||||
const attrs = useAttrs()
|
||||
defineOptions({ name: 'DictSelect' })
|
||||
</script>
|
||||
<!-- 数据字典 Select 选择器 -->
|
||||
<template>
|
||||
<el-select class="w-1/1" v-bind="attrs" filterable>
|
||||
<template v-if="valueType === 'int'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getIntDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="valueType === 'str'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getStrDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="valueType === 'bool'">
|
||||
<el-option
|
||||
v-for="(dict, index) in getBoolDictOptions(dictType)"
|
||||
:key="index"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getBoolDictOptions, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
|
||||
|
||||
// 接受父组件参数
|
||||
interface Props {
|
||||
dictType: string // 字典类型
|
||||
valueType: string // 字典值类型
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
dictType: '',
|
||||
valueType: 'str'
|
||||
})
|
||||
const attrs = useAttrs()
|
||||
defineOptions({ name: 'DictSelect' })
|
||||
</script>
|
||||
|
||||
@@ -30,7 +30,7 @@ import { downloadFile } from '@/api/system-boot/file'
|
||||
import { previewFile } from '@/utils/fileDownLoad'
|
||||
|
||||
const { push, options, currentRoute } = useRouter()
|
||||
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
|
||||
const VITE_FLAG = false//import.meta.env.VITE_NAME == 'jibei'
|
||||
// const url = 'http://192.168.1.22:9009/excelreport' + currentRoute.value.href?.split('?')[1]
|
||||
const url = ref('')
|
||||
const excelOptions = ref({})
|
||||
|
||||
@@ -103,7 +103,7 @@ const highlightDiagram = async () => {
|
||||
let findProcessTask = false //是否已经高亮了进行中的任务
|
||||
//进行中高亮之后的任务 key 集合,用于过滤掉 taskList 进行中后面的任务,避免进行中后面的数据 Hover 还有数据
|
||||
let removeTaskDefinitionKeyList = []
|
||||
// debugger
|
||||
//
|
||||
//芋道这里取值是rootElements[0].flowElements
|
||||
bpmnModeler.getDefinitions().rootElements[1].flowElements?.forEach((n: any) => {
|
||||
let activity: any = activityList.find((m: any) => m.key === n.id) // 找到对应的活动
|
||||
@@ -135,7 +135,6 @@ const highlightDiagram = async () => {
|
||||
// 处理 outgoing 出线
|
||||
const outgoing = getActivityOutgoing(activity)
|
||||
outgoing?.forEach((nn: any) => {
|
||||
// debugger
|
||||
let targetActivity: any = activityList.find((m: any) => m.key === nn.targetRef.id)
|
||||
// 如果目标活动存在,则根据该活动是否结束,进行【bpmn:SequenceFlow】连线的高亮设置
|
||||
if (targetActivity) {
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
<div class="panel-tab__content">
|
||||
<el-form :model="flowConditionForm" label-width="90px" size="small">
|
||||
<el-form-item label="流转类型">
|
||||
<el-select v-model="flowConditionForm.type" @change="updateFlowType">
|
||||
<el-select v-model="flowConditionForm.type" @change="updateFlowType" filterable>
|
||||
<el-option label="普通流转路径" value="normal" />
|
||||
<el-option label="默认流转路径" value="default" />
|
||||
<el-option label="条件流转路径" value="condition" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
|
||||
<el-select v-model="flowConditionForm.conditionType">
|
||||
<el-select v-model="flowConditionForm.conditionType" filterable>
|
||||
<el-option label="表达式" value="expression" />
|
||||
<el-option label="脚本" value="script" />
|
||||
</el-select>
|
||||
@@ -33,7 +33,7 @@
|
||||
<el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本类型" key="scriptType">
|
||||
<el-select v-model="flowConditionForm.scriptType">
|
||||
<el-select v-model="flowConditionForm.scriptType" filterable>
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
|
||||
@@ -1,481 +1,481 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="流程表单">
|
||||
<!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
|
||||
<el-select v-model="formKey" clearable @change="updateElementFormKey">
|
||||
<el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="业务标识">-->
|
||||
<!-- <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
|
||||
<!-- <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
|
||||
<!-- <el-option label="无" value="" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
|
||||
<!--字段列表-->
|
||||
<!-- <div class="element-property list-property">-->
|
||||
<!-- <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
|
||||
<!-- <el-table :data="fieldList" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" type="index" width="50px" />-->
|
||||
<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- label="字段类型"-->
|
||||
<!-- prop="type"-->
|
||||
<!-- min-width="80px"-->
|
||||
<!-- :formatter="(row) => fieldType[row.type] || row.type"-->
|
||||
<!-- show-overflow-tooltip-->
|
||||
<!-- />-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- label="默认值"-->
|
||||
<!-- prop="defaultValue"-->
|
||||
<!-- min-width="80px"-->
|
||||
<!-- show-overflow-tooltip-->
|
||||
<!-- />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeField(scope, scope.$index)"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="element-drawer__button">-->
|
||||
<!-- <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!--字段配置侧边栏-->
|
||||
<!-- <el-drawer-->
|
||||
<!-- v-model="fieldModelVisible"-->
|
||||
<!-- title="字段配置"-->
|
||||
<!-- :size="`${width}px`"-->
|
||||
<!-- append-to-body-->
|
||||
<!-- destroy-on-close-->
|
||||
<!-- >-->
|
||||
<!-- <el-form :model="formFieldForm" label-width="90px">-->
|
||||
<!-- <el-form-item label="字段ID">-->
|
||||
<!-- <el-input v-model="formFieldForm.id" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="类型">-->
|
||||
<!-- <el-select-->
|
||||
<!-- v-model="formFieldForm.typeType"-->
|
||||
<!-- placeholder="请选择字段类型"-->
|
||||
<!-- clearable-->
|
||||
<!-- @change="changeFieldTypeType"-->
|
||||
<!-- >-->
|
||||
<!-- <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
|
||||
<!-- <el-input v-model="formFieldForm.type" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="名称">-->
|
||||
<!-- <el-input v-model="formFieldForm.label" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
|
||||
<!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="默认值">-->
|
||||
<!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
|
||||
<!-- <!– 枚举值设置 –>-->
|
||||
<!-- <template v-if="formFieldForm.type === 'enum'">-->
|
||||
<!-- <el-divider key="enum-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="enum-title">-->
|
||||
<!-- <span><Icon icon="ep:menu" />枚举值列表:</span>-->
|
||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
|
||||
<!-- >添加枚举值</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </template>-->
|
||||
|
||||
<!-- <!– 校验规则 –>-->
|
||||
<!-- <el-divider key="validation-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="validation-title">-->
|
||||
<!-- <span><Icon icon="ep:menu" />约束条件列表:</span>-->
|
||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
|
||||
<!-- >添加约束</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
|
||||
<!-- <!– 表单属性 –>-->
|
||||
<!-- <el-divider key="property-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="property-title">-->
|
||||
<!-- <span><Icon icon="ep:menu" />字段属性列表:</span>-->
|
||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
|
||||
<!-- >添加属性</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
|
||||
<!-- <!– 底部按钮 –>-->
|
||||
<!-- <div class="element-drawer__button">-->
|
||||
<!-- <el-button>取 消</el-button>-->
|
||||
<!-- <el-button type="primary" @click="saveField">保 存</el-button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-drawer>-->
|
||||
|
||||
<!-- <el-dialog-->
|
||||
<!-- v-model="fieldOptionModelVisible"-->
|
||||
<!-- :title="optionModelTitle"-->
|
||||
<!-- width="600px"-->
|
||||
<!-- append-to-body-->
|
||||
<!-- destroy-on-close-->
|
||||
<!-- >-->
|
||||
<!-- <el-form :model="fieldOptionForm" label-width="96px">-->
|
||||
<!-- <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.id" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.name" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.config" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.value" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- <template #footer>-->
|
||||
<!-- <el-button @click="fieldOptionModelVisible = false">取 消</el-button>-->
|
||||
<!-- <el-button type="primary" @click="saveFieldOption">确 定</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-dialog>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getFormSimpleList } from '@/api/bpm-boot/form'
|
||||
|
||||
|
||||
defineOptions({ name: 'ElementForm' })
|
||||
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const prefix = inject('prefix')
|
||||
const width = inject('width')
|
||||
|
||||
const formKey = ref('')
|
||||
const businessKey = ref('')
|
||||
const optionModelTitle = ref('')
|
||||
const fieldList = ref<any[]>([])
|
||||
const formFieldForm = ref<any>({})
|
||||
const fieldType = ref({
|
||||
long: '长整型',
|
||||
string: '字符串',
|
||||
boolean: '布尔类',
|
||||
date: '日期类',
|
||||
enum: '枚举类',
|
||||
custom: '自定义类型'
|
||||
})
|
||||
const formFieldIndex = ref(-1) // 编辑中的字段, -1 为新增
|
||||
const formFieldOptionIndex = ref(-1) // 编辑中的字段配置项, -1 为新增
|
||||
const fieldModelVisible = ref(false)
|
||||
const fieldOptionModelVisible = ref(false)
|
||||
const fieldOptionForm = ref<any>({}) // 当前激活的字段配置项数据
|
||||
const fieldOptionType = ref('') // 当前激活的字段配置项弹窗 类型
|
||||
const fieldEnumList = ref<any[]>([]) // 枚举值列表
|
||||
const fieldConstraintsList = ref<any[]>([]) // 约束条件列表
|
||||
const fieldPropertiesList = ref<any[]>([]) // 绑定属性列表
|
||||
const bpmnELement = ref()
|
||||
const elExtensionElements = ref()
|
||||
const formData = ref()
|
||||
const otherExtensions = ref()
|
||||
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
const resetFormList = () => {
|
||||
bpmnELement.value = bpmnInstances().bpmnElement
|
||||
formKey.value = bpmnELement.value.businessObject.formKey
|
||||
// if (formKey.value?.length > 0) {
|
||||
// formKey.value = parseInt(formKey.value)
|
||||
// }
|
||||
// 获取元素扩展属性 或者 创建扩展属性
|
||||
elExtensionElements.value =
|
||||
bpmnELement.value.businessObject.get('extensionElements') ||
|
||||
bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
|
||||
// 获取元素表单配置 或者 创建新的表单配置
|
||||
formData.value =
|
||||
elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] ||
|
||||
bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] })
|
||||
|
||||
// 业务标识 businessKey, 绑定在 formData 中
|
||||
businessKey.value = formData.value.businessKey
|
||||
|
||||
// 保留剩余扩展元素,便于后面更新该元素对应属性
|
||||
otherExtensions.value = elExtensionElements.value.values.filter(
|
||||
(ex) => ex.$type !== `${prefix}:FormData`
|
||||
)
|
||||
|
||||
// 复制原始值,填充表格
|
||||
fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []))
|
||||
|
||||
// 更新元素扩展属性,避免后续报错
|
||||
updateElementExtensions()
|
||||
}
|
||||
const updateElementFormKey = () => {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
|
||||
formKey: formKey.value
|
||||
})
|
||||
}
|
||||
const updateElementBusinessKey = () => {
|
||||
bpmnInstances().modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
|
||||
businessKey: businessKey.value
|
||||
})
|
||||
}
|
||||
// 根据类型调整字段type
|
||||
const changeFieldTypeType = (type) => {
|
||||
// this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
|
||||
formFieldForm.value['type'] = type === 'custom' ? '' : type
|
||||
}
|
||||
|
||||
// 打开字段详情侧边栏
|
||||
const openFieldForm = (field, index) => {
|
||||
formFieldIndex.value = index
|
||||
if (index !== -1) {
|
||||
const FieldObject = formData.value.fields[index]
|
||||
formFieldForm.value = JSON.parse(JSON.stringify(field))
|
||||
// 设置自定义类型
|
||||
// this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
|
||||
formFieldForm.value['typeType'] = !fieldType.value[field.type] ? 'custom' : field.type
|
||||
// 初始化枚举值列表
|
||||
field.type === 'enum' &&
|
||||
(fieldEnumList.value = JSON.parse(JSON.stringify(FieldObject?.values || [])))
|
||||
// 初始化约束条件列表
|
||||
fieldConstraintsList.value = JSON.parse(
|
||||
JSON.stringify(FieldObject?.validation?.constraints || [])
|
||||
)
|
||||
// 初始化自定义属性列表
|
||||
fieldPropertiesList.value = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []))
|
||||
} else {
|
||||
formFieldForm.value = {}
|
||||
// 初始化枚举值列表
|
||||
fieldEnumList.value = []
|
||||
// 初始化约束条件列表
|
||||
fieldConstraintsList.value = []
|
||||
// 初始化自定义属性列表
|
||||
fieldPropertiesList.value = []
|
||||
}
|
||||
fieldModelVisible.value = true
|
||||
}
|
||||
// 打开字段 某个 配置项 弹窗
|
||||
const openFieldOptionForm = (option, index, type) => {
|
||||
fieldOptionModelVisible.value = true
|
||||
fieldOptionType.value = type
|
||||
formFieldOptionIndex.value = index
|
||||
if (type === 'property') {
|
||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
||||
return (optionModelTitle.value = '属性配置')
|
||||
}
|
||||
if (type === 'enum') {
|
||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
||||
return (optionModelTitle.value = '枚举值配置')
|
||||
}
|
||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
||||
return (optionModelTitle.value = '约束条件配置')
|
||||
}
|
||||
|
||||
// 保存字段 某个 配置项
|
||||
const saveFieldOption = () => {
|
||||
if (formFieldOptionIndex.value === -1) {
|
||||
if (fieldOptionType.value === 'property') {
|
||||
fieldPropertiesList.value.push(fieldOptionForm.value)
|
||||
}
|
||||
if (fieldOptionType.value === 'constraint') {
|
||||
fieldConstraintsList.value.push(fieldOptionForm.value)
|
||||
}
|
||||
if (fieldOptionType.value === 'enum') {
|
||||
fieldEnumList.value.push(fieldOptionForm.value)
|
||||
}
|
||||
} else {
|
||||
fieldOptionType.value === 'property' &&
|
||||
fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
||||
fieldOptionType.value === 'constraint' &&
|
||||
fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
||||
fieldOptionType.value === 'enum' &&
|
||||
fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
||||
}
|
||||
fieldOptionModelVisible.value = false
|
||||
fieldOptionForm.value = {}
|
||||
}
|
||||
// 保存字段配置
|
||||
const saveField = () => {
|
||||
const { id, type, label, defaultValue, datePattern } = formFieldForm.value
|
||||
const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, { id, type, label })
|
||||
defaultValue && (Field.defaultValue = defaultValue)
|
||||
datePattern && (Field.datePattern = datePattern)
|
||||
// 构建属性
|
||||
if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
|
||||
const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
|
||||
return bpmnInstances().moddle.create(`${prefix}:Property`, {
|
||||
id: fp.id,
|
||||
value: fp.value
|
||||
})
|
||||
})
|
||||
Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
|
||||
values: fieldPropertyList
|
||||
})
|
||||
}
|
||||
// 构建校验规则
|
||||
if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
|
||||
const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
|
||||
return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
|
||||
name: fc.name,
|
||||
config: fc.config
|
||||
})
|
||||
})
|
||||
Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
|
||||
constraints: fieldConstraintList
|
||||
})
|
||||
}
|
||||
// 构建枚举值
|
||||
if (fieldEnumList.value && fieldEnumList.value.length) {
|
||||
Field.values = fieldEnumList.value.map((fe) => {
|
||||
return bpmnInstances().moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
|
||||
})
|
||||
}
|
||||
// 更新数组 与 表单配置实例
|
||||
if (formFieldIndex.value === -1) {
|
||||
fieldList.value.push(formFieldForm.value)
|
||||
formData.value.fields.push(Field)
|
||||
} else {
|
||||
fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
|
||||
formData.value.fields.splice(formFieldIndex.value, 1, Field)
|
||||
}
|
||||
updateElementExtensions()
|
||||
fieldModelVisible.value = false
|
||||
}
|
||||
|
||||
// 移除某个 字段的 配置项
|
||||
const removeFieldOptionItem = (option, index, type) => {
|
||||
// console.log(option, 'option')
|
||||
if (type === 'property') {
|
||||
fieldPropertiesList.value.splice(index, 1)
|
||||
return
|
||||
}
|
||||
if (type === 'enum') {
|
||||
fieldEnumList.value.splice(index, 1)
|
||||
return
|
||||
}
|
||||
fieldConstraintsList.value.splice(index, 1)
|
||||
}
|
||||
// 移除 字段
|
||||
const removeField = (field, index) => {
|
||||
console.log(field, 'field')
|
||||
fieldList.value.splice(index, 1)
|
||||
formData.value.fields.splice(index, 1)
|
||||
updateElementExtensions()
|
||||
}
|
||||
|
||||
const updateElementExtensions = () => {
|
||||
// 更新回扩展元素
|
||||
const newElExtensionElements = bpmnInstances().moddle.create(`bpmn:ExtensionElements`, {
|
||||
values: otherExtensions.value.concat(formData.value)
|
||||
})
|
||||
// 更新到元素上
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
|
||||
extensionElements: newElExtensionElements
|
||||
})
|
||||
}
|
||||
|
||||
const formList = ref([]) // 流程表单的下拉框的数据
|
||||
onMounted(async () => {
|
||||
await getFormSimpleList().then(res => {
|
||||
formList.value = res.data
|
||||
})
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
(val) => {
|
||||
val &&
|
||||
val.length &&
|
||||
nextTick(() => {
|
||||
resetFormList()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="流程表单">
|
||||
<!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
|
||||
<el-select v-model="formKey" clearable @change="updateElementFormKey" filterable>
|
||||
<el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="业务标识">-->
|
||||
<!-- <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
|
||||
<!-- <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
|
||||
<!-- <el-option label="无" value="" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
|
||||
<!--字段列表-->
|
||||
<!-- <div class="element-property list-property">-->
|
||||
<!-- <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
|
||||
<!-- <el-table :data="fieldList" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" type="index" width="50px" />-->
|
||||
<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- label="字段类型"-->
|
||||
<!-- prop="type"-->
|
||||
<!-- min-width="80px"-->
|
||||
<!-- :formatter="(row) => fieldType[row.type] || row.type"-->
|
||||
<!-- show-overflow-tooltip-->
|
||||
<!-- />-->
|
||||
<!-- <el-table-column-->
|
||||
<!-- label="默认值"-->
|
||||
<!-- prop="defaultValue"-->
|
||||
<!-- min-width="80px"-->
|
||||
<!-- show-overflow-tooltip-->
|
||||
<!-- />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeField(scope, scope.$index)"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="element-drawer__button">-->
|
||||
<!-- <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!--字段配置侧边栏-->
|
||||
<!-- <el-drawer-->
|
||||
<!-- v-model="fieldModelVisible"-->
|
||||
<!-- title="字段配置"-->
|
||||
<!-- :size="`${width}px`"-->
|
||||
<!-- append-to-body-->
|
||||
<!-- destroy-on-close-->
|
||||
<!-- >-->
|
||||
<!-- <el-form :model="formFieldForm" label-width="90px">-->
|
||||
<!-- <el-form-item label="字段ID">-->
|
||||
<!-- <el-input v-model="formFieldForm.id" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="类型">-->
|
||||
<!-- <el-select-->
|
||||
<!-- v-model="formFieldForm.typeType"-->
|
||||
<!-- placeholder="请选择字段类型"-->
|
||||
<!-- clearable-->
|
||||
<!-- @change="changeFieldTypeType"-->
|
||||
<!-- >-->
|
||||
<!-- <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
|
||||
<!-- <el-input v-model="formFieldForm.type" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="名称">-->
|
||||
<!-- <el-input v-model="formFieldForm.label" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
|
||||
<!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="默认值">-->
|
||||
<!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
|
||||
<!-- <!– 枚举值设置 –>-->
|
||||
<!-- <template v-if="formFieldForm.type === 'enum'">-->
|
||||
<!-- <el-divider key="enum-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="enum-title">-->
|
||||
<!-- <span><Icon icon="ep:menu" />枚举值列表:</span>-->
|
||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
|
||||
<!-- >添加枚举值</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </template>-->
|
||||
|
||||
<!-- <!– 校验规则 –>-->
|
||||
<!-- <el-divider key="validation-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="validation-title">-->
|
||||
<!-- <span><Icon icon="ep:menu" />约束条件列表:</span>-->
|
||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
|
||||
<!-- >添加约束</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
|
||||
<!-- <!– 表单属性 –>-->
|
||||
<!-- <el-divider key="property-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="property-title">-->
|
||||
<!-- <span><Icon icon="ep:menu" />字段属性列表:</span>-->
|
||||
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
|
||||
<!-- >添加属性</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template #default="scope">-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
|
||||
<!-- >编辑</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- link-->
|
||||
<!-- style="color: #ff4d4f"-->
|
||||
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
|
||||
<!-- >移除</el-button-->
|
||||
<!-- >-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
|
||||
<!-- <!– 底部按钮 –>-->
|
||||
<!-- <div class="element-drawer__button">-->
|
||||
<!-- <el-button>取 消</el-button>-->
|
||||
<!-- <el-button type="primary" @click="saveField">保 存</el-button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-drawer>-->
|
||||
|
||||
<!-- <el-dialog-->
|
||||
<!-- v-model="fieldOptionModelVisible"-->
|
||||
<!-- :title="optionModelTitle"-->
|
||||
<!-- width="600px"-->
|
||||
<!-- append-to-body-->
|
||||
<!-- destroy-on-close-->
|
||||
<!-- >-->
|
||||
<!-- <el-form :model="fieldOptionForm" label-width="96px">-->
|
||||
<!-- <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.id" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.name" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.config" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
|
||||
<!-- <el-input v-model="fieldOptionForm.value" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- <template #footer>-->
|
||||
<!-- <el-button @click="fieldOptionModelVisible = false">取 消</el-button>-->
|
||||
<!-- <el-button type="primary" @click="saveFieldOption">确 定</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-dialog>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getFormSimpleList } from '@/api/bpm-boot/form'
|
||||
|
||||
|
||||
defineOptions({ name: 'ElementForm' })
|
||||
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const prefix = inject('prefix')
|
||||
const width = inject('width')
|
||||
|
||||
const formKey = ref('')
|
||||
const businessKey = ref('')
|
||||
const optionModelTitle = ref('')
|
||||
const fieldList = ref<any[]>([])
|
||||
const formFieldForm = ref<any>({})
|
||||
const fieldType = ref({
|
||||
long: '长整型',
|
||||
string: '字符串',
|
||||
boolean: '布尔类',
|
||||
date: '日期类',
|
||||
enum: '枚举类',
|
||||
custom: '自定义类型'
|
||||
})
|
||||
const formFieldIndex = ref(-1) // 编辑中的字段, -1 为新增
|
||||
const formFieldOptionIndex = ref(-1) // 编辑中的字段配置项, -1 为新增
|
||||
const fieldModelVisible = ref(false)
|
||||
const fieldOptionModelVisible = ref(false)
|
||||
const fieldOptionForm = ref<any>({}) // 当前激活的字段配置项数据
|
||||
const fieldOptionType = ref('') // 当前激活的字段配置项弹窗 类型
|
||||
const fieldEnumList = ref<any[]>([]) // 枚举值列表
|
||||
const fieldConstraintsList = ref<any[]>([]) // 约束条件列表
|
||||
const fieldPropertiesList = ref<any[]>([]) // 绑定属性列表
|
||||
const bpmnELement = ref()
|
||||
const elExtensionElements = ref()
|
||||
const formData = ref()
|
||||
const otherExtensions = ref()
|
||||
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
const resetFormList = () => {
|
||||
bpmnELement.value = bpmnInstances().bpmnElement
|
||||
formKey.value = bpmnELement.value.businessObject.formKey
|
||||
// if (formKey.value?.length > 0) {
|
||||
// formKey.value = parseInt(formKey.value)
|
||||
// }
|
||||
// 获取元素扩展属性 或者 创建扩展属性
|
||||
elExtensionElements.value =
|
||||
bpmnELement.value.businessObject.get('extensionElements') ||
|
||||
bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
|
||||
// 获取元素表单配置 或者 创建新的表单配置
|
||||
formData.value =
|
||||
elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] ||
|
||||
bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] })
|
||||
|
||||
// 业务标识 businessKey, 绑定在 formData 中
|
||||
businessKey.value = formData.value.businessKey
|
||||
|
||||
// 保留剩余扩展元素,便于后面更新该元素对应属性
|
||||
otherExtensions.value = elExtensionElements.value.values.filter(
|
||||
(ex) => ex.$type !== `${prefix}:FormData`
|
||||
)
|
||||
|
||||
// 复制原始值,填充表格
|
||||
fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []))
|
||||
|
||||
// 更新元素扩展属性,避免后续报错
|
||||
updateElementExtensions()
|
||||
}
|
||||
const updateElementFormKey = () => {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
|
||||
formKey: formKey.value
|
||||
})
|
||||
}
|
||||
const updateElementBusinessKey = () => {
|
||||
bpmnInstances().modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
|
||||
businessKey: businessKey.value
|
||||
})
|
||||
}
|
||||
// 根据类型调整字段type
|
||||
const changeFieldTypeType = (type) => {
|
||||
// this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
|
||||
formFieldForm.value['type'] = type === 'custom' ? '' : type
|
||||
}
|
||||
|
||||
// 打开字段详情侧边栏
|
||||
const openFieldForm = (field, index) => {
|
||||
formFieldIndex.value = index
|
||||
if (index !== -1) {
|
||||
const FieldObject = formData.value.fields[index]
|
||||
formFieldForm.value = JSON.parse(JSON.stringify(field))
|
||||
// 设置自定义类型
|
||||
// this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
|
||||
formFieldForm.value['typeType'] = !fieldType.value[field.type] ? 'custom' : field.type
|
||||
// 初始化枚举值列表
|
||||
field.type === 'enum' &&
|
||||
(fieldEnumList.value = JSON.parse(JSON.stringify(FieldObject?.values || [])))
|
||||
// 初始化约束条件列表
|
||||
fieldConstraintsList.value = JSON.parse(
|
||||
JSON.stringify(FieldObject?.validation?.constraints || [])
|
||||
)
|
||||
// 初始化自定义属性列表
|
||||
fieldPropertiesList.value = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []))
|
||||
} else {
|
||||
formFieldForm.value = {}
|
||||
// 初始化枚举值列表
|
||||
fieldEnumList.value = []
|
||||
// 初始化约束条件列表
|
||||
fieldConstraintsList.value = []
|
||||
// 初始化自定义属性列表
|
||||
fieldPropertiesList.value = []
|
||||
}
|
||||
fieldModelVisible.value = true
|
||||
}
|
||||
// 打开字段 某个 配置项 弹窗
|
||||
const openFieldOptionForm = (option, index, type) => {
|
||||
fieldOptionModelVisible.value = true
|
||||
fieldOptionType.value = type
|
||||
formFieldOptionIndex.value = index
|
||||
if (type === 'property') {
|
||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
||||
return (optionModelTitle.value = '属性配置')
|
||||
}
|
||||
if (type === 'enum') {
|
||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
||||
return (optionModelTitle.value = '枚举值配置')
|
||||
}
|
||||
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
|
||||
return (optionModelTitle.value = '约束条件配置')
|
||||
}
|
||||
|
||||
// 保存字段 某个 配置项
|
||||
const saveFieldOption = () => {
|
||||
if (formFieldOptionIndex.value === -1) {
|
||||
if (fieldOptionType.value === 'property') {
|
||||
fieldPropertiesList.value.push(fieldOptionForm.value)
|
||||
}
|
||||
if (fieldOptionType.value === 'constraint') {
|
||||
fieldConstraintsList.value.push(fieldOptionForm.value)
|
||||
}
|
||||
if (fieldOptionType.value === 'enum') {
|
||||
fieldEnumList.value.push(fieldOptionForm.value)
|
||||
}
|
||||
} else {
|
||||
fieldOptionType.value === 'property' &&
|
||||
fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
||||
fieldOptionType.value === 'constraint' &&
|
||||
fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
||||
fieldOptionType.value === 'enum' &&
|
||||
fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
|
||||
}
|
||||
fieldOptionModelVisible.value = false
|
||||
fieldOptionForm.value = {}
|
||||
}
|
||||
// 保存字段配置
|
||||
const saveField = () => {
|
||||
const { id, type, label, defaultValue, datePattern } = formFieldForm.value
|
||||
const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, { id, type, label })
|
||||
defaultValue && (Field.defaultValue = defaultValue)
|
||||
datePattern && (Field.datePattern = datePattern)
|
||||
// 构建属性
|
||||
if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
|
||||
const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
|
||||
return bpmnInstances().moddle.create(`${prefix}:Property`, {
|
||||
id: fp.id,
|
||||
value: fp.value
|
||||
})
|
||||
})
|
||||
Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
|
||||
values: fieldPropertyList
|
||||
})
|
||||
}
|
||||
// 构建校验规则
|
||||
if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
|
||||
const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
|
||||
return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
|
||||
name: fc.name,
|
||||
config: fc.config
|
||||
})
|
||||
})
|
||||
Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
|
||||
constraints: fieldConstraintList
|
||||
})
|
||||
}
|
||||
// 构建枚举值
|
||||
if (fieldEnumList.value && fieldEnumList.value.length) {
|
||||
Field.values = fieldEnumList.value.map((fe) => {
|
||||
return bpmnInstances().moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
|
||||
})
|
||||
}
|
||||
// 更新数组 与 表单配置实例
|
||||
if (formFieldIndex.value === -1) {
|
||||
fieldList.value.push(formFieldForm.value)
|
||||
formData.value.fields.push(Field)
|
||||
} else {
|
||||
fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
|
||||
formData.value.fields.splice(formFieldIndex.value, 1, Field)
|
||||
}
|
||||
updateElementExtensions()
|
||||
fieldModelVisible.value = false
|
||||
}
|
||||
|
||||
// 移除某个 字段的 配置项
|
||||
const removeFieldOptionItem = (option, index, type) => {
|
||||
// console.log(option, 'option')
|
||||
if (type === 'property') {
|
||||
fieldPropertiesList.value.splice(index, 1)
|
||||
return
|
||||
}
|
||||
if (type === 'enum') {
|
||||
fieldEnumList.value.splice(index, 1)
|
||||
return
|
||||
}
|
||||
fieldConstraintsList.value.splice(index, 1)
|
||||
}
|
||||
// 移除 字段
|
||||
const removeField = (field, index) => {
|
||||
console.log(field, 'field')
|
||||
fieldList.value.splice(index, 1)
|
||||
formData.value.fields.splice(index, 1)
|
||||
updateElementExtensions()
|
||||
}
|
||||
|
||||
const updateElementExtensions = () => {
|
||||
// 更新回扩展元素
|
||||
const newElExtensionElements = bpmnInstances().moddle.create(`bpmn:ExtensionElements`, {
|
||||
values: otherExtensions.value.concat(formData.value)
|
||||
})
|
||||
// 更新到元素上
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
|
||||
extensionElements: newElExtensionElements
|
||||
})
|
||||
}
|
||||
|
||||
const formList = ref([]) // 流程表单的下拉框的数据
|
||||
onMounted(async () => {
|
||||
await getFormSimpleList().then(res => {
|
||||
formList.value = res.data
|
||||
})
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
(val) => {
|
||||
val &&
|
||||
val.length &&
|
||||
nextTick(() => {
|
||||
resetFormList()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -1,463 +1,459 @@
|
||||
<template>
|
||||
<div class='panel-tab__content'>
|
||||
<el-table :data='elementListenersList' size='small' border>
|
||||
<el-table-column label='序号' width='80px' type='index' />
|
||||
<el-table-column label='事件类型' min-width='100px' prop='event' />
|
||||
<el-table-column
|
||||
label='监听器类型'
|
||||
min-width='100px'
|
||||
show-overflow-tooltip
|
||||
:formatter='(row) => listenerTypeObject[row.listenerType]'
|
||||
/>
|
||||
<el-table-column label='操作' width='100px'>
|
||||
<template #default='scope'>
|
||||
<el-button size='small' link @click='openListenerForm(scope.row, scope.$index)'
|
||||
>编辑
|
||||
</el-button
|
||||
>
|
||||
<el-divider direction='vertical' />
|
||||
<el-button size='small' link style='color: #ff4d4f' @click='removeListener(scope.$index)'
|
||||
>移除
|
||||
</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class='element-drawer__button'>
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:plus"
|
||||
title="添加监听器"
|
||||
size="small"
|
||||
@click="openListenerForm(null)"
|
||||
/>
|
||||
<!-- <Plus type='primary'-->
|
||||
<!-- title='添加监听器'-->
|
||||
<!-- size='small'-->
|
||||
<!-- @click='openListenerForm(null)' />-->
|
||||
<XButton
|
||||
type="success"
|
||||
preIcon="ep:select"
|
||||
title="选择监听器"
|
||||
size="small"
|
||||
@click="openProcessListenerDialog"
|
||||
/>
|
||||
<!-- <Select-->
|
||||
<!-- type='success'-->
|
||||
<!-- title='选择监听器'-->
|
||||
<!-- size='small'-->
|
||||
<!-- @click='openProcessListenerDialog'-->
|
||||
<!-- />-->
|
||||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
<el-drawer
|
||||
v-model='listenerFormModelVisible'
|
||||
title='执行监听器'
|
||||
:size='`${width}px`'
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form :model='listenerForm' label-width='96px' ref='listenerFormRef'>
|
||||
<el-form-item
|
||||
label='事件类型'
|
||||
prop='event'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model='listenerForm.event'>
|
||||
<el-option label='start' value='start' />
|
||||
<el-option label='end' value='end' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label='监听器类型'
|
||||
prop='listenerType'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model='listenerForm.listenerType'>
|
||||
<el-option
|
||||
v-for='i in Object.keys(listenerTypeObject)'
|
||||
:key='i'
|
||||
:label='listenerTypeObject[i]'
|
||||
:value='i'
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'classListener'"
|
||||
label='Java类'
|
||||
prop='class'
|
||||
key='listener-class'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model='listenerForm.class' clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'expressionListener'"
|
||||
label='表达式'
|
||||
prop='expression'
|
||||
key='listener-expression'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model='listenerForm.expression' clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
||||
label='代理表达式'
|
||||
prop='delegateExpression'
|
||||
key='listener-delegate'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model='listenerForm.delegateExpression' clearable />
|
||||
</el-form-item>
|
||||
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
||||
<el-form-item
|
||||
label='脚本格式'
|
||||
prop='scriptFormat'
|
||||
key='listener-script-format'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
||||
>
|
||||
<el-input v-model='listenerForm.scriptFormat' clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label='脚本类型'
|
||||
prop='scriptType'
|
||||
key='listener-script-type'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
>
|
||||
<el-select v-model='listenerForm.scriptType'>
|
||||
<el-option label='内联脚本' value='inlineScript' />
|
||||
<el-option label='外部脚本' value='externalScript' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'inlineScript'"
|
||||
label='脚本内容'
|
||||
prop='value'
|
||||
key='listener-script'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
||||
>
|
||||
<el-input v-model='listenerForm.value' clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'externalScript'"
|
||||
label='资源地址'
|
||||
prop='resource'
|
||||
key='listener-resource'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
||||
>
|
||||
<el-input v-model='listenerForm.resource' clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
<el-divider />
|
||||
<p class='listener-filed__title'>
|
||||
<span><Menu />注入字段:</span>
|
||||
<XButton type='primary' @click='openListenerFieldForm(null)' title='添加字段' />
|
||||
</p>
|
||||
<el-table
|
||||
:data='fieldsListOfListener'
|
||||
size='small'
|
||||
max-height='240'
|
||||
fit
|
||||
border
|
||||
style='flex: none'
|
||||
>
|
||||
<el-table-column label='序号' width='80px' type='index' />
|
||||
<el-table-column label='字段名称' min-width='100px' prop='name' />
|
||||
<el-table-column
|
||||
label='字段类型'
|
||||
min-width='80px'
|
||||
show-overflow-tooltip
|
||||
:formatter='(row) => fieldTypeObject[row.fieldType]'
|
||||
/>
|
||||
<el-table-column
|
||||
label='字段值/表达式'
|
||||
min-width='100px'
|
||||
show-overflow-tooltip
|
||||
:formatter='(row) => row.string || row.expression'
|
||||
/>
|
||||
<el-table-column label='操作' width='130px'>
|
||||
<template #default='scope'>
|
||||
<el-button size='small' link @click='openListenerFieldForm(scope.row, scope.$index)'
|
||||
>编辑
|
||||
</el-button
|
||||
>
|
||||
<el-divider direction='vertical' />
|
||||
<el-button
|
||||
size='small'
|
||||
link
|
||||
style='color: #ff4d4f'
|
||||
@click='removeListenerField(scope.$index)'
|
||||
>移除
|
||||
</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class='element-drawer__button'>
|
||||
<el-button @click='listenerFormModelVisible = false'>取 消</el-button>
|
||||
<el-button type='primary' @click='saveListenerConfig'>保 存</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 注入西段 编辑/创建 部分 -->
|
||||
<el-dialog
|
||||
title='字段配置'
|
||||
v-model='listenerFieldFormModelVisible'
|
||||
width='600px'
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form
|
||||
:model='listenerFieldForm'
|
||||
label-width='96spx'
|
||||
ref='listenerFieldFormRef'
|
||||
style='height: 136px'
|
||||
>
|
||||
<el-form-item
|
||||
label='字段名称:'
|
||||
prop='name'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model='listenerFieldForm.name' clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label='字段类型:'
|
||||
prop='fieldType'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model='listenerFieldForm.fieldType'>
|
||||
<el-option
|
||||
v-for='i in Object.keys(fieldTypeObject)'
|
||||
:key='i'
|
||||
:label='fieldTypeObject[i]'
|
||||
:value='i'
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'string'"
|
||||
label='字段值:'
|
||||
prop='string'
|
||||
key='field-string'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model='listenerFieldForm.string' clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
||||
label='表达式:'
|
||||
prop='expression'
|
||||
key='field-expression'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model='listenerFieldForm.expression' clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button size='small' @click='listenerFieldFormModelVisible = false'>取 消</el-button>
|
||||
<el-button size='small' type='primary' @click='saveListenerFiled'>确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<!-- 选择弹窗 -->
|
||||
<ProcessListenerDialog ref='processListenerDialogRef' @select='selectProcessListener' />
|
||||
</template>
|
||||
<script lang='ts' setup>
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import XButton from '@/components/XButton/src/XButton.vue'
|
||||
import { Plus, Select, Menu } from '@element-plus/icons-vue'
|
||||
import { createListenerObject, updateElementExtensions } from '../../utils'
|
||||
import {
|
||||
initListenerType,
|
||||
initListenerForm,
|
||||
listenerType,
|
||||
fieldType,
|
||||
initListenerForm2
|
||||
} from './utilSelf'
|
||||
import ProcessListenerDialog from './ProcessListenerDialog.vue'
|
||||
|
||||
defineOptions({ name: 'ElementListeners' })
|
||||
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const prefix = inject('prefix')
|
||||
const width = inject('width')
|
||||
const elementListenersList = ref<any[]>([]) // 监听器列表
|
||||
const listenerForm = ref<any>({}) // 监听器详情表单
|
||||
const listenerFormModelVisible = ref(false) // 监听器 编辑 侧边栏显示状态
|
||||
const fieldsListOfListener = ref<any[]>([])
|
||||
const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
|
||||
const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
|
||||
const editingListenerIndex = ref(-1) // 监听器所在下标,-1 为新增
|
||||
const editingListenerFieldIndex = ref(-1) // 字段所在下标,-1 为新增
|
||||
const listenerTypeObject = ref(listenerType)
|
||||
const fieldTypeObject = ref(fieldType)
|
||||
const bpmnElement = ref()
|
||||
const otherExtensionList = ref()
|
||||
const bpmnElementListeners = ref()
|
||||
const listenerFormRef = ref()
|
||||
const listenerFieldFormRef = ref()
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
const resetListenersList = () => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
otherExtensionList.value = []
|
||||
bpmnElementListeners.value =
|
||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
||||
(ex) => ex.$type === `${prefix}:ExecutionListener`
|
||||
) ?? []
|
||||
elementListenersList.value = bpmnElementListeners.value.map((listener) =>
|
||||
initListenerType(listener)
|
||||
)
|
||||
}
|
||||
// 打开 监听器详情 侧边栏
|
||||
const openListenerForm = (listener, index?) => {
|
||||
// debugger
|
||||
if (listener) {
|
||||
listenerForm.value = initListenerForm(listener)
|
||||
editingListenerIndex.value = index
|
||||
} else {
|
||||
listenerForm.value = {}
|
||||
editingListenerIndex.value = -1 // 标记为新增
|
||||
}
|
||||
if (listener && listener.fields) {
|
||||
fieldsListOfListener.value = listener.fields.map((field) => ({
|
||||
...field,
|
||||
fieldType: field.string ? 'string' : 'expression'
|
||||
}))
|
||||
} else {
|
||||
fieldsListOfListener.value = []
|
||||
listenerForm.value['fields'] = []
|
||||
}
|
||||
// 打开侧边栏并清楚验证状态
|
||||
listenerFormModelVisible.value = true
|
||||
nextTick(() => {
|
||||
if (listenerFormRef.value) {
|
||||
listenerFormRef.value.clearValidate()
|
||||
}
|
||||
})
|
||||
}
|
||||
// 打开监听器字段编辑弹窗
|
||||
const openListenerFieldForm = (field, index?) => {
|
||||
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
|
||||
editingListenerFieldIndex.value = field ? index : -1
|
||||
listenerFieldFormModelVisible.value = true
|
||||
nextTick(() => {
|
||||
if (listenerFieldFormRef.value) {
|
||||
listenerFieldFormRef.value.clearValidate()
|
||||
}
|
||||
})
|
||||
}
|
||||
// 保存监听器注入字段
|
||||
const saveListenerFiled = async () => {
|
||||
// debugger
|
||||
let validateStatus = await listenerFieldFormRef.value.validate()
|
||||
if (!validateStatus) return // 验证不通过直接返回
|
||||
if (editingListenerFieldIndex.value === -1) {
|
||||
fieldsListOfListener.value.push(listenerFieldForm.value)
|
||||
listenerForm.value.fields.push(listenerFieldForm.value)
|
||||
} else {
|
||||
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
|
||||
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
|
||||
}
|
||||
listenerFieldFormModelVisible.value = false
|
||||
nextTick(() => {
|
||||
listenerFieldForm.value = {}
|
||||
})
|
||||
}
|
||||
// 移除监听器字段
|
||||
const removeListenerField = (index) => {
|
||||
// debugger
|
||||
ElMessageBox.confirm('确认移除该字段吗?', '提示', {
|
||||
confirmButtonText: '确 认',
|
||||
cancelButtonText: '取 消'
|
||||
})
|
||||
.then(() => {
|
||||
fieldsListOfListener.value.splice(index, 1)
|
||||
listenerForm.value.fields.splice(index, 1)
|
||||
})
|
||||
.catch(() => console.info('操作取消'))
|
||||
}
|
||||
// 移除监听器
|
||||
const removeListener = (index) => {
|
||||
ElMessageBox.confirm('确认移除该监听器吗?', '提示', {
|
||||
confirmButtonText: '确 认',
|
||||
cancelButtonText: '取 消'
|
||||
})
|
||||
.then(() => {
|
||||
bpmnElementListeners.value.splice(index, 1)
|
||||
elementListenersList.value.splice(index, 1)
|
||||
updateElementExtensions(
|
||||
bpmnElement.value,
|
||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
||||
)
|
||||
})
|
||||
.catch(() => console.info('操作取消'))
|
||||
}
|
||||
// 保存监听器配置
|
||||
const saveListenerConfig = async () => {
|
||||
// debugger
|
||||
let validateStatus = await listenerFormRef.value.validate()
|
||||
if (!validateStatus) return // 验证不通过直接返回
|
||||
const listenerObject = createListenerObject(listenerForm.value, false, prefix)
|
||||
if (editingListenerIndex.value === -1) {
|
||||
bpmnElementListeners.value.push(listenerObject)
|
||||
elementListenersList.value.push(listenerForm.value)
|
||||
} else {
|
||||
bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
|
||||
elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
|
||||
}
|
||||
// 保存其他配置
|
||||
otherExtensionList.value =
|
||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
||||
(ex) => ex.$type !== `${prefix}:ExecutionListener`
|
||||
) ?? []
|
||||
updateElementExtensions(
|
||||
bpmnElement.value,
|
||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
||||
)
|
||||
// 4. 隐藏侧边栏
|
||||
listenerFormModelVisible.value = false
|
||||
listenerForm.value = {}
|
||||
}
|
||||
|
||||
// 打开监听器弹窗
|
||||
const processListenerDialogRef = ref()
|
||||
const openProcessListenerDialog = async () => {
|
||||
processListenerDialogRef.value.open('execution')
|
||||
}
|
||||
const selectProcessListener = (listener) => {
|
||||
const listenerForm = initListenerForm2(listener)
|
||||
const listenerObject = createListenerObject(listenerForm, false, prefix)
|
||||
bpmnElementListeners.value.push(listenerObject)
|
||||
elementListenersList.value.push(listenerForm)
|
||||
|
||||
// 保存其他配置
|
||||
otherExtensionList.value =
|
||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
||||
(ex) => ex.$type !== `${prefix}:ExecutionListener`
|
||||
) ?? []
|
||||
updateElementExtensions(
|
||||
bpmnElement.value,
|
||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
||||
)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
(val) => {
|
||||
val &&
|
||||
val.length &&
|
||||
nextTick(() => {
|
||||
resetListenersList()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class='panel-tab__content'>
|
||||
<el-table :data='elementListenersList' size='small' border>
|
||||
<el-table-column label='序号' width='80px' type='index' />
|
||||
<el-table-column label='事件类型' min-width='100px' prop='event' />
|
||||
<el-table-column
|
||||
label='监听器类型'
|
||||
min-width='100px'
|
||||
show-overflow-tooltip
|
||||
:formatter='(row) => listenerTypeObject[row.listenerType]'
|
||||
/>
|
||||
<el-table-column label='操作' width='100px'>
|
||||
<template #default='scope'>
|
||||
<el-button size='small' link @click='openListenerForm(scope.row, scope.$index)'
|
||||
>编辑
|
||||
</el-button
|
||||
>
|
||||
<el-divider direction='vertical' />
|
||||
<el-button size='small' link style='color: #ff4d4f' @click='removeListener(scope.$index)'
|
||||
>移除
|
||||
</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class='element-drawer__button'>
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:plus"
|
||||
title="添加监听器"
|
||||
size="small"
|
||||
@click="openListenerForm(null)"
|
||||
/>
|
||||
<!-- <Plus type='primary'-->
|
||||
<!-- title='添加监听器'-->
|
||||
<!-- size='small'-->
|
||||
<!-- @click='openListenerForm(null)' />-->
|
||||
<XButton
|
||||
type="success"
|
||||
preIcon="ep:select"
|
||||
title="选择监听器"
|
||||
size="small"
|
||||
@click="openProcessListenerDialog"
|
||||
/>
|
||||
<!-- <Select-->
|
||||
<!-- type='success'-->
|
||||
<!-- title='选择监听器'-->
|
||||
<!-- size='small'-->
|
||||
<!-- @click='openProcessListenerDialog'-->
|
||||
<!-- />-->
|
||||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
<el-drawer
|
||||
v-model='listenerFormModelVisible'
|
||||
title='执行监听器'
|
||||
:size='`${width}px`'
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form :model='listenerForm' label-width='96px' ref='listenerFormRef'>
|
||||
<el-form-item
|
||||
label='事件类型'
|
||||
prop='event'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model='listenerForm.event' filterable>
|
||||
<el-option label='start' value='start' />
|
||||
<el-option label='end' value='end' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label='监听器类型'
|
||||
prop='listenerType'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model='listenerForm.listenerType' filterable>
|
||||
<el-option
|
||||
v-for='i in Object.keys(listenerTypeObject)'
|
||||
:key='i'
|
||||
:label='listenerTypeObject[i]'
|
||||
:value='i'
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'classListener'"
|
||||
label='Java类'
|
||||
prop='class'
|
||||
key='listener-class'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model='listenerForm.class' clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'expressionListener'"
|
||||
label='表达式'
|
||||
prop='expression'
|
||||
key='listener-expression'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model='listenerForm.expression' clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
|
||||
label='代理表达式'
|
||||
prop='delegateExpression'
|
||||
key='listener-delegate'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model='listenerForm.delegateExpression' clearable />
|
||||
</el-form-item>
|
||||
<template v-if="listenerForm.listenerType === 'scriptListener'">
|
||||
<el-form-item
|
||||
label='脚本格式'
|
||||
prop='scriptFormat'
|
||||
key='listener-script-format'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
||||
>
|
||||
<el-input v-model='listenerForm.scriptFormat' clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label='脚本类型'
|
||||
prop='scriptType'
|
||||
key='listener-script-type'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
>
|
||||
<el-select v-model='listenerForm.scriptType' filterable>
|
||||
<el-option label='内联脚本' value='inlineScript' />
|
||||
<el-option label='外部脚本' value='externalScript' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'inlineScript'"
|
||||
label='脚本内容'
|
||||
prop='value'
|
||||
key='listener-script'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
||||
>
|
||||
<el-input v-model='listenerForm.value' clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerForm.scriptType === 'externalScript'"
|
||||
label='资源地址'
|
||||
prop='resource'
|
||||
key='listener-resource'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
||||
>
|
||||
<el-input v-model='listenerForm.resource' clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
<el-divider />
|
||||
<p class='listener-filed__title'>
|
||||
<span><Menu />注入字段:</span>
|
||||
<XButton type='primary' @click='openListenerFieldForm(null)' title='添加字段' />
|
||||
</p>
|
||||
<el-table
|
||||
:data='fieldsListOfListener'
|
||||
size='small'
|
||||
max-height='240'
|
||||
fit
|
||||
border
|
||||
style='flex: none'
|
||||
>
|
||||
<el-table-column label='序号' width='80px' type='index' />
|
||||
<el-table-column label='字段名称' min-width='100px' prop='name' />
|
||||
<el-table-column
|
||||
label='字段类型'
|
||||
min-width='80px'
|
||||
show-overflow-tooltip
|
||||
:formatter='(row) => fieldTypeObject[row.fieldType]'
|
||||
/>
|
||||
<el-table-column
|
||||
label='字段值/表达式'
|
||||
min-width='100px'
|
||||
show-overflow-tooltip
|
||||
:formatter='(row) => row.string || row.expression'
|
||||
/>
|
||||
<el-table-column label='操作' width='130px'>
|
||||
<template #default='scope'>
|
||||
<el-button size='small' link @click='openListenerFieldForm(scope.row, scope.$index)'
|
||||
>编辑
|
||||
</el-button
|
||||
>
|
||||
<el-divider direction='vertical' />
|
||||
<el-button
|
||||
size='small'
|
||||
link
|
||||
style='color: #ff4d4f'
|
||||
@click='removeListenerField(scope.$index)'
|
||||
>移除
|
||||
</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class='element-drawer__button'>
|
||||
<el-button @click='listenerFormModelVisible = false'>取 消</el-button>
|
||||
<el-button type='primary' @click='saveListenerConfig'>保 存</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 注入西段 编辑/创建 部分 -->
|
||||
<el-dialog
|
||||
title='字段配置'
|
||||
v-model='listenerFieldFormModelVisible'
|
||||
width='600px'
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form
|
||||
:model='listenerFieldForm'
|
||||
label-width='96spx'
|
||||
ref='listenerFieldFormRef'
|
||||
style='height: 136px'
|
||||
>
|
||||
<el-form-item
|
||||
label='字段名称:'
|
||||
prop='name'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model='listenerFieldForm.name' clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label='字段类型:'
|
||||
prop='fieldType'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model='listenerFieldForm.fieldType' filterable>
|
||||
<el-option
|
||||
v-for='i in Object.keys(fieldTypeObject)'
|
||||
:key='i'
|
||||
:label='fieldTypeObject[i]'
|
||||
:value='i'
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'string'"
|
||||
label='字段值:'
|
||||
prop='string'
|
||||
key='field-string'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model='listenerFieldForm.string' clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="listenerFieldForm.fieldType === 'expression'"
|
||||
label='表达式:'
|
||||
prop='expression'
|
||||
key='field-expression'
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model='listenerFieldForm.expression' clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button size='small' @click='listenerFieldFormModelVisible = false'>取 消</el-button>
|
||||
<el-button size='small' type='primary' @click='saveListenerFiled'>确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<!-- 选择弹窗 -->
|
||||
<ProcessListenerDialog ref='processListenerDialogRef' @select='selectProcessListener' />
|
||||
</template>
|
||||
<script lang='ts' setup>
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import XButton from '@/components/XButton/src/XButton.vue'
|
||||
import { Plus, Select, Menu } from '@element-plus/icons-vue'
|
||||
import { createListenerObject, updateElementExtensions } from '../../utils'
|
||||
import {
|
||||
initListenerType,
|
||||
initListenerForm,
|
||||
listenerType,
|
||||
fieldType,
|
||||
initListenerForm2
|
||||
} from './utilSelf'
|
||||
import ProcessListenerDialog from './ProcessListenerDialog.vue'
|
||||
|
||||
defineOptions({ name: 'ElementListeners' })
|
||||
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const prefix = inject('prefix')
|
||||
const width = inject('width')
|
||||
const elementListenersList = ref<any[]>([]) // 监听器列表
|
||||
const listenerForm = ref<any>({}) // 监听器详情表单
|
||||
const listenerFormModelVisible = ref(false) // 监听器 编辑 侧边栏显示状态
|
||||
const fieldsListOfListener = ref<any[]>([])
|
||||
const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
|
||||
const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
|
||||
const editingListenerIndex = ref(-1) // 监听器所在下标,-1 为新增
|
||||
const editingListenerFieldIndex = ref(-1) // 字段所在下标,-1 为新增
|
||||
const listenerTypeObject = ref(listenerType)
|
||||
const fieldTypeObject = ref(fieldType)
|
||||
const bpmnElement = ref()
|
||||
const otherExtensionList = ref()
|
||||
const bpmnElementListeners = ref()
|
||||
const listenerFormRef = ref()
|
||||
const listenerFieldFormRef = ref()
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
const resetListenersList = () => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
otherExtensionList.value = []
|
||||
bpmnElementListeners.value =
|
||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
||||
(ex) => ex.$type === `${prefix}:ExecutionListener`
|
||||
) ?? []
|
||||
elementListenersList.value = bpmnElementListeners.value.map((listener) =>
|
||||
initListenerType(listener)
|
||||
)
|
||||
}
|
||||
// 打开 监听器详情 侧边栏
|
||||
const openListenerForm = (listener, index?) => {
|
||||
if (listener) {
|
||||
listenerForm.value = initListenerForm(listener)
|
||||
editingListenerIndex.value = index
|
||||
} else {
|
||||
listenerForm.value = {}
|
||||
editingListenerIndex.value = -1 // 标记为新增
|
||||
}
|
||||
if (listener && listener.fields) {
|
||||
fieldsListOfListener.value = listener.fields.map((field) => ({
|
||||
...field,
|
||||
fieldType: field.string ? 'string' : 'expression'
|
||||
}))
|
||||
} else {
|
||||
fieldsListOfListener.value = []
|
||||
listenerForm.value['fields'] = []
|
||||
}
|
||||
// 打开侧边栏并清楚验证状态
|
||||
listenerFormModelVisible.value = true
|
||||
nextTick(() => {
|
||||
if (listenerFormRef.value) {
|
||||
listenerFormRef.value.clearValidate()
|
||||
}
|
||||
})
|
||||
}
|
||||
// 打开监听器字段编辑弹窗
|
||||
const openListenerFieldForm = (field, index?) => {
|
||||
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
|
||||
editingListenerFieldIndex.value = field ? index : -1
|
||||
listenerFieldFormModelVisible.value = true
|
||||
nextTick(() => {
|
||||
if (listenerFieldFormRef.value) {
|
||||
listenerFieldFormRef.value.clearValidate()
|
||||
}
|
||||
})
|
||||
}
|
||||
// 保存监听器注入字段
|
||||
const saveListenerFiled = async () => {
|
||||
let validateStatus = await listenerFieldFormRef.value.validate()
|
||||
if (!validateStatus) return // 验证不通过直接返回
|
||||
if (editingListenerFieldIndex.value === -1) {
|
||||
fieldsListOfListener.value.push(listenerFieldForm.value)
|
||||
listenerForm.value.fields.push(listenerFieldForm.value)
|
||||
} else {
|
||||
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
|
||||
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
|
||||
}
|
||||
listenerFieldFormModelVisible.value = false
|
||||
nextTick(() => {
|
||||
listenerFieldForm.value = {}
|
||||
})
|
||||
}
|
||||
// 移除监听器字段
|
||||
const removeListenerField = (index) => {
|
||||
ElMessageBox.confirm('确认移除该字段吗?', '提示', {
|
||||
confirmButtonText: '确 认',
|
||||
cancelButtonText: '取 消'
|
||||
})
|
||||
.then(() => {
|
||||
fieldsListOfListener.value.splice(index, 1)
|
||||
listenerForm.value.fields.splice(index, 1)
|
||||
})
|
||||
.catch(() => console.info('操作取消'))
|
||||
}
|
||||
// 移除监听器
|
||||
const removeListener = (index) => {
|
||||
ElMessageBox.confirm('确认移除该监听器吗?', '提示', {
|
||||
confirmButtonText: '确 认',
|
||||
cancelButtonText: '取 消'
|
||||
})
|
||||
.then(() => {
|
||||
bpmnElementListeners.value.splice(index, 1)
|
||||
elementListenersList.value.splice(index, 1)
|
||||
updateElementExtensions(
|
||||
bpmnElement.value,
|
||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
||||
)
|
||||
})
|
||||
.catch(() => console.info('操作取消'))
|
||||
}
|
||||
// 保存监听器配置
|
||||
const saveListenerConfig = async () => {
|
||||
let validateStatus = await listenerFormRef.value.validate()
|
||||
if (!validateStatus) return // 验证不通过直接返回
|
||||
const listenerObject = createListenerObject(listenerForm.value, false, prefix)
|
||||
if (editingListenerIndex.value === -1) {
|
||||
bpmnElementListeners.value.push(listenerObject)
|
||||
elementListenersList.value.push(listenerForm.value)
|
||||
} else {
|
||||
bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
|
||||
elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
|
||||
}
|
||||
// 保存其他配置
|
||||
otherExtensionList.value =
|
||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
||||
(ex) => ex.$type !== `${prefix}:ExecutionListener`
|
||||
) ?? []
|
||||
updateElementExtensions(
|
||||
bpmnElement.value,
|
||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
||||
)
|
||||
// 4. 隐藏侧边栏
|
||||
listenerFormModelVisible.value = false
|
||||
listenerForm.value = {}
|
||||
}
|
||||
|
||||
// 打开监听器弹窗
|
||||
const processListenerDialogRef = ref()
|
||||
const openProcessListenerDialog = async () => {
|
||||
processListenerDialogRef.value.open('execution')
|
||||
}
|
||||
const selectProcessListener = (listener) => {
|
||||
const listenerForm = initListenerForm2(listener)
|
||||
const listenerObject = createListenerObject(listenerForm, false, prefix)
|
||||
bpmnElementListeners.value.push(listenerObject)
|
||||
elementListenersList.value.push(listenerForm)
|
||||
|
||||
// 保存其他配置
|
||||
otherExtensionList.value =
|
||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
||||
(ex) => ex.$type !== `${prefix}:ExecutionListener`
|
||||
) ?? []
|
||||
updateElementExtensions(
|
||||
bpmnElement.value,
|
||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
||||
)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
(val) => {
|
||||
val &&
|
||||
val.length &&
|
||||
nextTick(() => {
|
||||
resetListenersList()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
prop="event"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model="listenerForm.event">
|
||||
<el-select v-model="listenerForm.event" filterable>
|
||||
<el-option
|
||||
v-for="i in Object.keys(listenerEventTypeObject)"
|
||||
:key="i"
|
||||
@@ -83,7 +83,7 @@
|
||||
prop="listenerType"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model="listenerForm.listenerType">
|
||||
<el-select v-model="listenerForm.listenerType" filterable>
|
||||
<el-option
|
||||
v-for="i in Object.keys(listenerTypeObject)"
|
||||
:key="i"
|
||||
@@ -134,7 +134,7 @@
|
||||
key="listener-script-type"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
>
|
||||
<el-select v-model="listenerForm.scriptType">
|
||||
<el-select v-model="listenerForm.scriptType" filterable>
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
<el-option label="外部脚本" value="externalScript" />
|
||||
</el-select>
|
||||
@@ -161,7 +161,7 @@
|
||||
|
||||
<template v-if="listenerForm.event === 'timeout'">
|
||||
<el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
|
||||
<el-select v-model="listenerForm.eventDefinitionType">
|
||||
<el-select v-model="listenerForm.eventDefinitionType" filterable>
|
||||
<el-option label="统计时间" value="date" />
|
||||
<el-option label="持续时长" value="duration" />
|
||||
<el-option label="循环" value="cycle" />
|
||||
@@ -259,7 +259,7 @@
|
||||
prop="fieldType"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model="listenerFieldForm.fieldType">
|
||||
<el-select v-model="listenerFieldForm.fieldType" filterable>
|
||||
<el-option
|
||||
v-for="i in Object.keys(fieldTypeObject)"
|
||||
:key="i"
|
||||
|
||||
@@ -1,280 +1,280 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form label-width="90px">
|
||||
<el-form-item label="快捷配置">
|
||||
<el-button size="small" @click="changeConfig('依次审批')">依次审批</el-button>
|
||||
<el-button size="small" @click="changeConfig('会签')">会签</el-button>
|
||||
<el-button size="small" @click="changeConfig('或签')">或签</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="会签类型">
|
||||
<el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
|
||||
<el-option label="并行多重事件" value="ParallelMultiInstance" />
|
||||
<el-option label="时序多重事件" value="SequentialMultiInstance" />
|
||||
<el-option label="无" value="Null" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<template
|
||||
v-if="
|
||||
loopCharacteristics === 'ParallelMultiInstance' ||
|
||||
loopCharacteristics === 'SequentialMultiInstance'
|
||||
"
|
||||
>
|
||||
<el-form-item label="循环数量" key="loopCardinality">
|
||||
<el-input
|
||||
v-model="loopInstanceForm.loopCardinality"
|
||||
clearable
|
||||
@change="updateLoopCardinality"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="集合" key="collection" v-show="false">
|
||||
<el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
|
||||
</el-form-item>
|
||||
<!-- add by 芋艿:由于「元素变量」暂时用不到,所以这里 display 为 none -->
|
||||
<el-form-item label="元素变量" key="elementVariable" style="display: none">
|
||||
<el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
|
||||
</el-form-item>
|
||||
<el-form-item label="完成条件" key="completionCondition">
|
||||
<el-input
|
||||
v-model="loopInstanceForm.completionCondition"
|
||||
clearable
|
||||
@change="updateLoopCondition"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- add by 芋艿:由于「异步状态」暂时用不到,所以这里 display 为 none -->
|
||||
<el-form-item label="异步状态" key="async" style="display: none">
|
||||
<el-checkbox
|
||||
v-model="loopInstanceForm.asyncBefore"
|
||||
label="异步前"
|
||||
@change="updateLoopAsync('asyncBefore')"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="loopInstanceForm.asyncAfter"
|
||||
label="异步后"
|
||||
@change="updateLoopAsync('asyncAfter')"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="loopInstanceForm.exclusive"
|
||||
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
|
||||
label="排除"
|
||||
@change="updateLoopAsync('exclusive')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="重试周期"
|
||||
prop="timeCycle"
|
||||
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
|
||||
key="timeCycle"
|
||||
>
|
||||
<el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ElementMultiInstance' })
|
||||
|
||||
const props = defineProps({
|
||||
businessObject: Object,
|
||||
type: String
|
||||
})
|
||||
const prefix = inject('prefix')
|
||||
const loopCharacteristics = ref('')
|
||||
//默认配置,用来覆盖原始不存在的选项,避免报错
|
||||
const defaultLoopInstanceForm = ref({
|
||||
completionCondition: '',
|
||||
loopCardinality: '',
|
||||
extensionElements: [],
|
||||
asyncAfter: false,
|
||||
asyncBefore: false,
|
||||
exclusive: false
|
||||
})
|
||||
const loopInstanceForm = ref<any>({})
|
||||
const bpmnElement = ref(null)
|
||||
const multiLoopInstance = ref(null)
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
const getElementLoop = (businessObject) => {
|
||||
if (!businessObject.loopCharacteristics) {
|
||||
loopCharacteristics.value = 'Null'
|
||||
loopInstanceForm.value = {}
|
||||
return
|
||||
}
|
||||
if (businessObject.loopCharacteristics.$type === 'bpmn:StandardLoopCharacteristics') {
|
||||
loopCharacteristics.value = 'StandardLoop'
|
||||
loopInstanceForm.value = {}
|
||||
return
|
||||
}
|
||||
if (businessObject.loopCharacteristics.isSequential) {
|
||||
loopCharacteristics.value = 'SequentialMultiInstance'
|
||||
} else {
|
||||
loopCharacteristics.value = 'ParallelMultiInstance'
|
||||
}
|
||||
// 合并配置
|
||||
loopInstanceForm.value = {
|
||||
...defaultLoopInstanceForm.value,
|
||||
...businessObject.loopCharacteristics,
|
||||
completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? '',
|
||||
loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ''
|
||||
}
|
||||
// 保留当前元素 businessObject 上的 loopCharacteristics 实例
|
||||
multiLoopInstance.value = bpmnInstances().bpmnElement.businessObject.loopCharacteristics
|
||||
// 更新表单
|
||||
if (
|
||||
businessObject.loopCharacteristics.extensionElements &&
|
||||
businessObject.loopCharacteristics.extensionElements.values &&
|
||||
businessObject.loopCharacteristics.extensionElements.values.length
|
||||
) {
|
||||
loopInstanceForm.value['timeCycle'] =
|
||||
businessObject.loopCharacteristics.extensionElements.values[0].body
|
||||
}
|
||||
}
|
||||
|
||||
const changeLoopCharacteristicsType = (type) => {
|
||||
// this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
|
||||
// 取消多实例配置
|
||||
if (type === 'Null') {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
loopCharacteristics: null
|
||||
})
|
||||
return
|
||||
}
|
||||
// 配置循环
|
||||
if (type === 'StandardLoop') {
|
||||
const loopCharacteristicsObject = bpmnInstances().moddle.create(
|
||||
'bpmn:StandardLoopCharacteristics'
|
||||
)
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
loopCharacteristics: loopCharacteristicsObject
|
||||
})
|
||||
multiLoopInstance.value = null
|
||||
return
|
||||
}
|
||||
// 时序
|
||||
if (type === 'SequentialMultiInstance') {
|
||||
multiLoopInstance.value = bpmnInstances().moddle.create(
|
||||
'bpmn:MultiInstanceLoopCharacteristics',
|
||||
{ isSequential: true }
|
||||
)
|
||||
} else {
|
||||
multiLoopInstance.value = bpmnInstances().moddle.create(
|
||||
'bpmn:MultiInstanceLoopCharacteristics',
|
||||
{ collection: '${coll_userList}' }
|
||||
)
|
||||
}
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
loopCharacteristics: toRaw(multiLoopInstance.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 循环基数
|
||||
const updateLoopCardinality = (cardinality) => {
|
||||
let loopCardinality = null
|
||||
if (cardinality && cardinality.length) {
|
||||
loopCardinality = bpmnInstances().moddle.create('bpmn:FormalExpression', {
|
||||
body: cardinality
|
||||
})
|
||||
}
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
loopCardinality
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 完成条件
|
||||
const updateLoopCondition = (condition) => {
|
||||
let completionCondition = null
|
||||
if (condition && condition.length) {
|
||||
completionCondition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
|
||||
body: condition
|
||||
})
|
||||
}
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
completionCondition
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 重试周期
|
||||
const updateLoopTimeCycle = (timeCycle) => {
|
||||
const extensionElements = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
|
||||
values: [
|
||||
bpmnInstances().moddle.create(`${prefix}:FailedJobRetryTimeCycle`, {
|
||||
body: timeCycle
|
||||
})
|
||||
]
|
||||
})
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
extensionElements
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 直接更新的基础信息
|
||||
const updateLoopBase = () => {
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
collection: loopInstanceForm.value.collection || null,
|
||||
elementVariable: loopInstanceForm.value.elementVariable || null
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 各异步状态
|
||||
const updateLoopAsync = (key) => {
|
||||
const { asyncBefore, asyncAfter } = loopInstanceForm.value
|
||||
let asyncAttr = Object.create(null)
|
||||
if (!asyncBefore && !asyncAfter) {
|
||||
// this.$set(this.loopInstanceForm, "exclusive", false);
|
||||
loopInstanceForm.value['exclusive'] = false
|
||||
asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null }
|
||||
} else {
|
||||
asyncAttr[key] = loopInstanceForm.value[key]
|
||||
}
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
asyncAttr
|
||||
)
|
||||
}
|
||||
|
||||
const changeConfig = (config) => {
|
||||
if (config === '依次审批') {
|
||||
changeLoopCharacteristicsType('SequentialMultiInstance')
|
||||
updateLoopCardinality('1')
|
||||
updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
|
||||
} else if (config === '会签') {
|
||||
changeLoopCharacteristicsType('ParallelMultiInstance')
|
||||
updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
|
||||
} else if (config === '或签') {
|
||||
changeLoopCharacteristicsType('ParallelMultiInstance')
|
||||
updateLoopCondition('${ nrOfCompletedInstances > 0 }')
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
multiLoopInstance.value = null
|
||||
bpmnElement.value = null
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.businessObject,
|
||||
(val) => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
getElementLoop(val)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form label-width="90px">
|
||||
<el-form-item label="快捷配置">
|
||||
<el-button size="small" @click="changeConfig('依次审批')">依次审批</el-button>
|
||||
<el-button size="small" @click="changeConfig('会签')">会签</el-button>
|
||||
<el-button size="small" @click="changeConfig('或签')">或签</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="会签类型">
|
||||
<el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType" filterable>
|
||||
<el-option label="并行多重事件" value="ParallelMultiInstance" />
|
||||
<el-option label="时序多重事件" value="SequentialMultiInstance" />
|
||||
<el-option label="无" value="Null" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<template
|
||||
v-if="
|
||||
loopCharacteristics === 'ParallelMultiInstance' ||
|
||||
loopCharacteristics === 'SequentialMultiInstance'
|
||||
"
|
||||
>
|
||||
<el-form-item label="循环数量" key="loopCardinality">
|
||||
<el-input
|
||||
v-model="loopInstanceForm.loopCardinality"
|
||||
clearable
|
||||
@change="updateLoopCardinality"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="集合" key="collection" v-show="false">
|
||||
<el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
|
||||
</el-form-item>
|
||||
<!-- add by 芋艿:由于「元素变量」暂时用不到,所以这里 display 为 none -->
|
||||
<el-form-item label="元素变量" key="elementVariable" style="display: none">
|
||||
<el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
|
||||
</el-form-item>
|
||||
<el-form-item label="完成条件" key="completionCondition">
|
||||
<el-input
|
||||
v-model="loopInstanceForm.completionCondition"
|
||||
clearable
|
||||
@change="updateLoopCondition"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- add by 芋艿:由于「异步状态」暂时用不到,所以这里 display 为 none -->
|
||||
<el-form-item label="异步状态" key="async" style="display: none">
|
||||
<el-checkbox
|
||||
v-model="loopInstanceForm.asyncBefore"
|
||||
label="异步前"
|
||||
@change="updateLoopAsync('asyncBefore')"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="loopInstanceForm.asyncAfter"
|
||||
label="异步后"
|
||||
@change="updateLoopAsync('asyncAfter')"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-model="loopInstanceForm.exclusive"
|
||||
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
|
||||
label="排除"
|
||||
@change="updateLoopAsync('exclusive')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="重试周期"
|
||||
prop="timeCycle"
|
||||
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
|
||||
key="timeCycle"
|
||||
>
|
||||
<el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ElementMultiInstance' })
|
||||
|
||||
const props = defineProps({
|
||||
businessObject: Object,
|
||||
type: String
|
||||
})
|
||||
const prefix = inject('prefix')
|
||||
const loopCharacteristics = ref('')
|
||||
//默认配置,用来覆盖原始不存在的选项,避免报错
|
||||
const defaultLoopInstanceForm = ref({
|
||||
completionCondition: '',
|
||||
loopCardinality: '',
|
||||
extensionElements: [],
|
||||
asyncAfter: false,
|
||||
asyncBefore: false,
|
||||
exclusive: false
|
||||
})
|
||||
const loopInstanceForm = ref<any>({})
|
||||
const bpmnElement = ref(null)
|
||||
const multiLoopInstance = ref(null)
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
const getElementLoop = (businessObject) => {
|
||||
if (!businessObject.loopCharacteristics) {
|
||||
loopCharacteristics.value = 'Null'
|
||||
loopInstanceForm.value = {}
|
||||
return
|
||||
}
|
||||
if (businessObject.loopCharacteristics.$type === 'bpmn:StandardLoopCharacteristics') {
|
||||
loopCharacteristics.value = 'StandardLoop'
|
||||
loopInstanceForm.value = {}
|
||||
return
|
||||
}
|
||||
if (businessObject.loopCharacteristics.isSequential) {
|
||||
loopCharacteristics.value = 'SequentialMultiInstance'
|
||||
} else {
|
||||
loopCharacteristics.value = 'ParallelMultiInstance'
|
||||
}
|
||||
// 合并配置
|
||||
loopInstanceForm.value = {
|
||||
...defaultLoopInstanceForm.value,
|
||||
...businessObject.loopCharacteristics,
|
||||
completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? '',
|
||||
loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ''
|
||||
}
|
||||
// 保留当前元素 businessObject 上的 loopCharacteristics 实例
|
||||
multiLoopInstance.value = bpmnInstances().bpmnElement.businessObject.loopCharacteristics
|
||||
// 更新表单
|
||||
if (
|
||||
businessObject.loopCharacteristics.extensionElements &&
|
||||
businessObject.loopCharacteristics.extensionElements.values &&
|
||||
businessObject.loopCharacteristics.extensionElements.values.length
|
||||
) {
|
||||
loopInstanceForm.value['timeCycle'] =
|
||||
businessObject.loopCharacteristics.extensionElements.values[0].body
|
||||
}
|
||||
}
|
||||
|
||||
const changeLoopCharacteristicsType = (type) => {
|
||||
// this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
|
||||
// 取消多实例配置
|
||||
if (type === 'Null') {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
loopCharacteristics: null
|
||||
})
|
||||
return
|
||||
}
|
||||
// 配置循环
|
||||
if (type === 'StandardLoop') {
|
||||
const loopCharacteristicsObject = bpmnInstances().moddle.create(
|
||||
'bpmn:StandardLoopCharacteristics'
|
||||
)
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
loopCharacteristics: loopCharacteristicsObject
|
||||
})
|
||||
multiLoopInstance.value = null
|
||||
return
|
||||
}
|
||||
// 时序
|
||||
if (type === 'SequentialMultiInstance') {
|
||||
multiLoopInstance.value = bpmnInstances().moddle.create(
|
||||
'bpmn:MultiInstanceLoopCharacteristics',
|
||||
{ isSequential: true }
|
||||
)
|
||||
} else {
|
||||
multiLoopInstance.value = bpmnInstances().moddle.create(
|
||||
'bpmn:MultiInstanceLoopCharacteristics',
|
||||
{ collection: '${coll_userList}' }
|
||||
)
|
||||
}
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
loopCharacteristics: toRaw(multiLoopInstance.value)
|
||||
})
|
||||
}
|
||||
|
||||
// 循环基数
|
||||
const updateLoopCardinality = (cardinality) => {
|
||||
let loopCardinality = null
|
||||
if (cardinality && cardinality.length) {
|
||||
loopCardinality = bpmnInstances().moddle.create('bpmn:FormalExpression', {
|
||||
body: cardinality
|
||||
})
|
||||
}
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
loopCardinality
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 完成条件
|
||||
const updateLoopCondition = (condition) => {
|
||||
let completionCondition = null
|
||||
if (condition && condition.length) {
|
||||
completionCondition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
|
||||
body: condition
|
||||
})
|
||||
}
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
completionCondition
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 重试周期
|
||||
const updateLoopTimeCycle = (timeCycle) => {
|
||||
const extensionElements = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
|
||||
values: [
|
||||
bpmnInstances().moddle.create(`${prefix}:FailedJobRetryTimeCycle`, {
|
||||
body: timeCycle
|
||||
})
|
||||
]
|
||||
})
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
extensionElements
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 直接更新的基础信息
|
||||
const updateLoopBase = () => {
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
{
|
||||
collection: loopInstanceForm.value.collection || null,
|
||||
elementVariable: loopInstanceForm.value.elementVariable || null
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 各异步状态
|
||||
const updateLoopAsync = (key) => {
|
||||
const { asyncBefore, asyncAfter } = loopInstanceForm.value
|
||||
let asyncAttr = Object.create(null)
|
||||
if (!asyncBefore && !asyncAfter) {
|
||||
// this.$set(this.loopInstanceForm, "exclusive", false);
|
||||
loopInstanceForm.value['exclusive'] = false
|
||||
asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null }
|
||||
} else {
|
||||
asyncAttr[key] = loopInstanceForm.value[key]
|
||||
}
|
||||
bpmnInstances().modeling.updateModdleProperties(
|
||||
toRaw(bpmnElement.value),
|
||||
multiLoopInstance.value,
|
||||
asyncAttr
|
||||
)
|
||||
}
|
||||
|
||||
const changeConfig = (config) => {
|
||||
if (config === '依次审批') {
|
||||
changeLoopCharacteristicsType('SequentialMultiInstance')
|
||||
updateLoopCardinality('1')
|
||||
updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
|
||||
} else if (config === '会签') {
|
||||
changeLoopCharacteristicsType('ParallelMultiInstance')
|
||||
updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }')
|
||||
} else if (config === '或签') {
|
||||
changeLoopCharacteristicsType('ParallelMultiInstance')
|
||||
updateLoopCondition('${ nrOfCompletedInstances > 0 }')
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
multiLoopInstance.value = null
|
||||
bpmnElement.value = null
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.businessObject,
|
||||
(val) => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
getElementLoop(val)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -1,125 +1,125 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="消息实例">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
"
|
||||
>
|
||||
<el-select v-model="bindMessageId" @change="updateTaskMessage">
|
||||
<el-option
|
||||
v-for="key in Object.keys(messageMap)"
|
||||
:value="key"
|
||||
:label="messageMap[key]"
|
||||
:key="key"
|
||||
/>
|
||||
</el-select>
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:plus"
|
||||
style="margin-left: 8px"
|
||||
@click="openMessageModel"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-dialog
|
||||
v-model="messageModelVisible"
|
||||
:close-on-click-modal="false"
|
||||
title="创建新消息"
|
||||
width="400px"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form :model="newMessageForm" size="small" label-width="90px">
|
||||
<el-form-item label="消息ID">
|
||||
<el-input v-model="newMessageForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="消息名称">
|
||||
<el-input v-model="newMessageForm.name" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ReceiveTask' })
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
const bindMessageId = ref('')
|
||||
const newMessageForm = ref<any>({})
|
||||
const messageMap = ref<any>({})
|
||||
const messageModelVisible = ref(false)
|
||||
const bpmnElement = ref<any>()
|
||||
const bpmnMessageRefsMap = ref<any>()
|
||||
const bpmnRootElements = ref<any>()
|
||||
|
||||
const bpmnInstances = () => (window as any).bpmnInstances
|
||||
const getBindMessage = () => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
bindMessageId.value = bpmnElement.value.businessObject?.messageRef?.id || '-1'
|
||||
}
|
||||
const openMessageModel = () => {
|
||||
messageModelVisible.value = true
|
||||
newMessageForm.value = {}
|
||||
}
|
||||
const createNewMessage = () => {
|
||||
if (messageMap.value[newMessageForm.value.id]) {
|
||||
message.error('该消息已存在,请修改id后重新保存')
|
||||
return
|
||||
}
|
||||
const newMessage = bpmnInstances().moddle.create('bpmn:Message', newMessageForm.value)
|
||||
bpmnRootElements.value.push(newMessage)
|
||||
messageMap.value[newMessageForm.value.id] = newMessageForm.value.name
|
||||
bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage
|
||||
messageModelVisible.value = false
|
||||
}
|
||||
const updateTaskMessage = (messageId) => {
|
||||
if (messageId === '-1') {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
messageRef: null
|
||||
})
|
||||
} else {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
messageRef: bpmnMessageRefsMap.value[messageId]
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
bpmnMessageRefsMap.value = Object.create(null)
|
||||
bpmnRootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
|
||||
bpmnRootElements.value
|
||||
.filter((el) => el.$type === 'bpmn:Message')
|
||||
.forEach((m) => {
|
||||
bpmnMessageRefsMap.value[m.id] = m
|
||||
messageMap.value[m.id] = m.name
|
||||
})
|
||||
messageMap.value['-1'] = '无'
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null
|
||||
})
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
// bpmnElement.value = bpmnInstances().bpmnElement
|
||||
nextTick(() => {
|
||||
getBindMessage()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="消息实例">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
"
|
||||
>
|
||||
<el-select v-model="bindMessageId" @change="updateTaskMessage" filterable>
|
||||
<el-option
|
||||
v-for="key in Object.keys(messageMap)"
|
||||
:value="key"
|
||||
:label="messageMap[key]"
|
||||
:key="key"
|
||||
/>
|
||||
</el-select>
|
||||
<XButton
|
||||
type="primary"
|
||||
preIcon="ep:plus"
|
||||
style="margin-left: 8px"
|
||||
@click="openMessageModel"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-dialog
|
||||
v-model="messageModelVisible"
|
||||
:close-on-click-modal="false"
|
||||
title="创建新消息"
|
||||
width="400px"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form :model="newMessageForm" size="small" label-width="90px">
|
||||
<el-form-item label="消息ID">
|
||||
<el-input v-model="newMessageForm.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="消息名称">
|
||||
<el-input v-model="newMessageForm.name" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ReceiveTask' })
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
const bindMessageId = ref('')
|
||||
const newMessageForm = ref<any>({})
|
||||
const messageMap = ref<any>({})
|
||||
const messageModelVisible = ref(false)
|
||||
const bpmnElement = ref<any>()
|
||||
const bpmnMessageRefsMap = ref<any>()
|
||||
const bpmnRootElements = ref<any>()
|
||||
|
||||
const bpmnInstances = () => (window as any).bpmnInstances
|
||||
const getBindMessage = () => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
bindMessageId.value = bpmnElement.value.businessObject?.messageRef?.id || '-1'
|
||||
}
|
||||
const openMessageModel = () => {
|
||||
messageModelVisible.value = true
|
||||
newMessageForm.value = {}
|
||||
}
|
||||
const createNewMessage = () => {
|
||||
if (messageMap.value[newMessageForm.value.id]) {
|
||||
message.error('该消息已存在,请修改id后重新保存')
|
||||
return
|
||||
}
|
||||
const newMessage = bpmnInstances().moddle.create('bpmn:Message', newMessageForm.value)
|
||||
bpmnRootElements.value.push(newMessage)
|
||||
messageMap.value[newMessageForm.value.id] = newMessageForm.value.name
|
||||
bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage
|
||||
messageModelVisible.value = false
|
||||
}
|
||||
const updateTaskMessage = (messageId) => {
|
||||
if (messageId === '-1') {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
messageRef: null
|
||||
})
|
||||
} else {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
messageRef: bpmnMessageRefsMap.value[messageId]
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
bpmnMessageRefsMap.value = Object.create(null)
|
||||
bpmnRootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
|
||||
bpmnRootElements.value
|
||||
.filter((el) => el.$type === 'bpmn:Message')
|
||||
.forEach((m) => {
|
||||
bpmnMessageRefsMap.value[m.id] = m
|
||||
messageMap.value[m.id] = m.name
|
||||
})
|
||||
messageMap.value['-1'] = '无'
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null
|
||||
})
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
// bpmnElement.value = bpmnInstances().bpmnElement
|
||||
nextTick(() => {
|
||||
getBindMessage()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -1,99 +1,99 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="脚本格式">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.scriptFormat"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本类型">
|
||||
<el-select v-model="scriptTaskForm.scriptType">
|
||||
<el-option label="内联脚本" value="inline" />
|
||||
<el-option label="外部资源" value="external" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.script"
|
||||
type="textarea"
|
||||
resize="vertical"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.resource"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结果变量">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.resultVariable"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ScriptTask' })
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const defaultTaskForm = ref({
|
||||
scriptFormat: '',
|
||||
script: '',
|
||||
resource: '',
|
||||
resultVariable: ''
|
||||
})
|
||||
const scriptTaskForm = ref<any>({})
|
||||
const bpmnElement = ref()
|
||||
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
const resetTaskForm = () => {
|
||||
for (let key in defaultTaskForm.value) {
|
||||
let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
|
||||
scriptTaskForm.value[key] = value
|
||||
}
|
||||
scriptTaskForm.value.scriptType = scriptTaskForm.value.script ? 'inline' : 'external'
|
||||
}
|
||||
const updateElementTask = () => {
|
||||
let taskAttr = Object.create(null)
|
||||
taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null
|
||||
taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null
|
||||
if (scriptTaskForm.value.scriptType === 'inline') {
|
||||
taskAttr.script = scriptTaskForm.value.script || null
|
||||
taskAttr.resource = null
|
||||
} else {
|
||||
taskAttr.resource = scriptTaskForm.value.resource || null
|
||||
taskAttr.script = null
|
||||
}
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
nextTick(() => {
|
||||
resetTaskForm()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-form-item label="脚本格式">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.scriptFormat"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本类型">
|
||||
<el-select v-model="scriptTaskForm.scriptType" filterable>
|
||||
<el-option label="内联脚本" value="inline" />
|
||||
<el-option label="外部资源" value="external" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.script"
|
||||
type="textarea"
|
||||
resize="vertical"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.resource"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结果变量">
|
||||
<el-input
|
||||
v-model="scriptTaskForm.resultVariable"
|
||||
clearable
|
||||
@input="updateElementTask()"
|
||||
@change="updateElementTask()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'ScriptTask' })
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const defaultTaskForm = ref({
|
||||
scriptFormat: '',
|
||||
script: '',
|
||||
resource: '',
|
||||
resultVariable: ''
|
||||
})
|
||||
const scriptTaskForm = ref<any>({})
|
||||
const bpmnElement = ref()
|
||||
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
const resetTaskForm = () => {
|
||||
for (let key in defaultTaskForm.value) {
|
||||
let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
|
||||
scriptTaskForm.value[key] = value
|
||||
}
|
||||
scriptTaskForm.value.scriptType = scriptTaskForm.value.script ? 'inline' : 'external'
|
||||
}
|
||||
const updateElementTask = () => {
|
||||
let taskAttr = Object.create(null)
|
||||
taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null
|
||||
taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null
|
||||
if (scriptTaskForm.value.scriptType === 'inline') {
|
||||
taskAttr.script = scriptTaskForm.value.script || null
|
||||
taskAttr.resource = null
|
||||
} else {
|
||||
taskAttr.resource = scriptTaskForm.value.resource || null
|
||||
taskAttr.script = null
|
||||
}
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
nextTick(() => {
|
||||
resetTaskForm()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
@@ -1,185 +1,188 @@
|
||||
<template>
|
||||
<el-form label-width='100px'>
|
||||
<el-form-item label='规则类型' prop='candidateStrategy'>
|
||||
<el-select
|
||||
v-model='userTaskForm.candidateStrategy'
|
||||
clearable
|
||||
style='width: 100%'
|
||||
@change='changeCandidateStrategy'
|
||||
>
|
||||
<el-option
|
||||
v-for='dict in RuleTypeList'
|
||||
:key='dict.code'
|
||||
:label='dict.name'
|
||||
:value='dict.code'
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if='userTaskForm.candidateStrategy == 10'
|
||||
label='指定角色'
|
||||
prop='candidateParam'
|
||||
>
|
||||
<el-select
|
||||
v-model='userTaskForm.candidateParam'
|
||||
clearable
|
||||
multiple
|
||||
style='width: 100%'
|
||||
@change='updateElementTask'
|
||||
>
|
||||
<el-option v-for='item in roleOptions' :key='item.id' :label='item.name' :value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if='userTaskForm.candidateStrategy == 20'
|
||||
label='指定部门'
|
||||
prop='candidateParam'
|
||||
span='24'
|
||||
>
|
||||
<el-tree-select
|
||||
ref='treeRef'
|
||||
v-model='userTaskForm.candidateParam'
|
||||
:data='deptTreeOptions'
|
||||
:props='defaultProps'
|
||||
empty-text='加载中,请稍后'
|
||||
multiple
|
||||
node-key='id'
|
||||
show-checkbox
|
||||
@change='updateElementTask'
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if='userTaskForm.candidateStrategy == 30'
|
||||
label='指定用户'
|
||||
prop='candidateParam'
|
||||
span='24'
|
||||
>
|
||||
<el-select
|
||||
v-model='userTaskForm.candidateParam'
|
||||
clearable
|
||||
multiple
|
||||
style='width: 100%'
|
||||
@change='updateElementTask'
|
||||
>
|
||||
<el-option
|
||||
v-for='item in userOptions'
|
||||
:key='item.id'
|
||||
:label='item.name'
|
||||
:value='item.id'
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { defaultProps, handleTree } from '@/utils/tree'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dictData = useDictData()
|
||||
const RuleTypeList = ref()
|
||||
import { getRoleSimpleList } from '@/api/user-boot/role'
|
||||
import { getUserSimpleList } from '@/api/user-boot/user'
|
||||
|
||||
defineOptions({ name: 'UserTask' })
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const userTaskForm = ref({
|
||||
candidateStrategy: '', // 分配规则
|
||||
candidateParam: [] // 分配选项
|
||||
})
|
||||
const bpmnElement = ref()
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
export interface optionVO {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
|
||||
const roleOptions = ref<optionVO[]>([]) // 角色列表
|
||||
const userOptions = ref<optionVO[]>([]) // 用户列表
|
||||
const deptTreeOptions = ref() // 部门树
|
||||
|
||||
const resetTaskForm = () => {
|
||||
const businessObject = bpmnElement.value.businessObject
|
||||
if (!businessObject) {
|
||||
return
|
||||
}
|
||||
if (businessObject.candidateStrategy != undefined) {
|
||||
userTaskForm.value.candidateStrategy = businessObject.candidateStrategy
|
||||
} else {
|
||||
userTaskForm.value.candidateStrategy = undefined
|
||||
}
|
||||
if (businessObject.candidateParam && businessObject.candidateParam.length > 0) {
|
||||
if (userTaskForm.value.candidateStrategy === 60) {
|
||||
// 特殊:流程表达式,只有一个 input 输入框
|
||||
userTaskForm.value.candidateParam = [businessObject.candidateParam]
|
||||
} else {
|
||||
userTaskForm.value.candidateParam = businessObject.candidateParam.split(',')
|
||||
}
|
||||
} else {
|
||||
userTaskForm.value.candidateParam = []
|
||||
}
|
||||
}
|
||||
|
||||
/** 更新 candidateStrategy 字段时,需要清空 candidateParam,并触发 bpmn 图更新 */
|
||||
const changeCandidateStrategy = () => {
|
||||
userTaskForm.value.candidateParam = []
|
||||
updateElementTask()
|
||||
}
|
||||
|
||||
/** 选中某个 options 时候,更新 bpmn 图 */
|
||||
const updateElementTask = () => {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
candidateStrategy: userTaskForm.value.candidateStrategy,
|
||||
candidateParam: userTaskForm.value.candidateParam.join(',')
|
||||
})
|
||||
}
|
||||
|
||||
// 打开监听器弹窗
|
||||
const processExpressionDialogRef = ref()
|
||||
const openProcessExpressionDialog = async () => {
|
||||
processExpressionDialogRef.value.open()
|
||||
}
|
||||
const selectProcessExpression = (expression) => {
|
||||
userTaskForm.value.candidateParam = [expression.expression]
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
nextTick(() => {
|
||||
resetTaskForm()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
// 获得角色列表
|
||||
await getRoleSimpleList().then(res => {
|
||||
roleOptions.value = res.data
|
||||
})
|
||||
|
||||
// 获得用户列表
|
||||
await getUserSimpleList().then(res => {
|
||||
userOptions.value = res.data
|
||||
})
|
||||
//传入type的名称
|
||||
RuleTypeList.value = dictData.getBasicData('rule_type')
|
||||
|
||||
//
|
||||
// // 获得部门列表
|
||||
// const deptOptions = await DeptApi.getSimpleDeptList()
|
||||
// deptTreeOptions.value = handleTree(deptOptions, 'id')
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<el-form label-width='100px'>
|
||||
<el-form-item label='规则类型' prop='candidateStrategy'>
|
||||
<el-select
|
||||
v-model='userTaskForm.candidateStrategy'
|
||||
clearable
|
||||
style='width: 100%'
|
||||
@change='changeCandidateStrategy'
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for='dict in RuleTypeList'
|
||||
:key='dict.code'
|
||||
:label='dict.name'
|
||||
:value='dict.code'
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if='userTaskForm.candidateStrategy == 10'
|
||||
label='指定角色'
|
||||
prop='candidateParam'
|
||||
>
|
||||
<el-select
|
||||
v-model='userTaskForm.candidateParam'
|
||||
clearable
|
||||
multiple
|
||||
style='width: 100%'
|
||||
@change='updateElementTask'
|
||||
filterable
|
||||
>
|
||||
<el-option v-for='item in roleOptions' :key='item.id' :label='item.name' :value='item.id' />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if='userTaskForm.candidateStrategy == 20'
|
||||
label='指定部门'
|
||||
prop='candidateParam'
|
||||
span='24'
|
||||
>
|
||||
<el-tree-select
|
||||
ref='treeRef'
|
||||
v-model='userTaskForm.candidateParam'
|
||||
:data='deptTreeOptions'
|
||||
:props='defaultProps'
|
||||
empty-text='加载中,请稍后'
|
||||
multiple
|
||||
node-key='id'
|
||||
show-checkbox
|
||||
@change='updateElementTask'
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if='userTaskForm.candidateStrategy == 30'
|
||||
label='指定用户'
|
||||
prop='candidateParam'
|
||||
span='24'
|
||||
>
|
||||
<el-select
|
||||
v-model='userTaskForm.candidateParam'
|
||||
clearable
|
||||
multiple
|
||||
style='width: 100%'
|
||||
@change='updateElementTask'
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for='item in userOptions'
|
||||
:key='item.id'
|
||||
:label='item.name'
|
||||
:value='item.id'
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { defaultProps, handleTree } from '@/utils/tree'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dictData = useDictData()
|
||||
const RuleTypeList = ref()
|
||||
import { getRoleSimpleList } from '@/api/user-boot/role'
|
||||
import { getUserSimpleList } from '@/api/user-boot/user'
|
||||
|
||||
defineOptions({ name: 'UserTask' })
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
})
|
||||
const userTaskForm = ref({
|
||||
candidateStrategy: '', // 分配规则
|
||||
candidateParam: [] // 分配选项
|
||||
})
|
||||
const bpmnElement = ref()
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
export interface optionVO {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
|
||||
const roleOptions = ref<optionVO[]>([]) // 角色列表
|
||||
const userOptions = ref<optionVO[]>([]) // 用户列表
|
||||
const deptTreeOptions = ref() // 部门树
|
||||
|
||||
const resetTaskForm = () => {
|
||||
const businessObject = bpmnElement.value.businessObject
|
||||
if (!businessObject) {
|
||||
return
|
||||
}
|
||||
if (businessObject.candidateStrategy != undefined) {
|
||||
userTaskForm.value.candidateStrategy = businessObject.candidateStrategy
|
||||
} else {
|
||||
userTaskForm.value.candidateStrategy = undefined
|
||||
}
|
||||
if (businessObject.candidateParam && businessObject.candidateParam.length > 0) {
|
||||
if (userTaskForm.value.candidateStrategy === 60) {
|
||||
// 特殊:流程表达式,只有一个 input 输入框
|
||||
userTaskForm.value.candidateParam = [businessObject.candidateParam]
|
||||
} else {
|
||||
userTaskForm.value.candidateParam = businessObject.candidateParam.split(',')
|
||||
}
|
||||
} else {
|
||||
userTaskForm.value.candidateParam = []
|
||||
}
|
||||
}
|
||||
|
||||
/** 更新 candidateStrategy 字段时,需要清空 candidateParam,并触发 bpmn 图更新 */
|
||||
const changeCandidateStrategy = () => {
|
||||
userTaskForm.value.candidateParam = []
|
||||
updateElementTask()
|
||||
}
|
||||
|
||||
/** 选中某个 options 时候,更新 bpmn 图 */
|
||||
const updateElementTask = () => {
|
||||
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
|
||||
candidateStrategy: userTaskForm.value.candidateStrategy,
|
||||
candidateParam: userTaskForm.value.candidateParam.join(',')
|
||||
})
|
||||
}
|
||||
|
||||
// 打开监听器弹窗
|
||||
const processExpressionDialogRef = ref()
|
||||
const openProcessExpressionDialog = async () => {
|
||||
processExpressionDialogRef.value.open()
|
||||
}
|
||||
const selectProcessExpression = (expression) => {
|
||||
userTaskForm.value.candidateParam = [expression.expression]
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
() => {
|
||||
bpmnElement.value = bpmnInstances().bpmnElement
|
||||
nextTick(() => {
|
||||
resetTaskForm()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
// 获得角色列表
|
||||
await getRoleSimpleList().then(res => {
|
||||
roleOptions.value = res.data
|
||||
})
|
||||
|
||||
// 获得用户列表
|
||||
await getUserSimpleList().then(res => {
|
||||
userOptions.value = res.data
|
||||
})
|
||||
//传入type的名称
|
||||
RuleTypeList.value = dictData.getBasicData('rule_type')
|
||||
|
||||
//
|
||||
// // 获得部门列表
|
||||
// const deptOptions = await DeptApi.getSimpleDeptList()
|
||||
// deptTreeOptions.value = handleTree(deptOptions, 'id')
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -126,7 +126,8 @@ const prop = defineProps({
|
||||
width: { type: [String, Number] },
|
||||
height: { type: [String, Number] },
|
||||
timeKey: { type: [String, Number] },
|
||||
timeValue: { type: Object }
|
||||
timeValue: { type: Object },
|
||||
searchKey: { type: [String, Number] }
|
||||
})
|
||||
|
||||
const headerHeight = ref(57)
|
||||
@@ -347,22 +348,22 @@ onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
() => prop.searchKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue,
|
||||
// watch(
|
||||
// () => prop.timeValue,
|
||||
|
||||
val => {
|
||||
tableStore.index()
|
||||
},
|
||||
// val => {
|
||||
// tableStore.index()
|
||||
// },
|
||||
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
// {
|
||||
// deep: true
|
||||
// }
|
||||
// )
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
|
||||
@@ -122,7 +122,8 @@ const prop = defineProps({
|
||||
width: { type: [String, Number] },
|
||||
height: { type: [String, Number] },
|
||||
timeKey: { type: [String, Number] },
|
||||
timeValue: { type: Object }
|
||||
timeValue: { type: Object },
|
||||
searchKey: { type: [String, Number] }
|
||||
})
|
||||
|
||||
const headerHeight = ref(57)
|
||||
@@ -183,7 +184,7 @@ const tableStore: any = new TableStore({
|
||||
if (tableStore.table.params.statisticalType.name == '终端厂家') {
|
||||
return k.citTotalNum != 0
|
||||
} else {
|
||||
return k.citName != '上送国网' && k.citName != '非上送国网'
|
||||
return !k.citName.includes('上送')
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -329,22 +330,22 @@ onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
() => prop.searchKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue,
|
||||
// watch(
|
||||
// () => prop.timeValue,
|
||||
|
||||
val => {
|
||||
tableStore.index()
|
||||
},
|
||||
// val => {
|
||||
// tableStore.index()
|
||||
// },
|
||||
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
// {
|
||||
// deep: true
|
||||
// }
|
||||
// )
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
|
||||
@@ -7,7 +7,8 @@
|
||||
@selectChange="selectChange"
|
||||
datePicker
|
||||
v-if="fullscreen"
|
||||
></TableHeader>
|
||||
>
|
||||
</TableHeader>
|
||||
<div
|
||||
class="monitoringPoints"
|
||||
:style="{
|
||||
@@ -120,7 +121,8 @@ const prop = defineProps({
|
||||
width: { type: [String, Number] },
|
||||
height: { type: [String, Number] },
|
||||
timeKey: { type: [String, Number] },
|
||||
timeValue: { type: Object }
|
||||
timeValue: { type: Object },
|
||||
searchKey: { type: [String, Number] }
|
||||
})
|
||||
|
||||
const headerHeight = ref(57)
|
||||
@@ -181,7 +183,7 @@ const tableStore: any = new TableStore({
|
||||
if (tableStore.table.params.statisticalType.name == '终端厂家') {
|
||||
return k.citTotalNum != 0
|
||||
} else {
|
||||
return k.citName != '上送国网' && k.citName != '非上送国网'
|
||||
return !k.citName.includes('上送')
|
||||
}
|
||||
})
|
||||
|
||||
@@ -328,22 +330,22 @@ onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
() => prop.searchKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue,
|
||||
// watch(
|
||||
// () => prop.timeValue,
|
||||
|
||||
val => {
|
||||
tableStore.index()
|
||||
},
|
||||
// val => {
|
||||
// tableStore.index()
|
||||
// },
|
||||
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
// {
|
||||
// deep: true
|
||||
// }
|
||||
// )
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
|
||||
@@ -150,7 +150,8 @@ const prop = defineProps({
|
||||
width: { type: [String, Number] },
|
||||
height: { type: [String, Number] },
|
||||
timeKey: { type: [String, Number] },
|
||||
timeValue: { type: Object }
|
||||
timeValue: { type: Object },
|
||||
searchKey: { type: [String, Number] }
|
||||
})
|
||||
|
||||
const headerHeight = ref(57)
|
||||
@@ -233,7 +234,7 @@ const tableStore: any = new TableStore({
|
||||
if (tableStore.table.params.statisticalType.name == '终端厂家') {
|
||||
return k.count != 0
|
||||
} else {
|
||||
return k.name != '上送国网' && k.name != '非上送国网'
|
||||
return !k.name.includes('上送')
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -246,22 +247,28 @@ onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
() => prop.searchKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => prop.timeValue,
|
||||
// watch(
|
||||
// () => prop.timeKey,
|
||||
// val => {
|
||||
// tableStore.index()
|
||||
// }
|
||||
// )
|
||||
// watch(
|
||||
// () => prop.timeValue,
|
||||
|
||||
val => {
|
||||
tableStore.index()
|
||||
},
|
||||
// val => {
|
||||
// tableStore.index()
|
||||
// },
|
||||
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
// {
|
||||
// deep: true
|
||||
// }
|
||||
// )
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
|
||||
@@ -169,7 +169,7 @@ const handlerBar = (options: any) => {
|
||||
if (Array.isArray(options.series)) {
|
||||
options.series.forEach((item: any) => {
|
||||
if (item.type === 'bar') {
|
||||
item.barMinHeight = 10
|
||||
item.barMinHeight = 0
|
||||
item.barMaxWidth = 20
|
||||
item.itemStyle = Object.assign(
|
||||
{
|
||||
|
||||
@@ -6,29 +6,40 @@
|
||||
</div>
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="暂态波形上送" :style="'height:' + vhh">
|
||||
<el-table stripe :data="Data" :height="height" border style="width: 100%"
|
||||
header-cell-class-name="table_header">
|
||||
<el-table-column align="center" prop="number" label="事件段"></el-table-column>
|
||||
<el-table-column align="center" prop="number" label="波形起始点相位(°)">
|
||||
<el-table-column align="center" prop="number" label="A相"></el-table-column>
|
||||
<el-table-column align="center" prop="number" label="B相"></el-table-column>
|
||||
<el-table-column align="center" prop="number" label="C相"></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="number" label="跳变段电压变化率(V/ms)">
|
||||
<el-table-column align="center" prop="number" label="A相"></el-table-column>
|
||||
<el-table-column align="center" prop="number" label="B相"></el-table-column>
|
||||
<el-table-column align="center" prop="number" label="C相"></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="number" label="相位跳变(°)">
|
||||
<el-table-column align="center" prop="number" label="A相"></el-table-column>
|
||||
<el-table-column align="center" prop="number" label="B相"></el-table-column>
|
||||
<el-table-column align="center" prop="number" label="C相"></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="number" label="总分段数目"></el-table-column>
|
||||
<el-table-column align="center" prop="number" label="三相电压不平衡度(%)" width="180"></el-table-column>
|
||||
<el-table-column align="center" prop="number" label="触发类型"></el-table-column>
|
||||
<el-table-column align="center" prop="number" label="暂降原因"></el-table-column>
|
||||
</el-table>
|
||||
<vxe-table
|
||||
stripe
|
||||
:data="Data"
|
||||
:height="height"
|
||||
border
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<vxe-column align="center" field="number" title="事件段"></vxe-column>
|
||||
<vxe-colgroup align="center" field="number1" title="波形起始点相位(°)">
|
||||
<vxe-column align="center" field="number2" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="number3" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="number4" title="C相"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup align="center" field="number" title="跳变段电压变化率(V/ms)">
|
||||
<vxe-column align="center" field="number5" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="number6" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="number7" title="C相"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup align="center" field="number" title="相位跳变(°)">
|
||||
<vxe-column align="center" field="number8" title="A相"></vxe-column>
|
||||
<vxe-column align="center" field="number9" title="B相"></vxe-column>
|
||||
<vxe-column align="center" field="number10" title="C相"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
<vxe-column align="center" field="number11" title="总分段数目"></vxe-column>
|
||||
<vxe-column
|
||||
align="center"
|
||||
field="number12"
|
||||
title="三相电压不平衡度(%)"
|
||||
width="180"
|
||||
></vxe-column>
|
||||
<vxe-column align="center" field="number13" title="触发类型"></vxe-column>
|
||||
<vxe-column align="center" field="number14" title="暂降原因"></vxe-column>
|
||||
</vxe-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
@@ -73,7 +84,25 @@ export default {
|
||||
subName: '',
|
||||
waveDatas: [],
|
||||
|
||||
Data: [],
|
||||
Data: [
|
||||
{
|
||||
number: 1,
|
||||
number1: 0,
|
||||
number2: 0,
|
||||
number3: 0,
|
||||
number4: 0,
|
||||
number5: 0,
|
||||
number6: 0,
|
||||
number7: 0,
|
||||
number8: 0,
|
||||
number9: 0,
|
||||
number10: 0,
|
||||
number11: 1,
|
||||
number12: 0,
|
||||
number13: '其他',
|
||||
number14: '其他'
|
||||
}
|
||||
],
|
||||
height: null,
|
||||
vhh: null,
|
||||
ptpass: '',
|
||||
@@ -88,7 +117,7 @@ export default {
|
||||
zoom: ''
|
||||
}
|
||||
},
|
||||
created() { },
|
||||
created() {},
|
||||
watch: {
|
||||
value: function (a, b) {
|
||||
if (a == 2) {
|
||||
@@ -116,10 +145,10 @@ export default {
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
if (this.flag) {
|
||||
// console.log(123);
|
||||
this.vh = mainHeight(250).height
|
||||
this.vh = mainHeight(280).height
|
||||
} else {
|
||||
// console.log(3333);
|
||||
this.vh = mainHeight(270).height
|
||||
this.vh = mainHeight(305).height
|
||||
}
|
||||
},
|
||||
query() {
|
||||
@@ -197,6 +226,8 @@ export default {
|
||||
'#FF9999'
|
||||
]
|
||||
}
|
||||
console.log('🚀 ~ this.boxoList:', this.boxoList)
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
top: '10px',
|
||||
@@ -239,7 +270,7 @@ export default {
|
||||
|
||||
title: {
|
||||
left: 'center',
|
||||
text: '发生时刻:' + this.boxoList.startTime + ' PT变化:' + this.boxoList.measurementPointName,
|
||||
text: '发生时刻:' + this.boxoList.startTime + ' PT变化:' + this.boxoList.pt,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: _this.DColor ? '#fff' : echartsColor.WordColor
|
||||
@@ -378,6 +409,33 @@ export default {
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '跳变期',
|
||||
type: 'line',
|
||||
data: [],
|
||||
showSymbol: true, // 强制显示标记
|
||||
symbol: 'rect', // 标记形状为方块
|
||||
symbolSize: 10, // 方块大小
|
||||
itemStyle: {
|
||||
color: '#888888', // 方块颜色为灰色
|
||||
borderWidth: 0
|
||||
},
|
||||
|
||||
markArea: {
|
||||
silent: true, // 不响应交互
|
||||
itemStyle: { color: '#ccc' },
|
||||
data: [
|
||||
[
|
||||
{ xAxis: '0' }, // 第一个跳变期起始
|
||||
{ xAxis: '5' } // 第一个跳变期结束
|
||||
],
|
||||
[
|
||||
{ xAxis: '210' }, // 第二个跳变期起始
|
||||
{ xAxis: '220' } // 第二个跳变期结束
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'A相',
|
||||
type: 'line',
|
||||
|
||||
1498
src/components/echarts/gaoji.js
Normal file
1498
src/components/echarts/gaoji.js
Normal file
File diff suppressed because it is too large
Load Diff
322
src/components/echarts/rmsWorker.js
Normal file
322
src/components/echarts/rmsWorker.js
Normal file
@@ -0,0 +1,322 @@
|
||||
// 辅助函数
|
||||
const getMax = (temp, tempA, tempB, tempC) => {
|
||||
temp = temp > tempA ? temp : tempA
|
||||
temp = temp > tempB ? temp : tempB
|
||||
if (tempC !== undefined) {
|
||||
temp = temp > tempC ? temp : tempC
|
||||
}
|
||||
return temp
|
||||
}
|
||||
|
||||
const getMaxTwo = (temp, tempA, tempB) => {
|
||||
temp = temp > tempA ? temp : tempA
|
||||
temp = temp > tempB ? temp : tempB
|
||||
return temp
|
||||
}
|
||||
|
||||
const getMin = (temp, tempA, tempB, tempC) => {
|
||||
temp = temp < tempA ? temp : tempA
|
||||
temp = temp < tempB ? temp : tempB
|
||||
if (tempC !== undefined) {
|
||||
temp = temp < tempC ? temp : tempC
|
||||
}
|
||||
return temp
|
||||
}
|
||||
|
||||
const getMinOpen = (temp, tempA, tempB) => {
|
||||
temp = temp < tempA ? temp : tempA
|
||||
temp = temp < tempB ? temp : tempB
|
||||
return temp
|
||||
}
|
||||
|
||||
// 数据处理函数
|
||||
const fliteWaveData = (wp, step, iphasicValue, isOpen) => {
|
||||
const rmsData = wp.listRmsData
|
||||
const pt = Number(wp.pt) / 1000
|
||||
const ct = Number(wp.ct)
|
||||
const titleList = wp.waveTitle
|
||||
let xishu = pt
|
||||
let aTitle = '',
|
||||
bTitle = '',
|
||||
cTitle = '',
|
||||
unit = '电压'
|
||||
let rmsvFirstX = 0,
|
||||
rmsvFirstY = 0,
|
||||
rmsvSecondX = 0,
|
||||
rmsvSecondY = 0,
|
||||
firstZhou = 'a',
|
||||
secondeZhou = 'a'
|
||||
let ifmax = 0,
|
||||
ifmin = 0,
|
||||
ismax = 0,
|
||||
ismin = 0,
|
||||
rfmax = 0,
|
||||
rfmin = 0,
|
||||
rsmax = 0,
|
||||
rsmin = 0
|
||||
|
||||
const shunshiFA = []
|
||||
const shunshiFB = []
|
||||
const shunshiFC = []
|
||||
const shunshiSA = []
|
||||
const shunshiSB = []
|
||||
const shunshiSC = []
|
||||
const rmsFA = []
|
||||
const rmsFB = []
|
||||
const rmsFC = []
|
||||
const rmsSA = []
|
||||
const rmsSB = []
|
||||
const rmsSC = []
|
||||
|
||||
if (titleList[iphasicValue * step + 1]?.substring(0, 1) !== 'U') {
|
||||
xishu = ct
|
||||
unit = '电流'
|
||||
}
|
||||
|
||||
for (let i = 1; i <= iphasicValue; i++) {
|
||||
switch (i) {
|
||||
case 1:
|
||||
aTitle = titleList[iphasicValue * step + i]?.substring(1) || ''
|
||||
break
|
||||
case 2:
|
||||
bTitle = titleList[iphasicValue * step + i]?.substring(1) || ''
|
||||
break
|
||||
case 3:
|
||||
cTitle = titleList[iphasicValue * step + i]?.substring(1) || ''
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (rmsData[0] && rmsData[0][iphasicValue * step + 1] !== undefined) {
|
||||
rfmax = rmsData[0][iphasicValue * step + 1] * xishu
|
||||
rfmin = rmsData[0][iphasicValue * step + 1] * xishu
|
||||
rmsvFirstY = rmsData[0][iphasicValue * step + 1] * xishu
|
||||
rmsvFirstX = rmsData[0][0]
|
||||
rsmax = rmsData[0][iphasicValue * step + 1]
|
||||
rsmin = rmsData[0][iphasicValue * step + 1]
|
||||
rmsvSecondY = rmsData[0][iphasicValue * step + 1]
|
||||
rmsvSecondX = rmsData[0][0]
|
||||
}
|
||||
|
||||
for (let rms = 0; rms < rmsData.length; rms++) {
|
||||
if (!rmsData[rms] || rmsData[rms][iphasicValue * step + 1] === undefined) {
|
||||
break
|
||||
}
|
||||
|
||||
switch (iphasicValue) {
|
||||
case 1:
|
||||
const rmsFirstA = rmsData[rms][iphasicValue * step + 1] * xishu
|
||||
rmsFA.push([rmsData[rms][0], rmsFirstA])
|
||||
rfmax = rfmax > rmsFirstA ? rfmax : rmsFirstA
|
||||
rfmin = rfmin < rmsFirstA ? rfmin : rmsFirstA
|
||||
if (rfmin < rmsvFirstY) {
|
||||
rmsvFirstY = rfmin
|
||||
firstZhou = 'a'
|
||||
rmsvFirstX = rmsData[rms][0]
|
||||
}
|
||||
|
||||
const rmsSecondA = rmsData[rms][iphasicValue * step + 1]
|
||||
rmsSA.push([rmsData[rms][0], rmsSecondA])
|
||||
rsmax = rsmax > rmsSecondA ? rsmax : rmsSecondA
|
||||
rsmin = rsmin < rmsSecondA ? rsmin : rmsSecondA
|
||||
if (rsmin < rmsvSecondY) {
|
||||
rmsvSecondY = rsmin
|
||||
secondeZhou = 'a'
|
||||
rmsvSecondX = rmsData[rms][0]
|
||||
}
|
||||
break
|
||||
case 2:
|
||||
const rmsFirstA2 = rmsData[rms][iphasicValue * step + 1] * xishu
|
||||
const rmsFirstB2 = rmsData[rms][iphasicValue * step + 2] * xishu
|
||||
rmsFA.push([rmsData[rms][0], rmsFirstA2])
|
||||
rmsFB.push([rmsData[rms][0], rmsFirstB2])
|
||||
rfmax = getMaxTwo(rfmax, rmsFirstA2, rmsFirstB2)
|
||||
rfmin = getMinOpen(rfmin, rmsFirstA2, rmsFirstB2)
|
||||
if (rfmin < rmsvFirstY) {
|
||||
rmsvFirstY = rfmin
|
||||
if (rfmin === rmsFirstA2) {
|
||||
firstZhou = 'a'
|
||||
} else if (rfmin === rmsFirstB2) {
|
||||
firstZhou = 'b'
|
||||
}
|
||||
rmsvFirstX = rmsData[rms][0]
|
||||
}
|
||||
|
||||
const rmsSecondA2 = rmsData[rms][iphasicValue * step + 1]
|
||||
const rmsSecondB2 = rmsData[rms][iphasicValue * step + 2]
|
||||
rmsSA.push([rmsData[rms][0], rmsSecondA2])
|
||||
rmsSB.push([rmsData[rms][0], rmsSecondB2])
|
||||
rsmax = getMaxTwo(rsmax, rmsSecondA2, rmsSecondB2)
|
||||
rsmin = getMinOpen(rsmin, rmsSecondA2, rmsSecondB2)
|
||||
if (rsmin < rmsvSecondY) {
|
||||
rmsvSecondY = rsmin
|
||||
if (rsmin === rmsSecondA2) {
|
||||
secondeZhou = 'a'
|
||||
} else if (rsmin === rmsSecondB2) {
|
||||
secondeZhou = 'b'
|
||||
}
|
||||
rmsvSecondX = rmsData[rms][0]
|
||||
}
|
||||
break
|
||||
case 3:
|
||||
const rmsFirstA3 = rmsData[rms][iphasicValue * step + 1] * xishu
|
||||
const rmsFirstB3 = rmsData[rms][iphasicValue * step + 2] * xishu
|
||||
const rmsFirstC3 = rmsData[rms][iphasicValue * step + 3] * xishu
|
||||
rmsFA.push([rmsData[rms][0], rmsFirstA3])
|
||||
rmsFB.push([rmsData[rms][0], rmsFirstB3])
|
||||
rmsFC.push([rmsData[rms][0], rmsFirstC3])
|
||||
rfmax = getMax(rfmax, rmsFirstA3, rmsFirstB3, rmsFirstC3)
|
||||
rfmin = isOpen
|
||||
? getMinOpen(rfmin, rmsFirstA3, rmsFirstC3)
|
||||
: getMin(rfmin, rmsFirstA3, rmsFirstB3, rmsFirstC3)
|
||||
if (rfmin < rmsvFirstY) {
|
||||
rmsvFirstY = rfmin
|
||||
if (rfmin === rmsFirstA3) {
|
||||
firstZhou = 'a'
|
||||
} else if (rfmin === rmsFirstB3) {
|
||||
firstZhou = 'b'
|
||||
} else {
|
||||
firstZhou = 'c'
|
||||
}
|
||||
rmsvFirstX = rmsData[rms][0]
|
||||
}
|
||||
|
||||
const rmsSecondA3 = rmsData[rms][iphasicValue * step + 1]
|
||||
const rmsSecondB3 = rmsData[rms][iphasicValue * step + 2]
|
||||
const rmsSecondC3 = rmsData[rms][iphasicValue * step + 3]
|
||||
rmsSA.push([rmsData[rms][0], rmsSecondA3])
|
||||
rmsSB.push([rmsData[rms][0], rmsSecondB3])
|
||||
rmsSC.push([rmsData[rms][0], rmsSecondC3])
|
||||
rsmax = getMax(rsmax, rmsSecondA3, rmsSecondB3, rmsSecondC3)
|
||||
rsmin = isOpen
|
||||
? getMinOpen(rsmin, rmsSecondA3, rmsSecondC3)
|
||||
: getMin(rsmin, rmsSecondA3, rmsSecondB3, rmsSecondC3)
|
||||
if (rsmin < rmsvSecondY) {
|
||||
rmsvSecondY = rsmin
|
||||
if (rsmin === rmsSecondA3) {
|
||||
secondeZhou = 'a'
|
||||
} else if (rsmin === rmsSecondB3) {
|
||||
secondeZhou = 'b'
|
||||
} else {
|
||||
secondeZhou = 'c'
|
||||
}
|
||||
rmsvSecondX = rmsData[rms][0]
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const instantF = { max: ifmax, min: ifmin }
|
||||
const instantS = { max: ismax, min: ismin }
|
||||
const RMSF = { max: rfmax, min: rfmin }
|
||||
const RMSS = { max: rsmax, min: rsmin }
|
||||
const RMSFMinDetail = { rmsvFirstX, rmsvFirstY, firstZhou }
|
||||
const RMSSMinDetail = { rmsvSecondX, rmsvSecondY, secondeZhou }
|
||||
const shunshiF = { shunshiFA, shunshiFB, shunshiFC }
|
||||
const shunshiS = { shunshiSA, shunshiSB, shunshiSC }
|
||||
const RMSFWave = { rmsFA, rmsFB, rmsFC }
|
||||
const RMSSWave = { rmsSA, rmsSB, rmsSC }
|
||||
const title = { aTitle, bTitle, cTitle, unit }
|
||||
|
||||
return {
|
||||
instantF,
|
||||
instantS,
|
||||
RMSF,
|
||||
RMSS,
|
||||
RMSFMinDetail,
|
||||
RMSSMinDetail,
|
||||
shunshiF,
|
||||
shunshiS,
|
||||
RMSFWave,
|
||||
RMSSWave,
|
||||
title,
|
||||
unit
|
||||
}
|
||||
}
|
||||
|
||||
// 监听消息
|
||||
self.onmessage = function (e) {
|
||||
const { wp, isOpen, value, boxoList, requestId } = e.data
|
||||
|
||||
try {
|
||||
const iphasicValue = wp.iphasic || 1
|
||||
|
||||
const picCounts = (wp.waveTitle.length - 1) / iphasicValue
|
||||
const waveDatas = []
|
||||
|
||||
for (let i = 0; i < picCounts; i++) {
|
||||
const data = fliteWaveData(wp, i, iphasicValue, isOpen, boxoList)
|
||||
waveDatas.push(data)
|
||||
}
|
||||
// 处理标题
|
||||
let titles = ''
|
||||
if (boxoList.systemType == 'pms') {
|
||||
titles =
|
||||
'变电站名称:' +
|
||||
boxoList.powerStationName +
|
||||
' 监测点名称:' +
|
||||
boxoList.measurementPointName +
|
||||
' 发生时刻:' +
|
||||
boxoList.startTime +
|
||||
' 暂降(骤升)幅值:' +
|
||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
||||
'% 持续时间:' +
|
||||
boxoList.duration +
|
||||
's'
|
||||
} else if (boxoList.systemType == 'ZL') {
|
||||
titles =
|
||||
(boxoList.engineeringName == undefined ? '' : ' 项目名称:' + boxoList.engineeringName) +
|
||||
' 监测点名称:' +
|
||||
boxoList.equipmentName +
|
||||
' 发生时刻:' +
|
||||
boxoList.startTime +
|
||||
' 暂降(骤升)幅值:' +
|
||||
boxoList.evtParamVVaDepth +
|
||||
'% 持续时间:' +
|
||||
boxoList.evtParamTm +
|
||||
's'
|
||||
} else if (boxoList.systemType == 'YPT') {
|
||||
titles =
|
||||
(boxoList.engineeringName == undefined ? '' : ' 项目名称:' + boxoList.engineeringName) +
|
||||
' 监测点名称:' +
|
||||
boxoList.lineName +
|
||||
' 发生时刻:' +
|
||||
boxoList.startTime +
|
||||
' 暂降(骤升)幅值:' +
|
||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
||||
'% 持续时间:' +
|
||||
boxoList.persistTime +
|
||||
's'
|
||||
} else {
|
||||
titles =
|
||||
' 变电站名称:' +
|
||||
boxoList.subName +
|
||||
' 监测点名称:' +
|
||||
boxoList.lineName +
|
||||
' 发生时刻:' +
|
||||
boxoList.startTime +
|
||||
' 暂降(骤升)幅值:' +
|
||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
||||
'% 持续时间:' +
|
||||
boxoList.duration +
|
||||
's'
|
||||
}
|
||||
// 发送处理结果回主线程
|
||||
self.postMessage({
|
||||
requestId,
|
||||
titles: titles,
|
||||
success: true,
|
||||
waveDatas,
|
||||
time: wp.time,
|
||||
type: wp.waveType,
|
||||
severity: wp.yzd,
|
||||
iphasic: iphasicValue
|
||||
})
|
||||
} catch (error) {
|
||||
self.postMessage({
|
||||
requestId,
|
||||
success: false,
|
||||
error: error.message
|
||||
})
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
207
src/components/echarts/shuWorker.js
Normal file
207
src/components/echarts/shuWorker.js
Normal file
@@ -0,0 +1,207 @@
|
||||
// waveData.worker.js
|
||||
self.addEventListener('message', function (e) {
|
||||
const { wp, value, iphasic, isOpen, boxoList, requestId } = e.data
|
||||
|
||||
// 处理波形数据的函数
|
||||
const fliteWaveData = (wp, step) => {
|
||||
// 将原有的fliteWaveData函数实现复制到这里
|
||||
const shunData = wp.listWaveData
|
||||
const pt = Number(wp.pt) / 1000
|
||||
const ct = Number(wp.ct)
|
||||
const titleList = wp.waveTitle
|
||||
let xishu = pt
|
||||
let aTitle = '',
|
||||
bTitle = '',
|
||||
cTitle = '',
|
||||
unit = '电压'
|
||||
let ifmax = 0,
|
||||
ifmin = 0,
|
||||
ismax = 0,
|
||||
ismin = 0
|
||||
|
||||
const shunshiFA = []
|
||||
const shunshiFB = []
|
||||
const shunshiFC = []
|
||||
const shunshiSA = []
|
||||
const shunshiSB = []
|
||||
const shunshiSC = []
|
||||
|
||||
if (shunData.length > 0) {
|
||||
if (titleList[iphasic * step + 1]?.substring(0, 1) !== 'U') {
|
||||
xishu = ct
|
||||
unit = '电流'
|
||||
}
|
||||
|
||||
for (let i = 1; i <= iphasic; i++) {
|
||||
switch (i) {
|
||||
case 1:
|
||||
aTitle = titleList[iphasic * step + i]?.substring(1) || ''
|
||||
break
|
||||
case 2:
|
||||
bTitle = titleList[iphasic * step + i]?.substring(1) || ''
|
||||
break
|
||||
case 3:
|
||||
cTitle = titleList[iphasic * step + i]?.substring(1) || ''
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (shunData[0][iphasic * step + 1] !== undefined) {
|
||||
ifmax = shunData[0][iphasic * step + 1] * xishu
|
||||
ifmin = shunData[0][iphasic * step + 1] * xishu
|
||||
ismax = shunData[0][iphasic * step + 1]
|
||||
ismin = shunData[0][iphasic * step + 1]
|
||||
}
|
||||
|
||||
for (let shun = 0; shun < shunData.length; shun++) {
|
||||
if (shunData[shun][iphasic * step + 1] === undefined) {
|
||||
break
|
||||
}
|
||||
|
||||
switch (iphasic) {
|
||||
case 1:
|
||||
const shunFirstA = shunData[shun][iphasic * step + 1] * xishu
|
||||
shunshiFA.push([shunData[shun][0], shunFirstA])
|
||||
ifmax = Math.max(ifmax, shunFirstA)
|
||||
ifmin = Math.min(ifmin, shunFirstA)
|
||||
|
||||
const shunSecondA = shunData[shun][iphasic * step + 1]
|
||||
shunshiSA.push([shunData[shun][0], shunSecondA])
|
||||
ismax = Math.max(ismax, shunSecondA)
|
||||
ismin = Math.min(ismin, shunSecondA)
|
||||
break
|
||||
case 2:
|
||||
const shunFirstA2 = shunData[shun][iphasic * step + 1] * xishu
|
||||
const shunFirstB2 = shunData[shun][iphasic * step + 2] * xishu
|
||||
shunshiFA.push([shunData[shun][0], shunFirstA2])
|
||||
shunshiFB.push([shunData[shun][0], shunFirstB2])
|
||||
ifmax = Math.max(ifmax, shunFirstA2, shunFirstB2)
|
||||
ifmin = Math.min(ifmin, shunFirstA2, shunFirstB2)
|
||||
|
||||
const shunSecondA2 = shunData[shun][iphasic * step + 1]
|
||||
const shunSecondB2 = shunData[shun][iphasic * step + 2]
|
||||
shunshiSA.push([shunData[shun][0], shunSecondA2])
|
||||
shunshiSB.push([shunData[shun][0], shunSecondB2])
|
||||
ismax = Math.max(ismax, shunSecondA2, shunSecondB2)
|
||||
ismin = Math.min(ismin, shunSecondA2, shunSecondB2)
|
||||
break
|
||||
case 3:
|
||||
const shunFirstA3 = shunData[shun][iphasic * step + 1] * xishu
|
||||
const shunFirstB3 = shunData[shun][iphasic * step + 2] * xishu
|
||||
const shunFirstC3 = shunData[shun][iphasic * step + 3] * xishu
|
||||
shunshiFA.push([shunData[shun][0], shunFirstA3])
|
||||
shunshiFB.push([shunData[shun][0], shunFirstB3])
|
||||
shunshiFC.push([shunData[shun][0], shunFirstC3])
|
||||
ifmax = Math.max(ifmax, shunFirstA3, shunFirstB3, shunFirstC3)
|
||||
ifmin = isOpen
|
||||
? Math.min(ifmin, shunFirstA3, shunFirstC3)
|
||||
: Math.min(ifmin, shunFirstA3, shunFirstB3, shunFirstC3)
|
||||
|
||||
const shunSecondA3 = shunData[shun][iphasic * step + 1]
|
||||
const shunSecondB3 = shunData[shun][iphasic * step + 2]
|
||||
const shunSecondC3 = shunData[shun][iphasic * step + 3]
|
||||
shunshiSA.push([shunData[shun][0], shunSecondA3])
|
||||
shunshiSB.push([shunData[shun][0], shunSecondB3])
|
||||
shunshiSC.push([shunData[shun][0], shunSecondC3])
|
||||
ismax = Math.max(ismax, shunSecondA3, shunSecondB3, shunSecondC3)
|
||||
ismin = isOpen
|
||||
? Math.min(ismin, shunSecondA3, shunSecondC3)
|
||||
: Math.min(ismin, shunSecondA3, shunSecondB3, shunSecondC3)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const instantF = { max: ifmax, min: ifmin }
|
||||
const instantS = { max: ismax, min: ismin }
|
||||
const shunshiF = { shunshiFA, shunshiFB, shunshiFC }
|
||||
const shunshiS = { shunshiSA, shunshiSB, shunshiSC }
|
||||
const title = { aTitle, bTitle, cTitle, unit }
|
||||
|
||||
return { instantF, instantS, shunshiF, shunshiS, title, unit }
|
||||
}
|
||||
|
||||
// 处理标题
|
||||
let titles = ''
|
||||
if (boxoList.systemType == 'pms') {
|
||||
titles =
|
||||
'变电站名称:' +
|
||||
boxoList.powerStationName +
|
||||
' 监测点名称:' +
|
||||
boxoList.measurementPointName +
|
||||
' 发生时刻:' +
|
||||
boxoList.startTime +
|
||||
' 暂降(骤升)幅值:' +
|
||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
||||
'% 持续时间:' +
|
||||
boxoList.duration +
|
||||
's'
|
||||
} else if (boxoList.systemType == 'ZL') {
|
||||
titles =
|
||||
(boxoList.engineeringName == undefined ? '' : ' 项目名称:' + boxoList.engineeringName) +
|
||||
' 监测点名称:' +
|
||||
boxoList.equipmentName +
|
||||
' 发生时刻:' +
|
||||
boxoList.startTime +
|
||||
' 暂降(骤升)幅值:' +
|
||||
boxoList.evtParamVVaDepth +
|
||||
'% 持续时间:' +
|
||||
boxoList.evtParamTm +
|
||||
's'
|
||||
} else if (boxoList.systemType == 'YPT') {
|
||||
titles =
|
||||
(boxoList.engineeringName == undefined ? '' : ' 项目名称:' + boxoList.engineeringName) +
|
||||
' 监测点名称:' +
|
||||
boxoList.lineName +
|
||||
' 发生时刻:' +
|
||||
boxoList.startTime +
|
||||
' 暂降(骤升)幅值:' +
|
||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
||||
'% 持续时间:' +
|
||||
boxoList.persistTime +
|
||||
's'
|
||||
} else {
|
||||
titles =
|
||||
'变电站名称:' +
|
||||
boxoList.subName +
|
||||
' 监测点名称:' +
|
||||
boxoList.lineName +
|
||||
' 发生时刻:' +
|
||||
boxoList.startTime +
|
||||
' 暂降(骤升)幅值:' +
|
||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
||||
'% 持续时间:' +
|
||||
boxoList.duration +
|
||||
's'
|
||||
}
|
||||
|
||||
const iphasicValue = wp.iphasic || 1
|
||||
const picCounts = (wp.waveTitle.length - 1) / iphasicValue
|
||||
const waveDatas = []
|
||||
|
||||
for (let i = 0; i < picCounts; i++) {
|
||||
const data = fliteWaveData(wp, i)
|
||||
waveDatas.push(data)
|
||||
}
|
||||
|
||||
const time = wp.time
|
||||
const type = wp.waveType
|
||||
let severity = wp.yzd
|
||||
|
||||
if (severity < 0) {
|
||||
severity = '/'
|
||||
type = '/'
|
||||
}
|
||||
|
||||
// 将处理结果发送回主线程
|
||||
self.postMessage({
|
||||
requestId,
|
||||
success: true,
|
||||
waveDatas,
|
||||
time,
|
||||
type,
|
||||
severity,
|
||||
titles,
|
||||
iphasic: iphasicValue
|
||||
})
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,7 +2,7 @@
|
||||
<div v-if="view2">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<span style="font-size: 14px; line-height: 30px">值类型选择:</span>
|
||||
<!-- <span style="font-size: 14px; line-height: 30px">值类型选择:</span>
|
||||
<el-select
|
||||
style="min-width: 200px; width: 200px"
|
||||
@change="changeView"
|
||||
@@ -15,52 +15,31 @@
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<!-- <el-button v-if="view2 && senior" class="ml10" type="primary"
|
||||
@click="AdvancedAnalytics">高级分析</el-button> -->
|
||||
</el-select> -->
|
||||
<el-radio-group v-model.trim="value" @change="changeView">
|
||||
<el-radio-button label="一次值" :value="1" />
|
||||
<el-radio-button label="二次值" :value="2" />
|
||||
</el-radio-group>
|
||||
<!-- <el-button v-if="view2 && senior" class="ml10" type="primary" @click="AdvancedAnalytics">
|
||||
高级分析
|
||||
</el-button> -->
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button
|
||||
@click="backbxlb"
|
||||
class="el-icon-refresh-right"
|
||||
icon="el-icon-Back"
|
||||
style="float: right"
|
||||
>
|
||||
返回
|
||||
</el-button>
|
||||
<el-button @click="backbxlb" icon="el-icon-Back" style="float: right">返回</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-loading="loading" style="height: calc(100vh - 190px)">
|
||||
<el-tabs v-if="view4" class="default-main" v-model="bxactiveName" @tab-click="bxhandleClick">
|
||||
<el-tab-pane
|
||||
label="瞬时波形"
|
||||
name="ssbx"
|
||||
class="boxbx pt10 pb10"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||
>
|
||||
<shushiboxi
|
||||
ref="shushiboxiRef"
|
||||
v-if="bxactiveName == 'ssbx' && showBoxi"
|
||||
:value="value"
|
||||
:parentHeight="parentHeight"
|
||||
:boxoList="boxoList"
|
||||
:wp="wp"
|
||||
></shushiboxi>
|
||||
<div v-loading="loading" style="height: calc(100vh - 190px)" class="mt10">
|
||||
<el-tabs v-if="view4" type="border-card" v-model="bxactiveName"
|
||||
@tab-click="bxhandleClick">
|
||||
<el-tab-pane label="瞬时波形" name="ssbx" class="boxbx pt10 pb10"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'">
|
||||
<shushiboxi ref="shushiboxiRef" v-if="bxactiveName == 'ssbx' && showBoxi" :value="value"
|
||||
:parentHeight="parentHeight" :boxoList="boxoList" :wp="wp"></shushiboxi>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
label="RMS波形"
|
||||
class="boxbx pt10 pb10"
|
||||
name="rmsbx"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||
>
|
||||
<rmsboxi
|
||||
ref="rmsboxiRef"
|
||||
v-if="bxactiveName == 'rmsbx' && showBoxi"
|
||||
:value="value"
|
||||
:parentHeight="parentHeight"
|
||||
:boxoList="boxoList"
|
||||
:wp="wp"
|
||||
></rmsboxi>
|
||||
<el-tab-pane label="RMS波形" class="boxbx pt10 pb10" name="rmsbx"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'">
|
||||
<rmsboxi ref="rmsboxiRef" v-if="bxactiveName == 'rmsbx' && showBoxi" :value="value"
|
||||
:parentHeight="parentHeight" :boxoList="boxoList" :wp="wp"></rmsboxi>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-empty v-else description="暂无数据" style="height: calc(100vh - 190px)" />
|
||||
@@ -76,10 +55,12 @@
|
||||
import shushiboxi from '@/components/echarts/shushiboxi.vue'
|
||||
import rmsboxi from '@/components/echarts/rmsboxi.vue'
|
||||
import analytics from '@/components/echarts/analytics.vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ref, shallowRef } from 'vue'
|
||||
import { analysis } from '@/api/advance-boot/analyse'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { getMonitorEventAnalyseWave, downloadWaveFile } from '@/api/event-boot/transient'
|
||||
import { buildWaveStoreKey, registerWaveRaw, buildSlimWp, releaseWaveRaw } from '@/utils/waveRawStore'
|
||||
import { clearWaveCache } from '@/utils/waveCache'
|
||||
const emit = defineEmits(['backbxlb'])
|
||||
interface Props {
|
||||
// boxoList: any
|
||||
@@ -106,14 +87,14 @@ const options = ref([
|
||||
}
|
||||
])
|
||||
const shushiboxiRef = ref()
|
||||
const bxecharts = ref(mainHeight(95).height as any)
|
||||
const bxecharts = ref(mainHeight(145).height as any)
|
||||
const view2 = ref(true)
|
||||
const boxoList = ref(null)
|
||||
const wp = ref(null)
|
||||
const boxoList: any = ref(null)
|
||||
const wp = shallowRef<any>(null)
|
||||
const showBoxi = ref(true)
|
||||
const view3 = ref(false)
|
||||
const view4 = ref(false)
|
||||
const GJList = ref([])
|
||||
const GJList = ref({})
|
||||
|
||||
const open = async (row: any) => {
|
||||
loading.value = true
|
||||
@@ -122,19 +103,20 @@ const open = async (row: any) => {
|
||||
row.loading = false
|
||||
if (res != undefined) {
|
||||
boxoList.value = row
|
||||
wp.value = res.data
|
||||
boxoList.value.pt = res.data.pt
|
||||
const storeKey = buildWaveStoreKey(row)
|
||||
registerWaveRaw(storeKey, res.data)
|
||||
wp.value = buildSlimWp(res.data, storeKey)
|
||||
loading.value = false
|
||||
view4.value = true
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
backbxlb()
|
||||
})
|
||||
}
|
||||
const bxhandleClick = (tab: any) => {
|
||||
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
|
||||
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
|
||||
|
||||
loading.value = true
|
||||
if (tab.name == 'ssbx') {
|
||||
bxactiveName.value = 'ssbx'
|
||||
@@ -147,10 +129,12 @@ const bxhandleClick = (tab: any) => {
|
||||
// console.log(tab, event);
|
||||
}
|
||||
const backbxlb = () => {
|
||||
const storeKey = wp.value?.waveStoreKey
|
||||
releaseWaveRaw(storeKey, 'all')
|
||||
clearWaveCache()
|
||||
boxoList.value = null
|
||||
wp.value = null
|
||||
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
|
||||
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
|
||||
|
||||
|
||||
emit('backbxlb')
|
||||
}
|
||||
@@ -168,14 +152,17 @@ const AdvancedAnalytics = () => {
|
||||
analysis({
|
||||
eventIndex: boxoList.value.eventId
|
||||
}).then(res => {
|
||||
GJList.value = res.data
|
||||
view3.value = true
|
||||
view2.value = false
|
||||
// GJList.value = res.data
|
||||
// view3.value = true
|
||||
// view2.value = false
|
||||
})
|
||||
GJList.value = {}
|
||||
view3.value = true
|
||||
view2.value = false
|
||||
}
|
||||
const changeView = () => {
|
||||
if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
|
||||
if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
|
||||
shushiboxiRef.value?.backbxlb?.()
|
||||
rmsboxiRef.value?.backbxlb?.()
|
||||
showBoxi.value = false
|
||||
setTimeout(() => {
|
||||
showBoxi.value = true
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
<template>
|
||||
<div style="width: 540px">
|
||||
<el-select v-model="interval" style="min-width: 90px; width: 90px; margin-right: 10px" @change="timeChange">
|
||||
<div :style="{ width: isMinuteData ? '750px' : '610px' }">
|
||||
<el-select v-model="interval" style="min-width: 90px; width: 90px; margin-right: 10px" @change="timeChange" filterable>
|
||||
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<el-date-picker
|
||||
v-model="timeValue"
|
||||
type="daterange"
|
||||
:type="pickerType"
|
||||
:disabled="disabledPicker"
|
||||
:disabled-date="isFutureDate"
|
||||
style="width: 220px; margin-right: 10px"
|
||||
:style="{ width: isMinuteData ? '360px' : '220px', marginRight: '10px' }"
|
||||
unlink-panels
|
||||
:clearable="false"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
:shortcuts="shortcuts"
|
||||
:start-placeholder="isMinuteData ? '开始时间' : '开始日期'"
|
||||
:end-placeholder="isMinuteData ? '结束时间' : '结束日期'"
|
||||
:value-format="pickerValueFormat"
|
||||
:shortcuts="isMinuteData ? undefined : shortcuts"
|
||||
/>
|
||||
<el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button>
|
||||
<el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button>
|
||||
@@ -26,18 +26,41 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { DArrowLeft, VideoPause, DArrowRight } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, nextTick, watch } from 'vue'
|
||||
import { ref, onMounted, computed, watch } from 'vue'
|
||||
|
||||
interface Props {
|
||||
nextFlag?: boolean
|
||||
theCurrentTime?: boolean
|
||||
isStatisticData?: number | string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
nextFlag: false,
|
||||
theCurrentTime: false
|
||||
theCurrentTime: false,
|
||||
isStatisticData: 0
|
||||
})
|
||||
|
||||
const isMinuteData = computed(() => Number(props.isStatisticData) === 1)
|
||||
const pickerType = computed(() => (isMinuteData.value ? 'datetimerange' : 'daterange'))
|
||||
const pickerValueFormat = computed(() => (isMinuteData.value ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'))
|
||||
|
||||
const toDatePart = (value: string) => (value?.includes(' ') ? value.split(' ')[0] : value)
|
||||
|
||||
const toMinuteStart = (date: string) => `${toDatePart(date)} 00:00:00`
|
||||
|
||||
const toMinuteEnd = (date: string) => `${toDatePart(date)} 23:59:59`
|
||||
|
||||
const normalizeRange = (start: string, end: string) => {
|
||||
if (!isMinuteData.value) {
|
||||
return [toDatePart(start), toDatePart(end)]
|
||||
}
|
||||
return [toMinuteStart(start), toMinuteEnd(end)]
|
||||
}
|
||||
|
||||
const setRangeValue = (start: string, end: string) => {
|
||||
timeValue.value = normalizeRange(start, end)
|
||||
}
|
||||
|
||||
const interval = ref(3)
|
||||
const timeFlag = ref(1)
|
||||
const count = ref(0)
|
||||
@@ -95,13 +118,13 @@ const timeChange = (e: number) => {
|
||||
if (e == 1) {
|
||||
disabledPicker.value = true
|
||||
|
||||
timeValue.value = [setTime(1), setTime()]
|
||||
setRangeValue(setTime(1), setTime())
|
||||
} else if (e == 2) {
|
||||
disabledPicker.value = true
|
||||
timeValue.value = [setTime(2), setTime()]
|
||||
setRangeValue(setTime(2), setTime())
|
||||
} else if (e == 3) {
|
||||
disabledPicker.value = true
|
||||
timeValue.value = [setTime(3), setTime()]
|
||||
setRangeValue(setTime(3), setTime())
|
||||
} else if (e == 4) {
|
||||
let year = parseInt(setTime().substring(0, 4))
|
||||
let month = parseInt(setTime().substring(5, 7))
|
||||
@@ -111,12 +134,12 @@ const timeChange = (e: number) => {
|
||||
var dayOfWeek = start.getDay() == 0 ? 7 : start.getDay() - 1 // 如果为周日,则置为7天
|
||||
|
||||
disabledPicker.value = true
|
||||
timeValue.value = [setTime(0, dayOfWeek), setTime(0, -6 + dayOfWeek)]
|
||||
setRangeValue(setTime(0, dayOfWeek), setTime(0, -6 + dayOfWeek))
|
||||
} else if (e == 5) {
|
||||
disabledPicker.value = false
|
||||
backDisabled.value = true
|
||||
preDisabled.value = props.nextFlag ? false : true
|
||||
timeValue.value = [setTime(), setTime()]
|
||||
setRangeValue(setTime(), setTime())
|
||||
}
|
||||
if (e == 1 || e == 2) {
|
||||
timeFlag.value = 0
|
||||
@@ -186,7 +209,7 @@ const preClick = () => {
|
||||
startTime = year + '-01-01'
|
||||
endTime = year + '-12-31'
|
||||
}
|
||||
timeValue.value = [startTime, endTime]
|
||||
setRangeValue(startTime, endTime)
|
||||
|
||||
// 判断向后键的状态
|
||||
// var temp = NowgetEndTime()
|
||||
@@ -415,16 +438,27 @@ const next = () => {
|
||||
}
|
||||
if (!props.nextFlag) {
|
||||
if (
|
||||
new Date(endTime + ' 00:00:00').getTime() >=
|
||||
new Date(toDatePart(endTime) + ' 00:00:00').getTime() >=
|
||||
new Date(window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd ') + ' 00:00:00').getTime()
|
||||
) {
|
||||
preDisabled.value = props.nextFlag ? false : true
|
||||
}
|
||||
}
|
||||
|
||||
timeValue.value = [startTime, endTime]
|
||||
setRangeValue(startTime, endTime)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.isStatisticData,
|
||||
() => {
|
||||
if (timeValue.value?.length === 2) {
|
||||
setRangeValue(timeValue.value[0], timeValue.value[1])
|
||||
} else {
|
||||
timeChange(interval.value)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const setTime = (flag = 0, e = 0) => {
|
||||
let dd = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'dd')
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ export default defineComponent({
|
||||
required: true
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
type: [String, Number],
|
||||
default: '18px'
|
||||
},
|
||||
color: {
|
||||
@@ -21,7 +21,7 @@ export default defineComponent({
|
||||
setup(props) {
|
||||
const iconStyle = computed((): CSSProperties => {
|
||||
const { size, color } = props
|
||||
let s = `${size.replace('px', '')}px`
|
||||
const s = `${String(size).replace('px', '')}px`
|
||||
return {
|
||||
fontSize: s,
|
||||
color: color
|
||||
|
||||
@@ -1,49 +1,49 @@
|
||||
<template>
|
||||
<div v-if="isUrl" :style="urlIconStyle" class="url-svg svg-icon icon" />
|
||||
<svg v-else class="svg-icon icon" :style="iconStyle">
|
||||
<use :href="iconName" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, type CSSProperties } from 'vue'
|
||||
import { isExternal } from '@/utils/common'
|
||||
interface Props {
|
||||
name: string
|
||||
size: string
|
||||
color: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
name: '',
|
||||
size: '18px',
|
||||
color: '#000000',
|
||||
})
|
||||
|
||||
const s = `${props.size.replace('px', '')}px`
|
||||
const iconName = computed(() => `#${props.name}`)
|
||||
const iconStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
color: props.color,
|
||||
fontSize: s,
|
||||
}
|
||||
})
|
||||
const isUrl = computed(() => isExternal(props.name))
|
||||
const urlIconStyle = computed(() => {
|
||||
return {
|
||||
width: s,
|
||||
height: s,
|
||||
mask: `url(${props.name}) no-repeat 50% 50%`,
|
||||
'-webkit-mask': `url(${props.name}) no-repeat 50% 50%`,
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div v-if="isUrl" :style="urlIconStyle" class="url-svg svg-icon icon" />
|
||||
<svg v-else class="svg-icon icon" :style="iconStyle">
|
||||
<use :href="iconName" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, type CSSProperties } from 'vue'
|
||||
import { isExternal } from '@/utils/common'
|
||||
interface Props {
|
||||
name: string
|
||||
size: string | number
|
||||
color: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
name: '',
|
||||
size: '18px',
|
||||
color: '#000000',
|
||||
})
|
||||
|
||||
const s = `${String(props.size).replace('px', '')}px`
|
||||
const iconName = computed(() => `#${props.name}`)
|
||||
const iconStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
color: props.color,
|
||||
fontSize: s,
|
||||
}
|
||||
})
|
||||
const isUrl = computed(() => isExternal(props.name))
|
||||
const urlIconStyle = computed(() => {
|
||||
return {
|
||||
width: s,
|
||||
height: s,
|
||||
mask: `url(${props.name}) no-repeat 50% 50%`,
|
||||
'-webkit-mask': `url(${props.name}) no-repeat 50% 50%`,
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,23 +1,41 @@
|
||||
<script lang='ts'>
|
||||
import { defineComponent, createVNode, reactive } from 'vue'
|
||||
import { Column } from 'vxe-table'
|
||||
import { uuid } from '@/utils/random'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Column',
|
||||
props: {
|
||||
attr: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const attr = reactive(props.attr)
|
||||
attr['align'] = attr['align'] ? attr['align'] : 'center'
|
||||
attr['column-key'] = attr['column-key'] ? attr['column-key'] : attr.prop || uuid()
|
||||
return () => {
|
||||
return createVNode(Column, attr, slots.default)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<script lang="ts">
|
||||
import { defineComponent, createVNode, reactive } from 'vue'
|
||||
import { Column } from 'vxe-table'
|
||||
import { uuid } from '@/utils/random'
|
||||
|
||||
/** storage 开启时列必须有稳定 field;序号/操作等无 field 列按 title 生成 */
|
||||
function resolveColumnField(attr: Record<string, any>): string | undefined {
|
||||
if (attr.field) return attr.field
|
||||
if (attr.prop) return attr.prop
|
||||
// checkbox / radio / expand / seq 等类型列由 vxe 内部处理,可不强制 field
|
||||
if (attr.type && ['checkbox', 'radio', 'expand', 'html'].includes(attr.type)) {
|
||||
return undefined
|
||||
}
|
||||
if (attr.title != null && attr.title !== '') {
|
||||
return `__col_${attr.title}`
|
||||
}
|
||||
return `col_${uuid()}`
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Column',
|
||||
props: {
|
||||
attr: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const attr = reactive({ ...props.attr })
|
||||
attr['align'] = attr['align'] ? attr['align'] : 'center'
|
||||
const field = resolveColumnField(attr)
|
||||
if (field) {
|
||||
attr.field = field
|
||||
}
|
||||
attr['column-key'] = attr['column-key'] ? attr['column-key'] : attr.field || attr.prop || uuid()
|
||||
return () => {
|
||||
return createVNode(Column, attr, slots.default)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -6,14 +6,12 @@ export const defaultAttribute: VxeTableProps = {
|
||||
border: true,
|
||||
stripe: true,
|
||||
size: 'small',
|
||||
columnConfig: { resizable: true },
|
||||
rowConfig: { isCurrent: true, isHover: true },
|
||||
columnConfig: { resizable: true, useKey: true },
|
||||
rowConfig: { isCurrent: true, isHover: true, },
|
||||
scrollX: { scrollToLeftOnChange: true },
|
||||
scrollY: { scrollToTopOnChange: true, enabled: true },
|
||||
treeConfig: {
|
||||
reserve: true
|
||||
},
|
||||
showOverflow: true,
|
||||
showFooter:true
|
||||
scrollY: { enabled: false },
|
||||
// 注意:全局不要默认开启 treeConfig,会与 stripe 冲突;树表在页面自行配置
|
||||
customConfig: { enabled: true, allowFixed: true, storage: false, showFooter: false, immediate: true ,mode:'default'},
|
||||
showOverflow: 'tooltip',
|
||||
showHeaderOverflow: false
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,11 @@
|
||||
label-position="left"
|
||||
:inline="true"
|
||||
>
|
||||
<el-form-item v-if="datePicker" style="grid-column: span 2; max-width: 630px">
|
||||
<el-form-item
|
||||
v-if="datePicker"
|
||||
style="grid-column: span 2"
|
||||
:style="{ maxWidth: isStatisticData == 1 ? '750px' : '610px' }"
|
||||
>
|
||||
<template #label>
|
||||
<el-checkbox v-if="showTimeAll" v-model="timeAll" label="统计时间" />
|
||||
<span v-else>{{ dateLabel }}</span>
|
||||
@@ -19,11 +23,17 @@
|
||||
v-if="timeAll"
|
||||
:nextFlag="nextFlag"
|
||||
:theCurrentTime="theCurrentTime"
|
||||
:isStatisticData="isStatisticData"
|
||||
></DatePicker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="区域" v-if="area">
|
||||
<Area ref="areaRef" v-model="tableStore.table.params.deptIndex" @change-value="onAreaChange" />
|
||||
<Area
|
||||
ref="areaRef"
|
||||
v-model="tableStore.table.params.deptIndex"
|
||||
@change-value="onAreaChange"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<slot name="select"></slot>
|
||||
</el-form>
|
||||
@@ -60,6 +70,15 @@
|
||||
</el-button>
|
||||
</template>
|
||||
<slot name="operation"></slot>
|
||||
<el-button
|
||||
class="ml10"
|
||||
v-if="showCustomColumn"
|
||||
:icon="Setting"
|
||||
@mousedown="onCustomColumnMousedown"
|
||||
@click="openCustomColumn"
|
||||
>
|
||||
列设置
|
||||
</el-button>
|
||||
</div>
|
||||
<el-form
|
||||
:style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
|
||||
@@ -79,9 +98,8 @@ import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import Area from '@/components/form/area/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { Search, RefreshLeft } from '@element-plus/icons-vue'
|
||||
import { defineProps } from 'vue'
|
||||
const emit = defineEmits(['selectChange','areaChange'])
|
||||
import { Search, RefreshLeft, Setting } from '@element-plus/icons-vue'
|
||||
const emit = defineEmits(['selectChange', 'areaChange'])
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const tableHeader = ref()
|
||||
const datePickerRef = ref()
|
||||
@@ -100,6 +118,8 @@ interface Props {
|
||||
showExport?: boolean //导出控制
|
||||
showTimeAll?: boolean //控制时间是否显示
|
||||
dateLabel?: string //设置时间名称
|
||||
isStatisticData?: number | string // 0统计数据 1分钟数据
|
||||
showCustomColumn?: boolean // 列设置
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
@@ -111,7 +131,9 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
showReset: true,
|
||||
showExport: false,
|
||||
showTimeAll: false,
|
||||
dateLabel: '统计日期'
|
||||
dateLabel: '统计日期',
|
||||
isStatisticData: 0,
|
||||
showCustomColumn: false
|
||||
})
|
||||
// 动态计算table高度
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
@@ -132,9 +154,8 @@ const headerFormSecondStyleClose = {
|
||||
padding: '0'
|
||||
}
|
||||
|
||||
const onAreaChange = (data) => {
|
||||
|
||||
emit('areaChange', {label: data.label})
|
||||
const onAreaChange = data => {
|
||||
emit('areaChange', { label: data.label })
|
||||
}
|
||||
|
||||
watch(
|
||||
@@ -142,7 +163,6 @@ watch(
|
||||
newVal => {
|
||||
setTimeout(() => {
|
||||
areaRef.value && areaRef.value.change()
|
||||
|
||||
}, 0)
|
||||
}
|
||||
)
|
||||
@@ -155,7 +175,31 @@ watch(
|
||||
}, 500)
|
||||
}
|
||||
)
|
||||
let customColumnVisibleOnPress = false
|
||||
const onCustomColumnMousedown = () => {
|
||||
const table = tableStore?.table?.ref as any
|
||||
if (!table) return
|
||||
customColumnVisibleOnPress = table.getCustomVisible?.() ?? !!table.reactData?.customStore?.visible
|
||||
if (table.reactData?.customStore) {
|
||||
table.reactData.customStore.activeBtn = true
|
||||
}
|
||||
}
|
||||
const openCustomColumn = () => {
|
||||
const table = tableStore?.table?.ref as any
|
||||
if (!table) return
|
||||
if (table.reactData?.customStore) {
|
||||
table.reactData.customStore.activeBtn = false
|
||||
}
|
||||
if (customColumnVisibleOnPress) {
|
||||
table?.closeCustom?.()
|
||||
} else {
|
||||
table?.openCustom?.()
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
if (props.showCustomColumn && tableStore?.table) {
|
||||
tableStore.table.customColumnInHeader = true
|
||||
}
|
||||
timeAll.value = props.showTimeAll ? false : true
|
||||
if (props.datePicker && timeAll.value) {
|
||||
tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
@@ -238,14 +282,14 @@ const onResetForm = () => {
|
||||
//时间重置成默认值
|
||||
datePickerRef.value?.setTheDate(3)
|
||||
|
||||
if(props.showTimeAll){
|
||||
timeAll.value = false
|
||||
delete tableStore.table.params.searchBeginTime
|
||||
delete tableStore.table.params.searchEndTime
|
||||
delete tableStore.table.params.startTime
|
||||
delete tableStore.table.params.endTime
|
||||
delete tableStore.table.params.timeFlag
|
||||
delete tableStore.table.params.interval
|
||||
if (props.showTimeAll) {
|
||||
timeAll.value = false
|
||||
delete tableStore.table.params.searchBeginTime
|
||||
delete tableStore.table.params.searchEndTime
|
||||
delete tableStore.table.params.startTime
|
||||
delete tableStore.table.params.endTime
|
||||
delete tableStore.table.params.timeFlag
|
||||
delete tableStore.table.params.interval
|
||||
}
|
||||
|
||||
if (props.datePicker && timeAll.value) {
|
||||
@@ -264,7 +308,6 @@ const setTheDate = (val: any) => {
|
||||
}
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
|
||||
tableStore.onTableAction('export', { showAllFlag: true })
|
||||
}
|
||||
|
||||
@@ -300,6 +343,7 @@ defineExpose({
|
||||
padding: 13px 15px;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
|
||||
.table-header-operate-text {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
@@ -1,24 +1,49 @@
|
||||
<template>
|
||||
<div :style="{ height: typeof props.height === 'string' ? props.height : tableStore.table.height }">
|
||||
<vxe-table ref="tableRef" height="auto" :key="key" :data="tableStore.table.data"
|
||||
v-loading="tableStore.table.loading" v-bind="Object.assign({}, defaultAttribute, $attrs)"
|
||||
@checkbox-all="selectChangeEvent" @checkbox-change="selectChangeEvent" :showOverflow="showOverflow"
|
||||
@sort-change="handleSortChange">
|
||||
<div v-if="showCustomColumn && !tableStore?.table?.customColumnInHeader" class="table-custom-toolbar">
|
||||
<el-button icon="el-icon-Setting" @mousedown="onCustomColumnMousedown" @click="openCustomColumn">
|
||||
列设置
|
||||
</el-button>
|
||||
</div>
|
||||
<vxe-table
|
||||
ref="tableRef"
|
||||
height="auto"
|
||||
:key="key"
|
||||
:data="tableStore.table.data"
|
||||
v-loading="tableStore.table.loading"
|
||||
v-bind="tableBindProps"
|
||||
:id="getTableId()"
|
||||
@checkbox-all="selectChangeEvent"
|
||||
@checkbox-change="selectChangeEvent"
|
||||
@cell-click="onCellClick"
|
||||
>
|
||||
<!-- @sort-change="handleSortChange" -->
|
||||
<!-- Column 组件内部是 el-table-column -->
|
||||
<template v-if="isGroup">
|
||||
<GroupColumn :column="tableStore.table.column" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<Column :attr="item" :key="key + '-column'" v-for="(item, key) in tableStore.table.column"
|
||||
:tree-node="item.treeNode">
|
||||
<Column
|
||||
:attr="item"
|
||||
:key="key + '-column'"
|
||||
v-for="(item, key) in tableStore.table.column"
|
||||
:tree-node="item.treeNode"
|
||||
>
|
||||
<!-- tableStore 预设的列 render 方案 -->
|
||||
<template v-if="item.render" #default="scope">
|
||||
<FieldRender :field="item" :row="scope.row" :column="scope.column" :index="scope.rowIndex" :key="key +
|
||||
'-' +
|
||||
item.render +
|
||||
'-' +
|
||||
(item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
|
||||
" />
|
||||
<FieldRender
|
||||
:field="item"
|
||||
:row="scope.row"
|
||||
:column="scope.column"
|
||||
:index="scope.rowIndex"
|
||||
:key="
|
||||
key +
|
||||
'-' +
|
||||
item.render +
|
||||
'-' +
|
||||
(item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</Column>
|
||||
</template>
|
||||
@@ -27,17 +52,22 @@
|
||||
</div>
|
||||
|
||||
<div v-if="tableStore.showPage" class="table-pagination">
|
||||
<el-pagination :currentPage="tableStore.table.params!.pageNum" :page-size="tableStore.table.params!.pageSize"
|
||||
:page-sizes="pageSizes" background
|
||||
<el-pagination
|
||||
:currentPage="tableStore.table.params!.pageNum"
|
||||
:page-size="tableStore.table.params!.pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
background
|
||||
:layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
|
||||
:total="tableStore.table.total" @size-change="onTableSizeChange"
|
||||
@current-change="onTableCurrentChange"></el-pagination>
|
||||
:total="tableStore.table.total"
|
||||
@size-change="onTableSizeChange"
|
||||
@current-change="onTableCurrentChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<slot name="footer"></slot>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, inject, computed, onMounted, watch } from 'vue'
|
||||
import { ref, nextTick, inject, computed, onMounted, watch, useAttrs } from 'vue'
|
||||
import type { ElTable } from 'element-plus'
|
||||
import { VxeTableEvents, VxeTableInstance } from 'vxe-table'
|
||||
import FieldRender from '@/components/table/fieldRender/index.vue'
|
||||
@@ -48,22 +78,49 @@ import type TableStoreClass from '@/utils/tableStore'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false
|
||||
})
|
||||
|
||||
const config = useConfig()
|
||||
const tableRef = ref<VxeTableInstance>()
|
||||
const tableStore = inject('tableStore') as TableStoreClass
|
||||
const router = useRouter()
|
||||
const key = ref(0)
|
||||
const emit = defineEmits<{
|
||||
(e: 'cell-click', params: any): void
|
||||
}>()
|
||||
interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
|
||||
isGroup?: boolean
|
||||
showOverflow?: boolean
|
||||
showOverflow?: boolean | 'ellipsis' | 'title' | 'tooltip'
|
||||
height?: string | number
|
||||
showCustomColumn?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isGroup: false,
|
||||
showOverflow: true,
|
||||
height: undefined
|
||||
showOverflow: 'tooltip',
|
||||
height: undefined,
|
||||
showCustomColumn: false
|
||||
})
|
||||
const attrs = useAttrs()
|
||||
const tableBindProps = computed(() => {
|
||||
const enableStorage = props.showCustomColumn || !!tableStore?.table?.customColumnInHeader
|
||||
const baseCustomConfig = (defaultAttribute.customConfig || {}) as Record<string, any>
|
||||
const attrsCustomConfig = ((attrs.customConfig as Record<string, any>) || {}) as Record<string, any>
|
||||
return Object.assign({}, defaultAttribute, attrs, {
|
||||
showOverflow: props.showOverflow,
|
||||
showHeaderOverflow: false,
|
||||
customConfig: {
|
||||
...baseCustomConfig,
|
||||
...attrsCustomConfig,
|
||||
storage: enableStorage ? true : !!attrsCustomConfig.storage
|
||||
}
|
||||
})
|
||||
})
|
||||
const onCellClick: VxeTableEvents.CellClick<any> = params => {
|
||||
emit('cell-click', params)
|
||||
}
|
||||
onMounted(() => {
|
||||
tableStore.table.ref = tableRef.value as VxeTableInstance
|
||||
})
|
||||
@@ -93,10 +150,33 @@ const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
|
||||
const records = (tableRef.value as VxeTableInstance).getCheckboxRecords()
|
||||
tableStore.onTableAction('selection-change', records)
|
||||
}
|
||||
|
||||
let customColumnVisibleOnPress = false
|
||||
const onCustomColumnMousedown = () => {
|
||||
const table = tableRef.value as any
|
||||
if (!table) return
|
||||
customColumnVisibleOnPress = table.getCustomVisible?.() ?? !!table.reactData?.customStore?.visible
|
||||
if (table.reactData?.customStore) {
|
||||
table.reactData.customStore.activeBtn = true
|
||||
}
|
||||
}
|
||||
const openCustomColumn = () => {
|
||||
const table = tableRef.value as any
|
||||
if (!table) return
|
||||
if (table.reactData?.customStore) {
|
||||
table.reactData.customStore.activeBtn = false
|
||||
}
|
||||
if (customColumnVisibleOnPress) {
|
||||
table?.closeCustom?.()
|
||||
} else {
|
||||
table?.openCustom?.()
|
||||
}
|
||||
}
|
||||
const getRef = () => {
|
||||
return tableRef.value
|
||||
}
|
||||
const getTableId = () => {
|
||||
return tableStore.table.filename || document.querySelectorAll('.ba-nav-tab.active')[0].textContent || ''
|
||||
}
|
||||
// 排序
|
||||
const handleSortChange = ({ column, order }: { column: TableColumn; order: 'asc' | 'desc' | null }) => {
|
||||
// console.log('排序列:', column?.property);
|
||||
|
||||
@@ -3,167 +3,177 @@
|
||||
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="监测点详情" name="tab1">
|
||||
<el-descriptions :column="3" border label-width="150px">
|
||||
<el-descriptions-item label="项目工程">
|
||||
<el-descriptions-item label="项目工程">
|
||||
{{ details.areaName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="项目单位">
|
||||
<el-descriptions-item label="项目单位">
|
||||
{{ details.gdName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="所属变电站">
|
||||
<el-descriptions-item label="所属变电站">
|
||||
{{ details.bdName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级">
|
||||
{{ details.scale }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="终端厂家">
|
||||
{{ details.manufacturer }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="终端名称">
|
||||
{{ details.devName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="网络参数">
|
||||
{{ details.ip }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="监测点名称">
|
||||
<el-descriptions-item label="监测点名称">
|
||||
{{ details.lineName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="监测点序号">
|
||||
{{ details.id }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="通讯状态">
|
||||
{{ details.comFlag }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="干扰源类型">
|
||||
{{ details.loadType }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="监测点对象名称">
|
||||
<el-descriptions-item label="监测点对象名称">
|
||||
{{ details.objName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="接线方式">
|
||||
<el-descriptions-item label="监测点序号">
|
||||
{{ details.id }}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="终端厂家">
|
||||
{{ details.manufacturer }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="终端名称">
|
||||
{{ details.devName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="终端型号">
|
||||
{{ typeArr.find(item => item.id == details.devType)?.name }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级">
|
||||
{{ details.scale }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="网络参数">
|
||||
{{ details.ip }}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="通讯状态">
|
||||
{{ details.comFlag }}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="干扰源类型">
|
||||
{{ details.loadType }}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="接线方式">
|
||||
{{ details.ptType }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="PT变比">
|
||||
<el-descriptions-item label="统计间隔(分钟)">
|
||||
{{ details.timeInterval }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="PT变比">
|
||||
{{ details.pt }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="CT变比">
|
||||
<el-descriptions-item label="CT变比">
|
||||
{{ details.ct }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="基准容量(MVA)">
|
||||
<el-descriptions-item label="基准容量(MVA)">
|
||||
{{ details.standardCapacity }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="最小短路容量(MVA)">
|
||||
{{ details.shortCapacity }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="供电设备容量(MVA)">
|
||||
<el-descriptions-item label="供电设备容量(MVA)">
|
||||
{{ details.devCapacity }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="用户协议容量(MVA)">
|
||||
<el-descriptions-item label="最小短路容量(MW)">
|
||||
{{ details.shortCapacity }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="用户协议容量(MW)">
|
||||
{{ details.dealCapacity }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="监测点限值" name="tab2">
|
||||
<el-descriptions :column="3" border label-width="250px">
|
||||
<el-descriptions-item label="电压偏差上限值(%)">
|
||||
<el-descriptions :column="3" border label-width="250px">
|
||||
<el-descriptions-item label="电压偏差上限值(%)">
|
||||
{{ limitValue.voltageDev }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压偏差下限值(%)">
|
||||
<el-descriptions-item label="电压偏差下限值(%)">
|
||||
{{ limitValue.uvoltageDev }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="频率偏差限值(Hz)">
|
||||
<el-descriptions-item label="频率偏差限值(Hz)">
|
||||
{{ limitValue.freqDev }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="三相电压不平衡度限值(%)">
|
||||
<el-descriptions-item label="三相电压不平衡度限值(%)">
|
||||
{{ limitValue.ubalance }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="负序电流限值(A)">
|
||||
<el-descriptions-item label="负序电流限值(A)">
|
||||
{{ limitValue.ineg }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="长时闪变限值(%)">
|
||||
<el-descriptions-item label="长时闪变限值(%)">
|
||||
{{ limitValue.flicker }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压总畸变率限值(%)">
|
||||
<el-descriptions-item label="电压总畸变率限值(%)">
|
||||
{{ limitValue.uaberrance }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="奇次谐波电压含有率限值(%)">
|
||||
<el-descriptions-item label="奇次谐波电压含有率限值(%)">
|
||||
{{ limitValue.oddHarm }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="偶次谐波电压含有率限值(%)">
|
||||
<el-descriptions-item label="偶次谐波电压含有率限值(%)">
|
||||
{{ limitValue.evenHarm }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="3次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="3次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm3 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="4次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="4次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm4 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="5次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="5次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm5 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="6次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="6次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm6 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="7次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="7次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm7 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="8次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="8次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm8 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="9次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="9次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm9 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="10次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="10次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm10 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="11次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="11次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm11 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="12次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="12次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm12 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="13次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="13次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm13 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="14次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="14次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm14 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="15次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="15次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm15 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="16次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="16次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm16 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="17次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="17次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm17 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="18次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="18次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm18 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="19次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="19次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm19 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="20次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="20次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm20 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="21次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="21次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm21 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="22次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="22次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm22 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="23次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="23次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm23 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="24次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="24次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm24 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="25次谐波电流幅值限值(A)">
|
||||
<el-descriptions-item label="25次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm25 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="0.5-1.5次间谐波电压含有率限值(%)">
|
||||
<el-descriptions-item label="0.5-1.5次间谐波电压含有率限值(%)">
|
||||
{{ limitValue.inUharm }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="2.5-15.5次谐波电压含有率限值(%)">
|
||||
<el-descriptions-item label="2.5-15.5次谐波电压含有率限值(%)">
|
||||
{{ limitValue.inUharm16 }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
@@ -174,11 +184,14 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { getLineOverLimitData, getLineDetailData } from '@/api/device-boot/line'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const activeName = ref('tab1')
|
||||
const details: any = ref([])
|
||||
const dictData = useDictData()
|
||||
const limitValue: any = ref([])
|
||||
const typeArr = dictData.getBasicData('Dev_Type')
|
||||
const open = (data: any) => {
|
||||
details.value = []
|
||||
limitValue.value = []
|
||||
@@ -187,7 +200,7 @@ const open = (data: any) => {
|
||||
|
||||
getLineDetailData(data.id).then(res => {
|
||||
details.value = res.data
|
||||
|
||||
res.data.objName ? (title.value = res.data.objName + '_' + title.value) : ''
|
||||
})
|
||||
getLineOverLimitData(data.id).then(res => {
|
||||
limitValue.value = res.data
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
|
||||
<Tree ref="treRef" :data="tree" style="height: 100%" :width="'100%'" :expanded="expanded" />
|
||||
</template>
|
||||
<!-- <div class="mb10">
|
||||
<!-- <div class="mb10">
|
||||
<el-button type="primary" icon="el-icon-Download" size="small" @click="exportExcelTemplate" :loading="loading">模版下载</el-button>
|
||||
<el-button type="primary" icon="el-icon-Upload" size="small">导入</el-button>
|
||||
<el-button type="primary" icon="el-icon-Download" size="small" @click="ledgerEverywhere" :loading="loading1">导出</el-button>
|
||||
@@ -11,7 +10,7 @@
|
||||
import { ref, nextTick } from 'vue'
|
||||
import Tree from './index.vue'
|
||||
|
||||
import { getTerminalTree,downTerminalTemplate,exportTerminalBase } from '@/api/device-boot/Business'
|
||||
import { getTerminalTree, downTerminalTemplate, exportTerminalBase } from '@/api/device-boot/Business'
|
||||
import { useConfig } from '@/stores/config'
|
||||
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
|
||||
defineOptions({
|
||||
@@ -28,58 +27,108 @@ const info = (id: any) => {
|
||||
expanded.value = [id]
|
||||
getTerminalTree().then(res => {
|
||||
// let arr: any[] = []
|
||||
if (VITE_FLAG) {
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Menu'
|
||||
item.plevel = item.level
|
||||
item.level = 0
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-HomeFilled'
|
||||
// if (VITE_FLAG) {
|
||||
// res.data.forEach((item: any) => {
|
||||
// item.icon = 'el-icon-Menu'
|
||||
// item.plevel = item.level
|
||||
// item.level = 0
|
||||
// item.children.forEach((item2: any) => {
|
||||
// item2.icon = 'el-icon-HomeFilled'
|
||||
|
||||
item2.plevel = item2.level
|
||||
item2.level = 100
|
||||
expanded.value.push(item2.id)
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-CollectionTag'
|
||||
item3.plevel = item3.level
|
||||
item3.level = 200
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Flag'
|
||||
item4.plevel = item4.level
|
||||
item4.level = 300
|
||||
// arr.push(item4)
|
||||
item4.children.forEach((item5: any) => {
|
||||
item5.icon = 'el-icon-OfficeBuilding'
|
||||
item5.plevel = item5.level
|
||||
item5.level = 300
|
||||
// item5.id = item4.id
|
||||
item5.children.forEach((item6: any) => {
|
||||
item6.icon = 'el-icon-HelpFilled'
|
||||
item6.plevel = 4
|
||||
if (item6.name == '电网侧' && item6.children.length == 0) {
|
||||
item6.level = 400
|
||||
} else {
|
||||
item6.level = 400
|
||||
}
|
||||
item6.children.forEach((item7: any) => {
|
||||
item7.icon = 'el-icon-Film'
|
||||
item7.plevel = item7.level
|
||||
item7.level = 400
|
||||
item7.children.forEach((item8: any) => {
|
||||
item8.icon = 'el-icon-Collection'
|
||||
item8.plevel = item8.level
|
||||
item8.level = 500
|
||||
item8.children.forEach((item9: any) => {
|
||||
item9.icon = 'el-icon-Share'
|
||||
item9.plevel = item9.level
|
||||
item9.level = 600
|
||||
item9.children.forEach((item10: any) => {
|
||||
item10.icon = 'el-icon-Location'
|
||||
item10.plevel = item10.level
|
||||
item10.level = 700
|
||||
})
|
||||
})
|
||||
})
|
||||
// item2.plevel = item2.level
|
||||
// item2.level = 100
|
||||
// expanded.value.push(item2.id)
|
||||
// item2.children.forEach((item3: any) => {
|
||||
// item3.icon = 'el-icon-CollectionTag'
|
||||
// item3.plevel = item3.level
|
||||
// item3.level = 200
|
||||
// item3.children.forEach((item4: any) => {
|
||||
// item4.icon = 'el-icon-Flag'
|
||||
// item4.plevel = item4.level
|
||||
// item4.level = 300
|
||||
// // arr.push(item4)
|
||||
// item4.children.forEach((item5: any) => {
|
||||
// item5.icon = 'el-icon-OfficeBuilding'
|
||||
// item5.plevel = item5.level
|
||||
// item5.level = 300
|
||||
// // item5.id = item4.id
|
||||
// item5.children.forEach((item6: any) => {
|
||||
// item6.icon = 'el-icon-HelpFilled'
|
||||
// item6.plevel = 4
|
||||
// if (item6.name == '电网侧' && item6.children.length == 0) {
|
||||
// item6.level = 400
|
||||
// } else {
|
||||
// item6.level = 400
|
||||
// }
|
||||
// item6.children.forEach((item7: any) => {
|
||||
// item7.icon = 'el-icon-Film'
|
||||
// item7.plevel = item7.level
|
||||
// item7.level = 400
|
||||
// item7.children.forEach((item8: any) => {
|
||||
// item8.icon = 'el-icon-Collection'
|
||||
// item8.plevel = item8.level
|
||||
// item8.level = 500
|
||||
// item8.children.forEach((item9: any) => {
|
||||
// item9.icon = 'el-icon-Share'
|
||||
// item9.plevel = item9.level
|
||||
// item9.level = 600
|
||||
// item9.children.forEach((item10: any) => {
|
||||
// item10.icon = 'el-icon-Location'
|
||||
// item10.plevel = item10.level
|
||||
// item10.level = 700
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// } else {
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Menu'
|
||||
item.color = 'var(--el-color-primary)'
|
||||
item.plevel = item.level
|
||||
item.level = (item.level + 1) * 100
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-HomeFilled'
|
||||
item2.color = 'var(--el-color-primary)'
|
||||
item2.plevel = item2.level
|
||||
item2.level = (item2.level + 1) * 100
|
||||
expanded.value.push(item2.id)
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-CollectionTag'
|
||||
item3.color = 'var(--el-color-primary)'
|
||||
item3.plevel = item3.level
|
||||
item3.level = (item3.level + 1) * 100
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Flag'
|
||||
item4.color = 'var(--el-color-primary)'
|
||||
item4.plevel = item4.level
|
||||
item4.level = (item4.level + 1) * 100
|
||||
item4.children.forEach((item5: any) => {
|
||||
item5.icon = 'el-icon-OfficeBuilding'
|
||||
item5.color = 'var(--el-color-primary)'
|
||||
item5.plevel = item5.level
|
||||
item5.level = (item5.level == 7 ? 4 : item5.level + 1) * 100
|
||||
item5.children.forEach((item6: any) => {
|
||||
item6.icon =
|
||||
item6.children?.[0]?.children?.length > 0 ? 'el-icon-Film' : 'el-icon-Share'
|
||||
item6.color = 'var(--el-color-primary)'
|
||||
item6.plevel = item6.level
|
||||
item6.level = (item6.level + 1) * 100
|
||||
item6.children.forEach((item7: any) => {
|
||||
item7.icon = item7.children.length > 0 ? 'el-icon-Share' : 'el-icon-Location'
|
||||
item7.color = 'var(--el-color-primary)'
|
||||
item7.plevel = item7.level
|
||||
item7.level = (item7.level + 1) * 100
|
||||
item7.children.forEach((item8: any) => {
|
||||
item8.icon = 'el-icon-Location'
|
||||
item8.color = 'var(--el-color-primary)'
|
||||
item8.plevel = item8.level
|
||||
item8.level = (item8.level + 1) * 100
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -87,49 +136,8 @@ const info = (id: any) => {
|
||||
})
|
||||
})
|
||||
})
|
||||
} else {
|
||||
res.data.forEach((item: any) => {
|
||||
item.icon = 'el-icon-Menu'
|
||||
item.plevel = item.level
|
||||
item.level = (item.level + 1) * 100
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-HomeFilled'
|
||||
item2.plevel = item2.level
|
||||
item2.level = (item2.level + 1) * 100
|
||||
expanded.value.push(item2.id)
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-CollectionTag'
|
||||
item3.plevel = item3.level
|
||||
item3.level = (item3.level + 1) * 100
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Flag'
|
||||
item4.plevel = item4.level
|
||||
item4.level = (item4.level + 1) * 100
|
||||
item4.children.forEach((item5: any) => {
|
||||
item5.icon = 'el-icon-OfficeBuilding'
|
||||
item5.plevel = item5.level
|
||||
item5.level = (item5.level == 7 ? 4 : item5.level + 1) * 100
|
||||
item5.children.forEach((item6: any) => {
|
||||
item6.icon = 'el-icon-Film'
|
||||
item6.plevel = item6.level
|
||||
item6.level = (item6.level + 1) * 100
|
||||
item6.children.forEach((item7: any) => {
|
||||
item7.icon = 'el-icon-Share'
|
||||
item7.plevel = item7.level
|
||||
item7.level = (item7.level + 1) * 100
|
||||
item7.children.forEach((item8: any) => {
|
||||
item8.icon = 'el-icon-Location'
|
||||
item8.plevel = item8.level
|
||||
item8.level = (item8.level + 1) * 100
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
// }
|
||||
|
||||
tree.value = res.data
|
||||
|
||||
@@ -149,7 +157,7 @@ const info = (id: any) => {
|
||||
})
|
||||
}
|
||||
// 下载模版
|
||||
const exportExcelTemplate = async() => {
|
||||
const exportExcelTemplate = async () => {
|
||||
loading.value = true
|
||||
downTerminalTemplate().then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
@@ -168,7 +176,7 @@ const exportExcelTemplate = async() => {
|
||||
}, 0)
|
||||
}
|
||||
// 导出台账
|
||||
const ledgerEverywhere = async() => {
|
||||
const ledgerEverywhere = async () => {
|
||||
loading1.value = true
|
||||
exportTerminalBase().then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
style="min-width: unset; padding: 10px 10px 0"
|
||||
@change="loadData"
|
||||
v-if="props.showSelect"
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
const config: {
|
||||
base_url: string
|
||||
result_code: number | string
|
||||
default_headers: AxiosHeaders
|
||||
request_timeout: number
|
||||
} = {
|
||||
/**
|
||||
* api请求基础路径
|
||||
*/
|
||||
base_url: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL,
|
||||
/**
|
||||
* 接口成功返回状态码
|
||||
*/
|
||||
result_code: 200,
|
||||
|
||||
/**
|
||||
* 接口请求超时时间
|
||||
*/
|
||||
request_timeout: 30000,
|
||||
|
||||
/**
|
||||
* 默认接口请求类型
|
||||
* 可选值:application/x-www-form-urlencoded multipart/form-data
|
||||
*/
|
||||
default_headers: 'application/json'
|
||||
}
|
||||
|
||||
export { config }
|
||||
@@ -1,6 +0,0 @@
|
||||
export default {
|
||||
'401': '认证失败,无法访问系统资源',
|
||||
'403': '当前操作没有权限',
|
||||
'404': '访问资源不存在',
|
||||
default: '系统未知错误,请反馈给管理员'
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
import { service } from './service'
|
||||
|
||||
import { config } from './config'
|
||||
|
||||
const { default_headers } = config
|
||||
|
||||
const request = (option: any) => {
|
||||
const { url, method, params, data, headersType, responseType, ...config } = option
|
||||
return service({
|
||||
url: url,
|
||||
method,
|
||||
params,
|
||||
data,
|
||||
...config,
|
||||
responseType: responseType,
|
||||
headers: {
|
||||
'Content-Type': headersType || default_headers
|
||||
}
|
||||
})
|
||||
}
|
||||
export default {
|
||||
get: async <T = any>(option: any) => {
|
||||
const res = await request({ method: 'GET', ...option })
|
||||
return res.data as unknown as T
|
||||
},
|
||||
post: async <T = any>(option: any) => {
|
||||
const res = await request({ method: 'POST', ...option })
|
||||
return res.data as unknown as T
|
||||
},
|
||||
postOriginal: async (option: any) => {
|
||||
const res = await request({ method: 'POST', ...option })
|
||||
return res
|
||||
},
|
||||
delete: async <T = any>(option: any) => {
|
||||
const res = await request({ method: 'DELETE', ...option })
|
||||
return res.data as unknown as T
|
||||
},
|
||||
put: async <T = any>(option: any) => {
|
||||
const res = await request({ method: 'PUT', ...option })
|
||||
return res.data as unknown as T
|
||||
},
|
||||
download: async <T = any>(option: any) => {
|
||||
const res = await request({ method: 'GET', responseType: 'blob', ...option })
|
||||
return res as unknown as Promise<T>
|
||||
},
|
||||
upload: async <T = any>(option: any) => {
|
||||
option.headersType = 'multipart/form-data'
|
||||
const res = await request({ method: 'POST', ...option })
|
||||
return res as unknown as Promise<T>
|
||||
}
|
||||
}
|
||||
@@ -1,228 +0,0 @@
|
||||
import axios, {
|
||||
AxiosError,
|
||||
AxiosInstance,
|
||||
AxiosRequestHeaders,
|
||||
AxiosResponse,
|
||||
InternalAxiosRequestConfig
|
||||
} from 'axios'
|
||||
|
||||
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
|
||||
import qs from 'qs'
|
||||
import { config } from '@/config/axios/config'
|
||||
import { getAccessToken, getRefreshToken, getTenantId, removeToken, setToken } from '@/utils/auth'
|
||||
import errorCode from './errorCode'
|
||||
|
||||
import { deleteUserCache } from '@/hooks/web/useCache'
|
||||
|
||||
const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE
|
||||
const { result_code, base_url, request_timeout } = config
|
||||
|
||||
// 需要忽略的提示。忽略后,自动 Promise.reject('error')
|
||||
const ignoreMsgs = [
|
||||
'无效的刷新令牌', // 刷新令牌被删除时,不用提示
|
||||
'刷新令牌已过期' // 使用刷新令牌,刷新获取新的访问令牌时,结果因为过期失败,此时需要忽略。否则,会导致继续 401,无法跳转到登出界面
|
||||
]
|
||||
// 是否显示重新登录
|
||||
export const isRelogin = { show: false }
|
||||
// Axios 无感知刷新令牌,参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
|
||||
// 请求队列
|
||||
let requestList: any[] = []
|
||||
// 是否正在刷新中
|
||||
let isRefreshToken = false
|
||||
// 请求白名单,无须token的接口
|
||||
const whiteList: string[] = ['/login', '/refresh-token']
|
||||
|
||||
// 创建axios实例
|
||||
const service: AxiosInstance = axios.create({
|
||||
baseURL: base_url, // api 的 base_url
|
||||
timeout: request_timeout, // 请求超时时间
|
||||
withCredentials: false // 禁用 Cookie 等信息
|
||||
})
|
||||
|
||||
// request拦截器
|
||||
service.interceptors.request.use(
|
||||
(config: InternalAxiosRequestConfig) => {
|
||||
// 是否需要设置 token
|
||||
let isToken = (config!.headers || {}).isToken === false
|
||||
whiteList.some((v) => {
|
||||
if (config.url) {
|
||||
config.url.indexOf(v) > -1
|
||||
return (isToken = false)
|
||||
}
|
||||
})
|
||||
if (getAccessToken() && !isToken) {
|
||||
;(config as Recordable).headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token
|
||||
}
|
||||
// 设置租户
|
||||
if (tenantEnable && tenantEnable === 'true') {
|
||||
const tenantId = getTenantId()
|
||||
if (tenantId) (config as Recordable).headers['tenant-id'] = tenantId
|
||||
}
|
||||
const params = config.params || {}
|
||||
const data = config.data || false
|
||||
if (
|
||||
config.method?.toUpperCase() === 'POST' &&
|
||||
(config.headers as AxiosRequestHeaders)['Content-Type'] ===
|
||||
'application/x-www-form-urlencoded'
|
||||
) {
|
||||
config.data = qs.stringify(data)
|
||||
}
|
||||
// get参数编码
|
||||
if (config.method?.toUpperCase() === 'GET' && params) {
|
||||
config.params = {}
|
||||
const paramsStr = qs.stringify(params, { allowDots: true })
|
||||
if (paramsStr) {
|
||||
config.url = config.url + '?' + paramsStr
|
||||
}
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
// Do something with request error
|
||||
console.log(error) // for debug
|
||||
Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// response 拦截器
|
||||
service.interceptors.response.use(
|
||||
async (response: AxiosResponse<any>) => {
|
||||
let { data } = response
|
||||
const config = response.config
|
||||
if (!data) {
|
||||
// 返回“[HTTP]请求没有返回值”;
|
||||
throw new Error()
|
||||
}
|
||||
const { t } = useI18n()
|
||||
// 未设置状态码则默认成功状态
|
||||
// 二进制数据则直接返回,例如说 Excel 导出
|
||||
if (
|
||||
response.request.responseType === 'blob' ||
|
||||
response.request.responseType === 'arraybuffer'
|
||||
) {
|
||||
// 注意:如果导出的响应为 json,说明可能失败了,不直接返回进行下载
|
||||
if (response.data.type !== 'application/json') {
|
||||
return response.data
|
||||
}
|
||||
data = await new Response(response.data).json()
|
||||
}
|
||||
const code = data.code || result_code
|
||||
// 获取错误信息
|
||||
const msg = data.msg || errorCode[code] || errorCode['default']
|
||||
if (ignoreMsgs.indexOf(msg) !== -1) {
|
||||
// 如果是忽略的错误码,直接返回 msg 异常
|
||||
return Promise.reject(msg)
|
||||
} else if (code === 401) {
|
||||
// 如果未认证,并且未进行刷新令牌,说明可能是访问令牌过期了
|
||||
if (!isRefreshToken) {
|
||||
isRefreshToken = true
|
||||
// 1. 如果获取不到刷新令牌,则只能执行登出操作
|
||||
if (!getRefreshToken()) {
|
||||
return handleAuthorized()
|
||||
}
|
||||
// 2. 进行刷新访问令牌
|
||||
try {
|
||||
const refreshTokenRes = await refreshToken()
|
||||
// 2.1 刷新成功,则回放队列的请求 + 当前请求
|
||||
setToken((await refreshTokenRes).data.data)
|
||||
config.headers!.Authorization = 'Bearer ' + getAccessToken()
|
||||
requestList.forEach((cb: any) => {
|
||||
cb()
|
||||
})
|
||||
requestList = []
|
||||
return service(config)
|
||||
} catch (e) {
|
||||
// 为什么需要 catch 异常呢?刷新失败时,请求因为 Promise.reject 触发异常。
|
||||
// 2.2 刷新失败,只回放队列的请求
|
||||
requestList.forEach((cb: any) => {
|
||||
cb()
|
||||
})
|
||||
// 提示是否要登出。即不回放当前请求!不然会形成递归
|
||||
return handleAuthorized()
|
||||
} finally {
|
||||
requestList = []
|
||||
isRefreshToken = false
|
||||
}
|
||||
} else {
|
||||
// 添加到队列,等待刷新获取到新的令牌
|
||||
return new Promise((resolve) => {
|
||||
requestList.push(() => {
|
||||
config.headers!.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
resolve(service(config))
|
||||
})
|
||||
})
|
||||
}
|
||||
} else if (code === 500) {
|
||||
ElMessage.error(t('sys.api.errMsg500'))
|
||||
return Promise.reject(new Error(msg))
|
||||
} else if (code === 901) {
|
||||
ElMessage.error({
|
||||
offset: 300,
|
||||
dangerouslyUseHTMLString: true,
|
||||
message:
|
||||
'<div>' +
|
||||
t('sys.api.errMsg901') +
|
||||
'</div>' +
|
||||
'<div> </div>' +
|
||||
'<div>参考 https://doc.iocoder.cn/ 教程</div>' +
|
||||
'<div> </div>' +
|
||||
'<div>5 分钟搭建本地环境</div>'
|
||||
})
|
||||
return Promise.reject(new Error(msg))
|
||||
} else if (code !== 200) {
|
||||
if (msg === '无效的刷新令牌') {
|
||||
// hard coding:忽略这个提示,直接登出
|
||||
console.log(msg)
|
||||
} else {
|
||||
ElNotification.error({ title: msg })
|
||||
}
|
||||
return Promise.reject('error')
|
||||
} else {
|
||||
return data
|
||||
}
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
console.log('err' + error) // for debug
|
||||
let { message } = error
|
||||
const { t } = useI18n()
|
||||
if (message === 'Network Error') {
|
||||
message = t('sys.api.errorMessage')
|
||||
} else if (message.includes('timeout')) {
|
||||
message = t('sys.api.apiTimeoutMessage')
|
||||
} else if (message.includes('Request failed with status code')) {
|
||||
message = t('sys.api.apiRequestFailed') + message.substr(message.length - 3)
|
||||
}
|
||||
ElMessage.error(message)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
const refreshToken = async () => {
|
||||
axios.defaults.headers.common['tenant-id'] = getTenantId()
|
||||
return await axios.post(base_url + '/system/auth/refresh-token?refreshToken=' + getRefreshToken())
|
||||
}
|
||||
const handleAuthorized = () => {
|
||||
const { t } = useI18n()
|
||||
if (!isRelogin.show) {
|
||||
// 如果已经到重新登录页面则不进行弹窗提示
|
||||
if (window.location.href.includes('login?redirect=')) {
|
||||
return
|
||||
}
|
||||
isRelogin.show = true
|
||||
ElMessageBox.confirm(t('sys.api.timeoutMessage'), t('common.confirmTitle'), {
|
||||
showCancelButton: false,
|
||||
closeOnClickModal: false,
|
||||
showClose: false,
|
||||
confirmButtonText: t('login.relogin'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteUserCache() // 删除用户缓存
|
||||
removeToken()
|
||||
isRelogin.show = false
|
||||
// 干掉token后再走一次路由让它过router.beforeEach的校验
|
||||
window.location.href = window.location.href
|
||||
})
|
||||
}
|
||||
return Promise.reject(t('sys.api.timeoutMessage'))
|
||||
}
|
||||
export { service }
|
||||
@@ -1,35 +1,36 @@
|
||||
import { i18n } from '@/plugins/vueI18n'
|
||||
import { useLocaleStoreWithOut } from '@/stores/modules/locale'
|
||||
import { setHtmlPageLang } from '@/plugins/vueI18n/helper'
|
||||
|
||||
const setI18nLanguage = (locale: LocaleType) => {
|
||||
const localeStore = useLocaleStoreWithOut()
|
||||
|
||||
if (i18n.mode === 'legacy') {
|
||||
i18n.global.locale = locale
|
||||
} else {
|
||||
;(i18n.global.locale as any).value = locale
|
||||
}
|
||||
localeStore.setCurrentLocale({
|
||||
lang: locale
|
||||
})
|
||||
setHtmlPageLang(locale)
|
||||
}
|
||||
|
||||
export const useLocale = () => {
|
||||
// Switching the language will change the locale of useI18n
|
||||
// And submit to configuration modification
|
||||
const changeLocale = async (locale: LocaleType) => {
|
||||
const globalI18n = i18n.global
|
||||
|
||||
const langModule = await import(`../../locales/${locale}.ts`)
|
||||
|
||||
globalI18n.setLocaleMessage(locale, langModule.default)
|
||||
|
||||
setI18nLanguage(locale)
|
||||
}
|
||||
|
||||
return {
|
||||
changeLocale
|
||||
}
|
||||
}
|
||||
import { i18n } from '@/plugins/vueI18n'
|
||||
import { useLocaleStoreWithOut } from '@/stores/modules/locale'
|
||||
import { setHtmlPageLang } from '@/plugins/vueI18n/helper'
|
||||
import { loadLocaleMessages } from '@/locales'
|
||||
|
||||
const setI18nLanguage = (locale: LocaleType) => {
|
||||
const localeStore = useLocaleStoreWithOut()
|
||||
|
||||
if (i18n.mode === 'legacy') {
|
||||
i18n.global.locale = locale
|
||||
} else {
|
||||
;(i18n.global.locale as any).value = locale
|
||||
}
|
||||
localeStore.setCurrentLocale({
|
||||
lang: locale
|
||||
})
|
||||
setHtmlPageLang(locale)
|
||||
}
|
||||
|
||||
export const useLocale = () => {
|
||||
// Switching the language will change the locale of useI18n
|
||||
// And submit to configuration modification
|
||||
const changeLocale = async (locale: LocaleType) => {
|
||||
const globalI18n = i18n.global
|
||||
|
||||
const message = await loadLocaleMessages(locale)
|
||||
|
||||
globalI18n.setLocaleMessage(locale, message)
|
||||
|
||||
setI18nLanguage(locale)
|
||||
}
|
||||
|
||||
return {
|
||||
changeLocale
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
<script lang="tsx">
|
||||
import { computed, defineComponent, unref } from 'vue'
|
||||
import { useAppStore } from '@/stores/modules/app'
|
||||
import { Backtop } from '@/components/Backtop'
|
||||
import { Setting } from '@/layouts/components/Setting'
|
||||
import { useRenderLayout } from './components/useRenderLayout'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('layout')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
// 是否是移动端
|
||||
const mobile = computed(() => appStore.getMobile)
|
||||
|
||||
// 菜单折叠
|
||||
const collapse = computed(() => appStore.getCollapse)
|
||||
|
||||
const layout = computed(() => appStore.getLayout)
|
||||
|
||||
const handleClickOutside = () => {
|
||||
appStore.setCollapse(true)
|
||||
}
|
||||
|
||||
const renderLayout = () => {
|
||||
switch (unref(layout)) {
|
||||
case 'classic':
|
||||
const { renderClassic } = useRenderLayout()
|
||||
return renderClassic()
|
||||
case 'topLeft':
|
||||
const { renderTopLeft } = useRenderLayout()
|
||||
return renderTopLeft()
|
||||
case 'top':
|
||||
const { renderTop } = useRenderLayout()
|
||||
return renderTop()
|
||||
case 'cutMenu':
|
||||
const { renderCutMenu } = useRenderLayout()
|
||||
return renderCutMenu()
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Layout',
|
||||
setup() {
|
||||
return () => (
|
||||
<section class={[prefixCls, `${prefixCls}__${layout.value}`, 'w-[100%] h-[100%] relative']}>
|
||||
{mobile.value && !collapse.value ? (
|
||||
<div
|
||||
class="absolute left-0 top-0 z-99 h-full w-full bg-[var(--el-color-black)] opacity-30"
|
||||
onClick={handleClickOutside}
|
||||
></div>
|
||||
) : undefined}
|
||||
|
||||
{renderLayout()}
|
||||
|
||||
<Backtop></Backtop>
|
||||
|
||||
<Setting></Setting>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$prefix-cls: v-layout;
|
||||
|
||||
.#{$prefix-cls} {
|
||||
background-color: var(--app-content-bg-color);
|
||||
:deep(.el-scrollbar__view) {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,452 +1,453 @@
|
||||
<template>
|
||||
<div class="layout-config-drawer">
|
||||
<el-drawer :model-value="configStore.layout.showDrawer" title="布局配置" size="310px" @close="onCloseDrawer">
|
||||
<el-scrollbar class="layout-mode-style-scrollbar">
|
||||
<el-form ref="formRef" :model="configStore.layout">
|
||||
<div class="layout-mode-styles-box">
|
||||
|
||||
<el-divider border-style="dashed">布局方式</el-divider>
|
||||
<div class="layout-mode-box-style">
|
||||
<el-row class="layout-mode-box-style-row" :gutter="10">
|
||||
<el-col :span="12">
|
||||
<div
|
||||
@click="setLayoutMode('Default')"
|
||||
class="layout-mode-style default"
|
||||
:class="configStore.layout.layoutMode == 'Default' ? 'active' : ''"
|
||||
>
|
||||
<div class="layout-mode-style-box">
|
||||
<div class="layout-mode-style-aside"></div>
|
||||
<div class="layout-mode-style-container-box">
|
||||
<div class="layout-mode-style-header"></div>
|
||||
<div class="layout-mode-style-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-mode-style-name">默认</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div
|
||||
@click="setLayoutMode('Classic')"
|
||||
class="layout-mode-style classic"
|
||||
:class="configStore.layout.layoutMode == 'Classic' ? 'active' : ''"
|
||||
>
|
||||
<div class="layout-mode-style-box">
|
||||
<div class="layout-mode-style-aside"></div>
|
||||
<div class="layout-mode-style-container-box">
|
||||
<div class="layout-mode-style-header"></div>
|
||||
<div class="layout-mode-style-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-mode-style-name">经典</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<div
|
||||
@click="setLayoutMode('Streamline')"
|
||||
class="layout-mode-style streamline"
|
||||
:class="configStore.layout.layoutMode == 'Streamline' ? 'active' : ''"
|
||||
>
|
||||
<div class="layout-mode-style-box">
|
||||
<div class="layout-mode-style-container-box">
|
||||
<div class="layout-mode-style-header"></div>
|
||||
<div class="layout-mode-style-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-mode-style-name">单栏</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<el-divider border-style="dashed">全局</el-divider>
|
||||
<div class="layout-config-global">
|
||||
<el-form-item label="后台页面切换动画">
|
||||
<el-select
|
||||
@change="onCommitState($event, 'mainAnimation')"
|
||||
:model-value="configStore.layout.mainAnimation"
|
||||
:placeholder="'layouts.Please select an animation name'"
|
||||
>
|
||||
<el-option label="slide-right" value="slide-right"></el-option>
|
||||
<el-option label="slide-left" value="slide-left"></el-option>
|
||||
<el-option label="el-fade-in-linear" value="el-fade-in-linear"></el-option>
|
||||
<el-option label="el-fade-in" value="el-fade-in"></el-option>
|
||||
<el-option label="el-zoom-in-center" value="el-zoom-in-center"></el-option>
|
||||
<el-option label="el-zoom-in-top" value="el-zoom-in-top"></el-option>
|
||||
<el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="组件主题色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'elementUiPrimary')"
|
||||
:model-value="configStore.getColorVal('elementUiPrimary')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="表格标题栏背景颜色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'tableHeaderBackground')"
|
||||
:model-value="configStore.getColorVal('tableHeaderBackground')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="表格标题栏文字颜色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'tableHeaderColor')"
|
||||
:model-value="configStore.getColorVal('tableHeaderColor')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="表格激活栏颜色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'tableCurrent')"
|
||||
:model-value="configStore.getColorVal('tableCurrent')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-divider border-style="dashed">侧边栏</el-divider>
|
||||
<div class="layout-config-aside">
|
||||
<el-form-item label="侧边菜单栏背景色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'menuBackground')"
|
||||
:model-value="configStore.getColorVal('menuBackground')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="侧边菜单文字颜色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'menuColor')"
|
||||
:model-value="configStore.getColorVal('menuColor')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="侧边菜单激活项背景色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'menuActiveBackground')"
|
||||
:model-value="configStore.getColorVal('menuActiveBackground')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="侧边菜单激活项文字色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'menuActiveColor')"
|
||||
:model-value="configStore.getColorVal('menuActiveColor')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示侧边菜单顶栏(LOGO栏)">
|
||||
<el-switch
|
||||
@change="onCommitState($event, 'menuShowTopBar')"
|
||||
:model-value="configStore.layout.menuShowTopBar"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="侧边菜单顶栏背景色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'menuTopBarBackground')"
|
||||
:model-value="configStore.getColorVal('menuTopBarBackground')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="侧边菜单宽度(展开时)">
|
||||
<el-input
|
||||
@input="onCommitState($event, 'menuWidth')"
|
||||
type="number"
|
||||
:step="10"
|
||||
:model-value="configStore.layout.menuWidth"
|
||||
>
|
||||
<template #append>px</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="侧边菜单默认图标">-->
|
||||
<!-- <IconSelector-->
|
||||
<!-- @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"-->
|
||||
<!-- :model-value="configStore.layout.menuDefaultIcon"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="侧边菜单水平折叠">-->
|
||||
<!-- <el-switch-->
|
||||
<!-- @change="onCommitState($event, 'menuCollapse')"-->
|
||||
<!-- :model-value="configStore.layout.menuCollapse"-->
|
||||
<!-- ></el-switch>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="侧边菜单手风琴">-->
|
||||
<!-- <el-switch-->
|
||||
<!-- @change="onCommitState($event, 'menuUniqueOpened')"-->
|
||||
<!-- :model-value="configStore.layout.menuUniqueOpened"-->
|
||||
<!-- ></el-switch>-->
|
||||
<!-- </el-form-item>-->
|
||||
</div>
|
||||
|
||||
<el-divider border-style="dashed">顶栏</el-divider>
|
||||
<div class="layout-config-aside">
|
||||
<el-form-item label="顶栏背景色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'headerBarBackground')"
|
||||
:model-value="configStore.getColorVal('headerBarBackground')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="顶栏文字色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'headerBarTabColor')"
|
||||
:model-value="configStore.getColorVal('headerBarTabColor')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="顶栏悬停时背景色">-->
|
||||
<!-- <el-color-picker-->
|
||||
<!-- @change="onCommitColorState($event, 'headerBarHoverBackground')"-->
|
||||
<!-- :model-value="configStore.getColorVal('headerBarHoverBackground')"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="顶栏菜单激活项背景色">-->
|
||||
<!-- <el-color-picker-->
|
||||
<!-- @change="onCommitColorState($event, 'headerBarTabActiveBackground')"-->
|
||||
<!-- :model-value="configStore.getColorVal('headerBarTabActiveBackground')"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="顶栏菜单激活项文字色">-->
|
||||
<!-- <el-color-picker-->
|
||||
<!-- @change="onCommitColorState($event, 'headerBarTabActiveColor')"-->
|
||||
<!-- :model-value="configStore.getColorVal('headerBarTabActiveColor')"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
</div>
|
||||
<el-popconfirm @confirm="restoreDefault" title="确定要恢复全部配置到默认值吗?">
|
||||
<template #reference>
|
||||
<div class="ba-center">
|
||||
<el-button class="w80" type="info">恢复默认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { useNavTabs } from '@/stores/navTabs'
|
||||
import { useRouter } from 'vue-router'
|
||||
import IconSelector from '@/components/baInput/components/iconSelector.vue'
|
||||
import { STORE_CONFIG } from '@/stores/constant/cacheKey'
|
||||
import { Local, Session } from '@/utils/storage'
|
||||
import type { Layout } from '@/stores/interface'
|
||||
|
||||
const configStore = useConfig()
|
||||
const navTabs = useNavTabs()
|
||||
const router = useRouter()
|
||||
|
||||
const onCommitState = (value: any, name: any) => {
|
||||
configStore.setLayout(name, value)
|
||||
}
|
||||
|
||||
const onCommitColorState = (value: string | null, name: keyof Layout) => {
|
||||
if (value === null) return
|
||||
const colors = configStore.layout[name] as string[]
|
||||
if (configStore.layout.isDark) {
|
||||
colors[1] = value
|
||||
} else {
|
||||
colors[0] = value
|
||||
}
|
||||
configStore.setLayout(name, colors)
|
||||
}
|
||||
|
||||
const setLayoutMode = (mode: string) => {
|
||||
configStore.setLayoutMode(mode)
|
||||
}
|
||||
|
||||
// 修改默认菜单图标
|
||||
const onCommitMenuDefaultIcon = (value: any, name: any) => {
|
||||
configStore.setLayout(name, value)
|
||||
|
||||
const menus = navTabs.state.tabsViewRoutes
|
||||
navTabs.setTabsViewRoutes([])
|
||||
setTimeout(() => {
|
||||
navTabs.setTabsViewRoutes(menus)
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const onCloseDrawer = () => {
|
||||
configStore.setLayout('showDrawer', false)
|
||||
}
|
||||
|
||||
const restoreDefault = () => {
|
||||
Local.remove(STORE_CONFIG)
|
||||
router.go(0)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.layout-config-drawer :deep(.el-input__inner) {
|
||||
padding: 0 0 0 6px;
|
||||
}
|
||||
|
||||
.layout-config-drawer :deep(.el-input-group__append) {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.layout-config-drawer :deep(.el-drawer__header) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.layout-config-drawer :deep(.el-drawer__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layout-mode-styles-box {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.layout-mode-box-style-row {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.layout-mode-style {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: var(--el-border-radius-small);
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.layout-mode-style-name {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--el-color-primary-light-5);
|
||||
border-radius: 50%;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 1px solid var(--el-color-primary-light-3);
|
||||
}
|
||||
|
||||
.layout-mode-style-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.layout-mode-style-aside {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.layout-mode-style-container-box {
|
||||
width: 68%;
|
||||
height: 90%;
|
||||
margin-left: 4%;
|
||||
|
||||
.layout-mode-style-header {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background-color: var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.layout-mode-style-container {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--el-border-color-extra-light);
|
||||
margin-top: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.classic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.layout-mode-style-aside {
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
background-color: var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.layout-mode-style-container-box {
|
||||
width: 82%;
|
||||
height: 100%;
|
||||
|
||||
.layout-mode-style-header {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
.layout-mode-style-container {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
background-color: var(--el-border-color-extra-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.streamline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.layout-mode-style-container-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.layout-mode-style-header {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
.layout-mode-style-container {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
background-color: var(--el-border-color-extra-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.double {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.layout-mode-style-aside {
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
background-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
.layout-mode-style-container-box {
|
||||
width: 82%;
|
||||
height: 100%;
|
||||
|
||||
.layout-mode-style-header {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
.layout-mode-style-container {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
background-color: var(--el-border-color-extra-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.w80 {
|
||||
width: 90%;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="layout-config-drawer">
|
||||
<el-drawer :model-value="configStore.layout.showDrawer" title="布局配置" size="310px" @close="onCloseDrawer">
|
||||
<el-scrollbar class="layout-mode-style-scrollbar">
|
||||
<el-form ref="formRef" :model="configStore.layout">
|
||||
<div class="layout-mode-styles-box">
|
||||
|
||||
<el-divider border-style="dashed">布局方式</el-divider>
|
||||
<div class="layout-mode-box-style">
|
||||
<el-row class="layout-mode-box-style-row" :gutter="10">
|
||||
<el-col :span="12">
|
||||
<div
|
||||
@click="setLayoutMode('Default')"
|
||||
class="layout-mode-style default"
|
||||
:class="configStore.layout.layoutMode == 'Default' ? 'active' : ''"
|
||||
>
|
||||
<div class="layout-mode-style-box">
|
||||
<div class="layout-mode-style-aside"></div>
|
||||
<div class="layout-mode-style-container-box">
|
||||
<div class="layout-mode-style-header"></div>
|
||||
<div class="layout-mode-style-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-mode-style-name">默认</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div
|
||||
@click="setLayoutMode('Classic')"
|
||||
class="layout-mode-style classic"
|
||||
:class="configStore.layout.layoutMode == 'Classic' ? 'active' : ''"
|
||||
>
|
||||
<div class="layout-mode-style-box">
|
||||
<div class="layout-mode-style-aside"></div>
|
||||
<div class="layout-mode-style-container-box">
|
||||
<div class="layout-mode-style-header"></div>
|
||||
<div class="layout-mode-style-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-mode-style-name">经典</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<div
|
||||
@click="setLayoutMode('Streamline')"
|
||||
class="layout-mode-style streamline"
|
||||
:class="configStore.layout.layoutMode == 'Streamline' ? 'active' : ''"
|
||||
>
|
||||
<div class="layout-mode-style-box">
|
||||
<div class="layout-mode-style-container-box">
|
||||
<div class="layout-mode-style-header"></div>
|
||||
<div class="layout-mode-style-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-mode-style-name">单栏</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<el-divider border-style="dashed">全局</el-divider>
|
||||
<div class="layout-config-global">
|
||||
<el-form-item label="后台页面切换动画">
|
||||
<el-select
|
||||
@change="onCommitState($event, 'mainAnimation')"
|
||||
:model-value="configStore.layout.mainAnimation"
|
||||
:placeholder="'layouts.Please select an animation name'"
|
||||
filterable
|
||||
>
|
||||
<el-option label="slide-right" value="slide-right"></el-option>
|
||||
<el-option label="slide-left" value="slide-left"></el-option>
|
||||
<el-option label="el-fade-in-linear" value="el-fade-in-linear"></el-option>
|
||||
<el-option label="el-fade-in" value="el-fade-in"></el-option>
|
||||
<el-option label="el-zoom-in-center" value="el-zoom-in-center"></el-option>
|
||||
<el-option label="el-zoom-in-top" value="el-zoom-in-top"></el-option>
|
||||
<el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="组件主题色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'elementUiPrimary')"
|
||||
:model-value="configStore.getColorVal('elementUiPrimary')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="表格标题栏背景颜色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'tableHeaderBackground')"
|
||||
:model-value="configStore.getColorVal('tableHeaderBackground')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="表格标题栏文字颜色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'tableHeaderColor')"
|
||||
:model-value="configStore.getColorVal('tableHeaderColor')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="表格激活栏颜色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'tableCurrent')"
|
||||
:model-value="configStore.getColorVal('tableCurrent')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-divider border-style="dashed">侧边栏</el-divider>
|
||||
<div class="layout-config-aside">
|
||||
<el-form-item label="侧边菜单栏背景色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'menuBackground')"
|
||||
:model-value="configStore.getColorVal('menuBackground')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="侧边菜单文字颜色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'menuColor')"
|
||||
:model-value="configStore.getColorVal('menuColor')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="侧边菜单激活项背景色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'menuActiveBackground')"
|
||||
:model-value="configStore.getColorVal('menuActiveBackground')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="侧边菜单激活项文字色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'menuActiveColor')"
|
||||
:model-value="configStore.getColorVal('menuActiveColor')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示侧边菜单顶栏(LOGO栏)">
|
||||
<el-switch
|
||||
@change="onCommitState($event, 'menuShowTopBar')"
|
||||
:model-value="configStore.layout.menuShowTopBar"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="侧边菜单顶栏背景色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'menuTopBarBackground')"
|
||||
:model-value="configStore.getColorVal('menuTopBarBackground')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="侧边菜单宽度(展开时)">
|
||||
<el-input
|
||||
@input="onCommitState($event, 'menuWidth')"
|
||||
type="number"
|
||||
:step="10"
|
||||
:model-value="configStore.layout.menuWidth"
|
||||
>
|
||||
<template #append>px</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="侧边菜单默认图标">-->
|
||||
<!-- <IconSelector-->
|
||||
<!-- @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"-->
|
||||
<!-- :model-value="configStore.layout.menuDefaultIcon"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="侧边菜单水平折叠">-->
|
||||
<!-- <el-switch-->
|
||||
<!-- @change="onCommitState($event, 'menuCollapse')"-->
|
||||
<!-- :model-value="configStore.layout.menuCollapse"-->
|
||||
<!-- ></el-switch>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="侧边菜单手风琴">-->
|
||||
<!-- <el-switch-->
|
||||
<!-- @change="onCommitState($event, 'menuUniqueOpened')"-->
|
||||
<!-- :model-value="configStore.layout.menuUniqueOpened"-->
|
||||
<!-- ></el-switch>-->
|
||||
<!-- </el-form-item>-->
|
||||
</div>
|
||||
|
||||
<el-divider border-style="dashed">顶栏</el-divider>
|
||||
<div class="layout-config-aside">
|
||||
<el-form-item label="顶栏背景色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'headerBarBackground')"
|
||||
:model-value="configStore.getColorVal('headerBarBackground')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="顶栏文字色">
|
||||
<el-color-picker
|
||||
@change="onCommitColorState($event, 'headerBarTabColor')"
|
||||
:model-value="configStore.getColorVal('headerBarTabColor')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="顶栏悬停时背景色">-->
|
||||
<!-- <el-color-picker-->
|
||||
<!-- @change="onCommitColorState($event, 'headerBarHoverBackground')"-->
|
||||
<!-- :model-value="configStore.getColorVal('headerBarHoverBackground')"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="顶栏菜单激活项背景色">-->
|
||||
<!-- <el-color-picker-->
|
||||
<!-- @change="onCommitColorState($event, 'headerBarTabActiveBackground')"-->
|
||||
<!-- :model-value="configStore.getColorVal('headerBarTabActiveBackground')"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="顶栏菜单激活项文字色">-->
|
||||
<!-- <el-color-picker-->
|
||||
<!-- @change="onCommitColorState($event, 'headerBarTabActiveColor')"-->
|
||||
<!-- :model-value="configStore.getColorVal('headerBarTabActiveColor')"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
</div>
|
||||
<el-popconfirm @confirm="restoreDefault" title="确定要恢复全部配置到默认值吗?">
|
||||
<template #reference>
|
||||
<div class="ba-center">
|
||||
<el-button class="w80" type="info">恢复默认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { useNavTabs } from '@/stores/navTabs'
|
||||
import { useRouter } from 'vue-router'
|
||||
import IconSelector from '@/components/baInput/components/iconSelector.vue'
|
||||
import { STORE_CONFIG } from '@/stores/constant/cacheKey'
|
||||
import { Local, Session } from '@/utils/storage'
|
||||
import type { Layout } from '@/stores/interface'
|
||||
|
||||
const configStore = useConfig()
|
||||
const navTabs = useNavTabs()
|
||||
const router = useRouter()
|
||||
|
||||
const onCommitState = (value: any, name: any) => {
|
||||
configStore.setLayout(name, value)
|
||||
}
|
||||
|
||||
const onCommitColorState = (value: string | null, name: keyof Layout) => {
|
||||
if (value === null) return
|
||||
const colors = configStore.layout[name] as string[]
|
||||
if (configStore.layout.isDark) {
|
||||
colors[1] = value
|
||||
} else {
|
||||
colors[0] = value
|
||||
}
|
||||
configStore.setLayout(name, colors)
|
||||
}
|
||||
|
||||
const setLayoutMode = (mode: string) => {
|
||||
configStore.setLayoutMode(mode)
|
||||
}
|
||||
|
||||
// 修改默认菜单图标
|
||||
const onCommitMenuDefaultIcon = (value: any, name: any) => {
|
||||
configStore.setLayout(name, value)
|
||||
|
||||
const menus = navTabs.state.tabsViewRoutes
|
||||
navTabs.setTabsViewRoutes([])
|
||||
setTimeout(() => {
|
||||
navTabs.setTabsViewRoutes(menus)
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const onCloseDrawer = () => {
|
||||
configStore.setLayout('showDrawer', false)
|
||||
}
|
||||
|
||||
const restoreDefault = () => {
|
||||
Local.remove(STORE_CONFIG)
|
||||
router.go(0)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.layout-config-drawer :deep(.el-input__inner) {
|
||||
padding: 0 0 0 6px;
|
||||
}
|
||||
|
||||
.layout-config-drawer :deep(.el-input-group__append) {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.layout-config-drawer :deep(.el-drawer__header) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.layout-config-drawer :deep(.el-drawer__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layout-mode-styles-box {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.layout-mode-box-style-row {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.layout-mode-style {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: var(--el-border-radius-small);
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.layout-mode-style-name {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--el-color-primary-light-5);
|
||||
border-radius: 50%;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 1px solid var(--el-color-primary-light-3);
|
||||
}
|
||||
|
||||
.layout-mode-style-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.layout-mode-style-aside {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.layout-mode-style-container-box {
|
||||
width: 68%;
|
||||
height: 90%;
|
||||
margin-left: 4%;
|
||||
|
||||
.layout-mode-style-header {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background-color: var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.layout-mode-style-container {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--el-border-color-extra-light);
|
||||
margin-top: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.classic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.layout-mode-style-aside {
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
background-color: var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.layout-mode-style-container-box {
|
||||
width: 82%;
|
||||
height: 100%;
|
||||
|
||||
.layout-mode-style-header {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
.layout-mode-style-container {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
background-color: var(--el-border-color-extra-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.streamline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.layout-mode-style-container-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.layout-mode-style-header {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
.layout-mode-style-container {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
background-color: var(--el-border-color-extra-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.double {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.layout-mode-style-aside {
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
background-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
.layout-mode-style-container-box {
|
||||
width: 82%;
|
||||
height: 100%;
|
||||
|
||||
.layout-mode-style-header {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background-color: var(--el-border-color);
|
||||
}
|
||||
|
||||
.layout-mode-style-container {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
background-color: var(--el-border-color-extra-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.w80 {
|
||||
width: 90%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,25 +11,25 @@
|
||||
:data="eventList.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
|
||||
>
|
||||
<!-- <vxe-column type="seq" width="70px" title="序号"></vxe-column> -->
|
||||
<vxe-column field="time" width="180px" sortable title="发生时刻"></vxe-column>
|
||||
<vxe-column field="lineName" title="监测点"></vxe-column>
|
||||
<vxe-column field="powerCompany" title="变电站" width="100px"></vxe-column>
|
||||
<vxe-column field="powerCompany" title="供电公司" width="100px"></vxe-column>
|
||||
<vxe-column field="persistTime" width="120px" sortable title="持续时间(s)">
|
||||
<template #default="{ row }">
|
||||
{{ Math.floor(row.persistTime * 1000) / 1000 }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="time" width="180px" sortable title="暂降发生时刻"></vxe-column>
|
||||
<vxe-column field="eventValue" width="160px" sortable title="暂降(骤升)幅值(%)">
|
||||
<template #default="{ row }">
|
||||
{{ Math.floor(row.eventValue * 10000) / 100 }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="persistTime" width="120px" sortable title="持续时间(s)">
|
||||
<template #default="{ row }">
|
||||
{{ Math.floor(row.persistTime * 1000) / 1000 }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="eventType" width="100px" title="触发类型">
|
||||
<template #default="{ row }">
|
||||
{{ event.filter(item => item.id == row.eventType)[0]?.name || '/' }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="powerCompany" title="变电站" width="100px"></vxe-column>
|
||||
<vxe-column field="powerCompany" title="供电公司" width="100px"></vxe-column>
|
||||
<vxe-column field="lineName" title="监测点"></vxe-column>
|
||||
</vxe-table>
|
||||
<div class="table-pagination mt10">
|
||||
<el-pagination
|
||||
@@ -50,7 +50,8 @@ import { ref, reactive, onMounted } from 'vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import MQTT from '@/utils/mqtt'
|
||||
// import MQTT from '@/utils/mqtt'
|
||||
import socketClient from '@/utils/webSocketClient'
|
||||
const dictData = useDictData()
|
||||
const event = dictData.getBasicData('Event_Statis')
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
@@ -68,37 +69,71 @@ const handleClose = (done: any) => {
|
||||
drawer.value = false
|
||||
done()
|
||||
}
|
||||
const init = async () => {
|
||||
const mqttClient = new MQTT('/sendEvent')
|
||||
// 设置消息接收回调
|
||||
try {
|
||||
await mqttClient.init()
|
||||
const dataSocket = reactive({
|
||||
socketServe: socketClient.Instance
|
||||
})
|
||||
// const init = async () => {
|
||||
// const mqttClient = new MQTT('/sendEvent')
|
||||
// // 设置消息接收回调
|
||||
// try {
|
||||
// await mqttClient.init()
|
||||
|
||||
// 订阅主题
|
||||
await mqttClient.subscribe()
|
||||
// 设置消息接收回调
|
||||
mqttClient.onMessage((topic, message) => {
|
||||
const msg = JSON.parse(message.toString())
|
||||
// console.log('🚀 ~ init ~ msg:', msg)
|
||||
if (msg.deptList.includes(adminInfo.$state.deptId)) {
|
||||
drawer.value = true
|
||||
isLoading.value = true
|
||||
eventList.value.unshift(msg)
|
||||
setTimeout(() => {
|
||||
isLoading.value = false
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('MQTT 初始化失败:', error)
|
||||
}
|
||||
// // 订阅主题
|
||||
// await mqttClient.subscribe()
|
||||
// // 设置消息接收回调
|
||||
// mqttClient.onMessage((topic, message) => {
|
||||
// const msg = JSON.parse(message.toString())
|
||||
// // console.log('🚀 ~ init ~ msg:', msg)
|
||||
// if (msg.deptList.includes(adminInfo.$state.deptId)) {
|
||||
// drawer.value = true
|
||||
// isLoading.value = true
|
||||
// eventList.value.unshift(msg)
|
||||
// setTimeout(() => {
|
||||
// isLoading.value = false
|
||||
// }, 500)
|
||||
// }
|
||||
// })
|
||||
// } catch (error) {
|
||||
// // console.error('MQTT 初始化失败:', error)
|
||||
// }
|
||||
// }
|
||||
const socket = async () => {
|
||||
const url = localStorage.getItem('WebSocketUrl3') || 'null' //'ws://192.168.2.130:10203/event/'
|
||||
|
||||
// const url = 'ws://192.168.1.68:10203/event/'
|
||||
|
||||
await dataSocket.socketServe.connect(`${url}${adminInfo.id}`)
|
||||
|
||||
await dataSocket.socketServe.registerCallBack('message', (res: any) => {
|
||||
if (res.deptList.includes(adminInfo.$state.deptId)) {
|
||||
drawer.value = true
|
||||
isLoading.value = true
|
||||
eventList.value.unshift(res)
|
||||
setTimeout(() => {
|
||||
isLoading.value = false
|
||||
}, 500)
|
||||
}
|
||||
// logList.value.push({
|
||||
// type: res.code == 500 ? 'error' : '',
|
||||
// time: formatDate(new Date(), 'YYYY-MM-DD hh:mm:ss'),
|
||||
// name: res.message
|
||||
// })
|
||||
})
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
dataSocket.socketServe?.closeWs()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// startMqtt('/sendEvent', (topic, message) => {
|
||||
// const msg = JSON.parse(message.toString())
|
||||
// console.log(msg)
|
||||
// })
|
||||
init()
|
||||
|
||||
setTimeout(() => {
|
||||
socket()
|
||||
}, 3000)
|
||||
})
|
||||
defineExpose({
|
||||
open,
|
||||
|
||||
@@ -8,41 +8,14 @@
|
||||
name="el-icon-BellFilled"
|
||||
size="18"
|
||||
/>
|
||||
<span class="nav-menu-text" v-if="globalPopUpRef?.eventList.length != 0">
|
||||
{{ (globalPopUpRef?.eventList.length>99? '99+':globalPopUpRef?.eventList.length) || 0 }}
|
||||
<span class="nav-menu-text" v-if="globalPopUpRef?.eventList?.length > 0">
|
||||
{{ globalPopUpRef.eventList.length > 99 ? '99+' : globalPopUpRef.eventList.length }}
|
||||
</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<!-- <el-tooltip effect="dark" content="截图" placement="bottom">
|
||||
<div @click="savePng" class="nav-menu-item">
|
||||
<Icon
|
||||
:color="configStore.getColorVal('headerBarTabColor')"
|
||||
class="nav-menu-icon"
|
||||
name="el-icon-Camera"
|
||||
size="18"
|
||||
/>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" :content="state.isFullScreen ? '缩小' : '放大'" placement="bottom">
|
||||
<div @click="onFullScreen" class="nav-menu-item" :class="state.isFullScreen ? 'hover' : ''">
|
||||
<Icon
|
||||
:color="configStore.getColorVal('headerBarTabColor')"
|
||||
class="nav-menu-icon"
|
||||
v-if="state.isFullScreen"
|
||||
name="fa-solid fa-compress"
|
||||
size="18"
|
||||
/>
|
||||
<Icon
|
||||
:color="configStore.getColorVal('headerBarTabColor')"
|
||||
class="nav-menu-icon"
|
||||
v-else
|
||||
name="fa-solid fa-expand"
|
||||
size="18"
|
||||
/>
|
||||
</div>
|
||||
</el-tooltip> -->
|
||||
|
||||
<el-dropdown style="height: 100%" @command="handleCommand">
|
||||
<div class="admin-info" :class="state.currentNavMenu == 'adminInfo' ? 'hover' : ''">
|
||||
<div class="admin-info" :class="state.currentNavMenu === 'adminInfo' ? 'hover' : ''">
|
||||
<el-avatar :size="25" fit="fill">
|
||||
<img src="@/assets/avatar.png" alt="" />
|
||||
</el-avatar>
|
||||
@@ -51,98 +24,117 @@
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="adminInfo">个人资料</el-dropdown-item>
|
||||
<el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
|
||||
<el-dropdown-item command="layout">退出登录</el-dropdown-item>
|
||||
<el-dropdown-item command="changePwd" v-if="!IS_LNQR">修改密码</el-dropdown-item>
|
||||
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<!-- <div @click="configStore.setLayout('showDrawer', true)" class="nav-menu-item">
|
||||
<Icon
|
||||
:color="configStore.getColorVal('headerBarTabColor')"
|
||||
class="nav-menu-icon"
|
||||
name="fa fa-cogs"
|
||||
size="18"
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<Config />
|
||||
<PopupPwd ref="popupPwd" />
|
||||
<AdminInfo ref="popupAdminInfo" />
|
||||
<!-- <TerminalVue /> -->
|
||||
<!-- 全局暂降事件 -->
|
||||
<globalPopUp ref="globalPopUpRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import screenfull from 'screenfull'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import Config from './config.vue'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import router from '@/router'
|
||||
import globalPopUp from './globalPopUp.vue'
|
||||
import { routePush } from '@/utils/router'
|
||||
import html2canvas from 'html2canvas'
|
||||
import { useNavTabs } from '@/stores/navTabs'
|
||||
import { logout } from '@/api/user-boot/user'
|
||||
import { Local } from '@/utils/storage'
|
||||
import Config from './config.vue'
|
||||
import PopupPwd from './popup/password.vue'
|
||||
import AdminInfo from './popup/adminInfo.vue'
|
||||
import { useNavTabs } from '@/stores/navTabs'
|
||||
import globalPopUp from './globalPopUp.vue'
|
||||
const { replace } = useRouter()
|
||||
// 环境标识
|
||||
const IS_LNQR = import.meta.env.VITE_NAME === 'LNqr'
|
||||
|
||||
const adminInfo = useAdminInfo()
|
||||
const navTabs = useNavTabs()
|
||||
const configStore = useConfig()
|
||||
|
||||
// 引用
|
||||
const popupPwd = ref()
|
||||
const popupAdminInfo = ref()
|
||||
const state = reactive({
|
||||
isFullScreen: false,
|
||||
currentNavMenu: '',
|
||||
showLayoutDrawer: false,
|
||||
showAdminInfoPopover: false
|
||||
})
|
||||
const globalPopUpRef = ref()
|
||||
const savePng = () => {
|
||||
html2canvas(document.body, {
|
||||
scale: 1,
|
||||
useCORS: true
|
||||
}).then(function (canvas) {
|
||||
var link = document.createElement('a')
|
||||
link.href = canvas.toDataURL('image/png')
|
||||
link.download = 'screenshot.png'
|
||||
link.click()
|
||||
})
|
||||
}
|
||||
const onFullScreen = () => {
|
||||
if (!screenfull.isEnabled) {
|
||||
ElMessage.warning('layouts.Full screen is not supported')
|
||||
return false
|
||||
|
||||
// 状态
|
||||
const state = reactive({
|
||||
currentNavMenu: ''
|
||||
})
|
||||
|
||||
// 打开暂降事件
|
||||
const temporaryLandingEvent = () => {
|
||||
if (globalPopUpRef.value) {
|
||||
globalPopUpRef.value.open()
|
||||
}
|
||||
screenfull.toggle()
|
||||
screenfull.onchange(() => {
|
||||
state.isFullScreen = screenfull.isFullscreen
|
||||
})
|
||||
}
|
||||
|
||||
const handleCommand = (key: string) => {
|
||||
console.log(key)
|
||||
// 下拉菜单命令
|
||||
const handleCommand = async (key: string) => {
|
||||
switch (key) {
|
||||
case 'adminInfo':
|
||||
popupAdminInfo.value.open()
|
||||
popupAdminInfo.value?.open()
|
||||
break
|
||||
case 'changePwd':
|
||||
popupPwd.value.open()
|
||||
popupPwd.value?.open()
|
||||
break
|
||||
case 'layout':
|
||||
navTabs.closeTabs()
|
||||
window.localStorage.clear()
|
||||
adminInfo.reset()
|
||||
router.push({ name: 'login' })
|
||||
break
|
||||
default:
|
||||
case 'logout':
|
||||
await handleLogout()
|
||||
break
|
||||
}
|
||||
}
|
||||
const temporaryLandingEvent = () => {
|
||||
globalPopUpRef.value.open()
|
||||
|
||||
// 统一登出逻辑
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
// 1. 调用后端登出接口
|
||||
await logout()
|
||||
// console.log('✅ 后端登出成功')
|
||||
} catch (err) {
|
||||
// console.error('❌ 登出接口异常', err)
|
||||
} finally {
|
||||
// 2. 清理本地所有数据
|
||||
clearLocalData()
|
||||
|
||||
// 3. LNqr 环境跳 CAS 登出
|
||||
if (IS_LNQR) {
|
||||
redirectToCasLogout()
|
||||
} else {
|
||||
// 普通环境直接跳登录页
|
||||
window.location.reload()
|
||||
setTimeout(() => {
|
||||
replace('/login')
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 清理本地数据
|
||||
const clearLocalData = () => {
|
||||
// 清空 localStorage(保留 VXE 自定义列、DevTools 配置)
|
||||
Local.clear()
|
||||
|
||||
// 清空用户状态
|
||||
adminInfo.reset()
|
||||
|
||||
// 清空标签页
|
||||
navTabs.closeTabs()
|
||||
}
|
||||
|
||||
// CAS 登出跳转
|
||||
const redirectToCasLogout = () => {
|
||||
const casLogoutUrl =
|
||||
'http://privilege-epri.dcloud.ln.dc.sgcc.com.cn/cas/logout?service=http://privilege-epri.dcloud.ln.dc.sgcc.com.cn/cas/login?service=http://PQMonitoring.dcloud.ln.dc.sgcc.com.cn'
|
||||
window.location.href = casLogoutUrl
|
||||
// 清 Cookie
|
||||
document.cookie.split(';').forEach(cookie => {
|
||||
const name = cookie.split('=')[0].trim()
|
||||
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -156,7 +148,6 @@ const temporaryLandingEvent = () => {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// height: 100%;
|
||||
margin-left: auto;
|
||||
background-color: v-bind('configStore.getColorVal("headerBarBackground")');
|
||||
|
||||
@@ -212,37 +203,15 @@ const temporaryLandingEvent = () => {
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-box :deep(.el-dropdown-menu__item) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.admin-info-base {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 10px;
|
||||
|
||||
.admin-info-other {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
|
||||
.admin-info-name {
|
||||
font-size: var(--el-font-size-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-info-footer {
|
||||
padding: 10px 0;
|
||||
margin: 0 -12px -12px -12px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.pt2 {
|
||||
padding-top: 2px;
|
||||
.nav-menu-text {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 20px;
|
||||
font-size: 12px;
|
||||
background: #ff0000;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
@@ -256,15 +225,4 @@ const temporaryLandingEvent = () => {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.nav-menu-text {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 20px;
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
background-color: #ff0000;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 0 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -30,6 +30,7 @@ import { validatePwd } from '@/utils/common'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import router from '@/router'
|
||||
import { useNavTabs } from '@/stores/navTabs'
|
||||
import { Local } from '@/utils/storage'
|
||||
const navTabs = useNavTabs()
|
||||
const adminInfo = useAdminInfo()
|
||||
const dialogVisible = ref(false)
|
||||
@@ -103,7 +104,7 @@ const submit = () => {
|
||||
dialogVisible.value = false
|
||||
setTimeout(() => {
|
||||
navTabs.closeTabs()
|
||||
window.localStorage.clear()
|
||||
Local.clear()
|
||||
adminInfo.reset()
|
||||
router.push({ name: 'login' })
|
||||
}, 0)
|
||||
|
||||
@@ -1,128 +1,130 @@
|
||||
<template>
|
||||
<div>
|
||||
<component :is="config.layout.layoutMode"></component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { useNavTabs } from '@/stores/navTabs'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { useRoute } from 'vue-router'
|
||||
import Default from '@/layouts/admin/container/default.vue'
|
||||
import Classic from '@/layouts/admin/container/classic.vue'
|
||||
import Streamline from '@/layouts/admin/container/streamline.vue'
|
||||
import Double from '@/layouts/admin/container/double.vue'
|
||||
import { onMounted, onBeforeMount } from 'vue'
|
||||
import { handleAdminRoute, getFirstRoute, routePush } from '@/utils/router'
|
||||
import router from '@/router/index'
|
||||
import { useEventListener } from '@vueuse/core'
|
||||
import { isEmpty } from 'lodash-es'
|
||||
import { setNavTabsWidth } from '@/utils/layout'
|
||||
import { adminBaseRoutePath } from '@/router/static'
|
||||
import { getRouteMenu, dictDataCache } from '@/api/auth'
|
||||
import { getAreaList, areaSelect } from '@/api/common'
|
||||
import { BasicDictData } from '@/stores/interface'
|
||||
import { getAllUserSimpleList, getUserById } from '@/api/user-boot/user'
|
||||
|
||||
defineOptions({
|
||||
components: { Default, Classic, Streamline, Double }
|
||||
})
|
||||
|
||||
const navTabs = useNavTabs()
|
||||
const config = useConfig()
|
||||
const route = useRoute()
|
||||
const adminInfo = useAdminInfo()
|
||||
const dictData = useDictData()
|
||||
const state = reactive({
|
||||
autoMenuCollapseLock: false
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// if (!adminInfo.token) return router.push({ name: 'login' })
|
||||
|
||||
init()
|
||||
setNavTabsWidth()
|
||||
useEventListener(window, 'resize', setNavTabsWidth)
|
||||
})
|
||||
onBeforeMount(() => {
|
||||
onAdaptiveLayout()
|
||||
useEventListener(window, 'resize', onAdaptiveLayout)
|
||||
})
|
||||
|
||||
const init = async () => {
|
||||
await Promise.all([getAreaList(), dictDataCache(), getUserById(), areaSelect(), getAllUserSimpleList()]).then(res => {
|
||||
dictData.state.area = res[0].data
|
||||
dictData.state.basic = res[1].data
|
||||
dictData.state.userList = res[4].data
|
||||
adminInfo.dataFill(res[2].data)
|
||||
dictData.state.areaTree = res[3].data
|
||||
})
|
||||
/**
|
||||
* 后台初始化请求,获取站点配置,动态路由等信息
|
||||
*/
|
||||
getRouteMenu().then((res: any) => {
|
||||
const handlerMenu = (data: any) => {
|
||||
data.forEach((item: any) => {
|
||||
item.routePath =
|
||||
item.routePath[0] == '/' ? item.routePath.substring(1, item.routePath.length) : item.routePath
|
||||
item.path = item.routePath
|
||||
item.name = item.routePath
|
||||
item.keepalive = item.routePath
|
||||
item.component = item.routeName
|
||||
? item.routeName.indexOf('/src/views/') > -1
|
||||
? item.routeName
|
||||
: `/src/views/${item.routeName}/index.vue`
|
||||
: ''
|
||||
item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
|
||||
item.menu_type = item.children && item.children.length > 0 ? null : 'tab'
|
||||
if (item.children) {
|
||||
handlerMenu(item.children)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
handlerMenu(res.data)
|
||||
handleAdminRoute(res.data)
|
||||
if (route.params.to) {
|
||||
const lastRoute = JSON.parse(route.params.to as string)
|
||||
if (lastRoute.path != adminBaseRoutePath) {
|
||||
let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
|
||||
routePush({ path: lastRoute.path, query: query })
|
||||
return
|
||||
}
|
||||
}
|
||||
// 跳转到第一个菜单
|
||||
let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
|
||||
if (firstRoute) routePush(firstRoute.path)
|
||||
})
|
||||
}
|
||||
|
||||
const onAdaptiveLayout = () => {
|
||||
let defaultBeforeResizeLayout = {
|
||||
layoutMode: config.layout.layoutMode,
|
||||
menuCollapse: config.layout.menuCollapse
|
||||
}
|
||||
|
||||
const clientWidth = document.body.clientWidth
|
||||
if (clientWidth < 1024) {
|
||||
/**
|
||||
* 锁定窗口改变自动调整 menuCollapse
|
||||
* 避免已是小窗且打开了菜单栏时,意外的自动关闭菜单栏
|
||||
*/
|
||||
if (!state.autoMenuCollapseLock) {
|
||||
state.autoMenuCollapseLock = true
|
||||
config.setLayout('menuCollapse', true)
|
||||
}
|
||||
config.setLayout('shrink', true)
|
||||
config.setLayoutMode('Classic')
|
||||
} else {
|
||||
state.autoMenuCollapseLock = false
|
||||
config.setLayout('menuCollapse', defaultBeforeResizeLayout.menuCollapse)
|
||||
config.setLayout('shrink', false)
|
||||
config.setLayoutMode(defaultBeforeResizeLayout.layoutMode)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<component :is="config.layout.layoutMode"></component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { useNavTabs } from '@/stores/navTabs'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { useRoute } from 'vue-router'
|
||||
import Default from '@/layouts/admin/container/default.vue'
|
||||
import Classic from '@/layouts/admin/container/classic.vue'
|
||||
import Streamline from '@/layouts/admin/container/streamline.vue'
|
||||
import Double from '@/layouts/admin/container/double.vue'
|
||||
import { onMounted, onBeforeMount } from 'vue'
|
||||
import { handleAdminRoute, getFirstRoute, routePush } from '@/utils/router'
|
||||
import router from '@/router/index'
|
||||
import { useEventListener } from '@vueuse/core'
|
||||
import { isEmpty } from 'lodash-es'
|
||||
import { setNavTabsWidth } from '@/utils/layout'
|
||||
import { adminBaseRoutePath } from '@/router/static'
|
||||
import { getRouteMenu, dictDataCache } from '@/api/auth'
|
||||
import { getAreaList, areaSelect } from '@/api/common'
|
||||
import { BasicDictData } from '@/stores/interface'
|
||||
import { getAllUserSimpleList, getUserById } from '@/api/user-boot/user'
|
||||
|
||||
defineOptions({
|
||||
components: { Default, Classic, Streamline, Double }
|
||||
})
|
||||
|
||||
const navTabs = useNavTabs()
|
||||
const config = useConfig()
|
||||
const route = useRoute()
|
||||
const adminInfo = useAdminInfo()
|
||||
const dictData = useDictData()
|
||||
const state = reactive({
|
||||
autoMenuCollapseLock: false
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// if (!adminInfo.token) return router.push({ name: 'login' })
|
||||
|
||||
init()
|
||||
setNavTabsWidth()
|
||||
useEventListener(window, 'resize', setNavTabsWidth)
|
||||
})
|
||||
onBeforeMount(() => {
|
||||
onAdaptiveLayout()
|
||||
useEventListener(window, 'resize', onAdaptiveLayout)
|
||||
})
|
||||
|
||||
const init = async () => {
|
||||
await Promise.all([getAreaList(), dictDataCache(), getUserById(), areaSelect(), getAllUserSimpleList()]).then(res => {
|
||||
dictData.state.area = res[0].data
|
||||
dictData.state.basic = res[1].data
|
||||
dictData.state.userList = res[4].data
|
||||
adminInfo.dataFill(res[2].data)
|
||||
dictData.state.areaTree = res[3].data
|
||||
})
|
||||
/**
|
||||
* 后台初始化请求,获取站点配置,动态路由等信息
|
||||
*/
|
||||
getRouteMenu().then((res: any) => {
|
||||
const handlerMenu = (data: any) => {
|
||||
data.forEach((item: any) => {
|
||||
item.routePath =
|
||||
item.routePath[0] == '/' ? item.routePath.substring(1, item.routePath.length) : item.routePath
|
||||
item.path = item.routePath
|
||||
item.name = item.routePath
|
||||
item.keepalive = item.routePath
|
||||
item.component = item.routeName
|
||||
? item.routeName.indexOf('/src/views/') > -1
|
||||
? item.routeName
|
||||
: `/src/views/${item.routeName}/index.vue`
|
||||
: ''
|
||||
item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
|
||||
item.menu_type = item.children && item.children.length > 0 ? null : 'tab'
|
||||
if (item.children) {
|
||||
handlerMenu(item.children)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
handlerMenu(res.data)
|
||||
handleAdminRoute(res.data)
|
||||
if (route.params.to) {
|
||||
const lastRoute = JSON.parse(route.params.to as string)
|
||||
if (lastRoute.path != adminBaseRoutePath) {
|
||||
let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
|
||||
routePush({ path: lastRoute.path, query: query })
|
||||
return
|
||||
}
|
||||
}
|
||||
// 仅在 loading 页时跳转到第一个菜单,避免覆盖用户当前页面
|
||||
if (route.name === 'adminMainLoading') {
|
||||
const firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
|
||||
if (firstRoute) routePush(firstRoute.path)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const onAdaptiveLayout = () => {
|
||||
let defaultBeforeResizeLayout = {
|
||||
layoutMode: config.layout.layoutMode,
|
||||
menuCollapse: config.layout.menuCollapse
|
||||
}
|
||||
|
||||
const clientWidth = document.body.clientWidth
|
||||
if (clientWidth < 1024) {
|
||||
/**
|
||||
* 锁定窗口改变自动调整 menuCollapse
|
||||
* 避免已是小窗且打开了菜单栏时,意外的自动关闭菜单栏
|
||||
*/
|
||||
if (!state.autoMenuCollapseLock) {
|
||||
state.autoMenuCollapseLock = true
|
||||
config.setLayout('menuCollapse', true)
|
||||
}
|
||||
config.setLayout('shrink', true)
|
||||
config.setLayoutMode('Classic')
|
||||
} else {
|
||||
state.autoMenuCollapseLock = false
|
||||
config.setLayout('menuCollapse', defaultBeforeResizeLayout.menuCollapse)
|
||||
config.setLayout('shrink', false)
|
||||
config.setLayoutMode(defaultBeforeResizeLayout.layoutMode)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
<template>
|
||||
<el-main class="layout-main" :style="mainHeight()">
|
||||
<router-view v-slot="{ Component }">
|
||||
<router-view v-slot="{ Component, route: viewRoute }">
|
||||
<transition :name="config.layout.mainAnimation" mode="out-in">
|
||||
<keep-alive :include="state.keepAliveComponentNameList">
|
||||
<component :is="Component" :key="state.componentKey" />
|
||||
<component
|
||||
:is="Component"
|
||||
v-if="Component"
|
||||
:key="state.componentKey || viewRoute.fullPath"
|
||||
/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
@@ -32,7 +36,7 @@ const state: {
|
||||
componentKey: string
|
||||
keepAliveComponentNameList: string[]
|
||||
} = reactive({
|
||||
componentKey: route.path,
|
||||
componentKey: '',
|
||||
keepAliveComponentNameList: []
|
||||
})
|
||||
|
||||
@@ -51,9 +55,10 @@ onBeforeMount(() => {
|
||||
state.keepAliveComponentNameList = state.keepAliveComponentNameList.filter(
|
||||
(name: string) => menu.meta.keepalive !== name
|
||||
)
|
||||
state.componentKey = ''
|
||||
// 临时换 key 强制卸载,再在 nextTick 恢复为路由 fullPath,避免 keep-alive 缓存错乱
|
||||
state.componentKey = `${menu.fullPath || menu.path}__refresh__${Date.now()}`
|
||||
nextTick(() => {
|
||||
state.componentKey = menu.path
|
||||
state.componentKey = ''
|
||||
addKeepAliveComponentName(menu.meta.keepalive as string)
|
||||
})
|
||||
})
|
||||
@@ -79,7 +84,6 @@ onMounted(() => {
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
state.componentKey = route.path
|
||||
if (typeof navTabs.state.activeRoute?.meta.keepalive == 'string') {
|
||||
addKeepAliveComponentName(navTabs.state.activeRoute?.meta.keepalive)
|
||||
}
|
||||
|
||||
@@ -1,59 +1,98 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-loading="true"
|
||||
element-loading-background="var(--ba-bg-color-overlay)"
|
||||
element-loading-text="加载中"
|
||||
class="default-main ba-main-loading"
|
||||
:style="{ height:'calc(100vh - 170px)'}"
|
||||
></div>
|
||||
<div v-if="state.showReload" class="loading-footer mt10">
|
||||
<el-button @click="refresh" type="warning">重新加载</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onUnmounted, reactive } from 'vue'
|
||||
import router from '@/router/index'
|
||||
import { useNavTabs } from '@/stores/navTabs'
|
||||
import { isAdminApp } from '@/utils/common'
|
||||
import { getFirstRoute, routePush } from '@/utils/router'
|
||||
let timer: number
|
||||
|
||||
const navTabs = useNavTabs()
|
||||
const state = reactive({
|
||||
maximumWait: 1000 * 6,
|
||||
showReload: false,
|
||||
})
|
||||
|
||||
const refresh = () => {
|
||||
router.go(0)
|
||||
}
|
||||
// if (isAdminApp() && navTabs.state.tabsViewRoutes.length > 0) {
|
||||
// let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
|
||||
// if (firstRoute) routePush(firstRoute.path)
|
||||
// }
|
||||
|
||||
timer = window.setTimeout(() => {
|
||||
state.showReload = true
|
||||
}, state.maximumWait)
|
||||
|
||||
onUnmounted(() => {
|
||||
clearTimeout(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ba-main-loading {
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.loading-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-loading="true"
|
||||
element-loading-background="var(--ba-bg-color-overlay)"
|
||||
element-loading-text="加载中"
|
||||
class="default-main ba-main-loading"
|
||||
:style="{ height: 'calc(100vh - 170px)' }"
|
||||
></div>
|
||||
<div v-if="state.showReload" class="loading-footer mt10">
|
||||
<el-button @click="refresh" type="warning">重新加载</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, reactive, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import router from '@/router/index'
|
||||
import { useNavTabs } from '@/stores/navTabs'
|
||||
import { isAdminApp } from '@/utils/common'
|
||||
import { getFirstRoute, routePush } from '@/utils/router'
|
||||
import { isEmpty } from 'lodash-es'
|
||||
import { adminBaseRoutePath } from '@/router/static'
|
||||
|
||||
let timer: number
|
||||
|
||||
const route = useRoute()
|
||||
const navTabs = useNavTabs()
|
||||
const state = reactive({
|
||||
maximumWait: 1000 * 6,
|
||||
showReload: false
|
||||
})
|
||||
|
||||
const tryRedirect = () => {
|
||||
if (route.params.to) {
|
||||
try {
|
||||
const lastRoute = JSON.parse(route.params.to as string)
|
||||
if (lastRoute.path && lastRoute.path !== adminBaseRoutePath) {
|
||||
const query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
|
||||
routePush({ path: lastRoute.path, query })
|
||||
return true
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
if (isAdminApp() && navTabs.state.tabsViewRoutes.length > 0) {
|
||||
const firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
|
||||
if (firstRoute) {
|
||||
routePush(firstRoute.path)
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const refresh = () => {
|
||||
if (!tryRedirect()) {
|
||||
router.replace(route.fullPath)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (tryRedirect()) return
|
||||
|
||||
const stop = watch(
|
||||
() => navTabs.state.tabsViewRoutes.length,
|
||||
len => {
|
||||
if (len > 0 && tryRedirect()) {
|
||||
stop()
|
||||
}
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
timer = window.setTimeout(() => {
|
||||
state.showReload = true
|
||||
}, state.maximumWait)
|
||||
|
||||
onUnmounted(() => {
|
||||
clearTimeout(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ba-main-loading {
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.loading-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useTagsViewStore } from '@/stores/modules/tagsView'
|
||||
import { useAppStore } from '@/stores/modules/app'
|
||||
import { Footer } from '@/layouts/components/Footer'
|
||||
|
||||
defineOptions({ name: 'AppView' })
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
const layout = computed(() => appStore.getLayout)
|
||||
|
||||
const fixedHeader = computed(() => appStore.getFixedHeader)
|
||||
|
||||
const footer = computed(() => appStore.getFooter)
|
||||
|
||||
const tagsViewStore = useTagsViewStore()
|
||||
|
||||
const getCaches = computed((): string[] => {
|
||||
return tagsViewStore.getCachedViews
|
||||
})
|
||||
|
||||
const tagsView = computed(() => appStore.getTagsView)
|
||||
|
||||
//region 无感刷新
|
||||
const routerAlive = ref(true)
|
||||
// 无感刷新,防止出现页面闪烁白屏
|
||||
const reload = () => {
|
||||
routerAlive.value = false
|
||||
nextTick(() => (routerAlive.value = true))
|
||||
}
|
||||
// 为组件后代提供刷新方法
|
||||
provide('reload', reload)
|
||||
//endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
:class="[
|
||||
'p-[var(--app-content-padding)] w-[calc(100%-var(--app-content-padding)-var(--app-content-padding))] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
|
||||
{
|
||||
'!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
|
||||
(fixedHeader &&
|
||||
(layout === 'classic' || layout === 'topLeft' || layout === 'top') &&
|
||||
footer) ||
|
||||
(!tagsView && layout === 'top' && footer),
|
||||
'!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height)-var(--tags-view-height))]':
|
||||
tagsView && layout === 'top' && footer,
|
||||
|
||||
'!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--top-tool-height)-var(--app-footer-height))]':
|
||||
!fixedHeader && layout === 'classic' && footer,
|
||||
|
||||
'!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
|
||||
!fixedHeader && layout === 'topLeft' && footer,
|
||||
|
||||
'!min-h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding))]':
|
||||
fixedHeader && layout === 'cutMenu' && footer,
|
||||
|
||||
'!min-h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding)-var(--tags-view-height))]':
|
||||
!fixedHeader && layout === 'cutMenu' && footer
|
||||
}
|
||||
]"
|
||||
>
|
||||
<router-view v-if="routerAlive">
|
||||
<template #default="{ Component, route }">
|
||||
<keep-alive :include="getCaches">
|
||||
<component :is="Component" :key="route.fullPath" />
|
||||
</keep-alive>
|
||||
</template>
|
||||
</router-view>
|
||||
</section>
|
||||
<Footer v-if="footer" />
|
||||
</template>
|
||||
@@ -1,3 +0,0 @@
|
||||
import Breadcrumb from './src/Breadcrumb.vue'
|
||||
|
||||
export { Breadcrumb }
|
||||
@@ -1,130 +0,0 @@
|
||||
<script lang="tsx">
|
||||
import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
|
||||
import { ref, watch, computed, unref, defineComponent, TransitionGroup } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { usePermissionStore } from '@/stores/modules/permission'
|
||||
import { filterBreadcrumb } from './helper'
|
||||
import { filter, treeToList } from '@/utils/tree'
|
||||
import type { RouteLocationNormalizedLoaded, RouteMeta } from 'vue-router'
|
||||
|
||||
import { Icon } from '@/components/Icon'
|
||||
import { useAppStore } from '@/stores/modules/app'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('breadcrumb')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
// 面包屑图标
|
||||
const breadcrumbIcon = computed(() => appStore.getBreadcrumbIcon)
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Breadcrumb',
|
||||
setup() {
|
||||
const { currentRoute } = useRouter()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const levelList = ref<AppRouteRecordRaw[]>([])
|
||||
|
||||
const permissionStore = usePermissionStore()
|
||||
|
||||
const menuRouters = computed(() => {
|
||||
const routers = permissionStore.getRouters
|
||||
return filterBreadcrumb(routers)
|
||||
})
|
||||
|
||||
const getBreadcrumb = () => {
|
||||
const currentPath = currentRoute.value.matched.slice(-1)[0].path
|
||||
|
||||
levelList.value = filter<AppRouteRecordRaw>(unref(menuRouters), (node: AppRouteRecordRaw) => {
|
||||
return node.path === currentPath
|
||||
})
|
||||
}
|
||||
|
||||
const renderBreadcrumb = () => {
|
||||
const breadcrumbList = treeToList<AppRouteRecordRaw[]>(unref(levelList))
|
||||
return breadcrumbList.map((v) => {
|
||||
const disabled = !v.redirect || v.redirect === 'noredirect'
|
||||
const meta = v.meta as RouteMeta
|
||||
return (
|
||||
<ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}>
|
||||
{meta?.icon && breadcrumbIcon.value ? (
|
||||
<div class="flex items-center">
|
||||
<Icon icon={meta.icon} class="mr-[2px]" svgClass="inline-block"></Icon>
|
||||
{t(v?.meta?.title)}
|
||||
</div>
|
||||
) : (
|
||||
t(v?.meta?.title)
|
||||
)}
|
||||
</ElBreadcrumbItem>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => currentRoute.value,
|
||||
(route: RouteLocationNormalizedLoaded) => {
|
||||
if (route.path.startsWith('/redirect/')) {
|
||||
return
|
||||
}
|
||||
getBreadcrumb()
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
return () => (
|
||||
<ElBreadcrumb separator="/" class={`${prefixCls} flex items-center h-full ml-[10px]`}>
|
||||
<TransitionGroup appear enter-active-class="animate__animated animate__fadeInRight">
|
||||
{renderBreadcrumb()}
|
||||
</TransitionGroup>
|
||||
</ElBreadcrumb>
|
||||
)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$prefix-cls: el-breadcrumb;
|
||||
|
||||
.#{$prefix-cls} {
|
||||
:deep(&__item) {
|
||||
display: flex;
|
||||
.#{$prefix-cls}__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--top-header-text-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(&__item):not(:last-child) {
|
||||
.#{$prefix-cls}__inner {
|
||||
color: var(--top-header-text-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(&__item):last-child {
|
||||
.#{$prefix-cls}__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--el-text-color-placeholder);
|
||||
|
||||
&:hover {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +0,0 @@
|
||||
import { pathResolve } from '@/utils/routerHelper'
|
||||
import type { RouteMeta } from 'vue-router'
|
||||
|
||||
export const filterBreadcrumb = (
|
||||
routes: AppRouteRecordRaw[],
|
||||
parentPath = ''
|
||||
): AppRouteRecordRaw[] => {
|
||||
const res: AppRouteRecordRaw[] = []
|
||||
|
||||
for (const route of routes) {
|
||||
const meta = route?.meta as RouteMeta
|
||||
if (meta.hidden && !meta.canTo) {
|
||||
continue
|
||||
}
|
||||
|
||||
const data: AppRouteRecordRaw =
|
||||
!meta.alwaysShow && route.children?.length === 1
|
||||
? { ...route.children[0], path: pathResolve(route.path, route.children[0].path) }
|
||||
: { ...route }
|
||||
|
||||
data.path = pathResolve(parentPath, data.path)
|
||||
|
||||
if (data.children) {
|
||||
data.children = filterBreadcrumb(data.children, data.path)
|
||||
}
|
||||
if (data) {
|
||||
res.push(data)
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
import Collapse from './src/Collapse.vue'
|
||||
|
||||
export { Collapse }
|
||||
@@ -1,36 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useAppStore } from '@/stores/modules/app'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { Expand,Fold,ZoomIn,Delete} from '@element-plus/icons-vue'
|
||||
|
||||
defineOptions({ name: 'Collapse' })
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('collapse')
|
||||
|
||||
defineProps({
|
||||
color: propTypes.string.def('')
|
||||
})
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
const collapse = computed(() => appStore.getCollapse)
|
||||
|
||||
const toggleCollapse = () => {
|
||||
const collapsed = unref(collapse)
|
||||
appStore.setCollapse(!collapsed)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="prefixCls" @click="toggleCollapse">
|
||||
<Icon
|
||||
:color="color"
|
||||
:icon="collapse ? Expand: Fold"
|
||||
:size="18"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,10 +0,0 @@
|
||||
import ContextMenu from './src/ContextMenu.vue'
|
||||
import { ElDropdown } from 'element-plus'
|
||||
import type { RouteLocationNormalizedLoaded } from 'vue-router'
|
||||
|
||||
export interface ContextMenuExpose {
|
||||
elDropdownMenuRef: ComponentRef<typeof ElDropdown>
|
||||
tagItem: RouteLocationNormalizedLoaded
|
||||
}
|
||||
|
||||
export { ContextMenu }
|
||||
@@ -1,76 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { PropType } from 'vue'
|
||||
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import type { RouteLocationNormalizedLoaded } from 'vue-router'
|
||||
import { contextMenuSchema } from '@/types/contextMenu'
|
||||
import type { ElDropdown } from 'element-plus'
|
||||
|
||||
defineOptions({ name: 'ContextMenu' })
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('context-menu')
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const emit = defineEmits(['visibleChange'])
|
||||
|
||||
const props = defineProps({
|
||||
schema: {
|
||||
type: Array as PropType<contextMenuSchema[]>,
|
||||
default: () => []
|
||||
},
|
||||
trigger: {
|
||||
type: String as PropType<'click' | 'hover' | 'focus' | 'contextmenu'>,
|
||||
default: 'contextmenu'
|
||||
},
|
||||
tagItem: {
|
||||
type: Object as PropType<RouteLocationNormalizedLoaded>,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
const command = (item: contextMenuSchema) => {
|
||||
item.command && item.command(item)
|
||||
}
|
||||
|
||||
const visibleChange = (visible: boolean) => {
|
||||
emit('visibleChange', visible, props.tagItem)
|
||||
}
|
||||
|
||||
const elDropdownMenuRef = ref<ComponentRef<typeof ElDropdown>>()
|
||||
|
||||
defineExpose({
|
||||
elDropdownMenuRef,
|
||||
tagItem: props.tagItem
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElDropdown
|
||||
ref="elDropdownMenuRef"
|
||||
:class="prefixCls"
|
||||
:trigger="trigger"
|
||||
placement="bottom-start"
|
||||
popper-class="v-context-menu-popper"
|
||||
@command="command"
|
||||
@visible-change="visibleChange"
|
||||
>
|
||||
<slot></slot>
|
||||
<template #dropdown>
|
||||
<ElDropdownMenu>
|
||||
<ElDropdownItem
|
||||
v-for="(item, index) in schema"
|
||||
:key="`dropdown${index}`"
|
||||
:command="item"
|
||||
:disabled="item.disabled"
|
||||
:divided="item.divided"
|
||||
>
|
||||
<Icon :icon="item.icon" />
|
||||
{{ t(item.label) }}
|
||||
</ElDropdownItem>
|
||||
</ElDropdownMenu>
|
||||
</template>
|
||||
</ElDropdown>
|
||||
</template>
|
||||
@@ -1,3 +0,0 @@
|
||||
import Footer from './src/Footer.vue'
|
||||
|
||||
export { Footer }
|
||||
@@ -1,24 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useAppStore } from '@/stores/modules/app'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
defineOptions({ name: 'Footer' })
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('footer')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
const title = computed(() => appStore.getTitle)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="prefixCls"
|
||||
class="h-[var(--app-footer-height)] bg-[var(--app-content-bg-color)] text-center leading-[var(--app-footer-height)] text-[var(--el-text-color-placeholder)] dark:bg-[var(--el-bg-color)]"
|
||||
>
|
||||
<span class="text-14px">Copyright ©2022-{{ title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,3 +0,0 @@
|
||||
import LocaleDropdown from './src/LocaleDropdown.vue'
|
||||
|
||||
export { LocaleDropdown }
|
||||
@@ -1,52 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useLocaleStore } from '@/stores/modules/locale'
|
||||
import { useLocale } from '@/hooks/web/useLocale'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
defineOptions({ name: 'LocaleDropdown' })
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('locale-dropdown')
|
||||
|
||||
defineProps({
|
||||
color: propTypes.string.def('')
|
||||
})
|
||||
|
||||
const localeStore = useLocaleStore()
|
||||
|
||||
const langMap = computed(() => localeStore.getLocaleMap)
|
||||
|
||||
const currentLang = computed(() => localeStore.getCurrentLocale)
|
||||
|
||||
const setLang = (lang: LocaleType) => {
|
||||
if (lang === unref(currentLang).lang) return
|
||||
// 需要重新加载页面让整个语言多初始化
|
||||
window.location.reload()
|
||||
localeStore.setCurrentLocale({
|
||||
lang
|
||||
})
|
||||
const { changeLocale } = useLocale()
|
||||
changeLocale(lang)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElDropdown :class="prefixCls" trigger="click" @command="setLang">
|
||||
<Icon
|
||||
:class="$attrs.class"
|
||||
:color="color"
|
||||
:size="18"
|
||||
class="cursor-pointer !p-0"
|
||||
icon="ion:language-sharp"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<ElDropdownMenu>
|
||||
<ElDropdownItem v-for="item in langMap" :key="item.lang" :command="item.lang">
|
||||
{{ item.name }}
|
||||
</ElDropdownItem>
|
||||
</ElDropdownMenu>
|
||||
</template>
|
||||
</ElDropdown>
|
||||
</template>
|
||||
@@ -1,3 +0,0 @@
|
||||
import Logo from './src/Logo.vue'
|
||||
|
||||
export { Logo }
|
||||
@@ -1,88 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref, unref, watch } from 'vue'
|
||||
import { useAppStore } from '@/stores/modules/app'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
defineOptions({ name: 'Logo' })
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('logo')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
const show = ref(true)
|
||||
|
||||
const title = computed(() => appStore.getTitle)
|
||||
|
||||
const layout = computed(() => appStore.getLayout)
|
||||
|
||||
const collapse = computed(() => appStore.getCollapse)
|
||||
|
||||
onMounted(() => {
|
||||
if (unref(collapse)) show.value = false
|
||||
})
|
||||
|
||||
watch(
|
||||
() => collapse.value,
|
||||
(collapse: boolean) => {
|
||||
if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
|
||||
show.value = true
|
||||
return
|
||||
}
|
||||
if (!collapse) {
|
||||
setTimeout(() => {
|
||||
show.value = !collapse
|
||||
}, 400)
|
||||
} else {
|
||||
show.value = !collapse
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => layout.value,
|
||||
(layout) => {
|
||||
if (layout === 'top' || layout === 'cutMenu') {
|
||||
show.value = true
|
||||
} else {
|
||||
if (unref(collapse)) {
|
||||
show.value = false
|
||||
} else {
|
||||
show.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<router-link
|
||||
:class="[
|
||||
prefixCls,
|
||||
layout !== 'classic' ? `${prefixCls}__Top` : '',
|
||||
'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative decoration-none overflow-hidden'
|
||||
]"
|
||||
to="/"
|
||||
>
|
||||
<img
|
||||
class="h-[calc(var(--logo-height)-10px)] w-[calc(var(--logo-height)-10px)]"
|
||||
src="@/assets/imgs/logo.png"
|
||||
/>
|
||||
<div
|
||||
v-if="show"
|
||||
:class="[
|
||||
'ml-10px text-16px font-700',
|
||||
{
|
||||
'text-[var(--logo-title-text-color)]': layout === 'classic',
|
||||
'text-[var(--top-header-text-color)]':
|
||||
layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
|
||||
}
|
||||
]"
|
||||
>
|
||||
{{ title }}
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,3 +0,0 @@
|
||||
import Menu from './src/Menu.vue'
|
||||
|
||||
export { Menu }
|
||||
@@ -1,257 +0,0 @@
|
||||
<script lang="tsx">
|
||||
import { PropType } from 'vue'
|
||||
import { ElMenu, ElScrollbar } from 'element-plus'
|
||||
import { useAppStore } from '@/stores/modules/app'
|
||||
import { usePermissionStore } from '@/stores/modules/permission'
|
||||
import { useRenderMenuItem } from './components/useRenderMenuItem'
|
||||
import { isUrl } from '@/utils/is'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { LayoutType } from '@/types/layout'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('menu')
|
||||
|
||||
export default defineComponent({
|
||||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
name: 'Menu',
|
||||
props: {
|
||||
menuSelect: {
|
||||
type: Function as PropType<(index: string) => void>,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const appStore = useAppStore()
|
||||
|
||||
const layout = computed(() => appStore.getLayout)
|
||||
|
||||
const { push, currentRoute } = useRouter()
|
||||
|
||||
const permissionStore = usePermissionStore()
|
||||
|
||||
const menuMode = computed((): 'vertical' | 'horizontal' => {
|
||||
// 竖
|
||||
const vertical: LayoutType[] = ['classic', 'topLeft', 'cutMenu']
|
||||
|
||||
if (vertical.includes(unref(layout))) {
|
||||
return 'vertical'
|
||||
} else {
|
||||
return 'horizontal'
|
||||
}
|
||||
})
|
||||
|
||||
const routers = computed(() =>
|
||||
unref(layout) === 'cutMenu' ? permissionStore.getMenuTabRouters : permissionStore.getRouters
|
||||
)
|
||||
|
||||
const collapse = computed(() => appStore.getCollapse)
|
||||
|
||||
const uniqueOpened = computed(() => appStore.getUniqueOpened)
|
||||
|
||||
const activeMenu = computed(() => {
|
||||
const { meta, path } = unref(currentRoute)
|
||||
// if set path, the sidebar will highlight the path you set
|
||||
if (meta.activeMenu) {
|
||||
return meta.activeMenu as string
|
||||
}
|
||||
return path
|
||||
})
|
||||
|
||||
const menuSelect = (index: string) => {
|
||||
if (props.menuSelect) {
|
||||
props.menuSelect(index)
|
||||
}
|
||||
// 自定义事件
|
||||
if (isUrl(index)) {
|
||||
window.open(index)
|
||||
} else {
|
||||
push(index)
|
||||
}
|
||||
}
|
||||
|
||||
const renderMenuWrap = () => {
|
||||
if (unref(layout) === 'top') {
|
||||
return renderMenu()
|
||||
} else {
|
||||
return <ElScrollbar>{renderMenu()}</ElScrollbar>
|
||||
}
|
||||
}
|
||||
|
||||
const renderMenu = () => {
|
||||
return (
|
||||
<ElMenu
|
||||
defaultActive={unref(activeMenu)}
|
||||
mode={unref(menuMode)}
|
||||
collapse={
|
||||
unref(layout) === 'top' || unref(layout) === 'cutMenu' ? false : unref(collapse)
|
||||
}
|
||||
uniqueOpened={unref(layout) === 'top' ? false : unref(uniqueOpened)}
|
||||
backgroundColor="var(--left-menu-bg-color)"
|
||||
textColor="var(--left-menu-text-color)"
|
||||
activeTextColor="var(--left-menu-text-active-color)"
|
||||
onSelect={menuSelect}
|
||||
>
|
||||
{{
|
||||
default: () => {
|
||||
const { renderMenuItem } = useRenderMenuItem(unref(menuMode))
|
||||
return renderMenuItem(unref(routers))
|
||||
}
|
||||
}}
|
||||
</ElMenu>
|
||||
)
|
||||
}
|
||||
|
||||
return () => (
|
||||
<div
|
||||
id={prefixCls}
|
||||
class={[
|
||||
`${prefixCls} ${prefixCls}__${unref(menuMode)}`,
|
||||
'h-[100%] overflow-hidden flex-col bg-[var(--left-menu-bg-color)]',
|
||||
{
|
||||
'w-[var(--left-menu-min-width)]': unref(collapse) && unref(layout) !== 'cutMenu',
|
||||
'w-[var(--left-menu-max-width)]': !unref(collapse) && unref(layout) !== 'cutMenu'
|
||||
}
|
||||
]}
|
||||
>
|
||||
{renderMenuWrap()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$prefix-cls: v-menu;
|
||||
|
||||
.#{$prefix-cls} {
|
||||
position: relative;
|
||||
transition: width var(--transition-time-02);
|
||||
|
||||
:deep(.el-menu) {
|
||||
width: 100% !important;
|
||||
border-right: none;
|
||||
|
||||
// 设置选中时子标题的颜色
|
||||
.is-active {
|
||||
& > .el-sub-menu__title {
|
||||
color: var(--left-menu-text-active-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 设置子菜单悬停的高亮和背景色
|
||||
.el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
&:hover {
|
||||
color: var(--left-menu-text-active-color) !important;
|
||||
background-color: var(--left-menu-bg-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 设置选中时的高亮背景和高亮颜色
|
||||
.el-menu-item.is-active {
|
||||
color: var(--left-menu-text-active-color) !important;
|
||||
background-color: var(--left-menu-bg-active-color) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--left-menu-bg-active-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 设置子菜单的背景颜色
|
||||
.el-menu {
|
||||
.el-sub-menu__title,
|
||||
.el-menu-item:not(.is-active) {
|
||||
background-color: var(--left-menu-bg-light-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 折叠时的最小宽度
|
||||
:deep(.el-menu--collapse) {
|
||||
width: var(--left-menu-min-width);
|
||||
|
||||
& > .is-active,
|
||||
& > .is-active > .el-sub-menu__title {
|
||||
position: relative;
|
||||
background-color: var(--left-menu-collapse-bg-active-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 折叠动画的时候,就需要把文字给隐藏掉
|
||||
:deep(.horizontal-collapse-transition) {
|
||||
// transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out !important;
|
||||
.#{$prefix-cls}__title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 水平菜单
|
||||
&__horizontal {
|
||||
height: calc(var(--top-tool-height)) !important;
|
||||
|
||||
:deep(.el-menu--horizontal) {
|
||||
height: calc(var(--top-tool-height));
|
||||
border-bottom: none;
|
||||
// 重新设置底部高亮颜色
|
||||
& > .el-sub-menu.is-active {
|
||||
.el-sub-menu__title {
|
||||
border-bottom-color: var(--el-color-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$prefix-cls}__title {
|
||||
/* stylelint-disable-next-line */
|
||||
max-height: calc(var(--top-tool-height) - 2px) !important;
|
||||
/* stylelint-disable-next-line */
|
||||
line-height: calc(var(--top-tool-height) - 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
$prefix-cls: v-menu-popper;
|
||||
|
||||
.#{$prefix-cls}--vertical,
|
||||
.#{$prefix-cls}--horizontal {
|
||||
// 设置选中时子标题的颜色
|
||||
.is-active {
|
||||
& > .el-sub-menu__title {
|
||||
color: var(--left-menu-text-active-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 设置子菜单悬停的高亮和背景色
|
||||
.el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
&:hover {
|
||||
color: var(--left-menu-text-active-color) !important;
|
||||
background-color: var(--left-menu-bg-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 设置选中时的高亮背景
|
||||
.el-menu-item.is-active {
|
||||
position: relative;
|
||||
background-color: var(--left-menu-bg-active-color) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--left-menu-bg-active-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,50 +0,0 @@
|
||||
import { ElSubMenu, ElMenuItem } from 'element-plus'
|
||||
import { hasOneShowingChild } from '../helper'
|
||||
import { isUrl } from '@/utils/is'
|
||||
import { useRenderMenuTitle } from './useRenderMenuTitle'
|
||||
import { pathResolve } from '@/utils/routerHelper'
|
||||
|
||||
const { renderMenuTitle } = useRenderMenuTitle()
|
||||
|
||||
export const useRenderMenuItem = () =>
|
||||
// allRouters: AppRouteRecordRaw[] = [],
|
||||
{
|
||||
const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
|
||||
return routers
|
||||
.filter((v) => !v.meta?.hidden)
|
||||
.map((v) => {
|
||||
const meta = v.meta ?? {}
|
||||
const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
|
||||
const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
|
||||
|
||||
if (
|
||||
oneShowingChild &&
|
||||
(!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
|
||||
!meta?.alwaysShow
|
||||
) {
|
||||
return (
|
||||
<ElMenuItem
|
||||
index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
|
||||
>
|
||||
{{
|
||||
default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
|
||||
}}
|
||||
</ElMenuItem>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<ElSubMenu index={fullPath}>
|
||||
{{
|
||||
title: () => renderMenuTitle(meta),
|
||||
default: () => renderMenuItem(v.children!, fullPath)
|
||||
}}
|
||||
</ElSubMenu>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
renderMenuItem
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import type { RouteMeta } from 'vue-router'
|
||||
import { Icon } from '@/components/Icon'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
|
||||
export const useRenderMenuTitle = () => {
|
||||
const renderMenuTitle = (meta: RouteMeta) => {
|
||||
const { t } = useI18n()
|
||||
const { title = 'Please set title', icon } = meta
|
||||
|
||||
return icon ? (
|
||||
<>
|
||||
<Icon icon={meta.icon}></Icon>
|
||||
<span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
{t(title as string)}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
{t(title as string)}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return {
|
||||
renderMenuTitle
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user