mirror of
https://github.com/jumpserver/lina.git
synced 2026-01-14 03:46:26 +00:00
Compare commits
44 Commits
v4.9.0
...
v4.10.0-lt
| Author | SHA1 | Date | |
|---|---|---|---|
|
42d226ec91 | ||
|
|
69f5eff19c | ||
|
0c5e84d1e3 | ||
|
60634349ae | ||
|
|
14ce39116b | ||
|
edb6be1d51 | ||
|
8e2f79aea1 | ||
|
|
d6c4a9d2f6 | ||
|
|
d16a9f9d46 | ||
|
|
b817c7ac27 | ||
|
7a48949461 | ||
|
|
f1bad07c67 | ||
|
|
d2469f6313 | ||
|
|
f0ff8f7370 | ||
|
|
37cf3d6b1a | ||
|
|
8bda898480 | ||
|
|
4ca26c9104 | ||
|
|
265b95fc9e | ||
|
|
44619725c6 | ||
|
|
41ec908f37 | ||
|
|
b5ea5b21fd | ||
|
|
85763fa409 | ||
|
803c3cad7a | ||
|
|
2323008079 | ||
|
|
dcdcc5c557 | ||
|
|
a20d20dfce | ||
|
|
8a72826050 | ||
|
|
5c4aa457fa | ||
|
|
989b4d5695 | ||
|
|
0e89b8ac3f | ||
|
|
efebf795e4 | ||
|
|
fbdcd541e1 | ||
|
|
8e7d8370a1 | ||
|
|
73c593cc4e | ||
|
|
5b627350d8 | ||
|
|
d634c76040 | ||
|
|
55f7855cf8 | ||
|
|
f157ab9453 | ||
|
|
49c80cd76b | ||
|
|
cad15986bf | ||
|
|
9a0158da3a | ||
|
|
deea38c704 | ||
|
|
bc4fb455a3 | ||
|
|
411317194c |
@@ -1,4 +1,4 @@
|
||||
FROM jumpserver/lina-base:20250408_074136 AS stage-build
|
||||
FROM jumpserver/lina-base:20250508_085854 AS stage-build
|
||||
|
||||
ARG VERSION
|
||||
ENV VERSION=$VERSION
|
||||
|
||||
293
package.json
293
package.json
@@ -1,148 +1,149 @@
|
||||
{
|
||||
"name": "lina",
|
||||
"version": "v4.0.0",
|
||||
"description": "JumpServer Web UI",
|
||||
"author": "JumpServer Team <support@lxware.hk>",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"scripts": {
|
||||
"dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
|
||||
"serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
|
||||
"build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
|
||||
"build:prod": "vue-cli-service build",
|
||||
"build:stage": "vue-cli-service build --mode staging",
|
||||
"preview": "node build/index.js --preview",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"fix": "eslint --ext .js,.vue --fix src",
|
||||
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||
"test:ci": "npm run lint && npm run test:unit",
|
||||
"svgo": "svgo -f src/icons/svg --config=src/icas/svgo.yml",
|
||||
"vue-i18n-extract": "vue-i18n-extract",
|
||||
"vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'",
|
||||
"vue-i18n-report-json": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -o /tmp/abc.json",
|
||||
"vue-i18n-report-add-miss": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -a",
|
||||
"diff-i18n": "python ./src/i18n/langs/i18n-util.py diff en ja zh_Hant",
|
||||
"apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja zh_Hant"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.13.12",
|
||||
"@fontsource/open-sans": "^5.0.24",
|
||||
"@traptitech/markdown-it-katex": "^3.6.0",
|
||||
"@ztree/ztree_v3": "3.5.44",
|
||||
"axios": "0.28.0",
|
||||
"axios-retry": "^3.1.9",
|
||||
"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.1.6",
|
||||
"echarts": "4.7.0",
|
||||
"element-ui": "2.15.14",
|
||||
"eslint-plugin-html": "^6.0.0",
|
||||
"highlight.js": "^11.9.0",
|
||||
"install": "^0.13.0",
|
||||
"jquery": "^3.6.1",
|
||||
"js-cookie": "2.2.0",
|
||||
"jsencrypt": "^3.2.1",
|
||||
"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",
|
||||
"moment-parseformat": "^4.0.0",
|
||||
"normalize.css": "7.0.0",
|
||||
"npm": "^7.8.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "3.3.0",
|
||||
"v-sanitize": "^0.0.13",
|
||||
"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",
|
||||
"zxcvbn": "^4.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.18.6",
|
||||
"@babel/register": "7.0.0",
|
||||
"@vue/cli-plugin-babel": "3.6.0",
|
||||
"@vue/cli-plugin-eslint": "^3.9.1",
|
||||
"@vue/cli-plugin-unit-jest": "3.6.3",
|
||||
"@vue/cli-service": "3.6.0",
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"autoprefixer": "^9.5.1",
|
||||
"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-plugin-vue": "5.2.2",
|
||||
"eslint-plugin-vue-i18n": "^0.3.0",
|
||||
"github-markdown-css": "^5.1.0",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"husky": "^4.2.3",
|
||||
"less-loader": "^5.0.0",
|
||||
"lint-staged": "^10.1.2",
|
||||
"mockjs": "1.0.1-beta3",
|
||||
"runjs": "^4.3.2",
|
||||
"sass": "~1.32.6",
|
||||
"sass-loader": "^7.1.0",
|
||||
"script-ext-html-webpack-plugin": "2.1.3",
|
||||
"script-loader": "0.7.2",
|
||||
"serve-static": "^1.16.0",
|
||||
"strip-ansi": "^7.1.0",
|
||||
"svg-sprite-loader": "4.1.3",
|
||||
"svgo": "1.2.2",
|
||||
"vue-i18n-extract": "^1.1.1",
|
||||
"vue-template-compiler": "2.6.10"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 4 versions",
|
||||
"ie 11"
|
||||
],
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"src/**/*.{js,vue}": [
|
||||
"eslint --fix"
|
||||
]
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||
"name": "lina",
|
||||
"version": "v4.0.0",
|
||||
"description": "JumpServer Web UI",
|
||||
"author": "JumpServer Team <support@lxware.hk>",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"scripts": {
|
||||
"dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
|
||||
"serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
|
||||
"build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
|
||||
"build:prod": "vue-cli-service build",
|
||||
"build:stage": "vue-cli-service build --mode staging",
|
||||
"preview": "node build/index.js --preview",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"fix": "eslint --ext .js,.vue --fix src",
|
||||
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||
"test:ci": "npm run lint && npm run test:unit",
|
||||
"svgo": "svgo -f src/icons/svg --config=src/icas/svgo.yml",
|
||||
"vue-i18n-extract": "vue-i18n-extract",
|
||||
"vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'",
|
||||
"vue-i18n-report-json": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -o /tmp/abc.json",
|
||||
"vue-i18n-report-add-miss": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -a",
|
||||
"diff-i18n": "python ./src/i18n/langs/i18n-util.py diff en ja zh_Hant",
|
||||
"apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja zh_Hant"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.13.12",
|
||||
"@fontsource/open-sans": "^5.0.24",
|
||||
"@traptitech/markdown-it-katex": "^3.6.0",
|
||||
"@ztree/ztree_v3": "3.5.44",
|
||||
"axios": "0.28.0",
|
||||
"axios-retry": "^3.1.9",
|
||||
"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.1.6",
|
||||
"echarts": "4.7.0",
|
||||
"element-ui": "2.15.14",
|
||||
"eslint-plugin-html": "^6.0.0",
|
||||
"highlight.js": "^11.9.0",
|
||||
"install": "^0.13.0",
|
||||
"jquery": "^3.6.1",
|
||||
"js-cookie": "2.2.0",
|
||||
"jsencrypt": "^3.2.1",
|
||||
"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",
|
||||
"moment-parseformat": "^4.0.0",
|
||||
"normalize.css": "7.0.0",
|
||||
"npm": "^7.8.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "3.3.0",
|
||||
"sortablejs": "^1.15.6",
|
||||
"v-sanitize": "^0.0.13",
|
||||
"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",
|
||||
"zxcvbn": "^4.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.18.6",
|
||||
"@babel/register": "7.0.0",
|
||||
"@vue/cli-plugin-babel": "3.6.0",
|
||||
"@vue/cli-plugin-eslint": "^3.9.1",
|
||||
"@vue/cli-plugin-unit-jest": "3.6.3",
|
||||
"@vue/cli-service": "3.6.0",
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"autoprefixer": "^9.5.1",
|
||||
"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-plugin-vue": "5.2.2",
|
||||
"eslint-plugin-vue-i18n": "^0.3.0",
|
||||
"github-markdown-css": "^5.1.0",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"husky": "^4.2.3",
|
||||
"less-loader": "^5.0.0",
|
||||
"lint-staged": "^10.1.2",
|
||||
"mockjs": "1.0.1-beta3",
|
||||
"runjs": "^4.3.2",
|
||||
"sass": "~1.32.6",
|
||||
"sass-loader": "^7.1.0",
|
||||
"script-ext-html-webpack-plugin": "2.1.3",
|
||||
"script-loader": "0.7.2",
|
||||
"serve-static": "^1.16.0",
|
||||
"strip-ansi": "^7.1.0",
|
||||
"svg-sprite-loader": "4.1.3",
|
||||
"svgo": "1.2.2",
|
||||
"vue-i18n-extract": "^1.1.1",
|
||||
"vue-template-compiler": "2.6.10"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 4 versions",
|
||||
"ie 11"
|
||||
],
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"src/**/*.{js,vue}": [
|
||||
"eslint --fix"
|
||||
]
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||
}
|
||||
|
||||
43
src/App.vue
43
src/App.vue
@@ -44,17 +44,48 @@ export default {
|
||||
}
|
||||
},
|
||||
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.currentUser.username}(${this.currentUser.name})`,
|
||||
width: 200,
|
||||
height: 200,
|
||||
rotate: 45,
|
||||
content: this.getWaterMarkContent(),
|
||||
width: this.publicSettings?.SECURITY_WATERMARK_WIDTH,
|
||||
height: this.publicSettings?.SECURITY_WATERMARK_HEIGHT,
|
||||
rotate: this.publicSettings?.SECURITY_WATERMARK_ROTATE,
|
||||
fontWeight: 'normal',
|
||||
fontColor: 'rgba(128, 128, 128, 0.2)'
|
||||
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()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,9 +16,9 @@ export function getSystemUserList(data) {
|
||||
})
|
||||
}
|
||||
|
||||
export function getDomainList(data) {
|
||||
export function getZoneList(data) {
|
||||
return request({
|
||||
url: '/api/v1/assets/domains/',
|
||||
url: '/api/v1/assets/zones/',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
|
||||
@@ -8,11 +8,20 @@ export function login(data) {
|
||||
})
|
||||
}
|
||||
|
||||
export function getProfile(token) {
|
||||
return request({
|
||||
export async function getProfile(token) {
|
||||
let profile = await 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) {
|
||||
@@ -22,6 +31,7 @@ export function getUserList(data) {
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
export function getUserGroupList(params) {
|
||||
return request({
|
||||
url: '/api/v1/users/groups/',
|
||||
@@ -29,6 +39,7 @@ export function getUserGroupList(params) {
|
||||
params: params
|
||||
})
|
||||
}
|
||||
|
||||
export function getUserGroupDetail(id) {
|
||||
return request({
|
||||
url: `/api/v1/users/groups/${id}/`,
|
||||
@@ -50,6 +61,7 @@ export function editUserGroup(data) {
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function updateUserGroup(id, data) {
|
||||
return request({
|
||||
url: '/api/v1/users/groups/' + id + '/',
|
||||
|
||||
BIN
src/assets/img/auth/cas_logo.png
Normal file
BIN
src/assets/img/auth/cas_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
src/assets/img/auth/dingtalk_logo.webp
Normal file
BIN
src/assets/img/auth/dingtalk_logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
src/assets/img/auth/feishu_logo.png
Normal file
BIN
src/assets/img/auth/feishu_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/img/auth/lark_logo.png
Normal file
BIN
src/assets/img/auth/lark_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
src/assets/img/auth/ldap_logo.png
Normal file
BIN
src/assets/img/auth/ldap_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/img/auth/oauth2_logo.png
Normal file
BIN
src/assets/img/auth/oauth2_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 584 KiB |
BIN
src/assets/img/auth/oidc_logo.png
Normal file
BIN
src/assets/img/auth/oidc_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
src/assets/img/auth/passkey_logo.png
Normal file
BIN
src/assets/img/auth/passkey_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/img/auth/radius_logo.png
Normal file
BIN
src/assets/img/auth/radius_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
src/assets/img/auth/saml2_logo.png
Normal file
BIN
src/assets/img/auth/saml2_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/img/auth/slack_logo.png
Normal file
BIN
src/assets/img/auth/slack_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
src/assets/img/auth/wecom_logo.png
Normal file
BIN
src/assets/img/auth/wecom_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
@@ -16,7 +16,7 @@ export const accountFieldsMeta = (vm) => {
|
||||
return {
|
||||
assets: {
|
||||
component: Select2,
|
||||
label: vm.$t('Assets'),
|
||||
label: vm.$t('Asset'),
|
||||
rules: [Required],
|
||||
el: {
|
||||
multiple: true,
|
||||
|
||||
@@ -63,7 +63,7 @@ export default {
|
||||
encryptedFields: ['secret'],
|
||||
fields: [
|
||||
[this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
|
||||
[this.$t('Assets'), ['assets']],
|
||||
[this.$t('Asset'), ['assets']],
|
||||
[this.$t('Secret'), [
|
||||
'secret_type', 'password', 'ssh_key', 'token',
|
||||
'access_key', 'passphrase', 'api_key',
|
||||
|
||||
@@ -7,11 +7,23 @@ export const connectivityMeta = {
|
||||
faChoices: {
|
||||
'-': '',
|
||||
ok: 'fa-check-circle',
|
||||
err: 'fa-times-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'
|
||||
},
|
||||
classChoices: {
|
||||
ok: 'text-primary',
|
||||
err: 'text-danger'
|
||||
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'
|
||||
},
|
||||
getText({ cellValue }) {
|
||||
if (cellValue?.value === '-' || cellValue?.value === 'unknown') {
|
||||
|
||||
@@ -114,6 +114,11 @@ 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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
58
src/components/Apps/LeakPasswords/LeakPasswordList.vue
Normal file
58
src/components/Apps/LeakPasswords/LeakPasswordList.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<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: false,
|
||||
hasImport: false,
|
||||
hasCreate: true,
|
||||
hasSearch: true,
|
||||
hasRefresh: true,
|
||||
hasBulkDelete: false,
|
||||
hasBulkUpdate: false,
|
||||
hasLeftActions: true,
|
||||
hasRightActions: true,
|
||||
canCreate: this.$hasPerm('settings.change_security')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<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>
|
||||
76
src/components/Apps/LeakPasswords/index.vue
Normal file
76
src/components/Apps/LeakPasswords/index.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<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>
|
||||
@@ -49,24 +49,14 @@
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" style="margin: 0 auto;">
|
||||
<el-col :md="24" :sm="24" style="display: flex; align-items: center; margin-bottom: 20px;">
|
||||
<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-input
|
||||
v-if="subTypeSelected !== 'face'"
|
||||
v-model="secretValue"
|
||||
:placeholder="inputPlaceholder"
|
||||
:show-password="showPassword"
|
||||
@keyup.enter.native="handleConfirm"
|
||||
/>
|
||||
|
||||
<iframe
|
||||
v-if="isFaceCaptureVisible && subTypeSelected ==='face' && faceCaptureUrl"
|
||||
:src="faceCaptureUrl"
|
||||
allow="camera"
|
||||
sandbox="allow-scripts allow-same-origin"
|
||||
style="width: 100%; height: 800px;border: none;"
|
||||
/>
|
||||
|
||||
<span v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'" style="margin: -1px 0 0 20px;">
|
||||
<el-button
|
||||
:disabled="smsBtnDisabled"
|
||||
@@ -80,10 +70,26 @@
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" style="margin: 10px auto;">
|
||||
<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: 800px;border: none;"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" style="margin: 20px auto 10px;">
|
||||
<el-col :md="24" :sm="24">
|
||||
<el-button
|
||||
v-if="subTypeSelected!=='face'"
|
||||
v-if="!noCodeMFA.includes(subTypeSelected)"
|
||||
class="confirm-btn"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@@ -92,7 +98,8 @@
|
||||
{{ this.$t('Confirm') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="subTypeSelected==='face'&&!isFaceCaptureVisible"
|
||||
v-if="subTypeSelected === 'face'"
|
||||
:disabled="isFaceCaptureVisible"
|
||||
class="confirm-btn"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@@ -100,6 +107,16 @@
|
||||
>
|
||||
{{ 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>
|
||||
@@ -141,7 +158,11 @@ export default {
|
||||
processing: false,
|
||||
isFaceCaptureVisible: false,
|
||||
faceToken: null,
|
||||
faceCaptureUrl: null
|
||||
faceCaptureUrl: null,
|
||||
noCodeMFA: ['face', 'passkey'],
|
||||
sendCodeMFA: ['email', 'sms', 'otp'],
|
||||
passkeyVisible: false,
|
||||
passkeyUrl: '/api/v1/authentication/passkeys/login/?mfa=1'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -224,6 +245,26 @@ export default {
|
||||
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 => {
|
||||
@@ -247,6 +288,13 @@ export default {
|
||||
handleFaceCapture() {
|
||||
this.startFaceCapture()
|
||||
},
|
||||
onSuccess() {
|
||||
this.secretValue = ''
|
||||
this.visible = false
|
||||
this.$nextTick(() => {
|
||||
this.callback()
|
||||
})
|
||||
},
|
||||
handleConfirm() {
|
||||
if (this.confirmTypeRequired === 'relogin') {
|
||||
return this.logout()
|
||||
@@ -262,11 +310,7 @@ export default {
|
||||
}
|
||||
|
||||
this.$axios.post(`/api/v1/authentication/confirm/`, data).then(() => {
|
||||
this.secretValue = ''
|
||||
this.visible = false
|
||||
this.$nextTick(() => {
|
||||
this.callback()
|
||||
})
|
||||
this.onSuccess()
|
||||
}).catch((err) => {
|
||||
this.$message.error(err.message || this.$tc('ConfirmFailed'))
|
||||
this.faceCaptureUrl = null
|
||||
|
||||
@@ -129,8 +129,18 @@ 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')) {
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
@click="handleClick(action)"
|
||||
@command="handleDropdownCallback"
|
||||
>
|
||||
<span v-if="action.split">
|
||||
<span v-if="action.split" :style="{ cursor: action.disabled ? 'not-allowed' : 'pointer' }">
|
||||
{{ action.title }}
|
||||
</span>
|
||||
<el-button
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
slot="prepend"
|
||||
:placeholder="$tc('Select')"
|
||||
:value="rawValue.code"
|
||||
style="width: 105px;"
|
||||
@change="onChange"
|
||||
>
|
||||
<el-option
|
||||
@@ -69,7 +68,11 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.el-select {
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.country-name {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
|
||||
@@ -78,16 +78,18 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filterTags: this.value,
|
||||
focus: false,
|
||||
filterValue: '',
|
||||
isCheckShowPassword: this.replaceShowPassword,
|
||||
component: this.autocomplete ? 'el-autocomplete' : 'el-input'
|
||||
filterTags: this.value,
|
||||
isCheckShowPassword: this.replaceShowPassword
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iPlaceholder() {
|
||||
return `${this.placeholder} (${this.$t('EnterToContinue')})`
|
||||
},
|
||||
component() {
|
||||
return this.autocomplete !== null ? 'el-autocomplete' : 'el-input'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -98,7 +100,7 @@ export default {
|
||||
methods: {
|
||||
handleTagClose(tag) {
|
||||
this.filterTags.splice(this.filterTags.indexOf(tag), 1)
|
||||
this.$emit('change', this.filterTags)
|
||||
this.handleConfirm()
|
||||
},
|
||||
handleSelect(item) {
|
||||
this.filterValue = item.value
|
||||
@@ -113,8 +115,9 @@ export default {
|
||||
if (!this.filterTags.includes(this.filterValue)) {
|
||||
this.filterTags.push(this.filterValue)
|
||||
this.filterValue = ''
|
||||
this.$emit('change', this.filterTags)
|
||||
}
|
||||
this.$emit('change', this.filterTags)
|
||||
this.$emit('input', this.filterTags)
|
||||
this.$refs.SearchInput.focus()
|
||||
},
|
||||
handleTagClick(v, k) {
|
||||
@@ -189,7 +192,7 @@ export default {
|
||||
}
|
||||
|
||||
.filter-field ::v-deep .el-input__inner {
|
||||
height: 28px !important;
|
||||
height: 27px !important;
|
||||
}
|
||||
|
||||
.show-password {
|
||||
|
||||
@@ -170,7 +170,7 @@ export default {
|
||||
const [start, end] = val.split('~')
|
||||
const startVal = this.countIndex(start)
|
||||
const endVal = this.countIndex(end)
|
||||
for (let i = startVal; i < (endVal === 0 ? 48 : endVal); i++) {
|
||||
for (let i = startVal; i < (endVal === 0 ? 24 : endVal); i++) {
|
||||
const curWeek = this.weekTimeData[idNum]
|
||||
const curChild = curWeek.child[i]
|
||||
if (curChild) {
|
||||
@@ -181,11 +181,8 @@ export default {
|
||||
// 计算索引
|
||||
countIndex(val) {
|
||||
const one = val.substr(0, 2)
|
||||
const a1 = one.startsWith('0') ? one.substr(1, 2) : one
|
||||
var reg = RegExp(/30/)
|
||||
const a2 = val.match(reg) ? 1 : 0
|
||||
const curIndex = (a1 * 2) + a2
|
||||
return curIndex
|
||||
const index = one.startsWith('0') ? one.substr(1, 2) : one
|
||||
return Number(index)
|
||||
},
|
||||
formatDate(date, fmt) {
|
||||
const o = {
|
||||
|
||||
@@ -21,21 +21,11 @@
|
||||
</template>
|
||||
|
||||
<script type="text/jsx">
|
||||
import Sortable from 'sortablejs'
|
||||
import DataTable from '@/components/Table/DataTable/index.vue'
|
||||
import {
|
||||
ActionsFormatter,
|
||||
ArrayFormatter,
|
||||
ChoicesFormatter,
|
||||
CopyableFormatter,
|
||||
DateFormatter,
|
||||
DetailFormatter,
|
||||
DisplayFormatter,
|
||||
ObjectRelatedFormatter
|
||||
} from '@/components/Table/TableFormatters'
|
||||
import i18n from '@/i18n/i18n'
|
||||
import { newURL, ObjectLocalStorage, replaceAllUUID, toSentenceCase } from '@/utils/common'
|
||||
import { newURL, ObjectLocalStorage, replaceAllUUID } from '@/utils/common'
|
||||
import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
|
||||
import LabelsFormatter from '@/components/Table/TableFormatters/LabelsFormatter.vue'
|
||||
import { TableColumnsGenerator } from './utils'
|
||||
|
||||
export default {
|
||||
name: 'AutoDataTable',
|
||||
@@ -57,9 +47,9 @@ export default {
|
||||
return {
|
||||
loading: true,
|
||||
method: 'get',
|
||||
autoConfig: {},
|
||||
iConfig: {},
|
||||
meta: {},
|
||||
iConfig: {},
|
||||
autoConfig: {},
|
||||
cleanedColumnsShow: {},
|
||||
totalColumns: [],
|
||||
popoverColumns: {
|
||||
@@ -69,18 +59,8 @@ export default {
|
||||
defaultCols: []
|
||||
},
|
||||
isDeactivated: false,
|
||||
objTableColumns: new ObjectLocalStorage('tableColumns')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dynamicActionWidth() {
|
||||
if (this.$i18n.locale === 'en') {
|
||||
return '120px'
|
||||
}
|
||||
if (this.$i18n.locale === 'pt-br') {
|
||||
return '160px'
|
||||
}
|
||||
return '100px'
|
||||
tableColumnsStorage: this.getTableColumnsStorage(),
|
||||
sortable: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -102,8 +82,9 @@ export default {
|
||||
}, 200)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.optionUrlMetaAndGenCols()
|
||||
async created() {
|
||||
await this.optionUrlMetaAndGenCols()
|
||||
this.loading = false
|
||||
},
|
||||
deactivated() {
|
||||
this.isDeactivated = true
|
||||
@@ -112,323 +93,101 @@ export default {
|
||||
this.isDeactivated = false
|
||||
},
|
||||
methods: {
|
||||
setColumnDraggable() {
|
||||
const el = this.$el.querySelector('.el-table__header-wrapper thead tr')
|
||||
if (!el) {
|
||||
setTimeout(() => this.setColumnDraggable(), 500)
|
||||
return
|
||||
}
|
||||
if (this.sortable) {
|
||||
this.sortable.destroy()
|
||||
}
|
||||
|
||||
this.sortable = Sortable.create(el, {
|
||||
animation: 150,
|
||||
onEnd: (evt) => {
|
||||
let { oldIndex, newIndex } = evt
|
||||
if (oldIndex === newIndex) {
|
||||
return
|
||||
}
|
||||
// 检测表格是否有选择列
|
||||
const hasSelectionColumn = this.$el.querySelector('.el-table-column--selection') !== null
|
||||
if (hasSelectionColumn) {
|
||||
// 如果有选择列，调整索引
|
||||
if (oldIndex > 0) oldIndex -= 1
|
||||
if (newIndex > 0) newIndex -= 1
|
||||
}
|
||||
|
||||
let columnNames = [...this.cleanedColumnsShow.show]
|
||||
if (columnNames.includes('actions')) {
|
||||
columnNames = columnNames.filter(item => item !== 'actions')
|
||||
columnNames.push('actions')
|
||||
}
|
||||
// 边界
|
||||
if (oldIndex >= 0 && oldIndex < columnNames.length &&
|
||||
newIndex >= 0 && newIndex < columnNames.length) {
|
||||
const movedItem = columnNames.splice(oldIndex, 1)[0]
|
||||
columnNames.splice(newIndex, 0, movedItem)
|
||||
|
||||
this.$log.debug('Column moved: ', movedItem, oldIndex, ' => ', newIndex)
|
||||
// 保存更新的列顺序
|
||||
this.tableColumnsStorage.set(columnNames)
|
||||
|
||||
// 更新内部状态
|
||||
this.cleanedColumnsShow.show = columnNames
|
||||
this.popoverColumns.currentCols = columnNames
|
||||
|
||||
// 重新应用列顺序
|
||||
this.filterShowColumns()
|
||||
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
// 在DOM完全更新后重新初始化拖拽
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => this.setColumnDraggable(), 200)
|
||||
})
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
generateTotalColumns() {
|
||||
const generator = new TableColumnsGenerator(this.config, this.meta, this)
|
||||
this.totalColumns = generator.generateColumns()
|
||||
this.config.columns = this.totalColumns
|
||||
this.iConfig = _.cloneDeep(this.config)
|
||||
},
|
||||
async optionUrlMetaAndGenCols() {
|
||||
if (this.config.url === '') {
|
||||
return
|
||||
}
|
||||
const url = (this.config.url.indexOf('?') === -1)
|
||||
? `${this.config.url}?draw=1&display=1`
|
||||
: `${this.config.url}&draw=1&display=1`
|
||||
this.$store.dispatch('common/getUrlMeta', { url: url }).then(data => {
|
||||
? `${this.config.url}?display=1`
|
||||
: `${this.config.url}&display=1`
|
||||
|
||||
/**
|
||||
* 原有代码无法正确的同步 storage 的原因是 currentOrder 总是在 totalColumns 之前进行的
|
||||
* 这导致在首次加载时，currentOrder总是为空数组，因为此时cleanedColumnsShow.show还未初始化
|
||||
*/
|
||||
try {
|
||||
const data = await this.$store.dispatch('common/getUrlMeta', { url: url })
|
||||
const method = this.method.toUpperCase()
|
||||
this.meta = data.actions && data.actions[method] ? data.actions[method] : {}
|
||||
|
||||
this.generateTotalColumns()
|
||||
}).then(() => {
|
||||
// 根据当前列重新生成最终渲染表格
|
||||
this.cleanColumnsShow()
|
||||
this.filterShowColumns()
|
||||
}).then(() => {
|
||||
// 生成给子组件使用的TotalColList
|
||||
this.generatePopoverColumns()
|
||||
}).catch((error) => {
|
||||
this.setColumnDraggable()
|
||||
} catch (error) {
|
||||
this.$log.error('Error occur: ', error)
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
generateColumnByName(name, col) {
|
||||
switch (name) {
|
||||
case 'id':
|
||||
if (!col.width) {
|
||||
col.width = '299px'
|
||||
}
|
||||
if (!col.formatter) {
|
||||
col.formatter = CopyableFormatter
|
||||
col.iconPosition = 'left'
|
||||
}
|
||||
break
|
||||
case 'name':
|
||||
col.formatter = DetailFormatter
|
||||
col.sortable = 'custom'
|
||||
col.showOverflowTooltip = true
|
||||
col.minWidth = '150px'
|
||||
break
|
||||
case 'actions':
|
||||
col = {
|
||||
prop: 'actions',
|
||||
label: i18n.t('Actions'),
|
||||
align: 'center',
|
||||
width: this.dynamicActionWidth,
|
||||
formatter: ActionsFormatter,
|
||||
fixed: 'right',
|
||||
formatterArgs: {}
|
||||
}
|
||||
break
|
||||
case 'is_valid':
|
||||
col.label = i18n.t('Valid')
|
||||
col.formatter = ChoicesFormatter
|
||||
col.formatterArgs = {
|
||||
textChoices: {
|
||||
true: i18n.t('Yes'),
|
||||
false: i18n.t('No')
|
||||
}
|
||||
}
|
||||
col.width = '80px'
|
||||
break
|
||||
case 'is_active':
|
||||
col.formatter = ChoicesFormatter
|
||||
col.formatterArgs = {
|
||||
textChoices: {
|
||||
true: i18n.t('Active'),
|
||||
false: i18n.t('Inactive')
|
||||
}
|
||||
}
|
||||
col.width = '100px'
|
||||
break
|
||||
case 'datetime':
|
||||
case 'date_start':
|
||||
col.formatter = DateFormatter
|
||||
break
|
||||
case 'labels':
|
||||
col.formatter = LabelsFormatter
|
||||
col.width = '200px'
|
||||
break
|
||||
case 'comment':
|
||||
col.showOverflowTooltip = true
|
||||
}
|
||||
return col
|
||||
},
|
||||
generateColumnByType(type, col, meta) {
|
||||
switch (type) {
|
||||
case 'choice':
|
||||
col.sortable = 'custom'
|
||||
col.formatter = DisplayFormatter
|
||||
break
|
||||
case 'labeled_choice':
|
||||
col.sortable = 'custom'
|
||||
col.formatter = ChoicesFormatter
|
||||
break
|
||||
case 'boolean':
|
||||
col.formatter = ChoicesFormatter
|
||||
// col.width = '80px'
|
||||
break
|
||||
case 'datetime':
|
||||
col.formatter = DateFormatter
|
||||
col.width = '155px'
|
||||
break
|
||||
case 'object_related_field':
|
||||
col.formatter = ObjectRelatedFormatter
|
||||
break
|
||||
case 'm2m_related_field':
|
||||
col.formatter = ObjectRelatedFormatter
|
||||
break
|
||||
case 'list':
|
||||
col.formatter = ArrayFormatter
|
||||
break
|
||||
case 'json':
|
||||
case 'field':
|
||||
if (meta.child && meta.child.type === 'nested object') {
|
||||
col.formatter = ObjectRelatedFormatter
|
||||
}
|
||||
break
|
||||
}
|
||||
// this.$log.debug('Field: ', type, col.prop, col)
|
||||
return col
|
||||
},
|
||||
addHelpTipIfNeed(col) {
|
||||
const helpTip = col.helpTip
|
||||
if (!helpTip) {
|
||||
return col
|
||||
}
|
||||
col.renderHeader = (h, { column, $index }) => {
|
||||
const binds = {
|
||||
props: {
|
||||
placement: 'bottom',
|
||||
effect: 'dark',
|
||||
openDelay: 500,
|
||||
popperClass: 'help-tips'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<span>{column.label}
|
||||
<el-tooltip {...binds}>
|
||||
<div slot='content' v-sanitize={helpTip}/>
|
||||
<i class='fa fa-question-circle-o help-tip-icon' style='padding-left: 2px'/>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
return col
|
||||
},
|
||||
addFilterIfNeed(col) {
|
||||
if (col.prop) {
|
||||
const column = this.meta[col.prop] || {}
|
||||
if (!column.filter) {
|
||||
return col
|
||||
}
|
||||
if (column.type === 'boolean') {
|
||||
col.filters = [
|
||||
{ text: i18n.t('Yes'), value: true },
|
||||
{ text: i18n.t('No'), value: false }
|
||||
]
|
||||
col.sortable = false
|
||||
col['column-key'] = col.prop
|
||||
}
|
||||
if (column.type === 'choice' && column.choices) {
|
||||
col.filters = column.choices.map(item => {
|
||||
if (typeof (item.value) === 'boolean') {
|
||||
if (item.value) {
|
||||
return { text: item['label'], value: 'True' }
|
||||
} else {
|
||||
return { text: item['label'], value: 'False' }
|
||||
}
|
||||
}
|
||||
return { text: item['label'], value: item.value }
|
||||
})
|
||||
col.sortable = false
|
||||
col['column-key'] = col.prop
|
||||
}
|
||||
}
|
||||
return col
|
||||
},
|
||||
addOrderingIfNeed(col) {
|
||||
if (col.prop) {
|
||||
const column = this.meta[col.prop] || {}
|
||||
if (column.order) {
|
||||
col.sortable = 'custom'
|
||||
col['column-key'] = col.prop
|
||||
}
|
||||
}
|
||||
return col
|
||||
},
|
||||
setDefaultFormatterIfNeed(col) {
|
||||
if (!col.formatter) {
|
||||
col.formatter = (row, column, cellValue) => {
|
||||
let value = cellValue
|
||||
let padding = '0'
|
||||
const excludes = [undefined, null, '']
|
||||
if (excludes.indexOf(value) !== -1) {
|
||||
padding = '6px'
|
||||
value = '-'
|
||||
}
|
||||
return <span style={{ marginLeft: padding }}>{value}</span>
|
||||
}
|
||||
}
|
||||
return col
|
||||
},
|
||||
setDefaultWidthIfNeed(col) {
|
||||
const lang = this.$i18n.locale
|
||||
let factor = 10
|
||||
if (lang === 'zh') {
|
||||
factor = 20
|
||||
}
|
||||
let [sortable, filters] = [0, 0]
|
||||
if (col && col?.sortable === 'custom') {
|
||||
sortable = 10
|
||||
}
|
||||
if (col && col?.filters?.length > 0) {
|
||||
filters = 12
|
||||
}
|
||||
if (col && !col.width && col.label && !col.minWidth) {
|
||||
col.minWidth = `${col.label.length * factor + sortable + filters + 30}px`
|
||||
}
|
||||
return col
|
||||
},
|
||||
generateColumn(name) {
|
||||
const colMeta = this.meta[name] || {}
|
||||
const customMeta = this.config.columnsMeta ? this.config.columnsMeta[name] : {}
|
||||
let col = { prop: name, label: colMeta.label, showOverflowTooltip: true }
|
||||
|
||||
col = this.generateColumnByType(colMeta.type, col, colMeta)
|
||||
col = this.generateColumnByName(name, col)
|
||||
col = this.setDefaultFormatterIfNeed(col)
|
||||
col = Object.assign(col, customMeta)
|
||||
col = this.addHelpTipIfNeed(col)
|
||||
col = this.addFilterIfNeed(col)
|
||||
col = this.addOrderingIfNeed(col)
|
||||
col = this.updateLabelIfNeed(col)
|
||||
col = this.setDefaultWidthIfNeed(col)
|
||||
return col
|
||||
},
|
||||
updateLabelIfNeed(col) {
|
||||
if (!col.label) {
|
||||
return col
|
||||
}
|
||||
col.label = col.label
|
||||
.replace(' Amount', '')
|
||||
.replace(' amount', '')
|
||||
.replace('数量', '')
|
||||
if (col.label.startsWith('Is ')) {
|
||||
col.label = col.label.replace('Is ', '')
|
||||
}
|
||||
col.label = toSentenceCase(col.label)
|
||||
return col
|
||||
},
|
||||
generateTotalColumns() {
|
||||
const config = _.cloneDeep(this.config)
|
||||
let columns = []
|
||||
const allColumnNames = Object.entries(this.meta)
|
||||
.filter(([name, meta]) => !meta['write_only'])
|
||||
.map(([name, meta]) => name)
|
||||
.concat(config.columnsExtra || [])
|
||||
|
||||
let configColumns = config.columns || allColumnNames
|
||||
const columnsExclude = config.columnsExclude || []
|
||||
const columnsAdd = config.columnsAdd || []
|
||||
configColumns = configColumns.concat(columnsAdd)
|
||||
configColumns = configColumns.filter(item => !columnsExclude.includes(item))
|
||||
|
||||
// 解决后端 API 返回字段中包含 actions 的问题;
|
||||
const hasColumnActions = configColumns.findIndex(item => item?.prop === 'actions') !== -1
|
||||
if (!hasColumnActions) {
|
||||
configColumns = [...configColumns.filter(i => i !== 'actions'), 'actions']
|
||||
}
|
||||
|
||||
for (let col of configColumns) {
|
||||
if (typeof col === 'object') {
|
||||
columns.push(col)
|
||||
} else if (typeof col === 'string') {
|
||||
col = this.generateColumn(col)
|
||||
columns.push(col)
|
||||
}
|
||||
}
|
||||
|
||||
columns = columns.filter(item => {
|
||||
if (item?.showFullContent) {
|
||||
item.className = 'show-full-content'
|
||||
}
|
||||
let has = item.has
|
||||
if (has === undefined) {
|
||||
has = true
|
||||
} else if (typeof has === 'function') {
|
||||
has = has()
|
||||
}
|
||||
return has
|
||||
})
|
||||
|
||||
columns = this.orderingColumns(columns)
|
||||
// 第一次初始化时记录 totalColumns
|
||||
this.totalColumns = columns
|
||||
config.columns = columns
|
||||
this.iConfig = config
|
||||
},
|
||||
orderingColumns(columns) {
|
||||
const cols = _.cloneDeep(this.config.columns)
|
||||
const defaults = _.get(this.config, 'columnsShow.default')
|
||||
const ordering = (cols || defaults || []).map(item => {
|
||||
let prop = item
|
||||
if (typeof item === 'object') {
|
||||
prop = item.prop
|
||||
}
|
||||
return prop
|
||||
})
|
||||
return _.sortBy(columns, (item) => {
|
||||
if (item.prop === 'actions') {
|
||||
return 1000
|
||||
}
|
||||
const i = ordering.indexOf(item.prop)
|
||||
return i === -1 ? 999 : i
|
||||
})
|
||||
getTableColumnsStorage() {
|
||||
let tableName = this.config.name || this.$route.name + '_' + newURL(this.config.url).pathname
|
||||
tableName = replaceAllUUID(tableName)
|
||||
return new ObjectLocalStorage('tableColumns', tableName)
|
||||
},
|
||||
// 生成给子组件使用的TotalColList
|
||||
cleanColumnsShow() {
|
||||
@@ -438,16 +197,12 @@ export default {
|
||||
if (defaultColumnsNames.length === 0) {
|
||||
defaultColumnsNames = totalColumnsNames
|
||||
}
|
||||
// Clean it
|
||||
defaultColumnsNames = totalColumnsNames.filter(n => defaultColumnsNames.indexOf(n) > -1)
|
||||
|
||||
// 最小列
|
||||
const minColumnsNames = _.get(this.iConfig, 'columnsShow.min', ['actions', 'id'])
|
||||
.filter(n => totalColumnsNames.includes(n))
|
||||
|
||||
let tableName = this.config.name || this.$route.name + '_' + newURL(this.config.url).pathname
|
||||
tableName = replaceAllUUID(tableName)
|
||||
const configShowColumnsNames = this.objTableColumns.get(tableName)
|
||||
const configShowColumnsNames = this.tableColumnsStorage.get()
|
||||
let showColumnsNames = configShowColumnsNames || defaultColumnsNames
|
||||
if (showColumnsNames.length === 0) {
|
||||
showColumnsNames = totalColumnsNames
|
||||
@@ -458,8 +213,6 @@ export default {
|
||||
showColumnsNames.push(v)
|
||||
}
|
||||
})
|
||||
// Clean it
|
||||
showColumnsNames = totalColumnsNames.filter(n => showColumnsNames.indexOf(n) > -1)
|
||||
|
||||
this.cleanedColumnsShow = {
|
||||
default: defaultColumnsNames,
|
||||
@@ -471,9 +224,38 @@ export default {
|
||||
},
|
||||
filterShowColumns() {
|
||||
this.cleanColumnsShow()
|
||||
this.iConfig.columns = this.totalColumns.filter(obj => {
|
||||
return this.cleanedColumnsShow.show.indexOf(obj.prop) > -1
|
||||
const showFieldNames = this.cleanedColumnsShow.show
|
||||
let showFields = this.totalColumns.filter(obj => {
|
||||
return showFieldNames.indexOf(obj.prop) > -1
|
||||
})
|
||||
showFields = this.orderingColumns(showFields)
|
||||
this.iConfig.columns = showFields
|
||||
|
||||
// 确保最新的列配置也应用到config对象上，保持同步
|
||||
this.config.columns = this.iConfig.columns
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.dataTable) {
|
||||
this.$refs.dataTable.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
orderingColumns(columns) {
|
||||
const cols = _.cloneDeep(this.config.columns)
|
||||
const show = this.cleanedColumnsShow.show
|
||||
const ordering = (show || cols || []).map(item => {
|
||||
let prop = item
|
||||
if (typeof item === 'object') {
|
||||
prop = item.prop
|
||||
}
|
||||
return prop
|
||||
})
|
||||
const sorted = _.sortBy(columns, (item) => {
|
||||
const i = ordering.indexOf(item.prop)
|
||||
item.order = i
|
||||
return i === -1 ? 999 : i
|
||||
})
|
||||
return sorted
|
||||
},
|
||||
generatePopoverColumns() {
|
||||
this.popoverColumns.totalColumnsList = this.totalColumns.filter(obj => {
|
||||
@@ -493,13 +275,7 @@ export default {
|
||||
columns = this.cleanedColumnsShow.default
|
||||
}
|
||||
this.popoverColumns.currentCols = columns
|
||||
|
||||
let tableName = this.config.name || this.$route.name + '_' + newURL(url).pathname
|
||||
// 替换url中的uuid，避免同一个类型接口生成多个key，localStorage中的数据无法共用.
|
||||
tableName = replaceAllUUID(tableName)
|
||||
|
||||
this.objTableColumns.set(tableName, columns)
|
||||
|
||||
this.tableColumnsStorage.set(columns)
|
||||
this.filterShowColumns()
|
||||
},
|
||||
filterChange(filters) {
|
||||
|
||||
323
src/components/Table/AutoDataTable/utils.js
Normal file
323
src/components/Table/AutoDataTable/utils.js
Normal file
@@ -0,0 +1,323 @@
|
||||
import { toSentenceCase } from '@/utils/common'
|
||||
import i18n from '@/i18n/i18n'
|
||||
|
||||
import {
|
||||
ActionsFormatter,
|
||||
ArrayFormatter,
|
||||
ChoicesFormatter,
|
||||
CopyableFormatter,
|
||||
DateFormatter,
|
||||
DetailFormatter,
|
||||
DisplayFormatter,
|
||||
ObjectRelatedFormatter
|
||||
} from '@/components/Table/TableFormatters'
|
||||
import LabelsFormatter from '@/components/Table/TableFormatters/LabelsFormatter.vue'
|
||||
|
||||
export class TableColumnsGenerator {
|
||||
constructor(config, meta, vm) {
|
||||
this.config = config
|
||||
this.meta = meta
|
||||
this.vm = vm
|
||||
}
|
||||
|
||||
dynamicActionWidth() {
|
||||
if (i18n.locale === 'en') {
|
||||
return '120px'
|
||||
}
|
||||
if (i18n.locale === 'pt-br') {
|
||||
return '160px'
|
||||
}
|
||||
return '100px'
|
||||
}
|
||||
|
||||
generateColumns() {
|
||||
const config = _.cloneDeep(this.config)
|
||||
let columns = []
|
||||
const allColumnNames = Object.entries(this.meta)
|
||||
.filter(([name, meta]) => !meta['write_only'])
|
||||
.map(([name, meta]) => name)
|
||||
.concat(config.columnsExtra || [])
|
||||
|
||||
let configColumns = config.columns || allColumnNames
|
||||
const columnsExclude = config.columnsExclude || []
|
||||
const columnsAdd = config.columnsAdd || []
|
||||
configColumns = configColumns.concat(columnsAdd)
|
||||
configColumns = configColumns.filter(item => !columnsExclude.includes(item))
|
||||
|
||||
// 解决后端 API 返回字段中包含 actions 的问题;
|
||||
const hasColumnActions = configColumns.findIndex(item => item?.prop === 'actions') !== -1
|
||||
if (!hasColumnActions) {
|
||||
configColumns = [...configColumns.filter(i => i !== 'actions'), 'actions']
|
||||
}
|
||||
|
||||
for (let col of configColumns) {
|
||||
if (typeof col === 'object') {
|
||||
columns.push(col)
|
||||
} else if (typeof col === 'string') {
|
||||
col = this.generateColumn(col)
|
||||
columns.push(col)
|
||||
}
|
||||
}
|
||||
|
||||
columns = columns.filter(item => {
|
||||
if (item?.showFullContent) {
|
||||
item.className = 'show-full-content'
|
||||
}
|
||||
let has = item.has
|
||||
if (has === undefined) {
|
||||
has = true
|
||||
} else if (typeof has === 'function') {
|
||||
has = has()
|
||||
}
|
||||
return has
|
||||
})
|
||||
|
||||
// columns = this.orderingColumns(columns)
|
||||
// 第一次初始化时记录 totalColumns
|
||||
config.columns = columns
|
||||
return columns
|
||||
}
|
||||
|
||||
updateLabelIfNeed(col) {
|
||||
if (!col.label) {
|
||||
return col
|
||||
}
|
||||
col.label = col.label
|
||||
.replace(' Amount', '')
|
||||
.replace(' amount', '')
|
||||
.replace('数量', '')
|
||||
if (col.label.startsWith('Is ')) {
|
||||
col.label = col.label.replace('Is ', '')
|
||||
}
|
||||
col.label = toSentenceCase(col.label)
|
||||
return col
|
||||
}
|
||||
|
||||
generateColumn(name) {
|
||||
const colMeta = this.meta[name] || {}
|
||||
const customMeta = this.config.columnsMeta ? this.config.columnsMeta[name] : {}
|
||||
let col = { prop: name, label: colMeta.label, showOverflowTooltip: true }
|
||||
|
||||
col = this.generateColumnByType(colMeta.type, col, colMeta)
|
||||
col = this.generateColumnByName(name, col)
|
||||
col = this.setDefaultFormatterIfNeed(col)
|
||||
col = Object.assign(col, customMeta)
|
||||
col = this.addHelpTipIfNeed(col)
|
||||
col = this.addFilterIfNeed(col)
|
||||
col = this.addOrderingIfNeed(col)
|
||||
col = this.updateLabelIfNeed(col)
|
||||
col = this.setDefaultWidthIfNeed(col)
|
||||
return col
|
||||
}
|
||||
|
||||
generateColumnByName(name, col) {
|
||||
switch (name) {
|
||||
case 'id':
|
||||
if (!col.width) {
|
||||
col.width = '299px'
|
||||
}
|
||||
if (!col.formatter) {
|
||||
col.formatter = CopyableFormatter
|
||||
col.iconPosition = 'left'
|
||||
}
|
||||
break
|
||||
case 'name':
|
||||
col.formatter = DetailFormatter
|
||||
col.sortable = 'custom'
|
||||
col.showOverflowTooltip = true
|
||||
col.minWidth = '150px'
|
||||
break
|
||||
case 'actions':
|
||||
col = {
|
||||
prop: 'actions',
|
||||
label: i18n.t('Actions'),
|
||||
align: 'center',
|
||||
width: this.dynamicActionWidth(),
|
||||
formatter: ActionsFormatter,
|
||||
fixed: 'right',
|
||||
formatterArgs: {}
|
||||
}
|
||||
break
|
||||
case 'is_valid':
|
||||
col.label = i18n.t('Valid')
|
||||
col.formatter = ChoicesFormatter
|
||||
col.formatterArgs = {
|
||||
textChoices: {
|
||||
true: i18n.t('Yes'),
|
||||
false: i18n.t('No')
|
||||
}
|
||||
}
|
||||
col.width = '80px'
|
||||
break
|
||||
case 'is_active':
|
||||
col.formatter = ChoicesFormatter
|
||||
col.formatterArgs = {
|
||||
textChoices: {
|
||||
true: i18n.t('Active'),
|
||||
false: i18n.t('Inactive')
|
||||
}
|
||||
}
|
||||
col.width = '100px'
|
||||
break
|
||||
case 'datetime':
|
||||
case 'date_start':
|
||||
col.formatter = DateFormatter
|
||||
break
|
||||
case 'labels':
|
||||
col.formatter = LabelsFormatter
|
||||
col.width = '200px'
|
||||
break
|
||||
case 'comment':
|
||||
col.showOverflowTooltip = true
|
||||
}
|
||||
return col
|
||||
}
|
||||
|
||||
generateColumnByType(type, col, meta) {
|
||||
switch (type) {
|
||||
case 'choice':
|
||||
col.sortable = 'custom'
|
||||
col.formatter = DisplayFormatter
|
||||
break
|
||||
case 'labeled_choice':
|
||||
col.sortable = 'custom'
|
||||
col.formatter = ChoicesFormatter
|
||||
break
|
||||
case 'boolean':
|
||||
col.formatter = ChoicesFormatter
|
||||
// col.width = '80px'
|
||||
break
|
||||
case 'datetime':
|
||||
col.formatter = DateFormatter
|
||||
col.width = '155px'
|
||||
break
|
||||
case 'object_related_field':
|
||||
col.formatter = ObjectRelatedFormatter
|
||||
break
|
||||
case 'm2m_related_field':
|
||||
col.formatter = ObjectRelatedFormatter
|
||||
break
|
||||
case 'list':
|
||||
col.formatter = ArrayFormatter
|
||||
break
|
||||
case 'json':
|
||||
case 'field':
|
||||
if (meta.child && meta.child.type === 'nested object') {
|
||||
col.formatter = ObjectRelatedFormatter
|
||||
}
|
||||
break
|
||||
}
|
||||
// this.$log.debug('Field: ', type, col.prop, col)
|
||||
return col
|
||||
}
|
||||
|
||||
setDefaultFormatterIfNeed(col) {
|
||||
const h = this.vm.$createElement
|
||||
if (!col.formatter) {
|
||||
col.formatter = (row, column, cellValue) => {
|
||||
let value = cellValue
|
||||
let padding = '0'
|
||||
const excludes = [undefined, null, '']
|
||||
if (excludes.indexOf(value) !== -1) {
|
||||
padding = '6px'
|
||||
value = '-'
|
||||
}
|
||||
return h('span', {
|
||||
'style': {
|
||||
marginLeft: padding
|
||||
}
|
||||
}, [value])
|
||||
}
|
||||
}
|
||||
return col
|
||||
}
|
||||
|
||||
setDefaultWidthIfNeed(col) {
|
||||
const lang = i18n.locale
|
||||
let factor = 10
|
||||
if (lang === 'zh') {
|
||||
factor = 20
|
||||
}
|
||||
let [sortable, filters] = [0, 0]
|
||||
if (col && col?.sortable === 'custom') {
|
||||
sortable = 10
|
||||
}
|
||||
if (col && col?.filters?.length > 0) {
|
||||
filters = 12
|
||||
}
|
||||
if (col && !col.width && col.label && !col.minWidth) {
|
||||
col.minWidth = `${col.label.length * factor + sortable + filters + 30}px`
|
||||
}
|
||||
return col
|
||||
}
|
||||
|
||||
addOrderingIfNeed(col) {
|
||||
if (col.prop) {
|
||||
const column = this.meta[col.prop] || {}
|
||||
if (column.order) {
|
||||
col.sortable = 'custom'
|
||||
col['column-key'] = col.prop
|
||||
}
|
||||
}
|
||||
return col
|
||||
}
|
||||
|
||||
addHelpTipIfNeed(col) {
|
||||
const helpTip = col.helpTip
|
||||
if (!helpTip) {
|
||||
return col
|
||||
}
|
||||
col.renderHeader = (h, { column, $index }) => {
|
||||
const binds = {
|
||||
props: {
|
||||
placement: 'bottom',
|
||||
effect: 'dark',
|
||||
openDelay: 500,
|
||||
popperClass: 'help-tips'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<span>{column.label}
|
||||
<el-tooltip {...binds}>
|
||||
<div slot='content' v-sanitize={helpTip}/>
|
||||
<i class='fa fa-question-circle-o help-tip-icon' style='padding-left: 2px'/>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
return col
|
||||
}
|
||||
|
||||
addFilterIfNeed(col) {
|
||||
if (col.prop) {
|
||||
const column = this.meta[col.prop] || {}
|
||||
if (!column.filter) {
|
||||
return col
|
||||
}
|
||||
if (column.type === 'boolean') {
|
||||
col.filters = [
|
||||
{ text: i18n.t('Yes'), value: true },
|
||||
{ text: i18n.t('No'), value: false }
|
||||
]
|
||||
col.sortable = false
|
||||
col['column-key'] = col.prop
|
||||
}
|
||||
if (column.type === 'choice' && column.choices) {
|
||||
col.filters = column.choices.map(item => {
|
||||
if (typeof (item.value) === 'boolean') {
|
||||
if (item.value) {
|
||||
return { text: item['label'], value: 'True' }
|
||||
} else {
|
||||
return { text: item['label'], value: 'False' }
|
||||
}
|
||||
}
|
||||
return { text: item['label'], value: item.value }
|
||||
})
|
||||
col.sortable = false
|
||||
col['column-key'] = col.prop
|
||||
}
|
||||
}
|
||||
return col
|
||||
}
|
||||
}
|
||||
@@ -34,6 +34,12 @@
|
||||
@currentSizeChange="handleCurrentChange"
|
||||
@sizeChange="handleSizeChange"
|
||||
/>
|
||||
<Drawer
|
||||
v-if="detailDrawer"
|
||||
:component="detailDrawer"
|
||||
:title="detailTitle"
|
||||
:visible.sync="detailDrawerVisible"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -43,12 +49,14 @@ import { Pagination } from '@/components'
|
||||
import TableAction from '@/components/Table/ListTable/TableAction'
|
||||
import IBox from '@/components/Common/IBox/index.vue'
|
||||
import Panel from './Panel'
|
||||
import Drawer from '@/components/Drawer/index.vue'
|
||||
|
||||
const defaultFirstPage = 1
|
||||
|
||||
export default {
|
||||
name: 'CardTable',
|
||||
components: {
|
||||
Drawer,
|
||||
IBox,
|
||||
Panel,
|
||||
TableAction,
|
||||
@@ -79,6 +87,10 @@ export default {
|
||||
subComponentProps: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
detailDrawer: {
|
||||
type: [String, Function],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -97,7 +109,9 @@ export default {
|
||||
display: 1,
|
||||
draw: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
detailDrawerVisible: false,
|
||||
detailTitle: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -137,9 +151,10 @@ export default {
|
||||
return
|
||||
}
|
||||
const pageQuery = this.getPageQuery(this.page, this.paginationSize)
|
||||
const query = Object.assign(this.extraQuery, pageQuery)
|
||||
const query = Object.assign(this.extraQuery, pageQuery, this.tableConfig.extraQuery)
|
||||
const queryString = Object.keys(query).map(key => key + '=' + query[key]).join('&')
|
||||
const url = `${this.tableUrl}?${queryString}`
|
||||
const connector = this.tableUrl.indexOf('?') === -1 ? '?' : '&'
|
||||
const url = `${this.tableUrl}${connector}${queryString}`
|
||||
|
||||
const resp = await this.$axios.get(url, this.axiosConfig)
|
||||
const data = resp.data
|
||||
@@ -177,12 +192,20 @@ export default {
|
||||
defaultPerformDelete(obj) {
|
||||
this.$axios.delete(`${this.tableConfig.url}${obj.id}/`)
|
||||
},
|
||||
onView(obj) {
|
||||
async onView(obj) {
|
||||
if (this.isDisabled(obj)) {
|
||||
return
|
||||
}
|
||||
const viewFunc = this.tableConfig.onView || this.defaultPerformView
|
||||
viewFunc(obj)
|
||||
if (this.detailDrawer) {
|
||||
await this.$store.dispatch('common/setDrawerActionMeta', {
|
||||
action: 'detail', row: obj, col: {}, id: obj.id
|
||||
})
|
||||
this.detailTitle = `${this.$t('Detail')}: ${obj.name}`
|
||||
this.detailDrawerVisible = true
|
||||
} else {
|
||||
const viewFunc = this.tableConfig.onView || this.defaultPerformView
|
||||
await viewFunc(obj)
|
||||
}
|
||||
},
|
||||
onDelete(obj) {
|
||||
const msg = `${this.$t('DeleteWarningMsg')} "${obj.name}" ?`
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="info-panel">
|
||||
<div class="info-panel" @click="gotoDetail">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">
|
||||
<el-avatar :src="imageUrl" shape="square" />
|
||||
@@ -30,7 +30,7 @@
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-content" @click="gotoDetail">
|
||||
<div class="panel-content">
|
||||
<InfoPanel :infos="getInfos(object)" />
|
||||
</div>
|
||||
<el-row class="panel-footer" />
|
||||
@@ -158,6 +158,7 @@ div.info-panel {
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.panel-header {
|
||||
padding: 10px 20px;
|
||||
@@ -165,7 +166,6 @@ div.info-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
cursor: default;
|
||||
|
||||
.panel-title {
|
||||
display: flex;
|
||||
@@ -216,7 +216,6 @@ div.info-panel {
|
||||
.panel-content {
|
||||
display: block;
|
||||
padding: 1px 25px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.panel-image {
|
||||
margin: auto 5px;
|
||||
|
||||
@@ -115,8 +115,7 @@ export default {
|
||||
const url = this.formatterArgs.assetUrl.replace('{id}', assetId)
|
||||
const res = await this.$axios.get(url)
|
||||
|
||||
// TODO 暂时将 sftp 隐藏
|
||||
this.protocols = res.protocols.filter(protocol => (protocol.name !== 'sftp') && (protocol.name !== 'winrm')) || []
|
||||
this.protocols = res.protocols.filter(protocol => (protocol.name !== 'winrm')) || []
|
||||
} catch (e) {
|
||||
throw new Error(`Error getting protocols: ${e}`)
|
||||
}
|
||||
|
||||
@@ -50,23 +50,75 @@ export default {
|
||||
return cellValue
|
||||
},
|
||||
viewText() {
|
||||
const cpuCount = this.items['cpu_count']
|
||||
const cpuCores = this.items['cpu_cores']
|
||||
const cpuVcpus = this.items['cpu_vcpus']
|
||||
const memory = this.items['memory']
|
||||
const diskTotal = this.items['disk_total']
|
||||
const cpuCount = Number(this.items['cpu_count'] || 0)
|
||||
const cpuCores = Number(this.items['cpu_cores'] || 0)
|
||||
const cpuVcpus = Number(this.items['cpu_vcpus'] || 0)
|
||||
const memory = Number(this.items['memory'] || 0)
|
||||
const diskTotal = Number(this.items['disk_total'] || 0)
|
||||
const rawCpuModel = this.items['cpu_model']
|
||||
const rawGpuModel = this.items['gpu_model']
|
||||
|
||||
let summary = ''
|
||||
|
||||
if (cpuCount) {
|
||||
let text = `${cpuVcpus || cpuCores * cpuCount} Core`
|
||||
const coreCount = cpuVcpus || (cpuCores * cpuCount)
|
||||
summary = `${coreCount} Core`
|
||||
|
||||
if (memory) {
|
||||
text += ` ${memory}G`
|
||||
summary += ` ${Math.round(memory)}G`
|
||||
}
|
||||
|
||||
if (diskTotal) {
|
||||
text += ` ${diskTotal}G`
|
||||
summary += ` ${Math.round(diskTotal)}G`
|
||||
}
|
||||
return text
|
||||
|
||||
const cpuModel = this.formatCpuModel(rawCpuModel)
|
||||
if (cpuModel) {
|
||||
summary += ` (${cpuModel})`
|
||||
}
|
||||
|
||||
if (rawGpuModel) {
|
||||
const gpu = this.formatGpuModel(rawGpuModel)
|
||||
summary += ` ${gpu}`
|
||||
}
|
||||
|
||||
return summary
|
||||
}
|
||||
|
||||
return this.items?.distribution || '-'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatCpuModel(raw) {
|
||||
if (!raw) return ''
|
||||
|
||||
const match = raw.match(/^([^\s]+)\s*(x\d+)?$/)
|
||||
let base = match?.[1] || raw
|
||||
const suffix = match?.[2] || ''
|
||||
|
||||
base = base
|
||||
.replace(/GenuineIntel/i, '')
|
||||
.replace(/\b\d+(st|nd|rd|th)? Gen\b/i, '')
|
||||
.replace(/\(R\)/g, '')
|
||||
.replace(/\(TM\)/g, '')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim()
|
||||
|
||||
return `${base}${suffix}`
|
||||
},
|
||||
formatGpuModel(raw) {
|
||||
if (!raw) return ''
|
||||
|
||||
const match = raw.match(/(.+?),\s*(\d+),\s*([\d.]+)(?:\s*x(\d+))?/)
|
||||
if (match) {
|
||||
const [, model, vramMb, driverVersion, countStr] = match
|
||||
const count = countStr ? parseInt(countStr) : 1
|
||||
const vramGb = Math.round(parseInt(vramMb) / 1024)
|
||||
const label = `${model} (${vramGb}GB, Driver ${driverVersion})`
|
||||
return count > 1 ? `${label} x${count}` : label
|
||||
}
|
||||
return raw // fallback
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -19,6 +19,7 @@ export { default as UploadKey } from './Form/FormFields/UploadKey.vue'
|
||||
export { default as AssetSelect } from './Apps/AssetSelect'
|
||||
export { default as AutomationParams } from './Apps/AutomationParams'
|
||||
export { default as BlockedIPs } from './Apps/BlockedIPs'
|
||||
export { default as LeakPasswords } from './Apps/LeakPasswords'
|
||||
export { default as SvgIcon } from './Widgets/SvgIcon'
|
||||
export { default as TreeTable } from './Table/TreeTable'
|
||||
export { default as AssetTreeTable } from './Apps/AssetTreeTable'
|
||||
|
||||
@@ -2,6 +2,10 @@ import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
import zhTWLocale from 'element-ui/lib/locale/lang/zh-TW'
|
||||
import enLocale from 'element-ui/lib/locale/lang/en'
|
||||
import jaLocale from 'element-ui/lib/locale/lang/ja'
|
||||
import ptBrLocale from 'element-ui/lib/locale/lang/pt-br'
|
||||
import esLocale from 'element-ui/lib/locale/lang/es'
|
||||
import ruLocale from 'element-ui/lib/locale/lang/ru-RU'
|
||||
import koLocale from 'element-ui/lib/locale/lang/ko'
|
||||
import zh from './zh.json'
|
||||
import zhHant from './zh_hant.json'
|
||||
import en from './en.json'
|
||||
@@ -23,6 +27,18 @@ const messages = {
|
||||
ja: {
|
||||
...jaLocale,
|
||||
...ja
|
||||
},
|
||||
pt_br: {
|
||||
...ptBrLocale
|
||||
},
|
||||
es: {
|
||||
...esLocale
|
||||
},
|
||||
ru: {
|
||||
...ruLocale
|
||||
},
|
||||
ko: {
|
||||
...koLocale
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -228,35 +228,35 @@ export default [
|
||||
component: empty,
|
||||
redirect: '',
|
||||
meta: {
|
||||
resource: 'domain',
|
||||
resource: 'zone',
|
||||
icon: 'zone',
|
||||
permissions: ['assets.view_domain']
|
||||
permissions: ['assets.view_zone']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'ZoneList',
|
||||
component: () => import('@/views/assets/Domain/DomainList.vue'),
|
||||
component: () => import('@/views/assets/Zone/ZoneList.vue'),
|
||||
meta: { title: i18n.t('ZoneList') }
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'ZoneCreate',
|
||||
component: () => import('@/views/assets/Domain/DomainCreateUpdate.vue'),
|
||||
component: () => import('@/views/assets/Zone/ZoneCreateUpdate.vue'),
|
||||
hidden: true,
|
||||
meta: { title: i18n.t('ZoneCreate') }
|
||||
},
|
||||
{
|
||||
path: ':id/update',
|
||||
name: 'ZoneUpdate',
|
||||
component: () => import('@/views/assets/Domain/DomainCreateUpdate.vue'),
|
||||
component: () => import('@/views/assets/Zone/ZoneCreateUpdate.vue'),
|
||||
hidden: true,
|
||||
meta: { title: i18n.t('ZoneUpdate') }
|
||||
},
|
||||
{
|
||||
path: ':id',
|
||||
name: 'ZoneDetail',
|
||||
component: () => import('@/views/assets/Domain/DomainDetail'),
|
||||
component: () => import('@/views/assets/Zone/ZoneDetail'),
|
||||
hidden: true,
|
||||
meta: { title: i18n.t('Zone') }
|
||||
}
|
||||
@@ -274,7 +274,7 @@ export default [
|
||||
{
|
||||
path: 'create',
|
||||
name: 'GatewayCreate',
|
||||
component: () => import('@/views/assets/Domain/DomainDetail/GatewayCreateUpdate.vue'),
|
||||
component: () => import('@/views/assets/Zone/ZoneDetail/GatewayCreateUpdate.vue'),
|
||||
meta: {
|
||||
title: i18n.t('GatewayCreate'),
|
||||
permissions: ['assets.view_gateway']
|
||||
@@ -283,7 +283,7 @@ export default [
|
||||
{
|
||||
path: ':id/update',
|
||||
name: 'GatewayUpdate',
|
||||
component: () => import('@/views/assets/Domain/DomainDetail/GatewayCreateUpdate.vue'),
|
||||
component: () => import('@/views/assets/Zone/ZoneDetail/GatewayCreateUpdate.vue'),
|
||||
meta: {
|
||||
title: i18n.t('GatewayUpdate'),
|
||||
permissions: ['assets.change_gateway']
|
||||
|
||||
@@ -2,6 +2,7 @@ import defaultSettings from '@/settings'
|
||||
import { getPublicSettings } from '@/api/settings'
|
||||
import { changeElementColor, changeThemeColors } from '@/utils/theme/index'
|
||||
import { changeMenuColor } from '@/utils/theme/color'
|
||||
import request from '@/utils/request'
|
||||
|
||||
const { showSettings, fixedHeader, sidebarLogo, tagsView } = defaultSettings
|
||||
|
||||
@@ -12,6 +13,7 @@ const state = {
|
||||
tagsView: tagsView,
|
||||
publicSettings: {},
|
||||
hasValidLicense: false,
|
||||
authMethods: {},
|
||||
themeColors: JSON.parse(localStorage.getItem('themeColors')) || {}
|
||||
}
|
||||
|
||||
@@ -78,6 +80,34 @@ const actions = {
|
||||
changeMenuColor(themeColors)
|
||||
changeElementColor(themeColors)
|
||||
commit('setTheme', themeColors)
|
||||
},
|
||||
updateAuthItemStatus({ commit }, payload) {
|
||||
const [key, value] = payload
|
||||
return new Promise((resolve, reject) => {
|
||||
const url = '/api/v1/settings/setting/?category=auth'
|
||||
const data = { [key]: value }
|
||||
request.patch(url, data).then(res => {
|
||||
state.authMethods[key] = value
|
||||
resolve(res)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
getAuthMethods({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (state.authMethods && Object.keys(state.authMethods).length > 0) {
|
||||
resolve(state.authMethods)
|
||||
} else {
|
||||
const url = '/api/v1/settings/setting/?category=auth'
|
||||
request.get(url).then(res => {
|
||||
state.authMethods = res
|
||||
resolve(res)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -144,6 +144,9 @@ $single-menu-height: 38px;
|
||||
line-height: $single-menu-height;
|
||||
display: inline-block;
|
||||
|
||||
.el-tooltip {
|
||||
width: 55px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.group-title {
|
||||
|
||||
@@ -397,8 +397,9 @@ export function getDrawerWidth() {
|
||||
}
|
||||
|
||||
export class ObjectLocalStorage {
|
||||
constructor(key) {
|
||||
constructor(key, attr) {
|
||||
this.key = key
|
||||
this.attr = attr
|
||||
}
|
||||
|
||||
b64(val) {
|
||||
@@ -421,6 +422,9 @@ export class ObjectLocalStorage {
|
||||
|
||||
get(attr, defaults) {
|
||||
const obj = this.getObject(this.key)
|
||||
if (!attr && this.attr) {
|
||||
attr = this.attr
|
||||
}
|
||||
const attrSafe = this.b64(attr)
|
||||
const val = obj[attrSafe]
|
||||
if (val === undefined) {
|
||||
@@ -431,6 +435,10 @@ export class ObjectLocalStorage {
|
||||
|
||||
set(attr, value) {
|
||||
const obj = this.getObject(this.key)
|
||||
if (value === undefined && this.attr) {
|
||||
value = attr
|
||||
attr = this.attr
|
||||
}
|
||||
const attrSafe = this.b64(attr)
|
||||
obj[attrSafe] = value
|
||||
window.localStorage.setItem(this.key, JSON.stringify(obj))
|
||||
|
||||
@@ -47,7 +47,12 @@ export default {
|
||||
showMenu: false,
|
||||
showAssets: true,
|
||||
url: '/api/v1/accounts/accounts/',
|
||||
countResource: 'account'
|
||||
countResource: 'account',
|
||||
edit: {
|
||||
drag: {
|
||||
isMove: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,7 +55,7 @@ export default {
|
||||
component: AccountFormatter,
|
||||
el: {
|
||||
showAddTemplate: false,
|
||||
showVirtualAccount: false,
|
||||
enableVirtualAccount: false,
|
||||
value: ['@ALL'],
|
||||
assets: []
|
||||
},
|
||||
|
||||
@@ -44,7 +44,7 @@ export default {
|
||||
component: AccountFormatter,
|
||||
el: {
|
||||
showAddTemplate: false,
|
||||
showVirtualAccount: false
|
||||
enableVirtualAccount: false
|
||||
}
|
||||
},
|
||||
action: {},
|
||||
|
||||
@@ -64,7 +64,7 @@ export default {
|
||||
[this.$t('Basic'), ['name', 'address', 'platform', 'nodes']],
|
||||
[this.$t('Protocol'), ['protocols']],
|
||||
[this.$t('Account'), ['accounts']],
|
||||
[this.$t('Other'), ['directory_services', 'domain', 'labels', 'is_active', 'comment']]
|
||||
[this.$t('Other'), ['directory_services', 'zone', 'labels', 'is_active', 'comment']]
|
||||
],
|
||||
fieldsMeta: {},
|
||||
performSubmit(validValues) {
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
{{ $t('Add') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="$hasLicense() || $route.name !== 'Applets'"
|
||||
:disabled="!$hasPerm('accounts.view_accounttemplate')"
|
||||
size="mini"
|
||||
type="success"
|
||||
@@ -98,6 +99,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
const accounts = this.value || []
|
||||
|
||||
return {
|
||||
accounts: accounts,
|
||||
drawerRefName: null,
|
||||
|
||||
@@ -64,6 +64,7 @@ export default {
|
||||
{
|
||||
name: this.$t('AccountTemplate'),
|
||||
title: this.$t('AccountTemplate'),
|
||||
has: this.$hasLicense() || this.$route.name !== 'Applets',
|
||||
can: () => this.$hasPerm('accounts.view_accounttemplate') && !this.$store.getters.currentOrgIsRoot,
|
||||
callback: () => {
|
||||
this.templateDialogVisible = true
|
||||
|
||||
@@ -183,8 +183,8 @@ export default {
|
||||
url: `/api/v1/assets/assets/${this.object.id}/`,
|
||||
object: this.object,
|
||||
fields: [
|
||||
'id', 'name', 'category', 'type',
|
||||
'address', 'platform', 'protocols', 'domain',
|
||||
'id', 'name', 'category', 'type', 'address',
|
||||
'platform', 'protocols', 'zone', 'directory_services',
|
||||
'is_active', 'date_created', 'date_updated',
|
||||
'created_by', 'comment'
|
||||
],
|
||||
|
||||
@@ -13,7 +13,20 @@ export default {
|
||||
return {
|
||||
config: {
|
||||
category: 'database',
|
||||
url: '/api/v1/assets/databases/'
|
||||
url: '/api/v1/assets/databases/',
|
||||
headerActions: {
|
||||
extraActions: [
|
||||
{
|
||||
name: this.$t('CloudSync'),
|
||||
title: this.$t('CloudSync'),
|
||||
icon: 'cloud-provider',
|
||||
has: () => this.$hasPerm('xpack.view_account') && this.$hasLicense(),
|
||||
callback: () => this.$router.push(
|
||||
{ name: 'CloudAccountList', query: { category: 'database' }}
|
||||
)
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,7 +37,9 @@ export default {
|
||||
title: this.$t('CloudSync'),
|
||||
icon: 'cloud-provider',
|
||||
has: () => vm.$hasPerm('xpack.view_account') && vm.$hasLicense(),
|
||||
callback: () => this.$router.push({ name: 'CloudAccountList' })
|
||||
callback: () => this.$router.push(
|
||||
{ name: 'CloudAccountList', query: { category: 'host' }}
|
||||
)
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -41,7 +41,7 @@ export default {
|
||||
formSetting: {
|
||||
url: '/api/v1/assets/assets/',
|
||||
hasSaveContinue: false,
|
||||
fields: ['platform', 'nodes', 'domain', 'labels', 'is_active', 'comment'],
|
||||
fields: ['platform', 'nodes', 'zone', 'labels', 'is_active', 'comment'],
|
||||
fieldsMeta: {
|
||||
platform: {
|
||||
el: {
|
||||
@@ -63,8 +63,8 @@ export default {
|
||||
...meta.nodes,
|
||||
label: this.$t('Node')
|
||||
},
|
||||
domain: {
|
||||
...meta.domain,
|
||||
zone: {
|
||||
...meta.zone,
|
||||
label: this.$tc('Zone'),
|
||||
disabled: exclude.includes(this.category)
|
||||
},
|
||||
|
||||
@@ -126,6 +126,7 @@ export default {
|
||||
icon: '',
|
||||
split: true,
|
||||
has: this.headerActions.hasCreate,
|
||||
can: !this.$store.getters.currentOrgIsRoot,
|
||||
callback: () => {
|
||||
this.showPlatform = false
|
||||
setTimeout(() => {
|
||||
@@ -185,6 +186,10 @@ export default {
|
||||
}
|
||||
const create = this.createAction
|
||||
create.dropdown = this.recentPlatforms
|
||||
create.dropdown.map((item) => {
|
||||
item.can = !this.$store.getters.currentOrgIsRoot
|
||||
return item
|
||||
})
|
||||
const extraActions = actions.extraActions || []
|
||||
actions.extraActions = [create, ...extraActions]
|
||||
// actions.extraActions[0].dropdown = platforms
|
||||
|
||||
@@ -22,7 +22,7 @@ export default {
|
||||
fields: [
|
||||
'vendor', 'model', 'sn', 'cpu_model', 'cpu_count',
|
||||
'cpu_cores', 'cpu_vcpus', 'memory', 'disk_total',
|
||||
'distribution', 'distribution_version', 'arch'
|
||||
'distribution', 'distribution_version', 'arch', 'gpu_model'
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@@ -138,7 +138,7 @@ export default {
|
||||
strategyRelationConfig: {
|
||||
title: this.$t('Strategy'),
|
||||
objectsAjax: {
|
||||
url: '/api/v1/xpack/cloud/strategies/',
|
||||
url: `/api/v1/xpack/cloud/strategies/?category=${this.object.category}`,
|
||||
transformOption: (item) => {
|
||||
return { label: item.name, value: item.id }
|
||||
}
|
||||
|
||||
@@ -82,8 +82,9 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
dynamicUrl() {
|
||||
const baseUrl = '/api/v1/xpack/cloud/sync-instance-tasks/instances/'
|
||||
return this.object ? `${baseUrl}?task_id=${this.object.task.id}` : baseUrl
|
||||
const category = this.$route.query.category
|
||||
const baseUrl = `/api/v1/xpack/cloud/sync-instance-tasks/instances/?category=${category}`
|
||||
return this.object ? `${baseUrl}&task_id=${this.object.task.id}` : baseUrl
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@@ -21,7 +21,6 @@ export default {
|
||||
TabPage
|
||||
},
|
||||
data() {
|
||||
const vm = this
|
||||
return {
|
||||
Account: {
|
||||
name: '', provider: '', provider_display: '', validity_display: '', comment: '', date_created: '', created_by: '', task: {}
|
||||
@@ -44,20 +43,7 @@ export default {
|
||||
name: 'TaskSyncAssetList',
|
||||
hidden: () => { return !this.Account.task?.id }
|
||||
}
|
||||
],
|
||||
actions: {
|
||||
hasUpdate: false,
|
||||
deleteSuccessRoute: 'CloudAccountList',
|
||||
updateCallback: () => {
|
||||
const id = this.$route.params.id
|
||||
const routeName = 'AccountUpdate'
|
||||
this.$router.push({
|
||||
name: routeName,
|
||||
params: { id: id },
|
||||
query: { provider: vm.Account.provider.value }
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
</template>
|
||||
|
||||
<script type="text/jsx">
|
||||
import { lan, privateCloudProviders, publicCloudProviders } from '../const'
|
||||
import { lan, privateCloudProviders, publicHostProviders, publicDBProviders } from '../const'
|
||||
import CreateDialog from './components/CreateDialog.vue'
|
||||
import UpdateDialog from './components/UpdateDialog.vue'
|
||||
import SyncDialog from './components/SyncDialog.vue'
|
||||
@@ -43,11 +43,12 @@ export default {
|
||||
object: null,
|
||||
table: {
|
||||
tableConfig: {
|
||||
url: '/api/v1/xpack/cloud/accounts/',
|
||||
url: '',
|
||||
permissions: {
|
||||
app: 'xpack',
|
||||
resource: 'account'
|
||||
}
|
||||
},
|
||||
extraQuery: {}
|
||||
},
|
||||
subComponentProps: {
|
||||
handleUpdate: (obj) => {
|
||||
@@ -102,7 +103,8 @@ export default {
|
||||
title: this.$t('PublicCloud'),
|
||||
icon: 'public-cloud',
|
||||
callback: () => {
|
||||
this.providerConfig.providers = publicCloudProviders.map(
|
||||
const providers = this.iCategory === 'host' ? publicHostProviders : publicDBProviders
|
||||
this.providerConfig.providers = providers.map(
|
||||
(item) => ACCOUNT_PROVIDER_ATTRS_MAP[item]
|
||||
)
|
||||
this.visible = true
|
||||
@@ -110,8 +112,9 @@ export default {
|
||||
},
|
||||
{
|
||||
name: 'privateCloud',
|
||||
icon: 'private-cloud',
|
||||
title: this.$t('PrivateCloud'),
|
||||
icon: 'private-cloud',
|
||||
has: () => this.iCategory === 'host',
|
||||
callback: () => {
|
||||
this.providerConfig.providers = privateCloudProviders.map(
|
||||
(item) => ACCOUNT_PROVIDER_ATTRS_MAP[item]
|
||||
@@ -123,6 +126,7 @@ export default {
|
||||
name: 'LAN',
|
||||
title: this.$t('LAN'),
|
||||
icon: 'computer',
|
||||
has: () => this.iCategory === 'host',
|
||||
callback: () => {
|
||||
const providers = [lan]
|
||||
this.providerConfig.providers = providers.map(
|
||||
@@ -133,7 +137,8 @@ export default {
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
detailDrawer: () => import('@/views/assets/Cloud/Account/AccountDetail/index.vue')
|
||||
},
|
||||
providerConfig: {
|
||||
providers: []
|
||||
@@ -143,6 +148,11 @@ export default {
|
||||
onlineSyncVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iCategory() {
|
||||
return this.$route.query.category || 'host'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible: {
|
||||
handler(val) {
|
||||
@@ -166,6 +176,10 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.table.tableConfig.url = '/api/v1/xpack/cloud/accounts/'
|
||||
this.table.tableConfig.extraQuery = { category: this.iCategory }
|
||||
},
|
||||
methods: {
|
||||
valid(status) {
|
||||
if (status !== 200) {
|
||||
|
||||
@@ -169,6 +169,7 @@ export default {
|
||||
const newValues = JSON.parse(JSON.stringify(values))
|
||||
newValues['attrs'] = encryptAttrsField(newValues.attrs)
|
||||
newValues['provider'] = vm.provider
|
||||
newValues['category'] = this.$route.query.category || 'host'
|
||||
return newValues
|
||||
},
|
||||
addContinue: true
|
||||
|
||||
@@ -105,9 +105,10 @@ export default {
|
||||
let url = `/api/v1/xpack/cloud/regions/?account_id=${authInfo}`
|
||||
if (typeof authInfo === 'object') {
|
||||
const attrs = JSON.parse(JSON.stringify(authInfo))
|
||||
const category = this.$route.query.category || 'host'
|
||||
|
||||
method = 'post'
|
||||
url = `/api/v1/xpack/cloud/regions/?provider=${this.provider}`
|
||||
url = `/api/v1/xpack/cloud/regions/?provider=${this.provider}&category=${category}`
|
||||
data = { 'attrs': encryptAttrsField(attrs) }
|
||||
}
|
||||
|
||||
|
||||
@@ -38,6 +38,10 @@ export default {
|
||||
},
|
||||
updateSuccessNextRoute: { name: 'CloudAccountList', params: { activeMenu: 'StrategyList' }},
|
||||
createSuccessNextRoute: { name: 'CloudAccountList', params: { activeMenu: 'StrategyList' }},
|
||||
cleanFormValue: (value) => {
|
||||
value['category'] = this.$route.query.category || 'host'
|
||||
return value
|
||||
},
|
||||
getUrl() {
|
||||
const id = this.$route.params?.id
|
||||
return id ? `${this.url}${id}/` : this.url
|
||||
|
||||
@@ -21,7 +21,7 @@ export default {
|
||||
createDrawer: () => import('@/views/assets/Cloud/Strategy/StrategyCreateUpdate.vue'),
|
||||
detailDrawer: () => import('@/views/assets/Cloud/Strategy/StrategyDetail/index.vue'),
|
||||
tableConfig: {
|
||||
url: '/api/v1/xpack/cloud/strategies/',
|
||||
url: '',
|
||||
permissions: {
|
||||
app: 'xpack',
|
||||
resource: 'strategy'
|
||||
@@ -70,8 +70,15 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iCategory() {
|
||||
return this.$route.query.category || 'host'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.tableConfig.url = `/api/v1/xpack/cloud/strategies/?category=${this.iCategory}`
|
||||
},
|
||||
methods: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -67,14 +67,16 @@ export default {
|
||||
let url = ''
|
||||
let options = []
|
||||
switch (val) {
|
||||
case 'platform':
|
||||
url = '/api/v1/assets/platforms/?category=host'
|
||||
case 'platform': {
|
||||
const category = this.$route.query.category || 'host'
|
||||
url = `/api/v1/assets/platforms/?category=${category}`
|
||||
break
|
||||
}
|
||||
case 'node':
|
||||
url = '/api/v1/assets/nodes/'
|
||||
break
|
||||
case 'domain':
|
||||
url = '/api/v1/assets/domains/'
|
||||
case 'zone':
|
||||
url = '/api/v1/assets/zones/'
|
||||
break
|
||||
case 'account_template':
|
||||
url = '/api/v1/accounts/account-templates/'
|
||||
@@ -209,7 +211,7 @@ export default {
|
||||
beforeSubmit(data) {
|
||||
let status = true
|
||||
const labelMap = {
|
||||
platform: this.$tc('Platform'), domain: this.$tc('Zone'),
|
||||
platform: this.$tc('Platform'), zone: this.$tc('Zone'),
|
||||
name_strategy: this.$tc('Strategy')
|
||||
}
|
||||
this.tableConfig.totalData.map(item => {
|
||||
|
||||
@@ -4,7 +4,7 @@ import { attrMatchOptions } from '@/components/const'
|
||||
export const resourceTypeOptions = [
|
||||
{ label: i18n.t('Platform'), value: 'platform' },
|
||||
{ label: i18n.t('Node'), value: 'node' },
|
||||
{ label: i18n.t('Zone'), value: 'domain' },
|
||||
{ label: i18n.t('Zone'), value: 'zone' },
|
||||
{ label: i18n.t('AccountTemplate'), value: 'account_template' },
|
||||
{ label: i18n.t('Tags'), value: 'label' },
|
||||
{ label: i18n.t('Strategy'), value: 'name_strategy' }
|
||||
@@ -20,7 +20,9 @@ export const tableFormatter = (colName, getResourceLabel) => {
|
||||
return (row, col, cellValue) => {
|
||||
const globalResource = {}
|
||||
const value = cellValue
|
||||
if (value?.label) { return value.label }
|
||||
if (value?.label) {
|
||||
return value.label
|
||||
}
|
||||
switch (colName) {
|
||||
case 'attr':
|
||||
return instanceAttrOptions.find(attr => attr.value === value)?.label || value
|
||||
@@ -36,7 +38,9 @@ export const tableFormatter = (colName, getResourceLabel) => {
|
||||
}
|
||||
return globalResource[value] || value
|
||||
case 'protocols':
|
||||
return Array.isArray(value) ? value.map(p => { return `${p.name}/${p.port}` }).join(', ') : ''
|
||||
return Array.isArray(value) ? value.map(p => {
|
||||
return `${p.name}/${p.port}`
|
||||
}).join(', ') : ''
|
||||
case 'count':
|
||||
return value?.length || 0
|
||||
default:
|
||||
|
||||
@@ -29,13 +29,15 @@ export const scp = 'scp'
|
||||
export const apsara_stack = 'apsara_stack'
|
||||
export const lan = 'lan'
|
||||
|
||||
export const publicCloudProviders = [
|
||||
export const publicHostProviders = [
|
||||
aliyun, qcloud, qcloud_lighthouse, huaweicloud,
|
||||
baiducloud, jdcloud, kingsoftcloud, aws_china,
|
||||
aws_international, azure, azure_international,
|
||||
gcp, ucloud, volcengine
|
||||
]
|
||||
|
||||
export const publicDBProviders = [aliyun]
|
||||
|
||||
export const privateCloudProviders = [
|
||||
vmware, qingcloud_private, huaweicloud_private, ctyun_private,
|
||||
openstack, zstack, nutanix, fc, scp, apsara_stack
|
||||
|
||||
@@ -13,6 +13,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
title: '',
|
||||
activeMenu: 'CloudAccountList',
|
||||
submenu: [
|
||||
{
|
||||
@@ -39,6 +40,11 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const category = this.$route.query.category || 'host'
|
||||
const display = category === 'host' ? this.$t('Host') : this.$t('Database')
|
||||
this.config.title = `${display} - ${this.$t('CloudSync')}`
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -50,7 +50,7 @@ export default {
|
||||
]],
|
||||
[this.$t('Config'), [
|
||||
'protocols', 'su_enabled', 'su_method',
|
||||
'domain_enabled', 'ds_enabled',
|
||||
'gateway_enabled', 'ds_enabled',
|
||||
'charset'
|
||||
]],
|
||||
[this.$t('Automations'), ['automation']],
|
||||
@@ -152,7 +152,7 @@ export default {
|
||||
})
|
||||
this.fieldsMeta.protocols.el.choices = protocols
|
||||
|
||||
const fieldsCheck = ['domain_enabled', 'su_enabled']
|
||||
const fieldsCheck = ['gateway_enabled', 'su_enabled']
|
||||
for (const field of fieldsCheck) {
|
||||
const disabled = constraints[field] === false
|
||||
this.initial[field] = !disabled
|
||||
|
||||
@@ -59,7 +59,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
fields: ['domain_enabled'],
|
||||
fields: ['gateway_enabled'],
|
||||
quickActions: [],
|
||||
url: `/api/v1/assets/platforms/${this.object.id}/`,
|
||||
detailFields: [
|
||||
@@ -101,16 +101,16 @@ export default {
|
||||
const { object } = this
|
||||
const quickActions = [
|
||||
{
|
||||
title: this.$t('EnableDomain'),
|
||||
title: this.$t('EnableGateway'),
|
||||
type: 'switch',
|
||||
attrs: {
|
||||
label: this.$t('Update'),
|
||||
model: object['domain_enabled'],
|
||||
disabled: !this.canEdit || this.constraints['domain_enabled'] === false
|
||||
model: object['gateway_enabled'],
|
||||
disabled: !this.canEdit || this.constraints['gateway_enabled'] === false
|
||||
},
|
||||
callbacks: Object.freeze({
|
||||
change: (val) => {
|
||||
const data = { domain_enabled: val }
|
||||
const data = { gateway_enabled: val }
|
||||
this.$axios.patch(
|
||||
`/api/v1/assets/platforms/${object.id}/`, data).then(res => {
|
||||
this.$message.success(this.$tc('UpdateSuccessMsg'))
|
||||
|
||||
@@ -73,7 +73,7 @@ export default {
|
||||
category: {
|
||||
formatter: ChoicesFormatter
|
||||
},
|
||||
domain_enabled: {
|
||||
gateway_enabled: {
|
||||
formatterArgs: {
|
||||
showFalse: false
|
||||
}
|
||||
|
||||
@@ -76,7 +76,7 @@ export const platformFieldsMeta = (vm) => {
|
||||
}
|
||||
},
|
||||
charset: {},
|
||||
domain_enabled: {
|
||||
gateway_enabled: {
|
||||
el: {
|
||||
disabled: false
|
||||
}
|
||||
|
||||
@@ -25,9 +25,9 @@ export default {
|
||||
component: AssetSelect,
|
||||
el: {
|
||||
value: [],
|
||||
baseUrl: '/api/v1/assets/assets/?domain_enabled=true',
|
||||
baseUrl: '/api/v1/assets/assets/?gateway_enabled=true',
|
||||
treeUrlQuery: {
|
||||
domain_enabled: true
|
||||
gateway_enabled: true
|
||||
},
|
||||
canSelect: (row) => {
|
||||
return !row.platform?.name.startsWith('Gateway')
|
||||
@@ -42,7 +42,7 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
url: '/api/v1/assets/domains/'
|
||||
url: '/api/v1/assets/zones/'
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
<script>
|
||||
import BaseList from '@/views/assets/Asset/AssetList/components/BaseList'
|
||||
import AddAssetDialog from '@/views/assets/Domain/components/AddAssetDialog.vue'
|
||||
import AddAssetDialog from '@/views/assets/Zone/components/AddAssetDialog.vue'
|
||||
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
|
||||
|
||||
export default {
|
||||
@@ -34,7 +34,7 @@ export default {
|
||||
return {
|
||||
config: {
|
||||
category: 'all',
|
||||
url: `/api/v1/assets/assets/?domain=${this.object.id}&is_gateway=0`,
|
||||
url: `/api/v1/assets/assets/?zone=${this.object.id}&is_gateway=0`,
|
||||
tableConfig: {
|
||||
columns: ['name', 'address', 'platform', 'actions'],
|
||||
columnsMeta: {
|
||||
@@ -114,14 +114,14 @@ export default {
|
||||
patch_data = rows.selectedRows.map(row => {
|
||||
return {
|
||||
id: row.id,
|
||||
domain: null
|
||||
zone: null
|
||||
}
|
||||
})
|
||||
msg = patch_data.length + ' ' + this.$t('Rows')
|
||||
} else {
|
||||
patch_data = [{
|
||||
id: rows.row.id,
|
||||
domain: null
|
||||
zone: null
|
||||
}]
|
||||
msg = rows.row.name
|
||||
}
|
||||
@@ -23,7 +23,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: `/api/v1/assets/domains/${this.object.id}/`,
|
||||
url: `/api/v1/assets/zones/${this.object.id}/`,
|
||||
detailFields: [
|
||||
'name', 'assets_amount',
|
||||
{
|
||||
@@ -17,11 +17,11 @@ export default {
|
||||
const url = `/api/v1/assets/platforms/?name__startswith=Gateway`
|
||||
const platform = await this.$axios.get(url)
|
||||
initial.platform = parseInt(platform[0].id)
|
||||
initial.domain = this.$route.query.domain
|
||||
initial.zone = this.$route.query.zone
|
||||
return initial
|
||||
},
|
||||
addFieldsMeta: {
|
||||
domain: {
|
||||
zone: {
|
||||
disabled: true
|
||||
},
|
||||
platform: {
|
||||
@@ -40,7 +40,7 @@ export default {
|
||||
createSuccessNextRoute: {
|
||||
name: 'ZoneDetail',
|
||||
params: {
|
||||
id: this.$route.query.domain
|
||||
id: this.$route.query.zone
|
||||
},
|
||||
query: {
|
||||
tab: 'GatewayList'
|
||||
@@ -49,7 +49,7 @@ export default {
|
||||
updateSuccessNextRoute: {
|
||||
name: 'ZoneDetail',
|
||||
params: {
|
||||
id: this.$route.query.domain
|
||||
id: this.$route.query.zone
|
||||
},
|
||||
query: {
|
||||
tab: 'GatewayList'
|
||||
@@ -27,7 +27,7 @@ import { GenericListTable } from '@/layout/components'
|
||||
import GatewayTestDialog from '@/components/Apps/GatewayTestDialog'
|
||||
import { connectivityMeta } from '@/components/Apps/AccountListTable/const'
|
||||
import { ArrayFormatter, ChoicesFormatter, DetailFormatter, TagsFormatter } from '@/components/Table/TableFormatters'
|
||||
import AddGatewayDialog from '@/views/assets/Domain/components/AddGatewayDialog'
|
||||
import AddGatewayDialog from '@/views/assets/Zone/components/AddGatewayDialog'
|
||||
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
|
||||
|
||||
export default {
|
||||
@@ -48,7 +48,7 @@ export default {
|
||||
const vm = this
|
||||
|
||||
return {
|
||||
createDrawer: () => import('@/views/assets/Domain/DomainDetail/GatewayCreateUpdate.vue'),
|
||||
createDrawer: () => import('@/views/assets/Zone/ZoneDetail/GatewayCreateUpdate.vue'),
|
||||
detailDrawer: () => import('@/views/assets/Asset/AssetDetail'),
|
||||
transObject: {},
|
||||
testConfig: {
|
||||
@@ -57,7 +57,7 @@ export default {
|
||||
cell: ''
|
||||
},
|
||||
tableConfig: {
|
||||
url: `/api/v1/assets/gateways/?domain=${this.object.id}`,
|
||||
url: `/api/v1/assets/gateways/?zone=${this.object.id}`,
|
||||
columnsExclude: [
|
||||
'info', 'spec_info', 'auto_config'
|
||||
],
|
||||
@@ -113,7 +113,7 @@ export default {
|
||||
formatterArgs: {
|
||||
updateRoute: {
|
||||
name: 'GatewayUpdate',
|
||||
query: { domain: this.object.id, platform_type: 'linux', 'category': 'host' }
|
||||
query: { zone: this.object.id, platform_type: 'linux', 'category': 'host' }
|
||||
},
|
||||
onClone: ({ row }) => {
|
||||
this.$refs.ListTable.onClone({ row: { ...row, payload: 'pam_asset_clone' }})
|
||||
@@ -203,7 +203,7 @@ export default {
|
||||
}
|
||||
],
|
||||
onCreate: () => {
|
||||
vm.$refs.ListTable.onCreate({ query: { domain: vm.object.id, platform_type: 'linux', category: 'host' }})
|
||||
vm.$refs.ListTable.onCreate({ query: { zone: vm.object.id, platform_type: 'linux', category: 'host' }})
|
||||
}
|
||||
},
|
||||
addGatewaySetting: {
|
||||
@@ -222,14 +222,14 @@ export default {
|
||||
patch_data = rows.selectedRows.map(row => {
|
||||
return {
|
||||
id: row.id,
|
||||
domain: null
|
||||
zone: null
|
||||
}
|
||||
})
|
||||
msg = patch_data.length + ' ' + this.$t('Rows')
|
||||
} else {
|
||||
patch_data = [{
|
||||
id: rows.row.id,
|
||||
domain: null
|
||||
zone: null
|
||||
}]
|
||||
msg = rows.row.name
|
||||
}
|
||||
@@ -25,7 +25,7 @@ export default {
|
||||
TaskDetail: {},
|
||||
config: {
|
||||
activeMenu: 'Detail',
|
||||
url: '/api/v1/assets/domains/',
|
||||
url: '/api/v1/assets/zones/',
|
||||
submenu: [
|
||||
{
|
||||
title: this.$t('Basic'),
|
||||
@@ -18,10 +18,10 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
createDrawer: () => import('./DomainCreateUpdate.vue'),
|
||||
detailDrawer: () => import('./DomainDetail/index.vue'),
|
||||
createDrawer: () => import('./ZoneCreateUpdate.vue'),
|
||||
detailDrawer: () => import('@/views/assets/Zone/ZoneDetail/index.vue'),
|
||||
tableConfig: {
|
||||
url: '/api/v1/assets/domains/',
|
||||
url: '/api/v1/assets/zones/',
|
||||
columnsExclude: ['gateway'],
|
||||
columnsExtra: ['gateways'],
|
||||
columns: ['name', 'assets_amount', 'gateways', 'labels', 'comment', 'actions'],
|
||||
@@ -5,7 +5,7 @@
|
||||
:modal="false"
|
||||
:show-cancel="false"
|
||||
:show-confirm="false"
|
||||
:title="$tc('AddAssetInDomain')"
|
||||
:title="$tc('AddAssetInZone')"
|
||||
:visible.sync="setting.addAssetDialogVisible"
|
||||
after
|
||||
custom-class="asset-select-dialog"
|
||||
@@ -62,9 +62,9 @@ export default {
|
||||
type: 'select2',
|
||||
el: {
|
||||
value: [],
|
||||
url: '/api/v1/assets/assets/?domain_enabled=true',
|
||||
url: '/api/v1/assets/assets/?gateway_enabled=true',
|
||||
treeUrlQuery: {
|
||||
domain_enabled: true
|
||||
gateway_enabled: true
|
||||
},
|
||||
canSelect: (row) => {
|
||||
return !row.platform?.name.startsWith('Gateway') && this.object.assets.map(item => item.id).indexOf(row.id) === -1
|
||||
@@ -75,7 +75,7 @@ export default {
|
||||
cleanFormValue(values) {
|
||||
const data = []
|
||||
values.assets.forEach(item => {
|
||||
const d = { id: item, domain: vm.object.id }
|
||||
const d = { id: item, zone: vm.object.id }
|
||||
data.push(d)
|
||||
})
|
||||
return data
|
||||
@@ -4,7 +4,7 @@
|
||||
:destroy-on-close="true"
|
||||
:show-cancel="false"
|
||||
:show-confirm="false"
|
||||
:title="$tc('AddGatewayInDomain')"
|
||||
:title="$tc('AddGatewayInZone')"
|
||||
:visible.sync="setting.addGatewayDialogVisible"
|
||||
after
|
||||
custom-class="asset-select-dialog"
|
||||
@@ -65,7 +65,7 @@ export default {
|
||||
multiple: true,
|
||||
clearable: true,
|
||||
ajax: {
|
||||
url: '/api/v1/assets/assets/?domain_enabled=true&is_gateway=1'
|
||||
url: '/api/v1/assets/assets/?gateway_enabled=true&is_gateway=1'
|
||||
},
|
||||
disabledValues: this.object.gateways.map(item => item.id)
|
||||
}
|
||||
@@ -74,7 +74,7 @@ export default {
|
||||
cleanFormValue(values) {
|
||||
const data = []
|
||||
values.gateways.forEach(item => {
|
||||
const d = { id: item.pk, domain: vm.object.id }
|
||||
const d = { id: item.pk, zone: vm.object.id }
|
||||
data.push(d)
|
||||
})
|
||||
return data
|
||||
@@ -112,18 +112,15 @@ export const assetFieldsMeta = (vm, category, type) => {
|
||||
}, 200)
|
||||
}
|
||||
},
|
||||
domain: {
|
||||
zone: {
|
||||
component: Select2,
|
||||
disabled: false,
|
||||
el: {
|
||||
multiple: false,
|
||||
clearable: true,
|
||||
ajax: {
|
||||
url: '/api/v1/assets/domains/'
|
||||
url: '/api/v1/assets/zones/'
|
||||
}
|
||||
},
|
||||
hidden: () => {
|
||||
return vm.platform.domain_enabled === false
|
||||
}
|
||||
},
|
||||
accounts: {
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
class="asset-item"
|
||||
>
|
||||
<div class="asset-item">
|
||||
<span>{{ asset.name }}({{ asset.ip }})</span>
|
||||
<span>{{ asset.name }}<span v-if="asset.ip">({{ asset.ip }})</span></span>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
|
||||
@@ -1,53 +1,67 @@
|
||||
<template>
|
||||
<el-form class="account-content" @submit.native.prevent>
|
||||
<el-form-item>
|
||||
<el-checkbox-group v-model="choicesSelected">
|
||||
<el-checkbox
|
||||
v-for="(i) in choices"
|
||||
<el-radio-group v-model="realRadioSelected" @input="handleRadioChanged">
|
||||
<el-radio
|
||||
v-for="(i) in realChoices"
|
||||
:key="i.label"
|
||||
:disabled="i.disabled"
|
||||
:label="i.value"
|
||||
@change="handleCheckboxCheck(i, $event)"
|
||||
>
|
||||
{{ i.label }}
|
||||
<el-tooltip :content="i.tip" :open-delay="500" placement="top">
|
||||
<i class="fa fa-question-circle-o" />
|
||||
</el-tooltip>
|
||||
</el-checkbox>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<div v-if="showSpecAccounts" class="spec-accounts spec-zone">
|
||||
<div class="group-title">{{ $t('SpecAccount') }}</div>
|
||||
<TagInput
|
||||
:autocomplete="autocomplete"
|
||||
:tag-type="getTagType"
|
||||
:value="specAccountsInput"
|
||||
@change="handleTagChange"
|
||||
/>
|
||||
<span v-if="showAddTemplate">
|
||||
<el-button size="mini" type="primary" @click="showTemplateDialog=true">
|
||||
{{ $t('TemplateAdd') }}
|
||||
</el-button>
|
||||
<span class="help-block">
|
||||
{{ addTemplateHelpText }}
|
||||
</span>
|
||||
<div v-if="showSpecZone" class="spec-accounts spec-zone">
|
||||
<div class="group-title">{{ $t('SpecAccount') }}</div>
|
||||
<TagInput
|
||||
v-model="specAccountsInput"
|
||||
:autocomplete="autocomplete"
|
||||
:tag-type="getTagType"
|
||||
@change="handleTagChange"
|
||||
/>
|
||||
<span v-if="showAddTemplate">
|
||||
<el-button size="mini" type="primary" @click="showTemplateDialog=true">
|
||||
{{ $t('TemplateAdd') }}
|
||||
</el-button>
|
||||
<span class="help-block">
|
||||
{{ addTemplateHelpText }}
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="showVirtualAccountCheckbox" class="spec-zone">
|
||||
<div class="group-title">{{ $t('VirtualAccounts') }}</div>
|
||||
<el-checkbox
|
||||
<!-- <div v-if="showNotAccounts" class="not-accounts spec-zone">-->
|
||||
<!-- <div class="group-title">{{ $t('ExcludeAccount') }}</div>-->
|
||||
<!-- <TagInput v-model="excludeAccountsInput" @change="handleTagChange" />-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div v-if="enableVirtualAccount" class="spec-zone virtual-choices">
|
||||
<el-checkbox v-model="virtualChecked" @change="handleVirtualChecked">
|
||||
{{ virtualAccount.label }}
|
||||
</el-checkbox>
|
||||
<el-select
|
||||
v-if="virtualChecked"
|
||||
v-model="virtualSelected"
|
||||
:multiple="true"
|
||||
:placeholder="$t('SelectVirtualAccount')"
|
||||
@change="handleVirtualChecked"
|
||||
>
|
||||
<el-option
|
||||
v-for="i in virtualAccounts"
|
||||
:key="i.label"
|
||||
:label="i.value"
|
||||
@change="handleCheckboxCheck(i, $event)"
|
||||
:label="i.label"
|
||||
:value="i.value"
|
||||
>
|
||||
{{ i.label }}
|
||||
<el-tooltip :content="i.tip" :open-delay="500" placement="top">
|
||||
<i class="fa fa-question-circle-o" />
|
||||
</el-tooltip>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<Dialog
|
||||
@@ -65,12 +79,16 @@
|
||||
<script>
|
||||
import { TagInput } from '@/components/Form/FormFields'
|
||||
import {
|
||||
AccountLabelMapper,
|
||||
accountTemplateTable,
|
||||
AllAccount,
|
||||
AnonymousAccount,
|
||||
ManualAccount,
|
||||
NotAccount,
|
||||
realChoices,
|
||||
SameAccount,
|
||||
SpecAccount
|
||||
SpecAccount,
|
||||
virtualAccount,
|
||||
virtualAccounts
|
||||
} from '@/views/perms/const'
|
||||
import ListTable from '@/components/Table/ListTable'
|
||||
import Dialog from '@/components/Dialog'
|
||||
@@ -102,7 +120,7 @@ export default {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showVirtualAccount: {
|
||||
enableVirtualAccount: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
@@ -116,53 +134,23 @@ export default {
|
||||
data() {
|
||||
const vm = this
|
||||
const virtual = '@VIRTUAL'
|
||||
const choices = [
|
||||
{
|
||||
label: AccountLabelMapper[AllAccount],
|
||||
value: AllAccount,
|
||||
tip: this.$t('AllAccountTip')
|
||||
},
|
||||
{
|
||||
label: AccountLabelMapper[SpecAccount],
|
||||
value: SpecAccount,
|
||||
tip: this.$t('SpecAccountTip')
|
||||
},
|
||||
{
|
||||
label: this.$t('VirtualAccounts'),
|
||||
value: virtual,
|
||||
tip: this.$t('VirtualAccountHelpMsg'),
|
||||
disabled: !this.showVirtualAccount,
|
||||
has: this.showVirtualAccount !== false
|
||||
}
|
||||
]
|
||||
return {
|
||||
ALL: AllAccount,
|
||||
SPEC: SpecAccount,
|
||||
VIRTUAL: virtual,
|
||||
EXCLUDE: NotAccount,
|
||||
showTemplateDialog: false,
|
||||
choices: choices,
|
||||
virtualAccounts: [
|
||||
{
|
||||
label: AccountLabelMapper[ManualAccount],
|
||||
value: ManualAccount,
|
||||
tip: this.$t('ManualAccountTip')
|
||||
},
|
||||
{
|
||||
label: AccountLabelMapper[SameAccount],
|
||||
value: SameAccount,
|
||||
tip: this.$t('SameAccountTip')
|
||||
},
|
||||
{
|
||||
label: AccountLabelMapper[AnonymousAccount],
|
||||
value: AnonymousAccount,
|
||||
tip: this.$t('AnonymousAccountTip')
|
||||
}
|
||||
],
|
||||
realRadioSelected: this.ALL,
|
||||
realChoices: realChoices,
|
||||
virtualChecked: false,
|
||||
virtualSelected: [],
|
||||
output: [],
|
||||
excludeAccountsInput: [],
|
||||
virtualAccounts: virtualAccounts,
|
||||
virtualAccountsNames: [ManualAccount, SameAccount, AnonymousAccount],
|
||||
choicesSelected: [this.ALL],
|
||||
specAccountsInput: [],
|
||||
specAccountsTemplate: [],
|
||||
showSpecAccounts: false,
|
||||
showSpecZone: false,
|
||||
getTagType: (tag) => {
|
||||
if (vm.specAccountsTemplate.filter(i => i.username === tag).length > 0) {
|
||||
return 'primary'
|
||||
@@ -170,43 +158,8 @@ export default {
|
||||
return 'info'
|
||||
}
|
||||
},
|
||||
accountTemplateTable: {
|
||||
tableConfig: {
|
||||
url: '/api/v1/accounts/account-templates/',
|
||||
columns: [
|
||||
'name', 'username', 'has_secret', 'comment',
|
||||
'date_created', 'date_updated'
|
||||
],
|
||||
columnsMeta: {
|
||||
name: {
|
||||
formatterArgs: {
|
||||
openInNewPage: true,
|
||||
getRoute({ row, col, cellValue }) {
|
||||
return {
|
||||
name: 'AccountTemplateDetail',
|
||||
params: {
|
||||
id: row.id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
has_secret: {
|
||||
formatterArgs: {
|
||||
showFalse: false
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
has: false
|
||||
}
|
||||
}
|
||||
},
|
||||
headerActions: {
|
||||
hasLeftActions: false,
|
||||
hasImport: false,
|
||||
hasExport: false
|
||||
}
|
||||
},
|
||||
showExcludeZone: false,
|
||||
accountTemplateTable: accountTemplateTable,
|
||||
autocomplete: (query, cb) => {
|
||||
const data = {
|
||||
username: query,
|
||||
@@ -229,51 +182,59 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showVirtualAccountCheckbox() {
|
||||
if (!this.showVirtualAccount) {
|
||||
return false
|
||||
}
|
||||
const hasVirtual = this.choicesSelected.filter(i => {
|
||||
return i && i.startsWith('@') && i !== '@ALL' && i !== '@SPEC'
|
||||
})
|
||||
return hasVirtual.length > 0
|
||||
virtualAccount() {
|
||||
return virtualAccount
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
realRadioSelected(val) {
|
||||
this.showSpecZone = val === this.SPEC
|
||||
this.showExcludeZone = val === this.EXCLUDE
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initDefaultChoice()
|
||||
setTimeout(() => {
|
||||
if (this.value.length === 0) {
|
||||
this.$emit('input', ['@ALL'])
|
||||
} else {
|
||||
this.$emit('input', this.value)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getVirtualChoices(val) {
|
||||
return this.virtualAccounts.filter(i => {
|
||||
return val.includes(i.value)
|
||||
}).map(i => i.value)
|
||||
},
|
||||
getExcludeChoices(val) {
|
||||
return val.filter(i => i.startsWith('!')).map(i => i.substring(1))
|
||||
},
|
||||
getSpecValues(val) {
|
||||
return val.filter(i => !i.startsWith('@') && !i.startsWith('!'))
|
||||
},
|
||||
initDefaultChoice() {
|
||||
const choicesSelected = this.value.filter(i => {
|
||||
return i.startsWith('@') && i !== this.SPEC && i !== this.VIRTUAL
|
||||
})
|
||||
// 是否添加特定账号选择
|
||||
const specAccountsInput = this.value.filter(i => !i.startsWith('@') && i !== this.SPEC)
|
||||
if (specAccountsInput.length > 0 && !choicesSelected.includes(this.ALL)) {
|
||||
choicesSelected.push(this.SPEC)
|
||||
this.showSpecAccounts = true
|
||||
}
|
||||
// 是否添加虚拟账号选择
|
||||
const hasVirtual = this.value.filter(i => {
|
||||
return i && i.startsWith('@') && i !== '@ALL' && i !== '@SPEC'
|
||||
})
|
||||
if (hasVirtual.length > 0 && !choicesSelected.includes(this.VIRTUAL)) {
|
||||
choicesSelected.push(this.VIRTUAL)
|
||||
const value = this.value || []
|
||||
if (value.length === 0) {
|
||||
value.push(this.ALL)
|
||||
}
|
||||
|
||||
// 如果没有就设置 ALL
|
||||
if (choicesSelected.length === 0) {
|
||||
choicesSelected.push(this.ALL)
|
||||
const specAccountsInput = this.getSpecValues(value)
|
||||
// const excludeAccountsInput = this.getExcludeChoices(value)
|
||||
// 先清理 radio
|
||||
const isAll = value.includes(this.ALL)
|
||||
if (isAll) {
|
||||
this.realRadioSelected = this.ALL
|
||||
} else if (specAccountsInput.length > 0) {
|
||||
this.realRadioSelected = this.SPEC
|
||||
this.specAccountsInput = specAccountsInput
|
||||
// } else if (excludeAccountsInput.length > 0) {
|
||||
// this.realRadioSelected = this.EXCLUDE
|
||||
// this.excludeAccountsInput = excludeAccountsInput
|
||||
} else {
|
||||
this.realRadioSelected = this.ALL
|
||||
}
|
||||
|
||||
// 清理虚拟账号
|
||||
const virtualChoices = this.getVirtualChoices(this.value)
|
||||
if (virtualChoices.length > 0) {
|
||||
this.virtualChecked = true
|
||||
this.virtualSelected = virtualChoices
|
||||
}
|
||||
this.choicesSelected = choicesSelected
|
||||
this.specAccountsInput = specAccountsInput
|
||||
},
|
||||
handleAccountTemplateCancel() {
|
||||
this.showTemplateDialog = false
|
||||
@@ -288,33 +249,35 @@ export default {
|
||||
this.outputValue()
|
||||
}, 100)
|
||||
},
|
||||
handleCheckboxCheck(item, checked) {
|
||||
if (item.value === this.SPEC) {
|
||||
this.showSpecAccounts = checked
|
||||
} else if (item.value === this.ALL) {
|
||||
this.showSpecAccounts = checked ? false : checked
|
||||
}
|
||||
if (item.value === this.ALL) {
|
||||
this.choicesSelected = this.choicesSelected.filter(i => i !== this.SPEC)
|
||||
} else if (item.value === this.SPEC) {
|
||||
this.choicesSelected = this.choicesSelected.filter(i => i !== this.ALL)
|
||||
} else if (item.value === this.VIRTUAL) {
|
||||
if (!checked) {
|
||||
this.choicesSelected = this.choicesSelected.filter(i => !this.virtualAccountsNames.includes(i))
|
||||
}
|
||||
}
|
||||
handleVirtualChecked(evt, checked) {
|
||||
console.log('Vhcek cch')
|
||||
this.outputValue()
|
||||
},
|
||||
handleTagChange(val) {
|
||||
this.specAccountsInput = val
|
||||
handleRadioChanged(value) {
|
||||
this.outputValue()
|
||||
},
|
||||
handleTagChange() {
|
||||
this.outputValue()
|
||||
},
|
||||
outputValue() {
|
||||
let choicesSelected = this.choicesSelected
|
||||
if (this.showSpecAccounts) {
|
||||
// 这是真是的
|
||||
let choicesSelected = []
|
||||
if (this.realRadioSelected === this.ALL) {
|
||||
choicesSelected = [this.ALL]
|
||||
} else if (this.realRadioSelected === this.SPEC && this.showSpecZone) {
|
||||
const templateIds = this.specAccountsTemplate.map(i => `%${i.id}`)
|
||||
choicesSelected = [...this.choicesSelected, ...this.specAccountsInput, ...templateIds]
|
||||
choicesSelected = [this.realRadioSelected, ...this.specAccountsInput, ...templateIds]
|
||||
}
|
||||
// else if (this.realRadioSelected === this.EXCLUDE && this.excludeAccountsInput) {
|
||||
// choicesSelected = [...this.excludeAccountsInput].map(i => '!' + i)
|
||||
// }
|
||||
|
||||
if (this.virtualChecked) {
|
||||
choicesSelected = [...choicesSelected, ...this.virtualSelected]
|
||||
}
|
||||
|
||||
this.$log.debug('choicesSelected', choicesSelected)
|
||||
|
||||
this.$emit('input', choicesSelected)
|
||||
this.$emit('change', choicesSelected)
|
||||
}
|
||||
@@ -349,13 +312,19 @@ export default {
|
||||
|
||||
.spec-zone {
|
||||
border-bottom: dashed 1px var(--color-border);
|
||||
padding-bottom: 5px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.virtual-choices {
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.account-content {
|
||||
::v-deep {
|
||||
.el-form-item__content {
|
||||
|
||||
@@ -67,6 +67,7 @@ export const AssetPermissionTableMeta = {
|
||||
}
|
||||
},
|
||||
users_amount: {
|
||||
width: 80,
|
||||
formatter: AmountFormatter,
|
||||
formatterArgs: {
|
||||
async: true,
|
||||
@@ -78,7 +79,7 @@ export const AssetPermissionTableMeta = {
|
||||
}
|
||||
},
|
||||
user_groups_amount: {
|
||||
width: 100,
|
||||
width: 80,
|
||||
formatter: AmountFormatter,
|
||||
formatterArgs: {
|
||||
async: true,
|
||||
@@ -90,6 +91,7 @@ export const AssetPermissionTableMeta = {
|
||||
}
|
||||
},
|
||||
assets_amount: {
|
||||
width: 80,
|
||||
formatter: AmountFormatter,
|
||||
formatterArgs: {
|
||||
async: true,
|
||||
@@ -113,6 +115,7 @@ export const AssetPermissionTableMeta = {
|
||||
}
|
||||
},
|
||||
accounts: {
|
||||
width: 80,
|
||||
formatter: AmountFormatter,
|
||||
formatterArgs: {
|
||||
cellValueToRemove: ['@SPEC'],
|
||||
@@ -154,6 +157,7 @@ export const AssetPermissionListPageSearchConfigOptions = [
|
||||
|
||||
export const AllAccount = '@ALL'
|
||||
export const SpecAccount = '@SPEC'
|
||||
export const NotAccount = '@NOT'
|
||||
export const SameAccount = '@USER'
|
||||
export const ManualAccount = '@INPUT'
|
||||
export const AnonymousAccount = '@ANON'
|
||||
@@ -161,7 +165,88 @@ export const AnonymousAccount = '@ANON'
|
||||
export const AccountLabelMapper = {
|
||||
[AllAccount]: i18n.t('AllAccounts'),
|
||||
[SpecAccount]: i18n.t('SpecAccount'),
|
||||
[NotAccount]: i18n.t('ExcludeAccount'),
|
||||
[SameAccount]: i18n.t('SameAccount'),
|
||||
[ManualAccount]: i18n.t('ManualAccount'),
|
||||
[AnonymousAccount]: i18n.t('AnonymousAccount')
|
||||
}
|
||||
|
||||
export const virtualAccount = {
|
||||
label: i18n.t('VirtualAccounts'),
|
||||
value: '@VIRTUAL',
|
||||
tip: i18n.t('VirtualAccountHelpMsg')
|
||||
}
|
||||
|
||||
export const realChoices = [
|
||||
{
|
||||
label: AccountLabelMapper[AllAccount],
|
||||
value: AllAccount,
|
||||
tip: i18n.t('AllAccountTip')
|
||||
},
|
||||
{
|
||||
label: AccountLabelMapper[SpecAccount],
|
||||
value: SpecAccount,
|
||||
tip: i18n.t('SpecAccountTip')
|
||||
}
|
||||
// {
|
||||
// label: AccountLabelMapper[NotAccount],
|
||||
// value: NotAccount,
|
||||
// tip: i18n.t('NotAccountTip')
|
||||
// }
|
||||
]
|
||||
|
||||
export const virtualAccounts = [
|
||||
{
|
||||
label: AccountLabelMapper[ManualAccount],
|
||||
value: ManualAccount,
|
||||
tip: i18n.t('ManualAccountTip')
|
||||
},
|
||||
{
|
||||
label: AccountLabelMapper[SameAccount],
|
||||
value: SameAccount,
|
||||
tip: i18n.t('SameAccountTip')
|
||||
},
|
||||
{
|
||||
label: AccountLabelMapper[AnonymousAccount],
|
||||
value: AnonymousAccount,
|
||||
tip: i18n.t('AnonymousAccountTip')
|
||||
}
|
||||
]
|
||||
|
||||
export const accountTemplateTable = {
|
||||
tableConfig: {
|
||||
url: '/api/v1/accounts/account-templates/',
|
||||
columns: [
|
||||
'name', 'username', 'has_secret', 'comment',
|
||||
'date_created', 'date_updated'
|
||||
],
|
||||
columnsMeta: {
|
||||
name: {
|
||||
formatterArgs: {
|
||||
openInNewPage: true,
|
||||
getRoute({ row, col, cellValue }) {
|
||||
return {
|
||||
name: 'AccountTemplateDetail',
|
||||
params: {
|
||||
id: row.id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
has_secret: {
|
||||
formatterArgs: {
|
||||
showFalse: false
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
has: false
|
||||
}
|
||||
}
|
||||
},
|
||||
headerActions: {
|
||||
hasLeftActions: false,
|
||||
hasImport: false,
|
||||
hasExport: false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,6 +68,7 @@ export default {
|
||||
formatterArgs: {
|
||||
hasUpdate: false,
|
||||
hasClone: false,
|
||||
width: '180px',
|
||||
onDelete: function({ row }) {
|
||||
this.$axios.delete(`${ajaxUrl}${row.id}/`).then(res => {
|
||||
this.reloadTable()
|
||||
@@ -129,7 +130,7 @@ export default {
|
||||
this.$axios.get(url).then(res => {
|
||||
return this.makeCredReq(res)
|
||||
}).then((options) => {
|
||||
if (!location.protocol.startsWith('https')) {
|
||||
if (!location.protocol.startsWith('https') && !location.host.startsWith('localhost:')) {
|
||||
throw new Error(this.$tc('HTTPSRequiredForSupport'))
|
||||
}
|
||||
return navigator.credentials.create(options)
|
||||
|
||||
@@ -24,29 +24,39 @@
|
||||
style="margin-top: 15px"
|
||||
type="warning"
|
||||
/>
|
||||
<IBox v-if="!store.getters.publicSettings['PRIVACY_MODE']" :title="$tc('InformationModification')" fa="fa-edit">
|
||||
<IBox
|
||||
v-if="!store.getters.publicSettings['PRIVACY_MODE']"
|
||||
:title="$tc('InformationModification')"
|
||||
class="update-info"
|
||||
fa="fa-edit"
|
||||
>
|
||||
<table>
|
||||
<tr>
|
||||
<td> {{ $t('Phone') }}</td>
|
||||
<td>
|
||||
<td class="label"> {{ $t('Phone') }}</td>
|
||||
<td class="value">
|
||||
<PhoneInput :value="object.phone" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> {{ $t('WeChat') }}</td>
|
||||
<td>
|
||||
<td class="label"> {{ $t('WeChat') }}</td>
|
||||
<td class="value">
|
||||
<el-input v-model="object.wechat" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label" />
|
||||
<td class="value">
|
||||
<el-button
|
||||
size="small"
|
||||
style="margin-top: 10px"
|
||||
type="primary"
|
||||
@click="updateProfile"
|
||||
>
|
||||
{{ $t('Update') }}
|
||||
</el-button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<el-button
|
||||
size="small"
|
||||
style="margin-top: 10px"
|
||||
type="primary"
|
||||
@click="updateProfile"
|
||||
>
|
||||
{{ $t('Update') }}
|
||||
</el-button>
|
||||
</IBox>
|
||||
</template>
|
||||
</TwoCol>
|
||||
@@ -487,6 +497,29 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.update-info {
|
||||
::v-deep {
|
||||
.el-input-group {
|
||||
.el-select {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
.label {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -56,7 +56,7 @@ export default {
|
||||
platform: {
|
||||
hidden: () => true
|
||||
},
|
||||
domain: {
|
||||
zone: {
|
||||
hidden: () => {
|
||||
return !this.$store.getters.hasValidLicense
|
||||
},
|
||||
|
||||
@@ -24,7 +24,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: '/api/v1/accounts/accounts/',
|
||||
columnsMeta: {
|
||||
name: {
|
||||
formatter: (row) => <span>{row.name}</span>
|
||||
|
||||
@@ -1,23 +1,42 @@
|
||||
<template>
|
||||
<IBox>
|
||||
<GenericCreateUpdateForm v-bind="$data" />
|
||||
</IBox>
|
||||
<div class="auth-container">
|
||||
<IBox :title="$tc('AuthIntegration')" class="auth-box-wrapper">
|
||||
<el-row :gutter="20">
|
||||
<AuthMethod
|
||||
v-for="item in authItems"
|
||||
:key="item.title"
|
||||
v-bind="item"
|
||||
/>
|
||||
</el-row>
|
||||
</IBox>
|
||||
<IBox :title="$tc('BasicSettings')" class="auth-box-wrapper">
|
||||
<GenericCreateUpdateForm v-bind="$data" />
|
||||
</IBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GenericCreateUpdateForm } from '@/layout/components'
|
||||
import AuthMethod from './components/AuthMethod.vue'
|
||||
import IBox from '@/components/Common/IBox'
|
||||
import { getAuthItems } from './const'
|
||||
import { GenericCreateUpdateForm } from '@/layout/components'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IBox,
|
||||
AuthMethod,
|
||||
GenericCreateUpdateForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
authItems: [],
|
||||
searchQuery: '',
|
||||
url: '/api/v1/settings/setting/?category=auth',
|
||||
fields: [
|
||||
'EMAIL_SUFFIX', 'FORGOT_PASSWORD_URL', 'LOGIN_REDIRECT_MSG_ENABLED'
|
||||
'EMAIL_SUFFIX',
|
||||
'FORGOT_PASSWORD_URL',
|
||||
'LOGIN_REDIRECT_MSG_ENABLED'
|
||||
],
|
||||
fieldsMeta: {
|
||||
FORGOT_PASSWORD_URL: {
|
||||
@@ -31,11 +50,42 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
computed: {
|
||||
...mapState({
|
||||
authMethodsSetting: state => state.settings.authMethods
|
||||
})
|
||||
},
|
||||
async mounted() {
|
||||
await this.$store.dispatch('settings/getAuthMethods')
|
||||
await this.initAuthItems()
|
||||
},
|
||||
methods: {
|
||||
async initAuthItems() {
|
||||
let authItems = await getAuthItems(this)
|
||||
authItems = authItems.map(item => {
|
||||
return {
|
||||
...item,
|
||||
enabled: this.authMethodsSetting[item.authKey]
|
||||
}
|
||||
})
|
||||
this.authItems = authItems.sort((a, b) => {
|
||||
if (a.enabled !== b.enabled) {
|
||||
return a.enabled ? -1 : 1
|
||||
}
|
||||
return a.title.localeCompare(b.title)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.auth-container {
|
||||
width: 100%;
|
||||
|
||||
.auth-box-wrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -23,6 +23,9 @@ export default {
|
||||
'AUTH_PASSKEY', 'FIDO_SERVER_ID', 'FIDO_SERVER_NAME'
|
||||
],
|
||||
fieldsMeta: {
|
||||
'AUTH_PASSKEY': {
|
||||
'helpTextAsTip': false
|
||||
},
|
||||
'FIDO_SERVER_ID': {
|
||||
placeholder: 'js.example.org'
|
||||
}
|
||||
|
||||
113
src/views/settings/Auth/components/AuthMethod.vue
Normal file
113
src/views/settings/Auth/components/AuthMethod.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<el-col :lg="6" :md="8" :sm="12" :span="8" :xl="4" :xs="24" class="auth-item-col">
|
||||
<el-card ref="card" class="auth-card" shadow="hover">
|
||||
<div slot="header" class="auth-item-header">
|
||||
<div class="auth-item-header-left">
|
||||
<img :src="logo" alt="auth-logo" class="auth-logo">
|
||||
<div :title="title" class="auth-item-header-title">{{ title }}</div>
|
||||
</div>
|
||||
<div class="auth-item-actions">
|
||||
<el-switch
|
||||
v-model="isEnabled"
|
||||
active-color="#148f76"
|
||||
inactive-color="#e5e6e7"
|
||||
@change="onChangeStatus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
logo: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
authKey: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
enabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cardBody: null,
|
||||
isEnabled: this.enabled
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
enabled(newVal) {
|
||||
this.isEnabled = newVal
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChangeStatus(value) {
|
||||
this.$store.dispatch('settings/updateAuthItemStatus', [this.authKey, value])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.auth-item-col {
|
||||
margin: 10px 0;
|
||||
padding: 0 10px;
|
||||
|
||||
.auth-card {
|
||||
transition: all 0.3s;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
.auth-item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px;
|
||||
|
||||
.auth-item-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.auth-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.auth-item-header-title {
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-item-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,9 @@
|
||||
import { Select2 } from '@/components/Form/FormFields'
|
||||
import store from '@/store'
|
||||
import { Select2 } from '@/components/Form/FormFields'
|
||||
import i18n from '@/i18n/i18n'
|
||||
import { ObjectLocalStorage } from '@/utils/common'
|
||||
|
||||
export const authLocalStorage = new ObjectLocalStorage('auth')
|
||||
|
||||
export function getOrgSelect2Meta() {
|
||||
return {
|
||||
@@ -18,3 +22,109 @@ export function getOrgSelect2Meta() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function getAuthItems() {
|
||||
const xpackBackends = [
|
||||
{
|
||||
name: 'LdapHA',
|
||||
logo: require('@/assets/img/auth/ldap_logo.png'),
|
||||
title: i18n.t('LDAP HA'),
|
||||
authKey: 'AUTH_LDAP_HA',
|
||||
description: ''
|
||||
},
|
||||
{
|
||||
name: 'OIDC',
|
||||
title: i18n.t('OIDC'),
|
||||
logo: require('@/assets/img/auth/oidc_logo.png'),
|
||||
authKey: 'AUTH_OPENID',
|
||||
description: ''
|
||||
},
|
||||
{
|
||||
name: 'SAML2',
|
||||
logo: require('@/assets/img/auth/saml2_logo.png'),
|
||||
title: i18n.t('SAML2'),
|
||||
authKey: 'AUTH_SAML2',
|
||||
description: ''
|
||||
},
|
||||
{
|
||||
name: 'OAuth2',
|
||||
logo: require('@/assets/img/auth/oauth2_logo.png'),
|
||||
title: i18n.t('OAuth2'),
|
||||
authKey: 'AUTH_OAUTH2',
|
||||
description: ''
|
||||
},
|
||||
{
|
||||
name: 'WeCom',
|
||||
logo: require('@/assets/img/auth/wecom_logo.png'),
|
||||
title: i18n.t('WeCom'),
|
||||
authKey: 'AUTH_WECOM',
|
||||
description: ''
|
||||
},
|
||||
{
|
||||
name: 'DingTalk',
|
||||
logo: require('@/assets/img/auth/dingtalk_logo.webp'),
|
||||
title: i18n.t('DingTalk'),
|
||||
authKey: 'AUTH_DINGTALK',
|
||||
description: ''
|
||||
},
|
||||
{
|
||||
name: 'FeiShu',
|
||||
logo: require('@/assets/img/auth/feishu_logo.png'),
|
||||
title: i18n.t('FeiShu'),
|
||||
authKey: 'AUTH_FEISHU',
|
||||
description: ''
|
||||
},
|
||||
{
|
||||
name: 'Lark',
|
||||
logo: require('@/assets/img/auth/lark_logo.png'),
|
||||
title: i18n.t('Lark'),
|
||||
authKey: 'AUTH_LARK',
|
||||
description: ''
|
||||
},
|
||||
{
|
||||
name: 'Slack',
|
||||
logo: require('@/assets/img/auth/slack_logo.png'),
|
||||
title: i18n.t('Slack'),
|
||||
authKey: 'AUTH_SLACK',
|
||||
description: ''
|
||||
},
|
||||
{
|
||||
name: 'Radius',
|
||||
logo: require('@/assets/img/auth/radius_logo.png'),
|
||||
title: i18n.t('Radius'),
|
||||
authKey: 'AUTH_RADIUS',
|
||||
description: ''
|
||||
}
|
||||
]
|
||||
|
||||
const authItems = [
|
||||
{
|
||||
name: 'LDAP',
|
||||
logo: require('@/assets/img/auth/ldap_logo.png'),
|
||||
title: i18n.t('Ldap'),
|
||||
authKey: 'AUTH_LDAP',
|
||||
description: ''
|
||||
},
|
||||
{
|
||||
name: 'CAS',
|
||||
logo: require('@/assets/img/auth/cas_logo.png'),
|
||||
title: i18n.t('CAS'),
|
||||
authKey: 'AUTH_CAS',
|
||||
description: ''
|
||||
},
|
||||
{
|
||||
name: 'Passkey',
|
||||
logo: require('@/assets/img/auth/passkey_logo.png'),
|
||||
title: i18n.t('Passkey'),
|
||||
authKey: 'AUTH_PASSKEY',
|
||||
description: ''
|
||||
}
|
||||
]
|
||||
|
||||
if (store.getters.hasValidLicense) {
|
||||
// 把 AUTH_LDAP_HA 加到 authItems 中的 AUTH_LDAP 后面
|
||||
authItems.push(...xpackBackends)
|
||||
}
|
||||
return authItems
|
||||
}
|
||||
|
||||
|
||||
@@ -24,6 +24,8 @@ import SAML2 from './SAML2'
|
||||
import OAuth2 from './OAuth2'
|
||||
import Passkey from './Passkey.vue'
|
||||
import Slack from './Slack.vue'
|
||||
import { getAuthItems } from './const'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -46,113 +48,38 @@ export default {
|
||||
Slack
|
||||
},
|
||||
data() {
|
||||
let extraBackends = []
|
||||
let ldapHABackends = []
|
||||
if (this.$store.getters.hasValidLicense) {
|
||||
extraBackends = [
|
||||
{
|
||||
title: this.$t('OIDC'),
|
||||
name: 'OIDC',
|
||||
key: 'AUTH_OPENID'
|
||||
},
|
||||
{
|
||||
title: this.$t('SAML2'),
|
||||
name: 'SAML2',
|
||||
key: 'AUTH_SAML2'
|
||||
},
|
||||
{
|
||||
title: this.$t('OAuth2'),
|
||||
name: 'OAuth2',
|
||||
key: 'AUTH_OAUTH2'
|
||||
},
|
||||
{
|
||||
title: this.$t('WeCom'),
|
||||
name: 'WeCom',
|
||||
key: 'AUTH_WECOM'
|
||||
},
|
||||
{
|
||||
title: this.$t('DingTalk'),
|
||||
name: 'DingTalk',
|
||||
key: 'AUTH_DINGTALK'
|
||||
},
|
||||
{
|
||||
title: this.$t('FeiShu'),
|
||||
name: 'FeiShu',
|
||||
key: 'AUTH_FEISHU'
|
||||
},
|
||||
{
|
||||
title: 'Lark',
|
||||
name: 'Lark',
|
||||
key: 'AUTH_LARK'
|
||||
},
|
||||
{
|
||||
title: this.$t('Slack'),
|
||||
name: 'Slack',
|
||||
key: 'AUTH_SLACK'
|
||||
},
|
||||
{
|
||||
title: this.$t('Radius'),
|
||||
name: 'Radius',
|
||||
key: 'AUTH_RADIUS'
|
||||
}
|
||||
]
|
||||
ldapHABackends = [
|
||||
{
|
||||
title: this.$t('LDAP HA'),
|
||||
name: 'LdapHA',
|
||||
key: 'AUTH_LDAP_HA'
|
||||
}
|
||||
]
|
||||
}
|
||||
return {
|
||||
loading: true,
|
||||
activeMenu: 'Basic',
|
||||
submenu: [
|
||||
authMethods: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
authMethodsSetting: state => state.settings.authMethods
|
||||
}),
|
||||
submenu() {
|
||||
return [
|
||||
{
|
||||
title: this.$t('Basic'),
|
||||
name: 'Basic'
|
||||
},
|
||||
{
|
||||
title: this.$t('Ldap'),
|
||||
name: 'LDAP',
|
||||
key: 'AUTH_LDAP'
|
||||
},
|
||||
...ldapHABackends,
|
||||
{
|
||||
title: this.$t('CAS'),
|
||||
name: 'CAS',
|
||||
key: 'AUTH_CAS'
|
||||
},
|
||||
{
|
||||
title: this.$t('Passkey'),
|
||||
name: 'Passkey',
|
||||
key: 'AUTH_PASSKEY'
|
||||
},
|
||||
...extraBackends
|
||||
...this.authMethods.map(item => {
|
||||
return {
|
||||
...item,
|
||||
hidden: () => !this.authMethodsSetting[item.authKey]
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
componentData() {
|
||||
return {}
|
||||
}
|
||||
created() {
|
||||
this.$store.dispatch('settings/getAuthMethods').then()
|
||||
},
|
||||
mounted() {
|
||||
this.$axios.get('/api/v1/settings/setting/?category=auth').then(res => {
|
||||
for (const item of this.submenu) {
|
||||
const key = item.key
|
||||
if (!key) {
|
||||
continue
|
||||
}
|
||||
if (res[key]) {
|
||||
item.icon = 'fa-check-circle text-primary'
|
||||
}
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
methods: {}
|
||||
async mounted() {
|
||||
this.authMethods = getAuthItems()
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -79,7 +79,6 @@ export default {
|
||||
width: '200px'
|
||||
},
|
||||
actions: {
|
||||
prop: 'id',
|
||||
formatterArgs: {
|
||||
canUpdate: this.$hasPerm('orgs.change_organization'),
|
||||
canDelete: function({ row }) {
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
<script>
|
||||
import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
|
||||
import IBox from '@/components/Common/IBox/index.vue'
|
||||
import { LeakPasswords } from '@/components'
|
||||
|
||||
export default {
|
||||
name: 'EmailContent',
|
||||
@@ -35,14 +36,18 @@ export default {
|
||||
[
|
||||
this.$t('PasswordRule'),
|
||||
[
|
||||
'SECURITY_PASSWORD_MIN_LENGTH', 'SECURITY_ADMIN_USER_PASSWORD_MIN_LENGTH',
|
||||
'SECURITY_LEAK_PASSWORD_LIST', 'SECURITY_PASSWORD_MIN_LENGTH', 'SECURITY_ADMIN_USER_PASSWORD_MIN_LENGTH',
|
||||
'SECURITY_PASSWORD_UPPER_CASE', 'SECURITY_PASSWORD_LOWER_CASE',
|
||||
'SECURITY_PASSWORD_NUMBER', 'SECURITY_PASSWORD_SPECIAL_CHAR'
|
||||
]
|
||||
]
|
||||
],
|
||||
successUrl: { name: 'Settings', params: { activeMenu: 'EmailContent' }},
|
||||
fieldsMeta: {},
|
||||
fieldsMeta: {
|
||||
SECURITY_LEAK_PASSWORD_LIST: {
|
||||
component: LeakPasswords,
|
||||
label: this.$t('LeakPasswordList')
|
||||
}
|
||||
},
|
||||
url: '/api/v1/settings/setting/?category=security_password'
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,18 +1,38 @@
|
||||
<template>
|
||||
<IBox>
|
||||
<GenericCreateUpdateForm submit-method="patch" v-bind="config" />
|
||||
<WatermarkHelpDialog :variables="sessionVariables" :visible.sync="showSessionHelpDialog" />
|
||||
<WatermarkHelpDialog :variables="consoleVariables" :visible.sync="showConsoleHelpDialog" />
|
||||
</IBox>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IBox from '@/components/Common/IBox/index.vue'
|
||||
import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm/index.vue'
|
||||
import WatermarkHelpDialog from './WatermarkHelpDialog.vue'
|
||||
|
||||
export default {
|
||||
name: 'SessionSecurity',
|
||||
components: { GenericCreateUpdateForm, IBox },
|
||||
components: { GenericCreateUpdateForm, IBox, WatermarkHelpDialog },
|
||||
data() {
|
||||
return {
|
||||
showSessionHelpDialog: false,
|
||||
showConsoleHelpDialog: false,
|
||||
sessionVariables: {
|
||||
'userId': this.$t('userId'),
|
||||
'name': this.$t('name'),
|
||||
'userName': this.$t('userName'),
|
||||
'currentTime': this.$t('currentTime'),
|
||||
'assetId': this.$t('assetId'),
|
||||
'assetName': this.$t('assetName'),
|
||||
'assetAddress': this.$t('assetAddress')
|
||||
},
|
||||
consoleVariables: {
|
||||
'userId': this.$t('userId'),
|
||||
'name': this.$t('name'),
|
||||
'userName': this.$t('userName'),
|
||||
'currentTime': this.$t('currentTime')
|
||||
},
|
||||
config: {
|
||||
url: '/api/v1/settings/setting/?category=security_session',
|
||||
hasDetailInMsg: false,
|
||||
@@ -20,16 +40,66 @@ export default {
|
||||
[
|
||||
this.$t('Basic'),
|
||||
[
|
||||
'SECURITY_WATERMARK_ENABLED',
|
||||
'SECURITY_SESSION_SHARE',
|
||||
'SESSION_EXPIRE_AT_BROWSER_CLOSE',
|
||||
'VIEW_ASSET_ONLINE_SESSION_INFO',
|
||||
'SECURITY_MAX_IDLE_TIME',
|
||||
'SECURITY_MAX_SESSION_TIME'
|
||||
]
|
||||
],
|
||||
[
|
||||
this.$t('Watermark'),
|
||||
this.$store.getters.hasValidLicense ? [
|
||||
'SECURITY_WATERMARK_ENABLED',
|
||||
'SECURITY_WATERMARK_SESSION_CONTENT',
|
||||
'SECURITY_WATERMARK_CONSOLE_CONTENT',
|
||||
'SECURITY_WATERMARK_COLOR',
|
||||
'SECURITY_WATERMARK_FONT_SIZE',
|
||||
'SECURITY_WATERMARK_HEIGHT',
|
||||
'SECURITY_WATERMARK_WIDTH',
|
||||
'SECURITY_WATERMARK_ROTATE'
|
||||
] : ['SECURITY_WATERMARK_ENABLED']
|
||||
]
|
||||
],
|
||||
fieldsMeta: {},
|
||||
fieldsMeta: {
|
||||
SECURITY_WATERMARK_SESSION_CONTENT: {
|
||||
helpTextFormatter: () => {
|
||||
const handleClick = () => {
|
||||
this.showSessionHelpDialog = true
|
||||
}
|
||||
return (
|
||||
<i onClick={handleClick} class='fa fa-question-circle' style='cursor: pointer'>{this.$t('Help')}</i>
|
||||
)
|
||||
}
|
||||
},
|
||||
SECURITY_WATERMARK_CONSOLE_CONTENT: {
|
||||
helpTextFormatter: () => {
|
||||
const handleClick = () => {
|
||||
this.showConsoleHelpDialog = true
|
||||
}
|
||||
return (
|
||||
<i onClick={handleClick} class='fa fa-question-circle' style='cursor: pointer'>{this.$t('Help')}</i>
|
||||
)
|
||||
}
|
||||
},
|
||||
SECURITY_WATERMARK_COLOR: {
|
||||
component: 'el-color-picker',
|
||||
el: {
|
||||
size: 'small',
|
||||
'show-alpha': true,
|
||||
predefine: [
|
||||
'rgba(128, 128, 128, 0.25)',
|
||||
'rgba(0, 0, 0, 0.15)',
|
||||
'rgba(255, 255, 255, 0.2)',
|
||||
'rgba(176, 176, 176, 0.3)',
|
||||
'rgba(91, 155, 213, 0.25)',
|
||||
'rgba(192, 80, 77, 0.2)',
|
||||
'rgba(112, 173, 71, 0.2)',
|
||||
'rgba(255, 192, 0, 0.18)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
onSubmit: async(validValues) => {
|
||||
const url = '/api/v1/settings/setting/?category=security_session'
|
||||
|
||||
|
||||
92
src/views/settings/Security/WatermarkHelpDialog.vue
Normal file
92
src/views/settings/Security/WatermarkHelpDialog.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<Dialog
|
||||
:show-cancel="false"
|
||||
:show-confirm="false"
|
||||
:title="title"
|
||||
:visible.sync="iVisible"
|
||||
class="help-dialog"
|
||||
top="1vh"
|
||||
width="50%"
|
||||
>
|
||||
<p>{{ $t('WatermarkVariableHelpText') }}</p>
|
||||
<table border="1" class="help-table">
|
||||
<tr>
|
||||
<th>{{ $tc('Variable') }}</th>
|
||||
<th>{{ $tc('Description') }}</th>
|
||||
</tr>
|
||||
<tr v-for="(val, key, index) in variables" :key="index">
|
||||
<td :title="$tc('ClickCopy')" class="item-td text-link" @click="onCopy(key)">
|
||||
<label class="item-label">{{ key }}</label>
|
||||
</td>
|
||||
<td><span>{{ val }}</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dialog } from '@/components'
|
||||
import { copy } from '@/utils/common'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dialog
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
variables: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
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>
|
||||
.help-dialog.dialog .el-dialog__footer {
|
||||
border-top: none;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.help-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #dee2e6;
|
||||
|
||||
&::v-deep th, td {
|
||||
height: 40px;
|
||||
padding: 0 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&::v-deep .item-td, .item-label {
|
||||
cursor: pointer;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -134,7 +134,7 @@ export default {
|
||||
},
|
||||
onMonitor() {
|
||||
const joinUrl = `/luna/monitor/${this.session.id}?ticket_id=${this.object.id}`
|
||||
window.open(joinUrl, 'height=600, width=850, top=400, left=400, toolbar=no, menubar=no, scrollbars=no, location=no, status=no')
|
||||
window.open(joinUrl, '_blank', 'height=600, width=850, top=400, left=400, toolbar=no, menubar=no, scrollbars=no, location=no, status=no')
|
||||
},
|
||||
onToggleLock() {
|
||||
const url = '/api/v1/terminal/tasks/toggle-lock-session-for-ticket/'
|
||||
|
||||
@@ -30,6 +30,7 @@ export default {
|
||||
columnsMeta: {
|
||||
users_amount: {
|
||||
formatter: AmountFormatter,
|
||||
width: 100,
|
||||
formatterArgs: {
|
||||
async: true,
|
||||
getItem(item) {
|
||||
|
||||
@@ -110,9 +110,9 @@ export default {
|
||||
'assets.view_asset': ['assets.view_platform'],
|
||||
'assets.view_node': ['assets.view_asset', 'assets.view_platform'],
|
||||
'acls.commandgroup': ['acls.view_commandfilteracl'],
|
||||
'assets.gateway': ['assets.view_domain'],
|
||||
'assets.add_gateway': ['assets.view_domain', 'assets.view_platform', 'assets.view_node'],
|
||||
'assets.change_gateway': ['assets.view_domain', 'assets.view_platform', 'assets.view_node'],
|
||||
'assets.gateway': ['assets.view_zone'],
|
||||
'assets.add_gateway': ['assets.view_zone', 'assets.view_platform', 'assets.view_node'],
|
||||
'assets.change_gateway': ['assets.view_zone', 'assets.view_platform', 'assets.view_node'],
|
||||
'assets.add_asset': ['assets.view_platform'],
|
||||
'assets.change_asset': ['assets.view_platform'],
|
||||
'accounts.view_gatheredaccount': ['assets.view_asset', 'assets.view_node'],
|
||||
|
||||
@@ -11817,6 +11817,11 @@ sort-keys@^2.0.0:
|
||||
dependencies:
|
||||
is-plain-obj "^1.0.0"
|
||||
|
||||
sortablejs@^1.15.6:
|
||||
version "1.15.6"
|
||||
resolved "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.15.6.tgz#ff93699493f5b8ab8d828f933227b4988df1d393"
|
||||
integrity sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==
|
||||
|
||||
source-list-map@^2.0.0:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz"
|
||||
|
||||
Reference in New Issue
Block a user