Compare commits
71 Commits
v5_refacto
...
v4.3.1
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
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,
|
||||
_: true
|
||||
},
|
||||
plugins: ['vue', 'spellcheck'],
|
||||
// add your custom rules here
|
||||
// it is base on https://github.com/vuejs/eslint-config-vue
|
||||
rules: {
|
||||
'vue/max-attributes-per-line': [
|
||||
2,
|
||||
{
|
||||
singleline: 10,
|
||||
multiline: {
|
||||
max: 1,
|
||||
allowFirstLine: false
|
||||
}
|
||||
'vue/max-attributes-per-line': [2, {
|
||||
'singleline': 10,
|
||||
'multiline': {
|
||||
'max': 1,
|
||||
'allowFirstLine': false
|
||||
}
|
||||
],
|
||||
}],
|
||||
'vue/singleline-html-element-content-newline': 'off',
|
||||
'vue/multiline-html-element-content-newline': 'off',
|
||||
'vue/name-property-casing': ['error', 'PascalCase'],
|
||||
'vue/no-v-html': 'off',
|
||||
'accessor-pairs': 2,
|
||||
'arrow-spacing': [
|
||||
2,
|
||||
{
|
||||
before: true,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'arrow-spacing': [2, {
|
||||
'before': true,
|
||||
'after': true
|
||||
}],
|
||||
'block-spacing': [2, 'always'],
|
||||
'brace-style': [
|
||||
2,
|
||||
'1tbs',
|
||||
{
|
||||
allowSingleLine: true
|
||||
}
|
||||
],
|
||||
camelcase: [
|
||||
0,
|
||||
{
|
||||
properties: 'always'
|
||||
}
|
||||
],
|
||||
'brace-style': [2, '1tbs', {
|
||||
'allowSingleLine': true
|
||||
}],
|
||||
'camelcase': [0, {
|
||||
'properties': 'always'
|
||||
}],
|
||||
'comma-dangle': [2, 'never'],
|
||||
'comma-spacing': [
|
||||
2,
|
||||
{
|
||||
before: false,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'comma-spacing': [2, {
|
||||
'before': false,
|
||||
'after': true
|
||||
}],
|
||||
'comma-style': [2, 'last'],
|
||||
'constructor-super': 2,
|
||||
curly: [2, 'multi-line'],
|
||||
'curly': [2, 'multi-line'],
|
||||
'dot-location': [2, 'property'],
|
||||
'eol-last': 2,
|
||||
eqeqeq: ['error', 'always', { null: 'ignore' }],
|
||||
'generator-star-spacing': [
|
||||
2,
|
||||
{
|
||||
before: true,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
|
||||
'generator-star-spacing': [2, {
|
||||
'before': true,
|
||||
'after': true
|
||||
}],
|
||||
'handle-callback-err': [2, '^(err|error)$'],
|
||||
indent: [
|
||||
2,
|
||||
2,
|
||||
{
|
||||
SwitchCase: 1
|
||||
}
|
||||
],
|
||||
'indent': [2, 2, {
|
||||
'SwitchCase': 1
|
||||
}],
|
||||
'jsx-quotes': [2, 'prefer-single'],
|
||||
'key-spacing': [
|
||||
2,
|
||||
{
|
||||
beforeColon: false,
|
||||
afterColon: true
|
||||
}
|
||||
],
|
||||
'keyword-spacing': [
|
||||
2,
|
||||
{
|
||||
before: true,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'new-cap': [
|
||||
2,
|
||||
{
|
||||
newIsCap: true,
|
||||
capIsNew: false
|
||||
}
|
||||
],
|
||||
'key-spacing': [2, {
|
||||
'beforeColon': false,
|
||||
'afterColon': true
|
||||
}],
|
||||
'keyword-spacing': [2, {
|
||||
'before': true,
|
||||
'after': true
|
||||
}],
|
||||
'new-cap': [2, {
|
||||
'newIsCap': true,
|
||||
'capIsNew': false
|
||||
}],
|
||||
'new-parens': 2,
|
||||
'no-array-constructor': 2,
|
||||
'no-caller': 2,
|
||||
@@ -135,23 +102,17 @@ module.exports = {
|
||||
'no-irregular-whitespace': 2,
|
||||
'no-iterator': 2,
|
||||
'no-label-var': 2,
|
||||
'no-labels': [
|
||||
2,
|
||||
{
|
||||
allowLoop: false,
|
||||
allowSwitch: false
|
||||
}
|
||||
],
|
||||
'no-labels': [2, {
|
||||
'allowLoop': false,
|
||||
'allowSwitch': false
|
||||
}],
|
||||
'no-lone-blocks': 2,
|
||||
'no-mixed-spaces-and-tabs': 2,
|
||||
'no-multi-spaces': 2,
|
||||
'no-multi-str': 2,
|
||||
'no-multiple-empty-lines': [
|
||||
2,
|
||||
{
|
||||
max: 1
|
||||
}
|
||||
],
|
||||
'no-multiple-empty-lines': [2, {
|
||||
'max': 1
|
||||
}],
|
||||
'no-native-reassign': 2,
|
||||
'no-negated-in-lhs': 2,
|
||||
'no-new-object': 2,
|
||||
@@ -179,126 +140,62 @@ module.exports = {
|
||||
'no-undef-init': 2,
|
||||
'no-unexpected-multiline': 2,
|
||||
'no-unmodified-loop-condition': 2,
|
||||
'no-unneeded-ternary': [
|
||||
2,
|
||||
{
|
||||
defaultAssignment: false
|
||||
}
|
||||
],
|
||||
'no-unneeded-ternary': [2, {
|
||||
'defaultAssignment': false
|
||||
}],
|
||||
'no-unreachable': 2,
|
||||
'no-unsafe-finally': 2,
|
||||
'no-unused-vars': [
|
||||
2,
|
||||
{
|
||||
vars: 'all',
|
||||
args: 'none'
|
||||
}
|
||||
],
|
||||
'no-unused-vars': [2, {
|
||||
'vars': 'all',
|
||||
'args': 'none'
|
||||
}],
|
||||
'no-useless-call': 2,
|
||||
'no-useless-computed-key': 2,
|
||||
'no-useless-constructor': 2,
|
||||
'no-useless-escape': 0,
|
||||
'no-whitespace-before-property': 2,
|
||||
'no-with': 2,
|
||||
'one-var': [
|
||||
2,
|
||||
{
|
||||
initialized: 'never'
|
||||
'one-var': [2, {
|
||||
'initialized': 'never'
|
||||
}],
|
||||
'operator-linebreak': [2, 'after', {
|
||||
'overrides': {
|
||||
'?': 'before',
|
||||
':': 'before'
|
||||
}
|
||||
],
|
||||
'operator-linebreak': [
|
||||
2,
|
||||
'after',
|
||||
{
|
||||
overrides: {
|
||||
'?': 'before',
|
||||
':': 'before'
|
||||
}
|
||||
}
|
||||
],
|
||||
}],
|
||||
'padded-blocks': [2, 'never'],
|
||||
quotes: [
|
||||
2,
|
||||
'single',
|
||||
{
|
||||
avoidEscape: true,
|
||||
allowTemplateLiterals: true
|
||||
}
|
||||
],
|
||||
semi: [2, 'never'],
|
||||
'semi-spacing': [
|
||||
2,
|
||||
{
|
||||
before: false,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'quotes': [2, 'single', {
|
||||
'avoidEscape': true,
|
||||
'allowTemplateLiterals': true
|
||||
}],
|
||||
'semi': [2, 'never'],
|
||||
'semi-spacing': [2, {
|
||||
'before': false,
|
||||
'after': true
|
||||
}],
|
||||
'space-before-blocks': [2, 'always'],
|
||||
'space-before-function-paren': [
|
||||
2,
|
||||
{ anonymous: 'never', named: 'never', asyncArrow: 'always' }
|
||||
],
|
||||
'space-before-function-paren': [2, 'never'],
|
||||
'space-in-parens': [2, 'never'],
|
||||
'space-infix-ops': 2,
|
||||
'space-unary-ops': [
|
||||
2,
|
||||
{
|
||||
words: true,
|
||||
nonwords: false
|
||||
}
|
||||
],
|
||||
'object-curly-spacing': [2, 'always'],
|
||||
'spaced-comment': [
|
||||
2,
|
||||
'always',
|
||||
{
|
||||
markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
|
||||
}
|
||||
],
|
||||
'space-unary-ops': [2, {
|
||||
'words': true,
|
||||
'nonwords': false
|
||||
}],
|
||||
'spaced-comment': [2, 'always', {
|
||||
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
|
||||
}],
|
||||
'template-curly-spacing': [2, 'never'],
|
||||
'use-isnan': 2,
|
||||
'valid-typeof': 2,
|
||||
'wrap-iife': [2, 'any'],
|
||||
'yield-star-spacing': [2, 'both'],
|
||||
yoda: [2, 'never'],
|
||||
'yoda': [2, 'never'],
|
||||
'prefer-const': 2,
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
|
||||
'array-bracket-spacing': [2, 'never'],
|
||||
'spellcheck/spell-checker': [
|
||||
'warn',
|
||||
{
|
||||
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
|
||||
}
|
||||
]
|
||||
'object-curly-spacing': [2, 'always', {
|
||||
objectsInObjects: false
|
||||
}],
|
||||
'array-bracket-spacing': [2, 'never']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
name: LLM Code Review
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pull-requests: write
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
types: [opened, reopened, synchronize]
|
||||
|
||||
jobs:
|
||||
llm-code-review:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: fit2cloud/LLM-CodeReview-Action@main
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
|
||||
OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
|
||||
LANGUAGE: English
|
||||
OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
|
||||
MODEL: qwen2-1.5b-instruct
|
||||
PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
|
||||
top_p: 1
|
||||
temperature: 1
|
||||
# max_tokens: 10000
|
||||
MAX_PATCH_LENGTH: 10000
|
||||
IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
|
||||
FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"
|
||||
28
.github/workflows/llm-code-review.yml
vendored
@@ -1,28 +0,0 @@
|
||||
name: LLM Code Review
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pull-requests: write
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
types: [opened, reopened, synchronize]
|
||||
|
||||
jobs:
|
||||
llm-code-review:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: fit2cloud/LLM-CodeReview-Action@main
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
|
||||
OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
|
||||
LANGUAGE: English
|
||||
OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
|
||||
MODEL: qwen2-1.5b-instruct
|
||||
PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
|
||||
top_p: 1
|
||||
temperature: 1
|
||||
# max_tokens: 10000
|
||||
MAX_PATCH_LENGTH: 10000
|
||||
IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
|
||||
FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"
|
||||
2
.gitignore
vendored
@@ -17,5 +17,3 @@ tests/**/coverage/
|
||||
*.sln
|
||||
.env.development
|
||||
.python-version
|
||||
|
||||
helper.json
|
||||
@@ -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
|
||||
@@ -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:20251204_081759 AS stage-build
|
||||
FROM jumpserver/lina-base:20240723_084702 AS stage-build
|
||||
|
||||
ARG 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` 配置正确。
|
||||
@@ -5,6 +5,5 @@
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
|
||||
@@ -1,25 +1,13 @@
|
||||
import Mock from 'mockjs'
|
||||
import { param2Obj } from '../src/utils'
|
||||
|
||||
import user from './user'
|
||||
import table from './table'
|
||||
|
||||
export function param2Obj(url) {
|
||||
const search = url.split('?')[1]
|
||||
if (!search) {
|
||||
return {}
|
||||
}
|
||||
return JSON.parse(
|
||||
'{"' +
|
||||
decodeURIComponent(search)
|
||||
.replace(/"/g, '\\"')
|
||||
.replace(/&/g, '","')
|
||||
.replace(/=/g, '":"')
|
||||
.replace(/\+/g, ' ') +
|
||||
'"}'
|
||||
)
|
||||
}
|
||||
|
||||
const mocks = [...user, ...table]
|
||||
const mocks = [
|
||||
...user,
|
||||
...table
|
||||
]
|
||||
|
||||
// for front mock
|
||||
// please use it cautiously, it will redefine XMLHttpRequest,
|
||||
|
||||
43
package.json
@@ -2,7 +2,7 @@
|
||||
"name": "lina",
|
||||
"version": "v4.0.0",
|
||||
"description": "JumpServer Web UI",
|
||||
"author": "JumpServer Team <support@lxware.hk>",
|
||||
"author": "JumpServer Team <support@fit2cloud.com>",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"scripts": {
|
||||
"dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
|
||||
@@ -26,22 +26,19 @@
|
||||
"dependencies": {
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.13.12",
|
||||
"@fontsource/open-sans": "^5.0.24",
|
||||
"@kangc/v-md-editor": "^1.7.12",
|
||||
"@traptitech/markdown-it-katex": "^3.6.0",
|
||||
"@ztree/ztree_v3": "3.5.44",
|
||||
"axios": "0.28.0",
|
||||
"axios-retry": "^3.1.9",
|
||||
"babel-loader": "^10.0.0",
|
||||
"cache-loader": "^4.1.0",
|
||||
"caniuse-lite": "^1.0.30001642",
|
||||
"cron-parser": "^4.0.0",
|
||||
"crypto-js": "^4.1.1",
|
||||
"css-color-function": "^1.3.3",
|
||||
"decimal.js": "^10.4.3",
|
||||
"deepmerge": "^4.2.2",
|
||||
"dompurify": "^3.2.4",
|
||||
"dompurify": "^3.1.6",
|
||||
"echarts": "4.7.0",
|
||||
"element-ui": "https://github.com/jumpserver-dev/element/releases/download/v2.15.15/jumpserver-element-ui-2.15.15.tgz",
|
||||
"element-ui": "2.15.14",
|
||||
"eslint-plugin-html": "^6.0.0",
|
||||
"highlight.js": "^11.9.0",
|
||||
"install": "^0.13.0",
|
||||
@@ -51,6 +48,17 @@
|
||||
"less": "^3.10.3",
|
||||
"less-loader": "^5.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.frompairs": "^4.0.1",
|
||||
"lodash.get": "^4.4.2",
|
||||
"lodash.has": "^4.5.2",
|
||||
"lodash.includes": "^4.3.0",
|
||||
"lodash.isempty": "^4.4.0",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"lodash.isplainobject": "^4.0.6",
|
||||
"lodash.set": "^4.3.2",
|
||||
"lodash.topairs": "^4.3.0",
|
||||
"lodash.values": "^4.3.0",
|
||||
"markdown-it": "^13.0.2",
|
||||
"markdown-it-link-attributes": "^4.0.1",
|
||||
"moment": "^2.29.4",
|
||||
@@ -59,23 +67,20 @@
|
||||
"npm": "^7.8.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "3.3.0",
|
||||
"socket.io-client": "^4.8.1",
|
||||
"sortablejs": "^1.15.6",
|
||||
"uuid": "8.3.2",
|
||||
"v-sanitize": "^0.0.13",
|
||||
"vue": "2.7.16",
|
||||
"vue": "2.6.10",
|
||||
"vue-codemirror": "4.0.6",
|
||||
"vue-cookie": "^1.1.4",
|
||||
"vue-echarts": "^5.0.0-beta.0",
|
||||
"vue-i18n": "^8.15.5",
|
||||
"vue-json-editor": "^1.4.3",
|
||||
"vue-markdown": "^2.2.4",
|
||||
"vue-moment": "^4.1.0",
|
||||
"vue-password-strength-meter": "^1.7.2",
|
||||
"vue-router": "3.0.6",
|
||||
"vue-select": "^3.9.5",
|
||||
"vuejs-logger": "^1.5.4",
|
||||
"vuex": "3.1.0",
|
||||
"watermark-js-plus": "^1.5.8",
|
||||
"xss": "^1.0.14",
|
||||
"xterm": "^4.5.0",
|
||||
"xterm-addon-fit": "^0.3.0",
|
||||
@@ -90,17 +95,15 @@
|
||||
"@vue/cli-service": "3.6.0",
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"autoprefixer": "^9.5.1",
|
||||
"babel-core": "6.26.3",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
"babel-eslint": "10.0.1",
|
||||
"babel-jest": "23.6.0",
|
||||
"chalk": "2.4.2",
|
||||
"compression-webpack-plugin": "^6.1.1",
|
||||
"connect": "3.6.6",
|
||||
"deasync": "^0.1.29",
|
||||
"element-theme-chalk": "^2.13.1",
|
||||
"eslint": "^5.15.3",
|
||||
"eslint-config-prettier": "^6.15.0",
|
||||
"eslint-plugin-prettier": "^3.4.1",
|
||||
"eslint-plugin-spellcheck": "^0.0.20",
|
||||
"eslint-plugin-vue": "5.2.2",
|
||||
"eslint-plugin-vue-i18n": "^0.3.0",
|
||||
"github-markdown-css": "^5.1.0",
|
||||
@@ -109,8 +112,6 @@
|
||||
"less-loader": "^5.0.0",
|
||||
"lint-staged": "^10.1.2",
|
||||
"mockjs": "1.0.1-beta3",
|
||||
"prettier": "^3.6.2",
|
||||
"pretty-bytes": "^5.6.0",
|
||||
"runjs": "^4.3.2",
|
||||
"sass": "~1.32.6",
|
||||
"sass-loader": "^7.1.0",
|
||||
@@ -121,11 +122,10 @@
|
||||
"svg-sprite-loader": "4.1.3",
|
||||
"svgo": "1.2.2",
|
||||
"vue-i18n-extract": "^1.1.1",
|
||||
"vue-template-compiler": "2.7.16",
|
||||
"webpack": "^4.28.4"
|
||||
"vue-template-compiler": "2.6.10"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12",
|
||||
"node": ">=8.9",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
@@ -142,6 +142,5 @@
|
||||
"src/**/*.{js,vue}": [
|
||||
"eslint --fix"
|
||||
]
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,90 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
||||
<meta content="0" http-equiv="Expires">
|
||||
<meta content="no-cache" http-equiv="Pragma">
|
||||
<meta content="no-cache" http-equiv="Cache-control">
|
||||
<meta content="no-cache" http-equiv="Cache">
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta http-equiv="Expires" content="0">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Cache-control" content="no-cache">
|
||||
<meta http-equiv="Cache" content="no-cache">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<title><%= webpackConfig.name %></title>
|
||||
<link href="<%= BASE_URL %>theme/element-ui.css" rel="stylesheet">
|
||||
<style>
|
||||
#loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.98);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#loading .spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
#loading .spinner::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: rgba(64, 158, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>
|
||||
We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled.
|
||||
Please enable it to continue.
|
||||
</strong>
|
||||
</noscript>
|
||||
<script>
|
||||
window.onload = function () {
|
||||
<link rel="stylesheet" href="<%= BASE_URL %>theme/element-ui.css">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
if (location.pathname === '/') {
|
||||
location.pathname = '/ui/'
|
||||
location.pathname = '/ui/'
|
||||
}
|
||||
const pathname = window.location.pathname
|
||||
if (pathname.startsWith('/core')) {
|
||||
return
|
||||
}
|
||||
if (pathname.indexOf('/ui') === -1) {
|
||||
window.location.href = window.location.origin + '/ui/#' + pathname
|
||||
if(pathname.indexOf('/ui') === -1) {
|
||||
window.location.href = window.location.origin + '/ui/#' + pathname
|
||||
}
|
||||
if (pathname.startsWith('/ui/#/chat')) {
|
||||
window.location.href = window.location.origin + pathname
|
||||
window.location.href = window.location.origin + pathname
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<div id="app">
|
||||
</div>
|
||||
<div id="loading">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
}
|
||||
</script>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
78
src/App.vue
@@ -5,90 +5,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import { Watermark } from 'watermark-js-plus'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
watermark: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
isRouterAlive: state => state.common.isRouterAlive
|
||||
}),
|
||||
...mapGetters({
|
||||
currentUser: 'currentUser',
|
||||
publicSettings: 'publicSettings'
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
currentUser: {
|
||||
handler(newVal) {
|
||||
this.createWatermark()
|
||||
}
|
||||
},
|
||||
'publicSettings.SECURITY_WATERMARK_ENABLED': {
|
||||
handler(newVal) {
|
||||
if (!newVal) {
|
||||
return setTimeout(() => {
|
||||
this.watermark?.destroy()
|
||||
this.watermark = null
|
||||
})
|
||||
}
|
||||
|
||||
this.createWatermark()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getWaterMarkFields() {
|
||||
const user = this.currentUser
|
||||
const userId = user?.id || ''
|
||||
const name = user?.name || ''
|
||||
const userName = user?.username || ''
|
||||
const currentTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
|
||||
return { userId, name, userName, currentTime }
|
||||
},
|
||||
getWaterMarkContent() {
|
||||
const fields = this.getWaterMarkFields()
|
||||
const template = this.publicSettings.SECURITY_WATERMARK_CONSOLE_CONTENT || ''
|
||||
|
||||
// 找出模板中所有的变量占位符 ${xxx}
|
||||
const placeholders = template.match(/\${([^}]+)}/g) || []
|
||||
const allVariables = {}
|
||||
|
||||
// 为模板中的每个变量准备值
|
||||
placeholders.forEach(placeholder => {
|
||||
const varName = placeholder.slice(2, -1) // 提取变量名,去掉 ${ 和 }
|
||||
allVariables[varName] = fields[varName] !== undefined ? fields[varName] : 'N/A'
|
||||
})
|
||||
|
||||
// 合并用户现有的字段和模板中可能缺失的字段
|
||||
const safeFields = { ...fields, ...allVariables }
|
||||
|
||||
// 安全解析模板
|
||||
return new Function(...Object.keys(safeFields), `return \`${template}\`;`)(...Object.values(safeFields))
|
||||
},
|
||||
|
||||
createWatermark() {
|
||||
if (this.currentUser?.username && this.publicSettings?.SECURITY_WATERMARK_ENABLED) {
|
||||
this.watermark = new Watermark({
|
||||
content: this.getWaterMarkContent(),
|
||||
width: this.publicSettings?.SECURITY_WATERMARK_WIDTH,
|
||||
height: this.publicSettings?.SECURITY_WATERMARK_HEIGHT,
|
||||
rotate: this.publicSettings?.SECURITY_WATERMARK_ROTATE,
|
||||
fontWeight: 'normal',
|
||||
fontSize: this.publicSettings?.SECURITY_WATERMARK_FONT_SIZE + 'px',
|
||||
fontColor: this.publicSettings?.SECURITY_WATERMARK_COLOR,
|
||||
contentType: 'multi-line-text',
|
||||
lineHeight: this.publicSettings?.SECURITY_WATERMARK_FONT_SIZE
|
||||
})
|
||||
this.watermark.create()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -16,9 +16,9 @@ export function getSystemUserList(data) {
|
||||
})
|
||||
}
|
||||
|
||||
export function getZoneList(data) {
|
||||
export function getDomainList(data) {
|
||||
return request({
|
||||
url: '/api/v1/assets/zones/',
|
||||
url: '/api/v1/assets/domains/',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
|
||||
@@ -53,7 +53,7 @@ export function createJob(form) {
|
||||
})
|
||||
}
|
||||
|
||||
export function stopJob(form) {
|
||||
export function StopJob(form) {
|
||||
return request({
|
||||
url: '/api/v1/ops/job-executions/stop/',
|
||||
method: 'post',
|
||||
@@ -61,21 +61,13 @@ export function stopJob(form) {
|
||||
})
|
||||
}
|
||||
|
||||
export function JobUploadFile(form, config = {}) {
|
||||
export function JobUploadFile(form) {
|
||||
return request({
|
||||
url: '/api/v1/ops/jobs/upload/',
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
timeout: 60 * 60 * 1000,
|
||||
data: form,
|
||||
...config
|
||||
})
|
||||
}
|
||||
|
||||
export function auditUpdateJob(id, form) {
|
||||
return request({
|
||||
url: `/api/v1/audits/jobs/${id}/`,
|
||||
method: 'patch',
|
||||
data: form
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -18,14 +18,14 @@ export function toggleLockSession(data) {
|
||||
|
||||
export function getAllCommandStorage() {
|
||||
return request({
|
||||
url: '/api/v1/terminal/command-storages/',
|
||||
url: `/api/v1/terminal/command-storages/`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getAllReplayStorage() {
|
||||
return request({
|
||||
url: '/api/v1/terminal/replay-storages/',
|
||||
url: `/api/v1/terminal/replay-storages/`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -8,20 +8,11 @@ export function login(data) {
|
||||
})
|
||||
}
|
||||
|
||||
export async function getProfile(token) {
|
||||
let profile = await request({
|
||||
export function getProfile(token) {
|
||||
return request({
|
||||
url: '/api/v1/users/profile/',
|
||||
method: 'get'
|
||||
})
|
||||
const perms = await request({
|
||||
url: '/api/v1/users/profile/permissions/',
|
||||
method: 'get'
|
||||
})
|
||||
profile = {
|
||||
...profile,
|
||||
...perms
|
||||
}
|
||||
return profile
|
||||
}
|
||||
|
||||
export function getUserList(data) {
|
||||
@@ -31,7 +22,6 @@ export function getUserList(data) {
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
export function getUserGroupList(params) {
|
||||
return request({
|
||||
url: '/api/v1/users/groups/',
|
||||
@@ -39,7 +29,6 @@ export function getUserGroupList(params) {
|
||||
params: params
|
||||
})
|
||||
}
|
||||
|
||||
export function getUserGroupDetail(id) {
|
||||
return request({
|
||||
url: `/api/v1/users/groups/${id}/`,
|
||||
@@ -61,7 +50,6 @@ export function editUserGroup(data) {
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function updateUserGroup(id, data) {
|
||||
return request({
|
||||
url: '/api/v1/users/groups/' + id + '/',
|
||||
|
||||
|
Before Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 3.6 KiB |
BIN
src/assets/img/chat.png
Normal file
|
After Width: | Height: | Size: 2.5 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 |
@@ -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="1748326203303" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2853" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M10.24 605.184l839.168-481.28L1013.76 220.672v191.488L174.592 895.488 10.24 804.352z" fill="#0096FF" p-id="2854"></path><path d="M10.24 416.768V220.672l168.96-96.768 308.736 178.688-331.776 193.536zM541.184 717.312l331.264-195.072 141.312 88.064v194.048l-165.376 95.744z" fill="#25C764" p-id="2855"></path></svg>
|
||||
|
Before Width: | Height: | Size: 645 B |
|
Before Width: | Height: | Size: 210 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
@@ -3,7 +3,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataActions from '@/components/Common/DataActions/index.vue'
|
||||
import DataActions from '@/components/DataActions'
|
||||
|
||||
export default {
|
||||
name: 'ActionsGroup',
|
||||
@@ -1,42 +1,24 @@
|
||||
import { UpdateToken, UploadSecret } from '@/components/Form/FormFields'
|
||||
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 AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
|
||||
|
||||
export const accountFieldsMeta = (vm) => {
|
||||
const defaultPrivilegedAccounts = ['root', 'administrator']
|
||||
|
||||
function onPrivilegedUser(value, updateForm) {
|
||||
const maybePrivileged = defaultPrivilegedAccounts.includes(value)
|
||||
if (maybePrivileged) {
|
||||
updateForm({ privileged: true, secret_reset: false, push_now: false })
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
nodes: {
|
||||
assets: {
|
||||
component: Select2,
|
||||
label: vm.$t('Node'),
|
||||
label: vm.$t('Assets'),
|
||||
rules: [Required],
|
||||
el: {
|
||||
value: [],
|
||||
multiple: true,
|
||||
ajax: {
|
||||
url: '/api/v1/assets/nodes/',
|
||||
url: '/api/v1/assets/assets/',
|
||||
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: () => {
|
||||
return vm.platform || vm.asset
|
||||
}
|
||||
@@ -45,10 +27,7 @@ export const accountFieldsMeta = (vm) => {
|
||||
component: Select2,
|
||||
rules: [Required],
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
},
|
||||
multiple: vm.addTemplate,
|
||||
multiple: false,
|
||||
ajax: {
|
||||
url: '/api/v1/accounts/account-templates/',
|
||||
transformOption: (item) => {
|
||||
@@ -64,11 +43,6 @@ export const accountFieldsMeta = (vm) => {
|
||||
rules: [Required],
|
||||
label: vm.$t('AccountPolicy'),
|
||||
helpTip: vm.$t('AccountPolicyHelpText'),
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
}
|
||||
},
|
||||
hidden: () => {
|
||||
return vm.platform || vm.asset
|
||||
}
|
||||
@@ -76,19 +50,17 @@ export const accountFieldsMeta = (vm) => {
|
||||
name: {
|
||||
label: vm.$t('Name'),
|
||||
rules: [RequiredChange],
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
}
|
||||
},
|
||||
on: {
|
||||
input: ([value], updateForm) => {
|
||||
if (!vm.usernameChanged) {
|
||||
if (!vm.account?.name) {
|
||||
updateForm({ username: value })
|
||||
}
|
||||
const maybePrivileged = defaultPrivilegedAccounts.includes(value)
|
||||
if (maybePrivileged) {
|
||||
updateForm({ privileged: true })
|
||||
}
|
||||
}
|
||||
onPrivilegedUser(value, updateForm)
|
||||
}
|
||||
},
|
||||
hidden: () => {
|
||||
@@ -97,16 +69,17 @@ export const accountFieldsMeta = (vm) => {
|
||||
},
|
||||
username: {
|
||||
el: {
|
||||
get disabled() {
|
||||
return !!vm.account?.name || vm.isDisabled
|
||||
}
|
||||
disabled: !!vm.account?.name
|
||||
},
|
||||
on: {
|
||||
input: ([value], updateForm) => {
|
||||
vm.usernameChanged = true
|
||||
},
|
||||
change: ([value], updateForm) => {
|
||||
onPrivilegedUser(value, updateForm)
|
||||
const maybePrivileged = defaultPrivilegedAccounts.includes(value)
|
||||
if (maybePrivileged) {
|
||||
updateForm({ privileged: true })
|
||||
}
|
||||
}
|
||||
},
|
||||
hidden: () => {
|
||||
@@ -115,11 +88,6 @@ export const accountFieldsMeta = (vm) => {
|
||||
},
|
||||
privileged: {
|
||||
label: vm.$t('Privileged'),
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
}
|
||||
},
|
||||
hidden: () => {
|
||||
return vm.addTemplate
|
||||
}
|
||||
@@ -142,11 +110,6 @@ export const accountFieldsMeta = (vm) => {
|
||||
},
|
||||
su_from_username: {
|
||||
label: vm.$t('UserSwitchFrom'),
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
}
|
||||
},
|
||||
hidden: (formValue) => {
|
||||
return vm.platform || vm.asset || vm.addTemplate
|
||||
}
|
||||
@@ -154,11 +117,6 @@ export const accountFieldsMeta = (vm) => {
|
||||
password: {
|
||||
label: vm.$t('Password'),
|
||||
component: UpdateToken,
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
}
|
||||
},
|
||||
hidden: (formValue) => {
|
||||
return formValue.secret_type !== 'password' || vm.addTemplate
|
||||
}
|
||||
@@ -166,63 +124,33 @@ export const accountFieldsMeta = (vm) => {
|
||||
ssh_key: {
|
||||
label: vm.$t('PrivateKey'),
|
||||
component: UploadSecret,
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
}
|
||||
},
|
||||
hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
|
||||
},
|
||||
passphrase: {
|
||||
label: vm.$t('Passphrase'),
|
||||
component: UpdateToken,
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
}
|
||||
},
|
||||
hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
|
||||
},
|
||||
token: {
|
||||
label: vm.$t('Token'),
|
||||
component: UploadSecret,
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
}
|
||||
},
|
||||
hidden: (formValue) => formValue.secret_type !== 'token' || vm.addTemplate
|
||||
},
|
||||
access_key: {
|
||||
id: 'access_key',
|
||||
label: vm.$t('AccessKey'),
|
||||
component: UploadSecret,
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
}
|
||||
},
|
||||
hidden: (formValue) => formValue.secret_type !== 'access_key' || vm.addTemplate
|
||||
},
|
||||
api_key: {
|
||||
id: 'api_key',
|
||||
label: vm.$t('ApiKey'),
|
||||
component: UploadSecret,
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
}
|
||||
},
|
||||
hidden: (formValue) => formValue.secret_type !== 'api_key' || vm.addTemplate
|
||||
},
|
||||
secret_type: {
|
||||
type: 'radio-group',
|
||||
options: [],
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
}
|
||||
},
|
||||
hidden: () => {
|
||||
return vm.addTemplate
|
||||
}
|
||||
@@ -235,8 +163,7 @@ export const accountFieldsMeta = (vm) => {
|
||||
!automation.ansible_enabled ||
|
||||
!vm.$hasPerm('accounts.push_account') ||
|
||||
(formValue.secret_type === 'ssh_key' && vm.iPlatform.type.value === 'windows') ||
|
||||
vm.addTemplate ||
|
||||
!formValue.secret_reset
|
||||
vm.addTemplate
|
||||
}
|
||||
},
|
||||
params: {
|
||||
@@ -245,9 +172,6 @@ export const accountFieldsMeta = (vm) => {
|
||||
el: {},
|
||||
hidden: (formValue) => {
|
||||
const automation = vm.iPlatform.automation || {}
|
||||
if (!vm.iPlatform.automation) {
|
||||
return true
|
||||
}
|
||||
vm.fieldsMeta.params.el.method = vm.iPlatform.automation.push_account_method
|
||||
vm.fieldsMeta.params.el.pushAccountParams = vm.iPlatform.automation.push_account_params
|
||||
return !formValue.push_now ||
|
||||
@@ -260,27 +184,12 @@ export const accountFieldsMeta = (vm) => {
|
||||
}
|
||||
},
|
||||
is_active: {
|
||||
label: vm.$t('IsActive'),
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
}
|
||||
}
|
||||
label: vm.$t('IsActive')
|
||||
},
|
||||
comment: {
|
||||
label: vm.$t('Comment'),
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
}
|
||||
}
|
||||
},
|
||||
secret_reset: {
|
||||
label: vm.$t('SecretReset'),
|
||||
el: {
|
||||
get disabled() {
|
||||
return vm.isDisabled
|
||||
}
|
||||
hidden: () => {
|
||||
return vm.addTemplate
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
<script>
|
||||
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'
|
||||
|
||||
export default {
|
||||
@@ -45,7 +45,6 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
isDisabled: false,
|
||||
usernameChanged: false,
|
||||
submitBtnText: this.$t('Confirm'),
|
||||
iPlatform: {
|
||||
@@ -62,12 +61,11 @@ export default {
|
||||
form: Object.assign({ 'on_invalid': 'error' }, this.account || {}),
|
||||
encryptedFields: ['secret'],
|
||||
fields: [
|
||||
[this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
|
||||
[this.$t('Asset'), ['nodes', 'assets']],
|
||||
[this.$t('AccountTemplate'), ['template']],
|
||||
[this.$t('Basic'), ['assets', 'name', 'username', 'privileged', 'su_from', 'su_from_username']],
|
||||
[this.$t('Secret'), [
|
||||
'secret_type', 'password', 'ssh_key', 'token',
|
||||
'access_key', 'passphrase', 'api_key',
|
||||
'secret_reset'
|
||||
'access_key', 'passphrase', 'api_key'
|
||||
]],
|
||||
[this.$t('Other'), ['push_now', 'params', 'on_invalid', 'is_active', 'comment']]
|
||||
],
|
||||
@@ -75,16 +73,6 @@ export default {
|
||||
hasSaveContinue: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.query': {
|
||||
handler(nv, ov) {
|
||||
if (nv && (nv.flag === 'move' || nv.flag === 'copy')) {
|
||||
this.isDisabled = true
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
await this.getPlatform()
|
||||
@@ -157,11 +145,7 @@ export default {
|
||||
delete form['secret']
|
||||
}
|
||||
if (this.account?.name) {
|
||||
if (this.account.payload && this.account.payload === 'pam_account_clone') {
|
||||
this.$emit('add', form)
|
||||
} else {
|
||||
this.$emit('edit', form)
|
||||
}
|
||||
this.$emit('edit', form)
|
||||
} else {
|
||||
this.$emit('add', form)
|
||||
}
|
||||
@@ -173,16 +157,16 @@ export default {
|
||||
<style lang='scss' scoped>
|
||||
.account-add {
|
||||
::v-deep .el-form-item {
|
||||
//margin-bottom: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.help-block {
|
||||
//margin-bottom: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .form-group-header {
|
||||
.hr-line-dashed {
|
||||
//margin: 5px 0;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<script>
|
||||
import { GenericUpdateFormDialog } from '@/layout/components'
|
||||
import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
|
||||
import { encryptPassword } from '@/utils/secure'
|
||||
import { encryptPassword } from '@/utils/crypto'
|
||||
|
||||
export default {
|
||||
name: 'AccountBulkUpdateDialog',
|
||||
|
||||
@@ -1,38 +1,36 @@
|
||||
<template v-if="iVisible">
|
||||
<Drawer
|
||||
<template>
|
||||
<Dialog
|
||||
v-if="iVisible"
|
||||
:close-on-click-modal="false"
|
||||
:destroy-on-close="true"
|
||||
:show-cancel="false"
|
||||
:show-confirm="false"
|
||||
:title="title"
|
||||
:visible="iVisible"
|
||||
class="drawer"
|
||||
@close-drawer="handleCloseDrawer"
|
||||
:visible.sync="iVisible"
|
||||
v-bind="$attrs"
|
||||
width="900px"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<Page :title="'null'">
|
||||
<IBox class="content">
|
||||
<AccountCreateUpdateForm
|
||||
v-if="!loading"
|
||||
ref="form"
|
||||
:account="account"
|
||||
:add-template="addTemplate"
|
||||
:asset="asset"
|
||||
@add="addAccount"
|
||||
@edit="editAccount"
|
||||
/>
|
||||
</IBox>
|
||||
</Page>
|
||||
</Drawer>
|
||||
<AccountCreateUpdateForm
|
||||
v-if="!loading"
|
||||
ref="form"
|
||||
:account="account"
|
||||
:add-template="addTemplate"
|
||||
:asset="asset"
|
||||
@add="addAccount"
|
||||
@edit="editAccount"
|
||||
/>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Drawer from '@/components/Drawer/index.vue'
|
||||
import Dialog from '@/components/Dialog/index.vue'
|
||||
import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue'
|
||||
import IBox from '@/components/Common/IBox/index.vue'
|
||||
import Page from '@/layout/components/Page/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'CreateAccountDialog',
|
||||
components: {
|
||||
IBox,
|
||||
Drawer,
|
||||
Page,
|
||||
Dialog,
|
||||
AccountCreateUpdateForm
|
||||
},
|
||||
props: {
|
||||
@@ -93,8 +91,8 @@ export default {
|
||||
iVisible = true
|
||||
data = formValue
|
||||
url = `/api/v1/accounts/accounts/bulk/`
|
||||
if ((!data.assets || data.assets.length === 0) && (!data.nodes || data.nodes.length === 0)) {
|
||||
this.$message.error(this.$tc('PleaseSelectAssetOrNode'))
|
||||
if (data.assets.length === 0) {
|
||||
this.$message.error(this.$tc('PleaseSelectAsset'))
|
||||
return
|
||||
}
|
||||
}
|
||||
@@ -107,32 +105,17 @@ export default {
|
||||
this.$emit('add', true)
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error?.response?.data?.code === 'no_valid_assets') {
|
||||
this.$message.error(error?.response?.data?.detail)
|
||||
return
|
||||
}
|
||||
this.iVisible = true
|
||||
this.handleResult(null, error)
|
||||
})
|
||||
},
|
||||
editAccount(form) {
|
||||
const data = { ...form }
|
||||
const flag = this.$route.query.flag
|
||||
|
||||
switch (flag) {
|
||||
case 'copy':
|
||||
this.handleAccountOperation(this.account.id, 'copy-to-assets', data)
|
||||
break
|
||||
case 'move':
|
||||
this.handleAccountOperation(this.account.id, 'move-to-assets', data)
|
||||
break
|
||||
default:
|
||||
this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
|
||||
this.iVisible = false
|
||||
this.$emit('add', true)
|
||||
this.$message.success(this.$tc('UpdateSuccessMsg'))
|
||||
}).catch(error => this.setFieldError(error))
|
||||
}
|
||||
this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
|
||||
this.iVisible = false
|
||||
this.$emit('add', true)
|
||||
this.$message.success(this.$tc('UpdateSuccessMsg'))
|
||||
}).catch(error => this.setFieldError(error))
|
||||
},
|
||||
handleResult(resp, error) {
|
||||
let bulkCreate = !this.asset
|
||||
@@ -185,29 +168,7 @@ export default {
|
||||
refsAutoDataForm.setFieldError(current, err)
|
||||
}
|
||||
}
|
||||
},
|
||||
handleCloseDrawer() {
|
||||
this.iVisible = false
|
||||
// Reflect.deleteProperty(this.$route.query, 'flag')
|
||||
},
|
||||
handleAccountOperation(id, path, data) {
|
||||
this.$axios.post(`/api/v1/accounts/accounts/${id}/${path}/`, data).then((res) => {
|
||||
this.iVisible = false
|
||||
this.$emit('add', true)
|
||||
this.handleResult(res, null)
|
||||
}).catch(error => this.handleResult(null, error))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.drawer {
|
||||
::v-deep .el-drawer__body {
|
||||
|
||||
.el-form {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<DrawerListTable
|
||||
ref="ListTable"
|
||||
:detail-drawer="detailDrawer"
|
||||
:header-actions="headerActions"
|
||||
:quick-filters="quickFilters"
|
||||
:table-config="tableConfig"
|
||||
/>
|
||||
<ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
|
||||
<ViewSecret
|
||||
v-if="showViewSecretDialog"
|
||||
:account="account"
|
||||
@@ -22,13 +16,22 @@
|
||||
<AccountCreateUpdate
|
||||
v-if="showAddDialog"
|
||||
:account="account"
|
||||
:add-template="addTemplate"
|
||||
:asset="iAsset"
|
||||
:title="accountCreateUpdateTitle"
|
||||
:visible.sync="showAddDialog"
|
||||
@add="addAccountSuccess"
|
||||
@bulk-create-done="showBulkCreateResult($event)"
|
||||
/>
|
||||
<AccountCreateUpdate
|
||||
v-if="showAddTemplateDialog"
|
||||
:account="account"
|
||||
:add-template="true"
|
||||
:asset="iAsset"
|
||||
:title="accountCreateByTemplateTitle"
|
||||
:visible.sync="showAddTemplateDialog"
|
||||
@add="addAccountSuccess"
|
||||
@bulk-create-done="showBulkCreateResult($event)"
|
||||
/>
|
||||
<ResultDialog
|
||||
v-if="showResultDialog"
|
||||
:result="createAccountResults"
|
||||
@@ -41,42 +44,29 @@
|
||||
v-bind="updateSelectedDialogSetting"
|
||||
@update="handleAccountBulkUpdate"
|
||||
/>
|
||||
<PasswordHistoryDialog
|
||||
v-if="showPasswordHistoryDialog"
|
||||
:account="currentAccountColumn"
|
||||
:visible.sync="showPasswordHistoryDialog"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { accountOtherActions, accountQuickFilters, connectivityMeta, isDirectoryServiceAccount } from './const'
|
||||
import { openTaskPage } from '@/utils/jms/index'
|
||||
import {
|
||||
AccountConnectFormatter,
|
||||
ActionsFormatter,
|
||||
PlatformFormatter,
|
||||
SecretViewerFormatter
|
||||
} from '@/components/Table/TableFormatters'
|
||||
import ListTable from '@/components/Table/ListTable/index.vue'
|
||||
import { ActionsFormatter } from '@/components/Table/TableFormatters'
|
||||
import ViewSecret from './ViewSecret.vue'
|
||||
import UpdateSecretInfo from './UpdateSecretInfo.vue'
|
||||
import ResultDialog from './BulkCreateResultDialog.vue'
|
||||
import AccountCreateUpdate from './AccountCreateUpdate.vue'
|
||||
import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
|
||||
import DrawerListTable from '@/components/Table/DrawerListTable/index.vue'
|
||||
import { connectivityMeta } from './const'
|
||||
import { openTaskPage } from '@/utils/jms'
|
||||
import ResultDialog from './BulkCreateResultDialog.vue'
|
||||
import AccountBulkUpdateDialog from '@/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue'
|
||||
|
||||
export default {
|
||||
name: 'AccountListTable',
|
||||
components: {
|
||||
ViewSecret,
|
||||
AccountBulkUpdateDialog,
|
||||
ResultDialog,
|
||||
DrawerListTable,
|
||||
ListTable,
|
||||
UpdateSecretInfo,
|
||||
AccountCreateUpdate,
|
||||
PasswordHistoryDialog,
|
||||
AccountBulkUpdateDialog
|
||||
ViewSecret,
|
||||
AccountCreateUpdate
|
||||
},
|
||||
props: {
|
||||
url: {
|
||||
@@ -99,7 +89,7 @@ export default {
|
||||
},
|
||||
hasClone: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: false
|
||||
},
|
||||
asset: {
|
||||
type: Object,
|
||||
@@ -129,7 +119,7 @@ export default {
|
||||
columnsDefault: {
|
||||
type: Array,
|
||||
default: () => ([
|
||||
'name', 'username', 'secret', 'asset', 'platform', 'connect'
|
||||
'name', 'username', 'asset', 'date_updated'
|
||||
])
|
||||
},
|
||||
headerExtraActions: {
|
||||
@@ -139,34 +129,22 @@ export default {
|
||||
extraQuery: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
showQuickFilters: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showActions: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const vm = this
|
||||
return {
|
||||
addTemplate: false,
|
||||
isUpdateAccount: false,
|
||||
currentAccountColumn: {},
|
||||
showPasswordHistoryDialog: false,
|
||||
showViewSecretDialog: false,
|
||||
showUpdateSecretDialog: false,
|
||||
showResultDialog: false,
|
||||
showAddDialog: false,
|
||||
showAddTemplateDialog: false,
|
||||
detailDrawer: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
|
||||
createAccountResults: [],
|
||||
accountCreateUpdateTitle: this.$t('AddAccount'),
|
||||
accountCreateByTemplateTitle: this.$t('AddAccountByTemplate'),
|
||||
iAsset: this.asset,
|
||||
account: {},
|
||||
secretUrl: '',
|
||||
quickFilters: this.showQuickFilters ? accountQuickFilters(this) : [],
|
||||
tableConfig: {
|
||||
url: this.url,
|
||||
permissions: {
|
||||
@@ -175,86 +153,40 @@ export default {
|
||||
},
|
||||
extraQuery: this.extraQuery,
|
||||
columnsExclude: ['spec_info'],
|
||||
columnsAdd: ['secret', 'platform', 'connect'],
|
||||
columnsShow: {
|
||||
min: ['name', 'username', 'actions'],
|
||||
default: this.columnsDefault
|
||||
},
|
||||
columnsMeta: {
|
||||
name: {
|
||||
minWidth: '60px',
|
||||
formatterArgs: {
|
||||
can: () => vm.$hasPerm('accounts.view_account'),
|
||||
getRoute: ({ row }) => ({
|
||||
name: 'AccountDetail',
|
||||
width: '120px',
|
||||
formatter: function(row) {
|
||||
const to = {
|
||||
name: 'AssetAccountDetail',
|
||||
params: { id: row.id }
|
||||
}),
|
||||
getTitle: ({ row }) => {
|
||||
let title = row.name
|
||||
if (row.ds && this.asset && this.asset.id !== row.asset.id) {
|
||||
const dsID = row.ds.id.split('-')[0]
|
||||
title = `${row.name}@${dsID}`
|
||||
}
|
||||
return title
|
||||
},
|
||||
getDrawerTitle({ row }) {
|
||||
return `${row.username}@${row.asset.name}`
|
||||
}
|
||||
}
|
||||
},
|
||||
secret: {
|
||||
formatter: SecretViewerFormatter,
|
||||
width: '130px',
|
||||
formatterArgs: {
|
||||
secretFrom: 'api',
|
||||
hasDownload: false,
|
||||
actionLeft: true
|
||||
}
|
||||
},
|
||||
connect: {
|
||||
label: this.$t('Connect'),
|
||||
width: '80px',
|
||||
formatter: AccountConnectFormatter,
|
||||
formatterArgs: {
|
||||
asset: this.asset,
|
||||
can: ({ row }) => {
|
||||
return this.currentUserIsSuperAdmin
|
||||
}
|
||||
}
|
||||
},
|
||||
ds: {
|
||||
width: '100px',
|
||||
formatter: (row) => {
|
||||
if (row.ds && row.ds['domain_name']) {
|
||||
return row.ds['domain_name']
|
||||
if (vm.$hasPerm('accounts.view_account')) {
|
||||
return <router-link to={to}>{row.name}</router-link>
|
||||
} else {
|
||||
return ''
|
||||
return <span>{row.name}</span>
|
||||
}
|
||||
}
|
||||
},
|
||||
platform: {
|
||||
label: this.$t('Platform'),
|
||||
width: '150px',
|
||||
formatter: PlatformFormatter,
|
||||
formatterArgs: {
|
||||
platformAttr: 'asset.platform'
|
||||
}
|
||||
},
|
||||
asset: {
|
||||
minWidth: '100px',
|
||||
formatter: function(row) {
|
||||
return row.asset.name
|
||||
const to = {
|
||||
name: 'AssetDetail',
|
||||
params: { id: row.asset.id }
|
||||
}
|
||||
if (vm.$hasPerm('assets.view_asset')) {
|
||||
return <router-link to={to}>{row.asset.name}</router-link>
|
||||
} else {
|
||||
return <span>{row.asset.name}</span>
|
||||
}
|
||||
}
|
||||
},
|
||||
username: {
|
||||
minWidth: '60px',
|
||||
formatter: function(row) {
|
||||
if (row.ds && row.ds['domain_name']) {
|
||||
return `${row.username}@${row.ds['domain_name']}`
|
||||
} else {
|
||||
return row.username
|
||||
}
|
||||
}
|
||||
width: '120px'
|
||||
},
|
||||
secret_type: {
|
||||
formatter: function(row) {
|
||||
@@ -282,19 +214,77 @@ export default {
|
||||
connectivity: connectivityMeta,
|
||||
actions: {
|
||||
formatter: ActionsFormatter,
|
||||
has: this.showActions,
|
||||
formatterArgs: {
|
||||
performDelete: ({ row }) => {
|
||||
const id = row.id
|
||||
const url = `/api/v1/accounts/accounts/${id}/`
|
||||
return this.$axios.delete(url)
|
||||
},
|
||||
hasUpdate: false, // can set function(row, value)
|
||||
hasDelete: true, // can set function(row, value)
|
||||
hasClone: false,
|
||||
canDelete: ({ row }) => vm.$hasPerm('accounts.delete_account') && !isDirectoryServiceAccount(row, this),
|
||||
hasDelete: false, // can set function(row, value)
|
||||
hasClone: this.hasClone,
|
||||
moreActionsTitle: this.$t('More'),
|
||||
extraActions: accountOtherActions(this)
|
||||
extraActions: [
|
||||
{
|
||||
name: 'View',
|
||||
title: this.$t('View'),
|
||||
can: this.$hasPerm('accounts.view_accountsecret'),
|
||||
type: 'primary',
|
||||
callback: ({ row }) => {
|
||||
// debugger
|
||||
vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
|
||||
vm.account = row
|
||||
vm.showViewSecretDialog = false
|
||||
setTimeout(() => {
|
||||
vm.showViewSecretDialog = true
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Update',
|
||||
title: this.$t('Edit'),
|
||||
can: this.$hasPerm('accounts.change_account') && !this.$store.getters.currentOrgIsRoot,
|
||||
callback: ({ row }) => {
|
||||
const data = {
|
||||
...this.asset,
|
||||
...row.asset
|
||||
}
|
||||
vm.account = row
|
||||
vm.iAsset = data
|
||||
vm.showAddDialog = false
|
||||
vm.accountCreateUpdateTitle = this.$t('UpdateAccount')
|
||||
setTimeout(() => {
|
||||
vm.showAddDialog = true
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Test',
|
||||
title: this.$t('Test'),
|
||||
can: ({ row }) =>
|
||||
!this.$store.getters.currentOrgIsRoot &&
|
||||
this.$hasPerm('accounts.verify_account') &&
|
||||
row.asset['auto_config'].ansible_enabled &&
|
||||
row.asset['auto_config'].ping_enabled,
|
||||
callback: ({ row }) => {
|
||||
this.$axios.post(
|
||||
`/api/v1/accounts/accounts/tasks/`,
|
||||
{ action: 'verify', accounts: [row.id] }
|
||||
).then(res => {
|
||||
openTaskPage(res['task'])
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'ClearSecret',
|
||||
title: this.$t('ClearSecret'),
|
||||
can: this.$hasPerm('accounts.change_account'),
|
||||
type: 'primary',
|
||||
callback: ({ row }) => {
|
||||
this.$axios.patch(
|
||||
`/api/v1/accounts/accounts/clear-secret/`,
|
||||
{ account_ids: [row.id] }
|
||||
).then(() => {
|
||||
this.$message.success(this.$tc('ClearSuccessMsg'))
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
...this.columnsMeta
|
||||
@@ -323,15 +313,15 @@ export default {
|
||||
type: 'primary',
|
||||
icon: 'plus',
|
||||
can: () => {
|
||||
return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
|
||||
return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
|
||||
},
|
||||
callback: () => {
|
||||
callback: async() => {
|
||||
await this.getAssetDetail()
|
||||
setTimeout(() => {
|
||||
vm.iAsset = this.asset
|
||||
vm.account = {}
|
||||
this.addTemplate = false
|
||||
this.showAddDialog = true
|
||||
}, 200)
|
||||
vm.showAddDialog = true
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -339,15 +329,14 @@ export default {
|
||||
title: this.$t('TemplateAdd'),
|
||||
has: !(this.platform || this.asset),
|
||||
can: () => {
|
||||
return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
|
||||
return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
|
||||
},
|
||||
callback: async () => {
|
||||
callback: async() => {
|
||||
await this.getAssetDetail()
|
||||
setTimeout(() => {
|
||||
vm.iAsset = this.asset
|
||||
vm.account = {}
|
||||
vm.showAddDialog = true
|
||||
vm.addTemplate = true
|
||||
vm.showAddTemplateDialog = true
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -358,11 +347,11 @@ export default {
|
||||
name: 'TestSelected',
|
||||
title: this.$t('TestSelected'),
|
||||
type: 'primary',
|
||||
icon: 'verify',
|
||||
icon: 'fa-link',
|
||||
can: ({ selectedRows }) => {
|
||||
return selectedRows.length > 0 &&
|
||||
['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
|
||||
!this.$store.getters.currentOrgIsRoot && vm.$hasPerm('accounts.verify_account')
|
||||
['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
|
||||
!this.$store.getters.currentOrgIsRoot
|
||||
},
|
||||
callback: function({ selectedRows }) {
|
||||
const ids = selectedRows.map(v => {
|
||||
@@ -427,18 +416,6 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['currentUserIsSuperAdmin']),
|
||||
accountCreateUpdateTitle() {
|
||||
if (this.addTemplate) {
|
||||
return this.$t('AddAccountByTemplate')
|
||||
} else if (this.isUpdateAccount) {
|
||||
return this.$t('UpdateAccount')
|
||||
} else {
|
||||
return this.$t('AddAccount')
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
url(iNew) {
|
||||
this.$set(this.tableConfig, 'url', iNew)
|
||||
@@ -446,39 +423,56 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setActions()
|
||||
if (this.columns.length > 0) {
|
||||
this.tableConfig.columns = this.columns
|
||||
}
|
||||
if (this.otherActions) {
|
||||
const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
|
||||
for (const item of this.otherActions) {
|
||||
actionColumn.formatterArgs.extraActions.push(item)
|
||||
}
|
||||
}
|
||||
if (this.hasDeleteAction) {
|
||||
this.tableConfig.columnsMeta.actions.formatterArgs.extraActions.push(
|
||||
{
|
||||
name: 'Delete',
|
||||
title: this.$t('Delete'),
|
||||
can: this.$hasPerm('accounts.delete_account'),
|
||||
type: 'primary',
|
||||
callback: ({ row }) => {
|
||||
const msg = this.$t('AccountDeleteConfirmMsg')
|
||||
this.$confirm(msg, this.$tc('Info'), {
|
||||
type: 'warning',
|
||||
confirmButtonClass: 'el-button--danger',
|
||||
beforeClose: async(action, instance, done) => {
|
||||
if (action !== 'confirm') return done()
|
||||
this.$axios.delete(`/api/v1/accounts/accounts/${row.id}/`).then(() => {
|
||||
done()
|
||||
this.$refs.ListTable.reloadTable()
|
||||
this.$message.success(this.$tc('DeleteSuccessMsg'))
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
// 由于组件嵌套较深,有可能导致 Error in activated hook: "TypeError: Cannot read properties of undefined (reading 'getList')" 的问题
|
||||
if (this.tabDeactivated) {
|
||||
setTimeout(() => this.refresh(), 300)
|
||||
}
|
||||
},
|
||||
deactivated() {
|
||||
this.tabDeactivated = true
|
||||
setTimeout(() => {
|
||||
this.refresh()
|
||||
}, 300)
|
||||
},
|
||||
methods: {
|
||||
setActions() {
|
||||
if (this.columns.length > 0) {
|
||||
this.tableConfig.columns = this.columns
|
||||
}
|
||||
if (this.otherActions) {
|
||||
const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
|
||||
for (const item of this.otherActions) {
|
||||
actionColumn.formatterArgs.extraActions.push(item)
|
||||
}
|
||||
}
|
||||
},
|
||||
onUpdateAuthDone(account) {
|
||||
Object.assign(this.account, account)
|
||||
},
|
||||
addAccountSuccess() {
|
||||
// Reflect.deleteProperty(this.$route.query, 'flag')
|
||||
this.isUpdateAccount = false
|
||||
this.$refs.ListTable.reloadTable()
|
||||
},
|
||||
async getAssetDetail() {
|
||||
const { query: { asset } } = this.$route
|
||||
const { query: { asset }} = this.$route
|
||||
if (asset) {
|
||||
this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`)
|
||||
}
|
||||
@@ -513,7 +507,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang='scss' scoped>
|
||||
.cell a {
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
@@ -49,10 +49,6 @@ export default {
|
||||
prop: 'asset',
|
||||
label: this.$t('Asset')
|
||||
},
|
||||
{
|
||||
prop: 'account',
|
||||
label: this.$t('Account')
|
||||
},
|
||||
{
|
||||
prop: 'state',
|
||||
label: this.$t('Status'),
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<script>
|
||||
import { GenericListTableDialog } from '@/layout/components'
|
||||
import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
|
||||
import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -33,7 +33,7 @@ export default {
|
||||
columnsMeta: {
|
||||
secret: {
|
||||
label: this.$t('Password'),
|
||||
formatter: SecretViewerFormatter,
|
||||
formatter: ShowKeyCopyFormatter,
|
||||
formatterArgs: {
|
||||
hasDownload: false,
|
||||
name: this.account.name
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
<script>
|
||||
import Dialog from '@/components/Dialog/index.vue'
|
||||
import { openTaskPage } from '@/utils/jms/index'
|
||||
import { openTaskPage } from '@/utils/jms'
|
||||
|
||||
export default {
|
||||
name: 'RemoveAccount',
|
||||
|
||||
@@ -1,36 +1,44 @@
|
||||
<template>
|
||||
<Dialog
|
||||
:destroy-on-close="true"
|
||||
:show-buttons="false"
|
||||
:title="$tc('UpdateAssetUserToken')"
|
||||
:visible.sync="iVisible"
|
||||
width="800px"
|
||||
:visible.sync="visible"
|
||||
width="50"
|
||||
@cancel="handleCancel()"
|
||||
@confirm="handleConfirm()"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<AutoDataForm
|
||||
:fields="fields"
|
||||
:fields-meta="fieldsMeta"
|
||||
:form="init"
|
||||
:has-reset="false"
|
||||
:has-save-continue="false"
|
||||
:url="''"
|
||||
method="patch"
|
||||
@submit="handleConfirm"
|
||||
/>
|
||||
<el-form label-position="right" label-width="90px">
|
||||
<el-form-item :label="$tc('Name')">
|
||||
<el-input v-model="account['asset_name']" readonly />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$tc('Username')">
|
||||
<el-input v-model="account['username']" readonly />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$tc('Password')">
|
||||
<UpdateToken v-model="authInfo.password" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$tc('SSHSecretKey')">
|
||||
<UploadKey @input="getFile" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$tc('Passphrase')">
|
||||
<UpdateToken v-model="authInfo.passphrase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Dialog from '@/components/Dialog/index.vue'
|
||||
import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
|
||||
import { encryptPassword } from '@/utils/secure'
|
||||
import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
|
||||
import { UpdateToken, UploadKey } from '@/components/Form/FormFields'
|
||||
import { encryptPassword } from '@/utils/crypto'
|
||||
|
||||
export default {
|
||||
name: 'UpdateSecretInfo',
|
||||
components: {
|
||||
AutoDataForm,
|
||||
Dialog
|
||||
Dialog,
|
||||
UploadKey,
|
||||
UpdateToken
|
||||
},
|
||||
props: {
|
||||
account: {
|
||||
@@ -43,59 +51,49 @@ export default {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const accountMeta = accountFieldsMeta(this)
|
||||
return {
|
||||
fields: [
|
||||
'name', 'secret_type', 'password', 'ssh_key', 'token',
|
||||
'access_key', 'passphrase', 'api_key'
|
||||
],
|
||||
fieldsMeta: {
|
||||
...accountMeta,
|
||||
name: {
|
||||
...accountMeta.name,
|
||||
readonly: true
|
||||
},
|
||||
secret_type: {
|
||||
hidden: () => true
|
||||
}
|
||||
},
|
||||
init: {
|
||||
...this.account
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
secretInfo: {
|
||||
password: '',
|
||||
private_key: '',
|
||||
passphrase: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleConfirm(form) {
|
||||
const secretType = this.account.secret_type.value
|
||||
const data = {
|
||||
secret: encryptPassword(form[secretType])
|
||||
handleConfirm() {
|
||||
const data = {}
|
||||
if (this.secretInfo.password !== '') {
|
||||
data.password = encryptPassword(this.secretInfo.password)
|
||||
}
|
||||
if (this.secretInfo.private_key !== '') {
|
||||
data.private_key = encryptPassword(this.secretInfo.private_key)
|
||||
if (this.secretInfo.passphrase) data.passphrase = this.secretInfo.passphrase
|
||||
}
|
||||
this.$axios.patch(
|
||||
`/api/v1/accounts/accounts/${this.account.id}/`,
|
||||
data,
|
||||
{ disableFlashErrorMsg: true }
|
||||
).then(res => {
|
||||
this.authInfo = { password: '', private_key: '' }
|
||||
this.$message.success(this.$tc('UpdateSuccessMsg'))
|
||||
this.iVisible = false
|
||||
this.$emit('updateAuthDone', res)
|
||||
this.$emit('update:visible', false)
|
||||
}).catch(err => {
|
||||
const errMsg = Object.values(err.response.data).join(', ')
|
||||
this.$message.error(this.$tc('UpdateErrorMsg') + ' ' + errMsg)
|
||||
this.iVisible = false
|
||||
this.$emit('update:visible', true)
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
getFile(file) {
|
||||
this.secretInfo.private_key = file
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<span>{{ account['username'] }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="secretTypeLabel">
|
||||
<SecretViewerFormatter
|
||||
<ShowKeyCopyFormatter
|
||||
:cell-value="secretInfo.secret"
|
||||
:col="{ formatterArgs: {
|
||||
name: account['name'],
|
||||
@@ -60,15 +60,15 @@
|
||||
<script>
|
||||
import Dialog from '@/components/Dialog/index.vue'
|
||||
import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
|
||||
import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
|
||||
import { encryptPassword } from '@/utils/secure'
|
||||
import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
|
||||
import { encryptPassword } from '@/utils/crypto'
|
||||
|
||||
export default {
|
||||
name: 'ShowSecretInfo',
|
||||
components: {
|
||||
Dialog,
|
||||
PasswordHistoryDialog,
|
||||
SecretViewerFormatter
|
||||
ShowKeyCopyFormatter
|
||||
},
|
||||
props: {
|
||||
account: {
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { ChoicesFormatter } from '@/components/Table/TableFormatters'
|
||||
import { openTaskPage } from '@/utils/jms/index'
|
||||
|
||||
export const connectivityMeta = {
|
||||
formatter: ChoicesFormatter,
|
||||
@@ -7,23 +6,11 @@ export const connectivityMeta = {
|
||||
faChoices: {
|
||||
'-': '',
|
||||
ok: 'fa-check-circle',
|
||||
err: 'fa-times-circle',
|
||||
auth_err: 'fa-times-circle',
|
||||
rdp_err: 'fa-times-circle',
|
||||
password_err: 'fa-times-circle',
|
||||
openssh_key_err: 'fa-times-circle',
|
||||
ntlm_err: 'fa-times-circle',
|
||||
create_temp_err: 'fa-times-circle'
|
||||
err: 'fa-times-circle'
|
||||
},
|
||||
classChoices: {
|
||||
ok: 'text-primary',
|
||||
err: 'text-danger',
|
||||
auth_err: 'text-danger',
|
||||
rdp_err: 'text-danger',
|
||||
password_err: 'text-danger',
|
||||
openssh_key_err: 'text-danger',
|
||||
ntlm_err: 'text-danger',
|
||||
create_temp_err: 'text-danger'
|
||||
err: 'text-danger'
|
||||
},
|
||||
getText({ cellValue }) {
|
||||
if (cellValue?.value === '-' || cellValue?.value === 'unknown') {
|
||||
@@ -35,316 +22,3 @@ export const connectivityMeta = {
|
||||
},
|
||||
width: '130px'
|
||||
}
|
||||
|
||||
export function isDirectoryServiceAccount(account, vm) {
|
||||
return vm.asset && vm.asset.id !== account.asset.id
|
||||
}
|
||||
|
||||
export const accountOtherActions = vm => {
|
||||
return [
|
||||
{
|
||||
name: 'View',
|
||||
title: vm.$t('View'),
|
||||
can: vm.$hasPerm('accounts.view_accountsecret'),
|
||||
type: 'primary',
|
||||
order: 1,
|
||||
callback: ({ row }) => {
|
||||
// debugger
|
||||
vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
|
||||
vm.account = row
|
||||
vm.showViewSecretDialog = false
|
||||
setTimeout(() => {
|
||||
vm.showViewSecretDialog = true
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Update',
|
||||
title: vm.$t('Edit'),
|
||||
can: ({ row }) => {
|
||||
return (
|
||||
vm.$hasPerm('accounts.change_account') &&
|
||||
!vm.$store.getters.currentOrgIsRoot &&
|
||||
!isDirectoryServiceAccount(row, vm)
|
||||
)
|
||||
},
|
||||
callback: ({ row }) => {
|
||||
vm.isUpdateAccount = true
|
||||
const data = {
|
||||
...vm.asset,
|
||||
...row.asset
|
||||
}
|
||||
vm.iAsset = data
|
||||
vm.account = row
|
||||
vm.addTemplate = false
|
||||
vm.showAddDialog = false
|
||||
setTimeout(() => {
|
||||
vm.showAddDialog = true
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'UpdateSecret',
|
||||
title: vm.$t('EditSecret'),
|
||||
can: ({ row }) => {
|
||||
return (
|
||||
vm.$hasPerm('accounts.change_account') &&
|
||||
!vm.$store.getters.currentOrgIsRoot &&
|
||||
!isDirectoryServiceAccount(row, vm)
|
||||
)
|
||||
},
|
||||
callback: ({ row }) => {
|
||||
const data = {
|
||||
...vm.asset,
|
||||
...row.asset
|
||||
}
|
||||
vm.account = row
|
||||
vm.iAsset = data
|
||||
vm.showUpdateSecretDialog = false
|
||||
vm.accountCreateUpdateTitle = vm.$t('UpdateAccount')
|
||||
setTimeout(() => {
|
||||
vm.showUpdateSecretDialog = true
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Clone',
|
||||
title: vm.$t('Duplicate'),
|
||||
has: () => {
|
||||
return !vm.asset
|
||||
},
|
||||
can: ({ row }) => {
|
||||
return (
|
||||
vm.$hasPerm('accounts.add_account') &&
|
||||
!vm.$store.getters.currentOrgIsRoot &&
|
||||
!isDirectoryServiceAccount(row, vm)
|
||||
)
|
||||
},
|
||||
callback: ({ row }) => {
|
||||
vm.account = {
|
||||
name: `${row.name} - ${vm.$t('Duplicate').toLowerCase()}`,
|
||||
username: `${row.username} - ${vm.$t('Duplicate').toLowerCase()}`,
|
||||
payload: 'pam_account_clone'
|
||||
}
|
||||
vm.iAsset = vm.asset
|
||||
|
||||
vm.showAddDialog = false
|
||||
setTimeout(() => {
|
||||
vm.showAddDialog = true
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Test',
|
||||
title: vm.$t('VerifySecret'),
|
||||
divided: true,
|
||||
can: ({ row }) =>
|
||||
!vm.$store.getters.currentOrgIsRoot &&
|
||||
vm.$hasPerm('accounts.verify_account') &&
|
||||
row.asset['auto_config'].ansible_enabled &&
|
||||
row.asset['auto_config'].ping_enabled,
|
||||
callback: ({ row }) => {
|
||||
vm.$axios
|
||||
.post(`/api/v1/accounts/accounts/tasks/`, { action: 'verify', accounts: [row.id] })
|
||||
.then(res => {
|
||||
openTaskPage(res['task'])
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'ClearSecret',
|
||||
title: vm.$t('ClearSecret'),
|
||||
can: ({ row }) => {
|
||||
return vm.$hasPerm('accounts.change_account') && !isDirectoryServiceAccount(row, vm)
|
||||
},
|
||||
type: 'primary',
|
||||
callback: ({ row }) => {
|
||||
vm.$axios
|
||||
.patch(`/api/v1/accounts/accounts/clear-secret/`, { account_ids: [row.id] })
|
||||
.then(() => {
|
||||
vm.$message.success(vm.$tc('ClearSuccessMsg'))
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'SecretHistory',
|
||||
title: vm.$t('HistoryPassword'),
|
||||
can: () => vm.$hasPerm('accounts.view_accountsecret'),
|
||||
type: 'primary',
|
||||
callback: ({ row }) => {
|
||||
vm.account = row
|
||||
vm.currentAccountColumn = row
|
||||
vm.showViewSecretDialog = false
|
||||
vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
|
||||
setTimeout(() => {
|
||||
vm.showViewSecretDialog = true
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'CopyToOther',
|
||||
title: vm.$t('CopyToAsset'),
|
||||
type: 'primary',
|
||||
divided: true,
|
||||
can: ({ row }) => {
|
||||
return (
|
||||
vm.$hasPerm('accounts.add_account') &&
|
||||
!vm.$store.getters.currentOrgIsRoot &&
|
||||
!isDirectoryServiceAccount(row, vm)
|
||||
)
|
||||
},
|
||||
has: () => {
|
||||
return !vm.asset
|
||||
},
|
||||
callback: ({ row }) => {
|
||||
vm.accountCreateUpdateTitle = vm.$t('CopyToOther')
|
||||
vm.$route.query.flag = 'copy'
|
||||
vm.iAsset = vm.asset
|
||||
vm.account = row
|
||||
vm.showAddDialog = true
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'MoveToOther',
|
||||
title: vm.$t('MoveToAsset'),
|
||||
type: 'primary',
|
||||
can: ({ row }) => {
|
||||
return (
|
||||
vm.$hasPerm('accounts.delete_account') &&
|
||||
!vm.$store.getters.currentOrgIsRoot &&
|
||||
!isDirectoryServiceAccount(row, vm)
|
||||
)
|
||||
},
|
||||
has: () => {
|
||||
return !vm.asset
|
||||
},
|
||||
callback: ({ row }) => {
|
||||
vm.accountCreateUpdateTitle = vm.$t('MoveToOther')
|
||||
vm.$route.query.flag = 'move'
|
||||
vm.iAsset = vm.asset
|
||||
vm.account = row
|
||||
vm.showAddDialog = true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export const accountQuickFilters = vm => [
|
||||
{
|
||||
label: vm.$t('Recent (7 days)'),
|
||||
options: [
|
||||
{
|
||||
label: vm.$t('RecentlyDiscovered'),
|
||||
filter: {
|
||||
latest_discovery: '1'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: vm.$t('RecentlyLoggedIn'),
|
||||
filter: {
|
||||
latest_accessed: '1'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: vm.$t('RecentlyModified'),
|
||||
filter: {
|
||||
latest_updated: '1'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: vm.$t('RecentlyChangedPassword'),
|
||||
filter: {
|
||||
latest_secret_changed: '1'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: vm.$t('RecentPasswordChangeFailed'),
|
||||
filter: {
|
||||
latest_secret_change_failed: '1'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: vm.$t('RiskyAccount'),
|
||||
options: [
|
||||
{
|
||||
label: vm.$t('NoLoginLongTime'),
|
||||
filter: {
|
||||
long_time_no_login: 'true'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: vm.$t('AddAccount'),
|
||||
filter: {
|
||||
risk: 'new_found'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: vm.$t('WeakPassword'),
|
||||
filter: {
|
||||
risk: 'weak_password'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: vm.$t('EmptyPassword'),
|
||||
filter: {
|
||||
has_secret: 'false'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: vm.$t('LongTimePassword'),
|
||||
filter: {
|
||||
long_time_no_change_secret: 'true'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: vm.$t('AccountType'),
|
||||
options: [
|
||||
{
|
||||
label: vm.$t('All'),
|
||||
filter: {
|
||||
category: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
label: vm.$t('Host'),
|
||||
filter: {
|
||||
category: 'host'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: vm.$t('Database'),
|
||||
filter: {
|
||||
category: 'database'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: vm.$t('Cloud'),
|
||||
filter: {
|
||||
category: 'cloud'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: vm.$t('Device'),
|
||||
filter: {
|
||||
category: 'device'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Web',
|
||||
filter: {
|
||||
category: 'web'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: vm.$t('Other'),
|
||||
filter: {
|
||||
category: 'custom'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IBox from '@/components/Common/IBox/index.vue'
|
||||
import IBox from '@/components/IBox/index.vue'
|
||||
import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
|
||||
|
||||
export default {
|
||||
@@ -48,13 +48,11 @@ export default {
|
||||
},
|
||||
performAdd: {
|
||||
type: Function,
|
||||
default: (objects, that) => {
|
||||
}
|
||||
default: (objects, that) => {}
|
||||
},
|
||||
onAddSuccess: {
|
||||
type: Function,
|
||||
default: (objects, that) => {
|
||||
}
|
||||
default: (objects, that) => {}
|
||||
},
|
||||
canSelect: {
|
||||
type: Function,
|
||||
@@ -64,7 +62,8 @@ export default {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addObjects() {
|
||||
@@ -78,18 +77,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
b, strong {
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
}
|
||||
b, strong {
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
tr td {
|
||||
line-height: 1.42857;
|
||||
padding: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
tr td {
|
||||
line-height: 1.42857;
|
||||
padding: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
tr.item td {
|
||||
border-top: 1px solid #e7eaec;
|
||||
}
|
||||
tr.item td {
|
||||
border-top: 1px solid #e7eaec;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<Dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="$tc('Assets')"
|
||||
:disabled-status="!isLoaded"
|
||||
custom-class="asset-select-dialog"
|
||||
top="2vh"
|
||||
v-bind="$attrs"
|
||||
@@ -22,8 +23,8 @@
|
||||
:url="baseUrl"
|
||||
class="tree-table"
|
||||
v-bind="$attrs"
|
||||
@loaded="handleTableLoaded"
|
||||
v-on="$listeners"
|
||||
@loaded="handleTableLoaded"
|
||||
/>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -82,7 +83,7 @@ export default {
|
||||
},
|
||||
{
|
||||
prop: 'address',
|
||||
label: this.$t('Address'),
|
||||
label: this.$t('IpDomain'),
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
|
||||
@@ -56,10 +56,6 @@ export default {
|
||||
treeSetting: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
disabled: {
|
||||
type: [Boolean, Function],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -75,7 +71,6 @@ export default {
|
||||
dialogVisible: false,
|
||||
initialValue: _.cloneDeep(iValue),
|
||||
select2Config: {
|
||||
disabled: this.disabled,
|
||||
value: iValue,
|
||||
multiple: true,
|
||||
clearable: true,
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
<script>
|
||||
import TreeTable from '../../Table/TreeTable/index.vue'
|
||||
import { setRouterQuery, setUrlParam } from '@/utils/common/index'
|
||||
import { setRouterQuery, setUrlParam } from '@/utils/common'
|
||||
import $ from '@/utils/jquery-vendor'
|
||||
|
||||
export default {
|
||||
@@ -114,11 +114,6 @@ export default {
|
||||
treeUrl: `${this.typeUrl}?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
|
||||
callback: {
|
||||
onSelected: (event, treeNode) => this.getAssetsUrl(treeNode)
|
||||
},
|
||||
edit: {
|
||||
drag: {
|
||||
isMove: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -147,9 +142,6 @@ export default {
|
||||
treeSetting.showDelete = this.$hasPerm('assets.delete_node')
|
||||
},
|
||||
methods: {
|
||||
reloadTable() {
|
||||
this.$refs.TreeList.reloadTable()
|
||||
},
|
||||
setTreeUrlQuery() {
|
||||
let str = ''
|
||||
for (const key in this.treeUrlQuery) {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DrawerListTable as ListTable } from '@/components'
|
||||
import ListTable from '@/components/Table/ListTable/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'BlockedIPList',
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
>
|
||||
<el-form :model="secretInfo" class="password-form" label-position="right" label-width="100px">
|
||||
<el-form-item :label="$tc('OldSecret')">
|
||||
<SecretViewerFormatter
|
||||
<ShowKeyCopyFormatter
|
||||
:cell-value="secretInfo.old_secret"
|
||||
:col="{ formatterArgs: {
|
||||
name: 'old_secret'
|
||||
@@ -20,7 +20,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$tc('NewSecret')">
|
||||
<SecretViewerFormatter
|
||||
<ShowKeyCopyFormatter
|
||||
:cell-value="secretInfo.new_secret"
|
||||
:col="{ formatterArgs: {
|
||||
name: 'new_secret'
|
||||
@@ -34,13 +34,13 @@
|
||||
|
||||
<script>
|
||||
import Dialog from '@/components/Dialog/index.vue'
|
||||
import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
|
||||
import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
|
||||
|
||||
export default {
|
||||
name: 'RecordViewSecret',
|
||||
components: {
|
||||
Dialog,
|
||||
SecretViewerFormatter
|
||||
ShowKeyCopyFormatter
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
|
||||
@@ -1,60 +1,12 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="chat-action">
|
||||
<div class="model-select">
|
||||
<Select2
|
||||
v-model="select.value"
|
||||
:disabled="isLoading || isSelectDisabled || loading || !options.length"
|
||||
v-bind="select"
|
||||
@change="onSelectChange"
|
||||
/>
|
||||
</div>
|
||||
<el-dropdown
|
||||
:hide-on-click="false"
|
||||
trigger="click"
|
||||
>
|
||||
<span class="el-dropdown-link">
|
||||
<i class="fa fa-plug" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<div class="menu-section">
|
||||
<div v-if="toolsLoading">
|
||||
<i class="el-icon-loading" /> {{ $t('Loading') }}
|
||||
</div>
|
||||
<div v-else class="menu-body">
|
||||
<div>
|
||||
<div
|
||||
v-for="item in toolOptions"
|
||||
:key="item.value"
|
||||
>
|
||||
<div style="padding: 0 10px">
|
||||
<i class="fa fa-wrench item-icon" />
|
||||
<span class="item-label">{{ item.label }}</span>
|
||||
|
||||
<el-switch
|
||||
:value="selectedToolsSet.has(item.value)"
|
||||
@change="() => toggleTool(item.value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="item in toolServerOptions"
|
||||
:key="item.value"
|
||||
>
|
||||
<div>
|
||||
<i class="fa fa-server item-icon" />
|
||||
<span class="item-label">{{ item.label }}</span>
|
||||
<el-switch
|
||||
:value="selectedToolServersSet.has(item.value)"
|
||||
@change="() => toggleToolServer(item.value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<Select2
|
||||
v-model="select.value"
|
||||
:disabled="isLoading || isSelectDisabled"
|
||||
v-bind="select"
|
||||
@change="onSelectChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="chat-input">
|
||||
<el-input
|
||||
@@ -84,38 +36,6 @@ export default {
|
||||
expanded: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modelOptions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
selectedModel: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
toolOptions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
toolServerOptions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
selectedTools: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
selectedToolServers: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
toolsLoading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -123,10 +43,15 @@ export default {
|
||||
isIM: false,
|
||||
inputValue: '',
|
||||
select: {
|
||||
url: '/api/v1/settings/chatai-prompts/',
|
||||
value: '',
|
||||
multiple: false,
|
||||
placeholder: this.$t('Model'),
|
||||
options: []
|
||||
placeholder: this.$t('Prompt'),
|
||||
ajax: {
|
||||
transformOption: (item) => {
|
||||
return { label: item.name, value: item.content }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -135,32 +60,7 @@ export default {
|
||||
isLoading: state => state.chat.loading
|
||||
}),
|
||||
isSelectDisabled() {
|
||||
return false
|
||||
},
|
||||
options() {
|
||||
return (this.modelOptions || []).map(item => {
|
||||
return { label: item.name || item.id, value: item.id }
|
||||
})
|
||||
},
|
||||
selectedToolsSet() {
|
||||
return new Set(this.selectedTools || [])
|
||||
},
|
||||
selectedToolServersSet() {
|
||||
return new Set(this.selectedToolServers || [])
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelOptions: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.select.options = (val || []).map(item => ({ label: item.name || item.id, value: item.id }))
|
||||
}
|
||||
},
|
||||
selectedModel: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.select.value = val || ''
|
||||
}
|
||||
return !!this.select.value
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -180,25 +80,7 @@ export default {
|
||||
this.inputValue = ''
|
||||
},
|
||||
onSelectChange(value) {
|
||||
this.$emit('select-model', value)
|
||||
},
|
||||
toggleTool(id) {
|
||||
const set = new Set(this.selectedTools || [])
|
||||
if (set.has(id)) {
|
||||
set.delete(id)
|
||||
} else {
|
||||
set.add(id)
|
||||
}
|
||||
this.$emit('select-tools', Array.from(set))
|
||||
},
|
||||
toggleToolServer(id) {
|
||||
const set = new Set(this.selectedToolServers || [])
|
||||
if (set.has(id)) {
|
||||
set.delete(id)
|
||||
} else {
|
||||
set.add(id)
|
||||
}
|
||||
this.$emit('select-tool-servers', Array.from(set))
|
||||
this.$emit('select-prompt', value)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -213,18 +95,9 @@ export default {
|
||||
.chat-action {
|
||||
width: 100%;
|
||||
margin: 6px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.model-select {
|
||||
flex: 0 0 48%;
|
||||
max-width: 240px;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
&::v-deep .el-select {
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
|
||||
.el-input__inner {
|
||||
height: 28px;
|
||||
|
||||
@@ -1,77 +1,42 @@
|
||||
<template>
|
||||
<div :class="{ 'user-role': isUserRole }" class="chat-item">
|
||||
<div class="chart-item-container">
|
||||
<div class="avatar">
|
||||
<el-avatar
|
||||
v-if="isUserRole"
|
||||
:src="userUrl"
|
||||
class="header-avatar"
|
||||
/>
|
||||
<el-avatar v-else class="header-avatar" :style="{ backgroundColor: 'transparent' }">
|
||||
<ModelIcon :name="modelIconName" class-name="model-icon" />
|
||||
</el-avatar>
|
||||
<div :class="{'user-role': isUserRole}" class="chat-item">
|
||||
<div class="avatar">
|
||||
<el-avatar :src="isUserRole ? userUrl : chatUrl" class="header-avatar" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="operational">
|
||||
<span class="date">
|
||||
{{ $moment(item.message.create_time).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="operational">
|
||||
<div v-if="!item.message.is_reasoning" class="date">
|
||||
{{
|
||||
$moment(item.message.create_time).format("YYYY-MM-DD HH:mm:ss")
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div v-else class="thinking-time">{{ $i18n.t('DeeplyThoughtAbout') }}</div>
|
||||
<div class="message">
|
||||
<div class="message-content">
|
||||
<span v-if="isSystemError" class="error">
|
||||
{{ item.message.content }}
|
||||
</span>
|
||||
<span v-else class="chat-text">
|
||||
<MessageText :message="item.message" />
|
||||
</span>
|
||||
</div>
|
||||
<div :class="item.reasoning ? 'reasoning' : 'message'">
|
||||
<div class="message-content">
|
||||
<div v-if="!item.reasoning">
|
||||
<span v-if="isSystemError" class="error">
|
||||
{{ item.message.content }}
|
||||
</span>
|
||||
<span v-else class="chat-text">
|
||||
<MessageText :message="item.message" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="thinking-wrapper">
|
||||
<div class="thinking-content">
|
||||
<!-- eslint-disable-next-line -->
|
||||
<div class="divider"></div>
|
||||
<p>
|
||||
<MessageText :message="item.reasoning" @insert-code="handleInsertCode" />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="thinking-result">
|
||||
<span v-if="isServerError" class="error">
|
||||
{{ isServerError }}
|
||||
</span>
|
||||
<MessageText :message="item.result" :is-terminal="isTerminal" @insert-code="handleInsertCode" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action">
|
||||
<el-tooltip
|
||||
v-if="isSystemError && isLoading"
|
||||
:content="$tc('Reconnect')"
|
||||
:open-delay="500"
|
||||
placement="top"
|
||||
>
|
||||
<svg-icon icon-class="refresh" @click="onRefresh" />
|
||||
</el-tooltip>
|
||||
<el-dropdown v-else size="small" @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
<i class="fa fa-ellipsis-v" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
v-for="i in dropdownOptions"
|
||||
:key="i.action"
|
||||
:command="i.action"
|
||||
>
|
||||
{{ i.label }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="action">
|
||||
<el-tooltip
|
||||
v-if="isSystemError && isLoading"
|
||||
:content="$tc('Reconnect')"
|
||||
:open-delay="500"
|
||||
placement="top"
|
||||
>
|
||||
<svg-icon icon-class="refresh" @click="onRefresh" />
|
||||
</el-tooltip>
|
||||
<el-dropdown v-else size="small" @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
<i class="fa fa-ellipsis-v" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="i in dropdownOptions" :key="i.action" :command="i.action">
|
||||
{{ i.label }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,36 +45,27 @@
|
||||
|
||||
<script>
|
||||
import MessageText from './MessageText.vue'
|
||||
import ModelIcon from '../../models/ModelIcon.vue'
|
||||
import { mapGetters, mapState } from 'vuex'
|
||||
import { copy } from '@/utils/common/index'
|
||||
import { mapState } from 'vuex'
|
||||
import { copy } from '@/utils/common'
|
||||
import { useChat } from '../../useChat.js'
|
||||
import { reconnect } from '@/utils/request'
|
||||
import { reconnect } from '@/utils/socket'
|
||||
|
||||
const { setLoading, removeLoadingMessageInChat } = useChat()
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MessageText,
|
||||
ModelIcon
|
||||
MessageText
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
}
|
||||
},
|
||||
selectedModel: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isTerminal: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chatUrl: require('@/assets/img/chat.png'),
|
||||
userUrl: '/api/v1/settings/logo/',
|
||||
dropdownOptions: [
|
||||
{
|
||||
@@ -123,24 +79,11 @@ export default {
|
||||
...mapState({
|
||||
isLoading: state => state.chat.loading
|
||||
}),
|
||||
...mapGetters([
|
||||
'publicSettings'
|
||||
]),
|
||||
isUserRole() {
|
||||
return this.item.message?.role === 'user'
|
||||
},
|
||||
isSystemError() {
|
||||
return (
|
||||
this.item.type === 'error' && this.item?.role === 'assistant'
|
||||
)
|
||||
},
|
||||
isServerError() {
|
||||
return (this.item.type === 'finish' && this.item.result.content === '')
|
||||
? this.$i18n.t('ServerBusyRetry')
|
||||
: ''
|
||||
},
|
||||
modelIconName() {
|
||||
return (this.item?.message?.model || this.selectedModel || this.publicSettings.CHAT_AI_TYPE || '').toString()
|
||||
return this.item.type === 'error' && this.item.message?.role === 'assistant'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -151,11 +94,8 @@ export default {
|
||||
},
|
||||
handleCommand(value) {
|
||||
if (value === 'copy') {
|
||||
copy(this.item.result.content)
|
||||
copy(this.item.message.content)
|
||||
}
|
||||
},
|
||||
handleInsertCode(code) {
|
||||
this.$emit('insert-code', code)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -164,167 +104,101 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.chat-item {
|
||||
display: flex;
|
||||
padding: 0.5rem;
|
||||
|
||||
.chart-item-container {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
|
||||
.avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 2px;
|
||||
|
||||
.header-avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
|
||||
&::v-deep img {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.model-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// gap: 0.5rem;
|
||||
overflow: hidden;
|
||||
|
||||
.operational {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
|
||||
.date {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.thinking-time {
|
||||
width: 6rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 5px 10px;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.copy {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.reasoning {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-end;
|
||||
|
||||
.message-content .thinking-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
.thinking-content {
|
||||
position: relative;
|
||||
color: #8b8b8b;
|
||||
|
||||
.divider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
border-left: 2px solid #e5e5e5;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: unset;
|
||||
padding-left: 0.5rem;
|
||||
|
||||
::v-deep p {
|
||||
color: #8b8b8b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
display: -webkit-box;
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
border-radius: 2px 12px 12px;
|
||||
background-color: #f0f1f5;
|
||||
}
|
||||
|
||||
.action {
|
||||
.svg-icon {
|
||||
transform: translateY(50%);
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-dropdown {
|
||||
height: 32px;
|
||||
line-height: 37px;
|
||||
font-size: 13px;
|
||||
|
||||
.el-dropdown-link {
|
||||
i {
|
||||
padding: 4px 5px;
|
||||
font-size: 15px;
|
||||
color: #8d9091;
|
||||
|
||||
&:hover {
|
||||
color: #7b8085;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
padding: 16px 14px 0;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
&.user-role {
|
||||
flex-direction: row-reverse;
|
||||
.avatar {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-top: 2px;
|
||||
|
||||
.chart-item-container {
|
||||
.header-avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&::v-deep img {
|
||||
background-color: #e5e5e7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.operational {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
|
||||
.copy {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
display: -webkit-box;
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
border-radius: 2px 12px 12px;
|
||||
background-color: #f0f1f5;
|
||||
}
|
||||
|
||||
.action {
|
||||
.svg-icon {
|
||||
transform: translateY(50%);
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-dropdown {
|
||||
height: 32px;
|
||||
line-height: 37px;
|
||||
font-size: 13px;
|
||||
|
||||
.el-dropdown-link {
|
||||
i {
|
||||
padding: 4px 5px;
|
||||
font-size: 15px;
|
||||
color: #8d9091;
|
||||
|
||||
&:hover {
|
||||
color: #7b8085
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-role {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.content {
|
||||
margin-right: 10px;
|
||||
|
||||
.operational {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-right: 10px;
|
||||
.message {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.operational {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.message {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.message-content {
|
||||
background-color: var(--menu-hover);
|
||||
border-radius: 12px 2px 12px 12px;
|
||||
}
|
||||
.message-content {
|
||||
background-color: var(--menu-hover);
|
||||
border-radius: 12px 2px 12px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@ import mdKatex from '@traptitech/markdown-it-katex'
|
||||
import mila from 'markdown-it-link-attributes'
|
||||
import hljs from 'highlight.js'
|
||||
import 'highlight.js/styles/atom-one-dark.css'
|
||||
import { copy } from '@/utils/common/index'
|
||||
import { copy } from '@/utils/common'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@@ -25,10 +25,6 @@ export default {
|
||||
type: Object,
|
||||
default: () => {
|
||||
}
|
||||
},
|
||||
isTerminal: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -40,7 +36,7 @@ export default {
|
||||
text() {
|
||||
const value = this.message?.content || ''
|
||||
if (value && this.markdown) {
|
||||
return this.renderContentWithDetails(value)
|
||||
return this.markdown?.render(value)
|
||||
}
|
||||
return this.$xss.process(value)
|
||||
}
|
||||
@@ -49,10 +45,10 @@ export default {
|
||||
this.init()
|
||||
},
|
||||
updated() {
|
||||
this.addEvents()
|
||||
this.addCopyEvents()
|
||||
},
|
||||
destroyed() {
|
||||
this.removeEvents()
|
||||
this.removeCopyEvents()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
@@ -69,139 +65,30 @@ export default {
|
||||
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' })
|
||||
},
|
||||
highlightBlock(str, lang) {
|
||||
let insertSpanHtml = `<span class="code-block-header__insert">${this.$t('Insert')}</span>`
|
||||
if (!this.isTerminal) {
|
||||
insertSpanHtml = ''
|
||||
}
|
||||
return `<pre class="code-block-wrapper">
|
||||
<div class="code-block-header">
|
||||
<span class="code-block-header__lang">${lang}</span>
|
||||
<span class="code-block-header__actions">
|
||||
${insertSpanHtml}
|
||||
<span class="code-block-header__copy">${this.$t('Copy')}</span>
|
||||
</span>
|
||||
</div>
|
||||
<code class="hljs code-block-body ${lang}">${str}</code></pre>`
|
||||
return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${'Copy'}</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`
|
||||
},
|
||||
addEvents() {
|
||||
this.addBtnClickEvents('.code-block-header__copy', this.handlerClickCopy)
|
||||
this.addBtnClickEvents('.code-block-header__insert', this.handlerClickInsert)
|
||||
},
|
||||
|
||||
handlerClickCopy(event) {
|
||||
const wrapper = event.target.closest('.code-block-wrapper')
|
||||
if (wrapper) {
|
||||
// 查找里面的 code 元素
|
||||
const codeElement = wrapper.querySelector('code.code-block-body')
|
||||
if (codeElement) {
|
||||
const codeText = codeElement.textContent
|
||||
copy(codeText)
|
||||
}
|
||||
}
|
||||
},
|
||||
handlerClickInsert(event) {
|
||||
const wrapper = event.target.closest('.code-block-wrapper')
|
||||
if (wrapper) {
|
||||
// 查找里面的 code 元素
|
||||
const codeElement = wrapper.querySelector('code.code-block-body')
|
||||
if (codeElement) {
|
||||
const codeText = codeElement.textContent
|
||||
this.$emit('insert-code', codeText)
|
||||
}
|
||||
}
|
||||
},
|
||||
addBtnClickEvents(selector, callback) {
|
||||
const buttons = this.$refs.textRef.querySelectorAll(selector)
|
||||
buttons.forEach((btn) => {
|
||||
btn.addEventListener('click', callback)
|
||||
})
|
||||
},
|
||||
renderContentWithDetails(value) {
|
||||
// Kael responses may wrap reasoning/thinking in <details type="reasoning">; render them with a custom block.
|
||||
const detailRegex = /<details[^>]*>[\s\S]*?<\/details>/gi
|
||||
let result = ''
|
||||
let lastIndex = 0
|
||||
let match
|
||||
let hasDetails = false
|
||||
|
||||
while ((match = detailRegex.exec(value))) {
|
||||
hasDetails = true
|
||||
const preceding = value.slice(lastIndex, match.index)
|
||||
if (preceding.trim()) {
|
||||
result += this.markdown.render(preceding)
|
||||
}
|
||||
result += this.renderDetailBlock(match[0])
|
||||
lastIndex = match.index + match[0].length
|
||||
}
|
||||
|
||||
if (!hasDetails) {
|
||||
return this.markdown.render(value)
|
||||
}
|
||||
|
||||
const remaining = value.slice(lastIndex)
|
||||
if (remaining.trim()) {
|
||||
result += this.markdown.render(remaining)
|
||||
}
|
||||
|
||||
return result
|
||||
},
|
||||
renderDetailBlock(detailStr) {
|
||||
const attributes = this.extractAttributes(detailStr)
|
||||
const inner = detailStr.replace(/^<details[^>]*>/i, '').replace(/<\/details>$/i, '')
|
||||
const summaryMatch = inner.match(/<summary>([\s\S]*?)<\/summary>/i)
|
||||
const summary = summaryMatch ? this.decodeHtml(summaryMatch[1]) : ''
|
||||
const body = summaryMatch ? inner.replace(summaryMatch[0], '') : inner
|
||||
const bodyHtml = body.trim() ? this.markdown.render(this.decodeHtml(body.trim())) : ''
|
||||
|
||||
const baseClass = 'kael-detail'
|
||||
if (attributes.type === 'reasoning') {
|
||||
const statusClass = attributes.done === 'true' ? 'is-done' : 'is-pending'
|
||||
const title = summary || this.$t('DeeplyThoughtAbout')
|
||||
return `<div class="${baseClass} ${baseClass}--reasoning ${statusClass}">
|
||||
<div class="${baseClass}__header">
|
||||
<span class="${baseClass}__status-dot"></span>
|
||||
<span class="${baseClass}__title">${title}</span>
|
||||
</div>
|
||||
${bodyHtml ? `<div class="${baseClass}__body">${bodyHtml}</div>` : ''}
|
||||
</div>`
|
||||
}
|
||||
|
||||
return `<div class="${baseClass}">
|
||||
${summary ? `<div class="${baseClass}__header">${summary}</div>` : ''}
|
||||
${bodyHtml ? `<div class="${baseClass}__body">${bodyHtml}</div>` : ''}
|
||||
</div>`
|
||||
},
|
||||
extractAttributes(detailStr) {
|
||||
const attrs = {}
|
||||
const attrMatch = detailStr.match(/^<details([^>]*)>/i)
|
||||
const attrStr = (attrMatch && attrMatch[1]) || ''
|
||||
attrStr.replace(/(\w+)="(.*?)"/g, (all, key, val) => {
|
||||
attrs[key] = val
|
||||
return all
|
||||
})
|
||||
return attrs
|
||||
},
|
||||
decodeHtml(str) {
|
||||
if (!str) return ''
|
||||
const textArea = document.createElement('textarea')
|
||||
textArea.innerHTML = str
|
||||
return textArea.value
|
||||
},
|
||||
removeBtnClickEvent(selector) {
|
||||
const buttons = this.$refs.textRef.querySelectorAll(selector)
|
||||
buttons.forEach((btn) => {
|
||||
btn.removeEventListener('click', () => {
|
||||
addCopyEvents() {
|
||||
const copyBtn = document.querySelectorAll('.code-block-header__copy')
|
||||
copyBtn.forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const code = btn.parentElement?.nextElementSibling?.textContent
|
||||
if (code) {
|
||||
copy(code)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
removeEvents() {
|
||||
removeCopyEvents() {
|
||||
if (this.$refs.textRef) {
|
||||
this.removeBtnClickEvent('.code-block-header__copy')
|
||||
this.addBtnClickEvents('.code-block-header__insert')
|
||||
const copyBtn = this.$refs.textRef.querySelectorAll('.code-block-header__copy')
|
||||
copyBtn.forEach((btn) => {
|
||||
btn.removeEventListener('click', () => {
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -211,7 +98,6 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.markdown-body {
|
||||
font-size: 13px;
|
||||
max-width: 300px;;
|
||||
|
||||
&::v-deep p {
|
||||
margin-bottom: 0 !important;
|
||||
@@ -229,46 +115,26 @@ export default {
|
||||
|
||||
&::v-deep .code-block-wrapper {
|
||||
background: #1F2329;
|
||||
padding: 0;
|
||||
padding: 2px 6px;
|
||||
margin: 5px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.code-block-body {
|
||||
padding: 5px 10px;
|
||||
padding: 5px 10px 0;
|
||||
}
|
||||
;
|
||||
|
||||
.code-block-header {
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
background: #353946;
|
||||
color: #c2d1e1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.code-block-header__actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
.code-block-header__copy {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
|
||||
.code-block-header__copy {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #6e747b;
|
||||
}
|
||||
}
|
||||
|
||||
.code-block-header__insert {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #6e747b;
|
||||
}
|
||||
&:hover {
|
||||
color: #6e747b;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -312,7 +178,6 @@ export default {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -329,64 +194,4 @@ export default {
|
||||
.loading-box span:nth-child(3) {
|
||||
animation-delay: 0.49s;
|
||||
}
|
||||
|
||||
.kael-detail {
|
||||
margin: 8px 0;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e5e5e5;
|
||||
background: #f7f8fa;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__status-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
&__body {
|
||||
margin-top: 6px;
|
||||
padding-left: 8px;
|
||||
border-left: 2px solid #e5e5e5;
|
||||
}
|
||||
|
||||
&--reasoning.is-pending {
|
||||
border-color: #f59e0b40;
|
||||
background: #fff8e6;
|
||||
|
||||
.kael-detail__status-dot {
|
||||
background: #f59e0b;
|
||||
animation: kael-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&--reasoning.is-done {
|
||||
border-color: #dbeafe;
|
||||
background: #f4f6ff;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes kael-pulse {
|
||||
0% {
|
||||
opacity: 0.45;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -13,8 +13,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BASE_URL } from '@/utils/common/index'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
active: {
|
||||
@@ -43,16 +41,6 @@ export default {
|
||||
},
|
||||
handleExpand() {
|
||||
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>
|
||||
<DrawerPanel
|
||||
v-if="visible"
|
||||
ref="drawer"
|
||||
:default-show-panel="!!defaultShowPanel"
|
||||
:expanded="expanded"
|
||||
@@ -46,11 +45,9 @@
|
||||
import Sidebar from './components/Sidebar/index.vue'
|
||||
import Chat from './components/ChitChat/index.vue'
|
||||
import { getInputFocus } from './useChat.js'
|
||||
import { ws } from '@/utils/socket'
|
||||
import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
|
||||
import { ObjectLocalStorage } from '@/utils/common'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
const aiPannelLocalStorage = new ObjectLocalStorage('ai_panel_settings')
|
||||
export default {
|
||||
components: {
|
||||
DrawerPanel,
|
||||
@@ -75,76 +72,23 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
active: 'chat',
|
||||
robotUrl: require('@/assets/img/robot-assistant.png'),
|
||||
height: '400px',
|
||||
expanded: false,
|
||||
clientOffset: {},
|
||||
currentTerminalContent: {},
|
||||
initialized: false
|
||||
clientOffset: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'publicSettings'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'publicSettings.CHAT_AI_METHOD': {
|
||||
handler(newVal) {
|
||||
this.visible = newVal === 'api'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.handleStartChat()
|
||||
this.handlePostMessage()
|
||||
},
|
||||
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)
|
||||
}
|
||||
},
|
||||
initAssistant() {
|
||||
if (this.initialized) return
|
||||
this.initialized = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.component?.init()
|
||||
})
|
||||
},
|
||||
handlePostMessage() {
|
||||
window.addEventListener('message', (event) => {
|
||||
if (event.data === 'show-chat-panel') {
|
||||
this.$refs.drawer.show = true
|
||||
this.initAssistant()
|
||||
return
|
||||
}
|
||||
const msg = event.data
|
||||
switch (msg.name) {
|
||||
case 'current_terminal_content':
|
||||
// {content: '...', terminalId: '',sessionId: '',viewId: '',viewName: ''}
|
||||
this.$log.debug('current_terminal_content', msg)
|
||||
this.currentTerminalContent = msg.data
|
||||
this.$refs.component?.onTerminalContext(msg.data)
|
||||
break
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -152,30 +96,23 @@ export default {
|
||||
this.$refs.drawer.handleHeaderMoveDown(event)
|
||||
},
|
||||
handleMouseMoveUp(event) {
|
||||
// Prevent the new chat button from triggering the header move up
|
||||
const newButton = event.target.closest('.new')
|
||||
if (newButton) {
|
||||
return
|
||||
}
|
||||
this.$refs.drawer.handleHeaderMoveUp(event)
|
||||
},
|
||||
initWebSocket() {
|
||||
if (!ws) {
|
||||
this.$refs.component?.init()
|
||||
}
|
||||
},
|
||||
onClose() {
|
||||
this.$refs.drawer.show = false
|
||||
},
|
||||
expandFull() {
|
||||
this.updateExpandedState(true)
|
||||
this.save_pannel_settings()
|
||||
this.height = '100%'
|
||||
this.expanded = true
|
||||
},
|
||||
compress() {
|
||||
this.updateExpandedState(false)
|
||||
this.save_pannel_settings()
|
||||
},
|
||||
save_pannel_settings() {
|
||||
aiPannelLocalStorage.set('expanded', this.expanded)
|
||||
},
|
||||
updateExpandedState(expanded) {
|
||||
this.expanded = expanded
|
||||
this.height = expanded ? '100%' : '400px'
|
||||
this.height = '400px'
|
||||
this.expanded = false
|
||||
},
|
||||
onNewChat() {
|
||||
this.active = 'chat'
|
||||
@@ -185,8 +122,8 @@ export default {
|
||||
})
|
||||
},
|
||||
onToggle(status) {
|
||||
this.initWebSocket()
|
||||
if (status) {
|
||||
this.initAssistant()
|
||||
getInputFocus()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<svg
|
||||
:stroke-width="strokeWidth"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
:class="className"
|
||||
>
|
||||
<path
|
||||
fill="#6b7280"
|
||||
style="fill: #6b7280 !important"
|
||||
d="M11.2475 18.25C10.6975 18.25 10.175 18.1455 9.67999 17.9365C9.18499 17.7275 8.74499 17.436 8.35999 17.062C7.94199 17.205 7.50749 17.2765 7.05649 17.2765C6.31949 17.2765 5.63749 17.095 5.01049 16.732C4.38349 16.369 3.87749 15.874 3.49249 15.247C3.11849 14.62 2.93149 13.9215 2.93149 13.1515C2.93149 12.8325 2.97549 12.486 3.06349 12.112C2.62349 11.705 2.28249 11.2375 2.04049 10.7095C1.79849 10.1705 1.67749 9.6095 1.67749 9.0265C1.67749 8.4325 1.80399 7.8605 2.05699 7.3105C2.30999 6.7605 2.66199 6.2875 3.11299 5.8915C3.57499 5.4845 4.10849 5.204 4.71349 5.05C4.83449 4.423 5.08749 3.862 5.47249 3.367C5.86849 2.861 6.35249 2.465 6.92449 2.179C7.49649 1.893 8.10699 1.75 8.75599 1.75C9.30599 1.75 9.82849 1.8545 10.3235 2.0635C10.8185 2.2725 11.2585 2.564 11.6435 2.938C12.0615 2.795 12.496 2.7235 12.947 2.7235C13.684 2.7235 14.366 2.905 14.993 3.268C15.62 3.631 16.1205 4.126 16.4945 4.753C16.8795 5.38 17.072 6.0785 17.072 6.8485C17.072 7.1675 17.028 7.514 16.94 7.888C17.38 8.295 17.721 8.768 17.963 9.307C18.205 9.835 18.326 10.3905 18.326 10.9735C18.326 11.5675 18.1995 12.1395 17.9465 12.6895C17.6935 13.2395 17.336 13.718 16.874 14.125C16.423 14.521 15.895 14.796 15.29 14.95C15.169 15.577 14.9105 16.138 14.5145 16.633C14.1295 17.139 13.651 17.535 13.079 17.821C12.507 18.107 11.8965 18.25 11.2475 18.25ZM7.17199 16.1875C7.72199 16.1875 8.20049 16.072 8.60749 15.841L11.7095 14.059C11.8195 13.982 11.8745 13.8775 11.8745 13.7455V12.3265L7.88149 14.62C7.63949 14.763 7.39749 14.763 7.15549 14.62L4.03699 12.8215C4.03699 12.8545 4.03149 12.893 4.02049 12.937C4.02049 12.981 4.02049 13.047 4.02049 13.135C4.02049 13.696 4.15249 14.213 4.41649 14.686C4.69149 15.148 5.07099 15.511 5.55499 15.775C6.03899 16.05 6.57799 16.1875 7.17199 16.1875ZM7.33699 13.498C7.40299 13.531 7.46349 13.5475 7.51849 13.5475C7.57349 13.5475 7.62849 13.531 7.68349 13.498L8.92099 12.7885L4.94449 10.4785C4.70249 10.3355 4.58149 10.121 4.58149 9.835V6.2545C4.03149 6.4965 3.59149 6.8705 3.26149 7.3765C2.93149 7.8715 2.76649 8.4215 2.76649 9.0265C2.76649 9.5655 2.90399 10.0825 3.17899 10.5775C3.45399 11.0725 3.81149 11.4465 4.25149 11.6995L7.33699 13.498ZM11.2475 17.161C11.8305 17.161 12.3585 17.029 12.8315 16.765C13.3045 16.501 13.6785 16.138 13.9535 15.676C14.2285 15.214 14.366 14.697 14.366 14.125V10.561C14.366 10.429 14.311 10.33 14.201 10.264L12.947 9.538V14.1415C12.947 14.4275 12.826 14.642 12.584 14.785L9.46549 16.5835C10.0045 16.9685 10.5985 17.161 11.2475 17.161ZM11.8745 11.122V8.878L10.01 7.822L8.12899 8.878V11.122L10.01 12.178L11.8745 11.122ZM7.05649 5.8585C7.05649 5.5725 7.17749 5.358 7.41949 5.215L10.538 3.4165C9.99899 3.0315 9.40499 2.839 8.75599 2.839C8.17299 2.839 7.64499 2.971 7.17199 3.235C6.69899 3.499 6.32499 3.862 6.04999 4.324C5.78599 4.786 5.65399 5.303 5.65399 5.875V9.4225C5.65399 9.5545 5.70899 9.659 5.81899 9.736L7.05649 10.462V5.8585ZM15.4385 13.7455C15.9885 13.5035 16.423 13.1295 16.742 12.6235C17.072 12.1175 17.237 11.5675 17.237 10.9735C17.237 10.4345 17.0995 9.9175 16.8245 9.4225C16.5495 8.9275 16.192 8.5535 15.752 8.3005L12.6665 6.5185C12.6005 6.4745 12.54 6.458 12.485 6.469C12.43 6.469 12.375 6.4855 12.32 6.5185L11.0825 7.2115L15.0755 9.538C15.1965 9.604 15.2845 9.692 15.3395 9.802C15.4055 9.901 15.4385 10.022 15.4385 10.165V13.7455ZM12.122 5.3635C12.364 5.2095 12.606 5.2095 12.848 5.3635L15.983 7.195C15.983 7.118 15.983 7.019 15.983 6.898C15.983 6.37 15.851 5.8695 15.587 5.3965C15.334 4.9125 14.9655 4.5275 14.4815 4.2415C14.0085 3.9555 13.4585 3.8125 12.8315 3.8125C12.2815 3.8125 11.803 3.928 11.396 4.159L8.29399 5.941C8.18399 6.018 8.12899 6.1225 8.12899 6.2545V7.6735L12.122 5.3635Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChatGPTIcon',
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'size-8'
|
||||
},
|
||||
strokeWidth: {
|
||||
type: [String, Number],
|
||||
default: '1.5'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<svg
|
||||
:stroke-width="strokeWidth"
|
||||
viewBox="0 0 24 16"
|
||||
overflow="visible"
|
||||
width="20"
|
||||
height="20"
|
||||
:class="className"
|
||||
>
|
||||
<g style="transform: translateX(13px) rotateZ(0deg); transform-origin: 4.775px 7.73501px;">
|
||||
<path
|
||||
shape-rendering="geometricPrecision"
|
||||
fill-opacity="1"
|
||||
fill="#8c653f"
|
||||
style="fill: #8c653f !important"
|
||||
d=" M0,0 C0,0 6.1677093505859375,15.470022201538086 6.1677093505859375,15.470022201538086 C6.1677093505859375,15.470022201538086 9.550004005432129,15.470022201538086 9.550004005432129,15.470022201538086 C9.550004005432129,15.470022201538086 3.382294178009033,0 3.382294178009033,0 C3.382294178009033,0 0,0 0,0 C0,0 0,0 0,0z"
|
||||
/>
|
||||
</g>
|
||||
<g opacity="1" style="transform: none; transform-origin: 7.935px 7.73501px;">
|
||||
<path
|
||||
shape-rendering="geometricPrecision"
|
||||
fill-opacity="1"
|
||||
fill="#8c653f"
|
||||
style="fill: #8c653f !important"
|
||||
d=" M5.824605464935303,9.348296165466309 C5.824605464935303,9.348296165466309 7.93500280380249,3.911694288253784 7.93500280380249,3.911694288253784 C7.93500280380249,3.911694288253784 10.045400619506836,9.348296165466309 10.045400619506836,9.348296165466309 C10.045400619506836,9.348296165466309 5.824605464935303,9.348296165466309 5.824605464935303,9.348296165466309 C5.824605464935303,9.348296165466309 5.824605464935303,9.348296165466309 5.824605464935303,9.348296165466309z M6.166755199432373,0 C6.166755199432373,0 0,15.470022201538086 0,15.470022201538086 C0,15.470022201538086 3.4480772018432617,15.470022201538086 3.4480772018432617,15.470022201538086 C3.4480772018432617,15.470022201538086 4.709278583526611,12.22130012512207 4.709278583526611,12.22130012512207 C4.709278583526611,12.22130012512207 11.16093635559082,12.22130012512207 11.16093635559082,12.22130012512207 C11.16093635559082,12.22130012512207 12.421928405761719,15.470022201538086 12.421928405761719,15.470022201538086 C12.421928405761719,15.470022201538086 15.87000560760498,15.470022201538086 15.87000560760498,15.470022201538086 C15.87000560760498,15.470022201538086 9.703250885009766,0 9.703250885009766,0 C9.703250885009766,0 6.166755199432373,0 6.166755199432373,0 C6.166755199432373,0 6.166755199432373,0 6.166755199432373,0z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ClaudeIcon',
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'size-4'
|
||||
},
|
||||
strokeWidth: {
|
||||
type: [String, Number],
|
||||
default: '1.5'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<svg
|
||||
id="图层_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
data-name="图层 1"
|
||||
viewBox="0 0 71.69 52.76"
|
||||
:class="className"
|
||||
:stroke-width="strokeWidth"
|
||||
>
|
||||
<path
|
||||
id="path"
|
||||
fill="#4d6bfe"
|
||||
style="fill: #4d6bfe !important"
|
||||
d="M523.77,276.34c-.76-.38-1.08.33-1.53.69a4,4,0,0,0-.41.41,5.07,5.07,0,0,1-4.1,1.87,8,8,0,0,0-6.46,2.53,5.82,5.82,0,0,0-3.72-4.62,6.39,6.39,0,0,1-2.85-1.94,7.76,7.76,0,0,1-.92-2.31c-.16-.48-.32-1-.87-1.05s-.83.41-1.07.82a11,11,0,0,0-1.26,5.5,11.9,11.9,0,0,0,5.49,10.14.75.75,0,0,1,.39,1c-.25.84-.54,1.65-.79,2.49-.17.53-.41.65-1,.42a16.63,16.63,0,0,1-5.18-3.52c-2.56-2.48-4.88-5.21-7.76-7.35-.68-.5-1.36-1-2.06-1.41-2.94-2.86.39-5.2,1.16-5.48s.28-1.29-2.33-1.28-5,.88-8,2a8.23,8.23,0,0,1-1.39.41,28.67,28.67,0,0,0-8.61-.3,18.57,18.57,0,0,0-13.44,7.83c-4,5.47-4.91,11.67-3.76,18.15a27.68,27.68,0,0,0,10,16.88,26.8,26.8,0,0,0,19.23,6.39c4.43-.25,9.36-.84,14.92-5.55a13.84,13.84,0,0,0,5.32,1.18,17.24,17.24,0,0,0,5.09-.38c2.2-.46,2.05-2.5,1.25-2.87-6.43-3-5-1.78-6.3-2.77,3.27-3.87,8.2-7.89,10.13-20.92a12.44,12.44,0,0,0,0-2.52c0-.51.1-.71.68-.76a12.55,12.55,0,0,0,4.62-1.42c4.17-2.28,5.85-6,6.25-10.51A1.57,1.57,0,0,0,523.77,276.34Zm-36.34,40.37c-6.24-4.9-9.27-6.52-10.52-6.45s-1,1.41-.7,2.28a8.49,8.49,0,0,0,1.11,2.21,1.14,1.14,0,0,1-.34,1.8c-2,1.24-5.5-.42-5.66-.5a26.08,26.08,0,0,1-9.87-9.88,30.15,30.15,0,0,1-3.87-13.39c-.06-1.15.28-1.56,1.42-1.77a14.31,14.31,0,0,1,4.57-.11,28.56,28.56,0,0,1,16.33,8.29,54.06,54.06,0,0,1,6.58,8.63,41.46,41.46,0,0,0,7.41,8.71,24.36,24.36,0,0,0,2.66,2C494.16,318.82,490.16,318.87,487.43,316.71Zm3-19.23a.92.92,0,0,1,.92-.92.83.83,0,0,1,.32.06.8.8,0,0,1,.34.22.9.9,0,0,1,.25.64.92.92,0,0,1-1.83,0Zm9.29,4.76a5.27,5.27,0,0,1-1.77.48,3.75,3.75,0,0,1-2.38-.76,3.57,3.57,0,0,1-1.65-2.26,5.16,5.16,0,0,1,0-1.76,2,2,0,0,0-.71-2.17,3.1,3.1,0,0,0-2.06-.59,1.63,1.63,0,0,1-.76-.24.75.75,0,0,1-.34-1.07,3.47,3.47,0,0,1,.57-.62,3.9,3.9,0,0,1,3.43,0,10,10,0,0,1,3,2.34,18.62,18.62,0,0,1,2,2.73,10.9,10.9,0,0,1,1.33,2.53C500.65,301.47,500.4,302,499.71,302.24Z"
|
||||
transform="translate(-452.83 -271.91)"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DeepSeekIcon',
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'size-4'
|
||||
},
|
||||
strokeWidth: {
|
||||
type: [String, Number],
|
||||
default: '1.5'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
width="800px"
|
||||
height="800px"
|
||||
viewBox="0 0 512 512"
|
||||
:class="className"
|
||||
:stroke-width="strokeWidth"
|
||||
>
|
||||
<path
|
||||
fill="#4285f4"
|
||||
style="fill: #4285f4 !important"
|
||||
d="M473.16,221.48l-2.26-9.59H262.46v88.22H387c-12.93,61.4-72.93,93.72-121.94,93.72-35.66,0-73.25-15-98.13-39.11a140.08,140.08,0,0,1-41.8-98.88c0-37.16,16.7-74.33,41-98.78s61-38.13,97.49-38.13c41.79,0,71.74,22.19,82.94,32.31l62.69-62.36C390.86,72.72,340.34,32,261.6,32h0c-60.75,0-119,23.27-161.58,65.71C58,139.5,36.25,199.93,36.25,256S56.83,369.48,97.55,411.6C141.06,456.52,202.68,480,266.13,480c57.73,0,112.45-22.62,151.45-63.66,38.34-40.4,58.17-96.3,58.17-154.9C475.75,236.77,473.27,222.12,473.16,221.48Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GeminiIcon',
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'size-4'
|
||||
},
|
||||
strokeWidth: {
|
||||
type: [String, Number],
|
||||
default: '1.5'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
fill="currentColor"
|
||||
:class="className"
|
||||
:stroke-width="strokeWidth"
|
||||
>
|
||||
<path
|
||||
fill="#000000"
|
||||
style="fill: #000000 !important"
|
||||
d="m3.005 8.858 8.783 12.544h3.904L6.908 8.858zM6.905 15.825 3 21.402h3.907l1.951-2.788zM16.585 2l-6.75 9.64 1.953 2.79L20.492 2zM17.292 7.965v13.437h3.2V3.395z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GrokIcon',
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'size-4'
|
||||
},
|
||||
strokeWidth: {
|
||||
type: [String, Number],
|
||||
default: '1.5'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<component
|
||||
:is="resolvedIcon"
|
||||
v-if="resolvedIcon"
|
||||
:class-name="className"
|
||||
:stroke-width="strokeWidth"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChatGPTIcon from './ChatGPT.vue'
|
||||
import DeepSeekIcon from './DeepSeek.vue'
|
||||
import GrokIcon from './Grok.vue'
|
||||
import ClaudeIcon from './Claude.vue'
|
||||
import GeminiIcon from './Gemini.vue'
|
||||
|
||||
export default {
|
||||
name: 'ModelIcon',
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'size-5'
|
||||
},
|
||||
strokeWidth: {
|
||||
type: [String, Number],
|
||||
default: '1.5'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
normalizedName() {
|
||||
return (this.name || '').toLowerCase()
|
||||
},
|
||||
resolvedIcon() {
|
||||
const name = this.normalizedName
|
||||
if (!name) return null
|
||||
if (name.includes('gpt')) return ChatGPTIcon
|
||||
if (name.includes('deep-seek')) return DeepSeekIcon
|
||||
if (name.includes('deepseek')) return DeepSeekIcon
|
||||
if (name.includes('grok')) return GrokIcon
|
||||
if (name.includes('claude')) return ClaudeIcon
|
||||
if (name.includes('gemini')) return GeminiIcon
|
||||
return null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
import store from '@/store'
|
||||
import { pageScroll } from '@/utils/common/index'
|
||||
import { pageScroll } from '@/utils/common'
|
||||
|
||||
export const getInputFocus = () => {
|
||||
const dom = document.querySelector('.chat-input .el-textarea__inner')
|
||||
@@ -9,11 +9,11 @@ export const getInputFocus = () => {
|
||||
export function useChat() {
|
||||
const chatStore = {}
|
||||
|
||||
const setLoading = loading => {
|
||||
const setLoading = (loading) => {
|
||||
store.commit('chat/setLoading', loading)
|
||||
}
|
||||
|
||||
const onNewChat = name => {
|
||||
const onNewChat = (name) => {
|
||||
const data = {
|
||||
name: name || `new chat`,
|
||||
id: 1,
|
||||
@@ -27,7 +27,7 @@ export function useChat() {
|
||||
store.commit('chat/clearChats')
|
||||
}
|
||||
|
||||
const addMessageToActiveChat = chat => {
|
||||
const addMessageToActiveChat = (chat) => {
|
||||
store.commit('chat/addMessageToActiveChat', chat)
|
||||
}
|
||||
|
||||
@@ -35,7 +35,7 @@ export function useChat() {
|
||||
store.commit('chat/removeLoadingMessageInChat')
|
||||
}
|
||||
|
||||
const addChatMessageById = chat => {
|
||||
const addChatMessageById = (chat) => {
|
||||
store.commit('chat/addMessageToActiveChat', chat)
|
||||
if (chat?.conversation_id) {
|
||||
store.commit('chat/setActiveChatConversationId', chat.conversation_id)
|
||||
@@ -54,7 +54,7 @@ export function useChat() {
|
||||
addChatMessageById(temporaryChat)
|
||||
}
|
||||
|
||||
const newChatAndAddMessageById = chat => {
|
||||
const newChatAndAddMessageById = (chat) => {
|
||||
onNewChat(chat.message.content)
|
||||
addChatMessageById(chat)
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
|
||||
<script>
|
||||
import Dialog from '@/components/Dialog/index.vue'
|
||||
import { openTaskPage } from '@/utils/jms/index'
|
||||
import { openTaskPage } from '@/utils/jms'
|
||||
|
||||
export default {
|
||||
name: 'GatewayDialog',
|
||||
@@ -7,11 +7,10 @@
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script type="text/jsx">
|
||||
import AssetTreeTable from '@/components/Apps/AssetTreeTable'
|
||||
import { AccountInfoFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
|
||||
import { connectivityMeta } from '@/components/Apps/AccountListTable/const'
|
||||
import { setUrlParam } from '@/utils/common/index'
|
||||
|
||||
export default {
|
||||
name: 'GrantedAssets',
|
||||
@@ -35,7 +34,7 @@ export default {
|
||||
}
|
||||
const initialUrl = vm.tableConfig.initialUrl
|
||||
const nodeId = node.meta.data.id
|
||||
const url = setUrlParam(initialUrl, 'node_id', nodeId)
|
||||
const url = initialUrl.replace('/assets/', `/nodes/${nodeId}/assets/`)
|
||||
vm.tableConfig.url = url
|
||||
}
|
||||
},
|
||||
@@ -71,7 +70,7 @@ export default {
|
||||
showMenu: false,
|
||||
showRefresh: true,
|
||||
showAssets: false,
|
||||
showSearch: true,
|
||||
showSearch: false,
|
||||
url: this.tableUrl,
|
||||
// ?assets=0不显示资产. =1显示资产
|
||||
treeUrl: this.treeUrl,
|
||||
@@ -79,9 +78,6 @@ export default {
|
||||
callback: {
|
||||
onSelected: (event, node) => vm.onSelected(node, vm),
|
||||
refresh: vm.refreshObjectAssetPermission
|
||||
},
|
||||
async: {
|
||||
enable: false
|
||||
}
|
||||
},
|
||||
tableConfig: {
|
||||
@@ -89,10 +85,9 @@ export default {
|
||||
hasTree: true,
|
||||
columnsExtra: ['view_account'],
|
||||
columnsExclude: ['spec_info'],
|
||||
columns: ['id', 'name', 'address', 'comment', 'labels', 'connectivity', 'platform', 'view_account', 'actions'],
|
||||
columnsShow: {
|
||||
min: ['name', 'address', 'accounts'],
|
||||
default: ['name', 'address', 'platform', 'view_account', 'actions']
|
||||
default: ['name', 'address', 'platform', 'connectivity', 'view_account', 'actions']
|
||||
},
|
||||
columnsMeta: {
|
||||
name: {
|
||||
@@ -113,6 +108,11 @@ export default {
|
||||
},
|
||||
connectivity: connectivityMeta,
|
||||
comment: { ...this.comment }
|
||||
},
|
||||
tableAttrs: {
|
||||
rowClassName({ row }) {
|
||||
return !row.is_active ? 'row_disabled' : ''
|
||||
}
|
||||
}
|
||||
},
|
||||
headerActions: {
|
||||
|
||||
@@ -1,63 +0,0 @@
|
||||
<template>
|
||||
<ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" :create-drawer="createDrawer" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DrawerListTable as ListTable } from '@/components'
|
||||
|
||||
export default {
|
||||
name: 'LeakPasswordList',
|
||||
components: {
|
||||
ListTable
|
||||
},
|
||||
props: {
|
||||
object: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
createDrawer: () => import('@/components/Apps/LeakPasswords/LeakPasswordsCreateUpdate.vue'),
|
||||
tableConfig: {
|
||||
url: '/api/v1/settings/leak-passwords/',
|
||||
columns: [
|
||||
'password'
|
||||
],
|
||||
columnsMeta: {
|
||||
actions: {
|
||||
formatterArgs: {
|
||||
hasClone: false,
|
||||
canDelete: this.$hasPerm('settings.change_security'),
|
||||
canUpdate: this.$hasPerm('settings.change_security')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
headerActions: {
|
||||
hasExport: true,
|
||||
hasImport: true,
|
||||
importOptions: {
|
||||
encryptFields: [''], // 这里不加密 password,''只是为了保证数组有值
|
||||
canImportUpdate: false
|
||||
},
|
||||
hasCreate: true,
|
||||
hasSearch: true,
|
||||
hasRefresh: true,
|
||||
hasBulkDelete: true,
|
||||
hasBulkUpdate: false,
|
||||
hasLeftActions: true,
|
||||
hasRightActions: true,
|
||||
canCreate: this.$hasPerm('settings.change_security'),
|
||||
canBulkDelete: this.$hasPerm('settings.change_security')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<GenericCreateUpdatePage
|
||||
v-if="!loading"
|
||||
class="user-create-update"
|
||||
v-bind="$data"
|
||||
:title="null"
|
||||
v-on="$listeners"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GenericCreateUpdatePage } from '@/layout/components'
|
||||
|
||||
export default {
|
||||
name: 'LeakPasswordsCreateUpdate',
|
||||
components: {
|
||||
GenericCreateUpdatePage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
fields: [
|
||||
[this.$t('Basic'), ['password']]
|
||||
],
|
||||
encryptedFields: [],
|
||||
url: '/api/v1/settings/leak-passwords/'
|
||||
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.loading = false
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="onOpenDialog"
|
||||
>
|
||||
{{ $tc('View') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<Dialog
|
||||
:destroy-on-close="true"
|
||||
:show-cancel="false"
|
||||
:show-confirm="false"
|
||||
:title="title"
|
||||
:visible.sync="visible"
|
||||
v-bind="$attrs"
|
||||
width="40%"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<LeakPasswordList />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dialog } from '@/components'
|
||||
import LeakPasswordList from '@/components/Apps/LeakPasswords/LeakPasswordList.vue'
|
||||
|
||||
export default {
|
||||
componentName: 'LeakPasswords',
|
||||
components: {
|
||||
LeakPasswordList,
|
||||
Dialog
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return this.$t('LeakPasswordList')
|
||||
}
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: `/api/v1/settings/leak-passwords/`
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
form: this.value,
|
||||
config: {
|
||||
url: this.url,
|
||||
hasSaveContinue: false,
|
||||
hasButtons: true,
|
||||
fields: [],
|
||||
fieldsMeta: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onOpenDialog() {
|
||||
this.visible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,31 +1,28 @@
|
||||
<template>
|
||||
<TwoCol>
|
||||
<ListTable v-bind="config" />
|
||||
</TwoCol>
|
||||
<el-row :gutter="24">
|
||||
<el-col :md="20" :sm="22">
|
||||
<ListTable v-bind="config" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DrawerListTable as ListTable } from '@/components'
|
||||
import { toM2MJsonParams } from '@/utils/jms/index'
|
||||
import { DetailFormatter } from '@/components/Table/TableFormatters'
|
||||
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
|
||||
import ListTable from '@/components/Table/ListTable/index.vue'
|
||||
import { toM2MJsonParams } from '@/utils/jms'
|
||||
|
||||
export default {
|
||||
name: 'AssetJsonTab',
|
||||
components: {
|
||||
TwoCol,
|
||||
ListTable
|
||||
},
|
||||
props: {
|
||||
object: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
}
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const [key, value] = toM2MJsonParams(this.object.assets)
|
||||
const org_id = this.object.org_id || this.$store.getters.currentOrg.id
|
||||
return {
|
||||
config: {
|
||||
headerActions: {
|
||||
@@ -34,19 +31,22 @@ export default {
|
||||
hasExport: false
|
||||
},
|
||||
tableConfig: {
|
||||
url: `/api/v1/assets/assets/?${key}=${value}&oid=${org_id}`,
|
||||
columns: ['name', 'address', 'platform', 'type', 'is_active'],
|
||||
columnsShow: {
|
||||
min: ['name', 'address'],
|
||||
default: ['name', 'address', 'platform']
|
||||
},
|
||||
url: `/api/v1/assets/assets/?${key}=${value}`,
|
||||
columns: ['name', 'address', 'platform',
|
||||
'type', 'is_active'
|
||||
],
|
||||
columnsMeta: {
|
||||
name: {
|
||||
label: this.$t('Asset'),
|
||||
formatter: DetailFormatter,
|
||||
formatterArgs: {
|
||||
getRoute: ({ row }) => {
|
||||
return { name: 'AssetDetail', params: { id: row.id } }
|
||||
formatter: (row) => {
|
||||
const to = {
|
||||
name: 'AssetDetail',
|
||||
params: { id: row.id }
|
||||
}
|
||||
if (this.$hasPerm('assets.view_asset')) {
|
||||
return <router-link to={to} class='text-link'>{row.name}</router-link>
|
||||
} else {
|
||||
return <span>{row.name}</span>
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -65,3 +65,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,19 +1,18 @@
|
||||
<template>
|
||||
<TwoCol>
|
||||
<ListTable v-bind="config" />
|
||||
</TwoCol>
|
||||
<el-row :gutter="24">
|
||||
<el-col :md="20" :sm="22">
|
||||
<ListTable v-bind="config" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DrawerListTable as ListTable } from '@/components'
|
||||
import { toM2MJsonParams } from '@/utils/jms/index'
|
||||
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
|
||||
import { DetailFormatter } from '@/components/Table/TableFormatters'
|
||||
import ListTable from '@/components/Table/ListTable/index.vue'
|
||||
import { toM2MJsonParams } from '@/utils/jms'
|
||||
|
||||
export default {
|
||||
name: 'User',
|
||||
components: {
|
||||
TwoCol,
|
||||
ListTable
|
||||
},
|
||||
props: {
|
||||
@@ -25,7 +24,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
const [key, value] = toM2MJsonParams(this.object.users)
|
||||
const org_id = this.object.org_id || this.$store.getters.currentOrg.id
|
||||
return {
|
||||
config: {
|
||||
headerActions: {
|
||||
@@ -34,25 +32,24 @@ export default {
|
||||
hasExport: false
|
||||
},
|
||||
tableConfig: {
|
||||
url: `/api/v1/users/users/?${key}=${value}&oid=${org_id}`,
|
||||
url: `/api/v1/users/users/?${key}=${value}`,
|
||||
columns: [
|
||||
'name', 'username', 'email', 'groups', 'system_roles',
|
||||
'name', 'username', 'groups', 'system_roles',
|
||||
'org_roles', 'source', 'is_valid'
|
||||
],
|
||||
columnsShow: {
|
||||
min: ['name', 'username'],
|
||||
default: ['name', 'username', 'email']
|
||||
},
|
||||
columnsMeta: {
|
||||
name: {
|
||||
label: this.$t('Name'),
|
||||
formatter: DetailFormatter,
|
||||
formatterArgs: {
|
||||
getRoute: ({ row }) => {
|
||||
return {
|
||||
name: 'UserDetail',
|
||||
params: { id: row.id }
|
||||
}
|
||||
width: 85,
|
||||
formatter: (row) => {
|
||||
const to = {
|
||||
name: 'UserDetail',
|
||||
params: { id: row.id }
|
||||
}
|
||||
if (this.$hasPerm('users.view_user')) {
|
||||
return <router-link to={to} class='text-link'>{row.name}</router-link>
|
||||
} else {
|
||||
return <span>{row.name}</span>
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -90,3 +87,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<TwoCol>
|
||||
<IBox :title="title" class="block" v-bind="$attrs">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in activities"
|
||||
:key="index"
|
||||
:size="activity.size"
|
||||
:timestamp="activity.timestamp"
|
||||
:type="activity.type"
|
||||
placement="bottom"
|
||||
>
|
||||
{{ activity.content }}
|
||||
<el-link
|
||||
v-if="activity['detail_url']"
|
||||
type="primary"
|
||||
@click.native="onClick(activity)"
|
||||
<el-row :gutter="20">
|
||||
<el-col :md="16" :sm="24">
|
||||
<IBox :title="title" class="block" v-bind="$attrs">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in activities"
|
||||
:key="index"
|
||||
:size="activity.size"
|
||||
:timestamp="activity.timestamp"
|
||||
:type="activity.type"
|
||||
placement="bottom"
|
||||
>
|
||||
{{ $tc('Detail') }}
|
||||
</el-link>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</IBox>
|
||||
</TwoCol>
|
||||
{{ activity.content }}
|
||||
<el-link
|
||||
v-if="activity['detail_url']"
|
||||
type="primary"
|
||||
@click.native="onClick(activity)"
|
||||
>
|
||||
{{ $tc('Detail') }}
|
||||
</el-link>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</IBox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<DiffDetail ref="DetailDialog" :title="$tc('OperateLog')" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IBox from '@/components/Common/IBox/index.vue'
|
||||
import IBox from '@/components/IBox/index.vue'
|
||||
import DiffDetail from '@/components/Dialog/DiffDetail.vue'
|
||||
import { openTaskPage } from '@/utils/jms/index'
|
||||
import { toSafeLocalDateStr } from '@/utils/common/time'
|
||||
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
|
||||
import { openTaskPage } from '@/utils/jms'
|
||||
import { toSafeLocalDateStr } from '@/utils/time'
|
||||
|
||||
export default {
|
||||
name: 'ResourceActivity',
|
||||
components: {
|
||||
TwoCol,
|
||||
IBox,
|
||||
DiffDetail
|
||||
},
|
||||
|
||||
@@ -13,12 +13,17 @@
|
||||
v-on="$listeners"
|
||||
>
|
||||
<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-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-row>
|
||||
<el-row :gutter="24" style="margin: 0 auto">
|
||||
<el-row :gutter="24" style="margin: 0 auto;">
|
||||
<el-col :md="24" :sm="24">
|
||||
<el-button class="confirm-btn" size="mini" type="primary" @click="logout">
|
||||
{{ this.$t('ReLogin') }}
|
||||
@@ -27,11 +32,11 @@
|
||||
</el-row>
|
||||
</div>
|
||||
<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-select
|
||||
v-model="subTypeSelected"
|
||||
style="width: 100%; margin-bottom: 20px"
|
||||
style="width: 100%; margin-bottom: 20px;"
|
||||
@change="handleSubTypeChange"
|
||||
>
|
||||
<el-option
|
||||
@@ -44,73 +49,32 @@
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<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-row :gutter="24" style="margin: 0 auto;">
|
||||
<el-col :md="24" :sm="24" style="display: flex; align-items: center; margin-bottom: 20px;">
|
||||
<el-input
|
||||
v-model="secretValue"
|
||||
:placeholder="inputPlaceholder"
|
||||
:show-password="showPassword"
|
||||
@keyup.enter.native="handleConfirm"
|
||||
/>
|
||||
<span
|
||||
v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'"
|
||||
style="margin: -1px 0 0 20px"
|
||||
>
|
||||
<span v-if="subTypeSelected === 'sms'" style="margin: -1px 0 0 20px;">
|
||||
<el-button
|
||||
:disabled="smsBtnDisabled"
|
||||
size="mini"
|
||||
style="line-height: 14px; float: right"
|
||||
style="line-height: 14px; float: right;"
|
||||
type="primary"
|
||||
@click="sendCode"
|
||||
@click="sendSMSCode"
|
||||
>
|
||||
{{ smsBtnText }}
|
||||
</el-button>
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<iframe v-if="passkeyVisible" :src="passkeyUrl" style="display: none" />
|
||||
<iframe
|
||||
v-if="isFaceCaptureVisible && subTypeSelected === 'face' && faceCaptureUrl"
|
||||
:src="faceCaptureUrl"
|
||||
allow="camera"
|
||||
sandbox="allow-scripts allow-same-origin"
|
||||
style="width: 100%; height: 600px; border: none"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" style="margin: 20px auto 10px">
|
||||
<el-row :gutter="24" style="margin: 10px auto;">
|
||||
<el-col :md="24" :sm="24">
|
||||
<el-button
|
||||
v-if="!noCodeMFA.includes(subTypeSelected)"
|
||||
class="confirm-btn"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleConfirm"
|
||||
>
|
||||
<el-button class="confirm-btn" size="mini" type="primary" @click="handleConfirm">
|
||||
{{ this.$t('Confirm') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="subTypeSelected === 'face'"
|
||||
v-show="!isFaceCaptureVisible"
|
||||
class="confirm-btn"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleFaceCapture"
|
||||
>
|
||||
{{ this.$tc('VerifyFace') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="subTypeSelected === 'passkey'"
|
||||
v-loading="passkeyVisible"
|
||||
class="confirm-btn"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handlePasskeyVerify"
|
||||
>
|
||||
{{ this.$tc('Next') }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@@ -118,7 +82,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import Dialog from '@/components/Dialog/index.vue'
|
||||
import { encryptPassword } from '@/utils/secure'
|
||||
import { encryptPassword } from '@/utils/crypto'
|
||||
|
||||
export default {
|
||||
name: 'UserConfirmDialog',
|
||||
@@ -149,14 +113,7 @@ export default {
|
||||
visible: false,
|
||||
callback: null,
|
||||
cancel: null,
|
||||
processing: false,
|
||||
isFaceCaptureVisible: false,
|
||||
faceToken: null,
|
||||
faceCaptureUrl: null,
|
||||
noCodeMFA: ['face', 'passkey'],
|
||||
sendCodeMFA: ['email', 'sms', 'otp'],
|
||||
passkeyVisible: false,
|
||||
passkeyUrl: '/api/v1/authentication/passkeys/login/?mfa=1'
|
||||
processing: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -172,10 +129,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
handleSubTypeChange(val) {
|
||||
if (val !== 'face') {
|
||||
this.isFaceCaptureVisible = false
|
||||
}
|
||||
|
||||
this.inputPlaceholder = this.subTypeChoices.filter(item => item.name === val)[0]?.placeholder
|
||||
this.smsWidth = val === 'sms' ? 6 : 0
|
||||
},
|
||||
@@ -189,117 +142,54 @@ export default {
|
||||
this.$log.debug('perform confirm action')
|
||||
const confirmType = response.data?.code
|
||||
const confirmUrl = '/api/v1/authentication/confirm/'
|
||||
this.$axios
|
||||
.get(confirmUrl, { params: { confirm_type: confirmType } })
|
||||
.then(data => {
|
||||
this.confirmTypeRequired = data.confirm_type
|
||||
this.$axios.get(confirmUrl, { params: { confirm_type: confirmType }}).then((data) => {
|
||||
this.confirmTypeRequired = data.confirm_type
|
||||
|
||||
if (this.confirmTypeRequired === 'relogin') {
|
||||
this.$axios
|
||||
.post(confirmUrl, { confirm_type: 'relogin', secret_key: 'x' })
|
||||
.then(() => {
|
||||
this.callback()
|
||||
this.visible = false
|
||||
})
|
||||
.catch(() => {
|
||||
this.title = this.$t('NeedReLogin')
|
||||
this.visible = true
|
||||
})
|
||||
return
|
||||
}
|
||||
this.subTypeChoices = data.content
|
||||
const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0]
|
||||
this.subTypeSelected = defaultSubType.name
|
||||
this.inputPlaceholder = defaultSubType.placeholder
|
||||
this.visible = true
|
||||
})
|
||||
.catch(err => {
|
||||
const data = err.response?.data
|
||||
const msg = data?.error || data?.detail || data?.msg || this.$t('GetConfirmTypeFailed')
|
||||
this.$message.error(msg)
|
||||
this.cancel(err)
|
||||
})
|
||||
.finally(() => {
|
||||
this.processing = false
|
||||
})
|
||||
if (this.confirmTypeRequired === 'relogin') {
|
||||
this.$axios.post(confirmUrl, { 'confirm_type': 'relogin', 'secret_key': 'x' }).then(() => {
|
||||
this.callback()
|
||||
this.visible = false
|
||||
}).catch(() => {
|
||||
this.title = this.$t('NeedReLogin')
|
||||
this.visible = true
|
||||
})
|
||||
return
|
||||
}
|
||||
this.subTypeChoices = data.content
|
||||
const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0]
|
||||
this.subTypeSelected = defaultSubType.name
|
||||
this.inputPlaceholder = defaultSubType.placeholder
|
||||
this.visible = true
|
||||
}).catch((err) => {
|
||||
const data = err.response?.data
|
||||
const msg = data?.error || data?.detail || data?.msg || this.$t('GetConfirmTypeFailed')
|
||||
this.$message.error(msg)
|
||||
this.cancel(err)
|
||||
}).finally(() => {
|
||||
this.processing = false
|
||||
})
|
||||
}, 500),
|
||||
logout() {
|
||||
window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`
|
||||
},
|
||||
sendCode() {
|
||||
this.$axios
|
||||
.post(`/api/v1/authentication/mfa/select/`, { type: this.subTypeSelected })
|
||||
.then(res => {
|
||||
this.$message.success(this.$tc('VerificationCodeSent'))
|
||||
let time = 60
|
||||
this.smsBtnDisabled = true
|
||||
sendSMSCode() {
|
||||
this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: 'sms' }).then(res => {
|
||||
this.$message.success(this.$tc('VerificationCodeSent'))
|
||||
let time = 60
|
||||
this.smsBtnDisabled = true
|
||||
|
||||
const interval = setInterval(() => {
|
||||
time -= 1
|
||||
this.smsBtnText = `${this.$t('Pending')}: ${time}`
|
||||
const interval = setInterval(() => {
|
||||
time -= 1
|
||||
this.smsBtnText = `${this.$t('Pending')}: ${time}`
|
||||
|
||||
if (time <= 0) {
|
||||
clearInterval(interval)
|
||||
this.smsBtnText = this.$t('SendVerificationCode')
|
||||
this.smsBtnDisabled = false
|
||||
}
|
||||
}, 1000)
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error(this.$tc('FailedToSendVerificationCode'))
|
||||
})
|
||||
},
|
||||
handlePasskeyVerify() {
|
||||
this.passkeyVisible = true
|
||||
this.checkPasskeyStatus()
|
||||
},
|
||||
checkPasskeyStatus() {
|
||||
const url = '/api/v1/authentication/confirm/check/?confirm_type=mfa'
|
||||
const t = setInterval(() => {
|
||||
this.$axios.get(url).then(data => {
|
||||
this.passkeyVisible = false
|
||||
this.onSuccess()
|
||||
})
|
||||
}, 2000)
|
||||
setTimeout(() => {
|
||||
clearInterval(t)
|
||||
if (this.passkeyVisible) {
|
||||
this.passkeyVisible = false
|
||||
this.$message.error(this.$tc('PasskeyTimeout'))
|
||||
}
|
||||
}, 20000)
|
||||
},
|
||||
startFaceCapture() {
|
||||
const url = '/api/v1/authentication/face/context/'
|
||||
this.$axios
|
||||
.post(url)
|
||||
.then(data => {
|
||||
const token = data['token']
|
||||
this.faceCaptureUrl = '/facelive/capture?token=' + token
|
||||
this.isFaceCaptureVisible = true
|
||||
|
||||
const timer = setInterval(() => {
|
||||
this.$axios.get(url + `?token=${token}`).then(data => {
|
||||
if (data['is_finished']) {
|
||||
clearInterval(timer)
|
||||
this.isFaceCaptureVisible = false
|
||||
this.handleConfirm()
|
||||
}
|
||||
})
|
||||
}, 1000)
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error(this.$tc('FailedToStartFaceCapture'))
|
||||
})
|
||||
},
|
||||
handleFaceCapture() {
|
||||
this.startFaceCapture()
|
||||
},
|
||||
onSuccess() {
|
||||
this.secretValue = ''
|
||||
this.visible = false
|
||||
this.$nextTick(() => {
|
||||
this.callback()
|
||||
if (time <= 0) {
|
||||
clearInterval(interval)
|
||||
this.smsBtnText = this.$t('SendVerificationCode')
|
||||
this.smsBtnDisabled = false
|
||||
}
|
||||
}, 1000)
|
||||
}).catch(() => {
|
||||
this.$message.error(this.$tc('FailedToSendVerificationCode'))
|
||||
})
|
||||
},
|
||||
handleConfirm() {
|
||||
@@ -313,43 +203,39 @@ export default {
|
||||
const data = {
|
||||
confirm_type: this.confirmTypeRequired,
|
||||
mfa_type: this.confirmTypeRequired === 'mfa' ? this.subTypeSelected : '',
|
||||
secret_key:
|
||||
this.confirmTypeRequired === 'password'
|
||||
? encryptPassword(this.secretValue)
|
||||
: this.secretValue
|
||||
secret_key: this.confirmTypeRequired === 'password' ? encryptPassword(this.secretValue) : this.secretValue
|
||||
}
|
||||
|
||||
this.$axios
|
||||
.post(`/api/v1/authentication/confirm/`, data)
|
||||
.then(() => {
|
||||
this.onSuccess()
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error(err.message || this.$tc('ConfirmFailed'))
|
||||
this.faceCaptureUrl = null
|
||||
this.isFaceCaptureVisible = false
|
||||
this.$axios.post(`/api/v1/authentication/confirm/`, data).then(() => {
|
||||
this.secretValue = ''
|
||||
this.visible = false
|
||||
this.$nextTick(() => {
|
||||
this.callback()
|
||||
})
|
||||
}).catch((err) => {
|
||||
this.$message.error(err.message || this.$tc('ConfirmFailed'))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog-content ::v-deep .el-dialog__footer {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dialog-content ::v-deep .el-dialog {
|
||||
padding: 8px;
|
||||
|
||||
.el-dialog__body {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
.dialog-content ::v-deep .el-dialog__footer {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
line-height: 20px;
|
||||
}
|
||||
.dialog-content ::v-deep .el-dialog {
|
||||
padding: 8px;
|
||||
|
||||
.el-dialog__body {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,136 +0,0 @@
|
||||
<template>
|
||||
<AutoDataForm
|
||||
ref="AutoDataForm"
|
||||
class="variable-add"
|
||||
:submit-btn-text="submitBtnText"
|
||||
v-bind="$data"
|
||||
@submit="confirm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'VariableCreateForm',
|
||||
components: {
|
||||
AutoDataForm
|
||||
},
|
||||
props: {
|
||||
variable: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const defaultValidator = (rule, value, callback) => {
|
||||
if (this.defaultValueRequired && !value) {
|
||||
callback(new Error(this.$t('FieldRequiredError')))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
defaultValueRequired: false,
|
||||
submitBtnText: this.$t('Confirm'),
|
||||
url: '/api/v1/ops/variables/',
|
||||
form: Object.assign({ 'on_invalid': 'error' }, this.variable || {}),
|
||||
fields: [
|
||||
['', ['name', 'var_name', 'type', 'text_default_value', 'select_default_value', 'extra_args', 'tips', 'required']]
|
||||
],
|
||||
fieldsMeta: {
|
||||
var_name: {
|
||||
helpTextAsTip: false
|
||||
},
|
||||
text_default_value: {
|
||||
label: this.$t('DefaultValue'),
|
||||
hidden: (formValue) => {
|
||||
return formValue.type !== 'text'
|
||||
},
|
||||
rules: [{ validator: defaultValidator }],
|
||||
helpTip: this.$t('DefaultValueTip'),
|
||||
el: {
|
||||
type: 'input'
|
||||
}
|
||||
},
|
||||
select_default_value: {
|
||||
label: this.$t('DefaultValue'),
|
||||
helpTip: this.$t('DefaultValueTip'),
|
||||
hidden: (formValue) => {
|
||||
return formValue.type !== 'select'
|
||||
},
|
||||
rules: [{ validator: defaultValidator }],
|
||||
el: { type: 'input' }
|
||||
},
|
||||
extra_args: {
|
||||
hidden: (formValue) => {
|
||||
return formValue.type !== 'select'
|
||||
},
|
||||
el: { type: 'textarea', rows: 4, placeholder: this.$t('ExtraArgsPlaceholder') },
|
||||
rules: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
try {
|
||||
const lines = value.split('\n')
|
||||
const regex = /^[^:]+:[^:]+$/
|
||||
for (const line of lines) {
|
||||
if (!regex.test(line.trim())) {
|
||||
callback(new Error(this.$t('ExtraArgsFormatError')))
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
callback(new Error(this.$t('ExtraArgsFormatError')))
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
required: {
|
||||
on: {
|
||||
change: ([event], updateForm) => {
|
||||
this.defaultValueRequired = event
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
hasSaveContinue: false,
|
||||
method: 'get'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.defaultValueRequired = this.variable?.required || false
|
||||
},
|
||||
methods: {
|
||||
confirm(form) {
|
||||
if (this.variable?.name) {
|
||||
this.$emit('edit', form)
|
||||
} else {
|
||||
this.$emit('add', form)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.variable-add {
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 5px;
|
||||
|
||||
.help-block {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .form-group-header {
|
||||
.hr-line-dashed {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<AutoDataForm
|
||||
ref="AutoDataForm"
|
||||
class="variable-set"
|
||||
:submit-btn-text="submitBtnText"
|
||||
v-bind="$data"
|
||||
:fields="fields"
|
||||
@submit="confirm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'VariableSetForm',
|
||||
components: {
|
||||
AutoDataForm
|
||||
},
|
||||
props: {
|
||||
formData: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
queryParam: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
submitBtnText: this.$t('Confirm'),
|
||||
// 防止缓存form remoteMeta
|
||||
url: `/api/v1/ops/variables/form-data/?t=${new Date().getTime()}&` + this.queryParam,
|
||||
form: {},
|
||||
hasSaveContinue: false,
|
||||
method: 'get',
|
||||
hasReset: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fields() {
|
||||
return [['', this.formData.map(item => item.var_name)]]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm(form) {
|
||||
this.$emit('confirm', form)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.variable-set {
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 5px;
|
||||
|
||||
.help-block {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .form-group-header {
|
||||
.hr-line-dashed {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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">
|
||||
import { toSafeLocalDateStr } from '@/utils/common/time'
|
||||
import { toSafeLocalDateStr } from '@/utils/time'
|
||||
|
||||
export default {
|
||||
name: 'ItemValue',
|
||||
@@ -78,7 +78,7 @@ export default {
|
||||
formatterData = data
|
||||
}
|
||||
return (
|
||||
<span style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: '1.2' }}>{formatterData}</span>
|
||||
<span style={{ whiteSpace: 'pre-wrap', lineHeight: '1.2' }}>{formatterData}</span>
|
||||
)
|
||||
}
|
||||
if (this.value instanceof Array) {
|
||||
@@ -92,7 +92,7 @@ export default {
|
||||
)
|
||||
}
|
||||
return (
|
||||
<span style='white-space: pre-wrap;' title={this.displayValue}>{this.displayValue}</span>
|
||||
<span title={this.displayValue}>{this.displayValue}</span>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,15 @@
|
||||
<template>
|
||||
<IBox v-if="loading" style="width: 100%; height: 200px" />
|
||||
<div v-else>
|
||||
<DetailCard
|
||||
v-if="hasObject && items.length > 0"
|
||||
:items="validItems"
|
||||
:loading="loading"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
<DetailCard v-if="hasObject && items.length > 0" :items="validItems" :loading="loading" v-bind="$attrs" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DetailCard from './index.vue'
|
||||
import { copy } from '@/utils/common/index'
|
||||
import { toSafeLocalDateStr } from '@/utils/common/time'
|
||||
import IBox from '@/components/Common/IBox/index.vue'
|
||||
import { copy } from '@/utils/common'
|
||||
import { toSafeLocalDateStr } from '@/utils/time'
|
||||
import IBox from '@/components/IBox/index.vue'
|
||||
import LabelsDetailFormatter from '../Formatters/LabelsDetailFormatter.vue'
|
||||
|
||||
export default {
|
||||
@@ -37,7 +32,7 @@ export default {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
showUndefined: {
|
||||
showUndefine: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
@@ -129,18 +124,8 @@ export default {
|
||||
parseArrayValue(value, excludes, label) {
|
||||
if (Array.isArray(value)) {
|
||||
const tp = typeof value[0]
|
||||
let object = {}
|
||||
|
||||
if (value.length === 0) {
|
||||
object = {
|
||||
key: label,
|
||||
value: '-'
|
||||
}
|
||||
return this.items.push(object)
|
||||
}
|
||||
|
||||
// 如果是空数组,那么循环体将不会执行
|
||||
for (const [index, item] of value.entries()) {
|
||||
let object = {}
|
||||
if (tp === 'object') {
|
||||
const firstValue = value[0]
|
||||
if (firstValue.hasOwnProperty('name')) {
|
||||
@@ -183,7 +168,7 @@ export default {
|
||||
const data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
|
||||
let remoteMeta = data.actions['GET'] || {}
|
||||
if (this.nested) {
|
||||
remoteMeta = remoteMeta[this.nested]?.children || remoteMeta || {}
|
||||
remoteMeta = remoteMeta[this.nested]?.children || {}
|
||||
}
|
||||
let fields = this.fields
|
||||
fields = fields || Object.keys(remoteMeta)
|
||||
@@ -235,7 +220,7 @@ export default {
|
||||
value = this.parseValue(value, fieldMeta.type)
|
||||
|
||||
if (value === undefined) {
|
||||
if (this.showUndefined) {
|
||||
if (this.showUndefine) {
|
||||
value = '-'
|
||||
} else {
|
||||
continue
|
||||
|
||||
@@ -1,25 +1,24 @@
|
||||
<template>
|
||||
<IBox :fa="fa" :title="title">
|
||||
<el-form :label-width="labelWidth" class="content detail-card" label-position="left">
|
||||
<template v-for="item in items">
|
||||
<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 class="item-value el-form-item__content">
|
||||
<component
|
||||
:is="item.component"
|
||||
v-if="item.component"
|
||||
v-bind="{...item}"
|
||||
/>
|
||||
<ItemValue v-else :value="item.value" v-bind="item" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :label-width="labelWidth" class="content" label-position="left">
|
||||
<span v-for="item in items" :key="item.key">
|
||||
<el-form-item v-if="item.has !== false" :class="item.class" :label="item.key">
|
||||
<span slot="label"> {{ formateLabel(item.key) }}</span>
|
||||
<span
|
||||
:is="item.component"
|
||||
v-if="item.component"
|
||||
v-bind="{...item}"
|
||||
/>
|
||||
<ItemValue v-else :value="item.value" class="item-value" v-bind="item" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
</el-form>
|
||||
<slot />
|
||||
</IBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IBox from '@/components/Common/IBox/index.vue'
|
||||
import IBox from '../../IBox/index.vue'
|
||||
import ItemValue from './ItemValue.vue'
|
||||
|
||||
export default {
|
||||
@@ -46,7 +45,7 @@ export default {
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: '120px'
|
||||
default: '25%'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -72,76 +71,55 @@ export default {
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 13px;
|
||||
line-height: 2;
|
||||
.el-form-item {
|
||||
border-bottom: 1px dashed #EBEEF5;
|
||||
padding: 1px 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
::v-deep .el-form-item {
|
||||
border-bottom: 1px dashed #F4F4F4;
|
||||
padding: 1px 0;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//text-align: end;
|
||||
line-height: 32px;
|
||||
min-height: 32px;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
//border-bottom: none;
|
||||
&.array-item {
|
||||
border-bottom: none;
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
border-bottom: 1px dashed #EBEEF5
|
||||
}
|
||||
|
||||
&.array-item {
|
||||
border-bottom: none;
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
border-bottom: 1px dashed #EBEEF5
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label:last-child {
|
||||
border: 1px dashed #EBEEF5;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
//padding-right: 8%;
|
||||
overflow: hidden;
|
||||
color: var(--color-icon-primary);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
width: 33%;
|
||||
min-width: 120px;
|
||||
padding: 5px 0;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
//line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
color: var(--color-text-primary);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
width: calc(100% - 120px);
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
::v-deep .el-tag--mini {
|
||||
margin-right: 3px;
|
||||
::v-deep .el-form-item__label:last-child {
|
||||
border: 1px dashed #EBEEF5;
|
||||
}
|
||||
}
|
||||
|
||||
.item-value {
|
||||
::v-deep span {
|
||||
//display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
vertical-align: middle;
|
||||
::v-deep .el-form-item__label {
|
||||
padding-right: 8%;
|
||||
overflow: hidden;
|
||||
color: var(--color-icon-primary);
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
color: var(--color-text-primary);
|
||||
font-size: 13px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
::v-deep .el-tag--mini {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-value span {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 13px;
|
||||
line-height: 2.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
<script>
|
||||
import { createSourceIdCache } from '@/api/common'
|
||||
import { Select2 } from '@/components/Form/FormFields'
|
||||
import IBox from '@/components/Common/IBox/index.vue'
|
||||
import IBox from '@/components/IBox/index.vue'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
@@ -340,13 +340,13 @@ b, strong {
|
||||
}
|
||||
|
||||
tr td {
|
||||
line-height: 1.4;
|
||||
padding: 8px 0;
|
||||
line-height: 1.42857;
|
||||
padding: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
tr.item td {
|
||||
border-top: 1px dashed #EBEEF5;
|
||||
border-top: 1px solid #e7eaec;
|
||||
}
|
||||
|
||||
.box-margin {
|
||||
|
||||
@@ -1,23 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="summary-header">
|
||||
<el-tooltip :content="title" :open-delay="500" placement="top">
|
||||
<span class="title">{{ title }}</span>
|
||||
</el-tooltip>
|
||||
<el-card shadow="never">
|
||||
<div slot="header" class="summary-header">
|
||||
<span class="header-title">{{ title }}</span>
|
||||
</div>
|
||||
<slot>
|
||||
<h3 class="no-margins ">
|
||||
<span
|
||||
:class="{ 'can-direct': canDirect }"
|
||||
class="num"
|
||||
@click="handleClick"
|
||||
>
|
||||
<span v-if="count === null"> - </span>
|
||||
<span v-else>{{ count }}</span>
|
||||
</span>
|
||||
</h3>
|
||||
<h1 class="no-margins">
|
||||
<span v-if="body.disabled" class="disabled-link">{{ body.count }}</span>
|
||||
<router-link v-else :to="body.route">
|
||||
<span>{{ body.count }}</span>
|
||||
</router-link>
|
||||
</h1>
|
||||
<small>{{ body.comment }}</small>
|
||||
</slot>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -28,78 +23,56 @@ export default {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
count: {
|
||||
type: [Number, String, Promise],
|
||||
default: null
|
||||
rightSideLabel: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
route: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
canDirect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
callback: {
|
||||
type: Function,
|
||||
default: () => {
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
if (this.route) {
|
||||
this.$router.push(this.route)
|
||||
return
|
||||
}
|
||||
this.callback.bind(this)()
|
||||
this.$emit('click')
|
||||
body: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary-header {
|
||||
//color: var(--color-icon-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-style: normal;
|
||||
.header-title {
|
||||
font-size: 14px;
|
||||
margin: 0 0 7px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.no-margins {
|
||||
margin: 0 !important;
|
||||
|
||||
.num {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
color: var(--color-text-primary);
|
||||
cursor: pointer;
|
||||
|
||||
&.can-direct:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.right-side ::v-deep .el-tag {
|
||||
font-weight: 600;
|
||||
padding: 3px 8px;
|
||||
text-shadow: none;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
background-color: #ffffff;
|
||||
color: inherit;
|
||||
padding: 15px 20px 20px 20px !important;
|
||||
border-color: #e7eaec;
|
||||
border-image: none;
|
||||
border-style: solid solid none;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
|
||||
.no-margins {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.disabled-link {
|
||||
color: #428bca;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
@@ -5,59 +5,41 @@
|
||||
v-if="action.dropdown"
|
||||
v-show="action.dropdown.length > 0"
|
||||
:key="action.name"
|
||||
:class="[action.name, { grouped: action.grouped }]"
|
||||
:size="action.size"
|
||||
:split-button="!!action.split"
|
||||
:type="action.type"
|
||||
class="action-item"
|
||||
placement="bottom-start"
|
||||
trigger="click"
|
||||
@click="handleClick(action)"
|
||||
@command="handleDropdownCallback"
|
||||
>
|
||||
<span v-if="action.split" :style="{ cursor: action.disabled ? 'not-allowed' : 'pointer' }">
|
||||
{{ action.title }}
|
||||
</span>
|
||||
<el-button
|
||||
v-else
|
||||
:class="action.name"
|
||||
:size="size"
|
||||
class="more-action"
|
||||
v-bind="{ ...cleanButtonAction(action), icon: '' }"
|
||||
>
|
||||
<span class="pre-icon">
|
||||
<Icon v-if="action.icon" :icon="action.icon" />
|
||||
<el-button :size="size" class="more-action" v-bind="cleanButtonAction(action)">
|
||||
<span v-if="action.icon && !action.icon.startsWith('el-')" class="pre-icon">
|
||||
<i v-if="action.icon.startsWith('fa')" :class="'fa fa-fw ' + action.icon" />
|
||||
<svg-icon v-else :icon-class="action.icon" />
|
||||
</span>
|
||||
<span v-if="action.title">
|
||||
{{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
|
||||
</span>
|
||||
</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">
|
||||
<div
|
||||
v-if="option.group"
|
||||
:key="'group:' + option.name"
|
||||
:key="'group:'+option.name"
|
||||
class="dropdown-menu-title"
|
||||
style="width: 130px"
|
||||
style="width:130px"
|
||||
>
|
||||
{{ option.group }}
|
||||
</div>
|
||||
<el-tooltip
|
||||
:key="option.name"
|
||||
:content="option.tip"
|
||||
:disabled="!option.tip"
|
||||
:open-delay="500"
|
||||
placement="top"
|
||||
>
|
||||
<el-tooltip :key="option.name" :content="option.tip" :disabled="!option.tip" :open-delay="500" placement="top">
|
||||
<el-dropdown-item
|
||||
:key="option.name"
|
||||
:command="[option, action]"
|
||||
:title="option.tip"
|
||||
class="dropdown-item"
|
||||
v-bind="{ ...option, icon: '' }"
|
||||
v-bind="{...option, icon: ''}"
|
||||
>
|
||||
<span v-if="actionsHasIcon(action.dropdown)" class="pre-icon">
|
||||
<Icon v-if="option.icon" :icon="option.icon" />
|
||||
<span v-if="option.icon" class="pre-icon">
|
||||
<i v-if="option.icon.startsWith('fa')" :class="'fa fa-fw ' + option.icon" />
|
||||
<svg-icon v-else :icon-class="option.icon" />
|
||||
</span>
|
||||
{{ option.title }}
|
||||
</el-dropdown-item>
|
||||
@@ -69,16 +51,16 @@
|
||||
<el-button
|
||||
v-else
|
||||
:key="action.name"
|
||||
:class="[action.name, { grouped: action.grouped }]"
|
||||
:size="size"
|
||||
class="action-item"
|
||||
v-bind="{ ...cleanButtonAction(action), icon: '' }"
|
||||
v-bind="{...cleanButtonAction(action), icon: action.icon && action.icon.startsWith('el-') ? action.icon : ''}"
|
||||
@click="handleClick(action)"
|
||||
>
|
||||
<el-tooltip :content="action.tip" :disabled="!action.tip" placement="top">
|
||||
<el-tooltip :content="action.tip" :disabled="!action.tip" :open-delay="500" placement="top">
|
||||
<span>
|
||||
<span v-if="action.icon" style="vertical-align: initial">
|
||||
<Icon :icon="action.icon" />
|
||||
<span v-if="action.icon && !action.icon.startsWith('el-')" style="vertical-align: initial">
|
||||
<i v-if="action.icon.startsWith('fa')" :class="'fa ' + action.icon" />
|
||||
<svg-icon v-else :icon-class="action.icon" />
|
||||
</span>
|
||||
{{ action.title }}
|
||||
</span>
|
||||
@@ -89,14 +71,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toSentenceCase } from '@/utils/common/index'
|
||||
import Icon from '@/components/Widgets/Icon/index.vue'
|
||||
import { toSentenceCase } from '@/utils/common'
|
||||
|
||||
export default {
|
||||
name: 'DataActions',
|
||||
components: {
|
||||
Icon
|
||||
},
|
||||
props: {
|
||||
grouped: {
|
||||
type: Boolean,
|
||||
@@ -121,9 +99,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
actionsHasIcon(actions) {
|
||||
return actions.some(action => action.icon)
|
||||
},
|
||||
hasIcon(action, type = '') {
|
||||
const icon = action.icon
|
||||
if (!icon) {
|
||||
@@ -181,7 +156,6 @@ export default {
|
||||
delete action['callback']
|
||||
delete action['name']
|
||||
delete action['can']
|
||||
delete action['split']
|
||||
return action
|
||||
},
|
||||
cleanActions(actions) {
|
||||
@@ -211,10 +185,6 @@ export default {
|
||||
}
|
||||
delete action['can']
|
||||
|
||||
if (!action.size) {
|
||||
action.size = 'small'
|
||||
}
|
||||
|
||||
if (action.dropdown) {
|
||||
action.dropdown = this.cleanActions(action.dropdown)
|
||||
}
|
||||
@@ -228,9 +198,9 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$btn-text-color: #ffffff;
|
||||
$color-btn-background: #e8f7f4;
|
||||
$color-btn-focus-background: #83cbba;
|
||||
$color-divided: #e4e7ed;
|
||||
$color-btn-background: #E8F7F4;
|
||||
$color-btn-focus-background: #83CBBA;
|
||||
$color-divided: #E4E7ED;
|
||||
$color-drop-menu-title: #909399;
|
||||
$color-drop-menu-border: #e4e7ed;
|
||||
|
||||
@@ -239,10 +209,6 @@ $color-drop-menu-border: #e4e7ed;
|
||||
.action-item {
|
||||
margin-left: 5px;
|
||||
|
||||
&.grouped {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -283,17 +249,10 @@ $color-drop-menu-border: #e4e7ed;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-button {
|
||||
padding: 2px 5px;
|
||||
line-height: 1.3;
|
||||
font-size: 13px;
|
||||
|
||||
&:not(.is-plain) {
|
||||
color: $btn-text-color;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px 6px;
|
||||
color: $btn-text-color;
|
||||
|
||||
* {
|
||||
vertical-align: baseline !important;
|
||||
@@ -321,6 +280,8 @@ $color-drop-menu-border: #e4e7ed;
|
||||
// 下拉 options
|
||||
.el-dropdown-menu {
|
||||
::v-deep .more-batch-processing {
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
@@ -342,7 +303,6 @@ $color-drop-menu-border: #e4e7ed;
|
||||
|
||||
.dropdown-item {
|
||||
color: var(--color-text-primary);
|
||||
line-height: 34px;
|
||||
|
||||
.pre-icon {
|
||||
width: 17px;
|
||||
@@ -364,8 +324,6 @@ $color-drop-menu-border: #e4e7ed;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
padding: 0 20px;
|
||||
|
||||
&.is-disabled {
|
||||
color: var(--color-disabled);
|
||||
cursor: not-allowed;
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-if="detailVisible"
|
||||
:modal="false"
|
||||
:show-cancel="false"
|
||||
:show-confirm="false"
|
||||
:title="title"
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<Dialog
|
||||
:show-cancel="false"
|
||||
:visible="iVisible"
|
||||
class="processing-dialog"
|
||||
height="300"
|
||||
:title="$tc('Processing')"
|
||||
width="300"
|
||||
@confirm="iVisible=false"
|
||||
>
|
||||
<div id="load">
|
||||
<div class="spinner" />
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Dialog from './index.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProcessingDialog',
|
||||
components: { Dialog },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
iVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.processing-dialog {
|
||||
::v-deep .el-dialog__body {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 5px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
border-top-color: var(--color-primary);
|
||||
animation: spin 1s infinite linear;
|
||||
}
|
||||
|
||||
#load {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<Dialog
|
||||
:visible="iVisible"
|
||||
height="300"
|
||||
title="Processing"
|
||||
width="300"
|
||||
class="processing-dialog"
|
||||
>
|
||||
<div id="load">
|
||||
<div class="spinner" />
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Dialog from './index.vue'
|
||||
|
||||
export default {
|
||||
name: 'RemoteProcessingDialog',
|
||||
components: { Dialog },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
iVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.processing-dialog {
|
||||
::v-deep .el-dialog__body {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 5px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
border-top-color: var(--color-primary);
|
||||
animation: spin 1s infinite linear;
|
||||
}
|
||||
|
||||
#load {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Dialog
|
||||
v-if="iVisible"
|
||||
:destroy-on-close="true"
|
||||
:show-cancel="false"
|
||||
:show-confirm="false"
|
||||
:title="$tc('Report')"
|
||||
:visible.sync="iVisible"
|
||||
top="35vh"
|
||||
width="80%"
|
||||
@close="loading=true"
|
||||
>
|
||||
<span v-if="loading" v-loading="loading" class="loading" />
|
||||
<iframe title="dialog" :src="url" style="border: none;" @load="onIframeLoad" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Dialog from '@/components/Dialog/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'ReportDialog',
|
||||
components: {
|
||||
Dialog
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeMount() {
|
||||
},
|
||||
methods: {
|
||||
onIframeLoad() {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
margin-top: 20px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<Dialog
|
||||
:show-cancel="false"
|
||||
:title="title"
|
||||
:visible.sync="visible"
|
||||
:close-on-click-modal="false"
|
||||
width="700px"
|
||||
@close="onClose"
|
||||
@confirm="visible = false"
|
||||
>
|
||||
<el-alert type="warning" :closable="false">
|
||||
{{ warningText }}
|
||||
<div class="secret">
|
||||
<div class="row">
|
||||
<span class="col">ID:</span>
|
||||
<span class="value">{{ keyInfo.id }}</span>
|
||||
<i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.id)" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col">Secret:</span>
|
||||
<span class="value">{{ keyInfo.secret }}</span>
|
||||
<i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.secret)" />
|
||||
</div>
|
||||
</div>
|
||||
</el-alert>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/i18n/i18n'
|
||||
import { copy } from '@/utils/common/index'
|
||||
import Dialog from '@/components/Dialog/index'
|
||||
|
||||
export default {
|
||||
name: 'Secret',
|
||||
components: {
|
||||
Dialog
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: () => i18n.t('CreateAccessKey')
|
||||
},
|
||||
warningText: {
|
||||
type: String,
|
||||
default: () => i18n.t('ApiKeyWarning')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyInfo: { id: '', secret: '' },
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show(data) {
|
||||
this.keyInfo = data
|
||||
this.visible = true
|
||||
},
|
||||
onClose() {
|
||||
this.$emit('close')
|
||||
},
|
||||
handleCopy(value) {
|
||||
copy(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.secret {
|
||||
color: #2b2f3a;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
width: 100px;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,6 @@
|
||||
<transition name="dialog-fade">
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
:class="{ shadow: shadow }"
|
||||
:modal-append-to-body="true"
|
||||
:title="title"
|
||||
:top="top"
|
||||
@@ -47,7 +46,7 @@ export default {
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '800px'
|
||||
default: '60%'
|
||||
},
|
||||
showConfirm: {
|
||||
type: Boolean,
|
||||
@@ -80,14 +79,11 @@ export default {
|
||||
maxWidth: {
|
||||
type: String,
|
||||
default: '1200px'
|
||||
},
|
||||
shadow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iWidth() {
|
||||
@@ -106,69 +102,59 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog.shadow ::v-deep .el-dialog {
|
||||
box-shadow: 1px 2px 12px 0 rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.dialog ::v-deep .el-dialog {
|
||||
border-radius: 0.3em;
|
||||
max-width: min(100vw, 1500px);
|
||||
|
||||
.form-group-header {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.el-form--label-top {
|
||||
.form-group-header {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-circle-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__header {
|
||||
box-sizing: border-box;
|
||||
padding: 15px 22px;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 20px 30px;
|
||||
font-size: 13px;
|
||||
|
||||
&:has(.el-table) {
|
||||
background: #f3f3f4;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
border-top: 1px solid #dee2e6;
|
||||
padding: 16px 25px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.dialog ::v-deep .el-dialog {
|
||||
max-width: calc(100% - 30px);
|
||||
border-radius: 0.3em;
|
||||
max-width: min(100vw, 1500px);
|
||||
|
||||
.form-group-header {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.el-icon-circle-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__header {
|
||||
box-sizing: border-box;
|
||||
padding: 15px 22px;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 20px 30px;
|
||||
font-size: 13px;
|
||||
|
||||
&:has(.el-table) {
|
||||
background: #f3f3f4;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
border-top: 1px solid #dee2e6;
|
||||
padding: 16px 25px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer ::v-deep button.el-button {
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.dialog ::v-deep .el-dialog {
|
||||
max-width: calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-fade-enter-active, .dialog-fade-leave-active {
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
.dialog-footer ::v-deep button.el-button {
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */
|
||||
{
|
||||
opacity: 0;
|
||||
}
|
||||
.dialog-fade-enter-active, .dialog-fade-leave-active {
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
.dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */
|
||||
{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,305 +0,0 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
ref="drawer"
|
||||
v-el-drawer-drag-width
|
||||
:append-to-body="true"
|
||||
:before-close="handleClose"
|
||||
:class="['drawer', { 'drawer__no-footer': !hasFooter }]"
|
||||
:modal="modal"
|
||||
:size="size"
|
||||
:title="title"
|
||||
:visible.sync="iVisible"
|
||||
custom-class="drawer"
|
||||
destroy-on-close
|
||||
direction="rtl"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<div class="drawer__content">
|
||||
<slot name="default">
|
||||
<component
|
||||
:is="component"
|
||||
v-if="component"
|
||||
ref="dynamicComponent"
|
||||
v-bind="componentProps"
|
||||
v-on="componentListeners"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="hasFooter" ref="drawerFooter" class="drawer__footer" />
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDrawerWidth } from '@/utils/common/index'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return getDrawerWidth()
|
||||
}
|
||||
},
|
||||
component: {
|
||||
type: [String, Function, Object],
|
||||
default: ''
|
||||
},
|
||||
componentProps: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
componentListeners: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modal: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hasFooter: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
formLabelWidth: '80px'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
this.$emit('close-drawer')
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.drawer__no-footer {
|
||||
::v-deep {
|
||||
.drawer {
|
||||
.page {
|
||||
height: calc(100vh - 55px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.drawer ::v-deep {
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer {
|
||||
::v-deep {
|
||||
min-width: 565px;
|
||||
|
||||
.el-card__body {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-submenu {
|
||||
.el-tabs__header {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.el-tabs__item.is-top {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-buttons {
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-right: 1px;
|
||||
padding-right: 15px;
|
||||
height: 100%;
|
||||
|
||||
&.detail-card {
|
||||
padding-right: 0;
|
||||
margin-top: unset;
|
||||
}
|
||||
|
||||
// Detail 中
|
||||
&.content {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.form-buttons {
|
||||
//position: absolute;
|
||||
// bottom: 13px;
|
||||
// margin-left: 20%;
|
||||
// margin-top: 0;
|
||||
}
|
||||
|
||||
// Form 中的子 form
|
||||
.el-form {
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
.el-form-item__label {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
line-height: 25px;
|
||||
margin-right: 13px;
|
||||
|
||||
.el-radio__label {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.el-form--label-top {
|
||||
.el-radio-group {
|
||||
.el-radio {
|
||||
display: block;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
padding-left: 12px;
|
||||
|
||||
.el-form-item__label {
|
||||
padding: 0 20px 0 0;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.sub-form {
|
||||
margin-left: -1px;
|
||||
|
||||
.form-fields {
|
||||
max-height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.form-fields {
|
||||
//overflow: auto;
|
||||
//max-height: calc(100vh - 180px);
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
.el-checkbox {
|
||||
display: block;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item__content:has(.el-checkbox):not(:has(.el-checkbox-group)) {
|
||||
display: inline-block; /* 更改为 inline-block */
|
||||
//width: unset; /* 这个设置上去后,平台详情中, Automations 会有问题 */
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
form {
|
||||
.el-form-item {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group-header {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-drawer__header {
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
margin-bottom: 0;
|
||||
padding: 15px 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.sql.container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page {
|
||||
overflow-y: auto;
|
||||
|
||||
height: calc(100vh - 110px);
|
||||
|
||||
&.tab-page {
|
||||
.page-content {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
height: unset;
|
||||
padding-right: 10px;
|
||||
padding-left: 20px;
|
||||
|
||||
& > div {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.ibox {
|
||||
margin-bottom: 10px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer__content, .tab-page-content {
|
||||
height: 100%;
|
||||
background: #f3f3f3;
|
||||
}
|
||||
|
||||
.drawer__footer {
|
||||
border-top: solid 1px #f3f3f3;
|
||||
}
|
||||
|
||||
//.el-drawer__header {
|
||||
// margin-bottom: 20px;
|
||||
//
|
||||
// span {
|
||||
// font-size: 16px;
|
||||
// font-weight: 800;
|
||||
// color: var(--color-text-primary);
|
||||
// }
|
||||
//}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,35 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<DataForm
|
||||
v-if="!loading"
|
||||
ref="dataForm"
|
||||
:fields="totalFields"
|
||||
:form="iForm"
|
||||
:server-errors="serverErrors"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
<DataForm
|
||||
v-if="!loading"
|
||||
ref="dataForm"
|
||||
:fields="totalFields"
|
||||
:form="iForm"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<div
|
||||
v-for="(group, i) in groups"
|
||||
:key="'group-'+group.name"
|
||||
:slot="'id:'+group.name"
|
||||
>
|
||||
<template
|
||||
v-for="(group, i) in groups"
|
||||
:slot="'id:'+group.name"
|
||||
>
|
||||
<FormGroupHeader
|
||||
v-if="!groupHidden(group, i)"
|
||||
:key="'group-' + group.name"
|
||||
:group="group"
|
||||
:index="i"
|
||||
:line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
|
||||
/>
|
||||
</template>
|
||||
</DataForm>
|
||||
</div>
|
||||
<FormGroupHeader
|
||||
v-if="!groupHidden(group, i)"
|
||||
:group="group"
|
||||
:index="i"
|
||||
:line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
|
||||
/>
|
||||
</div>
|
||||
</DataForm>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataForm from '../DataForm/index.vue'
|
||||
import FormGroupHeader from '@/components/Form/FormGroupHeader/index.vue'
|
||||
import { FormFieldGenerator } from '@/components/Form/AutoDataForm/utils'
|
||||
import { UniqueCheck } from '@/components/Form/DataForm/rules'
|
||||
|
||||
export default {
|
||||
name: 'AutoDataForm',
|
||||
@@ -67,8 +63,7 @@ export default {
|
||||
totalFields: [],
|
||||
loading: true,
|
||||
groups: [],
|
||||
errors: {},
|
||||
serverErrors: {}
|
||||
errors: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -92,12 +87,11 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$log.debug('>>> Method: ', this.method)
|
||||
this.optionUrlMetaAndGenerateColumns()
|
||||
},
|
||||
methods: {
|
||||
async optionUrlMetaAndGenerateColumns() {
|
||||
let data = { actions: {} }
|
||||
let data = { actions: {}}
|
||||
if (this.url) {
|
||||
data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
|
||||
}
|
||||
@@ -106,8 +100,6 @@ export default {
|
||||
this.generateColumns()
|
||||
this.$emit('afterGenerateColumns', this.totalFields)
|
||||
this.cleanFormValue()
|
||||
// 初始化时清空错误
|
||||
this.serverErrors = {}
|
||||
this.loading = false
|
||||
},
|
||||
generateColumns() {
|
||||
@@ -115,47 +107,6 @@ export default {
|
||||
this.totalFields = generator.generateFields(this.fields, this.fieldsMeta, this.remoteMeta)
|
||||
this.groups = generator.groups
|
||||
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) {
|
||||
if (!form) {
|
||||
@@ -185,69 +136,18 @@ export default {
|
||||
cleanFormValue() {
|
||||
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) {
|
||||
error = (error || '').toString().replace(/[。.]+$/, '')
|
||||
const elForm = this._getElFormInstance()
|
||||
if (elForm && Array.isArray(elForm.fields)) {
|
||||
const item = elForm.fields.find(f => f.prop === name)
|
||||
if (item) {
|
||||
item.validateMessage = error
|
||||
item.validateState = error ? 'error' : ''
|
||||
}
|
||||
const field = this.totalFields.find((v) => v.prop === name)
|
||||
if (!field) {
|
||||
return
|
||||
}
|
||||
// 不写入 totalFields,避免触发 innerContent 变化导致表单值被覆盖
|
||||
this.$set(this.serverErrors, name, 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' : ''
|
||||
})
|
||||
if (field.attrs.error === error) {
|
||||
error += '.'
|
||||
}
|
||||
|
||||
if (typeof error === 'string') {
|
||||
field.el.errors = error
|
||||
field.attrs.error = error
|
||||
}
|
||||
},
|
||||
groupHidden(group, i) {
|
||||
@@ -263,6 +163,5 @@ export default {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import Vue from 'vue'
|
||||
import ObjectSelect2 from '@/components/Form/FormFields/NestedObjectSelect2.vue'
|
||||
import NestedField from '@/components/Form/AutoDataForm/components/NestedField.vue'
|
||||
import Switcher from '@/components/Form/FormFields/Switcher.vue'
|
||||
import rules from '@/components/Form/DataForm/rules'
|
||||
import BasicTree from '@/components/Form/FormFields/BasicTree.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 i18n from '@/i18n/i18n'
|
||||
|
||||
@@ -63,9 +64,8 @@ export class FormFieldGenerator {
|
||||
}
|
||||
break
|
||||
case 'boolean':
|
||||
type = 'checkbox'
|
||||
// field.component = Switcher
|
||||
// field.type = 'checkbox'
|
||||
type = ''
|
||||
field.component = Switcher
|
||||
break
|
||||
case 'list':
|
||||
type = 'input'
|
||||
@@ -112,7 +112,7 @@ export class FormFieldGenerator {
|
||||
let nestedFields = fieldMeta.fields || []
|
||||
const nestedFieldsMeta = fieldMeta.fieldsMeta || {}
|
||||
const nestedFieldsRemoteMeta = fieldRemoteMeta.children || {}
|
||||
if (nestedFields.toString() === '__all__') {
|
||||
if (nestedFields === '__all__') {
|
||||
nestedFields = Object.keys(nestedFieldsRemoteMeta)
|
||||
}
|
||||
for (const name of nestedFields) {
|
||||
@@ -177,10 +177,7 @@ export class FormFieldGenerator {
|
||||
const systemLang = document.cookie.django_language
|
||||
if (helpTextAsPlaceholder !== undefined) {
|
||||
helpTextAsPlaceholder = !!helpTextAsPlaceholder
|
||||
} else if (
|
||||
placeholderType.indexOf(field.type) === -1 &&
|
||||
placeholderComponent.indexOf(field.component) === -1
|
||||
) {
|
||||
} else if (placeholderType.indexOf(field.type) === -1 && placeholderComponent.indexOf(field.component) === -1) {
|
||||
helpTextAsPlaceholder = false
|
||||
} else if ((helpTextWordLength <= 5 || helpText.length <= 10) && systemLang === 'en') {
|
||||
helpTextAsPlaceholder = true
|
||||
|
||||
@@ -361,10 +361,9 @@ export default {
|
||||
},
|
||||
// 填充表达式
|
||||
submitFill() {
|
||||
const minMinutes = 60
|
||||
const crontabDiffMin = this.crontabDiff / 1000 / 60
|
||||
if (crontabDiffMin > 0 && crontabDiffMin < minMinutes) {
|
||||
const msg = this.$t('CrontabDiffError', { minutes: minMinutes })
|
||||
if (crontabDiffMin > 0 && crontabDiffMin < 10) {
|
||||
const msg = this.$tc('CrontabDiffError')
|
||||
this.$message.error(msg)
|
||||
return
|
||||
}
|
||||
@@ -10,18 +10,15 @@
|
||||
<el-form-item>
|
||||
<el-radio v-model="radioValue" :label="2">
|
||||
{{ this.$t('From') }}
|
||||
<el-input-number v-model="cycle01" :max="23" :min="0" size="mini" />
|
||||
-
|
||||
<el-input-number v-model="cycle02" :max="23" :min="0" size="mini" />
|
||||
{{ this.$t('Hour') }}
|
||||
<el-input-number v-model="cycle01" :max="60" :min="0" size="mini" /> -
|
||||
<el-input-number v-model="cycle02" :max="60" :min="0" size="mini" /> {{ this.$t('Hour') }}
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-radio v-model="radioValue" :label="3">
|
||||
{{ this.$t('Every') }}
|
||||
<el-input-number v-model="average02" :max="23" :min="1" size="mini" />
|
||||
{{ this.$t('Hour') }} {{ this.$t('ExecuteOnce') }}
|
||||
<el-input-number v-model="average02" :max="60" :min="1" size="mini" /> {{ this.$t('Hour') }} {{ this.$t('ExecuteOnce') }}
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
|
||||
@@ -35,7 +32,7 @@
|
||||
multiple
|
||||
style="width:100%"
|
||||
>
|
||||
<el-option v-for="item in 24" :key="item" :value="item-1">{{ item - 1 }}</el-option>
|
||||
<el-option v-for="item in 24" :key="item" :value="item-1">{{ item-1 }}</el-option>
|
||||
</el-select>
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||
@@ -9,7 +9,7 @@
|
||||
<el-form-item>
|
||||
<el-radio v-model="radioValue" :label="3">
|
||||
{{ this.$t('From') }}
|
||||
<el-input-number v-model="average02" :max="59" :min="1" size="mini" />
|
||||
<el-input-number v-model="average02" :max="60" :min="1" size="mini" />
|
||||
{{ this.$t('Min') }} {{ this.$t('ExecuteOnce') }}
|
||||
</el-radio>
|
||||
</el-form-item>
|
||||