Compare commits
80 Commits
pr@dev@per
...
v4.10.4
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
73d6bda8c3 | ||
|
|
3934b45367 | ||
|
|
0c5e84d1e3 | ||
|
|
18a3f42717 | ||
|
|
68030d98b2 | ||
|
|
a861f77609 | ||
|
|
e58ec6057c | ||
|
|
7ab20c5885 | ||
|
|
e47ddb5355 | ||
|
|
56aa3caa83 | ||
|
|
19b1dc0dbc | ||
|
|
77ef172a23 | ||
|
|
4596887bf1 | ||
|
|
0a3dc30c85 | ||
|
|
51d24bc8e5 | ||
|
|
1b15a4d043 | ||
|
|
7d3f818242 | ||
|
|
4e26f18d77 | ||
|
|
b22613617a | ||
|
|
e971cbf4a8 | ||
|
|
4672abae35 | ||
|
|
ba36d72602 | ||
|
|
4bfbbba4c5 | ||
|
|
ea038ce43a | ||
|
|
e16b19666c | ||
|
|
c7f5409eb6 | ||
|
|
fdbd7d2222 | ||
|
|
ddbaeeafea | ||
|
|
efb0e9dacb | ||
|
|
f6f8301ad5 | ||
|
|
9a63ae63d4 | ||
|
|
1e007ccda3 | ||
|
|
d1d0b06b53 | ||
|
|
5fb70d2f24 | ||
|
|
b54a95430f | ||
|
|
4d8b4c45af | ||
|
|
a6d642df60 | ||
|
|
2e74f1522f | ||
|
|
fe615e0314 | ||
|
|
09f734e6fc | ||
|
|
3117046342 | ||
|
|
b68aecb5cc | ||
|
|
1c9b155d97 | ||
|
|
75b1be9864 | ||
|
|
615c3c1cf4 | ||
|
|
4d82231af4 | ||
|
|
c6cf6571b6 | ||
|
|
8ea990d070 | ||
|
|
f4a32170d5 | ||
|
|
073508675e | ||
|
|
1d6ca0a93a | ||
|
|
36aea652d6 | ||
|
|
1a42ce90ab | ||
|
|
31a401b55d | ||
|
|
582a84178d | ||
|
|
9b9f7c936c | ||
|
|
2a6100957f | ||
|
|
16606d6a27 | ||
|
|
0a612f50e6 | ||
|
|
fe36fa9390 | ||
|
|
ba109900ec | ||
|
|
ec7768267f | ||
|
|
cc58b374ab | ||
|
|
04ffbb8fd6 | ||
|
|
49880f6739 | ||
|
|
e6f98d58c4 | ||
|
|
fd1f16d43c | ||
|
|
968b2415b1 | ||
|
|
776090d6ba | ||
|
|
3a37952288 | ||
|
|
62b8fc0e3b | ||
|
|
b2028869cb | ||
|
|
5277a725f8 | ||
|
|
f137788c1a | ||
|
|
f7d17c8de7 | ||
|
|
feea70b0be | ||
|
|
04696ef3d6 | ||
|
|
1731f4f788 | ||
|
|
6f25d93909 | ||
|
|
46461ec324 |
273
.eslintrc.js
@@ -14,97 +14,64 @@ module.exports = {
|
|||||||
window: true,
|
window: true,
|
||||||
_: true
|
_: true
|
||||||
},
|
},
|
||||||
plugins: ['vue', 'spellcheck'],
|
|
||||||
// add your custom rules here
|
// add your custom rules here
|
||||||
// it is base on https://github.com/vuejs/eslint-config-vue
|
// it is base on https://github.com/vuejs/eslint-config-vue
|
||||||
rules: {
|
rules: {
|
||||||
'vue/max-attributes-per-line': [
|
'vue/max-attributes-per-line': [2, {
|
||||||
2,
|
'singleline': 10,
|
||||||
{
|
'multiline': {
|
||||||
singleline: 10,
|
'max': 1,
|
||||||
multiline: {
|
'allowFirstLine': false
|
||||||
max: 1,
|
|
||||||
allowFirstLine: false
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
],
|
}],
|
||||||
'vue/singleline-html-element-content-newline': 'off',
|
'vue/singleline-html-element-content-newline': 'off',
|
||||||
'vue/multiline-html-element-content-newline': 'off',
|
'vue/multiline-html-element-content-newline': 'off',
|
||||||
'vue/name-property-casing': ['error', 'PascalCase'],
|
'vue/name-property-casing': ['error', 'PascalCase'],
|
||||||
'vue/no-v-html': 'off',
|
'vue/no-v-html': 'off',
|
||||||
'accessor-pairs': 2,
|
'accessor-pairs': 2,
|
||||||
'arrow-spacing': [
|
'arrow-spacing': [2, {
|
||||||
2,
|
'before': true,
|
||||||
{
|
'after': true
|
||||||
before: true,
|
}],
|
||||||
after: true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'block-spacing': [2, 'always'],
|
'block-spacing': [2, 'always'],
|
||||||
'brace-style': [
|
'brace-style': [2, '1tbs', {
|
||||||
2,
|
'allowSingleLine': true
|
||||||
'1tbs',
|
}],
|
||||||
{
|
'camelcase': [0, {
|
||||||
allowSingleLine: true
|
'properties': 'always'
|
||||||
}
|
}],
|
||||||
],
|
|
||||||
camelcase: [
|
|
||||||
0,
|
|
||||||
{
|
|
||||||
properties: 'always'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'comma-dangle': [2, 'never'],
|
'comma-dangle': [2, 'never'],
|
||||||
'comma-spacing': [
|
'comma-spacing': [2, {
|
||||||
2,
|
'before': false,
|
||||||
{
|
'after': true
|
||||||
before: false,
|
}],
|
||||||
after: true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'comma-style': [2, 'last'],
|
'comma-style': [2, 'last'],
|
||||||
'constructor-super': 2,
|
'constructor-super': 2,
|
||||||
curly: [2, 'multi-line'],
|
'curly': [2, 'multi-line'],
|
||||||
'dot-location': [2, 'property'],
|
'dot-location': [2, 'property'],
|
||||||
'eol-last': 2,
|
'eol-last': 2,
|
||||||
eqeqeq: ['error', 'always', { null: 'ignore' }],
|
'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
|
||||||
'generator-star-spacing': [
|
'generator-star-spacing': [2, {
|
||||||
2,
|
'before': true,
|
||||||
{
|
'after': true
|
||||||
before: true,
|
}],
|
||||||
after: true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'handle-callback-err': [2, '^(err|error)$'],
|
'handle-callback-err': [2, '^(err|error)$'],
|
||||||
indent: [
|
'indent': [2, 2, {
|
||||||
2,
|
'SwitchCase': 1
|
||||||
2,
|
}],
|
||||||
{
|
|
||||||
SwitchCase: 1
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'jsx-quotes': [2, 'prefer-single'],
|
'jsx-quotes': [2, 'prefer-single'],
|
||||||
'key-spacing': [
|
'key-spacing': [2, {
|
||||||
2,
|
'beforeColon': false,
|
||||||
{
|
'afterColon': true
|
||||||
beforeColon: false,
|
}],
|
||||||
afterColon: true
|
'keyword-spacing': [2, {
|
||||||
}
|
'before': true,
|
||||||
],
|
'after': true
|
||||||
'keyword-spacing': [
|
}],
|
||||||
2,
|
'new-cap': [2, {
|
||||||
{
|
'newIsCap': true,
|
||||||
before: true,
|
'capIsNew': false
|
||||||
after: true
|
}],
|
||||||
}
|
|
||||||
],
|
|
||||||
'new-cap': [
|
|
||||||
2,
|
|
||||||
{
|
|
||||||
newIsCap: true,
|
|
||||||
capIsNew: false
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'new-parens': 2,
|
'new-parens': 2,
|
||||||
'no-array-constructor': 2,
|
'no-array-constructor': 2,
|
||||||
'no-caller': 2,
|
'no-caller': 2,
|
||||||
@@ -135,23 +102,17 @@ module.exports = {
|
|||||||
'no-irregular-whitespace': 2,
|
'no-irregular-whitespace': 2,
|
||||||
'no-iterator': 2,
|
'no-iterator': 2,
|
||||||
'no-label-var': 2,
|
'no-label-var': 2,
|
||||||
'no-labels': [
|
'no-labels': [2, {
|
||||||
2,
|
'allowLoop': false,
|
||||||
{
|
'allowSwitch': false
|
||||||
allowLoop: false,
|
}],
|
||||||
allowSwitch: false
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'no-lone-blocks': 2,
|
'no-lone-blocks': 2,
|
||||||
'no-mixed-spaces-and-tabs': 2,
|
'no-mixed-spaces-and-tabs': 2,
|
||||||
'no-multi-spaces': 2,
|
'no-multi-spaces': 2,
|
||||||
'no-multi-str': 2,
|
'no-multi-str': 2,
|
||||||
'no-multiple-empty-lines': [
|
'no-multiple-empty-lines': [2, {
|
||||||
2,
|
'max': 1
|
||||||
{
|
}],
|
||||||
max: 1
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'no-native-reassign': 2,
|
'no-native-reassign': 2,
|
||||||
'no-negated-in-lhs': 2,
|
'no-negated-in-lhs': 2,
|
||||||
'no-new-object': 2,
|
'no-new-object': 2,
|
||||||
@@ -179,126 +140,62 @@ module.exports = {
|
|||||||
'no-undef-init': 2,
|
'no-undef-init': 2,
|
||||||
'no-unexpected-multiline': 2,
|
'no-unexpected-multiline': 2,
|
||||||
'no-unmodified-loop-condition': 2,
|
'no-unmodified-loop-condition': 2,
|
||||||
'no-unneeded-ternary': [
|
'no-unneeded-ternary': [2, {
|
||||||
2,
|
'defaultAssignment': false
|
||||||
{
|
}],
|
||||||
defaultAssignment: false
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'no-unreachable': 2,
|
'no-unreachable': 2,
|
||||||
'no-unsafe-finally': 2,
|
'no-unsafe-finally': 2,
|
||||||
'no-unused-vars': [
|
'no-unused-vars': [2, {
|
||||||
2,
|
'vars': 'all',
|
||||||
{
|
'args': 'none'
|
||||||
vars: 'all',
|
}],
|
||||||
args: 'none'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'no-useless-call': 2,
|
'no-useless-call': 2,
|
||||||
'no-useless-computed-key': 2,
|
'no-useless-computed-key': 2,
|
||||||
'no-useless-constructor': 2,
|
'no-useless-constructor': 2,
|
||||||
'no-useless-escape': 0,
|
'no-useless-escape': 0,
|
||||||
'no-whitespace-before-property': 2,
|
'no-whitespace-before-property': 2,
|
||||||
'no-with': 2,
|
'no-with': 2,
|
||||||
'one-var': [
|
'one-var': [2, {
|
||||||
2,
|
'initialized': 'never'
|
||||||
{
|
}],
|
||||||
initialized: 'never'
|
'operator-linebreak': [2, 'after', {
|
||||||
|
'overrides': {
|
||||||
|
'?': 'before',
|
||||||
|
':': 'before'
|
||||||
}
|
}
|
||||||
],
|
}],
|
||||||
'operator-linebreak': [
|
|
||||||
2,
|
|
||||||
'after',
|
|
||||||
{
|
|
||||||
overrides: {
|
|
||||||
'?': 'before',
|
|
||||||
':': 'before'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'padded-blocks': [2, 'never'],
|
'padded-blocks': [2, 'never'],
|
||||||
quotes: [
|
'quotes': [2, 'single', {
|
||||||
2,
|
'avoidEscape': true,
|
||||||
'single',
|
'allowTemplateLiterals': true
|
||||||
{
|
}],
|
||||||
avoidEscape: true,
|
'semi': [2, 'never'],
|
||||||
allowTemplateLiterals: true
|
'semi-spacing': [2, {
|
||||||
}
|
'before': false,
|
||||||
],
|
'after': true
|
||||||
semi: [2, 'never'],
|
}],
|
||||||
'semi-spacing': [
|
|
||||||
2,
|
|
||||||
{
|
|
||||||
before: false,
|
|
||||||
after: true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'space-before-blocks': [2, 'always'],
|
'space-before-blocks': [2, 'always'],
|
||||||
'space-before-function-paren': [
|
'space-before-function-paren': [2, 'never'],
|
||||||
2,
|
|
||||||
{ anonymous: 'never', named: 'never', asyncArrow: 'always' }
|
|
||||||
],
|
|
||||||
'space-in-parens': [2, 'never'],
|
'space-in-parens': [2, 'never'],
|
||||||
'space-infix-ops': 2,
|
'space-infix-ops': 2,
|
||||||
'space-unary-ops': [
|
'space-unary-ops': [2, {
|
||||||
2,
|
'words': true,
|
||||||
{
|
'nonwords': false
|
||||||
words: true,
|
}],
|
||||||
nonwords: false
|
'spaced-comment': [2, 'always', {
|
||||||
}
|
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
|
||||||
],
|
}],
|
||||||
'object-curly-spacing': [2, 'always'],
|
|
||||||
'spaced-comment': [
|
|
||||||
2,
|
|
||||||
'always',
|
|
||||||
{
|
|
||||||
markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'template-curly-spacing': [2, 'never'],
|
'template-curly-spacing': [2, 'never'],
|
||||||
'use-isnan': 2,
|
'use-isnan': 2,
|
||||||
'valid-typeof': 2,
|
'valid-typeof': 2,
|
||||||
'wrap-iife': [2, 'any'],
|
'wrap-iife': [2, 'any'],
|
||||||
'yield-star-spacing': [2, 'both'],
|
'yield-star-spacing': [2, 'both'],
|
||||||
yoda: [2, 'never'],
|
'yoda': [2, 'never'],
|
||||||
'prefer-const': 2,
|
'prefer-const': 2,
|
||||||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
|
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
|
||||||
'array-bracket-spacing': [2, 'never'],
|
'object-curly-spacing': [2, 'always', {
|
||||||
'spellcheck/spell-checker': [
|
objectsInObjects: false
|
||||||
'warn',
|
}],
|
||||||
{
|
'array-bracket-spacing': [2, 'never']
|
||||||
comments: true,
|
|
||||||
strings: false,
|
|
||||||
identifiers: false,
|
|
||||||
lang: 'en_US',
|
|
||||||
skipWords: [
|
|
||||||
'echarts',
|
|
||||||
'resize',
|
|
||||||
'vue',
|
|
||||||
'eslint',
|
|
||||||
'babel',
|
|
||||||
'jsx',
|
|
||||||
'scss',
|
|
||||||
'v-deep',
|
|
||||||
'calc',
|
|
||||||
'vw',
|
|
||||||
'vh',
|
|
||||||
'px',
|
|
||||||
'rgba',
|
|
||||||
'rgb',
|
|
||||||
'var',
|
|
||||||
'lang',
|
|
||||||
'scoped',
|
|
||||||
'pdf',
|
|
||||||
'rbac'
|
|
||||||
],
|
|
||||||
skipIfMatch: [
|
|
||||||
'http://[^s]*',
|
|
||||||
'^[-\\w]+/[-\\w\\.]+$',
|
|
||||||
String.raw`^\/api\/[a-z0-9\/._-]+$`,
|
|
||||||
],
|
|
||||||
minLength: 3
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,57 +0,0 @@
|
|||||||
# Dependencies
|
|
||||||
node_modules/
|
|
||||||
dist/
|
|
||||||
build/
|
|
||||||
lina/
|
|
||||||
|
|
||||||
# Logs
|
|
||||||
*.log
|
|
||||||
logs/
|
|
||||||
|
|
||||||
# Runtime data
|
|
||||||
pids/
|
|
||||||
*.pid
|
|
||||||
*.seed
|
|
||||||
|
|
||||||
# Coverage directory used by tools like istanbul
|
|
||||||
coverage/
|
|
||||||
|
|
||||||
# Generated files
|
|
||||||
*.min.js
|
|
||||||
*.min.css
|
|
||||||
|
|
||||||
# Package files
|
|
||||||
*.tgz
|
|
||||||
*.tar.gz
|
|
||||||
|
|
||||||
# Lock files
|
|
||||||
package-lock.json
|
|
||||||
yarn.lock
|
|
||||||
|
|
||||||
# Build outputs
|
|
||||||
*.map
|
|
||||||
|
|
||||||
# Config files that shouldn't be formatted
|
|
||||||
.eslintrc.js
|
|
||||||
babel.config.js
|
|
||||||
jest.config.js
|
|
||||||
vue.config.js
|
|
||||||
postcss.config.js
|
|
||||||
|
|
||||||
# Theme files
|
|
||||||
src/styles/fonts/
|
|
||||||
public/fonts/
|
|
||||||
lina/fonts/
|
|
||||||
|
|
||||||
# Assets
|
|
||||||
src/assets/
|
|
||||||
public/
|
|
||||||
|
|
||||||
# Mock data
|
|
||||||
mock/
|
|
||||||
|
|
||||||
# Test files
|
|
||||||
tests/
|
|
||||||
|
|
||||||
# Documentation
|
|
||||||
*.md
|
|
||||||
11
.prettierrc
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"printWidth": 100,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"useTabs": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"semi": false,
|
||||||
|
"trailingComma": "none",
|
||||||
|
"bracketSpacing": true,
|
||||||
|
"arrowParens": "avoid",
|
||||||
|
"endOfLine": "lf"
|
||||||
|
}
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
singleQuote: true,
|
|
||||||
semi: false,
|
|
||||||
trailingComma: 'none',
|
|
||||||
printWidth: 100,
|
|
||||||
tabWidth: 2,
|
|
||||||
useTabs: false,
|
|
||||||
bracketSpacing: true,
|
|
||||||
arrowParens: 'avoid',
|
|
||||||
endOfLine: 'auto'
|
|
||||||
}
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
FROM jumpserver/lina-base:20260114_045651 AS stage-build
|
FROM jumpserver/lina-base:20250709_063112 AS stage-build
|
||||||
|
|
||||||
ARG VERSION
|
ARG VERSION
|
||||||
ENV VERSION=$VERSION
|
ENV VERSION=$VERSION
|
||||||
|
|||||||
76
PRETTIER.md
@@ -1,76 +0,0 @@
|
|||||||
# Prettier 配置说明
|
|
||||||
|
|
||||||
本项目已配置 Prettier 代码格式化工具,**仅在保存时自动格式化**,不进行批量格式化,以保持现有代码风格。
|
|
||||||
|
|
||||||
## 配置文件
|
|
||||||
|
|
||||||
- `.prettierrc` - Prettier 配置文件
|
|
||||||
- `.prettierignore` - 忽略格式化的文件列表
|
|
||||||
- `.vscode/settings.json` - VSCode 编辑器配置(保存时自动格式化)
|
|
||||||
- `.vscode/extensions.json` - 推荐的 VSCode 扩展
|
|
||||||
|
|
||||||
## 使用方法
|
|
||||||
|
|
||||||
### 1. 安装依赖
|
|
||||||
项目已安装以下依赖:
|
|
||||||
- `prettier@^2.8.8` - Prettier 核心
|
|
||||||
- `eslint-plugin-prettier@^3.1.4` - ESLint 与 Prettier 集成
|
|
||||||
- `eslint-config-prettier@^6.15.0` - 禁用与 Prettier 冲突的 ESLint 规则
|
|
||||||
|
|
||||||
### 2. 命令行使用
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# ESLint 检查和修复
|
|
||||||
npm run fix
|
|
||||||
```
|
|
||||||
|
|
||||||
**注意**:本项目配置为仅在保存时自动格式化,不提供批量格式化命令。
|
|
||||||
|
|
||||||
### 3. VSCode 编辑器配置
|
|
||||||
|
|
||||||
确保安装了推荐的扩展:
|
|
||||||
- Prettier - Code formatter (esbenp.prettier-vscode)
|
|
||||||
- ESLint (dbaeumer.vscode-eslint)
|
|
||||||
- Vetur (octref.vetur)
|
|
||||||
|
|
||||||
配置已设置为保存时自动格式化。
|
|
||||||
|
|
||||||
### 4. Git 提交钩子
|
|
||||||
|
|
||||||
项目使用 `husky` 和 `lint-staged` 在提交时进行代码检查:
|
|
||||||
- 提交时运行 ESLint 检查和修复
|
|
||||||
- 不进行批量格式化,保持原有代码风格
|
|
||||||
|
|
||||||
## Prettier 配置说明
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"semi": false, // 不使用分号
|
|
||||||
"singleQuote": true, // 使用单引号
|
|
||||||
"tabWidth": 0, // 不使用缩进
|
|
||||||
"useTabs": false, // 使用空格而不是制表符
|
|
||||||
"trailingComma": "none", // 不使用尾随逗号
|
|
||||||
"printWidth": 100, // 行宽 100 字符
|
|
||||||
"bracketSpacing": true, // 对象括号内有空格
|
|
||||||
"arrowParens": "avoid", // 箭头函数单参数时不使用括号
|
|
||||||
"endOfLine": "lf", // 使用 LF 换行符
|
|
||||||
"vueIndentScriptAndStyle": false // Vue 文件中 script 和 style 标签不缩进
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## 常见问题
|
|
||||||
|
|
||||||
### Q: 如何临时禁用格式化?
|
|
||||||
A: 使用注释:
|
|
||||||
```javascript
|
|
||||||
// prettier-ignore
|
|
||||||
const uglyCode = {
|
|
||||||
a:1,b:2
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Q: 如何添加文件到忽略列表?
|
|
||||||
A: 编辑 `.prettierignore` 文件,添加文件或目录路径。
|
|
||||||
|
|
||||||
### Q: VSCode 保存时没有自动格式化?
|
|
||||||
A: 检查是否安装了 Prettier 扩展,并确认 `.vscode/settings.json` 配置正确。
|
|
||||||
@@ -1,25 +1,13 @@
|
|||||||
import Mock from 'mockjs'
|
import Mock from 'mockjs'
|
||||||
|
import { param2Obj } from '../src/utils'
|
||||||
|
|
||||||
import user from './user'
|
import user from './user'
|
||||||
import table from './table'
|
import table from './table'
|
||||||
|
|
||||||
export function param2Obj(url) {
|
const mocks = [
|
||||||
const search = url.split('?')[1]
|
...user,
|
||||||
if (!search) {
|
...table
|
||||||
return {}
|
]
|
||||||
}
|
|
||||||
return JSON.parse(
|
|
||||||
'{"' +
|
|
||||||
decodeURIComponent(search)
|
|
||||||
.replace(/"/g, '\\"')
|
|
||||||
.replace(/&/g, '","')
|
|
||||||
.replace(/=/g, '":"')
|
|
||||||
.replace(/\+/g, ' ') +
|
|
||||||
'"}'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const mocks = [...user, ...table]
|
|
||||||
|
|
||||||
// for front mock
|
// for front mock
|
||||||
// please use it cautiously, it will redefine XMLHttpRequest,
|
// please use it cautiously, it will redefine XMLHttpRequest,
|
||||||
|
|||||||
289
package.json
@@ -1,145 +1,148 @@
|
|||||||
{
|
{
|
||||||
"name": "lina",
|
"name": "lina",
|
||||||
"version": "v4.0.0",
|
"version": "v4.0.0",
|
||||||
"description": "JumpServer Web UI",
|
"description": "JumpServer Web UI",
|
||||||
"author": "JumpServer Team <support@lxware.hk>",
|
"author": "JumpServer Team <support@lxware.hk>",
|
||||||
"license": "GPL-3.0-or-later",
|
"license": "GPL-3.0-or-later",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
|
"dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
|
||||||
"serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
|
"serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
|
||||||
"build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
|
"build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
|
||||||
"build:prod": "vue-cli-service build",
|
"build:prod": "vue-cli-service build",
|
||||||
"build:stage": "vue-cli-service build --mode staging",
|
"build:stage": "vue-cli-service build --mode staging",
|
||||||
"preview": "node build/index.js --preview",
|
"preview": "node build/index.js --preview",
|
||||||
"lint": "eslint --ext .js,.vue src",
|
"lint": "eslint --ext .js,.vue src",
|
||||||
"fix": "eslint --ext .js,.vue --fix src",
|
"fix": "eslint --ext .js,.vue --fix src",
|
||||||
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||||
"test:ci": "npm run lint && npm run test:unit",
|
"test:ci": "npm run lint && npm run test:unit",
|
||||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
|
"svgo": "svgo -f src/icons/svg --config=src/icas/svgo.yml",
|
||||||
"vue-i18n-extract": "vue-i18n-extract",
|
"vue-i18n-extract": "vue-i18n-extract",
|
||||||
"vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'",
|
"vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'",
|
||||||
"vue-i18n-report-json": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -o /tmp/abc.json",
|
"vue-i18n-report-json": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -o /tmp/abc.json",
|
||||||
"vue-i18n-report-add-miss": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -a",
|
"vue-i18n-report-add-miss": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -a",
|
||||||
"diff-i18n": "python ./src/i18n/langs/i18n-util.py diff en ja zh_Hant",
|
"diff-i18n": "python ./src/i18n/langs/i18n-util.py diff en ja zh_Hant",
|
||||||
"apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja zh_Hant"
|
"apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja zh_Hant"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/plugin-proposal-optional-chaining": "^7.13.12",
|
"@babel/plugin-proposal-optional-chaining": "^7.13.12",
|
||||||
"@fontsource/open-sans": "^5.0.24",
|
"@fontsource/open-sans": "^5.0.24",
|
||||||
"@kangc/v-md-editor": "^1.7.12",
|
"@traptitech/markdown-it-katex": "^3.6.0",
|
||||||
"@traptitech/markdown-it-katex": "^3.6.0",
|
"@ztree/ztree_v3": "3.5.44",
|
||||||
"@ztree/ztree_v3": "3.5.44",
|
"axios": "0.28.0",
|
||||||
"axios": "0.28.0",
|
"axios-retry": "^3.1.9",
|
||||||
"axios-retry": "^3.1.9",
|
"caniuse-lite": "^1.0.30001642",
|
||||||
"babel-loader": "^10.0.0",
|
"cron-parser": "^4.0.0",
|
||||||
"cache-loader": "^4.1.0",
|
"crypto-js": "^4.1.1",
|
||||||
"caniuse-lite": "^1.0.30001642",
|
"css-color-function": "^1.3.3",
|
||||||
"cron-parser": "^4.0.0",
|
"decimal.js": "^10.4.3",
|
||||||
"crypto-js": "^4.1.1",
|
"deepmerge": "^4.2.2",
|
||||||
"css-color-function": "^1.3.3",
|
"dompurify": "^3.1.6",
|
||||||
"decimal.js": "^10.4.3",
|
"echarts": "4.7.0",
|
||||||
"deepmerge": "^4.2.2",
|
"elementui-lts": "^2.16.0",
|
||||||
"dompurify": "^3.2.4",
|
"eslint-plugin-html": "^6.0.0",
|
||||||
"echarts": "4.7.0",
|
"highlight.js": "^11.9.0",
|
||||||
"element-ui": "https://github.com/jumpserver-dev/element/releases/download/v2.15.15/jumpserver-element-ui-2.15.15.tgz",
|
"install": "^0.13.0",
|
||||||
"eslint-plugin-html": "^6.0.0",
|
"jquery": "^3.6.1",
|
||||||
"highlight.js": "^11.9.0",
|
"js-cookie": "2.2.0",
|
||||||
"install": "^0.13.0",
|
"jsencrypt": "^3.2.1",
|
||||||
"jquery": "^3.6.1",
|
"less": "^3.10.3",
|
||||||
"js-cookie": "2.2.0",
|
"less-loader": "^5.0.0",
|
||||||
"jsencrypt": "^3.2.1",
|
"lodash": "^4.17.21",
|
||||||
"less": "^3.10.3",
|
"lodash.clonedeep": "^4.5.0",
|
||||||
"less-loader": "^5.0.0",
|
"lodash.frompairs": "^4.0.1",
|
||||||
"lodash": "^4.17.21",
|
"lodash.get": "^4.4.2",
|
||||||
"markdown-it": "^13.0.2",
|
"lodash.has": "^4.5.2",
|
||||||
"markdown-it-link-attributes": "^4.0.1",
|
"lodash.includes": "^4.3.0",
|
||||||
"moment": "^2.29.4",
|
"lodash.isempty": "^4.4.0",
|
||||||
"moment-parseformat": "^4.0.0",
|
"lodash.isequal": "^4.5.0",
|
||||||
"normalize.css": "7.0.0",
|
"lodash.isplainobject": "^4.0.6",
|
||||||
"npm": "^7.8.0",
|
"lodash.set": "^4.3.2",
|
||||||
"nprogress": "0.2.0",
|
"lodash.topairs": "^4.3.0",
|
||||||
"path-to-regexp": "3.3.0",
|
"lodash.values": "^4.3.0",
|
||||||
"sortablejs": "^1.15.6",
|
"markdown-it": "^13.0.2",
|
||||||
"v-sanitize": "^0.0.13",
|
"markdown-it-link-attributes": "^4.0.1",
|
||||||
"vue": "2.7.16",
|
"moment": "^2.29.4",
|
||||||
"vue-codemirror": "4.0.6",
|
"moment-parseformat": "^4.0.0",
|
||||||
"vue-cookie": "^1.1.4",
|
"normalize.css": "7.0.0",
|
||||||
"vue-echarts": "^5.0.0-beta.0",
|
"npm": "^7.8.0",
|
||||||
"vue-i18n": "^8.15.5",
|
"nprogress": "0.2.0",
|
||||||
"vue-json-editor": "^1.4.3",
|
"path-to-regexp": "3.3.0",
|
||||||
"vue-markdown": "^2.2.4",
|
"sortablejs": "^1.15.6",
|
||||||
"vue-password-strength-meter": "^1.7.2",
|
"v-sanitize": "^0.0.13",
|
||||||
"vue-router": "3.0.6",
|
"vue": "2.6.10",
|
||||||
"vue-select": "^3.9.5",
|
"vue-codemirror": "4.0.6",
|
||||||
"vuejs-logger": "^1.5.4",
|
"vue-cookie": "^1.1.4",
|
||||||
"vuex": "3.1.0",
|
"vue-echarts": "^5.0.0-beta.0",
|
||||||
"watermark-js-plus": "^1.5.8",
|
"vue-i18n": "^8.15.5",
|
||||||
"xss": "^1.0.14",
|
"vue-json-editor": "^1.4.3",
|
||||||
"xterm": "^4.5.0",
|
"vue-markdown": "^2.2.4",
|
||||||
"xterm-addon-fit": "^0.3.0",
|
"vue-password-strength-meter": "^1.7.2",
|
||||||
"zxcvbn": "^4.4.2"
|
"vue-router": "3.0.6",
|
||||||
},
|
"vue-select": "^3.9.5",
|
||||||
"devDependencies": {
|
"vuejs-logger": "^1.5.4",
|
||||||
"@babel/core": "7.18.6",
|
"vuex": "3.1.0",
|
||||||
"@babel/register": "7.0.0",
|
"watermark-js-plus": "^1.5.8",
|
||||||
"@vue/cli-plugin-babel": "3.6.0",
|
"xss": "^1.0.14",
|
||||||
"@vue/cli-plugin-eslint": "^3.9.1",
|
"xterm": "^4.5.0",
|
||||||
"@vue/cli-plugin-unit-jest": "3.6.3",
|
"xterm-addon-fit": "^0.3.0",
|
||||||
"@vue/cli-service": "3.6.0",
|
"zxcvbn": "^4.4.2"
|
||||||
"@vue/test-utils": "1.0.0-beta.29",
|
},
|
||||||
"autoprefixer": "^9.5.1",
|
"devDependencies": {
|
||||||
"babel-core": "6.26.3",
|
"@babel/core": "7.18.6",
|
||||||
"babel-eslint": "10.0.1",
|
"@babel/register": "7.0.0",
|
||||||
"babel-jest": "23.6.0",
|
"@vue/cli-plugin-babel": "3.6.0",
|
||||||
"chalk": "2.4.2",
|
"@vue/cli-plugin-eslint": "^3.9.1",
|
||||||
"compression-webpack-plugin": "^6.1.1",
|
"@vue/cli-plugin-unit-jest": "3.6.3",
|
||||||
"connect": "3.6.6",
|
"@vue/cli-service": "3.6.0",
|
||||||
"deasync": "^0.1.29",
|
"@vue/test-utils": "1.0.0-beta.29",
|
||||||
"eslint": "^5.15.3",
|
"autoprefixer": "^9.5.1",
|
||||||
"eslint-config-prettier": "^6.15.0",
|
"babel-core": "7.0.0-bridge.0",
|
||||||
"eslint-plugin-prettier": "^3.4.1",
|
"babel-eslint": "10.0.1",
|
||||||
"eslint-plugin-spellcheck": "^0.0.20",
|
"babel-jest": "23.6.0",
|
||||||
"eslint-plugin-vue": "5.2.2",
|
"chalk": "2.4.2",
|
||||||
"eslint-plugin-vue-i18n": "^0.3.0",
|
"compression-webpack-plugin": "^6.1.1",
|
||||||
"github-markdown-css": "^5.1.0",
|
"connect": "3.6.6",
|
||||||
"html-webpack-plugin": "3.2.0",
|
"deasync": "^0.1.29",
|
||||||
"husky": "^4.2.3",
|
"eslint": "^5.15.3",
|
||||||
"less-loader": "^5.0.0",
|
"eslint-plugin-vue": "5.2.2",
|
||||||
"lint-staged": "^10.1.2",
|
"eslint-plugin-vue-i18n": "^0.3.0",
|
||||||
"mockjs": "1.0.1-beta3",
|
"github-markdown-css": "^5.1.0",
|
||||||
"prettier": "^3.6.2",
|
"html-webpack-plugin": "3.2.0",
|
||||||
"pretty-bytes": "^5.6.0",
|
"husky": "^4.2.3",
|
||||||
"runjs": "^4.3.2",
|
"less-loader": "^5.0.0",
|
||||||
"sass": "~1.32.6",
|
"lint-staged": "^10.1.2",
|
||||||
"sass-loader": "^7.1.0",
|
"mockjs": "1.0.1-beta3",
|
||||||
"script-ext-html-webpack-plugin": "2.1.3",
|
"pretty-bytes": "^5.6.0",
|
||||||
"script-loader": "0.7.2",
|
"runjs": "^4.3.2",
|
||||||
"serve-static": "^1.16.0",
|
"sass": "~1.32.6",
|
||||||
"strip-ansi": "^7.1.0",
|
"sass-loader": "^7.1.0",
|
||||||
"svg-sprite-loader": "4.1.3",
|
"script-ext-html-webpack-plugin": "2.1.3",
|
||||||
"svgo": "1.2.2",
|
"script-loader": "0.7.2",
|
||||||
"vue-i18n-extract": "^1.1.1",
|
"serve-static": "^1.16.0",
|
||||||
"vue-template-compiler": "2.7.16",
|
"strip-ansi": "^7.1.0",
|
||||||
"webpack": "^4.28.4"
|
"svg-sprite-loader": "4.1.3",
|
||||||
},
|
"svgo": "1.2.2",
|
||||||
"engines": {
|
"vue-i18n-extract": "^1.1.1",
|
||||||
"node": ">=12",
|
"vue-template-compiler": "2.6.10"
|
||||||
"npm": ">= 3.0.0"
|
},
|
||||||
},
|
"engines": {
|
||||||
"browserslist": [
|
"node": ">=8.9",
|
||||||
"> 1%",
|
"npm": ">= 3.0.0"
|
||||||
"last 4 versions",
|
},
|
||||||
"ie 11"
|
"browserslist": [
|
||||||
],
|
"> 1%",
|
||||||
"husky": {
|
"last 4 versions",
|
||||||
"hooks": {
|
"ie 11"
|
||||||
"pre-commit": "lint-staged"
|
],
|
||||||
}
|
"husky": {
|
||||||
},
|
"hooks": {
|
||||||
"lint-staged": {
|
"pre-commit": "lint-staged"
|
||||||
"src/**/*.{js,vue}": [
|
}
|
||||||
"eslint --fix"
|
},
|
||||||
]
|
"lint-staged": {
|
||||||
},
|
"src/**/*.{js,vue}": [
|
||||||
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
"eslint --fix"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -61,14 +61,13 @@ export function stopJob(form) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function JobUploadFile(form, config = {}) {
|
export function JobUploadFile(form) {
|
||||||
return request({
|
return request({
|
||||||
url: '/api/v1/ops/jobs/upload/',
|
url: '/api/v1/ops/jobs/upload/',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
headers: { 'Content-Type': 'multipart/form-data' },
|
headers: { 'Content-Type': 'multipart/form-data' },
|
||||||
timeout: 60 * 60 * 1000,
|
timeout: 60 * 60 * 1000,
|
||||||
data: form,
|
data: form
|
||||||
...config
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,14 +18,14 @@ export function toggleLockSession(data) {
|
|||||||
|
|
||||||
export function getAllCommandStorage() {
|
export function getAllCommandStorage() {
|
||||||
return request({
|
return request({
|
||||||
url: '/api/v1/terminal/command-storages/',
|
url: `/api/v1/terminal/command-storages/`,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getAllReplayStorage() {
|
export function getAllReplayStorage() {
|
||||||
return request({
|
return request({
|
||||||
url: '/api/v1/terminal/replay-storages/',
|
url: `/api/v1/terminal/replay-storages/`,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 584 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 110 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 55 KiB |
@@ -1 +0,0 @@
|
|||||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1752631175762" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4421" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M93.866667 234.666667c-34.133333 12.8-51.2 25.6-51.2 34.133333 0 4.266667 51.2 64 115.2 136.533333 64 68.266667 115.2 128 115.2 128s-51.2 59.733333-115.2 128C93.866667 729.6 42.666667 793.6 42.666667 797.866667c4.266667 17.066667 59.733333 42.666667 98.133333 42.666666 64 0 81.066667-12.8 217.6-162.133333 68.266667-76.8 128-140.8 128-140.8 0-4.266667-55.466667-64-123.733333-140.8-85.333333-102.4-132.266667-145.066667-153.6-157.866667-29.866667-12.8-81.066667-17.066667-115.2-4.266666z m725.333333 4.266666c-21.333333 8.533333-68.266667 59.733333-153.6 153.6-68.266667 76.8-123.733333 140.8-123.733333 140.8 0 4.266667 55.466667 68.266667 128 140.8 136.533333 153.6 153.6 162.133333 217.6 162.133334 42.666667 0 98.133333-21.333333 98.133333-42.666667 0-4.266667-51.2-68.266667-115.2-136.533333-64-68.266667-115.2-128-115.2-128s51.2-59.733333 115.2-128c64-68.266667 115.2-128 115.2-136.533334-4.266667-17.066667-55.466667-38.4-98.133333-38.4-34.133333 0-46.933333 4.266667-68.266667 12.8z" fill="#E57000" p-id="4422"></path><path d="M238.933333 136.533333c-42.666667 21.333333-42.666667 25.6-4.266666 68.266667 221.866667 243.2 273.066667 302.933333 277.333333 302.933333 4.266667 0 311.466667-332.8 315.733333-341.333333 0-4.266667-8.533333-12.8-21.333333-21.333333-17.066667-12.8-34.133333-17.066667-68.266667-17.066667-64-4.266667-85.333333 8.533333-162.133333 93.866667-34.133333 38.4-64 72.533333-64 72.533333s-29.866667-29.866667-64-68.266667c-34.133333-38.4-72.533333-76.8-89.6-85.333333-25.6-17.066667-89.6-21.333333-119.466667-4.266667zM354.133333 725.333333c-85.333333 93.866667-153.6 170.666667-153.6 174.933334 0 4.266667 8.533333 12.8 21.333334 21.333333 17.066667 12.8 34.133333 17.066667 68.266666 17.066667 59.733333 4.266667 85.333333-8.533333 162.133334-98.133334 34.133333-38.4 64-68.266667 64-68.266666s29.866667 29.866667 64 68.266666c81.066667 89.6 98.133333 102.4 162.133333 98.133334 34.133333 0 51.2-4.266667 68.266667-17.066667 12.8-8.533333 21.333333-17.066667 21.333333-21.333333-4.266667-8.533333-311.466667-345.6-315.733333-341.333334-8.533333 0-76.8 76.8-162.133334 166.4z" p-id="4423"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 210 KiB |
@@ -1,6 +1,5 @@
|
|||||||
import { UpdateToken, UploadSecret } from '@/components/Form/FormFields'
|
import { UpdateToken, UploadSecret } from '@/components/Form/FormFields'
|
||||||
import Select2 from '@/components/Form/FormFields/Select2.vue'
|
import Select2 from '@/components/Form/FormFields/Select2.vue'
|
||||||
import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
|
|
||||||
import { Required, RequiredChange } from '@/components/Form/DataForm/rules'
|
import { Required, RequiredChange } from '@/components/Form/DataForm/rules'
|
||||||
import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
|
import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
|
||||||
|
|
||||||
@@ -15,28 +14,19 @@ export const accountFieldsMeta = (vm) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
nodes: {
|
assets: {
|
||||||
component: Select2,
|
component: Select2,
|
||||||
label: vm.$t('Node'),
|
label: vm.$t('Asset'),
|
||||||
|
rules: [Required],
|
||||||
el: {
|
el: {
|
||||||
value: [],
|
multiple: true,
|
||||||
ajax: {
|
ajax: {
|
||||||
url: '/api/v1/assets/nodes/',
|
url: '/api/v1/assets/assets/',
|
||||||
transformOption: (item) => {
|
transformOption: (item) => {
|
||||||
return { label: item.full_value, value: item.id }
|
return { label: item.name + '(' + item.address + ')', value: item.id }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
hidden: () => {
|
|
||||||
return !vm.addTemplate
|
|
||||||
}
|
|
||||||
},
|
|
||||||
assets: {
|
|
||||||
component: AssetSelect,
|
|
||||||
label: vm.$t('Asset'),
|
|
||||||
el: {
|
|
||||||
multiple: false
|
|
||||||
},
|
|
||||||
hidden: () => {
|
hidden: () => {
|
||||||
return vm.platform || vm.asset
|
return vm.platform || vm.asset
|
||||||
}
|
}
|
||||||
@@ -48,7 +38,7 @@ export const accountFieldsMeta = (vm) => {
|
|||||||
get disabled() {
|
get disabled() {
|
||||||
return vm.isDisabled
|
return vm.isDisabled
|
||||||
},
|
},
|
||||||
multiple: vm.addTemplate,
|
multiple: false,
|
||||||
ajax: {
|
ajax: {
|
||||||
url: '/api/v1/accounts/account-templates/',
|
url: '/api/v1/accounts/account-templates/',
|
||||||
transformOption: (item) => {
|
transformOption: (item) => {
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
|
import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
|
||||||
import { encryptPassword } from '@/utils/secure'
|
import { encryptPassword } from '@/utils/crypto'
|
||||||
import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
|
import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -63,7 +63,7 @@ export default {
|
|||||||
encryptedFields: ['secret'],
|
encryptedFields: ['secret'],
|
||||||
fields: [
|
fields: [
|
||||||
[this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
|
[this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
|
||||||
[this.$t('Asset'), ['nodes', 'assets']],
|
[this.$t('Asset'), ['assets']],
|
||||||
[this.$t('Secret'), [
|
[this.$t('Secret'), [
|
||||||
'secret_type', 'password', 'ssh_key', 'token',
|
'secret_type', 'password', 'ssh_key', 'token',
|
||||||
'access_key', 'passphrase', 'api_key',
|
'access_key', 'passphrase', 'api_key',
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { GenericUpdateFormDialog } from '@/layout/components'
|
import { GenericUpdateFormDialog } from '@/layout/components'
|
||||||
import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
|
import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
|
||||||
import { encryptPassword } from '@/utils/secure'
|
import { encryptPassword } from '@/utils/crypto'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AccountBulkUpdateDialog',
|
name: 'AccountBulkUpdateDialog',
|
||||||
|
|||||||
@@ -93,8 +93,8 @@ export default {
|
|||||||
iVisible = true
|
iVisible = true
|
||||||
data = formValue
|
data = formValue
|
||||||
url = `/api/v1/accounts/accounts/bulk/`
|
url = `/api/v1/accounts/accounts/bulk/`
|
||||||
if ((!data.assets || data.assets.length === 0) && (!data.nodes || data.nodes.length === 0)) {
|
if (data.assets.length === 0) {
|
||||||
this.$message.error(this.$tc('PleaseSelectAssetOrNode'))
|
this.$message.error(this.$tc('PleaseSelectAsset'))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -107,10 +107,6 @@ export default {
|
|||||||
this.$emit('add', true)
|
this.$emit('add', true)
|
||||||
}
|
}
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
if (error?.response?.data?.code === 'no_valid_assets') {
|
|
||||||
this.$message.error(error?.response?.data?.detail)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.iVisible = true
|
this.iVisible = true
|
||||||
this.handleResult(null, error)
|
this.handleResult(null, error)
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -52,7 +52,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
import { accountOtherActions, accountQuickFilters, connectivityMeta, isDirectoryServiceAccount } from './const'
|
import { accountOtherActions, accountQuickFilters, connectivityMeta, isDirectoryServiceAccount } from './const'
|
||||||
import { openTaskPage } from '@/utils/jms/index'
|
import { openTaskPage } from '@/utils/jms'
|
||||||
import {
|
import {
|
||||||
AccountConnectFormatter,
|
AccountConnectFormatter,
|
||||||
ActionsFormatter,
|
ActionsFormatter,
|
||||||
@@ -341,7 +341,7 @@ export default {
|
|||||||
can: () => {
|
can: () => {
|
||||||
return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
|
return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
|
||||||
},
|
},
|
||||||
callback: async () => {
|
callback: async() => {
|
||||||
await this.getAssetDetail()
|
await this.getAssetDetail()
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
vm.iAsset = this.asset
|
vm.iAsset = this.asset
|
||||||
@@ -362,7 +362,7 @@ export default {
|
|||||||
can: ({ selectedRows }) => {
|
can: ({ selectedRows }) => {
|
||||||
return selectedRows.length > 0 &&
|
return selectedRows.length > 0 &&
|
||||||
['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
|
['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
|
||||||
!this.$store.getters.currentOrgIsRoot && vm.$hasPerm('accounts.verify_account')
|
!this.$store.getters.currentOrgIsRoot
|
||||||
},
|
},
|
||||||
callback: function({ selectedRows }) {
|
callback: function({ selectedRows }) {
|
||||||
const ids = selectedRows.map(v => {
|
const ids = selectedRows.map(v => {
|
||||||
@@ -478,7 +478,7 @@ export default {
|
|||||||
this.$refs.ListTable.reloadTable()
|
this.$refs.ListTable.reloadTable()
|
||||||
},
|
},
|
||||||
async getAssetDetail() {
|
async getAssetDetail() {
|
||||||
const { query: { asset } } = this.$route
|
const { query: { asset }} = this.$route
|
||||||
if (asset) {
|
if (asset) {
|
||||||
this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`)
|
this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
@confirm="closeDialog"
|
@confirm="closeDialog"
|
||||||
v-on="$listeners"
|
v-on="$listeners"
|
||||||
>
|
>
|
||||||
<el-alert style="margin-bottom: 10px" type="info">
|
<el-alert style="margin-bottom: 10px" type="success">
|
||||||
<span v-for="item of summary" :key="item.key"><b>{{ item.label }}</b>: {{ item.value }} </span>
|
<span v-for="item of summary" :key="item.key"><b>{{ item.label }}</b>: {{ item.value }} </span>
|
||||||
</el-alert>
|
</el-alert>
|
||||||
<DataTable :config="config" />
|
<DataTable :config="config" />
|
||||||
@@ -49,10 +49,6 @@ export default {
|
|||||||
prop: 'asset',
|
prop: 'asset',
|
||||||
label: this.$t('Asset')
|
label: this.$t('Asset')
|
||||||
},
|
},
|
||||||
{
|
|
||||||
prop: 'account',
|
|
||||||
label: this.$t('Account')
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
prop: 'state',
|
prop: 'state',
|
||||||
label: this.$t('Status'),
|
label: this.$t('Status'),
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Dialog from '@/components/Dialog/index.vue'
|
import Dialog from '@/components/Dialog/index.vue'
|
||||||
import { openTaskPage } from '@/utils/jms/index'
|
import { openTaskPage } from '@/utils/jms'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'RemoveAccount',
|
name: 'RemoveAccount',
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import Dialog from '@/components/Dialog/index.vue'
|
import Dialog from '@/components/Dialog/index.vue'
|
||||||
import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
|
import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
|
||||||
import { encryptPassword } from '@/utils/secure'
|
import { encryptPassword } from '@/utils/crypto'
|
||||||
import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
|
import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|||||||
@@ -61,8 +61,7 @@
|
|||||||
import Dialog from '@/components/Dialog/index.vue'
|
import Dialog from '@/components/Dialog/index.vue'
|
||||||
import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
|
import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
|
||||||
import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
|
import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
|
||||||
import { encryptPassword } from '@/utils/secure'
|
import { encryptPassword } from '@/utils/crypto'
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ShowSecretInfo',
|
name: 'ShowSecretInfo',
|
||||||
@@ -112,9 +111,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters({
|
|
||||||
publicSettings: 'publicSettings'
|
|
||||||
}),
|
|
||||||
secretTypeLabel() {
|
secretTypeLabel() {
|
||||||
return this.account['secret_type'].label || 'Password'
|
return this.account['secret_type'].label || 'Password'
|
||||||
},
|
},
|
||||||
@@ -150,11 +146,7 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
showSecretDialog() {
|
showSecretDialog() {
|
||||||
if (!this.publicSettings.SECURITY_ACCOUNT_SECRET_READ) {
|
return this.$axios.get(this.url, { disableFlashErrorMsg: true }).then((res) => {
|
||||||
this.$message.warning(this.$tc('AccountSecretReadDisabled'))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
return this.$axios.get(this.url).then((res) => {
|
|
||||||
this.secretInfo = res
|
this.secretInfo = res
|
||||||
this.sshKeyFingerprint = res?.spec_info?.ssh_key_fingerprint || '-'
|
this.sshKeyFingerprint = res?.spec_info?.ssh_key_fingerprint || '-'
|
||||||
this.showSecret = true
|
this.showSecret = true
|
||||||
@@ -175,54 +167,54 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.item-textarea ::v-deep .el-textarea__inner {
|
.item-textarea ::v-deep .el-textarea__inner {
|
||||||
height: 110px;
|
height: 110px;
|
||||||
}
|
|
||||||
|
|
||||||
.el-form-item {
|
|
||||||
border-bottom: 1px solid #EBEEF5;
|
|
||||||
padding: 5px 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-form-item__label {
|
.el-form-item {
|
||||||
display: flex;
|
border-bottom: 1px solid #EBEEF5;
|
||||||
align-items: center;
|
padding: 5px 0;
|
||||||
justify-content: flex-start;
|
margin-bottom: 0;
|
||||||
padding-right: 20px;
|
|
||||||
line-height: 30px;
|
|
||||||
word-break: keep-all;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-form-item__content {
|
&:last-child {
|
||||||
line-height: 30px;
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
pre {
|
::v-deep .el-form-item__label {
|
||||||
margin: 0;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding-right: 20px;
|
||||||
|
line-height: 30px;
|
||||||
|
word-break: keep-all;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-form-item__content {
|
||||||
|
line-height: 30px;
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
color: #303133;
|
color: #303133;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { ChoicesFormatter } from '@/components/Table/TableFormatters'
|
import { ChoicesFormatter } from '@/components/Table/TableFormatters'
|
||||||
import { openTaskPage } from '@/utils/jms/index'
|
import { openTaskPage } from '@/utils/jms'
|
||||||
|
|
||||||
export const connectivityMeta = {
|
export const connectivityMeta = {
|
||||||
formatter: ChoicesFormatter,
|
formatter: ChoicesFormatter,
|
||||||
@@ -40,7 +40,7 @@ export function isDirectoryServiceAccount(account, vm) {
|
|||||||
return vm.asset && vm.asset.id !== account.asset.id
|
return vm.asset && vm.asset.id !== account.asset.id
|
||||||
}
|
}
|
||||||
|
|
||||||
export const accountOtherActions = vm => {
|
export const accountOtherActions = (vm) => {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
name: 'View',
|
name: 'View',
|
||||||
@@ -62,11 +62,9 @@ export const accountOtherActions = vm => {
|
|||||||
name: 'Update',
|
name: 'Update',
|
||||||
title: vm.$t('Edit'),
|
title: vm.$t('Edit'),
|
||||||
can: ({ row }) => {
|
can: ({ row }) => {
|
||||||
return (
|
return vm.$hasPerm('accounts.change_account') &&
|
||||||
vm.$hasPerm('accounts.change_account') &&
|
|
||||||
!vm.$store.getters.currentOrgIsRoot &&
|
!vm.$store.getters.currentOrgIsRoot &&
|
||||||
!isDirectoryServiceAccount(row, vm)
|
!isDirectoryServiceAccount(row, vm)
|
||||||
)
|
|
||||||
},
|
},
|
||||||
callback: ({ row }) => {
|
callback: ({ row }) => {
|
||||||
vm.isUpdateAccount = true
|
vm.isUpdateAccount = true
|
||||||
@@ -87,11 +85,9 @@ export const accountOtherActions = vm => {
|
|||||||
name: 'UpdateSecret',
|
name: 'UpdateSecret',
|
||||||
title: vm.$t('EditSecret'),
|
title: vm.$t('EditSecret'),
|
||||||
can: ({ row }) => {
|
can: ({ row }) => {
|
||||||
return (
|
return vm.$hasPerm('accounts.change_account') &&
|
||||||
vm.$hasPerm('accounts.change_account') &&
|
|
||||||
!vm.$store.getters.currentOrgIsRoot &&
|
!vm.$store.getters.currentOrgIsRoot &&
|
||||||
!isDirectoryServiceAccount(row, vm)
|
!isDirectoryServiceAccount(row, vm)
|
||||||
)
|
|
||||||
},
|
},
|
||||||
callback: ({ row }) => {
|
callback: ({ row }) => {
|
||||||
const data = {
|
const data = {
|
||||||
@@ -114,11 +110,9 @@ export const accountOtherActions = vm => {
|
|||||||
return !vm.asset
|
return !vm.asset
|
||||||
},
|
},
|
||||||
can: ({ row }) => {
|
can: ({ row }) => {
|
||||||
return (
|
return vm.$hasPerm('accounts.add_account') &&
|
||||||
vm.$hasPerm('accounts.add_account') &&
|
|
||||||
!vm.$store.getters.currentOrgIsRoot &&
|
!vm.$store.getters.currentOrgIsRoot &&
|
||||||
!isDirectoryServiceAccount(row, vm)
|
!isDirectoryServiceAccount(row, vm)
|
||||||
)
|
|
||||||
},
|
},
|
||||||
callback: ({ row }) => {
|
callback: ({ row }) => {
|
||||||
vm.account = {
|
vm.account = {
|
||||||
@@ -144,26 +138,29 @@ export const accountOtherActions = vm => {
|
|||||||
row.asset['auto_config'].ansible_enabled &&
|
row.asset['auto_config'].ansible_enabled &&
|
||||||
row.asset['auto_config'].ping_enabled,
|
row.asset['auto_config'].ping_enabled,
|
||||||
callback: ({ row }) => {
|
callback: ({ row }) => {
|
||||||
vm.$axios
|
vm.$axios.post(
|
||||||
.post(`/api/v1/accounts/accounts/tasks/`, { action: 'verify', accounts: [row.id] })
|
`/api/v1/accounts/accounts/tasks/`,
|
||||||
.then(res => {
|
{ action: 'verify', accounts: [row.id] }
|
||||||
openTaskPage(res['task'])
|
).then(res => {
|
||||||
})
|
openTaskPage(res['task'])
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'ClearSecret',
|
name: 'ClearSecret',
|
||||||
title: vm.$t('ClearSecret'),
|
title: vm.$t('ClearSecret'),
|
||||||
can: ({ row }) => {
|
can: ({ row }) => {
|
||||||
return vm.$hasPerm('accounts.change_account') && !isDirectoryServiceAccount(row, vm)
|
return vm.$hasPerm('accounts.change_account') &&
|
||||||
|
!isDirectoryServiceAccount(row, vm)
|
||||||
},
|
},
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
callback: ({ row }) => {
|
callback: ({ row }) => {
|
||||||
vm.$axios
|
vm.$axios.patch(
|
||||||
.patch(`/api/v1/accounts/accounts/clear-secret/`, { account_ids: [row.id] })
|
`/api/v1/accounts/accounts/clear-secret/`,
|
||||||
.then(() => {
|
{ account_ids: [row.id] }
|
||||||
vm.$message.success(vm.$tc('ClearSuccessMsg'))
|
).then(() => {
|
||||||
})
|
vm.$message.success(vm.$tc('ClearSuccessMsg'))
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -187,11 +184,9 @@ export const accountOtherActions = vm => {
|
|||||||
type: 'primary',
|
type: 'primary',
|
||||||
divided: true,
|
divided: true,
|
||||||
can: ({ row }) => {
|
can: ({ row }) => {
|
||||||
return (
|
return vm.$hasPerm('accounts.add_account') &&
|
||||||
vm.$hasPerm('accounts.add_account') &&
|
|
||||||
!vm.$store.getters.currentOrgIsRoot &&
|
!vm.$store.getters.currentOrgIsRoot &&
|
||||||
!isDirectoryServiceAccount(row, vm)
|
!isDirectoryServiceAccount(row, vm)
|
||||||
)
|
|
||||||
},
|
},
|
||||||
has: () => {
|
has: () => {
|
||||||
return !vm.asset
|
return !vm.asset
|
||||||
@@ -209,11 +204,9 @@ export const accountOtherActions = vm => {
|
|||||||
title: vm.$t('MoveToAsset'),
|
title: vm.$t('MoveToAsset'),
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
can: ({ row }) => {
|
can: ({ row }) => {
|
||||||
return (
|
return vm.$hasPerm('accounts.add_account') &&
|
||||||
vm.$hasPerm('accounts.delete_account') &&
|
|
||||||
!vm.$store.getters.currentOrgIsRoot &&
|
!vm.$store.getters.currentOrgIsRoot &&
|
||||||
!isDirectoryServiceAccount(row, vm)
|
!isDirectoryServiceAccount(row, vm)
|
||||||
)
|
|
||||||
},
|
},
|
||||||
has: () => {
|
has: () => {
|
||||||
return !vm.asset
|
return !vm.asset
|
||||||
@@ -229,7 +222,7 @@ export const accountOtherActions = vm => {
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
export const accountQuickFilters = vm => [
|
export const accountQuickFilters = (vm) => [
|
||||||
{
|
{
|
||||||
label: vm.$t('Recent (7 days)'),
|
label: vm.$t('Recent (7 days)'),
|
||||||
options: [
|
options: [
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import TreeTable from '../../Table/TreeTable/index.vue'
|
import TreeTable from '../../Table/TreeTable/index.vue'
|
||||||
import { getShowCurrentAssetValue, setRouterQuery, setUrlParam } from '@/utils/common/index'
|
import { setRouterQuery, setUrlParam } from '@/utils/common'
|
||||||
import $ from '@/utils/jquery-vendor'
|
import $ from '@/utils/jquery-vendor'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -160,7 +160,7 @@ export default {
|
|||||||
return str
|
return str
|
||||||
},
|
},
|
||||||
decorateRMenu() {
|
decorateRMenu() {
|
||||||
const show_current_asset = getShowCurrentAssetValue(this.$cookie)
|
const show_current_asset = this.$cookie.get('show_current_asset') || '0'
|
||||||
if (show_current_asset === '1') {
|
if (show_current_asset === '1') {
|
||||||
$('#m_show_asset_all_children_node').css('color', '#606266')
|
$('#m_show_asset_all_children_node').css('color', '#606266')
|
||||||
$('#m_show_asset_only_current_node').css('color', 'green')
|
$('#m_show_asset_only_current_node').css('color', 'green')
|
||||||
@@ -172,7 +172,6 @@ export default {
|
|||||||
|
|
||||||
getAssetsUrl(treeNode) {
|
getAssetsUrl(treeNode) {
|
||||||
let url = this.treeSetting?.url || this.url
|
let url = this.treeSetting?.url || this.url
|
||||||
const showCurrentAsset = getShowCurrentAssetValue(this.$cookie)
|
|
||||||
|
|
||||||
const setParam = (param, value, delay) => {
|
const setParam = (param, value, delay) => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -184,12 +183,10 @@ export default {
|
|||||||
const nodeId = treeNode.meta.data.id
|
const nodeId = treeNode.meta.data.id
|
||||||
setParam('node_id', nodeId)
|
setParam('node_id', nodeId)
|
||||||
setParam('asset_id', '')
|
setParam('asset_id', '')
|
||||||
setParam('show_current_asset', showCurrentAsset)
|
|
||||||
} else if (treeNode.meta.type === 'asset') {
|
} else if (treeNode.meta.type === 'asset') {
|
||||||
const assetId = treeNode.meta.data?.id || treeNode.id
|
const assetId = treeNode.meta.data?.id || treeNode.id
|
||||||
setParam('node_id', '')
|
setParam('node_id', '')
|
||||||
setParam('asset_id', assetId)
|
setParam('asset_id', assetId)
|
||||||
setParam('show_current_asset', showCurrentAsset)
|
|
||||||
} else if (treeNode.meta.type === 'category') {
|
} else if (treeNode.meta.type === 'category') {
|
||||||
setParam('category', treeNode.meta.category)
|
setParam('category', treeNode.meta.category)
|
||||||
} else if (treeNode.meta.type === 'type') {
|
} else if (treeNode.meta.type === 'type') {
|
||||||
|
|||||||
@@ -77,9 +77,9 @@
|
|||||||
<script>
|
<script>
|
||||||
import MessageText from './MessageText.vue'
|
import MessageText from './MessageText.vue'
|
||||||
import { mapGetters, mapState } from 'vuex'
|
import { mapGetters, mapState } from 'vuex'
|
||||||
import { copy } from '@/utils/common/index'
|
import { copy } from '@/utils/common'
|
||||||
import { useChat } from '../../useChat.js'
|
import { useChat } from '../../useChat.js'
|
||||||
import { reconnect } from '@/utils/request'
|
import { reconnect } from '@/utils/socket'
|
||||||
|
|
||||||
const { setLoading, removeLoadingMessageInChat } = useChat()
|
const { setLoading, removeLoadingMessageInChat } = useChat()
|
||||||
|
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ import mdKatex from '@traptitech/markdown-it-katex'
|
|||||||
import mila from 'markdown-it-link-attributes'
|
import mila from 'markdown-it-link-attributes'
|
||||||
import hljs from 'highlight.js'
|
import hljs from 'highlight.js'
|
||||||
import 'highlight.js/styles/atom-one-dark.css'
|
import 'highlight.js/styles/atom-one-dark.css'
|
||||||
import { copy } from '@/utils/common/index'
|
import { copy } from '@/utils/common'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
@@ -69,7 +69,7 @@ export default {
|
|||||||
return vm.highlightBlock(hljs.highlightAuto(code).value, '')
|
return vm.highlightBlock(hljs.highlightAuto(code).value, '')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.markdown.use(mila, { attrs: { target: '_blank', rel: 'noopener', class: 'link-style' } })
|
this.markdown.use(mila, { attrs: { target: '_blank', rel: 'noopener', class: 'link-style' }})
|
||||||
this.markdown.use(mdKatex, { blockClass: 'katexmath-block rounded-md', errorColor: ' #cc0000' })
|
this.markdown.use(mdKatex, { blockClass: 'katexmath-block rounded-md', errorColor: ' #cc0000' })
|
||||||
},
|
},
|
||||||
highlightBlock(str, lang) {
|
highlightBlock(str, lang) {
|
||||||
|
|||||||
@@ -37,7 +37,7 @@
|
|||||||
import ChatInput from './ChatInput.vue'
|
import ChatInput from './ChatInput.vue'
|
||||||
import ChatMessage from './ChatMessage.vue'
|
import ChatMessage from './ChatMessage.vue'
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
import { closeWebSocket, createWebSocket, onSend, ws } from '@/utils/request'
|
import { closeWebSocket, createWebSocket, onSend, ws } from '@/utils/socket'
|
||||||
import { getInputFocus, useChat } from '../../useChat.js'
|
import { getInputFocus, useChat } from '../../useChat.js'
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
|||||||
@@ -13,8 +13,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { BASE_URL } from '@/utils/common/index'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
active: {
|
active: {
|
||||||
@@ -43,16 +41,6 @@ export default {
|
|||||||
},
|
},
|
||||||
handleExpand() {
|
handleExpand() {
|
||||||
this.$emit('expand-full')
|
this.$emit('expand-full')
|
||||||
},
|
|
||||||
async openWebsite() {
|
|
||||||
let url = `${BASE_URL}/?_=${Date.now()}`
|
|
||||||
if (process.env.NODE_ENV !== 'production') {
|
|
||||||
url = url.replace('9528', '5173')
|
|
||||||
}
|
|
||||||
|
|
||||||
const newUrl = new URL(url)
|
|
||||||
window.open(newUrl.toString(), '_blank')
|
|
||||||
return url
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<DrawerPanel
|
<DrawerPanel
|
||||||
v-if="visible"
|
|
||||||
ref="drawer"
|
ref="drawer"
|
||||||
:default-show-panel="!!defaultShowPanel"
|
:default-show-panel="!!defaultShowPanel"
|
||||||
:expanded="expanded"
|
:expanded="expanded"
|
||||||
@@ -46,10 +45,9 @@
|
|||||||
import Sidebar from './components/Sidebar/index.vue'
|
import Sidebar from './components/Sidebar/index.vue'
|
||||||
import Chat from './components/ChitChat/index.vue'
|
import Chat from './components/ChitChat/index.vue'
|
||||||
import { getInputFocus } from './useChat.js'
|
import { getInputFocus } from './useChat.js'
|
||||||
import { ws } from '@/utils/request'
|
import { ws } from '@/utils/socket'
|
||||||
import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
|
import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
|
||||||
import { ObjectLocalStorage } from '@/utils/common'
|
import { ObjectLocalStorage } from '@/utils/common'
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
|
|
||||||
const aiPannelLocalStorage = new ObjectLocalStorage('ai_panel_settings')
|
const aiPannelLocalStorage = new ObjectLocalStorage('ai_panel_settings')
|
||||||
export default {
|
export default {
|
||||||
@@ -76,7 +74,6 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
visible: false,
|
|
||||||
active: 'chat',
|
active: 'chat',
|
||||||
robotUrl: require('@/assets/img/robot-assistant.png'),
|
robotUrl: require('@/assets/img/robot-assistant.png'),
|
||||||
height: '400px',
|
height: '400px',
|
||||||
@@ -85,44 +82,14 @@ export default {
|
|||||||
currentTerminalContent: {}
|
currentTerminalContent: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
...mapGetters([
|
|
||||||
'publicSettings'
|
|
||||||
])
|
|
||||||
},
|
|
||||||
watch: {
|
watch: {
|
||||||
'publicSettings.CHAT_AI_METHOD': {
|
|
||||||
handler(newVal) {
|
|
||||||
this.visible = newVal === 'api'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.handleStartChat()
|
const expanded = aiPannelLocalStorage.get('expanded')
|
||||||
|
this.updateExpandedState(expanded)
|
||||||
|
this.handlePostMessage()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleStartChat() {
|
|
||||||
if (this.publicSettings.CHAT_AI_METHOD === 'api') {
|
|
||||||
this.visible = true
|
|
||||||
const expanded = aiPannelLocalStorage.get('expanded')
|
|
||||||
this.updateExpandedState(expanded)
|
|
||||||
this.handlePostMessage()
|
|
||||||
} else if (this.publicSettings.CHAT_AI_METHOD === 'embed') {
|
|
||||||
const embedScriptId = 'chat-ai-embed-id'
|
|
||||||
if (document.getElementById(embedScriptId)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const script = document.createElement('script')
|
|
||||||
script.id = embedScriptId
|
|
||||||
script.src = this.publicSettings.CHAT_AI_EMBED_URL
|
|
||||||
script.async = true
|
|
||||||
script.onload = () => {
|
|
||||||
const loadEvent = new Event('load', { bubbles: false, cancelable: false })
|
|
||||||
window.dispatchEvent(loadEvent)
|
|
||||||
}
|
|
||||||
document.body.appendChild(script)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handlePostMessage() {
|
handlePostMessage() {
|
||||||
window.addEventListener('message', (event) => {
|
window.addEventListener('message', (event) => {
|
||||||
if (event.data === 'show-chat-panel') {
|
if (event.data === 'show-chat-panel') {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import store from '@/store'
|
import store from '@/store'
|
||||||
import { pageScroll } from '@/utils/common/index'
|
import { pageScroll } from '@/utils/common'
|
||||||
|
|
||||||
export const getInputFocus = () => {
|
export const getInputFocus = () => {
|
||||||
const dom = document.querySelector('.chat-input .el-textarea__inner')
|
const dom = document.querySelector('.chat-input .el-textarea__inner')
|
||||||
@@ -9,11 +9,11 @@ export const getInputFocus = () => {
|
|||||||
export function useChat() {
|
export function useChat() {
|
||||||
const chatStore = {}
|
const chatStore = {}
|
||||||
|
|
||||||
const setLoading = loading => {
|
const setLoading = (loading) => {
|
||||||
store.commit('chat/setLoading', loading)
|
store.commit('chat/setLoading', loading)
|
||||||
}
|
}
|
||||||
|
|
||||||
const onNewChat = name => {
|
const onNewChat = (name) => {
|
||||||
const data = {
|
const data = {
|
||||||
name: name || `new chat`,
|
name: name || `new chat`,
|
||||||
id: 1,
|
id: 1,
|
||||||
@@ -27,7 +27,7 @@ export function useChat() {
|
|||||||
store.commit('chat/clearChats')
|
store.commit('chat/clearChats')
|
||||||
}
|
}
|
||||||
|
|
||||||
const addMessageToActiveChat = chat => {
|
const addMessageToActiveChat = (chat) => {
|
||||||
store.commit('chat/addMessageToActiveChat', chat)
|
store.commit('chat/addMessageToActiveChat', chat)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -35,7 +35,7 @@ export function useChat() {
|
|||||||
store.commit('chat/removeLoadingMessageInChat')
|
store.commit('chat/removeLoadingMessageInChat')
|
||||||
}
|
}
|
||||||
|
|
||||||
const addChatMessageById = chat => {
|
const addChatMessageById = (chat) => {
|
||||||
store.commit('chat/addMessageToActiveChat', chat)
|
store.commit('chat/addMessageToActiveChat', chat)
|
||||||
if (chat?.conversation_id) {
|
if (chat?.conversation_id) {
|
||||||
store.commit('chat/setActiveChatConversationId', chat.conversation_id)
|
store.commit('chat/setActiveChatConversationId', chat.conversation_id)
|
||||||
@@ -54,7 +54,7 @@ export function useChat() {
|
|||||||
addChatMessageById(temporaryChat)
|
addChatMessageById(temporaryChat)
|
||||||
}
|
}
|
||||||
|
|
||||||
const newChatAndAddMessageById = chat => {
|
const newChatAndAddMessageById = (chat) => {
|
||||||
onNewChat(chat.message.content)
|
onNewChat(chat.message.content)
|
||||||
addChatMessageById(chat)
|
addChatMessageById(chat)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -34,7 +34,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Dialog from '@/components/Dialog/index.vue'
|
import Dialog from '@/components/Dialog/index.vue'
|
||||||
import { openTaskPage } from '@/utils/jms/index'
|
import { openTaskPage } from '@/utils/jms'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'GatewayDialog',
|
name: 'GatewayDialog',
|
||||||
|
|||||||
@@ -85,7 +85,7 @@ export default {
|
|||||||
hasTree: true,
|
hasTree: true,
|
||||||
columnsExtra: ['view_account'],
|
columnsExtra: ['view_account'],
|
||||||
columnsExclude: ['spec_info'],
|
columnsExclude: ['spec_info'],
|
||||||
columns: ['id', 'name', 'address', 'comment', 'labels', 'connectivity', 'platform', 'view_account', 'actions'],
|
columns: ['id', 'name', 'address', 'platform', 'view_account', 'actions'],
|
||||||
columnsShow: {
|
columnsShow: {
|
||||||
min: ['name', 'address', 'accounts'],
|
min: ['name', 'address', 'accounts'],
|
||||||
default: ['name', 'address', 'platform', 'view_account', 'actions']
|
default: ['name', 'address', 'platform', 'view_account', 'actions']
|
||||||
@@ -109,6 +109,11 @@ export default {
|
|||||||
},
|
},
|
||||||
connectivity: connectivityMeta,
|
connectivity: connectivityMeta,
|
||||||
comment: { ...this.comment }
|
comment: { ...this.comment }
|
||||||
|
},
|
||||||
|
tableAttrs: {
|
||||||
|
rowClassName({ row }) {
|
||||||
|
return !row.is_active ? 'row_disabled' : ''
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
headerActions: {
|
headerActions: {
|
||||||
|
|||||||
@@ -37,12 +37,8 @@ export default {
|
|||||||
|
|
||||||
},
|
},
|
||||||
headerActions: {
|
headerActions: {
|
||||||
hasExport: true,
|
hasExport: false,
|
||||||
hasImport: true,
|
hasImport: false,
|
||||||
importOptions: {
|
|
||||||
encryptFields: [''], // 这里不加密 password,''只是为了保证数组有值
|
|
||||||
canImportUpdate: false
|
|
||||||
},
|
|
||||||
hasCreate: true,
|
hasCreate: true,
|
||||||
hasSearch: true,
|
hasSearch: true,
|
||||||
hasRefresh: true,
|
hasRefresh: true,
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { DrawerListTable as ListTable } from '@/components'
|
import { DrawerListTable as ListTable } from '@/components'
|
||||||
import { toM2MJsonParams } from '@/utils/jms/index'
|
import { toM2MJsonParams } from '@/utils/jms'
|
||||||
import { DetailFormatter } from '@/components/Table/TableFormatters'
|
import { DetailFormatter } from '@/components/Table/TableFormatters'
|
||||||
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
|
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
|
||||||
|
|
||||||
@@ -25,7 +25,6 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
const [key, value] = toM2MJsonParams(this.object.assets)
|
const [key, value] = toM2MJsonParams(this.object.assets)
|
||||||
const org_id = this.object.org_id || this.$store.getters.currentOrg.id
|
|
||||||
return {
|
return {
|
||||||
config: {
|
config: {
|
||||||
headerActions: {
|
headerActions: {
|
||||||
@@ -34,7 +33,7 @@ export default {
|
|||||||
hasExport: false
|
hasExport: false
|
||||||
},
|
},
|
||||||
tableConfig: {
|
tableConfig: {
|
||||||
url: `/api/v1/assets/assets/?${key}=${value}&oid=${org_id}`,
|
url: `/api/v1/assets/assets/?${key}=${value}`,
|
||||||
columns: ['name', 'address', 'platform', 'type', 'is_active'],
|
columns: ['name', 'address', 'platform', 'type', 'is_active'],
|
||||||
columnsShow: {
|
columnsShow: {
|
||||||
min: ['name', 'address'],
|
min: ['name', 'address'],
|
||||||
@@ -46,7 +45,7 @@ export default {
|
|||||||
formatter: DetailFormatter,
|
formatter: DetailFormatter,
|
||||||
formatterArgs: {
|
formatterArgs: {
|
||||||
getRoute: ({ row }) => {
|
getRoute: ({ row }) => {
|
||||||
return { name: 'AssetDetail', params: { id: row.id } }
|
return { name: 'AssetDetail', params: { id: row.id }}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { DrawerListTable as ListTable } from '@/components'
|
import { DrawerListTable as ListTable } from '@/components'
|
||||||
import { toM2MJsonParams } from '@/utils/jms/index'
|
import { toM2MJsonParams } from '@/utils/jms'
|
||||||
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
|
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
|
||||||
import { DetailFormatter } from '@/components/Table/TableFormatters'
|
import { DetailFormatter } from '@/components/Table/TableFormatters'
|
||||||
|
|
||||||
@@ -25,7 +25,6 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
const [key, value] = toM2MJsonParams(this.object.users)
|
const [key, value] = toM2MJsonParams(this.object.users)
|
||||||
const org_id = this.object.org_id || this.$store.getters.currentOrg.id
|
|
||||||
return {
|
return {
|
||||||
config: {
|
config: {
|
||||||
headerActions: {
|
headerActions: {
|
||||||
@@ -34,7 +33,7 @@ export default {
|
|||||||
hasExport: false
|
hasExport: false
|
||||||
},
|
},
|
||||||
tableConfig: {
|
tableConfig: {
|
||||||
url: `/api/v1/users/users/?${key}=${value}&oid=${org_id}`,
|
url: `/api/v1/users/users/?${key}=${value}`,
|
||||||
columns: [
|
columns: [
|
||||||
'name', 'username', 'email', 'groups', 'system_roles',
|
'name', 'username', 'email', 'groups', 'system_roles',
|
||||||
'org_roles', 'source', 'is_valid'
|
'org_roles', 'source', 'is_valid'
|
||||||
|
|||||||
@@ -30,8 +30,8 @@
|
|||||||
<script>
|
<script>
|
||||||
import IBox from '@/components/Common/IBox/index.vue'
|
import IBox from '@/components/Common/IBox/index.vue'
|
||||||
import DiffDetail from '@/components/Dialog/DiffDetail.vue'
|
import DiffDetail from '@/components/Dialog/DiffDetail.vue'
|
||||||
import { openTaskPage } from '@/utils/jms/index'
|
import { openTaskPage } from '@/utils/jms'
|
||||||
import { toSafeLocalDateStr } from '@/utils/common/time'
|
import { toSafeLocalDateStr } from '@/utils/time'
|
||||||
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
|
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|||||||
@@ -8,17 +8,22 @@
|
|||||||
:visible.sync="visible"
|
:visible.sync="visible"
|
||||||
class="dialog-content"
|
class="dialog-content"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
width="600px"
|
width="740px"
|
||||||
@confirm="visible = false"
|
@confirm="visible = false"
|
||||||
v-on="$listeners"
|
v-on="$listeners"
|
||||||
>
|
>
|
||||||
<div v-if="confirmTypeRequired === 'relogin'">
|
<div v-if="confirmTypeRequired === 'relogin'">
|
||||||
<el-row :gutter="24" style="margin: 0 auto">
|
<el-row :gutter="24" style="margin: 0 auto;">
|
||||||
<el-col :md="24" :sm="24">
|
<el-col :md="24" :sm="24">
|
||||||
<el-alert :title="$tc('ReLoginTitle')" center style="margin-bottom: 20px" type="error" />
|
<el-alert
|
||||||
|
:title="$tc('ReLoginTitle')"
|
||||||
|
center
|
||||||
|
style="margin-bottom: 20px;"
|
||||||
|
type="error"
|
||||||
|
/>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="24" style="margin: 0 auto">
|
<el-row :gutter="24" style="margin: 0 auto;">
|
||||||
<el-col :md="24" :sm="24">
|
<el-col :md="24" :sm="24">
|
||||||
<el-button class="confirm-btn" size="mini" type="primary" @click="logout">
|
<el-button class="confirm-btn" size="mini" type="primary" @click="logout">
|
||||||
{{ this.$t('ReLogin') }}
|
{{ this.$t('ReLogin') }}
|
||||||
@@ -27,11 +32,11 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<el-row :gutter="24" style="margin: 0 auto">
|
<el-row :gutter="24" style="margin: 0 auto;">
|
||||||
<el-col :md="24" :sm="24" :span="24" class="add">
|
<el-col :md="24" :sm="24" :span="24" class="add">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="subTypeSelected"
|
v-model="subTypeSelected"
|
||||||
style="width: 100%; margin-bottom: 20px"
|
style="width: 100%; margin-bottom: 20px;"
|
||||||
@change="handleSubTypeChange"
|
@change="handleSubTypeChange"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
@@ -44,22 +49,19 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row v-if="!noCodeMFA.includes(subTypeSelected)" :gutter="24" style="margin: 0 auto">
|
<el-row v-if="!noCodeMFA.includes(subTypeSelected)" :gutter="24" style="margin: 0 auto;">
|
||||||
<el-col :md="24" :sm="24" style="display: flex; align-items: center">
|
<el-col :md="24" :sm="24" style="display: flex; align-items: center; ">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="secretValue"
|
v-model="secretValue"
|
||||||
:placeholder="inputPlaceholder"
|
:placeholder="inputPlaceholder"
|
||||||
:show-password="showPassword"
|
:show-password="showPassword"
|
||||||
@keyup.enter.native="handleConfirm"
|
@keyup.enter.native="handleConfirm"
|
||||||
/>
|
/>
|
||||||
<span
|
<span v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'" style="margin: -1px 0 0 20px;">
|
||||||
v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'"
|
|
||||||
style="margin: -1px 0 0 20px"
|
|
||||||
>
|
|
||||||
<el-button
|
<el-button
|
||||||
:disabled="smsBtnDisabled"
|
:disabled="smsBtnDisabled"
|
||||||
size="mini"
|
size="mini"
|
||||||
style="line-height: 14px; float: right"
|
style="line-height: 14px; float: right;"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="sendCode"
|
@click="sendCode"
|
||||||
>
|
>
|
||||||
@@ -70,17 +72,21 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col>
|
<el-col>
|
||||||
<iframe v-if="passkeyVisible" :src="passkeyUrl" style="display: none" />
|
|
||||||
<iframe
|
<iframe
|
||||||
v-if="isFaceCaptureVisible && subTypeSelected === 'face' && faceCaptureUrl"
|
v-if="passkeyVisible"
|
||||||
|
:src="passkeyUrl"
|
||||||
|
style="display: none"
|
||||||
|
/>
|
||||||
|
<iframe
|
||||||
|
v-if="isFaceCaptureVisible && subTypeSelected ==='face' && faceCaptureUrl"
|
||||||
:src="faceCaptureUrl"
|
:src="faceCaptureUrl"
|
||||||
allow="camera"
|
allow="camera"
|
||||||
sandbox="allow-scripts allow-same-origin"
|
sandbox="allow-scripts allow-same-origin"
|
||||||
style="width: 100%; height: 600px; border: none"
|
style="width: 100%; height: 600px;border: none;"
|
||||||
/>
|
/>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="24" style="margin: 20px auto 10px">
|
<el-row :gutter="24" style="margin: 20px auto 10px;">
|
||||||
<el-col :md="24" :sm="24">
|
<el-col :md="24" :sm="24">
|
||||||
<el-button
|
<el-button
|
||||||
v-if="!noCodeMFA.includes(subTypeSelected)"
|
v-if="!noCodeMFA.includes(subTypeSelected)"
|
||||||
@@ -118,7 +124,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Dialog from '@/components/Dialog/index.vue'
|
import Dialog from '@/components/Dialog/index.vue'
|
||||||
import { encryptPassword } from '@/utils/secure'
|
import { encryptPassword } from '@/utils/crypto'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'UserConfirmDialog',
|
name: 'UserConfirmDialog',
|
||||||
@@ -189,65 +195,55 @@ export default {
|
|||||||
this.$log.debug('perform confirm action')
|
this.$log.debug('perform confirm action')
|
||||||
const confirmType = response.data?.code
|
const confirmType = response.data?.code
|
||||||
const confirmUrl = '/api/v1/authentication/confirm/'
|
const confirmUrl = '/api/v1/authentication/confirm/'
|
||||||
this.$axios
|
this.$axios.get(confirmUrl, { params: { confirm_type: confirmType }}).then((data) => {
|
||||||
.get(confirmUrl, { params: { confirm_type: confirmType } })
|
this.confirmTypeRequired = data.confirm_type
|
||||||
.then(data => {
|
|
||||||
this.confirmTypeRequired = data.confirm_type
|
|
||||||
|
|
||||||
if (this.confirmTypeRequired === 'relogin') {
|
if (this.confirmTypeRequired === 'relogin') {
|
||||||
this.$axios
|
this.$axios.post(confirmUrl, { 'confirm_type': 'relogin', 'secret_key': 'x' }).then(() => {
|
||||||
.post(confirmUrl, { confirm_type: 'relogin', secret_key: 'x' })
|
this.callback()
|
||||||
.then(() => {
|
this.visible = false
|
||||||
this.callback()
|
}).catch(() => {
|
||||||
this.visible = false
|
this.title = this.$t('NeedReLogin')
|
||||||
})
|
this.visible = true
|
||||||
.catch(() => {
|
})
|
||||||
this.title = this.$t('NeedReLogin')
|
return
|
||||||
this.visible = true
|
}
|
||||||
})
|
this.subTypeChoices = data.content
|
||||||
return
|
const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0]
|
||||||
}
|
this.subTypeSelected = defaultSubType.name
|
||||||
this.subTypeChoices = data.content
|
this.inputPlaceholder = defaultSubType.placeholder
|
||||||
const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0]
|
this.visible = true
|
||||||
this.subTypeSelected = defaultSubType.name
|
}).catch((err) => {
|
||||||
this.inputPlaceholder = defaultSubType.placeholder
|
const data = err.response?.data
|
||||||
this.visible = true
|
const msg = data?.error || data?.detail || data?.msg || this.$t('GetConfirmTypeFailed')
|
||||||
})
|
this.$message.error(msg)
|
||||||
.catch(err => {
|
this.cancel(err)
|
||||||
const data = err.response?.data
|
}).finally(() => {
|
||||||
const msg = data?.error || data?.detail || data?.msg || this.$t('GetConfirmTypeFailed')
|
this.processing = false
|
||||||
this.$message.error(msg)
|
})
|
||||||
this.cancel(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
this.processing = false
|
|
||||||
})
|
|
||||||
}, 500),
|
}, 500),
|
||||||
logout() {
|
logout() {
|
||||||
window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`
|
window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`
|
||||||
},
|
},
|
||||||
sendCode() {
|
sendCode() {
|
||||||
this.$axios
|
this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: this.subTypeSelected }).then(res => {
|
||||||
.post(`/api/v1/authentication/mfa/select/`, { type: this.subTypeSelected })
|
this.$message.success(this.$tc('VerificationCodeSent'))
|
||||||
.then(res => {
|
let time = 60
|
||||||
this.$message.success(this.$tc('VerificationCodeSent'))
|
this.smsBtnDisabled = true
|
||||||
let time = 60
|
|
||||||
this.smsBtnDisabled = true
|
|
||||||
|
|
||||||
const interval = setInterval(() => {
|
const interval = setInterval(() => {
|
||||||
time -= 1
|
time -= 1
|
||||||
this.smsBtnText = `${this.$t('Pending')}: ${time}`
|
this.smsBtnText = `${this.$t('Pending')}: ${time}`
|
||||||
|
|
||||||
if (time <= 0) {
|
if (time <= 0) {
|
||||||
clearInterval(interval)
|
clearInterval(interval)
|
||||||
this.smsBtnText = this.$t('SendVerificationCode')
|
this.smsBtnText = this.$t('SendVerificationCode')
|
||||||
this.smsBtnDisabled = false
|
this.smsBtnDisabled = false
|
||||||
}
|
}
|
||||||
}, 1000)
|
}, 1000)
|
||||||
})
|
}).catch(() => {
|
||||||
.catch(() => {
|
this.$message.error(this.$tc('FailedToSendVerificationCode'))
|
||||||
this.$message.error(this.$tc('FailedToSendVerificationCode'))
|
})
|
||||||
})
|
|
||||||
},
|
},
|
||||||
handlePasskeyVerify() {
|
handlePasskeyVerify() {
|
||||||
this.passkeyVisible = true
|
this.passkeyVisible = true
|
||||||
@@ -271,26 +267,23 @@ export default {
|
|||||||
},
|
},
|
||||||
startFaceCapture() {
|
startFaceCapture() {
|
||||||
const url = '/api/v1/authentication/face/context/'
|
const url = '/api/v1/authentication/face/context/'
|
||||||
this.$axios
|
this.$axios.post(url).then(data => {
|
||||||
.post(url)
|
const token = data['token']
|
||||||
.then(data => {
|
this.faceCaptureUrl = '/facelive/capture?token=' + token
|
||||||
const token = data['token']
|
this.isFaceCaptureVisible = true
|
||||||
this.faceCaptureUrl = '/facelive/capture?token=' + token
|
|
||||||
this.isFaceCaptureVisible = true
|
|
||||||
|
|
||||||
const timer = setInterval(() => {
|
const timer = setInterval(() => {
|
||||||
this.$axios.get(url + `?token=${token}`).then(data => {
|
this.$axios.get(url + `?token=${token}`).then(data => {
|
||||||
if (data['is_finished']) {
|
if (data['is_finished']) {
|
||||||
clearInterval(timer)
|
clearInterval(timer)
|
||||||
this.isFaceCaptureVisible = false
|
this.isFaceCaptureVisible = false
|
||||||
this.handleConfirm()
|
this.handleConfirm()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}, 1000)
|
}, 1000)
|
||||||
})
|
}).catch(() => {
|
||||||
.catch(() => {
|
this.$message.error(this.$tc('FailedToStartFaceCapture'))
|
||||||
this.$message.error(this.$tc('FailedToStartFaceCapture'))
|
})
|
||||||
})
|
|
||||||
},
|
},
|
||||||
handleFaceCapture() {
|
handleFaceCapture() {
|
||||||
this.startFaceCapture()
|
this.startFaceCapture()
|
||||||
@@ -313,22 +306,16 @@ export default {
|
|||||||
const data = {
|
const data = {
|
||||||
confirm_type: this.confirmTypeRequired,
|
confirm_type: this.confirmTypeRequired,
|
||||||
mfa_type: this.confirmTypeRequired === 'mfa' ? this.subTypeSelected : '',
|
mfa_type: this.confirmTypeRequired === 'mfa' ? this.subTypeSelected : '',
|
||||||
secret_key:
|
secret_key: this.confirmTypeRequired === 'password' ? encryptPassword(this.secretValue) : this.secretValue
|
||||||
this.confirmTypeRequired === 'password'
|
|
||||||
? encryptPassword(this.secretValue)
|
|
||||||
: this.secretValue
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$axios
|
this.$axios.post(`/api/v1/authentication/confirm/`, data).then(() => {
|
||||||
.post(`/api/v1/authentication/confirm/`, data)
|
this.onSuccess()
|
||||||
.then(() => {
|
}).catch((err) => {
|
||||||
this.onSuccess()
|
this.$message.error(err.message || this.$tc('ConfirmFailed'))
|
||||||
})
|
this.faceCaptureUrl = null
|
||||||
.catch(err => {
|
this.isFaceCaptureVisible = false
|
||||||
this.$message.error(err.message || this.$tc('ConfirmFailed'))
|
})
|
||||||
this.faceCaptureUrl = null
|
|
||||||
this.isFaceCaptureVisible = false
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,100 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Dialog
|
|
||||||
:show-cancel="false"
|
|
||||||
:show-confirm="false"
|
|
||||||
:title="title"
|
|
||||||
:visible.sync="iVisible"
|
|
||||||
class="help-dialog"
|
|
||||||
top="1vh"
|
|
||||||
width="50%"
|
|
||||||
>
|
|
||||||
<p>{{ variablesHelpText }}</p>
|
|
||||||
<table border="1" class="help-table">
|
|
||||||
<tr>
|
|
||||||
<th>{{ $tc('Variable') }}</th>
|
|
||||||
<th>{{ $tc('Description') }}</th>
|
|
||||||
<th>{{ $tc('Example') }}</th>
|
|
||||||
</tr>
|
|
||||||
<tr v-for="(item, index) in variables" :key="index">
|
|
||||||
<td :title="$tc('ClickCopy')" class="item-td text-link" @click="onCopy(item.name)">
|
|
||||||
<label class="item-label">{{ item.name }}</label>
|
|
||||||
</td>
|
|
||||||
<td><span>{{ item.label }}</span></td>
|
|
||||||
<td><span>{{ item.default }}</span></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Dialog from '@/components/Dialog/index.vue'
|
|
||||||
import { copy } from '@/utils/common/index'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
Dialog
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
visible: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
variables: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
variablesHelpText: {
|
|
||||||
type: String,
|
|
||||||
default() {
|
|
||||||
return this.$t('WatermarkVariableHelpText')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
title: this.$t('BuiltinVariable')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
iVisible: {
|
|
||||||
set(val) {
|
|
||||||
this.$emit('update:visible', val)
|
|
||||||
},
|
|
||||||
get() {
|
|
||||||
return this.visible
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onCopy(key) {
|
|
||||||
copy(key)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep .help-dialog.dialog .el-dialog__footer {
|
|
||||||
border-top: none;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
border: 1px solid #dee2e6;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .help-table th,
|
|
||||||
::v-deep .help-table td {
|
|
||||||
height: 40px;
|
|
||||||
padding: 0 8px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .help-table .item-td,
|
|
||||||
::v-deep .help-table .item-label {
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<script type="text/jsx">
|
<script type="text/jsx">
|
||||||
import { toSafeLocalDateStr } from '@/utils/common/time'
|
import { toSafeLocalDateStr } from '@/utils/time'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ItemValue',
|
name: 'ItemValue',
|
||||||
|
|||||||
@@ -12,8 +12,8 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import DetailCard from './index.vue'
|
import DetailCard from './index.vue'
|
||||||
import { copy } from '@/utils/common/index'
|
import { copy } from '@/utils/common'
|
||||||
import { toSafeLocalDateStr } from '@/utils/common/time'
|
import { toSafeLocalDateStr } from '@/utils/time'
|
||||||
import IBox from '@/components/Common/IBox/index.vue'
|
import IBox from '@/components/Common/IBox/index.vue'
|
||||||
import LabelsDetailFormatter from '../Formatters/LabelsDetailFormatter.vue'
|
import LabelsDetailFormatter from '../Formatters/LabelsDetailFormatter.vue'
|
||||||
|
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item">
|
<div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item">
|
||||||
<span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span>
|
<span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span>
|
||||||
<span class="item-value el-form-item__content">
|
<span class="item-value el-form-item__content">
|
||||||
<component
|
<template
|
||||||
:is="item.component"
|
:is="item.component"
|
||||||
v-if="item.component"
|
v-if="item.component"
|
||||||
v-bind="{...item}"
|
v-bind="{...item}"
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
v-if="action.dropdown"
|
v-if="action.dropdown"
|
||||||
v-show="action.dropdown.length > 0"
|
v-show="action.dropdown.length > 0"
|
||||||
:key="action.name"
|
:key="action.name"
|
||||||
:class="[action.name, { grouped: action.grouped, 'table-action-text': isTableActionText }]"
|
:class="[action.name, {grouped: action.grouped }]"
|
||||||
:size="action.size"
|
:size="action.size"
|
||||||
:split-button="!!action.split"
|
:split-button="!!action.split"
|
||||||
:type="action.type"
|
:type="action.type"
|
||||||
@@ -16,32 +16,29 @@
|
|||||||
@command="handleDropdownCallback"
|
@command="handleDropdownCallback"
|
||||||
>
|
>
|
||||||
<span v-if="action.split" :style="{ cursor: action.disabled ? 'not-allowed' : 'pointer' }">
|
<span v-if="action.split" :style="{ cursor: action.disabled ? 'not-allowed' : 'pointer' }">
|
||||||
<Icon v-if="isEllipsisAction(action)" class="ellipsis-icon" icon="fa-ellipsis-v" />
|
{{ action.title }}
|
||||||
<span v-else>{{ getActionTitle(action) }}</span>
|
|
||||||
</span>
|
</span>
|
||||||
<el-button
|
<el-button
|
||||||
v-else
|
v-else
|
||||||
:class="[action.name, { 'table-action-text': isTableActionText }]"
|
:class="action.name"
|
||||||
:size="size"
|
:size="size"
|
||||||
class="more-action"
|
class="more-action"
|
||||||
v-bind="{ ...cleanButtonAction(action), icon: '' }"
|
v-bind="{...cleanButtonAction(action), icon: ''}"
|
||||||
>
|
>
|
||||||
<span class="pre-icon">
|
<span class="pre-icon">
|
||||||
<Icon v-if="action.icon" :icon="action.icon" />
|
<Icon v-if="action.icon" :icon="action.icon" />
|
||||||
</span>
|
</span>
|
||||||
<span v-if="action.title">
|
<span v-if="action.title">
|
||||||
<Icon v-if="isEllipsisAction(action)" class="ellipsis-icon" icon="fa-ellipsis-v" />
|
{{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
|
||||||
<span v-else>{{ getActionTitle(action) }}</span>
|
|
||||||
<i class="el-icon-arrow-down el-icon--right" />
|
|
||||||
</span>
|
</span>
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-dropdown-menu slot="dropdown" style="overflow: auto; max-height: 60vh">
|
<el-dropdown-menu slot="dropdown" style="overflow: auto;max-height: 60vh">
|
||||||
<template v-for="option in action.dropdown">
|
<template v-for="option in action.dropdown">
|
||||||
<div
|
<div
|
||||||
v-if="option.group"
|
v-if="option.group"
|
||||||
:key="'group:' + option.name"
|
:key="'group:'+option.name"
|
||||||
class="dropdown-menu-title"
|
class="dropdown-menu-title"
|
||||||
style="width: 130px"
|
style="width:130px"
|
||||||
>
|
>
|
||||||
{{ option.group }}
|
{{ option.group }}
|
||||||
</div>
|
</div>
|
||||||
@@ -57,7 +54,7 @@
|
|||||||
:command="[option, action]"
|
:command="[option, action]"
|
||||||
:title="option.tip"
|
:title="option.tip"
|
||||||
class="dropdown-item"
|
class="dropdown-item"
|
||||||
v-bind="{ ...option, icon: '' }"
|
v-bind="{...option, icon: ''}"
|
||||||
>
|
>
|
||||||
<span v-if="actionsHasIcon(action.dropdown)" class="pre-icon">
|
<span v-if="actionsHasIcon(action.dropdown)" class="pre-icon">
|
||||||
<Icon v-if="option.icon" :icon="option.icon" />
|
<Icon v-if="option.icon" :icon="option.icon" />
|
||||||
@@ -72,10 +69,10 @@
|
|||||||
<el-button
|
<el-button
|
||||||
v-else
|
v-else
|
||||||
:key="action.name"
|
:key="action.name"
|
||||||
:class="[action.name, { grouped: action.grouped, 'table-action-text': isTableActionText }]"
|
:class="[action.name, {grouped: action.grouped }]"
|
||||||
:size="size"
|
:size="size"
|
||||||
class="action-item"
|
class="action-item"
|
||||||
v-bind="{ ...cleanButtonAction(action), icon: '' }"
|
v-bind="{...cleanButtonAction(action), icon: ''}"
|
||||||
@click="handleClick(action)"
|
@click="handleClick(action)"
|
||||||
>
|
>
|
||||||
<el-tooltip :content="action.tip" :disabled="!action.tip" placement="top">
|
<el-tooltip :content="action.tip" :disabled="!action.tip" placement="top">
|
||||||
@@ -83,8 +80,7 @@
|
|||||||
<span v-if="action.icon" style="vertical-align: initial">
|
<span v-if="action.icon" style="vertical-align: initial">
|
||||||
<Icon :icon="action.icon" />
|
<Icon :icon="action.icon" />
|
||||||
</span>
|
</span>
|
||||||
<Icon v-if="isEllipsisAction(action)" class="ellipsis-icon" icon="fa-ellipsis-v" />
|
{{ action.title }}
|
||||||
<span v-else>{{ getActionTitle(action) }}</span>
|
|
||||||
</span>
|
</span>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</el-button>
|
</el-button>
|
||||||
@@ -93,7 +89,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { toSentenceCase } from '@/utils/common/index'
|
import { toSentenceCase } from '@/utils/common'
|
||||||
import Icon from '@/components/Widgets/Icon/index.vue'
|
import Icon from '@/components/Widgets/Icon/index.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -122,21 +118,9 @@ export default {
|
|||||||
computed: {
|
computed: {
|
||||||
iActions() {
|
iActions() {
|
||||||
return this.cleanActions(this.actions)
|
return this.cleanActions(this.actions)
|
||||||
},
|
|
||||||
tableActionButtonType() {
|
|
||||||
return this.$store?.state?.settings?.tableActionButtonType || 'default'
|
|
||||||
},
|
|
||||||
isTableActionText() {
|
|
||||||
return this.tableActionButtonType === 'text'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getActionTitle(action) {
|
|
||||||
return action?.title
|
|
||||||
},
|
|
||||||
isEllipsisAction(action) {
|
|
||||||
return this.isTableActionText && action?.title === '...'
|
|
||||||
},
|
|
||||||
actionsHasIcon(actions) {
|
actionsHasIcon(actions) {
|
||||||
return actions.some(action => action.icon)
|
return actions.some(action => action.icon)
|
||||||
},
|
},
|
||||||
@@ -244,10 +228,9 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
$btn-text-color: #ffffff;
|
$btn-text-color: #ffffff;
|
||||||
$color-btn-background: var(--color-primary-light-3, #e8f7f4);
|
$color-btn-background: #E8F7F4;
|
||||||
$color-btn-focus-background: var(--color-primary-light-1, var(--color-primary));
|
$color-btn-focus-background: #83CBBA;
|
||||||
$color-text-hover: var(--color-primary-light-1);
|
$color-divided: #E4E7ED;
|
||||||
$color-divided: #e4e7ed;
|
|
||||||
$color-drop-menu-title: #909399;
|
$color-drop-menu-title: #909399;
|
||||||
$color-drop-menu-border: #e4e7ed;
|
$color-drop-menu-border: #e4e7ed;
|
||||||
|
|
||||||
@@ -275,11 +258,9 @@ $color-drop-menu-border: #e4e7ed;
|
|||||||
.action-item.el-dropdown {
|
.action-item.el-dropdown {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
|
||||||
.more-action {
|
.more-action.el-button--default {
|
||||||
.el-button--default {
|
::v-deep .el-icon-arrow-down.el-icon--right {
|
||||||
::v-deep .el-icon-arrow-down.el-icon--right {
|
color: var(--color-icon-primary) !important;
|
||||||
color: var(--color-icon-primary) !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -303,8 +284,6 @@ $color-drop-menu-border: #e4e7ed;
|
|||||||
|
|
||||||
.el-button {
|
.el-button {
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
line-height: 1.3;
|
|
||||||
font-size: 13px;
|
|
||||||
|
|
||||||
&:not(.is-plain) {
|
&:not(.is-plain) {
|
||||||
color: $btn-text-color;
|
color: $btn-text-color;
|
||||||
@@ -335,29 +314,12 @@ $color-drop-menu-border: #e4e7ed;
|
|||||||
background-color: $color-btn-focus-background;
|
background-color: $color-btn-focus-background;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-item.table-action-text.el-button,
|
|
||||||
::v-deep .action-item.table-action-text.el-dropdown .el-button {
|
|
||||||
color: var(--color-primary) !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
border-color: transparent !important;
|
|
||||||
transition: color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-item.table-action-text.el-button:hover,
|
|
||||||
.action-item.table-action-text.el-button:focus,
|
|
||||||
::v-deep .action-item.table-action-text.el-dropdown .el-button:hover,
|
|
||||||
::v-deep .action-item.table-action-text.el-dropdown .el-button:focus {
|
|
||||||
color: $color-text-hover !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
border-color: transparent !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 下拉 options
|
// 下拉 options
|
||||||
.el-dropdown-menu {
|
.el-dropdown-menu {
|
||||||
::v-deep .more-batch-processing {
|
::v-deep .more-batch-processing {
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
import Switcher from '@/components/Form/FormFields/Switcher.vue'
|
import Switcher from '@/components/Form/FormFields/Switcher.vue'
|
||||||
import Select2 from '@/components/Form/FormFields/Select2.vue'
|
import Select2 from '@/components/Form/FormFields/Select2.vue'
|
||||||
import UpdateSelect from '@/components/Form/FormFields/UpdateSelect.vue'
|
import UpdateSelect from '@/components/Form/FormFields/UpdateSelect.vue'
|
||||||
import { toSentenceCase } from '@/utils/common/index'
|
import { toSentenceCase } from '@/utils/common'
|
||||||
|
|
||||||
class Action {
|
class Action {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="content">
|
||||||
<Echart
|
<echarts
|
||||||
ref="echarts"
|
ref="echarts"
|
||||||
:options="options"
|
:options="options"
|
||||||
:autoresize="true"
|
:autoresize="true"
|
||||||
@@ -12,10 +12,9 @@
|
|||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import { mix } from '@/utils/theme/color'
|
import { mix } from '@/utils/theme/color'
|
||||||
import Echart from '@/components/Dashboard/Echart.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { Echart },
|
components: {},
|
||||||
props: {
|
props: {
|
||||||
datesMetrics: {
|
datesMetrics: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
|||||||
@@ -1,71 +0,0 @@
|
|||||||
<template>
|
|
||||||
<echarts
|
|
||||||
:options="iOptions"
|
|
||||||
v-bind="$attrs"
|
|
||||||
@finished="onFinished"
|
|
||||||
v-on="$listeners"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import 'echarts'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
options: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
const urlParams = new URLSearchParams(window.location.search)
|
|
||||||
const isExport = urlParams.get('export') === 'true'
|
|
||||||
return {
|
|
||||||
isExport: isExport
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
iOptions() {
|
|
||||||
return {
|
|
||||||
...this.options,
|
|
||||||
animation: !this.isExport
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
if (!window._echarts) {
|
|
||||||
window._echarts = {
|
|
||||||
total: new Set(),
|
|
||||||
finished: new Set()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 唯一 id,避免重复计数
|
|
||||||
this._chartId = `chart_${Date.now()}_${Math.random().toString(36).slice(2)}`
|
|
||||||
window._echarts.total.add(this._chartId)
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (window._echarts) {
|
|
||||||
window._echarts.total.delete(this._chartId)
|
|
||||||
window._echarts.finished.delete(this._chartId)
|
|
||||||
// 可选:当没有图表时清理全局对象
|
|
||||||
if (window._echarts.total.size === 0) {
|
|
||||||
delete window._echarts
|
|
||||||
delete window.echartsFinished
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onFinished() {
|
|
||||||
if (!window._echarts) return
|
|
||||||
window._echarts.finished.add(this._chartId)
|
|
||||||
if (window._echarts.finished.size === window._echarts.total.size) {
|
|
||||||
window.echartsFinished = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
</style>
|
|
||||||
@@ -1,12 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Echart
|
<echarts
|
||||||
ref="echarts"
|
ref="echarts"
|
||||||
:options="options"
|
:options="options"
|
||||||
:autoresize="true"
|
:autoresize="true"
|
||||||
theme="light"
|
theme="light"
|
||||||
@finished="genSnapshot"
|
class="disabled-when-print"
|
||||||
|
@finished="getDataUrl"
|
||||||
/>
|
/>
|
||||||
|
<img v-if="dataUrl" :src="dataUrl" class="enabled-when-print" style="display: none;width: 100%;">
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -14,11 +16,9 @@
|
|||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import { mix } from '@/utils/theme/color'
|
import { mix } from '@/utils/theme/color'
|
||||||
import Echart from '@/components/Dashboard/Echart.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'LoginMetric',
|
name: 'LoginMetric',
|
||||||
components: { Echart },
|
|
||||||
props: {
|
props: {
|
||||||
range: {
|
range: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -110,6 +110,7 @@ export default {
|
|||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
|
// 坐标轴颜色
|
||||||
color: '#8F959E'
|
color: '#8F959E'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -154,7 +155,7 @@ export default {
|
|||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
smooth: true,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
// 区域填充样式
|
// 区域填充样式
|
||||||
normal: {
|
normal: {
|
||||||
color: new echarts.graphic.LinearGradient(
|
color: new echarts.graphic.LinearGradient(
|
||||||
0,
|
0,
|
||||||
@@ -186,7 +187,7 @@ export default {
|
|||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
smooth: true,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
// 区域填充样式
|
// 区域填充样式
|
||||||
normal: {
|
normal: {
|
||||||
color: new echarts.graphic.LinearGradient(
|
color: new echarts.graphic.LinearGradient(
|
||||||
0,
|
0,
|
||||||
@@ -219,58 +220,23 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
range() {
|
range() {
|
||||||
this.genSnapshot()
|
this.getMetricData()
|
||||||
},
|
|
||||||
datesMetrics() {
|
|
||||||
this.genSnapshot()
|
|
||||||
},
|
|
||||||
primaryData() {
|
|
||||||
this.genSnapshot()
|
|
||||||
},
|
|
||||||
secondaryData() {
|
|
||||||
this.genSnapshot()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.genSnapshot()
|
this.getMetricData()
|
||||||
this._before = () => this.genSnapshot(true)
|
|
||||||
this._after = () => this.forceResize()
|
|
||||||
window.addEventListener('beforeprint', this._before)
|
|
||||||
window.addEventListener('afterprint', this._after)
|
|
||||||
// 兼容某些浏览器(Safari)触发 print 媒体切换
|
|
||||||
this._mql = window.matchMedia && window.matchMedia('print')
|
|
||||||
if (this._mql) {
|
|
||||||
const handler = e => (e.matches ? this._before() : this._after())
|
|
||||||
this._mql.addEventListener?.('change', handler)
|
|
||||||
this._mql.addListener?.(handler)
|
|
||||||
this._mql._handler = handler
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
window.removeEventListener('beforeprint', this._before)
|
|
||||||
window.removeEventListener('afterprint', this._after)
|
|
||||||
if (this._mql) {
|
|
||||||
this._mql.removeEventListener?.('change', this._mql._handler)
|
|
||||||
this._mql.removeListener?.(this._mql._handler)
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
forceResize() {
|
getDataUrl() {
|
||||||
const inst = this.$refs.echarts?.echartsInstance
|
const instance = this.$refs.echarts.echartsInstance
|
||||||
if (inst) inst.resize()
|
if (instance) {
|
||||||
},
|
this.dataUrl = instance.getDataURL()
|
||||||
async genSnapshot(force = false) {
|
|
||||||
if (force) this.forceResize()
|
|
||||||
const inst = this.$refs.echarts?.echartsInstance
|
|
||||||
if (!inst) return
|
|
||||||
try {
|
|
||||||
this.dataUrl = inst.getDataURL({ pixelRatio: 2, backgroundColor: '#ffffff' })
|
|
||||||
} catch (e) {
|
|
||||||
this.dataUrl = ''
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
getMetricData() {
|
||||||
|
this.getDataUrl()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -279,4 +245,16 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 272px;
|
height: 272px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.disabled-when-print {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.enabled-when-print {
|
||||||
|
display: inherit !important;
|
||||||
|
}
|
||||||
|
.print-margin {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Echart
|
<echarts
|
||||||
ref="echarts"
|
ref="echarts"
|
||||||
:options="options"
|
:options="options"
|
||||||
:autoresize="true"
|
:autoresize="true"
|
||||||
@@ -13,10 +13,8 @@
|
|||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import { mix } from '@/utils/theme/color'
|
import { mix } from '@/utils/theme/color'
|
||||||
import Echart from '@/components/Dashboard/Echart.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { Echart },
|
|
||||||
props: {
|
props: {
|
||||||
colors: {
|
colors: {
|
||||||
type: Array,
|
type: Array,
|
||||||
@@ -37,15 +35,14 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {
|
||||||
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
options() {
|
options() {
|
||||||
const seriesList = []
|
const seriesList = []
|
||||||
const labels = this.data.map(item => item.label)
|
const labels = this.data.map(item => item.label)
|
||||||
const total = _.sumBy(this.data, function(i) {
|
const total = _.sumBy(this.data, function(i) { return i.total })
|
||||||
return i.total
|
|
||||||
})
|
|
||||||
for (let i = 0, len = this.data.length; i < len; i++) {
|
for (let i = 0, len = this.data.length; i < len; i++) {
|
||||||
const current = this.data[i]
|
const current = this.data[i]
|
||||||
let num = (current.total / total) * 100
|
let num = (current.total / total) * 100
|
||||||
@@ -180,8 +177,8 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.echarts {
|
.echarts {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 72px;
|
height: 72px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
class="table"
|
class="table"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
>
|
>
|
||||||
<el-table-column :label="$tc('Ranking')" width="100">
|
<el-table-column :label="$tc('Ranking')">
|
||||||
<template #header>
|
<template #header>
|
||||||
<el-tooltip :content="$t('Ranking')" placement="top" :open-delay="500">
|
<el-tooltip :content="$t('Ranking')" placement="top" :open-delay="500">
|
||||||
<span style="cursor: pointer;">{{ $t('Ranking') }}</span>
|
<span style="cursor: pointer;">{{ $t('Ranking') }}</span>
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ export default {
|
|||||||
{
|
{
|
||||||
title: this.$t('OnlineSessions'),
|
title: this.$t('OnlineSessions'),
|
||||||
body: {
|
body: {
|
||||||
route: { name: `SessionList`, params: { activeMenu: 'OnlineList' } },
|
route: { name: `SessionList`, params: { activeMenu: 'OnlineList' }},
|
||||||
count: this.counter.total_count_online_sessions,
|
count: this.counter.total_count_online_sessions,
|
||||||
disabled: !this.$hasPerm('terminal.view_session')
|
disabled: !this.$hasPerm('terminal.view_session')
|
||||||
}
|
}
|
||||||
@@ -46,7 +46,7 @@ export default {
|
|||||||
{
|
{
|
||||||
title: this.$t('CurrentConnectionUsers'),
|
title: this.$t('CurrentConnectionUsers'),
|
||||||
body: {
|
body: {
|
||||||
route: { name: `SessionList`, params: { activeMenu: 'OnlineList' } },
|
route: { name: `SessionList`, params: { activeMenu: 'OnlineList' }},
|
||||||
count: this.counter.total_count_online_users,
|
count: this.counter.total_count_online_users,
|
||||||
disabled: !this.$hasPerm('terminal.view_session')
|
disabled: !this.$hasPerm('terminal.view_session')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Echart
|
<echarts
|
||||||
ref="echarts"
|
ref="echarts"
|
||||||
:autoresize="true"
|
:autoresize="true"
|
||||||
:options="options"
|
:options="options"
|
||||||
@@ -13,15 +13,12 @@ import 'echarts/lib/chart/line'
|
|||||||
import 'echarts/lib/component/legend'
|
import 'echarts/lib/component/legend'
|
||||||
|
|
||||||
import Decimal from 'decimal.js'
|
import Decimal from 'decimal.js'
|
||||||
import Echart from '@/components/Dashboard/Echart.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { Echart },
|
|
||||||
props: {
|
props: {
|
||||||
config: {
|
config: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {
|
default: () => {}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -36,7 +33,7 @@ export default {
|
|||||||
|
|
||||||
const formatTitle = (text) => {
|
const formatTitle = (text) => {
|
||||||
if (!text) return ''
|
if (!text) return ''
|
||||||
const maxLength = 25
|
const maxLength = 23
|
||||||
const lines = []
|
const lines = []
|
||||||
for (let i = 0; i < text.length; i += maxLength) {
|
for (let i = 0; i < text.length; i += maxLength) {
|
||||||
lines.push(text.slice(i, i + maxLength))
|
lines.push(text.slice(i, i + maxLength))
|
||||||
@@ -91,7 +88,6 @@ export default {
|
|||||||
{
|
{
|
||||||
name: title,
|
name: title,
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
minAngle: 5,
|
|
||||||
radius: ['72%', '90%'],
|
radius: ['72%', '90%'],
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
|
|||||||
@@ -16,13 +16,11 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
default: 'dashboardDays'
|
|
||||||
},
|
|
||||||
days: {
|
days: {
|
||||||
type: [String, Number],
|
type: String,
|
||||||
default: null
|
default: () => {
|
||||||
|
return localStorage.getItem('dashboardDays') || '7'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
type: Array,
|
type: Array,
|
||||||
@@ -49,28 +47,8 @@ export default {
|
|||||||
iOptions: this.options.length > 0 ? this.options : defaultOptions
|
iOptions: this.options.length > 0 ? this.options : defaultOptions
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
|
||||||
let days = this.days
|
|
||||||
if (!days) {
|
|
||||||
days = this.$route.query.days
|
|
||||||
}
|
|
||||||
if (!days) {
|
|
||||||
days = localStorage.getItem(this.name)
|
|
||||||
}
|
|
||||||
if (!days) {
|
|
||||||
days = '7'
|
|
||||||
}
|
|
||||||
if (days && days !== this.select) {
|
|
||||||
this.select = days
|
|
||||||
this.$emit('change', days)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$emit('change', this.select)
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
onChange(val) {
|
onChange(val) {
|
||||||
localStorage.setItem(this.name, val)
|
|
||||||
this.$emit('change', val)
|
this.$emit('change', val)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import i18n from '@/i18n/i18n'
|
import i18n from '@/i18n/i18n'
|
||||||
import { copy } from '@/utils/common/index'
|
import { copy } from '@/utils/common'
|
||||||
import Dialog from '@/components/Dialog/index'
|
import Dialog from '@/components/Dialog/index'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|||||||
@@ -30,7 +30,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getDrawerWidth } from '@/utils/common/index'
|
import { getDrawerWidth } from '@/utils/common'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@@ -5,7 +5,6 @@
|
|||||||
ref="dataForm"
|
ref="dataForm"
|
||||||
:fields="totalFields"
|
:fields="totalFields"
|
||||||
:form="iForm"
|
:form="iForm"
|
||||||
:server-errors="serverErrors"
|
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
v-on="$listeners"
|
v-on="$listeners"
|
||||||
>
|
>
|
||||||
@@ -29,7 +28,6 @@
|
|||||||
import DataForm from '../DataForm/index.vue'
|
import DataForm from '../DataForm/index.vue'
|
||||||
import FormGroupHeader from '@/components/Form/FormGroupHeader/index.vue'
|
import FormGroupHeader from '@/components/Form/FormGroupHeader/index.vue'
|
||||||
import { FormFieldGenerator } from '@/components/Form/AutoDataForm/utils'
|
import { FormFieldGenerator } from '@/components/Form/AutoDataForm/utils'
|
||||||
import { UniqueCheck } from '@/components/Form/DataForm/rules'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AutoDataForm',
|
name: 'AutoDataForm',
|
||||||
@@ -67,8 +65,7 @@ export default {
|
|||||||
totalFields: [],
|
totalFields: [],
|
||||||
loading: true,
|
loading: true,
|
||||||
groups: [],
|
groups: [],
|
||||||
errors: {},
|
errors: {}
|
||||||
serverErrors: {}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -97,7 +94,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async optionUrlMetaAndGenerateColumns() {
|
async optionUrlMetaAndGenerateColumns() {
|
||||||
let data = { actions: {} }
|
let data = { actions: {}}
|
||||||
if (this.url) {
|
if (this.url) {
|
||||||
data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
|
data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
|
||||||
}
|
}
|
||||||
@@ -106,8 +103,6 @@ export default {
|
|||||||
this.generateColumns()
|
this.generateColumns()
|
||||||
this.$emit('afterGenerateColumns', this.totalFields)
|
this.$emit('afterGenerateColumns', this.totalFields)
|
||||||
this.cleanFormValue()
|
this.cleanFormValue()
|
||||||
// 初始化时清空错误
|
|
||||||
this.serverErrors = {}
|
|
||||||
this.loading = false
|
this.loading = false
|
||||||
},
|
},
|
||||||
generateColumns() {
|
generateColumns() {
|
||||||
@@ -115,47 +110,6 @@ export default {
|
|||||||
this.totalFields = generator.generateFields(this.fields, this.fieldsMeta, this.remoteMeta)
|
this.totalFields = generator.generateFields(this.fields, this.fieldsMeta, this.remoteMeta)
|
||||||
this.groups = generator.groups
|
this.groups = generator.groups
|
||||||
this.$log.debug('Total fields: ', this.totalFields)
|
this.$log.debug('Total fields: ', this.totalFields)
|
||||||
this.applyUniqueRules()
|
|
||||||
},
|
|
||||||
applyUniqueRules() {
|
|
||||||
const fields = this.totalFields || []
|
|
||||||
const currentIdGetter = () => {
|
|
||||||
return this.$route?.params?.id || this.form?.id || this.iForm?.id
|
|
||||||
}
|
|
||||||
|
|
||||||
// 移除 url 后拼接的参数
|
|
||||||
const defaultListUrl = (() => {
|
|
||||||
try {
|
|
||||||
const u = new URL(this.url, location.origin)
|
|
||||||
u.pathname = u.pathname.replace(/\/(\d+|[0-9a-fA-F-]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12})\/?$/, '/')
|
|
||||||
return u.origin ? u.origin + u.pathname : u.pathname
|
|
||||||
} catch (e) {
|
|
||||||
return (this.url || '').replace(/\/(\d+|[0-9a-fA-F-]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12})\/?($|\?)/, '/$2')
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
|
|
||||||
fields.forEach(field => {
|
|
||||||
const conf = field?.uniqueCheck
|
|
||||||
|
|
||||||
if (!conf) return
|
|
||||||
|
|
||||||
const confObj = (typeof conf === 'object') ? conf : {}
|
|
||||||
const param = confObj.param || field.prop || field.id
|
|
||||||
const url = confObj.url || defaultListUrl
|
|
||||||
const label = confObj.label || field.label || param
|
|
||||||
const entityName = confObj.entityName || ''
|
|
||||||
|
|
||||||
if (!Array.isArray(field.rules)) field.rules = []
|
|
||||||
|
|
||||||
field.rules.push(UniqueCheck({
|
|
||||||
url,
|
|
||||||
param,
|
|
||||||
label,
|
|
||||||
entityName,
|
|
||||||
getIgnoreId: currentIdGetter,
|
|
||||||
fieldName: field.prop || field.id
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
_cleanFormValue(form, remoteMeta) {
|
_cleanFormValue(form, remoteMeta) {
|
||||||
if (!form) {
|
if (!form) {
|
||||||
@@ -185,69 +139,15 @@ export default {
|
|||||||
cleanFormValue() {
|
cleanFormValue() {
|
||||||
this._cleanFormValue(this.iForm, this.remoteMeta)
|
this._cleanFormValue(this.iForm, this.remoteMeta)
|
||||||
},
|
},
|
||||||
_getElFormInstance() {
|
|
||||||
try {
|
|
||||||
return this.$refs?.dataForm?.$refs?.form?.$refs?.elForm || null
|
|
||||||
} catch (e) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* @description 仅清理 UI 的错误展示,不触发表单内容重建
|
|
||||||
*/
|
|
||||||
clearAllFieldErrors() {
|
|
||||||
const elForm = this._getElFormInstance()
|
|
||||||
if (elForm && Array.isArray(elForm.fields)) {
|
|
||||||
elForm.fields.forEach((item) => {
|
|
||||||
item.validateMessage = ''
|
|
||||||
item.validateState = ''
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 不修改 totalFields/attrs,避免触发 content 重建导致输入丢失
|
|
||||||
this.serverErrors = {}
|
|
||||||
},
|
|
||||||
setFieldError(name, error) {
|
setFieldError(name, error) {
|
||||||
error = (error || '').toString().replace(/[。.]+$/, '')
|
error = error.replace(/[。.]+$/, '')
|
||||||
const elForm = this._getElFormInstance()
|
const field = this.totalFields.find((v) => v.prop === name)
|
||||||
if (elForm && Array.isArray(elForm.fields)) {
|
if (!field) {
|
||||||
const item = elForm.fields.find(f => f.prop === name)
|
return
|
||||||
if (item) {
|
|
||||||
item.validateMessage = error
|
|
||||||
item.validateState = error ? 'error' : ''
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
// 不写入 totalFields,避免触发 innerContent 变化导致表单值被覆盖
|
if (typeof error === 'string') {
|
||||||
this.$set(this.serverErrors, name, error)
|
field.el.errors = error
|
||||||
},
|
field.attrs.error = error
|
||||||
setErrors(errors) {
|
|
||||||
const mapped = {}
|
|
||||||
Object.entries(errors || {}).forEach(([k, v]) => {
|
|
||||||
let msg = v
|
|
||||||
console.log(k, v)
|
|
||||||
// v是数组并且数组都是字符串,则拼接为字符串
|
|
||||||
if (Array.isArray(v) && v.every(item => typeof item === 'string')) msg = v.join('; ')
|
|
||||||
// 处理 [{"port":["请确保该值小于或者等于 65535。"]},{},{}] 这种情况
|
|
||||||
else if (Array.isArray(v) && v.every(item => _.isPlainObject(item))) {
|
|
||||||
const subMsg = []
|
|
||||||
v.forEach((subItem) => {
|
|
||||||
Object.values(subItem).forEach((subMsgArr) => {
|
|
||||||
if (Array.isArray(subMsgArr)) {
|
|
||||||
subMsg.push(...subMsgArr)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
msg = subMsg.join(' ')
|
|
||||||
} else if (typeof v === 'object' && v !== null) msg = JSON.stringify(v)
|
|
||||||
mapped[k] = String(msg || '')
|
|
||||||
})
|
|
||||||
this.serverErrors = mapped
|
|
||||||
const elForm = this._getElFormInstance()
|
|
||||||
if (elForm && Array.isArray(elForm.fields)) {
|
|
||||||
elForm.fields.forEach((item) => {
|
|
||||||
const msg = mapped[item.prop] || ''
|
|
||||||
item.validateMessage = msg
|
|
||||||
item.validateState = msg ? 'error' : ''
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
groupHidden(group, i) {
|
groupHidden(group, i) {
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import NestedField from '@/components/Form/AutoDataForm/components/NestedField.v
|
|||||||
import rules from '@/components/Form/DataForm/rules'
|
import rules from '@/components/Form/DataForm/rules'
|
||||||
import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
|
import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
|
||||||
import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
|
import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
|
||||||
import { assignIfNot, toSentenceCase } from '@/utils/common/index'
|
import { assignIfNot, toSentenceCase } from '@/utils/common'
|
||||||
import TagInput from '@/components/Form/FormFields/TagInput.vue'
|
import TagInput from '@/components/Form/FormFields/TagInput.vue'
|
||||||
import i18n from '@/i18n/i18n'
|
import i18n from '@/i18n/i18n'
|
||||||
|
|
||||||
@@ -177,10 +177,7 @@ export class FormFieldGenerator {
|
|||||||
const systemLang = document.cookie.django_language
|
const systemLang = document.cookie.django_language
|
||||||
if (helpTextAsPlaceholder !== undefined) {
|
if (helpTextAsPlaceholder !== undefined) {
|
||||||
helpTextAsPlaceholder = !!helpTextAsPlaceholder
|
helpTextAsPlaceholder = !!helpTextAsPlaceholder
|
||||||
} else if (
|
} else if (placeholderType.indexOf(field.type) === -1 && placeholderComponent.indexOf(field.component) === -1) {
|
||||||
placeholderType.indexOf(field.type) === -1 &&
|
|
||||||
placeholderComponent.indexOf(field.component) === -1
|
|
||||||
) {
|
|
||||||
helpTextAsPlaceholder = false
|
helpTextAsPlaceholder = false
|
||||||
} else if ((helpTextWordLength <= 5 || helpText.length <= 10) && systemLang === 'en') {
|
} else if ((helpTextWordLength <= 5 || helpText.length <= 10) && systemLang === 'en') {
|
||||||
helpTextAsPlaceholder = true
|
helpTextAsPlaceholder = true
|
||||||
|
|||||||
@@ -6,7 +6,6 @@
|
|||||||
:prop="prop"
|
:prop="prop"
|
||||||
:rules="_show && Array.isArray(data.rules) ? data.rules : []"
|
:rules="_show && Array.isArray(data.rules) ? data.rules : []"
|
||||||
v-bind="data.attrs"
|
v-bind="data.attrs"
|
||||||
:error="errorText"
|
|
||||||
>
|
>
|
||||||
<template v-if="data.label" #label>
|
<template v-if="data.label" #label>
|
||||||
<span :title="data.label">
|
<span :title="data.label">
|
||||||
@@ -20,8 +19,7 @@
|
|||||||
placement="right"
|
placement="right"
|
||||||
popper-class="help-tips"
|
popper-class="help-tips"
|
||||||
>
|
>
|
||||||
<div slot="content" v-sanitize="data.helpTip" class="help-tip-content" />
|
<div slot="content" v-sanitize="data.helpTip" class="help-tip-content" /> <!-- Noncompliant -->
|
||||||
<!-- Noncompliant -->
|
|
||||||
<i class="fa fa-question-circle-o help-tip-icon" />
|
<i class="fa fa-question-circle-o help-tip-icon" />
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</span>
|
</span>
|
||||||
@@ -29,7 +27,11 @@
|
|||||||
<template v-if="readonly && hasReadonlyContent">
|
<template v-if="readonly && hasReadonlyContent">
|
||||||
<div
|
<div
|
||||||
v-if="data.type === 'input'"
|
v-if="data.type === 'input'"
|
||||||
:style="componentProps.type === 'textarea' ? { padding: '10px 0', lineHeight: 1.5 } : ''"
|
:style="
|
||||||
|
componentProps.type === 'textarea'
|
||||||
|
? {padding: '10px 0', lineHeight: 1.5}
|
||||||
|
: ''
|
||||||
|
"
|
||||||
>
|
>
|
||||||
{{ itemValue }}
|
{{ itemValue }}
|
||||||
</div>
|
</div>
|
||||||
@@ -48,7 +50,11 @@
|
|||||||
v-on="listeners"
|
v-on="listeners"
|
||||||
>
|
>
|
||||||
<template v-for="opt in options">
|
<template v-for="opt in options">
|
||||||
<el-option v-if="data.type === 'select'" :key="opt.label" v-bind="opt" />
|
<el-option
|
||||||
|
v-if="data.type === 'select'"
|
||||||
|
:key="opt.label"
|
||||||
|
v-bind="opt"
|
||||||
|
/>
|
||||||
<el-checkbox-button
|
<el-checkbox-button
|
||||||
v-else-if="data.type === 'checkbox-group' && data.style === 'button'"
|
v-else-if="data.type === 'checkbox-group' && data.style === 'button'"
|
||||||
:key="opt.value"
|
:key="opt.value"
|
||||||
@@ -105,10 +111,10 @@
|
|||||||
<script>
|
<script>
|
||||||
import getEnableWhenStatus from '../util/enable-when'
|
import getEnableWhenStatus from '../util/enable-when'
|
||||||
import { noop } from '../util/utils'
|
import { noop } from '../util/utils'
|
||||||
import _get from 'lodash/get'
|
import _get from 'lodash.get'
|
||||||
import _includes from 'lodash/includes'
|
import _includes from 'lodash.includes'
|
||||||
import _topairs from 'lodash/toPairs'
|
import _topairs from 'lodash.topairs'
|
||||||
import _frompairs from 'lodash/fromPairs'
|
import _frompairs from 'lodash.frompairs'
|
||||||
|
|
||||||
function validator(data) {
|
function validator(data) {
|
||||||
if (!data) {
|
if (!data) {
|
||||||
@@ -146,10 +152,6 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
// eslint-disable-next-line vue/require-default-prop
|
// eslint-disable-next-line vue/require-default-prop
|
||||||
data: Object,
|
data: Object,
|
||||||
serverErrors: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
},
|
|
||||||
prop: {
|
prop: {
|
||||||
type: String,
|
type: String,
|
||||||
default() {
|
default() {
|
||||||
@@ -168,8 +170,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
propsInner: {},
|
propsInner: {},
|
||||||
isBlurTrigger:
|
isBlurTrigger: this.data.rules &&
|
||||||
this.data.rules &&
|
|
||||||
this.data.rules.some(rule => {
|
this.data.rules.some(rule => {
|
||||||
return rule.required && rule.trigger === 'blur'
|
return rule.required && rule.trigger === 'blur'
|
||||||
})
|
})
|
||||||
@@ -178,7 +179,7 @@ export default {
|
|||||||
computed: {
|
computed: {
|
||||||
// 解构运算符会处理 undefined 的情况
|
// 解构运算符会处理 undefined 的情况
|
||||||
componentProps: ({ data: { el }, propsInner }) => ({ ...el, ...propsInner }),
|
componentProps: ({ data: { el }, propsInner }) => ({ ...el, ...propsInner }),
|
||||||
hasReadonlyContent: ({ data: { type } }) => _includes(['input', 'select'], type),
|
hasReadonlyContent: ({ data: { type }}) => _includes(['input', 'select'], type),
|
||||||
hiddenStatus: ({ data: { hidden = () => false }, data, value }) => hidden(value, data),
|
hiddenStatus: ({ data: { hidden = () => false }, data, value }) => hidden(value, data),
|
||||||
enableWhenStatus: ({ data: { enableWhen }, value }) => getEnableWhenStatus(enableWhen, value),
|
enableWhenStatus: ({ data: { enableWhen }, value }) => getEnableWhenStatus(enableWhen, value),
|
||||||
// 是否显示
|
// 是否显示
|
||||||
@@ -188,11 +189,6 @@ export default {
|
|||||||
classes() {
|
classes() {
|
||||||
return 'el-form-item-' + this.data.prop + ' ' + (this.data.attrs?.class || '')
|
return 'el-form-item-' + this.data.prop + ' ' + (this.data.attrs?.class || '')
|
||||||
},
|
},
|
||||||
errorText() {
|
|
||||||
const fromAttrs = this.data?.attrs?.error
|
|
||||||
const fromServer = this.serverErrors ? this.serverErrors[this.data.prop] : ''
|
|
||||||
return fromAttrs || fromServer || ''
|
|
||||||
},
|
|
||||||
listeners() {
|
listeners() {
|
||||||
const {
|
const {
|
||||||
data: {
|
data: {
|
||||||
@@ -208,7 +204,10 @@ export default {
|
|||||||
} = this
|
} = this
|
||||||
return {
|
return {
|
||||||
..._frompairs(
|
..._frompairs(
|
||||||
_topairs(on).map(([eName, handler]) => [eName, (...args) => handler(args, updateForm)])
|
_topairs(on).map(([eName, handler]) => [
|
||||||
|
eName,
|
||||||
|
(...args) => handler(args, updateForm)
|
||||||
|
]),
|
||||||
),
|
),
|
||||||
// 手动更新表单数据
|
// 手动更新表单数据
|
||||||
input: (value, ...rest) => {
|
input: (value, ...rest) => {
|
||||||
@@ -233,7 +232,9 @@ export default {
|
|||||||
|
|
||||||
multipleValue: ({ data, itemValue, options = [] }) => {
|
multipleValue: ({ data, itemValue, options = [] }) => {
|
||||||
const multipleSelectValue =
|
const multipleSelectValue =
|
||||||
_get(data, 'el.multiple') && Array.isArray(itemValue) ? itemValue : [itemValue]
|
_get(data, 'el.multiple') && Array.isArray(itemValue)
|
||||||
|
? itemValue
|
||||||
|
: [itemValue]
|
||||||
return multipleSelectValue
|
return multipleSelectValue
|
||||||
.map(val => (options.find(op => op.value === val) || {}).label)
|
.map(val => (options.find(op => op.value === val) || {}).label)
|
||||||
.join()
|
.join()
|
||||||
@@ -253,7 +254,8 @@ export default {
|
|||||||
if (v.url === oldV.url || v.request === oldV.request) return
|
if (v.url === oldV.url || v.request === oldV.request) return
|
||||||
}
|
}
|
||||||
const isOptionsCase =
|
const isOptionsCase =
|
||||||
['select', 'checkbox-group', 'radio-group'].indexOf(this.data.type) > -1
|
['select', 'checkbox-group', 'radio-group'].indexOf(this.data.type) >
|
||||||
|
-1
|
||||||
const {
|
const {
|
||||||
url,
|
url,
|
||||||
request = () => this.$axios.get(url).then(resp => resp.data),
|
request = () => this.$axios.get(url).then(resp => resp.data),
|
||||||
@@ -321,7 +323,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang='scss' scoped>
|
||||||
.help-tips {
|
.help-tips {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
line-height: 2;
|
line-height: 2;
|
||||||
@@ -330,7 +332,7 @@ export default {
|
|||||||
|
|
||||||
.help-block {
|
.help-block {
|
||||||
::v-deep .el-alert__icon {
|
::v-deep .el-alert__icon {
|
||||||
font-size: 16px;
|
font-size: 16px
|
||||||
}
|
}
|
||||||
|
|
||||||
&.checkbox {
|
&.checkbox {
|
||||||
|
|||||||
@@ -1,18 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-form
|
<el-form ref="elForm" :model="value" class="el-form-renderer" v-bind="$attrs">
|
||||||
ref="elForm"
|
|
||||||
:model="value"
|
|
||||||
class="el-form-renderer"
|
|
||||||
v-bind="$attrs"
|
|
||||||
@submit.native.prevent
|
|
||||||
>
|
|
||||||
<template v-for="item in innerContent">
|
<template v-for="item in innerContent">
|
||||||
<slot v-if="!isHidden(item)" :name="`id:${item.id}`" />
|
<slot v-if="!isHidden(item)" :name="`id:${item.id}`" />
|
||||||
<component
|
<component
|
||||||
:is="item.type === GROUP ? 'render-form-group' : 'render-form-item'"
|
:is="item.type === GROUP ? 'render-form-group' : 'render-form-item'"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
:data="item"
|
:data="item"
|
||||||
:server-errors="serverErrors"
|
|
||||||
:disabled="disabled || item.disabled"
|
:disabled="disabled || item.disabled"
|
||||||
:item-value="value[item.id]"
|
:item-value="value[item.id]"
|
||||||
:options="options[item.id]"
|
:options="options[item.id]"
|
||||||
@@ -26,19 +19,13 @@
|
|||||||
</el-form>
|
</el-form>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import _set from 'lodash/set'
|
import _set from 'lodash.set'
|
||||||
import _isequal from 'lodash/isEqual'
|
import _isequal from 'lodash.isequal'
|
||||||
import _clonedeep from 'lodash/cloneDeep'
|
import _clonedeep from 'lodash.clonedeep'
|
||||||
import RenderFormGroup from './components/render-form-group.vue'
|
import RenderFormGroup from './components/render-form-group.vue'
|
||||||
import RenderFormItem from './components/render-form-item.vue'
|
import RenderFormItem from './components/render-form-item.vue'
|
||||||
import transformContent from './util/transform-content'
|
import transformContent from './util/transform-content'
|
||||||
import {
|
import { collect, correctValue, mergeValue, transformInputValue, transformOutputValue } from './util/utils'
|
||||||
collect,
|
|
||||||
correctValue,
|
|
||||||
mergeValue,
|
|
||||||
transformInputValue,
|
|
||||||
transformOutputValue
|
|
||||||
} from './util/utils'
|
|
||||||
|
|
||||||
const GROUP = 'group'
|
const GROUP = 'group'
|
||||||
|
|
||||||
@@ -60,10 +47,6 @@ export default {
|
|||||||
type: Array,
|
type: Array,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
serverErrors: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
},
|
|
||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import _get from 'lodash/get'
|
import _get from 'lodash.get'
|
||||||
import _has from 'lodash/has'
|
import _has from 'lodash.has'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 处理 enableWhen
|
* 处理 enableWhen
|
||||||
@@ -20,5 +20,7 @@ export default function getEnableWhenStatus(enableWhen, value) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
return Array.isArray(enableWhen) ? enableWhen.some(handleCondition) : handleCondition(enableWhen)
|
return Array.isArray(enableWhen)
|
||||||
|
? enableWhen.some(handleCondition)
|
||||||
|
: handleCondition(enableWhen)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
/* eslint-disable no-sequences */
|
/* eslint-disable no-sequences */
|
||||||
import _ from 'lodash'
|
import _kebabcase from 'lodash.kebabcase'
|
||||||
/**
|
/**
|
||||||
* content 的每一项会浅拷贝一层
|
* content 的每一项会浅拷贝一层
|
||||||
* 只可以在 item 层新增修改属性,如 item.a = b
|
* 只可以在 item 层新增修改属性,如 item.a = b
|
||||||
@@ -13,7 +13,7 @@ export default function transformContent(content) {
|
|||||||
removeDollarInKey(item)
|
removeDollarInKey(item)
|
||||||
extractRulesFromComponent(item)
|
extractRulesFromComponent(item)
|
||||||
// 有些旧写法是 checkboxGroup & radioGroup
|
// 有些旧写法是 checkboxGroup & radioGroup
|
||||||
item.type = _.kebabCase(item.type)
|
item.type = _kebabcase(item.type)
|
||||||
}
|
}
|
||||||
|
|
||||||
return item
|
return item
|
||||||
@@ -34,5 +34,8 @@ export function extractRulesFromComponent(item) {
|
|||||||
if (!component || typeof component === 'string') return
|
if (!component || typeof component === 'string') return
|
||||||
|
|
||||||
const { rules = [] } = component
|
const { rules = [] } = component
|
||||||
item.rules = [...(item.rules || []), ...(typeof rules === 'function' ? rules(item) : rules)]
|
item.rules = [
|
||||||
|
...(item.rules || []),
|
||||||
|
...(typeof rules === 'function' ? rules(item) : rules)
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import _frompairs from 'lodash/fromPairs'
|
import _frompairs from 'lodash.frompairs'
|
||||||
import _isplainobject from 'lodash/isPlainObject'
|
import _isplainobject from 'lodash.isplainobject'
|
||||||
|
|
||||||
export function noop() {}
|
export function noop() {}
|
||||||
|
|
||||||
@@ -12,9 +12,11 @@ export function collect(content, key) {
|
|||||||
value: item.type === 'group' ? collect(item.items, key) : item[key]
|
value: item.type === 'group' ? collect(item.items, key) : item[key]
|
||||||
}))
|
}))
|
||||||
.filter(
|
.filter(
|
||||||
({ type, value }) => value !== undefined || (type === 'group' && Object.keys(value).length)
|
({ type, value }) =>
|
||||||
|
value !== undefined ||
|
||||||
|
(type === 'group' && Object.keys(value).length),
|
||||||
)
|
)
|
||||||
.map(({ id, value }) => [id, value])
|
.map(({ id, value }) => [id, value]),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,10 +8,8 @@
|
|||||||
:form="basicForm"
|
:form="basicForm"
|
||||||
:label-position="iLabelPosition"
|
:label-position="iLabelPosition"
|
||||||
class="form-fields"
|
class="form-fields"
|
||||||
:label-width="labelWidth"
|
label-width="25%"
|
||||||
:style="{ '--label-width': labelWidth }"
|
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
:server-errors="serverErrors"
|
|
||||||
v-on="$listeners"
|
v-on="$listeners"
|
||||||
>
|
>
|
||||||
<!-- slot 透传 -->
|
<!-- slot 透传 -->
|
||||||
@@ -56,7 +54,7 @@
|
|||||||
|
|
||||||
<el-button
|
<el-button
|
||||||
v-for="button in moreButtons"
|
v-for="button in moreButtons"
|
||||||
v-show="!iHidden(button)"
|
v-show="!button.hidden"
|
||||||
:key="button.title"
|
:key="button.title"
|
||||||
:loading="button.loading"
|
:loading="button.loading"
|
||||||
size="small"
|
size="small"
|
||||||
@@ -72,20 +70,8 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ElFormRender from './components/el-form-renderer'
|
import ElFormRender from './components/el-form-renderer'
|
||||||
import { randomString } from '@/utils/common/index'
|
import { randomString } from '@/utils/string'
|
||||||
|
import { scrollToError } from '@/utils'
|
||||||
const scrollToError = (
|
|
||||||
el,
|
|
||||||
scrollOption = {
|
|
||||||
behavior: 'smooth',
|
|
||||||
block: 'center'
|
|
||||||
}
|
|
||||||
) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
const isError = el.getElementsByClassName('is-error')
|
|
||||||
isError[0].scrollIntoView(scrollOption)
|
|
||||||
}, 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -122,10 +108,6 @@ export default {
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
serverErrors: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
},
|
|
||||||
fields: {
|
fields: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
@@ -146,10 +128,6 @@ export default {
|
|||||||
labelPosition: {
|
labelPosition: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
|
||||||
labelWidth: {
|
|
||||||
type: String,
|
|
||||||
default: '25%'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -231,9 +209,6 @@ export default {
|
|||||||
},
|
},
|
||||||
getFormValue() {
|
getFormValue() {
|
||||||
return this.$refs.form.getFormValue()
|
return this.$refs.form.getFormValue()
|
||||||
},
|
|
||||||
iHidden(item) {
|
|
||||||
return typeof item.hidden === 'function' ? item.hidden() : item.hidden
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -244,10 +219,6 @@ export default {
|
|||||||
margin-right: 80px;
|
margin-right: 80px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
.el-form {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-input-group__prepend {
|
::v-deep .el-input-group__prepend {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
@@ -292,7 +263,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-form-item__content {
|
.el-form-item__content {
|
||||||
width: calc(100% - var(--label-width));
|
width: 75%;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
|
|
||||||
// 禁用的输入框
|
// 禁用的输入框
|
||||||
@@ -366,7 +337,7 @@ export default {
|
|||||||
|
|
||||||
::v-deep .form-buttons {
|
::v-deep .form-buttons {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
margin-left: var(--label-width);
|
margin-left: 25%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import i18n from '@/i18n/i18n'
|
import i18n from '@/i18n/i18n'
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
export const Required = {
|
export const Required = {
|
||||||
required: true, message: i18n.t('FieldRequiredError'), trigger: 'blur'
|
required: true, message: i18n.t('FieldRequiredError'), trigger: 'blur'
|
||||||
@@ -119,69 +118,3 @@ export default {
|
|||||||
matchAlphanumericUnderscore,
|
matchAlphanumericUnderscore,
|
||||||
MatchExcludeParenthesis
|
MatchExcludeParenthesis
|
||||||
}
|
}
|
||||||
/**
|
|
||||||
* @description 表单唯一性校验
|
|
||||||
*
|
|
||||||
* @param {Object} options
|
|
||||||
* @param {string} 列表查询地址
|
|
||||||
* @param {string} 查询参数名
|
|
||||||
* @param {string} 字段中文名
|
|
||||||
* @param {string} 字段名
|
|
||||||
* @param {function(): (string|number)} 返回更新场景下的当前对象 id
|
|
||||||
*/
|
|
||||||
export function UniqueCheck(options = {}) {
|
|
||||||
const { url, param, label, fieldName, getIgnoreId } = options
|
|
||||||
|
|
||||||
function existsInResponse(res) {
|
|
||||||
if (Array.isArray(res)) return res.length > 0
|
|
||||||
if (res && typeof res === 'object') {
|
|
||||||
if (typeof res.count === 'number') return res.count > 0
|
|
||||||
if (Array.isArray(res.results)) return res.results.length > 0
|
|
||||||
}
|
|
||||||
return !!res
|
|
||||||
}
|
|
||||||
|
|
||||||
function extractIds(res) {
|
|
||||||
if (Array.isArray(res)) return res.map(i => i?.id).filter(Boolean)
|
|
||||||
if (res && Array.isArray(res.results)) return res.results.map(i => i?.id).filter(Boolean)
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
async validator(rule, value, callback) {
|
|
||||||
try {
|
|
||||||
let v = value
|
|
||||||
|
|
||||||
if (typeof v === 'string') v = v.trim()
|
|
||||||
if (v === '' || v === undefined || v === null) return callback()
|
|
||||||
if (!url || !param) return callback()
|
|
||||||
|
|
||||||
const res = await request.get(url, { params: { [param]: v } })
|
|
||||||
let duplicated = existsInResponse(res)
|
|
||||||
|
|
||||||
if (duplicated && typeof getIgnoreId === 'function') {
|
|
||||||
const curId = getIgnoreId()
|
|
||||||
if (curId) {
|
|
||||||
const ids = extractIds(res)
|
|
||||||
|
|
||||||
// 查询结果只包含自身,因此不被视为重复
|
|
||||||
if (ids.length >= 1 && ids.every(id => id === curId)) {
|
|
||||||
duplicated = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (duplicated) {
|
|
||||||
const _label = label || fieldName || ''
|
|
||||||
const msg = `${_label}${i18n.t('Existing')}`
|
|
||||||
callback(new Error(msg))
|
|
||||||
} else {
|
|
||||||
callback()
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
callback()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
trigger: ['blur']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -14,7 +14,6 @@
|
|||||||
<el-button
|
<el-button
|
||||||
:type="item.el && item.el.type"
|
:type="item.el && item.el.type"
|
||||||
class="start-stop-btn"
|
class="start-stop-btn"
|
||||||
:disabled="item.disabled"
|
|
||||||
size="mini"
|
size="mini"
|
||||||
@click="item.callback()"
|
@click="item.callback()"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import parser from 'cron-parser'
|
import parser from 'cron-parser'
|
||||||
import { toSafeLocalDateStr } from '@/utils/common/time'
|
import { toSafeLocalDateStr } from '@/utils/time'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CrontabResult',
|
name: 'CrontabResult',
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BaseFormatter from '@/components/Table/TableFormatters/base.vue'
|
import BaseFormatter from '@/components/Table/TableFormatters/base.vue'
|
||||||
import { setUrlParam } from '@/utils/common/index'
|
import { setUrlParam } from '@/utils/common'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ValueFormatter',
|
name: 'ValueFormatter',
|
||||||
|
|||||||
@@ -42,9 +42,9 @@ import DataTable from '@/components/Table/DataTable/index.vue'
|
|||||||
import ValueFormatter from './ValueFormatter.vue'
|
import ValueFormatter from './ValueFormatter.vue'
|
||||||
import AttrFormDialog from './AttrFormDialog.vue'
|
import AttrFormDialog from './AttrFormDialog.vue'
|
||||||
import AttrMatchResultDialog from './AttrMatchResultDialog.vue'
|
import AttrMatchResultDialog from './AttrMatchResultDialog.vue'
|
||||||
import { setUrlParam } from '@/utils/common/index'
|
import { setUrlParam } from '@/utils/common'
|
||||||
import { attrMatchOptions } from '@/components/const'
|
import { attrMatchOptions } from '@/components/const'
|
||||||
import { toM2MJsonParams } from '@/utils/jms/index'
|
import { toM2MJsonParams } from '@/utils/jms'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'JSONManyToManySelect',
|
name: 'JSONManyToManySelect',
|
||||||
@@ -109,7 +109,7 @@ export default {
|
|||||||
columns: [
|
columns: [
|
||||||
{ prop: 'name', label: this.$t('AttrName'), formatter: tableFormatter('name') },
|
{ prop: 'name', label: this.$t('AttrName'), formatter: tableFormatter('name') },
|
||||||
{ prop: 'match', label: this.$t('Match'), formatter: tableFormatter('match') },
|
{ prop: 'match', label: this.$t('Match'), formatter: tableFormatter('match') },
|
||||||
{ prop: 'value', label: this.$t('AttrValue'), formatter: ValueFormatter, formatterArgs: { attrs: this.attrs } },
|
{ prop: 'value', label: this.$t('AttrValue'), formatter: ValueFormatter, formatterArgs: { attrs: this.attrs }},
|
||||||
{
|
{
|
||||||
prop: 'action',
|
prop: 'action',
|
||||||
label: this.$t('Action'),
|
label: this.$t('Action'),
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="json-editor">
|
<div class="json-editor">
|
||||||
<JsonEditor
|
<JsonEditor
|
||||||
v-model="resultInfo"
|
v-model="resultInfo"
|
||||||
:class="{ resize: resize === 'vertical' }"
|
:class="{resize: resize === 'vertical'}"
|
||||||
:mode="'code'"
|
:mode="'code'"
|
||||||
:show-btns="false"
|
:show-btns="false"
|
||||||
@json-change="onJsonChange"
|
@json-change="onJsonChange"
|
||||||
@@ -24,7 +24,7 @@ export default {
|
|||||||
},
|
},
|
||||||
resize: {
|
resize: {
|
||||||
type: String,
|
type: String,
|
||||||
validator: value => {
|
validator: (value) => {
|
||||||
return ['none', 'vertical'].indexOf(value) !== -1
|
return ['none', 'vertical'].indexOf(value) !== -1
|
||||||
},
|
},
|
||||||
default: 'vertical'
|
default: 'vertical'
|
||||||
@@ -52,7 +52,7 @@ export default {
|
|||||||
this.$emit('change', this.resultInfo)
|
this.$emit('change', this.resultInfo)
|
||||||
}, 500)
|
}, 500)
|
||||||
},
|
},
|
||||||
onError: _.debounce(function (value) {
|
onError: _.debounce(function(value) {
|
||||||
this.$message.error(this.$tc('FormatError'))
|
this.$message.error(this.$tc('FormatError'))
|
||||||
}, 1500)
|
}, 1500)
|
||||||
}
|
}
|
||||||
@@ -60,38 +60,35 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '~@/styles/variables';
|
@import "~@/styles/variables";
|
||||||
|
|
||||||
|
.json-editor {
|
||||||
|
.resize {
|
||||||
|
& ::v-deep .jsoneditor {
|
||||||
|
resize: vertical;
|
||||||
|
cursor: s-resize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.json-editor {
|
|
||||||
.resize {
|
|
||||||
& ::v-deep .jsoneditor {
|
& ::v-deep .jsoneditor {
|
||||||
resize: vertical;
|
border: 1px solid #e5e6e7;
|
||||||
cursor: s-resize;
|
}
|
||||||
|
|
||||||
|
& ::v-deep .jsoneditor-compact {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& ::v-deep .jsoneditor-modes {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& ::v-deep .jsoneditor-poweredBy {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& ::v-deep .jsoneditor-menu {
|
||||||
|
background: var(--color-primary);
|
||||||
|
border-bottom: 1px solid var(--color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& ::v-deep .jsoneditor {
|
|
||||||
border: 1px solid #e5e6e7;
|
|
||||||
border-left: unset;
|
|
||||||
border-top: unset;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& ::v-deep .jsoneditor-compact {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
& ::v-deep .jsoneditor-modes {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
& ::v-deep .jsoneditor-poweredBy {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
& ::v-deep .jsoneditor-menu {
|
|
||||||
background: var(--color-primary);
|
|
||||||
border-bottom: 1px solid var(--color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: [Array, String, Number, Boolean, Object],
|
type: [Array, String, Number, Boolean, Object],
|
||||||
default: () => []
|
default: () => ([])
|
||||||
},
|
},
|
||||||
multiple: {
|
multiple: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@@ -36,7 +36,7 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
attrsWithoutValue() {
|
attrsWithoutValue() {
|
||||||
const attrs = Object.assign({ clearable: this.clearable }, this.$attrs)
|
const attrs = Object.assign({}, this.$attrs)
|
||||||
delete attrs.value
|
delete attrs.value
|
||||||
return attrs
|
return attrs
|
||||||
},
|
},
|
||||||
@@ -50,13 +50,6 @@ export default {
|
|||||||
const value = this.objectsToValues(this.value)
|
const value = this.objectsToValues(this.value)
|
||||||
return value
|
return value
|
||||||
}
|
}
|
||||||
},
|
|
||||||
clearable() {
|
|
||||||
if (this.$attrs.clearable === undefined) {
|
|
||||||
return this.multiple
|
|
||||||
} else {
|
|
||||||
return this.$attrs.clearable
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -78,11 +71,8 @@ export default {
|
|||||||
value = value.map(v => {
|
value = value.map(v => {
|
||||||
// uuid v4
|
// uuid v4
|
||||||
const uuid = /^[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i
|
const uuid = /^[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i
|
||||||
return typeof v === 'object'
|
return typeof v === 'object' ? v
|
||||||
? v
|
: this.$attrs?.allowCreate && !uuid.test(v) ? { [this.customLabelKeyName]: v } : { pk: v }
|
||||||
: this.$attrs?.allowCreate && !uuid.test(v)
|
|
||||||
? { [this.customLabelKeyName]: v }
|
|
||||||
: { pk: v }
|
|
||||||
})
|
})
|
||||||
if (!this.multiple) {
|
if (!this.multiple) {
|
||||||
value = value[0]
|
value = value[0]
|
||||||
@@ -97,13 +87,9 @@ export default {
|
|||||||
if (!Array.isArray(val)) {
|
if (!Array.isArray(val)) {
|
||||||
val = [val]
|
val = [val]
|
||||||
}
|
}
|
||||||
val = val.map(v => {
|
val = val.map((v) => {
|
||||||
if (v && typeof v === 'object') {
|
if (v && typeof v === 'object') {
|
||||||
return (
|
return v.pk || v.id || (this.$attrs?.allowCreate ? (v?.[this.customLabelKeyName] + ':' + v?.value) : '')
|
||||||
v.pk ||
|
|
||||||
v.id ||
|
|
||||||
(this.$attrs?.allowCreate ? v?.[this.customLabelKeyName] + ':' + v?.value : '')
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
return v
|
return v
|
||||||
}
|
}
|
||||||
@@ -117,4 +103,6 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -46,7 +46,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
const defaults = { code: this.getDefaultCode(), phone: '' }
|
const defaults = { code: localStorage.getItem('prePhoneCode') || '+86', phone: '' }
|
||||||
this.rawValue = this.value || defaults
|
this.rawValue = this.value || defaults
|
||||||
this.$axios.get('/api/v1/common/countries/').then(res => {
|
this.$axios.get('/api/v1/common/countries/').then(res => {
|
||||||
this.countries = res.map(item => {
|
this.countries = res.map(item => {
|
||||||
@@ -56,22 +56,6 @@ export default {
|
|||||||
this.$emit('input', this.fullPhone)
|
this.$emit('input', this.fullPhone)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getDefaultCode() {
|
|
||||||
const mapper = {
|
|
||||||
'zh': '+86',
|
|
||||||
'en': '+1',
|
|
||||||
'ja': '+81',
|
|
||||||
'ko': '+82',
|
|
||||||
'fr': '+33',
|
|
||||||
'de': '+49',
|
|
||||||
'es': '+34',
|
|
||||||
'it': '+39',
|
|
||||||
'ru': '+7',
|
|
||||||
'ar': '+966'
|
|
||||||
}
|
|
||||||
const locale = this.$i18n.locale.split('-')[0]
|
|
||||||
return localStorage.getItem('prePhoneCode') || mapper[locale] || '+86'
|
|
||||||
},
|
|
||||||
onChange(countryCode) {
|
onChange(countryCode) {
|
||||||
this.rawValue.code = countryCode
|
this.rawValue.code = countryCode
|
||||||
this.onInputChange()
|
this.onInputChange()
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
width="800px"
|
width="800px"
|
||||||
v-on="$listeners"
|
v-on="$listeners"
|
||||||
>
|
>
|
||||||
<el-alert v-if="disabled && platformDetail" style="margin-bottom: 10px" type="info">
|
<el-alert v-if="disabled && platformDetail" style="margin-bottom: 10px" type="success">
|
||||||
{{ $t('InheritPlatformConfig') }}
|
{{ $t('InheritPlatformConfig') }}
|
||||||
<el-link :href="platformDetail" class="link-more" target="_blank">
|
<el-link :href="platformDetail" class="link-more" target="_blank">
|
||||||
{{ $t('View') }}
|
{{ $t('View') }}
|
||||||
@@ -62,7 +62,9 @@ export default {
|
|||||||
hasButtons: !this.disabled,
|
hasButtons: !this.disabled,
|
||||||
url: '/api/v1/assets/protocol-settings/?name=' + this.protocol.name,
|
url: '/api/v1/assets/protocol-settings/?name=' + this.protocol.name,
|
||||||
fields: [
|
fields: [
|
||||||
[vm.$t('Basic'), ['primary', 'required', 'default', 'public']],
|
[vm.$t('Basic'), [
|
||||||
|
'primary', 'required', 'default', 'public'
|
||||||
|
]],
|
||||||
[vm.$t('Advanced'), ['setting']]
|
[vm.$t('Advanced'), ['setting']]
|
||||||
],
|
],
|
||||||
fieldsMeta: {
|
fieldsMeta: {
|
||||||
@@ -70,23 +72,23 @@ export default {
|
|||||||
fields: '__all__',
|
fields: '__all__',
|
||||||
fieldsMeta: {
|
fieldsMeta: {
|
||||||
username_selector: {
|
username_selector: {
|
||||||
hidden: formValue => formValue['autofill'] !== 'basic'
|
hidden: (formValue) => formValue['autofill'] !== 'basic'
|
||||||
},
|
},
|
||||||
password_selector: {
|
password_selector: {
|
||||||
hidden: formValue => formValue['autofill'] !== 'basic'
|
hidden: (formValue) => formValue['autofill'] !== 'basic'
|
||||||
},
|
},
|
||||||
submit_selector: {
|
submit_selector: {
|
||||||
hidden: formValue => formValue['autofill'] !== 'basic'
|
hidden: (formValue) => formValue['autofill'] !== 'basic'
|
||||||
},
|
},
|
||||||
script: {
|
script: {
|
||||||
component: JsonEditor,
|
component: JsonEditor,
|
||||||
hidden: formValue => formValue['autofill'] !== 'script'
|
hidden: (formValue) => formValue['autofill'] !== 'script'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
public: {
|
public: {
|
||||||
disabled: this.protocol.name === 'winrm',
|
disabled: this.protocol.name === 'winrm',
|
||||||
hidden: formValue => {
|
hidden: (formValue) => {
|
||||||
if (this.protocol.name === 'winrm') {
|
if (this.protocol.name === 'winrm') {
|
||||||
formValue['public'] = false
|
formValue['public'] = false
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -33,9 +33,6 @@
|
|||||||
>
|
>
|
||||||
<i :class="[isCheckShowPassword ? 'fa-eye-slash' : 'fa-eye']" class="fa" />
|
<i :class="[isCheckShowPassword ? 'fa-eye-slash' : 'fa-eye']" class="fa" />
|
||||||
</span>
|
</span>
|
||||||
<span v-if="filterTags.length > 0" class="clear-icon" @click="handleClearAll">
|
|
||||||
<i class="el-icon-circle-close" :title="$t('Clear')" />
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -103,7 +100,7 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
handleTagClose(tag) {
|
handleTagClose(tag) {
|
||||||
this.filterTags.splice(this.filterTags.indexOf(tag), 1)
|
this.filterTags.splice(this.filterTags.indexOf(tag), 1)
|
||||||
this.$emit('change', this.filterTags)
|
this.handleConfirm()
|
||||||
},
|
},
|
||||||
handleSelect(item) {
|
handleSelect(item) {
|
||||||
this.filterValue = item.value
|
this.filterValue = item.value
|
||||||
@@ -143,11 +140,6 @@ export default {
|
|||||||
},
|
},
|
||||||
handleShowPassword() {
|
handleShowPassword() {
|
||||||
this.isCheckShowPassword = !this.isCheckShowPassword
|
this.isCheckShowPassword = !this.isCheckShowPassword
|
||||||
},
|
|
||||||
handleClearAll() {
|
|
||||||
this.filterTags = []
|
|
||||||
this.$emit('change', this.filterTags)
|
|
||||||
this.$emit('input', this.filterTags)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -169,12 +161,11 @@ export default {
|
|||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: #c0c4cc;
|
border-color: #C0C4CC;
|
||||||
}
|
}
|
||||||
|
|
||||||
& ::v-deep .el-tag {
|
& ::v-deep .el-tag {
|
||||||
margin-bottom: 2px;
|
margin-bottom: 1px;
|
||||||
margin-top: 2px;
|
|
||||||
font-family: sans-serif !important;
|
font-family: sans-serif !important;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
@@ -186,7 +177,6 @@ export default {
|
|||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 150px;
|
|
||||||
|
|
||||||
& ::v-deep .el-input__inner {
|
& ::v-deep .el-input__inner {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
@@ -214,15 +204,4 @@ export default {
|
|||||||
color: #999999;
|
color: #999999;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear-icon {
|
|
||||||
display: inherit;
|
|
||||||
padding-right: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #c0c4cc;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #606164;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -68,7 +68,7 @@ export default {
|
|||||||
return { label: item.name, value: item.id }
|
return { label: item.name, value: item.id }
|
||||||
})
|
})
|
||||||
const url = vm.url || vm.ajax.url
|
const url = vm.url || vm.ajax.url
|
||||||
const getPageData = async ({ pageIndex, pageSize, keyword }) => {
|
const getPageData = async({ pageIndex, pageSize, keyword }) => {
|
||||||
const limit = pageSize
|
const limit = pageSize
|
||||||
const offset = (pageIndex - 1) * pageSize
|
const offset = (pageIndex - 1) * pageSize
|
||||||
const params = {
|
const params = {
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Select2 from './Select2.vue'
|
import Select2 from './Select2.vue'
|
||||||
import { hasUUID } from '@/utils/common/index'
|
import { hasUUID } from '@/utils/common'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { randomString } from '@/utils/common/index'
|
import { randomString } from '@/utils/string'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@@ -1,53 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-checkbox v-model="iValue">
|
|
||||||
{{ $t('ReadAgreeTo') }}
|
|
||||||
<a href="/core/auth/agreement/" target="_blank" style="color: #409eff">
|
|
||||||
{{ $t('TermsOfService') }}
|
|
||||||
</a>
|
|
||||||
{{ $t('and') }}
|
|
||||||
<a href="/core/auth/privacy/" target="_blank" style="color: #409eff">
|
|
||||||
{{ $t('PrivacyPolicy') }}
|
|
||||||
</a>
|
|
||||||
</el-checkbox>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: Boolean,
|
|
||||||
default: () => false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
iValue: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
iValue: {
|
|
||||||
handler(v) {
|
|
||||||
this.$emit('input', v)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.iValue = this.value
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
iValue: {
|
|
||||||
get() {
|
|
||||||
return this.value
|
|
||||||
},
|
|
||||||
set(v) {
|
|
||||||
this.$emit('update:value', v)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
@@ -1,71 +1,76 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="krry-main">
|
<div class="krry-main">
|
||||||
<krry-box
|
<el-row :gutter="10">
|
||||||
ref="noSelect"
|
<el-col :md="11" :sm="24">
|
||||||
:async="async"
|
<krry-box
|
||||||
:async-search-flag="asyncSearchFlag"
|
ref="noSelect"
|
||||||
:data-show-list="notSelectDataList"
|
:async="async"
|
||||||
:filter-placeholder="filterPlaceholder[0] || $tc('Search')"
|
:async-search-flag="asyncSearchFlag"
|
||||||
:filterable="filterable"
|
:data-show-list="notSelectDataList"
|
||||||
:highlight-color="highlightColor"
|
:filter-placeholder="filterPlaceholder[0] || $tc('Search')"
|
||||||
:is-highlight="isHighlight"
|
:filterable="filterable"
|
||||||
:is-last-page="isLastPage"
|
:highlight-color="highlightColor"
|
||||||
:operate-id="0"
|
:is-highlight="isHighlight"
|
||||||
:page-size="pageSize"
|
:is-last-page="isLastPage"
|
||||||
:page-texts="pageTexts"
|
:operate-id="0"
|
||||||
:show-clear-btn="showClearBtn"
|
:page-size="pageSize"
|
||||||
:title="boxTitle[0] || $tc('Selection')"
|
:page-texts="pageTexts"
|
||||||
@check-district="noCheckSelect"
|
:show-clear-btn="showClearBtn"
|
||||||
@search-word="searchWord"
|
:title="boxTitle[0] || $tc('Selection')"
|
||||||
@check-disable="checkDisable"
|
@check-district="noCheckSelect"
|
||||||
@get-data="getData"
|
@search-word="searchWord"
|
||||||
@get-data-by-keyword="getDataByKeyword"
|
@check-disable="checkDisable"
|
||||||
@clear-input="clearQueryInp('left')"
|
@get-data="getData"
|
||||||
/>
|
@get-data-by-keyword="getDataByKeyword"
|
||||||
|
@clear-input="clearQueryInp('left')"
|
||||||
<div class="opera">
|
|
||||||
<svg-icon v-if="transferOnCheck" class="arrow" icon-class="arrow" />
|
|
||||||
<template v-else>
|
|
||||||
<el-button
|
|
||||||
:disabled="disablePre"
|
|
||||||
class="el-transfer__button"
|
|
||||||
icon="el-icon-arrow-left"
|
|
||||||
size="mini"
|
|
||||||
@click="deleteData"
|
|
||||||
/>
|
/>
|
||||||
<el-button
|
</el-col>
|
||||||
:disabled="disableNex"
|
<el-col :md="2" :sm="24" class="buttons">
|
||||||
class="el-transfer__button"
|
<div class="opera">
|
||||||
icon="el-icon-arrow-right"
|
<svg-icon v-if="transferOnCheck" class="arrow" icon-class="arrow" />
|
||||||
size="mini"
|
<template v-else>
|
||||||
type="primary"
|
<el-button
|
||||||
@click="addData"
|
:disabled="disablePre"
|
||||||
|
class="el-transfer__button"
|
||||||
|
icon="el-icon-arrow-left"
|
||||||
|
size="mini"
|
||||||
|
@click="deleteData"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
:disabled="disableNex"
|
||||||
|
class="el-transfer__button"
|
||||||
|
icon="el-icon-arrow-right"
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
@click="addData"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :md="11" :sm="24">
|
||||||
|
<krry-box
|
||||||
|
ref="hasSelect"
|
||||||
|
:data-show-list="checkedData"
|
||||||
|
:filter-placeholder="filterPlaceholder[1] || $tc('Search')"
|
||||||
|
:filterable="filterable"
|
||||||
|
:highlight-color="highlightColor"
|
||||||
|
:is-highlight="isHighlight"
|
||||||
|
:operate-id="1"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:page-texts="pageTexts"
|
||||||
|
:show-clear-btn="showClearBtn"
|
||||||
|
:title="boxTitle[1] || $tc('Selected')"
|
||||||
|
@check-district="hasCheckSelect"
|
||||||
|
@search-word="searchWord"
|
||||||
|
@check-disable="checkDisable"
|
||||||
|
@clear-input="clearQueryInp('right')"
|
||||||
/>
|
/>
|
||||||
</template>
|
</el-col>
|
||||||
</div>
|
</el-row>
|
||||||
|
|
||||||
<krry-box
|
|
||||||
ref="hasSelect"
|
|
||||||
:data-show-list="checkedData"
|
|
||||||
:filter-placeholder="filterPlaceholder[1] || $tc('Search')"
|
|
||||||
:filterable="filterable"
|
|
||||||
:highlight-color="highlightColor"
|
|
||||||
:is-highlight="isHighlight"
|
|
||||||
:operate-id="1"
|
|
||||||
:page-size="pageSize"
|
|
||||||
:page-texts="pageTexts"
|
|
||||||
:show-clear-btn="showClearBtn"
|
|
||||||
:title="boxTitle[1] || $tc('Selected')"
|
|
||||||
@check-district="hasCheckSelect"
|
|
||||||
@search-word="searchWord"
|
|
||||||
@check-disable="checkDisable"
|
|
||||||
@clear-input="clearQueryInp('right')"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/* eslint-disable */
|
|
||||||
import krryBox from './models/box'
|
import krryBox from './models/box'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -207,14 +212,20 @@ export default {
|
|||||||
// this.checkedData 为空 且 从来没有将已选区置为空,则从 selectedData 获取
|
// this.checkedData 为空 且 从来没有将已选区置为空,则从 selectedData 获取
|
||||||
if ((!this.checkedData.length && !this.manualEmpty) || selectedChange) {
|
if ((!this.checkedData.length && !this.manualEmpty) || selectedChange) {
|
||||||
this.checkedData = JSON.parse(JSON.stringify(this.selectedData))
|
this.checkedData = JSON.parse(JSON.stringify(this.selectedData))
|
||||||
const keywords = this.$refs.hasSelect ? this.$refs.hasSelect.searchWord : ''
|
const keywords = this.$refs.hasSelect
|
||||||
|
? this.$refs.hasSelect.searchWord
|
||||||
|
: ''
|
||||||
keywords && this.searchWord(keywords, 1)
|
keywords && this.searchWord(keywords, 1)
|
||||||
}
|
}
|
||||||
if (!this.async) {
|
if (!this.async) {
|
||||||
this.selectListCheck = JSON.parse(JSON.stringify(this.checkedData))
|
this.selectListCheck = JSON.parse(JSON.stringify(this.checkedData))
|
||||||
const checkDataId = this.selectListCheck.map(ele => ele.id)
|
const checkDataId = this.selectListCheck.map(ele => ele.id)
|
||||||
this.notSelectDataList = this.originList.filter(ele => !checkDataId.includes(ele.id))
|
this.notSelectDataList = this.originList.filter(
|
||||||
this.dataListNoCheck = JSON.parse(JSON.stringify(this.notSelectDataList))
|
ele => !checkDataId.includes(ele.id)
|
||||||
|
)
|
||||||
|
this.dataListNoCheck = JSON.parse(
|
||||||
|
JSON.stringify(this.notSelectDataList)
|
||||||
|
)
|
||||||
} else {
|
} else {
|
||||||
if (selectedChange) {
|
if (selectedChange) {
|
||||||
this.selectListCheck = JSON.parse(JSON.stringify(this.checkedData))
|
this.selectListCheck = JSON.parse(JSON.stringify(this.checkedData))
|
||||||
@@ -225,7 +236,9 @@ export default {
|
|||||||
!checkDataId.includes(ele.id) &&
|
!checkDataId.includes(ele.id) &&
|
||||||
(ele.label.includes(this.noSelectKeyword) || this.asyncSearchFlag)
|
(ele.label.includes(this.noSelectKeyword) || this.asyncSearchFlag)
|
||||||
)
|
)
|
||||||
this.dataListNoCheck = this.originList.filter(ele => !checkDataId.includes(ele.id))
|
this.dataListNoCheck = this.originList.filter(
|
||||||
|
ele => !checkDataId.includes(ele.id)
|
||||||
|
)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
searchWord(keyword, titleId) {
|
searchWord(keyword, titleId) {
|
||||||
@@ -234,11 +247,15 @@ export default {
|
|||||||
if (titleId === 0) {
|
if (titleId === 0) {
|
||||||
this.noSelectKeyword = keyword
|
this.noSelectKeyword = keyword
|
||||||
if (!this.asyncSearchFlag) {
|
if (!this.asyncSearchFlag) {
|
||||||
this.notSelectDataList = this.dataListNoCheck.filter(val => val.label.includes(keyword))
|
this.notSelectDataList = this.dataListNoCheck.filter(val =>
|
||||||
|
val.label.includes(keyword)
|
||||||
|
)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.haSelectKeyword = keyword
|
this.haSelectKeyword = keyword
|
||||||
this.checkedData = this.selectListCheck.filter(val => val.label.includes(keyword))
|
this.checkedData = this.selectListCheck.filter(val =>
|
||||||
|
val.label.includes(keyword)
|
||||||
|
)
|
||||||
}
|
}
|
||||||
const refsName = titleId === 0 ? 'noSelect' : 'hasSelect'
|
const refsName = titleId === 0 ? 'noSelect' : 'hasSelect'
|
||||||
// 延迟执行
|
// 延迟执行
|
||||||
@@ -277,21 +294,29 @@ export default {
|
|||||||
!noCheckDataId.includes(ele.id) &&
|
!noCheckDataId.includes(ele.id) &&
|
||||||
(ele.label.includes(this.noSelectKeyword) || this.asyncSearchFlag)
|
(ele.label.includes(this.noSelectKeyword) || this.asyncSearchFlag)
|
||||||
)
|
)
|
||||||
this.dataListNoCheck = this.dataListNoCheck.filter(ele => !noCheckDataId.includes(ele.id))
|
this.dataListNoCheck = this.dataListNoCheck.filter(
|
||||||
|
ele => !noCheckDataId.includes(ele.id)
|
||||||
|
)
|
||||||
// 已选区数据增加
|
// 已选区数据增加
|
||||||
if (!this.async && this.sort) {
|
if (!this.async && this.sort) {
|
||||||
// 排序,从固定不变的所有数据中过滤,顺序就不会乱。但若数据量大就会比较卡
|
// 排序,从固定不变的所有数据中过滤,顺序就不会乱。但若数据量大就会比较卡
|
||||||
// 异步分页不支持排序
|
// 异步分页不支持排序
|
||||||
const dataListNoCheckId = this.dataListNoCheck.map(ele => ele.id)
|
const dataListNoCheckId = this.dataListNoCheck.map(ele => ele.id)
|
||||||
this.checkedData = this.originList.filter(
|
this.checkedData = this.originList.filter(
|
||||||
ele => !dataListNoCheckId.includes(ele.id) && ele.label.includes(this.haSelectKeyword)
|
ele =>
|
||||||
|
!dataListNoCheckId.includes(ele.id) &&
|
||||||
|
ele.label.includes(this.haSelectKeyword)
|
||||||
|
)
|
||||||
|
this.selectListCheck = this.originList.filter(
|
||||||
|
ele => !dataListNoCheckId.includes(ele.id)
|
||||||
)
|
)
|
||||||
this.selectListCheck = this.originList.filter(ele => !dataListNoCheckId.includes(ele.id))
|
|
||||||
} else {
|
} else {
|
||||||
// 这种效率更高的方法,但不能排序
|
// 这种效率更高的方法,但不能排序
|
||||||
this.checkedData.push(...this.noCheckData)
|
this.checkedData.push(...this.noCheckData)
|
||||||
this.selectListCheck.push(...this.noCheckData)
|
this.selectListCheck.push(...this.noCheckData)
|
||||||
this.checkedData = this.checkedData.filter(ele => ele.label.includes(this.haSelectKeyword))
|
this.checkedData = this.checkedData.filter(ele =>
|
||||||
|
ele.label.includes(this.haSelectKeyword)
|
||||||
|
)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 从已选中删除
|
// 从已选中删除
|
||||||
@@ -299,9 +324,13 @@ export default {
|
|||||||
// 已选区数据过滤
|
// 已选区数据过滤
|
||||||
const hasCheckDataId = this.hasCheckData.map(ele => ele.id)
|
const hasCheckDataId = this.hasCheckData.map(ele => ele.id)
|
||||||
this.checkedData = this.checkedData.filter(
|
this.checkedData = this.checkedData.filter(
|
||||||
ele => !hasCheckDataId.includes(ele.id) && ele.label.includes(this.haSelectKeyword)
|
ele =>
|
||||||
|
!hasCheckDataId.includes(ele.id) &&
|
||||||
|
ele.label.includes(this.haSelectKeyword)
|
||||||
|
)
|
||||||
|
this.selectListCheck = this.selectListCheck.filter(
|
||||||
|
ele => !hasCheckDataId.includes(ele.id)
|
||||||
)
|
)
|
||||||
this.selectListCheck = this.selectListCheck.filter(ele => !hasCheckDataId.includes(ele.id))
|
|
||||||
|
|
||||||
this.manualEmpty = !this.checkedData.length
|
this.manualEmpty = !this.checkedData.length
|
||||||
|
|
||||||
@@ -314,7 +343,9 @@ export default {
|
|||||||
!selectListCheckId.includes(ele.id) &&
|
!selectListCheckId.includes(ele.id) &&
|
||||||
(ele.label.includes(this.noSelectKeyword) || this.asyncSearchFlag)
|
(ele.label.includes(this.noSelectKeyword) || this.asyncSearchFlag)
|
||||||
)
|
)
|
||||||
this.dataListNoCheck = this.originList.filter(ele => !selectListCheckId.includes(ele.id))
|
this.dataListNoCheck = this.originList.filter(
|
||||||
|
ele => !selectListCheckId.includes(ele.id)
|
||||||
|
)
|
||||||
},
|
},
|
||||||
// 提供获取已选数据的钩子
|
// 提供获取已选数据的钩子
|
||||||
getSelectedData() {
|
getSelectedData() {
|
||||||
@@ -339,7 +370,11 @@ export default {
|
|||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.noSelect.asyncSearch = true
|
this.$refs.noSelect.asyncSearch = true
|
||||||
})
|
})
|
||||||
const resData = await this.getSearchData(keyword, pageIndex, this.pageSize)
|
const resData = await this.getSearchData(
|
||||||
|
keyword,
|
||||||
|
pageIndex,
|
||||||
|
this.pageSize
|
||||||
|
)
|
||||||
if (Array.isArray(resData) && resData.length) {
|
if (Array.isArray(resData) && resData.length) {
|
||||||
this.asyncDataList = resData
|
this.asyncDataList = resData
|
||||||
this.notSelectDataList = resData
|
this.notSelectDataList = resData
|
||||||
@@ -381,34 +416,45 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.krry-main {
|
.krry-main {
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
min-width: 600px;
|
min-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
.opera {
|
.inner-center {
|
||||||
position: relative;
|
margin: 0 5px;
|
||||||
display: flex;
|
}
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 415px;
|
|
||||||
|
|
||||||
.arrow {
|
.buttons {
|
||||||
width: 1.25em;
|
vertical-align: middle;
|
||||||
height: 1.25em;
|
}
|
||||||
color: #888888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button.is-circle {
|
.opera {
|
||||||
border-radius: 50%;
|
position: relative;
|
||||||
padding: 12px;
|
display: flex;
|
||||||
display: block;
|
justify-content: center;
|
||||||
margin: 25px auto;
|
align-items: center;
|
||||||
}
|
height: 415px;
|
||||||
|
|
||||||
.el-transfer__button {
|
.arrow {
|
||||||
padding: 5px;
|
width: 1.25em;
|
||||||
}
|
height: 1.25em;
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 992px) {
|
||||||
|
margin: 8px 8px;
|
||||||
|
text-align: start
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button.is-circle {
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 12px;
|
||||||
|
display: block;
|
||||||
|
margin: 25px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-transfer__button {
|
||||||
|
padding: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
<script type="text/jsx">
|
<script type="text/jsx">
|
||||||
import Sortable from 'sortablejs'
|
import Sortable from 'sortablejs'
|
||||||
import DataTable from '@/components/Table/DataTable/index.vue'
|
import DataTable from '@/components/Table/DataTable/index.vue'
|
||||||
import { newURL, ObjectLocalStorage, replaceAllUUID } from '@/utils/common/index'
|
import { newURL, ObjectLocalStorage, replaceAllUUID } from '@/utils/common'
|
||||||
import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
|
import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
|
||||||
import { TableColumnsGenerator } from './utils'
|
import { TableColumnsGenerator } from './utils'
|
||||||
|
|
||||||
@@ -60,24 +60,25 @@ export default {
|
|||||||
},
|
},
|
||||||
isDeactivated: false,
|
isDeactivated: false,
|
||||||
tableColumnsStorage: this.getTableColumnsStorage(),
|
tableColumnsStorage: this.getTableColumnsStorage(),
|
||||||
sortable: null,
|
sortable: null
|
||||||
inited: false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
config: {
|
config: {
|
||||||
immediate: false,
|
|
||||||
handler: _.debounce(function(iNew, iOld) {
|
handler: _.debounce(function(iNew, iOld) {
|
||||||
if (this.isDeactivated || !this.inited) {
|
if (this.isDeactivated) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const changed = this.isConfigChanged(iNew, iOld)
|
try {
|
||||||
if (!changed) {
|
if (JSON.stringify(iNew) === JSON.stringify(iOld)) {
|
||||||
return
|
return
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
this.$log.error('JsonStringify Error: ', error)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.optionUrlMetaAndGenCols()
|
this.optionUrlMetaAndGenCols()
|
||||||
this.$log.debug('AutoDataTable Config change found')
|
this.$log.debug('AutoDataTable Config change found, ', this.isDeactivated)
|
||||||
}, 200)
|
}, 200)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -92,35 +93,6 @@ export default {
|
|||||||
this.isDeactivated = false
|
this.isDeactivated = false
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
isConfigChanged(iNew, iOld) {
|
|
||||||
const _iNew = _.cloneDeep(iNew)
|
|
||||||
const _iOld = _.cloneDeep(iOld)
|
|
||||||
delete _iNew.columns
|
|
||||||
delete _iOld.columns
|
|
||||||
const oldMeta = _iNew.columnsMeta
|
|
||||||
const newMeta = _iOld.columnsMeta
|
|
||||||
const metas = [oldMeta, newMeta]
|
|
||||||
for (const meta of metas) {
|
|
||||||
if (!meta) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
for (const [key, value] of Object.entries(meta)) {
|
|
||||||
if (!key || !value || typeof value !== 'object') {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
delete value['formatter']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (JSON.stringify(_iNew) === JSON.stringify(_iOld)) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
this.$log.error('JsonStringify Error: ', error)
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
},
|
|
||||||
setColumnDraggable() {
|
setColumnDraggable() {
|
||||||
const el = this.$el.querySelector('.el-table__header-wrapper thead tr')
|
const el = this.$el.querySelector('.el-table__header-wrapper thead tr')
|
||||||
if (!el) {
|
if (!el) {
|
||||||
@@ -266,7 +238,6 @@ export default {
|
|||||||
if (this.$refs.dataTable) {
|
if (this.$refs.dataTable) {
|
||||||
this.$refs.dataTable.getList()
|
this.$refs.dataTable.getList()
|
||||||
}
|
}
|
||||||
this.inited = true
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
orderingColumns(columns) {
|
orderingColumns(columns) {
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { toSentenceCase } from '@/utils/common/index'
|
import { toSentenceCase } from '@/utils/common'
|
||||||
import i18n from '@/i18n/i18n'
|
import i18n from '@/i18n/i18n'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@@ -225,15 +225,11 @@ export class TableColumnsGenerator {
|
|||||||
padding = '6px'
|
padding = '6px'
|
||||||
value = '-'
|
value = '-'
|
||||||
}
|
}
|
||||||
return h(
|
return h('span', {
|
||||||
'span',
|
'style': {
|
||||||
{
|
marginLeft: padding
|
||||||
style: {
|
}
|
||||||
marginLeft: padding
|
}, [value])
|
||||||
}
|
|
||||||
},
|
|
||||||
[value]
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return col
|
return col
|
||||||
@@ -285,11 +281,10 @@ export class TableColumnsGenerator {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span>
|
<span>{column.label}
|
||||||
{column.label}
|
|
||||||
<el-tooltip {...binds}>
|
<el-tooltip {...binds}>
|
||||||
<div slot='content' v-sanitize={helpTip} />
|
<div slot='content' v-sanitize={helpTip}/>
|
||||||
<i class='fa fa-question-circle-o help-tip-icon' style='padding-left: 2px' />
|
<i class='fa fa-question-circle-o help-tip-icon' style='padding-left: 2px'/>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</span>
|
</span>
|
||||||
)
|
)
|
||||||
@@ -304,13 +299,16 @@ export class TableColumnsGenerator {
|
|||||||
return col
|
return col
|
||||||
}
|
}
|
||||||
if (column.type === 'boolean') {
|
if (column.type === 'boolean') {
|
||||||
col.filters = [{ text: i18n.t('Yes'), value: true }, { text: i18n.t('No'), value: false }]
|
col.filters = [
|
||||||
|
{ text: i18n.t('Yes'), value: true },
|
||||||
|
{ text: i18n.t('No'), value: false }
|
||||||
|
]
|
||||||
col.sortable = false
|
col.sortable = false
|
||||||
col['column-key'] = col.prop
|
col['column-key'] = col.prop
|
||||||
}
|
}
|
||||||
if (column.type === 'choice' && column.choices) {
|
if (column.type === 'choice' && column.choices) {
|
||||||
col.filters = column.choices.map(item => {
|
col.filters = column.choices.map(item => {
|
||||||
if (typeof item.value === 'boolean') {
|
if (typeof (item.value) === 'boolean') {
|
||||||
if (item.value) {
|
if (item.value) {
|
||||||
return { text: item['label'], value: 'True' }
|
return { text: item['label'], value: 'True' }
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -99,9 +99,9 @@ export default {
|
|||||||
totalData: [],
|
totalData: [],
|
||||||
page: defaultFirstPage,
|
page: defaultFirstPage,
|
||||||
extraQuery: {},
|
extraQuery: {},
|
||||||
paginationSize: 12,
|
paginationSize: 6,
|
||||||
paginationLayout: 'total, sizes, prev, pager, next',
|
paginationLayout: 'total, sizes, prev, pager, next',
|
||||||
paginationSizes: [12, 24, 36],
|
paginationSizes: [6, 18, 27],
|
||||||
loading: true,
|
loading: true,
|
||||||
axiosConfig: {
|
axiosConfig: {
|
||||||
raw: 1,
|
raw: 1,
|
||||||
@@ -212,7 +212,7 @@ export default {
|
|||||||
this.$confirm(msg, this.$tc('Info'), {
|
this.$confirm(msg, this.$tc('Info'), {
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
confirmButtonClass: 'el-button--danger',
|
confirmButtonClass: 'el-button--danger',
|
||||||
beforeClose: async (action, instance, done) => {
|
beforeClose: async(action, instance, done) => {
|
||||||
if (action !== 'confirm') return done()
|
if (action !== 'confirm') return done()
|
||||||
const deleteFunc = this.tableConfig.onDelete || this.defaultPerformDelete
|
const deleteFunc = this.tableConfig.onDelete || this.defaultPerformDelete
|
||||||
await deleteFunc(obj)
|
await deleteFunc(obj)
|
||||||
@@ -261,7 +261,7 @@ export default {
|
|||||||
min-width: 330px;
|
min-width: 330px;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
height: 180px;
|
//height: 230px;
|
||||||
width: 380px;
|
width: 380px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
|
||||||
|
|||||||
@@ -5,11 +5,6 @@
|
|||||||
<slot name="no-data" />
|
<slot name="no-data" />
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<!--
|
|
||||||
过滤 selection 相关事件的透传,避免父组件收到 el-table 原生的“当前页” selection,
|
|
||||||
导致跨页选择(persistSelection)被覆盖,只剩当页数据。
|
|
||||||
选择事件统一走 selectStrategy,在内部维护全量 selected 并向外 emit。
|
|
||||||
-->
|
|
||||||
<el-table
|
<el-table
|
||||||
ref="table"
|
ref="table"
|
||||||
v-loading="tableLoading"
|
v-loading="tableLoading"
|
||||||
@@ -17,7 +12,7 @@
|
|||||||
:row-class-name="rowClassName"
|
:row-class-name="rowClassName"
|
||||||
v-bind="tableAttrs"
|
v-bind="tableAttrs"
|
||||||
@select="selectStrategy.onSelect"
|
@select="selectStrategy.onSelect"
|
||||||
v-on="forwardListeners"
|
v-on="$listeners"
|
||||||
@selection-change="selectStrategy.onSelectionChange"
|
@selection-change="selectStrategy.onSelectionChange"
|
||||||
@select-all="handleSelectAll($event, canSelect)"
|
@select-all="handleSelectAll($event, canSelect)"
|
||||||
@sort-change="onSortChange"
|
@sort-change="onSortChange"
|
||||||
@@ -28,18 +23,27 @@
|
|||||||
<template v-if="hasSelect">
|
<template v-if="hasSelect">
|
||||||
<el-data-table-column
|
<el-data-table-column
|
||||||
key="selection-key"
|
key="selection-key"
|
||||||
v-bind="{ align: columnsAlign, ...columns[0] }"
|
v-bind="{align: columnsAlign, ...columns[0]}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<el-data-table-column key="tree-ctrl" v-bind="{ align: columnsAlign, ...columns[1] }">
|
<el-data-table-column
|
||||||
|
key="tree-ctrl"
|
||||||
|
v-bind="{align: columnsAlign, ...columns[1]}"
|
||||||
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span v-for="space in scope.row._level" :key="space" class="ms-tree-space" />
|
<span
|
||||||
|
v-for="space in scope.row._level"
|
||||||
|
:key="space"
|
||||||
|
class="ms-tree-space"
|
||||||
|
/>
|
||||||
<span
|
<span
|
||||||
v-if="iconShow(scope.$index, scope.row)"
|
v-if="iconShow(scope.$index, scope.row)"
|
||||||
class="tree-ctrl"
|
class="tree-ctrl"
|
||||||
@click="toggleExpanded(scope.$index)"
|
@click="toggleExpanded(scope.$index)"
|
||||||
>
|
>
|
||||||
<i :class="`el-icon-${scope.row._expanded ? 'minus' : 'plus'}`" />
|
<i
|
||||||
|
:class="`el-icon-${scope.row._expanded ? 'minus' : 'plus'}`"
|
||||||
|
/>
|
||||||
</span>
|
</span>
|
||||||
{{ scope.row[columns[1].prop] }}
|
{{ scope.row[columns[1].prop] }}
|
||||||
</template>
|
</template>
|
||||||
@@ -48,16 +52,23 @@
|
|||||||
<el-data-table-column
|
<el-data-table-column
|
||||||
v-for="col in columns.filter((c, i) => i !== 0 && i !== 1)"
|
v-for="col in columns.filter((c, i) => i !== 0 && i !== 1)"
|
||||||
:key="col.prop"
|
:key="col.prop"
|
||||||
v-bind="{ align: columnsAlign, ...col }"
|
v-bind="{align: columnsAlign, ...col}"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!--无选择-->
|
<!--无选择-->
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<!--展开这列, 丢失 el-data-table-column属性-->
|
<!--展开这列, 丢失 el-data-table-column属性-->
|
||||||
<el-data-table-column key="tree-ctrl" v-bind="{ align: columnsAlign, ...columns[0] }">
|
<el-data-table-column
|
||||||
|
key="tree-ctrl"
|
||||||
|
v-bind="{align: columnsAlign, ...columns[0]}"
|
||||||
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span v-for="space in scope.row._level" :key="space" class="ms-tree-space" />
|
<span
|
||||||
|
v-for="space in scope.row._level"
|
||||||
|
:key="space"
|
||||||
|
class="ms-tree-space"
|
||||||
|
/>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
v-if="iconShow(scope.$index, scope.row)"
|
v-if="iconShow(scope.$index, scope.row)"
|
||||||
@@ -73,19 +84,14 @@
|
|||||||
<el-data-table-column
|
<el-data-table-column
|
||||||
v-for="col in columns.filter((c, i) => i !== 0)"
|
v-for="col in columns.filter((c, i) => i !== 0)"
|
||||||
:key="col.prop"
|
:key="col.prop"
|
||||||
v-bind="{ align: columnsAlign, ...col }"
|
v-bind="{align: columnsAlign, ...col}"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!--非树-->
|
<!--非树-->
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<el-data-table-column
|
<el-data-table-column v-if="hasSelection" :align="selectionAlign" :selectable="canSelect" type="selection" />
|
||||||
v-if="hasSelection"
|
|
||||||
:align="selectionAlign"
|
|
||||||
:selectable="canSelect"
|
|
||||||
type="selection"
|
|
||||||
/>
|
|
||||||
<el-data-table-column
|
<el-data-table-column
|
||||||
v-for="col in columns"
|
v-for="col in columns"
|
||||||
:key="col.prop"
|
:key="col.prop"
|
||||||
@@ -94,14 +100,14 @@
|
|||||||
:filters="col.filters || null"
|
:filters="col.filters || null"
|
||||||
:formatter="typeof col.formatter === 'function' ? col.formatter : null"
|
:formatter="typeof col.formatter === 'function' ? col.formatter : null"
|
||||||
:title="col.label"
|
:title="col.label"
|
||||||
v-bind="{ align: columnsAlign, ...col }"
|
v-bind="{align: columnsAlign, ...col}"
|
||||||
>
|
>
|
||||||
<template #header>
|
<template #header>
|
||||||
<span :title="col.label">{{ col.label }}</span>
|
<span :title="col.label">{{ col.label }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template
|
<template
|
||||||
v-if="col.formatter && typeof col.formatter !== 'function'"
|
v-if="col.formatter && typeof col.formatter !== 'function'"
|
||||||
v-slot:default="{ row, column, $index }"
|
v-slot:default="{row, column, $index}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
:is="col.formatter"
|
:is="col.formatter"
|
||||||
@@ -155,9 +161,9 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import _get from 'lodash/get'
|
import _get from 'lodash.get'
|
||||||
import _values from 'lodash/values'
|
import _values from 'lodash.values'
|
||||||
import _isEmpty from 'lodash/isEmpty'
|
import _isEmpty from 'lodash.isempty'
|
||||||
import SelfLoadingButton from './components/self-loading-button.vue'
|
import SelfLoadingButton from './components/self-loading-button.vue'
|
||||||
import TheDialog, { dialogModes } from './components/the-dialog.vue'
|
import TheDialog, { dialogModes } from './components/the-dialog.vue'
|
||||||
import ElDataTableColumn from './components/el-data-table-column'
|
import ElDataTableColumn from './components/el-data-table-column'
|
||||||
@@ -269,7 +275,8 @@ export default {
|
|||||||
*/
|
*/
|
||||||
beforeSearch: {
|
beforeSearch: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default() {}
|
default() {
|
||||||
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 单选, 适用场景: 不可以批量删除
|
* 单选, 适用场景: 不可以批量删除
|
||||||
@@ -434,7 +441,8 @@ export default {
|
|||||||
*/
|
*/
|
||||||
onEdit: {
|
onEdit: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default(row) {}
|
default(row) {
|
||||||
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 点击删除按钮时的方法, 当默认删除方法不满足需求时使用, 需要返回promise
|
* 点击删除按钮时的方法, 当默认删除方法不满足需求时使用, 需要返回promise
|
||||||
@@ -443,7 +451,9 @@ export default {
|
|||||||
onDelete: {
|
onDelete: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default(data) {
|
default(data) {
|
||||||
const ids = Array.isArray(data) ? data.map(v => v[this.id]).join(',') : data[this.id]
|
const ids = Array.isArray(data)
|
||||||
|
? data.map(v => v[this.id]).join(',')
|
||||||
|
: data[this.id]
|
||||||
return this.$axios.delete(this.url + '/' + ids + '/', this.axiosConfig)
|
return this.$axios.delete(this.url + '/' + ids + '/', this.axiosConfig)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -697,8 +707,8 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
/*
|
/*
|
||||||
* 设置默认对齐方式
|
* 设置默认对齐方式
|
||||||
*/
|
*/
|
||||||
defaultAlign: {
|
defaultAlign: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'center'
|
default: 'center'
|
||||||
@@ -713,7 +723,8 @@ export default {
|
|||||||
},
|
},
|
||||||
extraPaginationAttrs: {
|
extraPaginationAttrs: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {}
|
default: () => {
|
||||||
|
}
|
||||||
},
|
},
|
||||||
hasSelection: {
|
hasSelection: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@@ -799,16 +810,6 @@ export default {
|
|||||||
selectStrategy() {
|
selectStrategy() {
|
||||||
return getSelectStrategy(this)
|
return getSelectStrategy(this)
|
||||||
},
|
},
|
||||||
// 过滤会与内部选择策略冲突的事件,避免父组件只拿到当前页 selection
|
|
||||||
forwardListeners() {
|
|
||||||
const listeners = { ...this.$listeners }
|
|
||||||
delete listeners['selection-change']
|
|
||||||
delete listeners['select']
|
|
||||||
delete listeners['select-all']
|
|
||||||
// 外层如需监听 selection 变化,请监听本组件透出的 selection-change,
|
|
||||||
// 该事件来自选择策略,已汇总跨页后的全量 selected
|
|
||||||
return listeners
|
|
||||||
},
|
|
||||||
searchLocatedSlotKeys() {
|
searchLocatedSlotKeys() {
|
||||||
return getLocatedSlotKeys(this.$slots, 'search:')
|
return getLocatedSlotKeys(this.$slots, 'search:')
|
||||||
},
|
},
|
||||||
@@ -896,7 +897,9 @@ export default {
|
|||||||
}
|
}
|
||||||
Object.assign(query, this._extraQuery)
|
Object.assign(query, this._extraQuery)
|
||||||
Object.assign(query, this.innerQuery)
|
Object.assign(query, this.innerQuery)
|
||||||
query[this.pageSizeKey] = this.hasPagination ? this.size : this.noPaginationSize
|
query[this.pageSizeKey] = this.hasPagination
|
||||||
|
? this.size
|
||||||
|
: this.noPaginationSize
|
||||||
|
|
||||||
// 根据偏移值计算接口正确的页数
|
// 根据偏移值计算接口正确的页数
|
||||||
const pageOffset = this.firstPage - defaultFirstPage
|
const pageOffset = this.firstPage - defaultFirstPage
|
||||||
@@ -978,7 +981,9 @@ export default {
|
|||||||
formValue = this.$refs.searchForm.getFormValue()
|
formValue = this.$refs.searchForm.getFormValue()
|
||||||
Object.assign(query, formValue)
|
Object.assign(query, formValue)
|
||||||
}
|
}
|
||||||
const queryStr = (url.indexOf('?') > -1 ? '&' : '?') + queryUtil.stringify(query, '=', '&')
|
const queryStr =
|
||||||
|
(url.indexOf('?') > -1 ? '&' : '?') +
|
||||||
|
queryUtil.stringify(query, '=', '&')
|
||||||
|
|
||||||
// 请求开始
|
// 请求开始
|
||||||
this.tableLoading = loading
|
this.tableLoading = loading
|
||||||
@@ -998,7 +1003,10 @@ export default {
|
|||||||
|
|
||||||
// 不分页
|
// 不分页
|
||||||
if (!this.hasPagination) {
|
if (!this.hasPagination) {
|
||||||
data = _get(resp, this.dataPath) || _get(resp, noPaginationDataPath) || []
|
data =
|
||||||
|
_get(resp, this.dataPath) ||
|
||||||
|
_get(resp, noPaginationDataPath) ||
|
||||||
|
[]
|
||||||
this.total = data.length
|
this.total = data.length
|
||||||
} else {
|
} else {
|
||||||
data = _get(resp, this.dataPath) || []
|
data = _get(resp, this.dataPath) || []
|
||||||
@@ -1181,7 +1189,7 @@ export default {
|
|||||||
this.$confirm(this.deleteMessage(data), this.$t('Info'), {
|
this.$confirm(this.deleteMessage(data), this.$t('Info'), {
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
confirmButtonClass: 'el-button--danger',
|
confirmButtonClass: 'el-button--danger',
|
||||||
beforeClose: async (action, instance, done) => {
|
beforeClose: async(action, instance, done) => {
|
||||||
if (action !== 'confirm') return done()
|
if (action !== 'confirm') return done()
|
||||||
|
|
||||||
instance.confirmButtonLoading = true
|
instance.confirmButtonLoading = true
|
||||||
@@ -1217,7 +1225,11 @@ export default {
|
|||||||
}
|
}
|
||||||
const remain = this.data.length - deleteCount
|
const remain = this.data.length - deleteCount
|
||||||
const lastPage = Math.ceil(this.total / this.size)
|
const lastPage = Math.ceil(this.total / this.size)
|
||||||
if (remain === 0 && this.page === lastPage && this.page > defaultFirstPage) {
|
if (
|
||||||
|
remain === 0 &&
|
||||||
|
this.page === lastPage &&
|
||||||
|
this.page > defaultFirstPage
|
||||||
|
) {
|
||||||
this.page--
|
this.page--
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -1245,14 +1257,20 @@ export default {
|
|||||||
tmp.push(record)
|
tmp.push(record)
|
||||||
|
|
||||||
if (record[this.treeChildKey] && record[this.treeChildKey].length > 0) {
|
if (record[this.treeChildKey] && record[this.treeChildKey].length > 0) {
|
||||||
const children = this.tree2Array(record[this.treeChildKey], expandAll, record, _level)
|
const children = this.tree2Array(
|
||||||
|
record[this.treeChildKey],
|
||||||
|
expandAll,
|
||||||
|
record,
|
||||||
|
_level
|
||||||
|
)
|
||||||
tmp = tmp.concat(children)
|
tmp = tmp.concat(children)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return tmp
|
return tmp
|
||||||
},
|
},
|
||||||
rowClassName(...args) {
|
rowClassName(...args) {
|
||||||
let rcn = this.tableAttrs.rowClassName || this.tableAttrs['row-class-name'] || ''
|
let rcn =
|
||||||
|
this.tableAttrs.rowClassName || this.tableAttrs['row-class-name'] || ''
|
||||||
if (typeof rcn === 'function') rcn = rcn(...args)
|
if (typeof rcn === 'function') rcn = rcn(...args)
|
||||||
if (this.isTree) rcn += ' ' + this.showRow(...args)
|
if (this.isTree) rcn += ' ' + this.showRow(...args)
|
||||||
return rcn
|
return rcn
|
||||||
|
|||||||
@@ -1,9 +1,14 @@
|
|||||||
|
/**
|
||||||
|
* 两种多选策略:Normal 和 PersistSelection
|
||||||
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 多选策略接口
|
* 多选策略接口
|
||||||
*/
|
*/
|
||||||
class StrategyAbstract {
|
class StrategyAbstract {
|
||||||
constructor(elDataTable) {
|
constructor(elDataTable) {
|
||||||
this.elDataTable = elDataTable
|
this.elDataTable = elDataTable
|
||||||
|
// 绑定this后可直接在template中使用
|
||||||
this.onSelectionChange = this.onSelectionChange.bind(this)
|
this.onSelectionChange = this.onSelectionChange.bind(this)
|
||||||
this.onSelect = this.onSelect.bind(this)
|
this.onSelect = this.onSelect.bind(this)
|
||||||
this.onSelectAll = this.onSelectAll.bind(this)
|
this.onSelectAll = this.onSelectAll.bind(this)
|
||||||
@@ -13,22 +18,39 @@ class StrategyAbstract {
|
|||||||
return this.elDataTable.$refs.table
|
return this.elDataTable.$refs.table
|
||||||
}
|
}
|
||||||
|
|
||||||
onSelectionChange() {}
|
onSelectionChange() {
|
||||||
onSelect() {}
|
}
|
||||||
onSelectAll() {}
|
|
||||||
toggleRowSelection() {}
|
onSelect() {
|
||||||
clearSelection() {}
|
}
|
||||||
updateElTableSelection() {}
|
|
||||||
|
onSelectAll() {
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleRowSelection() {
|
||||||
|
}
|
||||||
|
|
||||||
|
clearSelection() {
|
||||||
|
}
|
||||||
|
|
||||||
|
updateElTableSelection() {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 普通策略。由 el-table 自己维护 selection
|
* 普通策略。由el-table维护selected
|
||||||
*/
|
*/
|
||||||
class StrategyNormal extends StrategyAbstract {
|
class StrategyNormal extends StrategyAbstract {
|
||||||
|
/**
|
||||||
|
* normal模式下只需要监听selection-change事件
|
||||||
|
*/
|
||||||
onSelectionChange(val) {
|
onSelectionChange(val) {
|
||||||
this.elDataTable.selected = val
|
this.elDataTable.selected = val
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* toggleRowSelection和clearSelection的表现与el-table一致
|
||||||
|
*/
|
||||||
toggleRowSelection(...args) {
|
toggleRowSelection(...args) {
|
||||||
return this.elTable.toggleRowSelection(...args)
|
return this.elTable.toggleRowSelection(...args)
|
||||||
}
|
}
|
||||||
@@ -39,28 +61,44 @@ class StrategyNormal extends StrategyAbstract {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 跨页保存多选策略
|
* 跨页保存多选策略。手动维护selected数组
|
||||||
*/
|
*/
|
||||||
class StrategyPersistSelection extends StrategyAbstract {
|
class StrategyPersistSelection extends StrategyAbstract {
|
||||||
|
/**
|
||||||
|
* el-table的selection-change事件不适用于开启跨页保存的情况。
|
||||||
|
* 比如,当开启persistSelection时,发生以下两个场景:
|
||||||
|
* 1. 用户点击翻页
|
||||||
|
* 2. 用户点击行首的切换全选项按钮,清空当前页多选项数据
|
||||||
|
* 其中场景1应该保持selected不变;而场景2只应该从selected移除当前页所有行,保留其他页面的多选状态。
|
||||||
|
* 但el-table的selection-change事件在两个场景中无差别发生,所以这里不处理这个事件
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户切换某一行的多选
|
||||||
|
*/
|
||||||
onSelect(selection, row) {
|
onSelect(selection, row) {
|
||||||
const isChosen = selection.indexOf(row) > -1
|
const isChosen = selection.indexOf(row) > -1
|
||||||
this.toggleRowSelection(row, isChosen)
|
this.toggleRowSelection(row, isChosen)
|
||||||
// el-table 原生 selection-change 仅包含当前页。为保证跨页勾选有效,
|
|
||||||
// 在内部策略维护完 selected 后,向外部同步“全量已选”。
|
|
||||||
this.elDataTable.$emit('selection-change', this.elDataTable.selected)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户切换当前页的多选
|
||||||
|
*/
|
||||||
onSelectAll(selection, selectable = () => true) {
|
onSelectAll(selection, selectable = () => true) {
|
||||||
const { id, selected, data } = this.elDataTable
|
const { id, selected, data } = this.elDataTable
|
||||||
const selectableRows = data.filter(selectable)
|
const selectableRows = data.filter(selectable)
|
||||||
|
// const isSelected = !!selection.length
|
||||||
|
|
||||||
|
// 创建已选择项的 id 集合,用于快速查找
|
||||||
const selectedIds = new Set(selected.map(r => r[id]))
|
const selectedIds = new Set(selected.map(r => r[id]))
|
||||||
const currentPageIds = new Set(selectableRows.map(row => row[id]))
|
const currentPageIds = new Set(selectableRows.map(row => row[id]))
|
||||||
|
|
||||||
|
// 前页面的选中状态
|
||||||
const currentPageSelectedCount = selectableRows.filter(row =>
|
const currentPageSelectedCount = selectableRows.filter(row =>
|
||||||
selectedIds.has(row[id])
|
selectedIds.has(row[id])
|
||||||
).length
|
).length
|
||||||
|
|
||||||
|
// 判断是全选还是取消全选
|
||||||
const shouldSelectAll = currentPageSelectedCount < selectableRows.length
|
const shouldSelectAll = currentPageSelectedCount < selectableRows.length
|
||||||
|
|
||||||
this.elTable?.clearSelection()
|
this.elTable?.clearSelection()
|
||||||
@@ -68,11 +106,15 @@ class StrategyPersistSelection extends StrategyAbstract {
|
|||||||
if (shouldSelectAll) {
|
if (shouldSelectAll) {
|
||||||
selectableRows.forEach(row => {
|
selectableRows.forEach(row => {
|
||||||
if (!selectedIds.has(row[id])) selected.push(row)
|
if (!selectedIds.has(row[id])) selected.push(row)
|
||||||
|
|
||||||
this.elTable.toggleRowSelection(row, true)
|
this.elTable.toggleRowSelection(row, true)
|
||||||
|
|
||||||
|
// ! 这里需要触发事件,否则在 el-table 中无法触发 selection-change 事件
|
||||||
this.elDataTable.$emit('toggle-row-selection', true, row)
|
this.elDataTable.$emit('toggle-row-selection', true, row)
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
const newSelected = []
|
const newSelected = []
|
||||||
|
|
||||||
selected.forEach(row => {
|
selected.forEach(row => {
|
||||||
if (!currentPageIds.has(row[id])) {
|
if (!currentPageIds.has(row[id])) {
|
||||||
newSelected.push(row)
|
newSelected.push(row)
|
||||||
@@ -80,12 +122,17 @@ class StrategyPersistSelection extends StrategyAbstract {
|
|||||||
this.elDataTable.$emit('toggle-row-selection', false, row)
|
this.elDataTable.$emit('toggle-row-selection', false, row)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
this.elDataTable.selected = newSelected
|
this.elDataTable.selected = newSelected
|
||||||
}
|
}
|
||||||
|
|
||||||
this.elDataTable.$emit('selection-change', this.elDataTable.selected)
|
this.elDataTable.$emit('selection-change', this.elDataTable.selected)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* toggleRowSelection和clearSelection管理elDataTable的selected数组
|
||||||
|
* 记得最后要将状态同步到el-table中
|
||||||
|
*/
|
||||||
toggleRowSelection(row, isSelected) {
|
toggleRowSelection(row, isSelected) {
|
||||||
const { id, selected } = this.elDataTable
|
const { id, selected } = this.elDataTable
|
||||||
const foundIndex = selected.findIndex(r => r[id] === row[id])
|
const foundIndex = selected.findIndex(r => r[id] === row[id])
|
||||||
@@ -102,24 +149,26 @@ class StrategyPersistSelection extends StrategyAbstract {
|
|||||||
|
|
||||||
this.elDataTable.$emit('toggle-row-selection', isSelected, row)
|
this.elDataTable.$emit('toggle-row-selection', isSelected, row)
|
||||||
this.updateElTableSelection()
|
this.updateElTableSelection()
|
||||||
// 切换后同步全量 selection(跨页)
|
|
||||||
this.elDataTable.$emit('selection-change', this.elDataTable.selected)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
clearSelection() {
|
clearSelection() {
|
||||||
this.elDataTable.selected = []
|
this.elDataTable.selected = []
|
||||||
this.updateElTableSelection()
|
this.updateElTableSelection()
|
||||||
// 清空后也同步给外部,保持外层状态一致
|
|
||||||
this.elDataTable.$emit('selection-change', this.elDataTable.selected)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将selected状态同步到el-table中
|
||||||
|
*/
|
||||||
updateElTableSelection() {
|
updateElTableSelection() {
|
||||||
const { data, id, selected } = this.elDataTable
|
const { data, id, selected } = this.elDataTable
|
||||||
const selectedIds = new Set(selected.map(r => r[id]))
|
const selectedIds = new Set(selected.map(r => r[id]))
|
||||||
|
|
||||||
this.elTable?.clearSelection()
|
this.elTable?.clearSelection()
|
||||||
|
|
||||||
data.forEach(row => {
|
data.forEach(row => {
|
||||||
const shouldBeSelected = selectedIds.has(row[id])
|
const shouldBeSelected = selectedIds.has(row[id])
|
||||||
|
if (!this.elTable) return
|
||||||
|
|
||||||
if (shouldBeSelected) {
|
if (shouldBeSelected) {
|
||||||
this.elTable.toggleRowSelection(row, true)
|
this.elTable.toggleRowSelection(row, true)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { newURL, ObjectLocalStorage } from '@/utils/common/index'
|
import { newURL, ObjectLocalStorage } from '@/utils/common'
|
||||||
import { default as ElDatableTable } from './compenents/el-data-table'
|
import { default as ElDatableTable } from './compenents/el-data-table'
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
|
|
||||||
@@ -65,7 +65,7 @@ export default {
|
|||||||
onEdit: (row) => {
|
onEdit: (row) => {
|
||||||
const defaultOnEdit = (row) => {
|
const defaultOnEdit = (row) => {
|
||||||
const routeName = userTableActions.editRoute
|
const routeName = userTableActions.editRoute
|
||||||
this.$router.push({ name: routeName, params: { id: row.id } })
|
this.$router.push({ name: routeName, params: { id: row.id }})
|
||||||
}
|
}
|
||||||
let onEdit = userTableActions.onEdit
|
let onEdit = userTableActions.onEdit
|
||||||
if (!onEdit) {
|
if (!onEdit) {
|
||||||
@@ -167,6 +167,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.el-data-table {
|
.el-data-table {
|
||||||
::v-deep .el-pagination.is-background .el-pager li {
|
::v-deep .el-pagination.is-background .el-pager li {
|
||||||
|
|||||||
@@ -22,9 +22,8 @@
|
|||||||
<script>
|
<script>
|
||||||
import ListTable from '../ListTable'
|
import ListTable from '../ListTable'
|
||||||
import Drawer from '@/components/Drawer/index.vue'
|
import Drawer from '@/components/Drawer/index.vue'
|
||||||
import { setUrlParam, toLowerCaseExcludeAbbr, toSentenceCase } from '@/utils/common/index'
|
import { setUrlParam, toLowerCaseExcludeAbbr, toSentenceCase } from '@/utils/common'
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
import { resolveRoute } from '@/utils/vue/index'
|
|
||||||
|
|
||||||
const drawerType = [String, Function]
|
const drawerType = [String, Function]
|
||||||
|
|
||||||
@@ -107,8 +106,8 @@ export default {
|
|||||||
const formatterArgs = value?.formatterArgs
|
const formatterArgs = value?.formatterArgs
|
||||||
// console.log('>>> name: ', key)
|
// console.log('>>> name: ', key)
|
||||||
// console.log('>>> formatter: ', formatter)
|
// console.log('>>> formatter: ', formatter)
|
||||||
const detailFormatters = ['AmountFormatter', 'DetailFormatter']
|
const detailFormaters = ['AmountFormatter', 'DetailFormatter']
|
||||||
if (formatter && detailFormatters.includes(formatter.name) && formatterArgs.drawer !== false) {
|
if (formatter && detailFormaters.includes(formatter.name) && formatterArgs.drawer !== false) {
|
||||||
formatterArgs.onClick = this.onDetail
|
formatterArgs.onClick = this.onDetail
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -167,9 +166,9 @@ export default {
|
|||||||
}
|
}
|
||||||
this.drawerComponent = ''
|
this.drawerComponent = ''
|
||||||
},
|
},
|
||||||
getDetailDrawerTitle({ col, row, cellValue, payload = {} }) {
|
getDetailDrawerTitle({ col, row, cellValue, payload = {}}) {
|
||||||
this.$log.debug('>>> getDetailDrawerTitle: ', col, row, cellValue, payload)
|
this.$log.debug('>>> getDetailDrawerTitle: ', col, row, cellValue, payload)
|
||||||
const { detailRoute = {}, formatterArgs = {} } = payload
|
const { detailRoute = {}, formatterArgs = {}} = payload
|
||||||
const getTitle = formatterArgs.getDrawerTitle
|
const getTitle = formatterArgs.getDrawerTitle
|
||||||
this.$log.debug('>>> getTitle: ', getTitle)
|
this.$log.debug('>>> getTitle: ', getTitle)
|
||||||
if (getTitle && typeof getTitle === 'function') {
|
if (getTitle && typeof getTitle === 'function') {
|
||||||
@@ -178,7 +177,7 @@ export default {
|
|||||||
if (formatterArgs.title) {
|
if (formatterArgs.title) {
|
||||||
return formatterArgs.title
|
return formatterArgs.title
|
||||||
}
|
}
|
||||||
const resolvedRoute = resolveRoute(detailRoute, this.$router)
|
const resolvedRoute = this.resolveRoute(detailRoute)
|
||||||
let title = cellValue || row.name
|
let title = cellValue || row.name
|
||||||
if (formatterArgs.getTitle) {
|
if (formatterArgs.getTitle) {
|
||||||
title = formatterArgs.getTitle({ col, row, cellValue })
|
title = formatterArgs.getTitle({ col, row, cellValue })
|
||||||
@@ -223,6 +222,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
title = actionLabel + this.$t('WordSep') + toLowerCaseExcludeAbbr(title)
|
title = actionLabel + this.$t('WordSep') + toLowerCaseExcludeAbbr(title)
|
||||||
|
|
||||||
return title
|
return title
|
||||||
},
|
},
|
||||||
getDefaultDrawer(action) {
|
getDefaultDrawer(action) {
|
||||||
@@ -232,38 +232,53 @@ export default {
|
|||||||
},
|
},
|
||||||
getRouteNameComponent(name, action) {
|
getRouteNameComponent(name, action) {
|
||||||
const route = { name: name }
|
const route = { name: name }
|
||||||
|
|
||||||
if (action === 'detail' || action === 'update') {
|
if (action === 'detail' || action === 'update') {
|
||||||
route.params = { id: '1' }
|
route.params = { id: '1' }
|
||||||
}
|
}
|
||||||
|
const routes = this.$router.resolve(route)
|
||||||
const resolved = resolveRoute(route, this.$router)
|
if (!routes) {
|
||||||
|
return
|
||||||
if (resolved && resolved.components && resolved.components.default) {
|
}
|
||||||
return resolved.components.default
|
const matched = routes.resolved.matched.filter(item => item.name === name && item.components)
|
||||||
|
if (matched.length === 0) {
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
return ''
|
if (matched[0] && matched[0].components?.default) {
|
||||||
|
const component = matched[0].components.default
|
||||||
|
return component
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resolveRoute(route) {
|
||||||
|
const routes = this.$router.resolve(route)
|
||||||
|
if (!routes) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const matched = routes.resolved.matched.filter(item => item.name === route.name && item.components)
|
||||||
|
if (matched.length === 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (matched[0] && matched[0].components?.default) {
|
||||||
|
return matched[0]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
getDetailComponent({ detailRoute }) {
|
getDetailComponent({ detailRoute }) {
|
||||||
if (!detailRoute) {
|
if (!detailRoute) {
|
||||||
return this.detailDrawer
|
return this.detailDrawer
|
||||||
}
|
}
|
||||||
|
this.$log.debug('>>> getDetailComponent: ', detailRoute)
|
||||||
const route = resolveRoute(detailRoute, this.$router)
|
const route = this.resolveRoute(detailRoute)
|
||||||
let component = null
|
let component = null
|
||||||
|
if (route) {
|
||||||
if (route && route.components && route.components.default) {
|
|
||||||
component = route.components.default
|
component = route.components.default
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!component) {
|
if (!component) {
|
||||||
component = this.detailDrawer
|
component = this.detailDrawer
|
||||||
}
|
}
|
||||||
|
|
||||||
return component
|
return component
|
||||||
},
|
},
|
||||||
getDrawerComponent(action, payload) {
|
getDrawerComponent(action, payload) {
|
||||||
|
this.$log.debug('>>> getDrawerComponent: ', action, payload)
|
||||||
switch (action) {
|
switch (action) {
|
||||||
case 'create':
|
case 'create':
|
||||||
return this.createDrawer
|
return this.createDrawer
|
||||||
@@ -278,7 +293,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async showDrawer(action, { row = {}, col = {}, query = {}, cellValue = '', payload = {} } = {}) {
|
async showDrawer(action, { row = {}, col = {}, query = {}, cellValue = '', payload = {}} = {}) {
|
||||||
try {
|
try {
|
||||||
// 1. 先重置状态
|
// 1. 先重置状态
|
||||||
this.drawerVisible = false
|
this.drawerVisible = false
|
||||||
@@ -294,6 +309,7 @@ export default {
|
|||||||
// 3. 设置组件
|
// 3. 设置组件
|
||||||
this.drawerComponent = this.getDrawerComponent(action, payload)
|
this.drawerComponent = this.getDrawerComponent(action, payload)
|
||||||
this.$log.debug('>>> drawerComponent: ', this.drawerComponent)
|
this.$log.debug('>>> drawerComponent: ', this.drawerComponent)
|
||||||
|
this.drawerTitle = this.getActionDrawerTitle({ action, row, col, cellValue, payload })
|
||||||
|
|
||||||
// 4. 如果没有组件,尝试获取默认组件
|
// 4. 如果没有组件,尝试获取默认组件
|
||||||
if (!this.drawerComponent) {
|
if (!this.drawerComponent) {
|
||||||
@@ -310,7 +326,6 @@ export default {
|
|||||||
const actionMeta = await this.$store.getters['common/drawerActionMeta']
|
const actionMeta = await this.$store.getters['common/drawerActionMeta']
|
||||||
this.title = this.getDrawerTitle({ action, ...actionMeta })
|
this.title = this.getDrawerTitle({ action, ...actionMeta })
|
||||||
}
|
}
|
||||||
this.drawerTitle = this.getActionDrawerTitle({ action, row, col, cellValue, payload })
|
|
||||||
|
|
||||||
// 7. 等待下一个 tick,确保组件已设置
|
// 7. 等待下一个 tick,确保组件已设置
|
||||||
await this.$nextTick()
|
await this.$nextTick()
|
||||||
@@ -355,7 +370,7 @@ export default {
|
|||||||
await this.$store.dispatch('common/setDrawerActionMeta', {
|
await this.$store.dispatch('common/setDrawerActionMeta', {
|
||||||
action: 'detail', row: row, col: col, id: id
|
action: 'detail', row: row, col: col, id: id
|
||||||
})
|
})
|
||||||
await this.showDrawer('detail', { row, col, cellValue, payload: { detailRoute, formatterArgs } })
|
await this.showDrawer('detail', { row, col, cellValue, payload: { detailRoute, formatterArgs }})
|
||||||
},
|
},
|
||||||
async onCreate(meta) {
|
async onCreate(meta) {
|
||||||
if (!meta) {
|
if (!meta) {
|
||||||
@@ -365,14 +380,14 @@ export default {
|
|||||||
await this.$store.dispatch('common/setDrawerActionMeta', { action: 'create', ...meta })
|
await this.$store.dispatch('common/setDrawerActionMeta', { action: 'create', ...meta })
|
||||||
await this.showDrawer('create', meta)
|
await this.showDrawer('create', meta)
|
||||||
},
|
},
|
||||||
async onClone({ row, col, query = {} }) {
|
async onClone({ row, col, query = {}}) {
|
||||||
this.$route.params.id = ''
|
this.$route.params.id = ''
|
||||||
await this.$store.dispatch('common/setDrawerActionMeta', {
|
await this.$store.dispatch('common/setDrawerActionMeta', {
|
||||||
action: 'clone', row: row, col: col, id: row.id
|
action: 'clone', row: row, col: col, id: row.id
|
||||||
})
|
})
|
||||||
await this.showDrawer('clone', { query })
|
await this.showDrawer('clone', { query })
|
||||||
},
|
},
|
||||||
async onUpdate({ row, col, query = {} }) {
|
async onUpdate({ row, col, query = {}}) {
|
||||||
this.$route.params.id = row.id
|
this.$route.params.id = row.id
|
||||||
this.$route.params.action = 'update'
|
this.$route.params.action = 'update'
|
||||||
await this.$store.dispatch('common/setDrawerActionMeta', {
|
await this.$store.dispatch('common/setDrawerActionMeta', {
|
||||||
|
|||||||
@@ -4,11 +4,15 @@
|
|||||||
<div class="panel-title">
|
<div class="panel-title">
|
||||||
<el-avatar :src="imageUrl" shape="square" />
|
<el-avatar :src="imageUrl" shape="square" />
|
||||||
<div class="title-display">
|
<div class="title-display">
|
||||||
<p class="name" :title="object.name">{{ object.name }}</p>
|
<span class="name">{{ object.name }}</span>
|
||||||
<span class="comment">{{ object.provider.label }}</span>
|
<span class="comment">{{ object.provider.label }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="iActions.length !== 0" class="panel-actions" @click="handleClick($event)">
|
<div
|
||||||
|
v-if="iActions.length !== 0"
|
||||||
|
class="panel-actions"
|
||||||
|
@click="handleClick($event)"
|
||||||
|
>
|
||||||
<el-dropdown>
|
<el-dropdown>
|
||||||
<el-button size="mini">
|
<el-button size="mini">
|
||||||
<i class="el-icon-more el-icon--right" />
|
<i class="el-icon-more el-icon--right" />
|
||||||
@@ -60,19 +64,21 @@ export default {
|
|||||||
},
|
},
|
||||||
getImage: {
|
getImage: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: obj => ''
|
default: (obj) => ''
|
||||||
},
|
},
|
||||||
getInfos: {
|
getInfos: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: obj => []
|
default: (obj) => []
|
||||||
},
|
},
|
||||||
handleUpdate: {
|
handleUpdate: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => {}
|
default: () => {
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onView: {
|
onView: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => {}
|
default: () => {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -146,13 +152,13 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
div.info-panel {
|
div.info-panel {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
gap: unset;
|
gap: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: initial !important;
|
|
||||||
|
|
||||||
.panel-header {
|
.panel-header {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
@@ -169,23 +175,12 @@ div.info-panel {
|
|||||||
|
|
||||||
.title-display {
|
.title-display {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-basis: 225px;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
text-align: left;
|
||||||
align-items: flex-start;
|
|
||||||
max-width: 225px;
|
|
||||||
min-width: 0;
|
|
||||||
overflow-x: hidden;
|
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
width: 100%;
|
|
||||||
margin: unset;
|
|
||||||
text-align: start;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment {
|
.comment {
|
||||||
@@ -198,7 +193,6 @@ div.info-panel {
|
|||||||
::v-deep {
|
::v-deep {
|
||||||
.el-avatar {
|
.el-avatar {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -49,7 +49,7 @@
|
|||||||
import Dialog from '@/components/Dialog/index.vue'
|
import Dialog from '@/components/Dialog/index.vue'
|
||||||
import { createSourceIdCache } from '@/api/common'
|
import { createSourceIdCache } from '@/api/common'
|
||||||
import * as queryUtil from '@/components/Table/DataTable/compenents/el-data-table/utils/query'
|
import * as queryUtil from '@/components/Table/DataTable/compenents/el-data-table/utils/query'
|
||||||
import { download } from '@/utils/common/index'
|
import { download } from '@/utils/common'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ExportDialog',
|
name: 'ExportDialog',
|
||||||
|
|||||||
@@ -22,8 +22,8 @@
|
|||||||
<div style="line-height: 1.5">
|
<div style="line-height: 1.5">
|
||||||
<span class="el-upload__tip">
|
<span class="el-upload__tip">
|
||||||
{{ downloadTemplateTitle }}
|
{{ downloadTemplateTitle }}
|
||||||
<el-link type="primary" @click="downloadTemplateFile('csv')"> CSV </el-link>
|
<el-link type="success" @click="downloadTemplateFile('csv')"> CSV </el-link>
|
||||||
<el-link type="primary" @click="downloadTemplateFile('xlsx')"> XLSX </el-link>
|
<el-link type="success" @click="downloadTemplateFile('xlsx')"> XLSX </el-link>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@@ -58,7 +58,6 @@
|
|||||||
:import-option="importOption"
|
:import-option="importOption"
|
||||||
:json-data="jsonData"
|
:json-data="jsonData"
|
||||||
:url="url"
|
:url="url"
|
||||||
v-bind="$attrs"
|
|
||||||
@cancel="cancelUpload"
|
@cancel="cancelUpload"
|
||||||
@finish="closeDialog"
|
@finish="closeDialog"
|
||||||
/>
|
/>
|
||||||
@@ -69,7 +68,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import Dialog from '@/components/Dialog/index.vue'
|
import Dialog from '@/components/Dialog/index.vue'
|
||||||
import ImportTable from '@/components/Table/ListTable/TableAction/ImportTable.vue'
|
import ImportTable from '@/components/Table/ListTable/TableAction/ImportTable.vue'
|
||||||
import { download, getErrorResponseMsg } from '@/utils/common/index'
|
import { download, getErrorResponseMsg } from '@/utils/common'
|
||||||
import { createSourceIdCache } from '@/api/common'
|
import { createSourceIdCache } from '@/api/common'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -248,46 +247,46 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
<style lang='scss' scoped>
|
||||||
@import "~@/styles/variables";
|
@import "~@/styles/variables";
|
||||||
|
|
||||||
.error-msg {
|
.error-msg {
|
||||||
color: $--color-danger;
|
color: $--color-danger;
|
||||||
}
|
|
||||||
|
|
||||||
.error-msg.error-results {
|
|
||||||
background-color: #f3f3f4;
|
|
||||||
max-height: 200px;
|
|
||||||
overflow: auto
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-uploader ::v-deep .el-upload {
|
|
||||||
width: 100%;
|
|
||||||
//padding-right: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-uploader ::v-deep .el-upload-dragger {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.importTableZone {
|
|
||||||
padding: 0 20px;
|
|
||||||
|
|
||||||
.importTable {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tableFilter {
|
.error-msg.error-results {
|
||||||
padding-bottom: 10px;
|
background-color: #f3f3f4;
|
||||||
|
max-height: 200px;
|
||||||
|
overflow: auto
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.importTable ::v-deep .el-dialog__body {
|
.file-uploader ::v-deep .el-upload {
|
||||||
padding-bottom: 20px;
|
width: 100%;
|
||||||
}
|
//padding-right: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
.export-item {
|
.file-uploader ::v-deep .el-upload-dragger {
|
||||||
margin-left: 80px;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.importTableZone {
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
.importTable {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableFilter {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.importTable ::v-deep .el-dialog__body {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-item {
|
||||||
|
margin-left: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
.export-item:first-child {
|
.export-item:first-child {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|||||||
@@ -42,10 +42,10 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import DataTable from '@/components/Table/DataTable/index.vue'
|
import DataTable from '@/components/Table/DataTable/index.vue'
|
||||||
import { getUpdateObjURL } from '@/utils/common/index'
|
import { getUpdateObjURL } from '@/utils/common'
|
||||||
import { sleep } from '@/utils/common/time'
|
import { sleep } from '@/utils/time'
|
||||||
import { EditableInputFormatter } from '@/components/Table/TableFormatters'
|
import { EditableInputFormatter } from '@/components/Table/TableFormatters'
|
||||||
import { encryptPassword } from '@/utils/secure'
|
import { encryptPassword } from '@/utils/crypto'
|
||||||
import getStatusColumnMeta from '@/components/Table/ListTable/TableAction/const'
|
import getStatusColumnMeta from '@/components/Table/ListTable/TableAction/const'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -97,10 +97,6 @@ export default {
|
|||||||
origin: {
|
origin: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
|
||||||
encryptFields: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -277,15 +273,11 @@ export default {
|
|||||||
}
|
}
|
||||||
return columns
|
return columns
|
||||||
},
|
},
|
||||||
getEncryptFields() {
|
|
||||||
const fromProp = Array.isArray(this.encryptFields) && this.encryptFields.length ? this.encryptFields : null
|
|
||||||
return fromProp || ['password', 'secret', 'private_key']
|
|
||||||
},
|
|
||||||
generateTableData(tableTitles, tableData) {
|
generateTableData(tableTitles, tableData) {
|
||||||
const totalData = []
|
const totalData = []
|
||||||
tableData.forEach(item => {
|
tableData.forEach(item => {
|
||||||
this.$set(item, '@status', 'pending')
|
this.$set(item, '@status', 'pending')
|
||||||
const encryptFields = this.getEncryptFields()
|
const encryptFields = ['password', 'secret', 'private_key']
|
||||||
for (const field of encryptFields) {
|
for (const field of encryptFields) {
|
||||||
if (item[field]) {
|
if (item[field]) {
|
||||||
item[field] = encryptPassword(item[field])
|
item[field] = encryptPassword(item[field])
|
||||||
|
|||||||
@@ -1,6 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="label-search">
|
<div class="label-search">
|
||||||
<el-button v-if="!showLabelSearch" class="label-button" size="small" @click="showSearchSelect">
|
<el-button
|
||||||
|
v-if="!showLabelSearch"
|
||||||
|
class="label-button"
|
||||||
|
size="small"
|
||||||
|
@click="showSearchSelect"
|
||||||
|
>
|
||||||
<svg-icon icon-class="tag" />
|
<svg-icon icon-class="tag" />
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-cascader
|
<el-cascader
|
||||||
@@ -95,7 +100,7 @@ export default {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.$refs.labelCascader.updateStyle()
|
this.$refs.labelCascader.updateStyle()
|
||||||
input.style.height = '30px'
|
input.style.height = '30px'
|
||||||
})
|
},)
|
||||||
return
|
return
|
||||||
} else {
|
} else {
|
||||||
input.style.height = '30px'
|
input.style.height = '30px'
|
||||||
@@ -142,44 +147,41 @@ export default {
|
|||||||
}, 200)
|
}, 200)
|
||||||
},
|
},
|
||||||
listenViewPort() {
|
listenViewPort() {
|
||||||
window.addEventListener(
|
window.addEventListener('resize', debounce((e) => {
|
||||||
'resize',
|
const viewPort = e?.target?.innerWidth
|
||||||
debounce(e => {
|
this.showLabelSearch = viewPort < 992
|
||||||
const viewPort = e?.target?.innerWidth
|
}, 100), false)
|
||||||
this.showLabelSearch = viewPort < 992
|
|
||||||
}, 100),
|
|
||||||
false
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang='scss' scoped>
|
||||||
.label-search {
|
.label-search {
|
||||||
|
margin-right: 10px;
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
::v-deep .el-button.label-button {
|
::v-deep .el-button.label-button {
|
||||||
height: 28px;
|
height: 28px;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-cascader {
|
.label-cascader {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
line-height: unset !important;
|
line-height: 28px;
|
||||||
|
|
||||||
::v-deep .el-input {
|
::v-deep .el-input {
|
||||||
.el-input__inner {
|
.el-input__inner {
|
||||||
height: 28px !important;
|
height: 28px !important;
|
||||||
|
line-height: 28px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-input__suffix {
|
.el-input__suffix {
|
||||||
color: var(--color-icon-primary) !important;
|
color: var(--color-icon-primary) !important;;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { cleanActions } from './utils'
|
import { cleanActions } from './utils'
|
||||||
import { createSourceIdCache } from '@/api/common'
|
import { createSourceIdCache } from '@/api/common'
|
||||||
import { getErrorResponseMsg } from '@/utils/common/index'
|
import { getErrorResponseMsg } from '@/utils/common'
|
||||||
|
|
||||||
import i18n from '@/i18n/i18n'
|
import i18n from '@/i18n/i18n'
|
||||||
import DataActions from '@/components/Common/DataActions/index.vue'
|
import DataActions from '@/components/Common/DataActions/index.vue'
|
||||||
@@ -240,7 +240,7 @@ export default {
|
|||||||
type: 'warning',
|
type: 'warning',
|
||||||
confirmButtonClass: 'el-button--danger',
|
confirmButtonClass: 'el-button--danger',
|
||||||
showCancelButton: true,
|
showCancelButton: true,
|
||||||
beforeClose: async (action, instance, done) => {
|
beforeClose: async(action, instance, done) => {
|
||||||
if (action !== 'confirm') return done()
|
if (action !== 'confirm') return done()
|
||||||
instance.confirmButtonLoading = true
|
instance.confirmButtonLoading = true
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -45,7 +45,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import SummaryCard from '@/components/Cards/SummaryCard/index.vue'
|
import SummaryCard from '@/components/Cards/SummaryCard/index.vue'
|
||||||
import { setUrlParam } from '@/utils/common/index'
|
import { setUrlParam } from '@/utils/common'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'QuickFilter',
|
name: 'QuickFilter',
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
import ActionsGroup from '@/components/Common/ActionsGroup/index.vue'
|
import ActionsGroup from '@/components/Common/ActionsGroup/index.vue'
|
||||||
import ImExportDialog from './ImExportDialog.vue'
|
import ImExportDialog from './ImExportDialog.vue'
|
||||||
import { cleanActions } from './utils'
|
import { cleanActions } from './utils'
|
||||||
import { assignIfNot } from '@/utils/common/index'
|
import { assignIfNot } from '@/utils/common'
|
||||||
|
|
||||||
const defaultTrue = { type: [Boolean, Function, String], default: true }
|
const defaultTrue = { type: [Boolean, Function, String], default: true }
|
||||||
|
|
||||||
@@ -111,7 +111,7 @@ export default {
|
|||||||
{
|
{
|
||||||
name: 'actionFilter',
|
name: 'actionFilter',
|
||||||
icon: 'filter',
|
icon: 'filter',
|
||||||
tip: this.$t('QuickFilter'),
|
tip: this.$t('Filter'),
|
||||||
has: this.hasQuickFilter,
|
has: this.hasQuickFilter,
|
||||||
callback: this.handleFilterClick.bind(this)
|
callback: this.handleFilterClick.bind(this)
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ import LeftSide from './LeftSide.vue'
|
|||||||
import RightSide from './RightSide.vue'
|
import RightSide from './RightSide.vue'
|
||||||
import AutoDataSearch from '@/components/Table/AutoDataSearch/index.vue'
|
import AutoDataSearch from '@/components/Table/AutoDataSearch/index.vue'
|
||||||
import DatetimeRangePicker from '@/components/Form/FormFields/DatetimeRangePicker.vue'
|
import DatetimeRangePicker from '@/components/Form/FormFields/DatetimeRangePicker.vue'
|
||||||
import { getDaysAgo, getDaysFuture } from '@/utils/common/time'
|
import { getDaysAgo, getDaysFuture } from '@/utils/time'
|
||||||
import LabelSearch from '@/components/Table/ListTable/TableAction/LabelSearch.vue'
|
import LabelSearch from '@/components/Table/ListTable/TableAction/LabelSearch.vue'
|
||||||
|
|
||||||
const defaultTrue = { type: Boolean, default: true }
|
const defaultTrue = { type: Boolean, default: true }
|
||||||
@@ -86,11 +86,13 @@ export default {
|
|||||||
},
|
},
|
||||||
datePick: {
|
datePick: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: val => {}
|
default: (val) => {
|
||||||
|
}
|
||||||
},
|
},
|
||||||
searchTable: {
|
searchTable: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: val => {}
|
default: (val) => {
|
||||||
|
}
|
||||||
},
|
},
|
||||||
selectedRows: {
|
selectedRows: {
|
||||||
type: Array,
|
type: Array,
|
||||||
@@ -151,7 +153,7 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang='scss' scoped>
|
||||||
$innerHeight: 28px;
|
$innerHeight: 28px;
|
||||||
$headerHeight: 30px;
|
$headerHeight: 30px;
|
||||||
|
|
||||||
@@ -178,7 +180,6 @@ $headerHeight: 30px;
|
|||||||
.right-side-item.action-search {
|
.right-side-item.action-search {
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 4px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -190,8 +191,6 @@ $headerHeight: 30px;
|
|||||||
.search.right {
|
.search.right {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -240,4 +239,5 @@ $headerHeight: 30px;
|
|||||||
display: block;
|
display: block;
|
||||||
padding: 5px 20px;
|
padding: 5px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
/>
|
/>
|
||||||
<TableAction
|
<TableAction
|
||||||
v-if="hasActions"
|
v-if="hasActions"
|
||||||
:class="{ 'filter-expand': filterExpand }"
|
:class="{'filter-expand': filterExpand}"
|
||||||
:date-pick="handleDateChange"
|
:date-pick="handleDateChange"
|
||||||
:has-quick-filter="iHasQuickFilter"
|
:has-quick-filter="iHasQuickFilter"
|
||||||
:quick-filter-expand.sync="filterExpand"
|
:quick-filter-expand.sync="filterExpand"
|
||||||
@@ -34,7 +34,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getResourceFromApiUrl } from '@/utils/jms/index'
|
import { getResourceFromApiUrl } from '@/utils/jms'
|
||||||
import deepmerge from 'deepmerge'
|
import deepmerge from 'deepmerge'
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
import IBox from '@/components/Common/IBox/index.vue'
|
import IBox from '@/components/Common/IBox/index.vue'
|
||||||
@@ -42,8 +42,8 @@ import TableAction from './TableAction/index.vue'
|
|||||||
import Emitter from '@/mixins/emitter'
|
import Emitter from '@/mixins/emitter'
|
||||||
import AutoDataTable from '../AutoDataTable/index.vue'
|
import AutoDataTable from '../AutoDataTable/index.vue'
|
||||||
import QuickFilter from './TableAction/QuickFilter.vue'
|
import QuickFilter from './TableAction/QuickFilter.vue'
|
||||||
import { getDayEnd, getDaysAgo } from '@/utils/common/time'
|
import { getDayEnd, getDaysAgo } from '@/utils/time'
|
||||||
import { ObjectLocalStorage } from '@/utils/common/index'
|
import { ObjectLocalStorage } from '@/utils/common'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ListTable',
|
name: 'ListTable',
|
||||||
@@ -85,13 +85,10 @@ export default {
|
|||||||
date_from: getDaysAgo(7).toISOString(),
|
date_from: getDaysAgo(7).toISOString(),
|
||||||
date_to: this.$moment(getDayEnd()).add(1, 'day').toISOString()
|
date_to: this.$moment(getDayEnd()).add(1, 'day').toISOString()
|
||||||
}
|
}
|
||||||
this.headerActions.datePicker = Object.assign(
|
this.headerActions.datePicker = Object.assign({
|
||||||
{
|
dateStart: extraQuery.date_from,
|
||||||
dateStart: extraQuery.date_from,
|
dateEnd: extraQuery.date_to
|
||||||
dateEnd: extraQuery.date_to
|
}, this.headerActions.datePicker)
|
||||||
},
|
|
||||||
this.headerActions.datePicker
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
if (this.$route.query.order) {
|
if (this.$route.query.order) {
|
||||||
extraQuery['order'] = this.$route.query.order
|
extraQuery['order'] = this.$route.query.order
|
||||||
@@ -107,9 +104,7 @@ export default {
|
|||||||
tablePath: new URL(this.tableConfig.url || '', 'http://127.0.0.1').pathname,
|
tablePath: new URL(this.tableConfig.url || '', 'http://127.0.0.1').pathname,
|
||||||
objStorage: new ObjectLocalStorage('filterExpand'),
|
objStorage: new ObjectLocalStorage('filterExpand'),
|
||||||
iFilterExpand: null,
|
iFilterExpand: null,
|
||||||
reloadTable: _.debounce(this._reloadTable, 300),
|
reloadTable: _.debounce(this._reloadTable, 300)
|
||||||
searchQuery: {},
|
|
||||||
filterQuery: {}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -172,7 +167,7 @@ export default {
|
|||||||
extraQuery: this.extraQuery
|
extraQuery: this.extraQuery
|
||||||
})
|
})
|
||||||
const checkRoot = !(this.$route.meta?.disableOrgsChange === true)
|
const checkRoot = !(this.$route.meta?.disableOrgsChange === true)
|
||||||
const checkPermAndRoot = action => {
|
const checkPermAndRoot = (action) => {
|
||||||
if (!this.hasActionPerm(action)) {
|
if (!this.hasActionPerm(action)) {
|
||||||
return this.$t('NoPermission')
|
return this.$t('NoPermission')
|
||||||
}
|
}
|
||||||
@@ -303,26 +298,19 @@ export default {
|
|||||||
this.$delete(this.extraQuery, key)
|
this.$delete(this.extraQuery, key)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getMergedQuery() {
|
|
||||||
return { ...this.searchQuery, ...this.filterQuery }
|
|
||||||
},
|
|
||||||
search(attrs) {
|
search(attrs) {
|
||||||
const init = this.updateInitQuery(attrs)
|
const init = this.updateInitQuery(attrs)
|
||||||
if (init) {
|
if (init) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.searchQuery = attrs
|
|
||||||
const merged = this.getMergedQuery()
|
|
||||||
this.$log.debug('ListTable: search table', attrs)
|
this.$log.debug('ListTable: search table', attrs)
|
||||||
this.$emit('TagSearch', attrs)
|
this.$emit('TagSearch', attrs)
|
||||||
this.$refs.dataTable?.$refs.dataTable?.search(merged, true)
|
this.$refs.dataTable?.$refs.dataTable?.search(attrs, true)
|
||||||
},
|
},
|
||||||
filter(attrs) {
|
filter(attrs) {
|
||||||
this.filterQuery = attrs
|
|
||||||
const merged = this.getMergedQuery()
|
|
||||||
this.$emit('TagFilter', attrs)
|
this.$emit('TagFilter', attrs)
|
||||||
this.$log.debug('ListTable: found filter change', attrs)
|
this.$log.debug('ListTable: found filter change', attrs)
|
||||||
this.$refs.dataTable?.$refs.dataTable?.search(merged, true)
|
this.search(attrs)
|
||||||
},
|
},
|
||||||
hasActionPerm(action) {
|
hasActionPerm(action) {
|
||||||
const permRequired = this.permissions[action]
|
const permRequired = this.permissions[action]
|
||||||
@@ -390,4 +378,9 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//修改颜色
|
||||||
|
.el-button--text {
|
||||||
|
color: #409EFF;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ const defaultPerformDelete = function({ row, col }) {
|
|||||||
|
|
||||||
const defaultUpdateCallback = function({ row, col }) {
|
const defaultUpdateCallback = function({ row, col }) {
|
||||||
const id = row.id
|
const id = row.id
|
||||||
let route = { params: { id: id } }
|
let route = { params: { id: id }}
|
||||||
const updateRoute = this.colActions.updateRoute
|
const updateRoute = this.colActions.updateRoute
|
||||||
|
|
||||||
if (typeof updateRoute === 'object') {
|
if (typeof updateRoute === 'object') {
|
||||||
@@ -39,7 +39,7 @@ const defaultUpdateCallback = function({ row, col }) {
|
|||||||
|
|
||||||
const defaultViewCallback = function({ row, col }) {
|
const defaultViewCallback = function({ row, col }) {
|
||||||
const id = row.id
|
const id = row.id
|
||||||
let route = { params: { id: id } }
|
let route = { params: { id: id }}
|
||||||
const viewRoute = this.colActions.viewRoute
|
const viewRoute = this.colActions.viewRoute
|
||||||
|
|
||||||
if (typeof updateRoute === 'object') {
|
if (typeof updateRoute === 'object') {
|
||||||
@@ -55,7 +55,7 @@ const defaultViewCallback = function({ row, col }) {
|
|||||||
|
|
||||||
const defaultCloneCallback = function({ row, col }) {
|
const defaultCloneCallback = function({ row, col }) {
|
||||||
const id = row.id
|
const id = row.id
|
||||||
let route = { query: { clone_from: id } }
|
let route = { query: { clone_from: id }}
|
||||||
const cloneRoute = this.colActions.cloneRoute
|
const cloneRoute = this.colActions.cloneRoute
|
||||||
|
|
||||||
if (typeof cloneRoute === 'object') {
|
if (typeof cloneRoute === 'object') {
|
||||||
@@ -82,7 +82,7 @@ const defaultDeleteCallback = function({ row, col, cellValue, reload }) {
|
|||||||
type: 'warning',
|
type: 'warning',
|
||||||
confirmButtonClass: 'el-button--danger',
|
confirmButtonClass: 'el-button--danger',
|
||||||
showCancelButton: true,
|
showCancelButton: true,
|
||||||
beforeClose: async (action, instance, done) => {
|
beforeClose: async(action, instance, done) => {
|
||||||
if (action !== 'confirm') return done()
|
if (action !== 'confirm') return done()
|
||||||
instance.confirmButtonLoading = true
|
instance.confirmButtonLoading = true
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ const formatterArgsDefault = {
|
|||||||
false: 'fa-times-circle'
|
false: 'fa-times-circle'
|
||||||
},
|
},
|
||||||
classChoices: {
|
classChoices: {
|
||||||
true: 'text-success',
|
true: 'text-primary',
|
||||||
false: 'text-danger'
|
false: 'text-danger'
|
||||||
},
|
},
|
||||||
getKey({ row, cellValue }) {
|
getKey({ row, cellValue }) {
|
||||||
@@ -100,3 +100,7 @@ export default {
|
|||||||
methods: {}
|
methods: {}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import BaseFormatter from './base.vue'
|
import BaseFormatter from './base.vue'
|
||||||
import { copy } from '@/utils/common/index'
|
import { copy } from '@/utils/common'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CopyableFormatter',
|
name: 'CopyableFormatter',
|
||||||
|
|||||||