Compare commits

..

71 Commits

Author SHA1 Message Date
Bryan
56aa3caa83 Merge pull request #4410 from jumpserver/dev
v4.3.0
2024-10-17 14:56:18 +08:00
Bryan
19b1dc0dbc Merge pull request #4367 from jumpserver/dev
merge: from dev to master
2024-09-19 19:36:42 +08:00
Bryan
77ef172a23 Merge pull request #4320 from jumpserver/dev
v4.1.0
2024-08-15 21:42:42 +08:00
Bryan
4596887bf1 Merge pull request #4178 from jumpserver/dev
v4.0.0
2024-07-03 19:06:07 +08:00
Bryan
0a3dc30c85 Merge pull request #4072 from jumpserver/dev
v3.10.11-lts
2024-06-19 16:04:12 +08:00
Bryan
51d24bc8e5 Merge pull request #3941 from jumpserver/dev
v3.10.10-lts
2024-05-16 16:05:04 +08:00
Bryan
1b15a4d043 Merge pull request #3871 from jumpserver/dev
v3.10.9 (dev to master)
2024-04-22 19:44:33 +08:00
Bryan
7d3f818242 Merge pull request #3864 from jumpserver/v3.10
v3.10.8
2024-04-18 17:58:05 +08:00
Bryan
4e26f18d77 Merge pull request #3862 from jumpserver/dev
v3.10.8
2024-04-18 17:17:36 +08:00
Bryan
b22613617a Revert "build(deps): bump follow-redirects from 1.15.3 to 1.15.4"
This reverts commit e971cbf4a8.
2024-03-27 16:16:07 +08:00
dependabot[bot]
e971cbf4a8 build(deps): bump follow-redirects from 1.15.3 to 1.15.4
Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.3 to 1.15.4.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.3...v1.15.4)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
2024-03-27 16:11:26 +08:00
wangruidong
4672abae35 fix: 刷新页面根据搜索条件过滤出对应的资源 2024-03-04 19:17:05 +08:00
Bryan
ba36d72602 Merge pull request #3761 from jumpserver/master
v3.10.4 (branch-v3.10)
2024-02-29 16:26:13 +08:00
Bryan
4bfbbba4c5 Merge pull request #3760 from jumpserver/dev
v3.10.4
2024-02-29 16:15:33 +08:00
Bryan
ea038ce43a Merge pull request #3697 from jumpserver/master
v3.10.2
2024-01-17 13:34:12 +00:00
Bryan
e16b19666c Merge pull request #3696 from jumpserver/dev
v3.10.2
2024-01-17 13:33:22 +00:00
Bryan
c7f5409eb6 Merge pull request #3694 from jumpserver/master
v3.10.2
2024-01-17 07:35:33 -04:00
Bryan
fdbd7d2222 Merge pull request #3693 from jumpserver/dev
v3.10.2
2024-01-17 07:24:50 -04:00
Bryan
ddbaeeafea Merge pull request #3668 from jumpserver/master
v3.10.1
2023-12-29 11:34:04 +05:00
Bryan
efb0e9dacb Merge pull request #3665 from jumpserver/dev
v3.10.1
2023-12-29 11:14:54 +05:00
huailei
f6f8301ad5 Revert "perf: 账号收集翻译"
This reverts commit 9a63ae63d4.
2023-12-22 15:25:31 +08:00
“huailei000”
9a63ae63d4 perf: 账号收集翻译 2023-12-22 11:31:45 +08:00
Bryan
1e007ccda3 Merge pull request #3642 from jumpserver/dev
v3.10
2023-12-21 15:15:52 +05:00
老广
d1d0b06b53 Merge pull request #3546 from jumpserver/dev
v3.9.0
2023-11-16 18:25:10 +08:00
Bryan
5fb70d2f24 Merge pull request #3450 from jumpserver/dev
v3.8.0
2023-10-19 03:33:53 -05:00
Bryan
b54a95430f Merge pull request #3404 from jumpserver/dev
v3.7.0
2023-09-21 17:04:42 +08:00
Bryan
4d8b4c45af Merge pull request #3355 from jumpserver/dev
v3.6.0
2023-08-17 14:00:33 +05:00
Bryan
a6d642df60 Merge pull request #3283 from jumpserver/dev
v3.5.0
2023-07-20 19:04:29 +08:00
Jiangjie.Bai
2e74f1522f Merge pull request #3222 from jumpserver/dev
v3.4.0
2023-06-15 14:51:36 +08:00
Jiangjie.Bai
fe615e0314 Merge pull request #3219 from jumpserver/dev
v3.4.0
2023-06-15 14:17:46 +08:00
Jiangjie.Bai
09f734e6fc Merge pull request #3135 from jumpserver/dev
v3.3.0
2023-05-18 19:18:11 +08:00
Jiangjie.Bai
3117046342 Merge pull request #3061 from jumpserver/dev
v3.2.0
2023-04-20 18:40:08 +08:00
Bai
b68aecb5cc fix: 批量更新资产平台help-text 2023-04-20 18:39:22 +08:00
Jiangjie.Bai
1c9b155d97 Merge pull request #3057 from jumpserver/dev
v3.2.0
2023-04-20 18:22:46 +08:00
Jiangjie.Bai
75b1be9864 Merge pull request #3019 from jumpserver/dev
v3.2.0 rc2
2023-04-14 19:01:37 +08:00
Jiangjie.Bai
615c3c1cf4 Merge pull request #3014 from jumpserver/dev
v3.2.0 rc1
2023-04-13 20:02:38 +08:00
Jiangjie.Bai
4d82231af4 Merge pull request #3012 from jumpserver/dev
v3.2.0 rc1
2023-04-13 19:22:38 +08:00
“huailei000”
c6cf6571b6 perf: ldap导入用户列表-组织下拉框设置最大宽度 2023-03-16 16:44:36 +08:00
Bai
8ea990d070 fix: 修复创建资产添加账号模版报错问题 2023-03-16 16:44:36 +08:00
“huailei000”
f4a32170d5 perf: message 2023-03-16 16:44:36 +08:00
ibuler
073508675e perf: 添加默认的信息 2023-03-16 16:44:36 +08:00
Jiangjie.Bai
1d6ca0a93a Merge pull request #2924 from jumpserver/dev
v3.1.0 rc4
2023-03-15 19:46:31 +08:00
Jiangjie.Bai
36aea652d6 Merge pull request #2788 from jumpserver/dev
v3.0.0
2023-02-23 20:16:41 +08:00
Jiangjie.Bai
1a42ce90ab Merge pull request #2760 from jumpserver/dev
v3.0.0-rc-latest
2023-02-22 22:21:54 +08:00
Jiangjie.Bai
31a401b55d Merge pull request #2463 from jumpserver/dev
v3.0.0-rc4
2023-01-31 18:55:34 +08:00
Jiangjie.Bai
582a84178d Merge pull request #2187 from jumpserver/dev
v2.28.0
2022-11-17 17:44:19 +08:00
Jiangjie.Bai
9b9f7c936c Merge pull request #2184 from jumpserver/dev
v2.28.0-rc5
2022-11-17 14:18:15 +08:00
Jiangjie.Bai
2a6100957f Merge pull request #2182 from jumpserver/dev
v2.28.0-rc4
2022-11-16 21:08:55 +08:00
Jiangjie.Bai
16606d6a27 Merge pull request #2176 from jumpserver/dev
v2.28.0-rc2
2022-11-14 10:01:05 +08:00
Jiangjie.Bai
0a612f50e6 Merge pull request #2164 from jumpserver/dev
v2.28.0-rc1
2022-11-10 17:45:47 +08:00
Jiangjie.Bai
fe36fa9390 Merge pull request #2117 from jumpserver/dev
v2.27.0-rc4
2022-10-18 21:02:10 +08:00
Jiangjie.Bai
ba109900ec Merge pull request #2113 from jumpserver/dev
v2.27.0-rc3
2022-10-18 11:20:57 +08:00
Jiangjie.Bai
ec7768267f Merge pull request #2105 from jumpserver/dev
v2.27.0-rc2
2022-10-14 11:01:32 +08:00
Jiangjie.Bai
cc58b374ab Merge pull request #2101 from jumpserver/dev
v2.27.0-rc1
2022-10-13 17:44:53 +08:00
Jiangjie.Bai
04ffbb8fd6 Merge pull request #2097 from jumpserver/dev
v2.27.0-rc1
2022-10-13 15:14:40 +08:00
Jiangjie.Bai
49880f6739 Merge pull request #2059 from jumpserver/dev
v2.26.0
2022-09-15 17:49:44 +08:00
Jiangjie.Bai
e6f98d58c4 Merge pull request #2057 from jumpserver/dev
v2.26.0-rc4
2022-09-15 16:18:03 +08:00
Jiangjie.Bai
fd1f16d43c Merge pull request #2050 from jumpserver/dev
v2.26.0-rc2
2022-09-13 17:41:39 +08:00
Jiangjie.Bai
968b2415b1 Merge pull request #2043 from jumpserver/dev
v2.26.0-rc1
2022-09-08 15:46:44 +08:00
Jiangjie.Bai
776090d6ba Merge pull request #2001 from jumpserver/dev
v2.25.0
2022-08-18 16:12:45 +08:00
Jiangjie.Bai
3a37952288 Merge pull request #1996 from jumpserver/dev
v2.25.0-rc4
2022-08-17 16:53:23 +08:00
Jiangjie.Bai
62b8fc0e3b Merge pull request #1994 from jumpserver/dev
v2.25.0-rc3
2022-08-16 19:08:23 +08:00
Jiangjie.Bai
b2028869cb Merge pull request #1986 from jumpserver/dev
v2.25.0-rc2
2022-08-12 18:06:56 +08:00
Jiangjie.Bai
5277a725f8 Merge pull request #1973 from jumpserver/dev
v2.25.0-rc1
2022-08-11 14:11:59 +08:00
Jiangjie.Bai
f137788c1a Merge pull request #1957 from jumpserver/dev
v2.24.0-rc5
2022-07-20 19:06:03 +08:00
Jiangjie.Bai
f7d17c8de7 Merge pull request #1954 from jumpserver/dev
v2.24.0-rc4
2022-07-19 16:18:13 +08:00
Jiangjie.Bai
feea70b0be Merge pull request #1944 from jumpserver/dev
v2.24.0-rc3
2022-07-18 12:05:42 +08:00
Jiangjie.Bai
04696ef3d6 Merge pull request #1940 from jumpserver/dev
v2.24.0-rc2
2022-07-15 18:07:37 +08:00
Jiangjie.Bai
1731f4f788 Merge pull request #1934 from jumpserver/dev
v2.24.0-rc1
2022-07-14 18:27:51 +08:00
Jiangjie.Bai
6f25d93909 Merge pull request #1931 from jumpserver/dev
v2.24.0-rc1
2022-07-14 17:51:58 +08:00
Jiangjie.Bai
46461ec324 Merge pull request #1925 from jumpserver/dev
v2.24.0-rc1
2022-07-14 15:12:15 +08:00
542 changed files with 6614 additions and 18652 deletions

View File

@@ -1,28 +0,0 @@
name: LLM Code Review
permissions:
contents: read
pull-requests: write
on:
pull_request:
types: [opened, reopened, synchronize]
jobs:
llm-code-review:
runs-on: ubuntu-latest
steps:
- uses: fit2cloud/LLM-CodeReview-Action@main
env:
GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
LANGUAGE: English
OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
MODEL: qwen2-1.5b-instruct
PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
top_p: 1
temperature: 1
# max_tokens: 10000
MAX_PATCH_LENGTH: 10000
IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"

View File

@@ -1,28 +0,0 @@
name: LLM Code Review
permissions:
contents: read
pull-requests: write
on:
pull_request:
types: [opened, reopened, synchronize]
jobs:
llm-code-review:
runs-on: ubuntu-latest
steps:
- uses: fit2cloud/LLM-CodeReview-Action@main
env:
GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
LANGUAGE: English
OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
MODEL: qwen2-1.5b-instruct
PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
top_p: 1
temperature: 1
# max_tokens: 10000
MAX_PATCH_LENGTH: 10000
IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"

2
.gitignore vendored
View File

@@ -17,5 +17,3 @@ tests/**/coverage/
*.sln
.env.development
.python-version
helper.json

View File

@@ -5,6 +5,5 @@
"@/*": ["src/*"]
}
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}

View File

@@ -94,7 +94,6 @@
"@vue/cli-plugin-unit-jest": "3.6.3",
"@vue/cli-service": "3.6.0",
"@vue/test-utils": "1.0.0-beta.29",
"@vue/runtime-dom": "3.5.13",
"autoprefixer": "^9.5.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
@@ -121,7 +120,7 @@
"serve-static": "^1.16.0",
"strip-ansi": "^7.1.0",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.4",
"svgo": "1.2.2",
"vue-i18n-extract": "^1.1.1",
"vue-template-compiler": "2.6.10"
},

View File

@@ -1,90 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="0" http-equiv="Expires">
<meta content="no-cache" http-equiv="Pragma">
<meta content="no-cache" http-equiv="Cache-control">
<meta content="no-cache" http-equiv="Cache">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title><%= webpackConfig.name %></title>
<link href="<%= BASE_URL %>theme/element-ui.css" rel="stylesheet">
<style>
#loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.98);
z-index: 9999;
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid transparent;
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.spinner::after {
content: '';
position: absolute;
top: -3px;
left: -3px;
width: 40px;
height: 40px;
border: 3px solid transparent;
border-top-color: rgba(64, 158, 255, 0.2);
border-radius: 50%;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<noscript>
<strong>
We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled.
Please enable it to continue.
</strong>
</noscript>
<script>
window.onload = function () {
<link rel="stylesheet" href="<%= BASE_URL %>theme/element-ui.css">
</head>
<body>
<noscript>
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<script>
window.onload = function() {
if (location.pathname === '/') {
location.pathname = '/ui/'
location.pathname = '/ui/'
}
const pathname = window.location.pathname
if (pathname.startsWith('/core')) {
return
}
if (pathname.indexOf('/ui') === -1) {
window.location.href = window.location.origin + '/ui/#' + pathname
if(pathname.indexOf('/ui') === -1) {
window.location.href = window.location.origin + '/ui/#' + pathname
}
if (pathname.startsWith('/ui/#/chat')) {
window.location.href = window.location.origin + pathname
window.location.href = window.location.origin + pathname
}
}
</script>
<div id="app">
</div>
<div id="loading">
<div class="spinner"></div>
</div>
<!-- built files will be auto injected -->
</body>
}
</script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

View File

@@ -53,7 +53,7 @@ export function createJob(form) {
})
}
export function stopJob(form) {
export function StopJob(form) {
return request({
url: '/api/v1/ops/job-executions/stop/',
method: 'post',
@@ -71,10 +71,3 @@ export function JobUploadFile(form) {
})
}
export function auditUpdateJob(id, form) {
return request({
url: `/api/v1/audits/jobs/${id}/`,
method: 'patch',
data: form
})
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

View File

@@ -3,7 +3,7 @@
</template>
<script>
import DataActions from '@/components/Common/DataActions/index.vue'
import DataActions from '@/components/DataActions'
export default {
name: 'ActionsGroup',

View File

@@ -5,7 +5,6 @@ import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSettin
export const accountFieldsMeta = (vm) => {
const defaultPrivilegedAccounts = ['root', 'administrator']
return {
assets: {
component: Select2,
@@ -28,9 +27,6 @@ export const accountFieldsMeta = (vm) => {
component: Select2,
rules: [Required],
el: {
get disabled() {
return vm.isDisabled
},
multiple: false,
ajax: {
url: '/api/v1/accounts/account-templates/',
@@ -47,11 +43,6 @@ export const accountFieldsMeta = (vm) => {
rules: [Required],
label: vm.$t('AccountPolicy'),
helpTip: vm.$t('AccountPolicyHelpText'),
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: () => {
return vm.platform || vm.asset
}
@@ -59,11 +50,6 @@ export const accountFieldsMeta = (vm) => {
name: {
label: vm.$t('Name'),
rules: [RequiredChange],
el: {
get disabled() {
return vm.isDisabled
}
},
on: {
input: ([value], updateForm) => {
if (!vm.usernameChanged) {
@@ -83,9 +69,7 @@ export const accountFieldsMeta = (vm) => {
},
username: {
el: {
get disabled() {
return !!vm.account?.name || vm.isDisabled
}
disabled: !!vm.account?.name
},
on: {
input: ([value], updateForm) => {
@@ -104,11 +88,6 @@ export const accountFieldsMeta = (vm) => {
},
privileged: {
label: vm.$t('Privileged'),
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: () => {
return vm.addTemplate
}
@@ -131,11 +110,6 @@ export const accountFieldsMeta = (vm) => {
},
su_from_username: {
label: vm.$t('UserSwitchFrom'),
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: (formValue) => {
return vm.platform || vm.asset || vm.addTemplate
}
@@ -143,11 +117,6 @@ export const accountFieldsMeta = (vm) => {
password: {
label: vm.$t('Password'),
component: UpdateToken,
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: (formValue) => {
return formValue.secret_type !== 'password' || vm.addTemplate
}
@@ -155,63 +124,33 @@ export const accountFieldsMeta = (vm) => {
ssh_key: {
label: vm.$t('PrivateKey'),
component: UploadSecret,
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
},
passphrase: {
label: vm.$t('Passphrase'),
component: UpdateToken,
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
},
token: {
label: vm.$t('Token'),
component: UploadSecret,
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: (formValue) => formValue.secret_type !== 'token' || vm.addTemplate
},
access_key: {
id: 'access_key',
label: vm.$t('AccessKey'),
component: UploadSecret,
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: (formValue) => formValue.secret_type !== 'access_key' || vm.addTemplate
},
api_key: {
id: 'api_key',
label: vm.$t('ApiKey'),
component: UploadSecret,
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: (formValue) => formValue.secret_type !== 'api_key' || vm.addTemplate
},
secret_type: {
type: 'radio-group',
options: [],
el: {
get disabled() {
return vm.isDisabled
}
},
hidden: () => {
return vm.addTemplate
}
@@ -224,8 +163,7 @@ export const accountFieldsMeta = (vm) => {
!automation.ansible_enabled ||
!vm.$hasPerm('accounts.push_account') ||
(formValue.secret_type === 'ssh_key' && vm.iPlatform.type.value === 'windows') ||
vm.addTemplate ||
!formValue.secret_reset
vm.addTemplate
}
},
params: {
@@ -246,27 +184,12 @@ export const accountFieldsMeta = (vm) => {
}
},
is_active: {
label: vm.$t('IsActive'),
el: {
get disabled() {
return vm.isDisabled
}
}
label: vm.$t('IsActive')
},
comment: {
label: vm.$t('Comment'),
el: {
get disabled() {
return vm.isDisabled
}
}
},
secret_reset: {
label: vm.$t('SecretReset'),
el: {
get disabled() {
return vm.isDisabled
}
hidden: () => {
return vm.addTemplate
}
}
}

View File

@@ -45,7 +45,6 @@ export default {
data() {
return {
loading: true,
isDisabled: false,
usernameChanged: false,
submitBtnText: this.$t('Confirm'),
iPlatform: {
@@ -62,12 +61,11 @@ export default {
form: Object.assign({ 'on_invalid': 'error' }, this.account || {}),
encryptedFields: ['secret'],
fields: [
[this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
[this.$t('Assets'), ['assets']],
[this.$t('AccountTemplate'), ['template']],
[this.$t('Basic'), ['assets', 'name', 'username', 'privileged', 'su_from', 'su_from_username']],
[this.$t('Secret'), [
'secret_type', 'password', 'ssh_key', 'token',
'access_key', 'passphrase', 'api_key',
'secret_reset'
'access_key', 'passphrase', 'api_key'
]],
[this.$t('Other'), ['push_now', 'params', 'on_invalid', 'is_active', 'comment']]
],
@@ -75,16 +73,6 @@ export default {
hasSaveContinue: false
}
},
watch: {
'$route.query': {
handler(nv, ov) {
if (nv && (nv.flag === 'move' || nv.flag === 'copy')) {
this.isDisabled = true
}
},
immediate: true
}
},
async mounted() {
try {
await this.getPlatform()
@@ -157,11 +145,7 @@ export default {
delete form['secret']
}
if (this.account?.name) {
if (this.account.payload && this.account.payload === 'pam_account_clone') {
this.$emit('add', form)
} else {
this.$emit('edit', form)
}
this.$emit('edit', form)
} else {
this.$emit('add', form)
}
@@ -173,16 +157,16 @@ export default {
<style lang='scss' scoped>
.account-add {
::v-deep .el-form-item {
//margin-bottom: 5px;
margin-bottom: 5px;
.help-block {
//margin-bottom: 5px;
margin-bottom: 5px;
}
}
::v-deep .form-group-header {
.hr-line-dashed {
//margin: 5px 0;
margin: 5px 0;
}
h3 {

View File

@@ -1,38 +1,36 @@
<template v-if="iVisible">
<Drawer
<template>
<Dialog
v-if="iVisible"
:close-on-click-modal="false"
:destroy-on-close="true"
:show-cancel="false"
:show-confirm="false"
:title="title"
:visible="iVisible"
class="drawer"
@close-drawer="handleCloseDrawer"
:visible.sync="iVisible"
v-bind="$attrs"
width="900px"
v-on="$listeners"
>
<Page :title="'null'">
<IBox class="content">
<AccountCreateUpdateForm
v-if="!loading"
ref="form"
:account="account"
:add-template="addTemplate"
:asset="asset"
@add="addAccount"
@edit="editAccount"
/>
</IBox>
</Page>
</Drawer>
<AccountCreateUpdateForm
v-if="!loading"
ref="form"
:account="account"
:add-template="addTemplate"
:asset="asset"
@add="addAccount"
@edit="editAccount"
/>
</Dialog>
</template>
<script>
import Drawer from '@/components/Drawer/index.vue'
import Dialog from '@/components/Dialog/index.vue'
import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue'
import IBox from '@/components/Common/IBox/index.vue'
import Page from '@/layout/components/Page/index.vue'
export default {
name: 'CreateAccountDialog',
components: {
IBox,
Drawer,
Page,
Dialog,
AccountCreateUpdateForm
},
props: {
@@ -113,22 +111,11 @@ export default {
},
editAccount(form) {
const data = { ...form }
const flag = this.$route.query.flag
switch (flag) {
case 'copy':
this.handleAccountOperation(this.account.id, 'copy-to-assets', data)
break
case 'move':
this.handleAccountOperation(this.account.id, 'move-to-assets', data)
break
default:
this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
this.iVisible = false
this.$emit('add', true)
this.$message.success(this.$tc('UpdateSuccessMsg'))
}).catch(error => this.setFieldError(error))
}
this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
this.iVisible = false
this.$emit('add', true)
this.$message.success(this.$tc('UpdateSuccessMsg'))
}).catch(error => this.setFieldError(error))
},
handleResult(resp, error) {
let bulkCreate = !this.asset
@@ -181,29 +168,7 @@ export default {
refsAutoDataForm.setFieldError(current, err)
}
}
},
handleCloseDrawer() {
this.iVisible = false
Reflect.deleteProperty(this.$route.query, 'flag')
},
handleAccountOperation(id, path, data) {
this.$axios.post(`/api/v1/accounts/accounts/${id}/${path}/`, data).then((res) => {
this.iVisible = false
this.$emit('add', true)
this.handleResult(res, null)
}).catch(error => this.handleResult(null, error))
}
}
}
</script>
<style lang="scss" scoped>
.drawer {
::v-deep .el-drawer__body {
.el-form {
margin-right: 30px;
}
}
}
</style>

View File

@@ -1,12 +1,6 @@
<template>
<div>
<DrawerListTable
ref="ListTable"
:detail-drawer="detailDrawer"
:header-actions="headerActions"
:quick-filters="quickFilters"
:table-config="tableConfig"
/>
<ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
<ViewSecret
v-if="showViewSecretDialog"
:account="account"
@@ -22,13 +16,22 @@
<AccountCreateUpdate
v-if="showAddDialog"
:account="account"
:add-template="addTemplate"
:asset="iAsset"
:title="accountCreateUpdateTitle"
:visible.sync="showAddDialog"
@add="addAccountSuccess"
@bulk-create-done="showBulkCreateResult($event)"
/>
<AccountCreateUpdate
v-if="showAddTemplateDialog"
:account="account"
:add-template="true"
:asset="iAsset"
:title="accountCreateByTemplateTitle"
:visible.sync="showAddTemplateDialog"
@add="addAccountSuccess"
@bulk-create-done="showBulkCreateResult($event)"
/>
<ResultDialog
v-if="showResultDialog"
:result="createAccountResults"
@@ -41,42 +44,29 @@
v-bind="updateSelectedDialogSetting"
@update="handleAccountBulkUpdate"
/>
<PasswordHistoryDialog
v-if="showPasswordHistoryDialog"
:account="currentAccountColumn"
:visible.sync="showPasswordHistoryDialog"
/>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { accountOtherActions, accountQuickFilters, connectivityMeta } from './const'
import { openTaskPage } from '@/utils/jms'
import {
AccountConnectFormatter,
ActionsFormatter,
PlatformFormatter,
SecretViewerFormatter
} from '@/components/Table/TableFormatters'
import ListTable from '@/components/Table/ListTable/index.vue'
import { ActionsFormatter } from '@/components/Table/TableFormatters'
import ViewSecret from './ViewSecret.vue'
import UpdateSecretInfo from './UpdateSecretInfo.vue'
import ResultDialog from './BulkCreateResultDialog.vue'
import AccountCreateUpdate from './AccountCreateUpdate.vue'
import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
import DrawerListTable from '@/components/Table/DrawerListTable/index.vue'
import { connectivityMeta } from './const'
import { openTaskPage } from '@/utils/jms'
import ResultDialog from './BulkCreateResultDialog.vue'
import AccountBulkUpdateDialog from '@/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue'
export default {
name: 'AccountListTable',
components: {
ViewSecret,
AccountBulkUpdateDialog,
ResultDialog,
DrawerListTable,
ListTable,
UpdateSecretInfo,
AccountCreateUpdate,
PasswordHistoryDialog,
AccountBulkUpdateDialog
ViewSecret,
AccountCreateUpdate
},
props: {
url: {
@@ -99,7 +89,7 @@ export default {
},
hasClone: {
type: Boolean,
default: true
default: false
},
asset: {
type: Object,
@@ -129,7 +119,7 @@ export default {
columnsDefault: {
type: Array,
default: () => ([
'name', 'username', 'secret', 'asset', 'platform', 'connect'
'name', 'username', 'asset', 'date_updated'
])
},
headerExtraActions: {
@@ -139,34 +129,22 @@ export default {
extraQuery: {
type: Object,
default: () => ({})
},
showQuickFilters: {
type: Boolean,
default: true
},
showActions: {
type: Boolean,
default: true
}
},
data() {
const vm = this
return {
addTemplate: false,
isUpdateAccount: false,
currentAccountColumn: {},
showPasswordHistoryDialog: false,
showViewSecretDialog: false,
showUpdateSecretDialog: false,
showResultDialog: false,
showAddDialog: false,
showAddTemplateDialog: false,
detailDrawer: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
createAccountResults: [],
accountCreateUpdateTitle: this.$t('AddAccount'),
accountCreateByTemplateTitle: this.$t('AddAccountByTemplate'),
iAsset: this.asset,
account: {},
secretUrl: '',
quickFilters: this.showQuickFilters ? accountQuickFilters(this) : [],
tableConfig: {
url: this.url,
permissions: {
@@ -175,7 +153,6 @@ export default {
},
extraQuery: this.extraQuery,
columnsExclude: ['spec_info'],
columnsAdd: ['secret', 'platform', 'connect'],
columnsShow: {
min: ['name', 'username', 'actions'],
default: this.columnsDefault
@@ -183,51 +160,29 @@ export default {
columnsMeta: {
name: {
width: '120px',
formatterArgs: {
can: () => vm.$hasPerm('accounts.view_account'),
getDrawerTitle({ row }) {
return `${row.username}@${row.asset.name}`
formatter: function(row) {
const to = {
name: 'AssetAccountDetail',
params: { id: row.id }
}
}
},
secret: {
formatter: SecretViewerFormatter,
width: '130px',
formatterArgs: {
secretFrom: 'api',
hasDownload: false,
actionLeft: true
}
},
connect: {
label: this.$t('Connect'),
width: '80px',
formatter: AccountConnectFormatter,
formatterArgs: {
buttonIcon: 'fa fa-desktop',
titleText: '可选协议',
url: '/api/v1/assets/assets/{id}',
can: () => this.currentUserIsSuperAdmin,
connectUrlTemplate: (row) => `/luna/pam_connect/${row.id}/${row.username}/${row.asset.id}/${row.asset.name}/`,
setMapItem: (id, protocol) => {
this.$store.commit('table/SET_PROTOCOL_MAP_ITEM', {
key: id,
value: protocol
})
if (vm.$hasPerm('accounts.view_account')) {
return <router-link to={to}>{row.name}</router-link>
} else {
return <span>{row.name}</span>
}
}
},
platform: {
label: this.$t('Platform'),
width: '150px',
formatter: PlatformFormatter,
formatterArgs: {
platformAttr: 'asset.platform'
}
},
asset: {
formatter: function(row) {
return row.asset.name
const to = {
name: 'AssetDetail',
params: { id: row.asset.id }
}
if (vm.$hasPerm('assets.view_asset')) {
return <router-link to={to}>{row.asset.name}</router-link>
} else {
return <span>{row.asset.name}</span>
}
}
},
username: {
@@ -259,14 +214,77 @@ export default {
connectivity: connectivityMeta,
actions: {
formatter: ActionsFormatter,
has: this.showActions,
formatterArgs: {
hasUpdate: false, // can set function(row, value)
hasDelete: true, // can set function(row, value)
hasClone: false,
canDelete: () => vm.$hasPerm('accounts.delete_account'),
hasDelete: false, // can set function(row, value)
hasClone: this.hasClone,
moreActionsTitle: this.$t('More'),
extraActions: accountOtherActions(this)
extraActions: [
{
name: 'View',
title: this.$t('View'),
can: this.$hasPerm('accounts.view_accountsecret'),
type: 'primary',
callback: ({ row }) => {
// debugger
vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
vm.account = row
vm.showViewSecretDialog = false
setTimeout(() => {
vm.showViewSecretDialog = true
})
}
},
{
name: 'Update',
title: this.$t('Edit'),
can: this.$hasPerm('accounts.change_account') && !this.$store.getters.currentOrgIsRoot,
callback: ({ row }) => {
const data = {
...this.asset,
...row.asset
}
vm.account = row
vm.iAsset = data
vm.showAddDialog = false
vm.accountCreateUpdateTitle = this.$t('UpdateAccount')
setTimeout(() => {
vm.showAddDialog = true
})
}
},
{
name: 'Test',
title: this.$t('Test'),
can: ({ row }) =>
!this.$store.getters.currentOrgIsRoot &&
this.$hasPerm('accounts.verify_account') &&
row.asset['auto_config'].ansible_enabled &&
row.asset['auto_config'].ping_enabled,
callback: ({ row }) => {
this.$axios.post(
`/api/v1/accounts/accounts/tasks/`,
{ action: 'verify', accounts: [row.id] }
).then(res => {
openTaskPage(res['task'])
})
}
},
{
name: 'ClearSecret',
title: this.$t('ClearSecret'),
can: this.$hasPerm('accounts.change_account'),
type: 'primary',
callback: ({ row }) => {
this.$axios.patch(
`/api/v1/accounts/accounts/clear-secret/`,
{ account_ids: [row.id] }
).then(() => {
this.$message.success(this.$tc('ClearSuccessMsg'))
})
}
}
]
}
},
...this.columnsMeta
@@ -297,13 +315,13 @@ export default {
can: () => {
return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
},
callback: () => {
callback: async() => {
await this.getAssetDetail()
setTimeout(() => {
vm.iAsset = this.asset
vm.account = {}
this.addTemplate = false
this.showAddDialog = true
}, 200)
vm.showAddDialog = true
})
}
},
{
@@ -318,8 +336,7 @@ export default {
setTimeout(() => {
vm.iAsset = this.asset
vm.account = {}
vm.showAddDialog = true
vm.addTemplate = true
vm.showAddTemplateDialog = true
})
}
},
@@ -330,11 +347,11 @@ export default {
name: 'TestSelected',
title: this.$t('TestSelected'),
type: 'primary',
icon: 'verify',
icon: 'fa-link',
can: ({ selectedRows }) => {
return selectedRows.length > 0 &&
['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
!this.$store.getters.currentOrgIsRoot
['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
!this.$store.getters.currentOrgIsRoot
},
callback: function({ selectedRows }) {
const ids = selectedRows.map(v => {
@@ -399,18 +416,6 @@ export default {
}
}
},
computed: {
...mapGetters(['currentUserIsSuperAdmin']),
accountCreateUpdateTitle() {
if (this.addTemplate) {
return this.$t('AddAccountByTemplate')
} else if (this.isUpdateAccount) {
return this.$t('UpdateAccount')
} else {
return this.$t('AddAccount')
}
}
},
watch: {
url(iNew) {
this.$set(this.tableConfig, 'url', iNew)
@@ -418,35 +423,52 @@ export default {
}
},
mounted() {
this.setActions()
if (this.columns.length > 0) {
this.tableConfig.columns = this.columns
}
if (this.otherActions) {
const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
for (const item of this.otherActions) {
actionColumn.formatterArgs.extraActions.push(item)
}
}
if (this.hasDeleteAction) {
this.tableConfig.columnsMeta.actions.formatterArgs.extraActions.push(
{
name: 'Delete',
title: this.$t('Delete'),
can: this.$hasPerm('accounts.delete_account'),
type: 'primary',
callback: ({ row }) => {
const msg = this.$t('AccountDeleteConfirmMsg')
this.$confirm(msg, this.$tc('Info'), {
type: 'warning',
confirmButtonClass: 'el-button--danger',
beforeClose: async(action, instance, done) => {
if (action !== 'confirm') return done()
this.$axios.delete(`/api/v1/accounts/accounts/${row.id}/`).then(() => {
done()
this.$refs.ListTable.reloadTable()
this.$message.success(this.$tc('DeleteSuccessMsg'))
})
}
})
}
}
)
}
},
activated() {
// 由于组件嵌套较深,有可能导致 Error in activated hook: "TypeError: Cannot read properties of undefined (reading 'getList')" 的问题
if (this.tabDeactivated) {
setTimeout(() => this.refresh(), 300)
}
},
deactivated() {
this.tabDeactivated = true
setTimeout(() => {
this.refresh()
}, 300)
},
methods: {
setActions() {
if (this.columns.length > 0) {
this.tableConfig.columns = this.columns
}
if (this.otherActions) {
const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
for (const item of this.otherActions) {
actionColumn.formatterArgs.extraActions.push(item)
}
}
},
onUpdateAuthDone(account) {
Object.assign(this.account, account)
},
addAccountSuccess() {
Reflect.deleteProperty(this.$route.query, 'flag')
this.isUpdateAccount = false
this.$refs.ListTable.reloadTable()
},
async getAssetDetail() {
@@ -485,7 +507,7 @@ export default {
}
</script>
<style lang="scss" scoped>
<style lang='scss' scoped>
.cell a {
color: var(--color-info);
}

View File

@@ -4,7 +4,7 @@
<script>
import { GenericListTableDialog } from '@/layout/components'
import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
export default {
components: {
@@ -33,7 +33,7 @@ export default {
columnsMeta: {
secret: {
label: this.$t('Password'),
formatter: SecretViewerFormatter,
formatter: ShowKeyCopyFormatter,
formatterArgs: {
hasDownload: false,
name: this.account.name

View File

@@ -1,36 +1,44 @@
<template>
<Dialog
:destroy-on-close="true"
:show-buttons="false"
:title="$tc('UpdateAssetUserToken')"
:visible.sync="iVisible"
width="800px"
:visible.sync="visible"
width="50"
@cancel="handleCancel()"
@confirm="handleConfirm()"
v-on="$listeners"
>
<AutoDataForm
:fields="fields"
:fields-meta="fieldsMeta"
:form="init"
:has-reset="false"
:has-save-continue="false"
:url="''"
method="patch"
@submit="handleConfirm"
/>
<el-form label-position="right" label-width="90px">
<el-form-item :label="$tc('Name')">
<el-input v-model="account['asset_name']" readonly />
</el-form-item>
<el-form-item :label="$tc('Username')">
<el-input v-model="account['username']" readonly />
</el-form-item>
<el-form-item :label="$tc('Password')">
<UpdateToken v-model="authInfo.password" />
</el-form-item>
<el-form-item :label="$tc('SSHSecretKey')">
<UploadKey @input="getFile" />
</el-form-item>
<el-form-item :label="$tc('Passphrase')">
<UpdateToken v-model="authInfo.passphrase" />
</el-form-item>
</el-form>
</Dialog>
</template>
<script>
import Dialog from '@/components/Dialog/index.vue'
import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
import { UpdateToken, UploadKey } from '@/components/Form/FormFields'
import { encryptPassword } from '@/utils/crypto'
import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
export default {
name: 'UpdateSecretInfo',
components: {
AutoDataForm,
Dialog
Dialog,
UploadKey,
UpdateToken
},
props: {
account: {
@@ -43,59 +51,49 @@ export default {
}
},
data() {
const accountMeta = accountFieldsMeta(this)
return {
fields: [
'name', 'secret_type', 'password', 'ssh_key', 'token',
'access_key', 'passphrase', 'api_key'
],
fieldsMeta: {
...accountMeta,
name: {
...accountMeta.name,
readonly: true
},
secret_type: {
hidden: () => true
}
},
init: {
...this.account
}
}
},
computed: {
iVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
secretInfo: {
password: '',
private_key: '',
passphrase: ''
}
}
},
methods: {
handleConfirm(form) {
const secretType = this.account.secret_type.value
const data = {
secret: encryptPassword(form[secretType])
handleConfirm() {
const data = {}
if (this.secretInfo.password !== '') {
data.password = encryptPassword(this.secretInfo.password)
}
if (this.secretInfo.private_key !== '') {
data.private_key = encryptPassword(this.secretInfo.private_key)
if (this.secretInfo.passphrase) data.passphrase = this.secretInfo.passphrase
}
this.$axios.patch(
`/api/v1/accounts/accounts/${this.account.id}/`,
data,
{ disableFlashErrorMsg: true }
).then(res => {
this.authInfo = { password: '', private_key: '' }
this.$message.success(this.$tc('UpdateSuccessMsg'))
this.iVisible = false
this.$emit('updateAuthDone', res)
this.$emit('update:visible', false)
}).catch(err => {
const errMsg = Object.values(err.response.data).join(', ')
this.$message.error(this.$tc('UpdateErrorMsg') + ' ' + errMsg)
this.iVisible = false
this.$emit('update:visible', true)
})
},
handleCancel() {
this.$emit('update:visible', false)
},
getFile(file) {
this.secretInfo.private_key = file
}
}
}
</script>
<style scoped>
</style>

View File

@@ -18,7 +18,7 @@
<span>{{ account['username'] }}</span>
</el-form-item>
<el-form-item :label="secretTypeLabel">
<SecretViewerFormatter
<ShowKeyCopyFormatter
:cell-value="secretInfo.secret"
:col="{ formatterArgs: {
name: account['name'],
@@ -60,7 +60,7 @@
<script>
import Dialog from '@/components/Dialog/index.vue'
import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
import { encryptPassword } from '@/utils/crypto'
export default {
@@ -68,7 +68,7 @@ export default {
components: {
Dialog,
PasswordHistoryDialog,
SecretViewerFormatter
ShowKeyCopyFormatter
},
props: {
account: {

View File

@@ -1,5 +1,4 @@
import { ChoicesFormatter } from '@/components/Table/TableFormatters'
import { openTaskPage } from '@/utils/jms'
export const connectivityMeta = {
formatter: ChoicesFormatter,
@@ -23,280 +22,3 @@ export const connectivityMeta = {
},
width: '130px'
}
export const accountOtherActions = (vm) => [
{
name: 'View',
title: vm.$t('View'),
can: vm.$hasPerm('accounts.view_accountsecret'),
type: 'primary',
order: 1,
callback: ({ row }) => {
// debugger
vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
vm.account = row
vm.showViewSecretDialog = false
setTimeout(() => {
vm.showViewSecretDialog = true
})
}
},
{
name: 'Update',
title: vm.$t('Edit'),
can: vm.$hasPerm('accounts.change_account') && !vm.$store.getters.currentOrgIsRoot,
callback: ({ row }) => {
vm.isUpdateAccount = true
const data = {
...vm.asset,
...row.asset
}
vm.iAsset = data
vm.account = row
vm.addTemplate = false
vm.showAddDialog = false
setTimeout(() => {
vm.showAddDialog = true
})
}
},
{
name: 'UpdateSecret',
title: vm.$t('EditSecret'),
can: vm.$hasPerm('accounts.change_account') && !vm.$store.getters.currentOrgIsRoot,
callback: ({ row }) => {
const data = {
...vm.asset,
...row.asset
}
vm.account = row
vm.iAsset = data
vm.showUpdateSecretDialog = false
vm.accountCreateUpdateTitle = vm.$t('UpdateAccount')
setTimeout(() => {
vm.showUpdateSecretDialog = true
})
}
},
{
name: 'Clone',
title: vm.$t('Duplicate'),
has: () => {
return !vm.asset
},
can: vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot,
callback: ({ row }) => {
vm.account = {
name: `${row.name} - ${vm.$t('Duplicate').toLowerCase()}`,
username: `${row.username} - ${vm.$t('Duplicate').toLowerCase()}`,
payload: 'pam_account_clone'
}
vm.iAsset = vm.asset
vm.showAddDialog = false
setTimeout(() => {
vm.showAddDialog = true
})
}
},
{
name: 'Test',
title: vm.$t('VerifySecret'),
divided: true,
can: ({ row }) =>
!vm.$store.getters.currentOrgIsRoot &&
vm.$hasPerm('accounts.verify_account') &&
row.asset['auto_config'].ansible_enabled &&
row.asset['auto_config'].ping_enabled,
callback: ({ row }) => {
vm.$axios.post(
`/api/v1/accounts/accounts/tasks/`,
{ action: 'verify', accounts: [row.id] }
).then(res => {
openTaskPage(res['task'])
})
}
},
{
name: 'ClearSecret',
title: vm.$t('ClearSecret'),
can: vm.$hasPerm('accounts.change_account'),
type: 'primary',
callback: ({ row }) => {
vm.$axios.patch(
`/api/v1/accounts/accounts/clear-secret/`,
{ account_ids: [row.id] }
).then(() => {
vm.$message.success(vm.$tc('ClearSuccessMsg'))
})
}
},
{
name: 'SecretHistory',
title: vm.$t('HistoryPassword'),
can: () => vm.$hasPerm('accounts.view_accountsecret'),
type: 'primary',
callback: ({ row }) => {
vm.account = row
vm.currentAccountColumn = row
vm.showViewSecretDialog = false
vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
setTimeout(() => {
vm.showViewSecretDialog = true
})
}
},
{
name: 'CopyToOther',
title: vm.$t('CopyToAsset'),
type: 'primary',
divided: true,
can: () => vm.$hasPerm('accounts.create_account') && !vm.$store.getters.currentOrgIsRoot,
has: () => {
return !vm.asset
},
callback: ({ row }) => {
vm.accountCreateUpdateTitle = vm.$t('CopyToOther')
vm.$route.query.flag = 'copy'
vm.iAsset = vm.asset
vm.account = row
vm.showAddDialog = true
}
},
{
name: 'MoveToOther',
title: vm.$t('MoveToAsset'),
type: 'primary',
can: () => vm.$hasPerm('accounts.create_account') && !vm.$store.getters.currentOrgIsRoot,
has: () => {
return !vm.asset
},
callback: ({ row }) => {
vm.accountCreateUpdateTitle = vm.$t('MoveToOther')
vm.$route.query.flag = 'move'
vm.iAsset = vm.asset
vm.account = row
vm.showAddDialog = true
}
}
]
export const accountQuickFilters = (vm) => [
{
label: vm.$t('Recent (7 days)'),
options: [
{
label: vm.$t('RecentlyDiscovered'),
filter: {
latest_discovery: '1'
}
},
{
label: vm.$t('RecentlyLoggedIn'),
filter: {
latest_accessed: '1'
}
},
{
label: vm.$t('RecentlyModified'),
filter: {
latest_updated: '1'
}
},
{
label: vm.$t('RecentlyChangedPassword'),
filter: {
latest_secret_changed: '1'
}
},
{
label: vm.$t('RecentPasswordChangeFailed'),
filter: {
latest_secret_change_failed: '1'
}
}
]
},
{
label: vm.$t('RiskyAccount'),
options: [
{
label: vm.$t('NoLoginLongTime'),
filter: {
risk: 'long_time_no_login'
}
},
{
label: vm.$t('AddAccount'),
filter: {
risk: 'new_found'
}
},
{
label: vm.$t('WeakPassword'),
filter: {
risk: 'weak_password'
}
},
{
label: vm.$t('EmptyPassword'),
filter: {
has_secret: 'false'
}
},
{
label: vm.$t('LongTimePassword'),
filter: {
long_time_no_change_secret: 'true'
}
}
]
},
{
label: vm.$t('AccountType'),
options: [
{
label: vm.$t('All'),
filter: {
category: ''
}
},
{
label: vm.$t('Host'),
filter: {
category: 'host'
}
},
{
label: vm.$t('Database'),
filter: {
category: 'database'
}
},
{
label: vm.$t('Cloud'),
filter: {
category: 'cloud'
}
},
{
label: vm.$t('Device'),
filter: {
category: 'device'
}
},
{
label: 'Web',
filter: {
category: 'web'
}
},
{
label: vm.$t('Other'),
filter: {
category: 'custom'
}
}
]
}
]

View File

@@ -16,7 +16,7 @@
</template>
<script>
import IBox from '@/components/Common/IBox/index.vue'
import IBox from '@/components/IBox/index.vue'
import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
export default {
@@ -48,13 +48,11 @@ export default {
},
performAdd: {
type: Function,
default: (objects, that) => {
}
default: (objects, that) => {}
},
onAddSuccess: {
type: Function,
default: (objects, that) => {
}
default: (objects, that) => {}
},
canSelect: {
type: Function,
@@ -64,7 +62,8 @@ export default {
}
},
data() {
return {}
return {
}
},
methods: {
addObjects() {
@@ -78,18 +77,18 @@ export default {
</script>
<style scoped>
b, strong {
font-weight: 700;
font-size: 13px;
}
b, strong {
font-weight: 700;
font-size: 13px;
}
tr td {
line-height: 1.42857;
padding: 8px;
vertical-align: top;
}
tr td {
line-height: 1.42857;
padding: 8px;
vertical-align: top;
}
tr.item td {
border-top: 1px solid #e7eaec;
}
tr.item td {
border-top: 1px solid #e7eaec;
}
</style>

View File

@@ -2,6 +2,7 @@
<Dialog
:close-on-click-modal="false"
:title="$tc('Assets')"
:disabled-status="!isLoaded"
custom-class="asset-select-dialog"
top="2vh"
v-bind="$attrs"
@@ -22,8 +23,8 @@
:url="baseUrl"
class="tree-table"
v-bind="$attrs"
@loaded="handleTableLoaded"
v-on="$listeners"
@loaded="handleTableLoaded"
/>
</Dialog>
</template>
@@ -82,7 +83,7 @@ export default {
},
{
prop: 'address',
label: this.$t('Address'),
label: this.$t('IpDomain'),
sortable: 'custom'
},
{

View File

@@ -56,10 +56,6 @@ export default {
treeSetting: {
type: Object,
default: () => ({})
},
disabled: {
type: [Boolean, Function],
default: false
}
},
data() {
@@ -75,7 +71,6 @@ export default {
dialogVisible: false,
initialValue: _.cloneDeep(iValue),
select2Config: {
disabled: this.disabled,
value: iValue,
multiple: true,
clearable: true,

View File

@@ -142,9 +142,6 @@ export default {
treeSetting.showDelete = this.$hasPerm('assets.delete_node')
},
methods: {
reloadTable() {
this.$refs.TreeList.reloadTable()
},
setTreeUrlQuery() {
let str = ''
for (const key in this.treeUrlQuery) {

View File

@@ -3,7 +3,7 @@
</template>
<script>
import { DrawerListTable as ListTable } from '@/components'
import ListTable from '@/components/Table/ListTable/index.vue'
export default {
name: 'BlockedIPList',

View File

@@ -12,7 +12,7 @@
>
<el-form :model="secretInfo" class="password-form" label-position="right" label-width="100px">
<el-form-item :label="$tc('OldSecret')">
<SecretViewerFormatter
<ShowKeyCopyFormatter
:cell-value="secretInfo.old_secret"
:col="{ formatterArgs: {
name: 'old_secret'
@@ -20,7 +20,7 @@
/>
</el-form-item>
<el-form-item :label="$tc('NewSecret')">
<SecretViewerFormatter
<ShowKeyCopyFormatter
:cell-value="secretInfo.new_secret"
:col="{ formatterArgs: {
name: 'new_secret'
@@ -34,13 +34,13 @@
<script>
import Dialog from '@/components/Dialog/index.vue'
import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
export default {
name: 'RecordViewSecret',
components: {
Dialog,
SecretViewerFormatter
ShowKeyCopyFormatter
},
props: {
visible: {

View File

@@ -46,7 +46,7 @@ export default {
url: '/api/v1/settings/chatai-prompts/',
value: '',
multiple: false,
placeholder: this.$t('Role'),
placeholder: this.$t('Prompt'),
ajax: {
transformOption: (item) => {
return { label: item.name, value: item.content }

View File

@@ -1,74 +1,42 @@
<template>
<div :class="{ 'user-role': isUserRole }" class="chat-item">
<div class="chart-item-container">
<div class="avatar">
<el-avatar
:src="isUserRole ? userUrl : chatUrl"
class="header-avatar"
/>
<div :class="{'user-role': isUserRole}" class="chat-item">
<div class="avatar">
<el-avatar :src="isUserRole ? userUrl : chatUrl" class="header-avatar" />
</div>
<div class="content">
<div class="operational">
<span class="date">
{{ $moment(item.message.create_time).format('YYYY-MM-DD HH:mm:ss') }}
</span>
</div>
<div class="content">
<div class="operational">
<div v-if="!item.message.is_reasoning" class="date">
{{
$moment(item.message.create_time).format("YYYY-MM-DD HH:mm:ss")
}}
</div>
<div v-else class="thinking-time">{{ $i18n.t('DeeplyThoughtAbout') }}</div>
<div class="message">
<div class="message-content">
<span v-if="isSystemError" class="error">
{{ item.message.content }}
</span>
<span v-else class="chat-text">
<MessageText :message="item.message" />
</span>
</div>
<div :class="item.reasoning ? 'reasoning' : 'message'">
<div class="message-content">
<div v-if="!item.reasoning">
<span v-if="isSystemError" class="error">
{{ item.message.content }}
</span>
<span v-else class="chat-text">
<MessageText :message="item.message" />
</span>
</div>
<div v-else class="thinking-wrapper">
<div class="thinking-content">
<!-- eslint-disable-next-line -->
<div class="divider"></div>
<p>
<MessageText :message="item.reasoning" />
</p>
</div>
<div class="thinking-result">
<span v-if="isServerError" class="error">
{{ isServerError }}
</span>
<MessageText :message="item.result" />
</div>
</div>
</div>
<div class="action">
<el-tooltip
v-if="isSystemError && isLoading"
:content="$tc('Reconnect')"
:open-delay="500"
placement="top"
>
<svg-icon icon-class="refresh" @click="onRefresh" />
</el-tooltip>
<el-dropdown v-else size="small" @command="handleCommand">
<span class="el-dropdown-link">
<i class="fa fa-ellipsis-v" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="i in dropdownOptions"
:key="i.action"
:command="i.action"
>
{{ i.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="action">
<el-tooltip
v-if="isSystemError && isLoading"
:content="$tc('Reconnect')"
:open-delay="500"
placement="top"
>
<svg-icon icon-class="refresh" @click="onRefresh" />
</el-tooltip>
<el-dropdown v-else size="small" @command="handleCommand">
<span class="el-dropdown-link">
<i class="fa fa-ellipsis-v" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="i in dropdownOptions" :key="i.action" :command="i.action">
{{ i.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
@@ -77,7 +45,7 @@
<script>
import MessageText from './MessageText.vue'
import { mapGetters, mapState } from 'vuex'
import { mapState } from 'vuex'
import { copy } from '@/utils/common'
import { useChat } from '../../useChat.js'
import { reconnect } from '@/utils/socket'
@@ -97,6 +65,7 @@ export default {
},
data() {
return {
chatUrl: require('@/assets/img/chat.png'),
userUrl: '/api/v1/settings/logo/',
dropdownOptions: [
{
@@ -110,26 +79,11 @@ export default {
...mapState({
isLoading: state => state.chat.loading
}),
...mapGetters([
'publicSettings'
]),
isUserRole() {
return this.item.message?.role === 'user'
},
isSystemError() {
return (
this.item.type === 'error' && this.item?.role === 'assistant'
)
},
isServerError() {
return (this.item.type === 'finish' && this.item.result.content === '')
? this.$i18n.t('ServerBusyRetry')
: ''
},
chatUrl() {
return this.publicSettings.CHAT_AI_TYPE === 'gpt'
? require('@/assets/img/chat.png')
: require('@/assets/img/deepSeek.png')
return this.item.type === 'error' && this.item.message?.role === 'assistant'
}
},
methods: {
@@ -140,7 +94,7 @@ export default {
},
handleCommand(value) {
if (value === 'copy') {
copy(this.item.result.content)
copy(this.item.message.content)
}
}
}
@@ -150,160 +104,101 @@ export default {
<style lang="scss" scoped>
.chat-item {
display: flex;
padding: 0.5rem;
.chart-item-container {
display: flex;
gap: 0.5rem;
.avatar {
width: 24px;
height: 24px;
margin-top: 2px;
.header-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
&::v-deep img {
background-color: #fff;
}
}
}
.content {
display: flex;
flex-direction: column;
// gap: 0.5rem;
overflow: hidden;
.operational {
display: flex;
justify-content: space-between;
overflow: hidden;
.date {
padding-top: 5px;
}
.thinking-time {
width: 6rem;
display: flex;
justify-content: center;
padding: 5px 10px;
border-radius: 0.5rem;
background-color: #f5f5f5;
}
.copy {
float: right;
cursor: pointer;
}
}
.reasoning {
display: flex;
gap: 0.5rem;
align-items: flex-end;
.message-content .thinking-wrapper {
display: flex;
flex-direction: column;
gap: 0.5rem;
.thinking-content {
position: relative;
color: #8b8b8b;
.divider {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-left: 2px solid #e5e5e5;
}
p {
margin: unset;
padding-left: 0.5rem;
::v-deep p {
color: #8b8b8b;
}
}
}
}
}
.message {
display: -webkit-box;
.message-content {
flex: 1;
padding: 6px 10px;
border-radius: 2px 12px 12px;
background-color: #f0f1f5;
}
.action {
.svg-icon {
transform: translateY(50%);
margin-left: 3px;
cursor: pointer;
}
.el-dropdown {
height: 32px;
line-height: 37px;
font-size: 13px;
.el-dropdown-link {
i {
padding: 4px 5px;
font-size: 15px;
color: #8d9091;
&:hover {
color: #7b8085;
}
}
}
}
}
.error {
color: red;
}
}
}
}
padding: 16px 14px 0;
&:last-child {
padding-bottom: 16px;
}
&.user-role {
flex-direction: row-reverse;
.avatar {
width: 22px;
height: 22px;
margin-top: 2px;
.chart-item-container {
.header-avatar {
width: 100%;
height: 100%;
&::v-deep img {
background-color: #e5e5e7;
}
}
}
.content {
margin-left: 6px;
overflow: hidden;
.operational {
display: flex;
justify-content: space-between;
overflow: hidden;
.copy {
float: right;
cursor: pointer;
}
}
.message {
display: -webkit-box;
.message-content {
flex: 1;
padding: 6px 10px;
border-radius: 2px 12px 12px;
background-color: #f0f1f5;
}
.action {
.svg-icon {
transform: translateY(50%);
margin-left: 3px;
cursor: pointer;
}
.el-dropdown {
height: 32px;
line-height: 37px;
font-size: 13px;
.el-dropdown-link {
i {
padding: 4px 5px;
font-size: 15px;
color: #8d9091;
&:hover {
color: #7b8085
}
}
}
}
}
.error {
color: red;
}
}
}
}
.user-role {
flex-direction: row-reverse;
.content {
margin-right: 10px;
.operational {
flex-direction: row-reverse;
}
.content {
margin-right: 10px;
.message {
flex-direction: row-reverse;
.operational {
flex-direction: row-reverse;
}
.message {
flex-direction: row-reverse;
.message-content {
background-color: var(--menu-hover);
border-radius: 12px 2px 12px 12px;
}
.message-content {
background-color: var(--menu-hover);
border-radius: 12px 2px 12px 12px;
}
}
}

View File

@@ -123,17 +123,7 @@ export default {
setLoading(true)
removeLoadingMessageInChat()
this.conversationId = data.id
const newFragment = {
message: { id: data.message.id, is_reasoning: data.message.is_reasoning },
reasoning: { content: data.message.is_reasoning ? data.message.content : '' },
result: { content: data.message.is_reasoning ? '' : data.message.content },
role: data.message.role,
type: data.message.type,
create_time: data.message.create_time
}
updateChaMessageContentById(data.message.id, newFragment)
updateChaMessageContentById(data.message.id, data)
}
if (data.message?.type === 'finish') {
setLoading(false)

View File

@@ -7,7 +7,7 @@
/>
</template>
<script>
<script type="text/jsx">
import AssetTreeTable from '@/components/Apps/AssetTreeTable'
import { AccountInfoFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
import { connectivityMeta } from '@/components/Apps/AccountListTable/const'
@@ -87,7 +87,7 @@ export default {
columnsExclude: ['spec_info'],
columnsShow: {
min: ['name', 'address', 'accounts'],
default: ['name', 'address', 'platform', 'view_account', 'actions']
default: ['name', 'address', 'platform', 'connectivity', 'view_account', 'actions']
},
columnsMeta: {
name: {

View File

@@ -1,26 +1,24 @@
<template>
<TwoCol>
<ListTable v-bind="config" />
</TwoCol>
<el-row :gutter="24">
<el-col :md="20" :sm="22">
<ListTable v-bind="config" />
</el-col>
</el-row>
</template>
<script>
import { DrawerListTable as ListTable } from '@/components'
import ListTable from '@/components/Table/ListTable/index.vue'
import { toM2MJsonParams } from '@/utils/jms'
import { DetailFormatter } from '@/components/Table/TableFormatters'
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
export default {
name: 'AssetJsonTab',
components: {
TwoCol,
ListTable
},
props: {
object: {
type: Object,
default: () => {
}
default: () => {}
}
},
data() {
@@ -34,18 +32,21 @@ export default {
},
tableConfig: {
url: `/api/v1/assets/assets/?${key}=${value}`,
columns: ['name', 'address', 'platform', 'type', 'is_active'],
columnsShow: {
min: ['name', 'address'],
default: ['name', 'address', 'platform']
},
columns: ['name', 'address', 'platform',
'type', 'is_active'
],
columnsMeta: {
name: {
label: this.$t('Asset'),
formatter: DetailFormatter,
formatterArgs: {
getRoute: ({ row }) => {
return { name: 'AssetDetail', params: { id: row.id }}
formatter: (row) => {
const to = {
name: 'AssetDetail',
params: { id: row.id }
}
if (this.$hasPerm('assets.view_asset')) {
return <router-link to={to} class='text-link'>{row.name}</router-link>
} else {
return <span>{row.name}</span>
}
}
},
@@ -64,3 +65,7 @@ export default {
}
}
</script>
<style scoped>
</style>

View File

@@ -1,19 +1,18 @@
<template>
<TwoCol>
<ListTable v-bind="config" />
</TwoCol>
<el-row :gutter="24">
<el-col :md="20" :sm="22">
<ListTable v-bind="config" />
</el-col>
</el-row>
</template>
<script>
import { DrawerListTable as ListTable } from '@/components'
import ListTable from '@/components/Table/ListTable/index.vue'
import { toM2MJsonParams } from '@/utils/jms'
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
import { DetailFormatter } from '@/components/Table/TableFormatters'
export default {
name: 'User',
components: {
TwoCol,
ListTable
},
props: {
@@ -35,23 +34,22 @@ export default {
tableConfig: {
url: `/api/v1/users/users/?${key}=${value}`,
columns: [
'name', 'username', 'email', 'groups', 'system_roles',
'name', 'username', 'groups', 'system_roles',
'org_roles', 'source', 'is_valid'
],
columnsShow: {
min: ['name', 'username'],
default: ['name', 'username', 'email']
},
columnsMeta: {
name: {
label: this.$t('Name'),
formatter: DetailFormatter,
formatterArgs: {
getRoute: ({ row }) => {
return {
name: 'UserDetail',
params: { id: row.id }
}
width: 85,
formatter: (row) => {
const to = {
name: 'UserDetail',
params: { id: row.id }
}
if (this.$hasPerm('users.view_user')) {
return <router-link to={to} class='text-link'>{row.name}</router-link>
} else {
return <span>{row.name}</span>
}
}
},
@@ -89,3 +87,7 @@ export default {
}
}
</script>
<style scoped>
</style>

View File

@@ -1,43 +1,43 @@
<template>
<div>
<TwoCol>
<IBox :title="title" class="block" v-bind="$attrs">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:size="activity.size"
:timestamp="activity.timestamp"
:type="activity.type"
placement="bottom"
>
{{ activity.content }}
<el-link
v-if="activity['detail_url']"
type="primary"
@click.native="onClick(activity)"
<el-row :gutter="20">
<el-col :md="16" :sm="24">
<IBox :title="title" class="block" v-bind="$attrs">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:size="activity.size"
:timestamp="activity.timestamp"
:type="activity.type"
placement="bottom"
>
{{ $tc('Detail') }}
</el-link>
</el-timeline-item>
</el-timeline>
</IBox>
</TwoCol>
{{ activity.content }}
<el-link
v-if="activity['detail_url']"
type="primary"
@click.native="onClick(activity)"
>
{{ $tc('Detail') }}
</el-link>
</el-timeline-item>
</el-timeline>
</IBox>
</el-col>
</el-row>
<DiffDetail ref="DetailDialog" :title="$tc('OperateLog')" />
</div>
</template>
<script>
import IBox from '@/components/Common/IBox/index.vue'
import IBox from '@/components/IBox/index.vue'
import DiffDetail from '@/components/Dialog/DiffDetail.vue'
import { openTaskPage } from '@/utils/jms'
import { toSafeLocalDateStr } from '@/utils/time'
import TwoCol from '@/layout/components/Page/TwoColPage.vue'
export default {
name: 'ResourceActivity',
components: {
TwoCol,
IBox,
DiffDetail
},

View File

@@ -8,7 +8,7 @@
:visible.sync="visible"
class="dialog-content"
v-bind="$attrs"
width="740px"
width="600px"
@confirm="visible = false"
v-on="$listeners"
>
@@ -52,21 +52,11 @@
<el-row :gutter="24" style="margin: 0 auto;">
<el-col :md="24" :sm="24" style="display: flex; align-items: center; margin-bottom: 20px;">
<el-input
v-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'" style="margin: -1px 0 0 20px;">
<el-button
:disabled="smsBtnDisabled"
@@ -82,24 +72,9 @@
</el-row>
<el-row :gutter="24" style="margin: 10px auto;">
<el-col :md="24" :sm="24">
<el-button
v-if="subTypeSelected!=='face'"
class="confirm-btn"
size="mini"
type="primary"
@click="handleConfirm"
>
<el-button class="confirm-btn" size="mini" type="primary" @click="handleConfirm">
{{ this.$t('Confirm') }}
</el-button>
<el-button
v-if="subTypeSelected==='face'&&!isFaceCaptureVisible"
class="confirm-btn"
size="mini"
type="primary"
@click="handleFaceCapture"
>
{{ this.$tc('VerifyFace') }}
</el-button>
</el-col>
</el-row>
</div>
@@ -138,10 +113,7 @@ export default {
visible: false,
callback: null,
cancel: null,
processing: false,
isFaceCaptureVisible: false,
faceToken: null,
faceCaptureUrl: null
processing: false
}
},
computed: {
@@ -157,10 +129,6 @@ export default {
},
methods: {
handleSubTypeChange(val) {
if (val !== 'face') {
this.isFaceCaptureVisible = false
}
this.inputPlaceholder = this.subTypeChoices.filter(item => item.name === val)[0]?.placeholder
this.smsWidth = val === 'sms' ? 6 : 0
},
@@ -224,29 +192,6 @@ export default {
this.$message.error(this.$tc('FailedToSendVerificationCode'))
})
},
startFaceCapture() {
const url = '/api/v1/authentication/face/context/'
this.$axios.post(url).then(data => {
const token = data['token']
this.faceCaptureUrl = '/facelive/capture?token=' + token
this.isFaceCaptureVisible = true
const timer = setInterval(() => {
this.$axios.get(url + `?token=${token}`).then(data => {
if (data['is_finished']) {
clearInterval(timer)
this.isFaceCaptureVisible = false
this.handleConfirm()
}
})
}, 1000)
}).catch(() => {
this.$message.error(this.$tc('FailedToStartFaceCapture'))
})
},
handleFaceCapture() {
this.startFaceCapture()
},
handleConfirm() {
if (this.confirmTypeRequired === 'relogin') {
return this.logout()
@@ -269,8 +214,6 @@ export default {
})
}).catch((err) => {
this.$message.error(err.message || this.$tc('ConfirmFailed'))
this.faceCaptureUrl = null
this.isFaceCaptureVisible = false
})
}
}
@@ -278,21 +221,21 @@ export default {
</script>
<style lang="scss" scoped>
.dialog-content ::v-deep .el-dialog__footer {
padding: 0;
}
.dialog-content ::v-deep .el-dialog {
padding: 8px;
.el-dialog__body {
padding-top: 30px;
padding-bottom: 30px;
.dialog-content ::v-deep .el-dialog__footer {
padding: 0;
}
}
.confirm-btn {
width: 100%;
line-height: 20px;
}
.dialog-content ::v-deep .el-dialog {
padding: 8px;
.el-dialog__body {
padding-top: 30px;
padding-bottom: 30px;
}
}
.confirm-btn {
width: 100%;
line-height: 20px;
}
</style>

View File

@@ -1,133 +0,0 @@
<template>
<AutoDataForm
ref="AutoDataForm"
class="variable-add"
:submit-btn-text="submitBtnText"
v-bind="$data"
@submit="confirm"
/>
</template>
<script>
import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
export default {
name: 'VariableCreateForm',
components: {
AutoDataForm
},
props: {
variable: {
type: Object,
default: () => ({})
}
},
data() {
const defaultValidator = (rule, value, callback) => {
if (this.defaultValueRequired && !value) {
callback(new Error(this.$t('FieldRequiredError')))
} else {
callback()
}
}
return {
defaultValueRequired: false,
submitBtnText: this.$t('Confirm'),
url: '/api/v1/ops/variables/',
form: Object.assign({ 'on_invalid': 'error' }, this.variable || {}),
fields: [
['', ['name', 'var_name', 'type', 'text_default_value', 'select_default_value', 'extra_args', 'tips', 'required']]
],
fieldsMeta: {
text_default_value: {
label: this.$t('DefaultValue'),
hidden: (formValue) => {
return formValue.type !== 'text'
},
rules: [{ validator: defaultValidator }],
helpTip: this.$t('DefaultValueTip'),
el: {
type: 'input'
}
},
select_default_value: {
label: this.$t('DefaultValue'),
helpTip: this.$t('DefaultValueTip'),
hidden: (formValue) => {
return formValue.type !== 'select'
},
rules: [{ validator: defaultValidator }],
el: { type: 'input' }
},
extra_args: {
hidden: (formValue) => {
return formValue.type !== 'select'
},
el: { type: 'textarea', rows: 4, placeholder: this.$t('ExtraArgsPlaceholder') },
rules: [
{
validator: (rule, value, callback) => {
try {
const lines = value.split('\n')
const regex = /^[^:]+:[^:]+$/
for (const line of lines) {
if (!regex.test(line.trim())) {
callback(new Error(this.$t('ExtraArgsFormatError')))
}
}
} catch (e) {
callback(new Error(this.$t('ExtraArgsFormatError')))
}
callback()
}
}
]
},
required: {
on: {
change: ([event], updateForm) => {
this.defaultValueRequired = event
}
}
}
},
hasSaveContinue: false,
method: 'get'
}
},
mounted() {
this.defaultValueRequired = this.variable?.required || false
},
methods: {
confirm(form) {
if (this.variable?.name) {
this.$emit('edit', form)
} else {
this.$emit('add', form)
}
}
}
}
</script>
<style lang='scss' scoped>
.variable-add {
::v-deep .el-form-item {
margin-bottom: 5px;
.help-block {
margin-bottom: 5px;
}
}
::v-deep .form-group-header {
.hr-line-dashed {
margin: 5px 0;
}
h3 {
margin-bottom: 10px;
}
}
}
</style>

View File

@@ -1,74 +0,0 @@
<template>
<AutoDataForm
ref="AutoDataForm"
class="variable-set"
:submit-btn-text="submitBtnText"
v-bind="$data"
:fields="fields"
@submit="confirm"
/>
</template>
<script>
import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
export default {
name: 'VariableSetForm',
components: {
AutoDataForm
},
props: {
formData: {
type: Array,
default: () => ([])
},
queryParam: {
type: String,
default: ''
}
},
data() {
return {
submitBtnText: this.$t('Confirm'),
// 防止缓存form remoteMeta
url: `/api/v1/ops/variables/form-data/?t=${new Date().getTime()}&` + this.queryParam,
form: {},
hasSaveContinue: false,
method: 'get',
hasReset: false
}
},
computed: {
fields() {
return [['', this.formData.map(item => item.var_name)]]
}
},
methods: {
confirm(form) {
this.$emit('confirm', form)
}
}
}
</script>
<style lang='scss' scoped>
.variable-set {
::v-deep .el-form-item {
margin-bottom: 5px;
.help-block {
margin-bottom: 5px;
}
}
::v-deep .form-group-header {
.hr-line-dashed {
margin: 5px 0;
}
h3 {
margin-bottom: 10px;
}
}
}
</style>

View File

@@ -78,7 +78,7 @@ export default {
formatterData = data
}
return (
<span style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: '1.2' }}>{formatterData}</span>
<span style={{ whiteSpace: 'pre-wrap', lineHeight: '1.2' }}>{formatterData}</span>
)
}
if (this.value instanceof Array) {
@@ -92,7 +92,7 @@ export default {
)
}
return (
<span style='white-space: pre-wrap;' title={this.displayValue}>{this.displayValue}</span>
<span title={this.displayValue}>{this.displayValue}</span>
)
}
}

View File

@@ -1,12 +1,7 @@
<template>
<IBox v-if="loading" style="width: 100%; height: 200px" />
<div v-else>
<DetailCard
v-if="hasObject && items.length > 0"
:items="validItems"
:loading="loading"
v-bind="$attrs"
/>
<DetailCard v-if="hasObject && items.length > 0" :items="validItems" :loading="loading" v-bind="$attrs" />
</div>
</template>
@@ -14,7 +9,7 @@
import DetailCard from './index.vue'
import { copy } from '@/utils/common'
import { toSafeLocalDateStr } from '@/utils/time'
import IBox from '@/components/Common/IBox/index.vue'
import IBox from '@/components/IBox/index.vue'
import LabelsDetailFormatter from '../Formatters/LabelsDetailFormatter.vue'
export default {
@@ -37,7 +32,7 @@ export default {
type: Array,
default: null
},
showUndefined: {
showUndefine: {
type: Boolean,
default: true
},
@@ -173,7 +168,7 @@ export default {
const data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
let remoteMeta = data.actions['GET'] || {}
if (this.nested) {
remoteMeta = remoteMeta[this.nested]?.children || remoteMeta || {}
remoteMeta = remoteMeta[this.nested]?.children || {}
}
let fields = this.fields
fields = fields || Object.keys(remoteMeta)
@@ -225,7 +220,7 @@ export default {
value = this.parseValue(value, fieldMeta.type)
if (value === undefined) {
if (this.showUndefined) {
if (this.showUndefine) {
value = '-'
} else {
continue

View File

@@ -1,25 +1,24 @@
<template>
<IBox :fa="fa" :title="title">
<el-form :label-width="labelWidth" class="content detail-card" label-position="left">
<template v-for="item in items">
<div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item">
<span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span>
<span class="item-value el-form-item__content">
<template
:is="item.component"
v-if="item.component"
v-bind="{...item}"
/>
<ItemValue v-else :value="item.value" v-bind="item" />
</span>
</div>
</template>
<el-form :label-width="labelWidth" class="content" label-position="left">
<span v-for="item in items" :key="item.key">
<el-form-item v-if="item.has !== false" :class="item.class" :label="item.key">
<span slot="label"> {{ formateLabel(item.key) }}</span>
<span
:is="item.component"
v-if="item.component"
v-bind="{...item}"
/>
<ItemValue v-else :value="item.value" class="item-value" v-bind="item" />
</el-form-item>
</span>
</el-form>
<slot />
</IBox>
</template>
<script>
import IBox from '@/components/Common/IBox/index.vue'
import IBox from '../../IBox/index.vue'
import ItemValue from './ItemValue.vue'
export default {
@@ -46,7 +45,7 @@ export default {
},
labelWidth: {
type: String,
default: '120px'
default: '25%'
}
},
data() {
@@ -72,76 +71,55 @@ export default {
padding: 20px 40px;
}
.content {
font-size: 13px;
line-height: 2;
.el-form-item {
border-bottom: 1px dashed #EBEEF5;
padding: 1px 0;
margin-bottom: 0;
::v-deep .el-form-item {
border-bottom: 1px dashed #F4F4F4;
padding: 1px 0;
margin-bottom: 0;
display: flex;
align-items: center;
//text-align: end;
line-height: 32px;
min-height: 32px;
&:last-child {
border-bottom: none;
}
&:last-child {
//border-bottom: none;
&.array-item {
border-bottom: none;
::v-deep .el-form-item__content {
border-bottom: 1px dashed #EBEEF5
}
&.array-item {
border-bottom: none;
::v-deep .el-form-item__content {
border-bottom: 1px dashed #EBEEF5
}
::v-deep .el-form-item__label:last-child {
border: 1px dashed #EBEEF5;
}
}
.el-form-item__label {
//padding-right: 8%;
overflow: hidden;
color: var(--color-icon-primary);
font-size: 12px;
line-height: 1.5;
font-weight: 400;
width: 33%;
min-width: 120px;
padding: 5px 0;
span {
display: inline-block;
//line-height: 1.1;
}
}
.el-form-item__content {
color: var(--color-text-primary);
font-size: 13px;
line-height: 1.5;
width: calc(100% - 120px);
padding: 5px 0;
}
::v-deep .el-tag--mini {
margin-right: 3px;
::v-deep .el-form-item__label:last-child {
border: 1px dashed #EBEEF5;
}
}
.item-value {
::v-deep span {
//display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
vertical-align: middle;
::v-deep .el-form-item__label {
padding-right: 8%;
overflow: hidden;
color: var(--color-icon-primary);
span {
display: inline-block;
line-height: 1.5;
}
}
::v-deep .el-form-item__content {
color: var(--color-text-primary);
font-size: 13px;
line-height: 40px;
}
::v-deep .el-tag--mini {
margin-right: 3px;
}
}
.item-value span {
word-break: break-word;
}
.content {
font-size: 13px;
line-height: 2.5;
}
</style>

View File

@@ -49,7 +49,7 @@
<script>
import { createSourceIdCache } from '@/api/common'
import { Select2 } from '@/components/Form/FormFields'
import IBox from '@/components/Common/IBox/index.vue'
import IBox from '@/components/IBox/index.vue'
import { mapGetters } from 'vuex'
export default {
@@ -340,13 +340,13 @@ b, strong {
}
tr td {
line-height: 1.4;
padding: 8px 0;
line-height: 1.42857;
padding: 8px;
vertical-align: top;
}
tr.item td {
border-top: 1px dashed #EBEEF5;
border-top: 1px solid #e7eaec;
}
.box-margin {

View File

@@ -1,27 +1,21 @@
<template>
<div>
<div class="summary-header">
<el-tooltip :content="title" placement="top" :open-delay="500">
<span class="title">{{ title }}</span>
</el-tooltip>
<el-card shadow="never">
<div slot="header" class="summary-header">
<span class="header-title">{{ title }}</span>
</div>
<slot>
<h3 class="no-margins ">
<span
v-async="iCount"
class="num"
:class="{ 'can-direct': body.canDirect ? true : false }"
@click="handleClick"
>
-
</span>
</h3>
<h1 class="no-margins">
<span v-if="body.disabled" class="disabled-link">{{ body.count }}</span>
<router-link v-else :to="body.route">
<span>{{ body.count }}</span>
</router-link>
</h1>
<small>{{ body.comment }}</small>
</slot>
</div>
</el-card>
</template>
<script>
export default {
name: 'SummaryCard',
props: {
@@ -29,90 +23,56 @@ export default {
type: String,
default: ''
},
body: {
rightSideLabel: {
type: Object,
default: () => ({})
},
count: {
type: [Number, String, Promise],
default: 0
},
route: {
type: [String, Object],
default: ''
},
callback: {
type: Function,
default: () => {
}
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {}
},
computed: {
iCount() {
const count = this.body.count || this.count
return count
},
iRoute() {
return this.body.route || this.route
},
iDisabled() {
return this.body.disabled === undefined ? this.disabled : this.body.disabled
}
},
methods: {
handleClick() {
if (this.iDisabled) {
return
}
if (this.iRoute) {
this.$router.push(this.iRoute)
return
}
this.callback.bind(this)()
this.$emit('click')
body: {
type: Object,
default: () => ({})
}
}
}
</script>
<style lang="scss" scoped>
.summary-header {
//color: var(--color-icon-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
.pull-right {
float: right !important;
}
.title {
font-style: normal;
.header-title {
font-size: 14px;
margin: 0 0 7px;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
line-height: 1.2;
}
}
.no-margins {
margin: 0 !important;
.num {
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 40px;
color: var(--color-text-primary);
cursor: pointer;
&.can-direct:hover {
color: var(--color-primary);
}
.right-side ::v-deep .el-tag {
font-weight: 600;
padding: 3px 8px;
text-shadow: none;
line-height: 1;
}
h1 {
font-size: 30px;
font-weight: 100;
}
.el-card__body {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px !important;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0;
}
.no-margins {
margin: 0 !important;
}
.disabled-link {
color: #428bca;
}
}
</style>

View File

@@ -5,28 +5,15 @@
v-if="action.dropdown"
v-show="action.dropdown.length > 0"
:key="action.name"
:class="[action.name, {grouped: action.grouped }]"
:size="action.size"
:split-button="!!action.split"
:type="action.type"
class="action-item"
placement="bottom-start"
trigger="click"
@click="handleClick(action)"
@command="handleDropdownCallback"
>
<span v-if="action.split">
{{ action.title }}
</span>
<el-button
v-else
:class="action.name"
:size="size"
class="more-action"
v-bind="{...cleanButtonAction(action), icon: ''}"
>
<span class="pre-icon">
<Icon v-if="action.icon" :icon="action.icon" />
<el-button :size="size" class="more-action" v-bind="cleanButtonAction(action)">
<span v-if="action.icon && !action.icon.startsWith('el-')" class="pre-icon">
<i v-if="action.icon.startsWith('fa')" :class="'fa fa-fw ' + action.icon" />
<svg-icon v-else :icon-class="action.icon" />
</span>
<span v-if="action.title">
{{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
@@ -42,13 +29,7 @@
>
{{ option.group }}
</div>
<el-tooltip
:key="option.name"
:content="option.tip"
:disabled="!option.tip"
:open-delay="500"
placement="top"
>
<el-tooltip :key="option.name" :content="option.tip" :disabled="!option.tip" :open-delay="500" placement="top">
<el-dropdown-item
:key="option.name"
:command="[option, action]"
@@ -56,8 +37,9 @@
class="dropdown-item"
v-bind="{...option, icon: ''}"
>
<span v-if="actionsHasIcon(action.dropdown)" class="pre-icon">
<Icon v-if="option.icon" :icon="option.icon" />
<span v-if="option.icon" class="pre-icon">
<i v-if="option.icon.startsWith('fa')" :class="'fa fa-fw ' + option.icon" />
<svg-icon v-else :icon-class="option.icon" />
</span>
{{ option.title }}
</el-dropdown-item>
@@ -69,16 +51,16 @@
<el-button
v-else
:key="action.name"
:class="[action.name, {grouped: action.grouped }]"
:size="size"
class="action-item"
v-bind="{...cleanButtonAction(action), icon: ''}"
v-bind="{...cleanButtonAction(action), icon: action.icon && action.icon.startsWith('el-') ? action.icon : ''}"
@click="handleClick(action)"
>
<el-tooltip :content="action.tip" :disabled="!action.tip" placement="top">
<el-tooltip :content="action.tip" :disabled="!action.tip" :open-delay="500" placement="top">
<span>
<span v-if="action.icon" style="vertical-align: initial">
<Icon :icon="action.icon" />
<span v-if="action.icon && !action.icon.startsWith('el-')" style="vertical-align: initial">
<i v-if="action.icon.startsWith('fa')" :class="'fa ' + action.icon" />
<svg-icon v-else :icon-class="action.icon" />
</span>
{{ action.title }}
</span>
@@ -90,13 +72,9 @@
<script>
import { toSentenceCase } from '@/utils/common'
import Icon from '@/components/Widgets/Icon/index.vue'
export default {
name: 'DataActions',
components: {
Icon
},
props: {
grouped: {
type: Boolean,
@@ -121,9 +99,6 @@ export default {
}
},
methods: {
actionsHasIcon(actions) {
return actions.some(action => action.icon)
},
hasIcon(action, type = '') {
const icon = action.icon
if (!icon) {
@@ -181,7 +156,6 @@ export default {
delete action['callback']
delete action['name']
delete action['can']
delete action['split']
return action
},
cleanActions(actions) {
@@ -211,10 +185,6 @@ export default {
}
delete action['can']
if (!action.size) {
action.size = 'small'
}
if (action.dropdown) {
action.dropdown = this.cleanActions(action.dropdown)
}
@@ -239,10 +209,6 @@ $color-drop-menu-border: #e4e7ed;
.action-item {
margin-left: 5px;
&.grouped {
margin-left: 0;
}
&:first-child {
margin-left: 0;
}
@@ -283,15 +249,10 @@ $color-drop-menu-border: #e4e7ed;
align-items: flex-end;
.el-button {
padding: 2px 5px;
&:not(.is-plain) {
color: $btn-text-color;
}
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
padding: 2px 6px;
color: $btn-text-color;
* {
vertical-align: baseline !important;
@@ -319,6 +280,7 @@ $color-drop-menu-border: #e4e7ed;
// options
.el-dropdown-menu {
::v-deep .more-batch-processing {
text-align: center;
&:hover {
background-color: transparent !important;
@@ -341,7 +303,6 @@ $color-drop-menu-border: #e4e7ed;
.dropdown-item {
color: var(--color-text-primary);
line-height: 34px;
.pre-icon {
width: 17px;
@@ -363,8 +324,6 @@ $color-drop-menu-border: #e4e7ed;
}
.el-dropdown-menu__item {
padding: 0 20px;
&.is-disabled {
color: var(--color-disabled);
cursor: not-allowed;

View File

@@ -1,7 +1,6 @@
<template>
<Dialog
v-if="detailVisible"
:modal="false"
:show-cancel="false"
:show-confirm="false"
:title="title"

View File

@@ -1,71 +0,0 @@
<template>
<Dialog
:show-cancel="false"
:visible="iVisible"
class="processing-dialog"
height="300"
title="Processing"
width="300"
@confirm="iVisible=false"
>
<div id="load">
<div class="spinner" />
</div>
</Dialog>
</template>
<script>
import Dialog from './index.vue'
export default {
name: 'ProcessingDialog',
components: { Dialog },
props: {
visible: {
type: Boolean,
default: false
}
},
data() {
return {}
},
computed: {
iVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
}
}
}
</script>
<style lang="scss" scoped>
.processing-dialog {
::v-deep .el-dialog__body {
overflow: hidden;
}
}
.spinner {
width: 100px;
height: 100px;
border: 5px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: var(--color-primary);
animation: spin 1s infinite linear;
}
#load {
display: flex;
justify-content: center;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>

View File

@@ -1,69 +0,0 @@
<template>
<Dialog
:visible="iVisible"
height="300"
title="Processing"
width="300"
class="processing-dialog"
>
<div id="load">
<div class="spinner" />
</div>
</Dialog>
</template>
<script>
import Dialog from './index.vue'
export default {
name: 'RemoteProcessingDialog',
components: { Dialog },
props: {
visible: {
type: Boolean,
default: false
}
},
data() {
return {}
},
computed: {
iVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
}
}
}
</script>
<style lang="scss" scoped>
.processing-dialog {
::v-deep .el-dialog__body {
overflow: hidden;
}
}
.spinner {
width: 100px;
height: 100px;
border: 5px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: var(--color-primary);
animation: spin 1s infinite linear;
}
#load {
display: flex;
justify-content: center;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>

View File

@@ -1,75 +0,0 @@
<template>
<div>
<Dialog
v-if="iVisible"
:destroy-on-close="true"
:show-cancel="false"
:show-confirm="false"
:title="$tc('Report')"
:visible.sync="iVisible"
top="35vh"
width="80%"
@close="loading=true"
>
<span v-if="loading" v-loading="loading" class="loading" />
<iframe title="dialog" :src="url" style="border: none;" @load="onIframeLoad" />
</Dialog>
</div>
</template>
<script>
import Dialog from '@/components/Dialog/index.vue'
export default {
name: 'ReportDialog',
components: {
Dialog
},
props: {
visible: {
type: Boolean,
default: false
},
url: {
type: String,
default: ''
}
},
data() {
return {
loading: true
}
},
computed: {
iVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
}
},
mounted() {
},
beforeMount() {
},
methods: {
onIframeLoad() {
this.loading = false
}
}
}
</script>
<style lang="scss" scoped>
iframe {
width: 100%;
height: 500px;
}
.loading {
margin-top: 20px;
display: block;
}
</style>

View File

@@ -1,96 +0,0 @@
<template>
<Dialog
:show-cancel="false"
:title="title"
:visible.sync="visible"
:close-on-click-modal="false"
width="700px"
@close="onClose"
@confirm="visible = false"
>
<el-alert type="warning" :closable="false">
{{ warningText }}
<div class="secret">
<div class="row">
<span class="col">ID:</span>
<span class="value">{{ keyInfo.id }}</span>
<i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.id)" />
</div>
<div class="row">
<span class="col">Secret:</span>
<span class="value">{{ keyInfo.secret }}</span>
<i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.secret)" />
</div>
</div>
</el-alert>
</Dialog>
</template>
<script>
import i18n from '@/i18n/i18n'
import { copy } from '@/utils/common'
import Dialog from '@/components/Dialog/index'
export default {
name: 'Secret',
components: {
Dialog
},
props: {
title: {
type: String,
default: () => i18n.t('CreateAccessKey')
},
warningText: {
type: String,
default: () => i18n.t('ApiKeyWarning')
}
},
data() {
return {
keyInfo: { id: '', secret: '' },
visible: false
}
},
methods: {
show(data) {
this.keyInfo = data
this.visible = true
},
onClose() {
this.$emit('close')
},
handleCopy(value) {
copy(value)
}
}
}
</script>
<style lang='scss' scoped>
.secret {
color: #2b2f3a;
margin-top: 20px;
}
.row {
margin-bottom: 10px;
}
.col {
width: 100px;
text-align: left;
display: inline-block;
}
.copy-icon {
margin-left: 5px;
cursor: pointer;
transition: color 0.2s;
}
.value {
font-weight: 600;
}
</style>

View File

@@ -2,7 +2,6 @@
<transition name="dialog-fade">
<el-dialog
:append-to-body="true"
:class="{ shadow: shadow }"
:modal-append-to-body="true"
:title="title"
:top="top"
@@ -47,7 +46,7 @@ export default {
},
width: {
type: String,
default: '800px'
default: '60%'
},
showConfirm: {
type: Boolean,
@@ -80,14 +79,11 @@ export default {
maxWidth: {
type: String,
default: '1200px'
},
shadow: {
type: Boolean,
default: true
}
},
data() {
return {}
return {
}
},
computed: {
iWidth() {
@@ -106,69 +102,59 @@ export default {
</script>
<style lang="scss" scoped>
.dialog.shadow ::v-deep .el-dialog {
box-shadow: 1px 2px 12px 0 rgba(0, 0, 0, 0.6);
}
.dialog ::v-deep .el-dialog {
border-radius: 0.3em;
max-width: min(100vw, 1500px);
.form-group-header {
margin-left: 20px;
}
.el-form--label-top {
.form-group-header {
margin-left: 0;
}
}
.el-icon-circle-check {
display: none;
}
&__header {
box-sizing: border-box;
padding: 15px 22px;
border-bottom: 1px solid #dee2e6;
font-weight: 400;
}
&__body {
padding: 20px 30px;
font-size: 13px;
&:has(.el-table) {
background: #f3f3f4;
}
}
&__footer {
border-top: 1px solid #dee2e6;
padding: 16px 25px;
justify-content: flex-end;
}
}
@media (max-width: 900px) {
.dialog ::v-deep .el-dialog {
max-width: calc(100% - 30px);
border-radius: 0.3em;
max-width: min(100vw, 1500px);
.form-group-header {
margin-left: 20px;
}
.el-icon-circle-check {
display: none;
}
&__header {
box-sizing: border-box;
padding: 15px 22px;
border-bottom: 1px solid #dee2e6;
font-weight: 400;
}
&__body {
padding: 20px 30px;
font-size: 13px;
&:has(.el-table) {
background: #f3f3f4;
}
}
&__footer {
border-top: 1px solid #dee2e6;
padding: 16px 25px;
justify-content: flex-end;
}
}
}
.dialog-footer ::v-deep button.el-button {
font-size: 13px;
padding: 8px 12px;
}
@media (max-width: 900px) {
.dialog ::v-deep .el-dialog {
max-width: calc(100% - 30px);
}
}
.dialog-fade-enter-active, .dialog-fade-leave-active {
transition: opacity 1s ease;
}
.dialog-footer ::v-deep button.el-button {
font-size: 13px;
padding: 8px 12px;
}
.dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */
{
opacity: 0;
}
.dialog-fade-enter-active, .dialog-fade-leave-active {
transition: opacity 1s ease;
}
.dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */
{
opacity: 0;
}
</style>

View File

@@ -1,301 +0,0 @@
<template>
<el-drawer
ref="drawer"
v-el-drawer-drag-width
:append-to-body="true"
:before-close="handleClose"
:class="['drawer', { 'drawer__no-footer': !hasFooter }]"
:modal="modal"
:size="size"
:title="title"
:visible.sync="iVisible"
custom-class="drawer"
destroy-on-close
direction="rtl"
v-on="$listeners"
>
<div class="drawer__content">
<slot name="default">
<component
:is="component"
v-if="component"
ref="dynamicComponent"
v-bind="componentProps"
v-on="componentListeners"
/>
</slot>
</div>
<div v-if="hasFooter" ref="drawerFooter" class="drawer__footer" />
</el-drawer>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
},
size: {
type: String,
default: '768px'
},
component: {
type: [String, Function, Object],
default: ''
},
componentProps: {
type: Object,
default: () => ({})
},
componentListeners: {
type: Object,
default: () => ({})
},
visible: {
type: Boolean,
default: false
},
modal: {
type: Boolean,
default: true
},
hasFooter: {
type: Boolean,
default: false
}
},
data() {
return {
loading: false,
formLabelWidth: '80px'
}
},
computed: {
iVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
}
},
mounted() {
},
methods: {
handleClose(done) {
this.$emit('close-drawer')
done()
}
}
}
</script>
<style lang='scss' scoped>
.drawer__no-footer {
::v-deep {
.drawer {
.page {
height: calc(100vh - 55px);
}
}
}
}
@media (max-width: 992px) {
.drawer ::v-deep {
.el-form-item {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
}
}
.drawer {
::v-deep {
min-width: 565px;
.el-card__body {
padding-top: 10px;
padding-bottom: 20px;
}
.page-submenu {
.el-tabs__header {
padding: 0 15px;
}
.el-tabs__item.is-top {
padding: 0 10px;
}
}
.form-buttons {
margin-left: 13px;
}
.el-form {
margin-right: 1px;
padding-right: 15px;
height: 100%;
&.detail-card {
padding-right: 0;
margin-top: unset;
}
// Detail 中
&.content {
margin-right: 0;
}
.form-buttons {
//position: absolute;
// bottom: 13px;
// margin-left: 20%;
// margin-top: 0;
}
// Form 中的子 form
.el-form {
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.el-form-item {
.el-form-item__label {
padding-right: 20px;
}
.el-radio {
line-height: 25px;
margin-right: 13px;
.el-radio__label {
padding-left: 5px;
}
}
}
&.el-form--label-top {
.el-radio-group {
.el-radio {
display: block;
padding-bottom: 3px;
}
}
.el-form-item {
padding-left: 12px;
.el-form-item__label {
padding: 0 20px 0 0;
line-height: 30px;
}
.sub-form {
margin-left: -1px;
.form-fields {
max-height: unset;
}
}
}
&.form-fields {
//overflow: auto;
//max-height: calc(100vh - 180px);
}
.el-checkbox-group {
.el-checkbox {
display: block;
padding-bottom: 3px;
}
}
.el-form-item__content:has(.el-checkbox):not(:has(.el-checkbox-group)) {
display: inline-block; /* 更改为 inline-block */
//width: unset; /* 这个设置上去后,平台详情中, Automations 会有问题 */
vertical-align: bottom;
}
.el-form-item__content {
form {
.el-form-item {
padding-left: 0;
}
}
}
}
.form-group-header {
margin-left: 20px;
}
}
.el-drawer__header {
border-bottom: 1px solid #EBEEF5;
margin-bottom: 0;
padding: 15px 20px;
font-size: 16px;
font-weight: 500;
color: var(--color-text-primary);
}
.sql.container {
display: none;
}
.page {
overflow-y: auto;
height: calc(100vh - 110px);
&.tab-page {
.page-content {
padding-right: 0;
padding-left: 0;
}
}
.page-content {
height: unset;
padding-right: 10px;
padding-left: 20px;
& > div {
margin-bottom: 1px;
}
}
.ibox {
margin-bottom: 10px;
border: none;
}
}
.drawer__content, .tab-page-content {
height: 100%;
background: #f3f3f3;
}
.drawer__footer {
border-top: solid 1px #f3f3f3;
}
//.el-drawer__header {
// margin-bottom: 20px;
//
// span {
// font-size: 16px;
// font-weight: 800;
// color: var(--color-text-primary);
// }
//}
}
}
</style>

View File

@@ -1,27 +1,25 @@
<template>
<div>
<DataForm
v-if="!loading"
ref="dataForm"
:fields="totalFields"
:form="iForm"
v-bind="$attrs"
v-on="$listeners"
<DataForm
v-if="!loading"
ref="dataForm"
:fields="totalFields"
:form="iForm"
v-bind="$attrs"
v-on="$listeners"
>
<div
v-for="(group, i) in groups"
:key="'group-'+group.name"
:slot="'id:'+group.name"
>
<template
v-for="(group, i) in groups"
:slot="'id:'+group.name"
>
<FormGroupHeader
v-if="!groupHidden(group, i)"
:key="'group-' + group.name"
:group="group"
:index="i"
:line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
/>
</template>
</DataForm>
</div>
<FormGroupHeader
v-if="!groupHidden(group, i)"
:group="group"
:index="i"
:line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
/>
</div>
</DataForm>
</template>
<script>
@@ -89,7 +87,6 @@ export default {
}
},
mounted() {
// console.log('Method: ', this.method)
this.optionUrlMetaAndGenerateColumns()
},
methods: {
@@ -166,6 +163,5 @@ export default {
return true
}
}
}
</script>

View File

@@ -1,6 +1,7 @@
import Vue from 'vue'
import ObjectSelect2 from '@/components/Form/FormFields/NestedObjectSelect2.vue'
import NestedField from '@/components/Form/AutoDataForm/components/NestedField.vue'
import Switcher from '@/components/Form/FormFields/Switcher.vue'
import rules from '@/components/Form/DataForm/rules'
import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
@@ -63,9 +64,8 @@ export class FormFieldGenerator {
}
break
case 'boolean':
type = 'checkbox'
// field.component = Switcher
// field.type = 'checkbox'
type = ''
field.component = Switcher
break
case 'list':
type = 'input'
@@ -112,7 +112,7 @@ export class FormFieldGenerator {
let nestedFields = fieldMeta.fields || []
const nestedFieldsMeta = fieldMeta.fieldsMeta || {}
const nestedFieldsRemoteMeta = fieldRemoteMeta.children || {}
if (nestedFields.toString() === '__all__') {
if (nestedFields === '__all__') {
nestedFields = Object.keys(nestedFieldsRemoteMeta)
}
for (const name of nestedFields) {

View File

@@ -8,21 +8,18 @@
v-bind="data.attrs"
>
<template v-if="data.label" #label>
<span :title="data.label">
<span v-if="data.required">* </span>
{{ data.label }}
<el-tooltip
v-if="data.helpTip"
:open-delay="500"
:tabindex="-1"
effect="dark"
placement="right"
popper-class="help-tips"
>
<div slot="content" v-sanitize="data.helpTip" class="help-tip-content" /> <!-- Noncompliant -->
<i class="fa fa-question-circle-o help-tip-icon" />
</el-tooltip>
</span>
<span>{{ data.label }}</span>
<el-tooltip
v-if="data.helpTip"
:open-delay="500"
:tabindex="-1"
effect="dark"
placement="right"
popper-class="help-tips"
>
<div slot="content" v-sanitize="data.helpTip" class="help-tip-content" /> <!-- Noncompliant -->
<i class="fa fa-question-circle-o help-tip-icon" />
</el-tooltip>
</template>
<template v-if="readonly && hasReadonlyContent">
<div
@@ -74,7 +71,6 @@
<el-tooltip v-if="opt.tip" :content="opt.tip" :open-delay="500" placement="top">
<i class="el-icon-warning-outline" />
</el-tooltip>
<span v-if="data.helpText">{{ data.helpText }}</span>
</el-checkbox>
<!-- WARNING: radio label 属性来表示 value 的含义 -->
<!-- FYI: radio value 属性可以在没有 radio-group 时用来关联到同一个 v-model -->
@@ -91,7 +87,7 @@
</el-radio>
</template>
</custom-component>
<div v-if="data.helpText" :class="data.type" class="help-block">
<div v-if="data.helpText" class="help-block">
<el-alert
v-if="data.helpText.startsWith('!')"
:closable="false"
@@ -103,9 +99,6 @@
</el-alert>
<span v-else v-sanitize="data.helpText" />
</div>
<div v-if="data.helpTextFormatter" class="help-block">
<RenderHelpTextSafe :render-content="data.helpTextFormatter" />
</div>
</el-form-item>
</template>
<script>
@@ -128,18 +121,6 @@ function validator(data) {
export default {
components: {
RenderHelpTextSafe: {
functional: true,
props: {
renderContent: {
type: Function,
required: true
}
},
render(h, { props }) {
return props.renderContent()
}
},
/**
* 🐂🍺只需要有组件选项对象,就可以立刻包装成函数式组件在 template 中使用
* FYI: https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6
@@ -334,10 +315,6 @@ export default {
::v-deep .el-alert__icon {
font-size: 16px
}
&.checkbox {
//display: inline;
}
}
.help-tip-icon {

View File

@@ -1,71 +1,68 @@
<template>
<div>
<ElFormRender
:id="id"
ref="form"
:class="[mobile ? 'mobile' : 'desktop']"
:content="fields"
:form="basicForm"
:label-position="iLabelPosition"
class="form-fields"
label-width="25%"
v-bind="$attrs"
v-on="$listeners"
>
<!-- slot 透传 -->
<slot
v-for="item in fields"
:slot="`id:${item.id}`"
:name="`id:${item.id}`"
/>
<slot
v-for="item in fields"
:slot="`$id:${item.id}`"
:name="`$id:${item.id}`"
/>
<ElFormRender
:id="id"
ref="form"
:class="mobile ? 'mobile' : 'desktop'"
:content="fields"
:form="basicForm"
:label-position="labelPosition"
label-width="25%"
v-bind="$attrs"
v-on="$listeners"
>
<!-- slot 透传 -->
<slot
v-for="item in fields"
:slot="`id:${item.id}`"
:name="`id:${item.id}`"
/>
<slot
v-for="item in fields"
:slot="`$id:${item.id}`"
:name="`$id:${item.id}`"
/>
<div v-if="hasButtons" class="form-buttons">
<el-button
v-if="defaultButton"
:disabled="!canSubmit"
:loading="isSubmitting"
:size="submitBtnSize"
type="primary"
@click="submitForm('form')"
>
{{ iSubmitBtnText }}
</el-button>
<el-form-item v-if="hasButtons" class="form-buttons">
<el-button
v-if="defaultButton"
:disabled="!canSubmit"
:loading="isSubmitting"
:size="submitBtnSize"
type="primary"
@click="submitForm('form')"
>
{{ iSubmitBtnText }}
</el-button>
<el-button
v-if="defaultButton && hasSaveContinue"
size="small"
@click="submitForm('form', true)"
>
{{ $t("SaveAndAddAnother") }}
</el-button>
<el-button
v-if="defaultButton && hasSaveContinue"
size="small"
@click="submitForm('form', true)"
>
{{ $t("SaveAndAddAnother") }}
</el-button>
<el-button
v-if="defaultButton && hasReset"
size="small"
@click="resetForm('form')"
>
{{ $t("Reset") }}
</el-button>
<el-button
v-if="defaultButton && hasReset"
size="small"
@click="resetForm('form')"
>
{{ $t("Reset") }}
</el-button>
<el-button
v-for="button in moreButtons"
v-show="!button.hidden"
:key="button.title"
:loading="button.loading"
size="small"
v-bind="button"
@click="handleClick(button)"
>
{{ button.title }}
</el-button>
</div>
</ElFormRender>
</div>
<el-button
v-for="button in moreButtons"
v-show="!button.hidden"
:key="button.title"
:loading="button.loading"
size="small"
v-bind="button"
@click="handleClick(button)"
>
{{ button.title }}
</el-button>
</el-form-item>
</ElFormRender>
</template>
<script>
@@ -124,10 +121,6 @@ export default {
isSubmitting: {
type: Boolean,
default: false
},
labelPosition: {
type: String,
default: ''
}
},
data() {
@@ -144,17 +137,7 @@ export default {
mobile() {
return this.$store.state.app.device === 'mobile'
},
drawer() {
return this.$store.state.common.inDrawer
},
iLabelPosition() {
if (this.labelPosition) {
return this.labelPosition
}
// if (this.drawer) {
// return 'left'
// }
// return this.drawer || this.mobile ? 'top' : 'right'
labelPosition() {
return this.mobile ? 'top' : 'right'
}
},
@@ -228,38 +211,21 @@ export default {
color: var(--color-text-primary);
}
&.label-top {
::v-deep .el-form-item {
.el-form-item__content {
width: 100%;
}
}
}
::v-deep .el-form-item {
margin-bottom: 10px;
.item-params {
margin-top: 0;
}
.el-form-item__label {
padding: 0 30px 0 0;
line-height: 30px;
color: var(--color-text-primary);
span {
display: unset;
}
i {
color: var(--color-icon-primary);
}
span {
max-width: calc(100% - 25px);
//white-space: nowrap; /* 禁止换行 */
//text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
line-height: 16px;
}
}
.el-form-item__content {
@@ -335,9 +301,8 @@ export default {
}
}
::v-deep .form-buttons {
margin-top: 30px;
margin-left: 25%;
::v-deep .el-form-item.form-buttons {
margin-top: 20px;
}
}

View File

@@ -27,9 +27,7 @@ export default {
},
beforeSubmit: {
type: Function,
default: (val) => {
return true
}
default: (val) => { return true }
}
},
data() {
@@ -52,16 +50,14 @@ export default {
::v-deep .el-select {
width: 100%;
}
::v-deep .el-form-item__content {
width: 100% !important;
}
::v-deep .form-buttons {
margin: 0 !important;
}
.attr-input {
margin-top: -10px;
}
</style>

View File

@@ -47,9 +47,6 @@ export default {
},
computed: {
iValue() {
if (!this.value) {
return []
}
return this.value.map(item => {
if (item.value) {
return item.value
@@ -118,73 +115,6 @@ export default {
color: #999;
}
.el-tree > .el-tree-node:after {
border-top: none;
}
//节点有间隙,隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
.el-tree-node__expand-icon.is-leaf {
display: none;
}
.el-tree > .el-tree-node:before {
border-left: none;
display: none;
}
.el-tree > .el-tree-node:after {
border-top: none;
display: none;
}
.el-tree-node__children {
padding-left: 13px;
.el-tree-node {
position: relative;
padding-left: 13px;
&:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
&:first-child::before {
display: none;
}
&:last-child:before {
height: 38px;
}
&:before {
border-left: 1px dashed #dcdcdc;
bottom: 0;
height: 100%;
top: -26px;
width: 1px;
}
&:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
&:after {
border-top: 1px dashed #dcdcdc;
height: 20px;
top: 12px;
width: 24px;
}
}
}
.el-tree-node__content:hover {
background-color: transparent;
}
@@ -199,7 +129,7 @@ export default {
}
.el-tree-node__children {
//margin-left: -25px;
margin-left: -25px;
}
}
}

View File

@@ -245,7 +245,7 @@ export default {
},
set(val) {
this.$emit('update:value', val)
this.$emit('input', val)
this.$emit('change', val)
}
},
iOptions() {

View File

@@ -5,11 +5,11 @@
:default-time="['00:00:01', '23:59:59']"
:end-placeholder="$tc('DateEnd')"
:picker-options="pickerOptions"
:range-separator="$tc('To')"
:start-placeholder="$tc('DateStart')"
:type="type"
class="datepicker"
range-separator="-"
size="small"
type="datetimerange"
v-bind="$attrs"
@change="handleDateChange"
v-on="$listeners"
@@ -28,15 +28,6 @@ export default {
dateEnd: {
type: [Number, String, Date],
default: null
},
type: {
type: String,
default: 'daterange'
// default: 'datetimerange'
},
toMinMax: {
type: Boolean,
default: true
}
},
data() {
@@ -44,10 +35,6 @@ export default {
const endValue = this.dateEnd || this.$route.query['date_end']
const dateStart = new Date(startValue)
const dateTo = new Date(endValue)
if (this.toMinMax) {
dateStart.setHours(0, 0, 0, 0)
dateTo.setHours(23, 59, 59, 999)
}
return {
value: [dateStart, dateTo],
pickerOptions: {
@@ -87,13 +74,9 @@ export default {
}
},
onShortcutClick(picker, day) {
let start = new Date()
let end = new Date()
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * day)
if (this.toMinMax) {
start = new Date(start.setHours(0, 0, 0, 0))
end = new Date(end.setHours(23, 59, 59, 999))
}
picker.$emit('pick', [start, end])
}
}
@@ -101,18 +84,9 @@ export default {
</script>
<style lang='scss' scoped>
html:lang(pt-br) {
.datepicker ::v-deep .el-range-separator {
padding: 0 10px;
}
}
.datepicker {
&.el-date-editor--daterange.el-input__inner {
width: 243px;
}
margin-left: 10px;
width: 233px;
border: 1px solid #dcdee2;
border-radius: 2px;
height: 28px;

View File

@@ -5,9 +5,7 @@
v-bind="iAttrs"
@input="handleInput"
v-on="$listeners"
>
hello
</Password>
/>
</template>
<script>

View File

@@ -55,22 +55,22 @@ export default {
{
id: 'uppercase',
label: this.$t('Uppercase'),
type: 'checkbox'
type: 'switch'
},
{
id: 'lowercase',
label: this.$t('Lowercase'),
type: 'checkbox'
type: 'switch'
},
{
id: 'digit',
label: this.$t('Digit'),
type: 'checkbox'
type: 'switch'
},
{
id: 'symbol',
label: this.$t('SpecialSymbol'),
type: 'checkbox'
type: 'switch'
},
{
id: 'exclude_symbols',

View File

@@ -3,7 +3,6 @@
v-if="$attrs.visible"
:close-on-click-modal="false"
:destroy-on-close="true"
:modal="false"
:show-cancel="false"
:show-confirm="false"
:title="$tc('PlatformProtocolConfig') + '' + protocol.name"

View File

@@ -1,5 +1,5 @@
<template>
<div :class="showSetting ? 'show-setting' : 'hide-setting'">
<div v-if="!loading" :class="showSetting ? 'show-setting' : 'hide-setting'">
<div v-for="(item, index) in items" :key="item.name" class="protocol-item">
<el-input
v-model="item.port"
@@ -114,7 +114,8 @@ export default {
name: '',
items: [],
currentProtocol: {},
showDialog: false
showDialog: false,
loading: false
}
},
computed: {
@@ -143,8 +144,10 @@ export default {
watch: {
choices: {
handler(value, oldValue) {
this.loading = true
setTimeout(() => {
this.setDefaultItems(value)
this.loading = false
},)
},
deep: true,

View File

@@ -151,7 +151,7 @@ export default {
display: flex;
flex-wrap: wrap;
align-items: center;
//padding: 0 6px;
padding: 1px 2px 1px;
border: 1px solid #dcdee2;
border-radius: 1px;
background-color: #fff;
@@ -162,9 +162,8 @@ export default {
}
& ::v-deep .el-tag {
margin-bottom: 1px;
margin-top: 1px;
font-family: sans-serif !important;
margin-left: 5px;
}
& ::v-deep .el-autocomplete {
@@ -178,8 +177,7 @@ export default {
& ::v-deep .el-input__inner {
max-width: 100%;
border: none;
padding-left: 12px;
height: 28px;
padding-left: 10px;
}
}
@@ -189,7 +187,7 @@ export default {
}
.filter-field ::v-deep .el-input__inner {
height: 28px !important;
height: 28px;
}
.show-password {

View File

@@ -1,27 +1,21 @@
<template>
<div class="update-token">
<div>
<el-button v-show="!isShow" icon="el-icon-edit" type="text" @click="isShow=true">
{{ text }}
</el-button>
<el-input
v-show="isShow"
v-model.trim="curValue"
:disabled="disabled"
:placeholder="placeholder"
:type="type"
class="password-input"
autocomplete="new-password"
show-password
@change="onChange"
/>
<el-button :disabled="disabled" size="small" type="text" @click="randomPassword">
<i class="fa fa-refresh" />
</el-button>
</div>
</template>
<script>
import { randomString } from '@/utils/string'
export default {
props: {
value: {
@@ -45,10 +39,6 @@ export default {
placeholder: {
type: String,
default: () => ''
},
disabled: {
type: Boolean,
default: false
}
},
data() {
@@ -65,24 +55,7 @@ export default {
methods: {
onChange(e) {
this.$emit('input', this.curValue)
},
randomPassword() {
this.curValue = randomString(24, true)
this.$emit('input', this.curValue)
}
}
}
</script>
<style lang='scss' scoped>
.password-input {
width: calc(100% - 50px);
}
.update-token {
i {
color: var(--color-text-secondary);
font-size: 14px;
}
}
</style>

View File

@@ -8,11 +8,8 @@
<div v-if="tip !== ''" class="help-block">{{ tip }}</div>
<input v-model="value" hidden type="text" v-on="$listeners">
<div>
<img v-if="preview" :class="showBG ? 'show-bg' : ''" :src="preview" v-bind="$attrs" alt="">
<img :class="showBG ? 'show-bg' : ''" :src="preview" v-bind="$attrs">
</div>
<el-button v-if="fileName" size="mini" type="danger" @click.native.stop="resetUpload">
{{ this.$t('Cancel') }}
</el-button>
</div>
</template>
@@ -58,29 +55,21 @@ export default {
},
Onchange(e) {
const upLoadFile = e.target.files[0]
if (upLoadFile === undefined) {
this.$emit('input', this.initial)
return
}
this.fileName = upLoadFile?.name || ''
this.$emit('fileChange', upLoadFile)
this.$emit('input', this.getObjectURL(upLoadFile))
},
resetUpload() {
this.fileName = ''
this.preview = ''
this.$refs.upLoadFile.value = ''
this.$emit('input', '')
this.$emit('fileChange', null)
},
getObjectURL(file) {
let url = null
if (window.createObjectURL !== undefined) {
if (window.createObjectURL !== undefined) { // basic
url = window.createObjectURL(file)
} else if (window.URL !== undefined) {
} else if (window.URL !== undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file)
} else if (window.webkitURL !== undefined) {
} else if (window.webkitURL !== undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file)
}
return url

View File

@@ -1,7 +1,7 @@
<template>
<div class="c-weektime">
<div class="c-schedue" />
<div :class="{'c-schedue': true, 'c-schedue-notransi': mode}" />
<div :class="{'c-schedue': true, 'c-schedue-notransi': mode}" :style="styleValue" />
<table :class="{'c-min-table': colspan < 2}" class="c-weektime-table">
<thead class="c-weektime-head">
<tr>
@@ -14,7 +14,7 @@
</tr>
</thead>
<tbody class="c-weektime-body" @mouseleave="containerLeave()">
<tr v-for="t in weekTimeData" :key="t.row">
<tr v-for="t in weektimeData" :key="t.row">
<td>{{ t.value }}</td>
<td
v-for="n in t.child"
@@ -45,7 +45,6 @@
const createArr = len => {
return Array.from(Array(len)).map((ret, id) => id)
}
function splicing(list) {
let same
let i = -1
@@ -68,7 +67,6 @@ function splicing(list) {
arr.shift()
return arr.join('')
}
export default {
name: 'WeekCronSelect',
props: {
@@ -79,7 +77,7 @@ export default {
colspan: {
type: Number,
default() {
return 1
return 2
}
}
},
@@ -102,7 +100,7 @@ export default {
this.$t('Saturday'),
this.$t('Sunday')
],
weekTimeData: [],
weektimeData: [],
timeRange: [] // 格式化之后数据
}
},
@@ -144,10 +142,10 @@ export default {
return {
value: ret,
row: index,
child: children(ret, index, 24 * this.colspan)
child: children(ret, index, 48)
}
})
this.weekTimeData = isData
this.weektimeData = isData
},
// 反解析传递过来的默认值
nextValue() {
@@ -171,7 +169,7 @@ export default {
const startVal = this.countIndex(start)
const endVal = this.countIndex(end)
for (let i = startVal; i < (endVal === 0 ? 48 : endVal); i++) {
const curWeek = this.weekTimeData[idNum]
const curWeek = this.weektimeData[idNum]
curWeek.child[i].check = true
}
},
@@ -211,9 +209,8 @@ export default {
const nowDate = new Date(timeStamp).getTime()
const targetStamp = new Date(nowDate + offsetGMT * 60 * 1000 + timezone * 60 * 60 * 1000).getTime()
// (2 / this.colspan) 原来是一个单元格 30分钟现在是一个单元格 30 * 2 / this.colspan 分钟
const beginStamp = targetStamp + col * 1800000 * (2 / this.colspan) // col * 30 * 60 * 1000
const endStamp = beginStamp + 1800000 * (2 / this.colspan)
const beginStamp = targetStamp + col * 1800000 // col * 30 * 60 * 1000
const endStamp = beginStamp + 1800000
const begin = this.formatDate(new Date(beginStamp), 'hh:mm')
const end = this.formatDate(new Date(endStamp), 'hh:mm')
@@ -221,7 +218,7 @@ export default {
},
// 清空时间段
clearWeektime() {
this.weekTimeData.forEach(item => {
this.weektimeData.forEach(item => {
item.child.forEach(t => {
this.$set(t, 'check', false)
})
@@ -231,7 +228,7 @@ export default {
},
// 全选
selectAll() {
this.weekTimeData.forEach(item => {
this.weektimeData.forEach(item => {
item.child.forEach(t => {
this.$set(t, 'check', true)
})
@@ -244,7 +241,7 @@ export default {
this.mode = 0
},
setTimeRange() {
this.timeRange = this.weekTimeData.map(item => {
this.timeRange = this.weektimeData.map(item => {
return {
id: item.row === 6 ? 0 : item.row + 1,
value: splicing(item.child)
@@ -311,7 +308,7 @@ export default {
selectWeek(row, col, check) {
const [minRow, maxRow] = row
const [minCol, maxCol] = col
this.weekTimeData.forEach(item => {
this.weektimeData.forEach(item => {
item.child.forEach(t => {
if (t.row >= minRow && t.row <= maxRow && t.col >= minCol && t.col <= maxCol) {
this.$set(t, 'check', check)
@@ -324,12 +321,11 @@ export default {
</script>
<style lang="scss" scoped>
.c-weektime {
//min-width: 440px;
min-width: 640px;
position: relative;
display: inline-block;
padding-right: 20px;
}
.c-schedue {
background: #598fe6;
position: absolute;
@@ -338,70 +334,55 @@ export default {
opacity: .6;
pointer-events: none;
}
.c-schedue-notransi {
transition: width .12s ease, height .12s ease, top .12s ease, left .12s ease;
}
.c-weektime-table {
border-collapse: collapse;
th {
vertical-align: inherit;
font-weight: bold;
}
tr {
height: 30px;
}
tr, td, th {
user-select: none;
border: 1px solid #dee4f5;
text-align: center;
min-width: 10px;
min-width: 12px;
line-height: 1.6em;
transition: background .16s ease;
}
.c-weektime-head {
font-size: 12px;
.week-td {
width: 72px;
}
}
.c-weektime-body {
font-size: 12px;
td {
&.weektime-atom-item {
user-select: unset;
background-color: #f5f5f5;
width: 18px;
}
&.ui-selected {
background-color: #598fe6;
}
}
}
.c-weektime-preview {
line-height: 2.4em;
padding: 0 10px;
font-size: 11px;
font-size: 13px;
.c-weektime-con {
line-height: 42px;
user-select: none;
}
.c-weektime-time {
text-align: left;
line-height: 2.4em;
p {
max-width: 625px;
line-height: 1.4em;
@@ -411,13 +392,11 @@ export default {
}
}
}
.c-min-table {
tr, td, th {
min-width: 17px;
min-width: 24px;
}
}
.g-clearfix {
&:after, &:before {
clear: both;
@@ -425,20 +404,16 @@ export default {
display: table;
}
}
.g-pull-left {
float: left;
}
.g-pull-right {
float: right;
color: #409eff !important;
color: #409eff!important;
}
.g-pull-margin {
margin-right: 12px;
}
.g-tip-text {
color: #999;
}

View File

@@ -1,15 +1,7 @@
<template>
<div ref="formGroup" class="form-group-header">
<div class="form-group-header">
<div v-if="line" class="hr-line-dashed" />
<div v-if="group['title']">
<h3 @click="toggle">{{ group['title'] }} </h3>
<span class="compass" @click="toggle">
<i :class="iconClass" />
</span>
</div>
<div v-if="!isVisible" class="ellipsis" @click="toggle">
<i class="fa fa-angle-double-down" />
</div>
<h3>{{ group['title'] }} </h3>
</div>
</template>
@@ -28,62 +20,16 @@ export default {
type: Object,
default: () => ({})
}
},
data() {
return {
isVisible: true
}
},
computed: {
iconClass() {
return this.isVisible ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
}
},
methods: {
toggle() {
this.isVisible = !this.isVisible
this.toggleSiblingVisibility()
},
toggleSiblingVisibility() {
// 当前 form-group-header 的 DOM 元素
const formGroupHeader = this.$refs.formGroup
if (!formGroupHeader) return
// 找到当前 form-group-header 的下一个兄弟节点
let sibling = formGroupHeader.nextElementSibling
// 循环隐藏或显示直到找到下一个 form-group-header
while (sibling && sibling.classList.contains('el-form-item')) {
sibling.style.display = this.isVisible ? '' : 'none'
sibling = sibling.nextElementSibling
}
}
}
}
</script>
<style lang="less" scoped>
.hr-line-dashed {
border-top: 1px dashed #e7eaec;
color: #ffffff;
background-color: #ffffff;
height: 1px;
margin: 20px 0;
}
h3 {
display: inline-block;
cursor: pointer;
}
.compass {
display: inline-block;
float: right;
cursor: pointer;
}
.ellipsis {
text-align: center;
cursor: pointer;
border-top: 1px dashed #e7eaec;
color: #ffffff;
background-color: #ffffff;
height: 1px;
margin: 20px 0;
}
</style>

View File

@@ -2,8 +2,7 @@
<IBox v-bind="$attrs">
<div v-if="contentHeading" class="ibox-heading">
<slot name="content-heading">
<h3 v-if="contentHeading.title"><i v-if="contentHeading.fa" :class="'fa ' + contentHeading.fa" /> {{
contentHeading.title }}</h3>
<h3 v-if="contentHeading.title"><i v-if="contentHeading.fa" :class="'fa ' + contentHeading.fa" /> {{ contentHeading.title }}</h3>
<small v-if="contentHeading.content"><i class="fa fa-tim" /> {{ contentHeading.content }}</small>
</slot>
</div>
@@ -12,8 +11,7 @@
</template>
<script>
import IBox from './index.vue'
import IBox from './index'
export default {
name: 'HeadingIBox',
components: { IBox },
@@ -27,22 +25,20 @@ export default {
</script>
<style scoped>
.ibox-heading {
background-color: #f3f6fb;
border-bottom: none;
margin: -15px -20px 20px -20px;
padding: 20px
}
.ibox-heading h3 {
font-weight: 200;
font-size: 24px;
margin-top: 5px;
margin-bottom: 10px;
line-height: 1.1;
}
.ibox .el-card__body {
background-color: #f3f6fb;
}
.ibox-heading {
background-color: #f3f6fb;
border-bottom: none;
margin: -15px -20px 20px -20px;
padding: 20px
}
.ibox-heading h3 {
font-weight: 200;
font-size: 24px;
margin-top: 5px;
margin-bottom: 10px;
line-height: 1.1;
}
.ibox .el-card__body {
background-color: #f3f6fb;
}
</style>

View File

@@ -1,5 +1,5 @@
<template>
<el-card :class="'ibox ' + type" :shadow="shadow" v-bind="$attrs">
<el-card :class="'ibox ' + type" shadow="never" v-bind="$attrs">
<template #header>
<slot name="header">
<div v-if="title" slot="header" class="clearfix ibox-title">
@@ -26,10 +26,6 @@ export default {
type: {
type: String,
default: 'default'
},
shadow: {
type: String,
default: 'never'
}
},
computed: {

View File

@@ -25,9 +25,9 @@
</template>
<script>
import Switcher from '@/components/Form/FormFields/Switcher.vue'
import Select2 from '@/components/Form/FormFields/Select2.vue'
import UpdateSelect from '@/components/Form/FormFields/UpdateSelect.vue'
import Switcher from '@/components/Form/FormFields/Switcher'
import Select2 from '@/components/Form/FormFields/Select2'
import UpdateSelect from '@/components/Form/FormFields/UpdateSelect'
import { toSentenceCase } from '@/utils/common'
class Action {

View File

@@ -9,8 +9,8 @@
</template>
<script>
import IBox from '@/components/Common/IBox/index.vue'
import ActionItem from './action.vue'
import IBox from '@/components/IBox'
import ActionItem from './action'
// views/users/users/UserDetail/UserInfo.vue 使
export default {
@@ -39,32 +39,32 @@ export default {
</script>
<style scoped>
.quick-actions ::v-deep table {
width: 100%;
}
.quick-actions ::v-deep tr > td {
line-height: 1.43;
padding: 8px 0;
vertical-align: top;
font-size: 13px;
width: 50%;
}
.quick-actions ::v-deep tr > td > span:last-child {
float: right;
}
.quick-actions ::v-deep button {
padding: 4px 5px;
font-size: 13px;
min-width: 65px;
span {
overflow: hidden;
white-space: nowrap; /* 控制文本不换行 */
text-overflow: ellipsis;
display: block;
.quick-actions ::v-deep table {
width: 100%;
}
.quick-actions ::v-deep tr > td {
line-height: 1.43;
padding: 8px;
vertical-align: top;
font-size: 13px;
width: 50%;
}
.quick-actions ::v-deep tr > td > span:last-child {
float: right;
}
.quick-actions ::v-deep button {
padding: 4px 5px;
font-size: 13px;
width: 65px;
span {
overflow: hidden;
white-space: nowrap; /* 控制文本不换行 */
text-overflow: ellipsis;
display: block;
}
}
}
</style>

View File

@@ -3,7 +3,7 @@
v-if="showColumnSettingPopover"
:cancel-title="$tc('RestoreDefault')"
:destroy-on-close="true"
:title="$tc('ListPreference')"
:title="$tc('TableSetting')"
:visible.sync="showColumnSettingPopover"
top="10%"
width="50%"
@@ -36,7 +36,6 @@
<el-checkbox
:disabled="item.prop==='actions' || minColumns.indexOf(item.prop)!==-1"
:label="item.prop"
:title="item.label"
>
{{ item.label }}
</el-checkbox>

View File

@@ -23,17 +23,11 @@
<script type="text/jsx">
import DataTable from '@/components/Table/DataTable/index.vue'
import {
ActionsFormatter,
ArrayFormatter,
ChoicesFormatter,
CopyableFormatter,
DateFormatter,
DetailFormatter,
DisplayFormatter,
ActionsFormatter, ArrayFormatter, ChoicesFormatter, DateFormatter, DetailFormatter, DisplayFormatter,
ObjectRelatedFormatter
} from '@/components/Table/TableFormatters'
import i18n from '@/i18n/i18n'
import { newURL, ObjectLocalStorage, replaceAllUUID, toSentenceCase } from '@/utils/common'
import { newURL, replaceAllUUID, toSentenceCase } from '@/utils/common'
import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
import LabelsFormatter from '@/components/Table/TableFormatters/LabelsFormatter.vue'
@@ -68,21 +62,10 @@ export default {
currentCols: [],
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'
isDeactivated: false
}
},
computed: {},
watch: {
config: {
handler: _.debounce(function(iNew, iOld) {
@@ -137,15 +120,6 @@ export default {
},
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'
@@ -157,7 +131,7 @@ export default {
prop: 'actions',
label: i18n.t('Actions'),
align: 'center',
width: this.dynamicActionWidth,
width: '100px',
formatter: ActionsFormatter,
fixed: 'right',
formatterArgs: {}
@@ -213,7 +187,7 @@ export default {
break
case 'datetime':
col.formatter = DateFormatter
col.width = '155px'
col.width = '175px'
break
case 'object_related_field':
col.formatter = ObjectRelatedFormatter
@@ -374,8 +348,6 @@ export default {
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 的问题;
@@ -445,9 +417,13 @@ export default {
const minColumnsNames = _.get(this.iConfig, 'columnsShow.min', ['actions', 'id'])
.filter(n => totalColumnsNames.includes(n))
// 应该显示的列
const _tableConfig = localStorage.getItem('tableConfig')
? JSON.parse(localStorage.getItem('tableConfig'))
: {}
let tableName = this.config.name || this.$route.name + '_' + newURL(this.config.url).pathname
tableName = replaceAllUUID(tableName)
const configShowColumnsNames = this.objTableColumns.get(tableName)
const configShowColumnsNames = _.get(_tableConfig[tableName], 'showColumns', null)
let showColumnsNames = configShowColumnsNames || defaultColumnsNames
if (showColumnsNames.length === 0) {
showColumnsNames = totalColumnsNames
@@ -494,12 +470,17 @@ export default {
}
this.popoverColumns.currentCols = columns
const _tableConfig = localStorage.getItem('tableConfig')
? JSON.parse(localStorage.getItem('tableConfig'))
: {}
let tableName = this.config.name || this.$route.name + '_' + newURL(url).pathname
// 替换url中的uuid避免同一个类型接口生成多个keylocalStorage中的数据无法共用.
tableName = replaceAllUUID(tableName)
this.objTableColumns.set(tableName, columns)
_tableConfig[tableName] = {
'showColumns': columns
}
localStorage.setItem('tableConfig', JSON.stringify(_tableConfig))
this.filterShowColumns()
},
filterChange(filters) {

View File

@@ -1,153 +0,0 @@
<template>
<div @click="handleClick">
<span v-if="d.edition === 'enterprise'" class="enterprise">
{{ $t('Enterprise') }}
</span>
<el-row class="panel">
<el-col v-if="d.icon" :span="8" class="image">
<img
v-if="d.icon.startsWith('/') || d.icon.startsWith('data:')"
:alt="d.display_name"
:src="d.icon"
>
<Icon v-else :icon="d.icon" />
</el-col>
<el-col :span="16" class="text-zone">
<div class="one-line">
<b>{{ d.display_name }}</b>
<el-tag v-if="d.version" size="mini" style="margin-left: 5px">
{{ d.version }}
</el-tag>
</div>
<div :title="d.comment " class="comment">
{{ d.comment }}
</div>
<div class="tag-zone">
<el-tag v-for="tag of d.tags" :key="tag" size="mini">
{{ capitalize(tag) }}
</el-tag>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import Icon from '@/components/Widgets/Icon/index.vue'
export default {
name: 'Panel',
components: { Icon },
props: {
d: {
type: Object,
required: true
}
},
data() {
return {}
},
methods: {
capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
},
handleClick() {
this.$emit('onClick', this.d)
}
}
}
</script>
<style lang="scss" scoped>
.panel {
display: flex;
flex-wrap: nowrap;
margin-top: 0;
height: 100%;
.image {
display: flex;
justify-content: center;
align-items: center;
img {
width: 60px;
height: 60px;
object-fit: contain;
}
svg {
width: 40px;
height: 40px;
}
}
.text-zone {
display: flex;
flex-direction: column;
align-items: flex-start;
.one-line {
display: flex;
flex-wrap: wrap;
align-items: center;
padding-top: 10px;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
b {
padding-right: 5px;
}
span {
margin-left: 0 !important;
}
}
.comment {
display: -webkit-box;
height: 120px;
font-size: 12px;
padding: 10px 0;
cursor: pointer;
overflow: hidden;
-webkit-line-clamp: 4;
-webkit-box-flex: 1;
-webkit-box-orient: vertical;
text-align: left;
}
.tag-zone {
display: flex;
height: 30%;
align-items: center;
cursor: pointer;
}
}
}
.enterprise {
position: absolute;
right: -1px;
top: -1px;
background-color: var(--color-primary);
color: #fff;
padding: 3px 8px 4px 9px;
font-size: 13px;
border-radius: 3px 3px 3px 8px;
}
.tag-zone {
margin-top: 10px;
.el-tag {
margin-right: 3px;
}
}
.text-zone {
text-align: left;
height: 100%;
}
</style>

View File

@@ -6,25 +6,54 @@
:table-url="tableUrl"
v-bind="headerActions"
/>
<el-row v-loading="loading" class="the-row">
<IBox v-if="totalData.length === 0" class="empty-box">
<el-row :gutter="10" class="the-row">
<IBox v-if="totalData.length === 0">
<el-empty :description="$t('NoData')" :image-size="200" class="no-data" style="padding: 20px" />
</IBox>
<div class="card-container">
<el-col v-for="(d, index) in totalData" :key="index" :lg="8" :md="12" :sm="24" style="min-width: 335px;">
<el-card
v-for="(d, index) in totalData"
:key="index"
:body-style="{ 'text-align': 'center', 'padding': '15px' }"
:class="{'is-disabled': isDisabled(d)}"
class="the-card"
class="my-card"
shadow="hover"
@click.native="onView(d)"
>
<keep-alive>
<slot :index="index" :item="d" :onView="onView">
<Panel :d="d" @click.native="onView(d)" />
<component :is="subComponent" v-if="subComponent" :object="d" @refresh="getList" />
<slot v-else :index="index" :item="d">
<span v-if="d.edition === 'enterprise'" class="enterprise">
{{ $t('Enterprise') }}
</span>
<el-row>
<el-col v-if="d.icon" :span="8" class="image">
<img
v-if="d.icon.startsWith('/') || d.icon.startsWith('data:')"
:alt="d.display_name"
:src="d.icon"
>
<Icon v-else :icon="d.icon" />
</el-col>
<el-col :span="16" class="text-zone">
<div class="one-line">
<b>{{ d.display_name }}</b>
<el-tag v-if="d.version" size="mini" style="margin-left: 5px">
{{ d.version }}
</el-tag>
</div>
<div :title="d.comment " class="comment">
{{ d.comment }}
</div>
<div class="tag-zone">
<el-tag v-for="tag of d.tags" :key="tag" size="mini">
{{ capitalize(tag) }}
</el-tag>
</div>
</el-col>
</el-row>
</slot>
</keep-alive>
</el-card>
</div>
</el-col>
</el-row>
<Pagination
v-show="pagination && total > paginationSize"
@@ -38,11 +67,11 @@
</template>
<script>
import { mapGetters } from 'vuex'
import { Pagination } from '@/components'
import TableAction from '@/components/Table/ListTable/TableAction'
import IBox from '@/components/Common/IBox/index.vue'
import Panel from './Panel'
import { Pagination } from '@/components'
import Icon from '@/components/Widgets/Icon/index.vue'
import { mapGetters } from 'vuex'
import IBox from '@/components/IBox/index.vue'
const defaultFirstPage = 1
@@ -50,16 +79,12 @@ export default {
name: 'CardTable',
components: {
IBox,
Panel,
TableAction,
Pagination
Pagination,
Icon
},
props: {
// 定义 table 的配置
columns: {
type: Number,
default: 3
},
tableConfig: {
type: Object,
default: () => ({})
@@ -75,10 +100,6 @@ export default {
subComponent: {
type: Object,
default: () => null
},
subComponentProps: {
type: Object,
default: () => ({})
}
},
data() {
@@ -90,7 +111,6 @@ export default {
paginationSize: 6,
paginationLayout: 'total, sizes, prev, pager, next',
paginationSizes: [6, 18, 27],
loading: true,
axiosConfig: {
raw: 1,
params: {
@@ -106,17 +126,16 @@ export default {
return this.tableConfig.url || ''
}
},
async mounted() {
try {
await this.getList()
} finally {
this.loading = false
}
mounted() {
this.getList()
},
methods: {
isDisabled(item) {
return item.edition?.value === 'enterprise' && !this.hasValidLicense
},
capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
},
getIcon(status) {
let iconClass = 'fa-check-circle'
if (status === false) {
@@ -127,7 +146,7 @@ export default {
getPageQuery(currentPage, pageSize) {
return this.$refs.pagination.getPageQuery(currentPage, pageSize)
},
async getList() {
getList() {
if (this.tableConfig.totalData) {
this.totalData = this.tableConfig.totalData
this.total = this.totalData.length
@@ -141,10 +160,16 @@ export default {
const queryString = Object.keys(query).map(key => key + '=' + query[key]).join('&')
const url = `${this.tableUrl}?${queryString}`
const resp = await this.$axios.get(url, this.axiosConfig)
const data = resp.data
this.total = data?.count || 0
this.totalData = data?.results || []
this.$axios
.get(url, this.axiosConfig)
.then(({ data: resp }) => {
this.total = resp?.count || 0
this.totalData = resp?.results || []
})
.catch(err => {
this.$log.error('Error occur: ', err)
this.total = 0
})
},
reloadTable() {
this.getList()
@@ -175,7 +200,9 @@ export default {
this.$router.push(detailRoute)
},
defaultPerformDelete(obj) {
this.$axios.delete(`${this.tableConfig.url}${obj.id}/`)
this.$axios.delete(
`${this.tableConfig.url}${obj.id}/`
)
},
onView(obj) {
if (this.isDisabled(obj)) {
@@ -206,43 +233,88 @@ export default {
</script>
<style lang="scss" scoped>
.the-row .empty-box {
display: block;
::v-deep {
.el-empty {
margin: 0 auto;
.el-empty__image {
}
}
}
}
.the-row {
margin-top: 15px;
max-width: 1600px;
text-align: center;
.card-container {
display: flex;
}
.el-col, div {
gap: 20px;
.the-card {
.my-card {
min-width: 330px;
width: 100%;
position: relative;
margin-bottom: 20px;
//height: 230px;
width: 380px;
padding: 15px;
::v-deep .el-card__body {
height: 100%;
width: 100%;
padding: 0;
.el-row {
display: flex;
flex-wrap: nowrap;
margin-top: 0;
height: 100%;
.image {
display: flex;
justify-content: center;
align-items: center;
img {
width: 60px;
height: 60px;
object-fit: contain;
}
svg {
width: 40px;
height: 40px;
}
}
.text-zone {
display: flex;
flex-direction: column;
align-items: flex-start;
.one-line {
display: flex;
flex-wrap: wrap;
align-items: center;
padding-top: 10px;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
b {
padding-right: 5px;
}
span {
margin-left: 0 !important;
}
}
.comment {
display: -webkit-box;
height: 120px;
font-size: 12px;
padding: 10px 0;
cursor: pointer;
overflow: hidden;
-webkit-line-clamp: 4;
-webkit-box-flex: 1;
-webkit-box-orient: vertical;
text-align: left;
}
.tag-zone {
display: flex;
height: 30%;
align-items: center;
cursor: pointer;
}
}
}
}
&.is-disabled {
@@ -270,15 +342,35 @@ export default {
}
}
.enterprise {
position: absolute;
right: -1px;
top: -1px;
background-color: var(--color-primary);
color: #fff;
padding: 3px 8px 4px 9px;
font-size: 13px;
border-radius: 3px 3px 3px 8px;
}
.tag-zone {
margin-top: 10px;
.el-tag {
margin-right: 3px;
}
}
.text-zone {
text-align: left;
height: 100%;
}
.pagination {
padding-top: 10px;
border-top: 1px solid #e7eaec;
}
.el-col {
//min-width: 330px; 设置完后remote app 列表会有问题
}
.no-data {
display: flex;
flex-direction: column;

View File

@@ -7,14 +7,14 @@
<template v-else>
<el-table
ref="table"
v-loading="tableLoading"
v-loading="loading"
:data="data"
:row-class-name="rowClassName"
v-bind="tableAttrs"
@select="selectStrategy.onSelect"
v-on="$listeners"
@selection-change="selectStrategy.onSelectionChange"
@select-all="handleSelectAll($event, canSelect)"
@select-all="selectStrategy.onSelectAll($event, canSelect)"
@sort-change="onSortChange"
>
<!--TODO 不用jsx写, 感觉template逻辑有点不清晰了-->
@@ -105,17 +105,14 @@
<template #header>
<span :title="col.label">{{ col.label }}</span>
</template>
<template
v-if="col.formatter && typeof col.formatter !== 'function'"
v-slot:default="{row, column, $index}"
>
<template v-if="col.formatter && typeof col.formatter !== 'function'" v-slot:default="{row, column, index}">
<div
:is="col.formatter"
:key="row.id"
:cell-value="row[col.prop]"
:col="col"
:column="column"
:index="$index"
:index="index"
:reload="getList"
:row="row"
:table-data="data"
@@ -752,7 +749,7 @@ export default {
page: defaultFirstPage,
// https://github.com/ElemeFE/element/issues/1153
total: null,
tableLoading: false,
loading: false,
// 多选项的数组
selected: [],
@@ -943,11 +940,11 @@ export default {
},
getListFromStaticData({ loading = true } = {}) {
if (loading) {
this.tableLoading = true
this.loading = true
}
if (!this.hasPagination) {
this.data = this.totalData
this.tableLoading = false
this.loading = false
if (this.isTree) {
this.data = this.tree2Array(this.data, this.expandAll)
}
@@ -960,7 +957,7 @@ export default {
const end = (page + pageOffset) * this.size
this.$log.debug(`page: ${page}, size: ${this.size}, start: ${start}, end: ${end}`)
this.data = this.totalData.slice(start, end)
this.tableLoading = false
this.loading = false
this.data = this.tree2Array(this.data, this.expandAll)
return this.data
},
@@ -986,7 +983,7 @@ export default {
queryUtil.stringify(query, '=', '&')
// 请求开始
this.tableLoading = loading
this.loading = loading
// 存储query记录, 便于后面恢复
if (this.saveQuery) {
@@ -1026,7 +1023,7 @@ export default {
this.total === 0 &&
(_isEmpty(formValue) || _values(formValue).every(isFalsey))
this.tableLoading = false
this.loading = false
/**
* 请求返回, 数据更新后触发
* @property {object} data - table的数据
@@ -1036,7 +1033,7 @@ export default {
// 开启persistSelection时需要同步selected状态到el-table中
this.$nextTick(() => {
this.selectStrategy?.updateElTableSelection()
this.selectStrategy.updateElTableSelection()
})
})
.catch(err => {
@@ -1046,7 +1043,7 @@ export default {
*/
this.$emit('error', err)
this.total = 0
this.tableLoading = false
this.loading = false
})
},
search(attrs, reset) {
@@ -1109,14 +1106,6 @@ export default {
this.page = val
this.getList()
},
handleSelectAll(selection, selectable = () => true) {
this.tableLoading = true
try {
this.selectStrategy.onSelectAll(selection, selectable)
} finally {
this.tableLoading = false
}
},
/**
* 切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否
*

View File

@@ -69,48 +69,12 @@ class StrategyPersistSelection extends StrategyAbstract {
* 用户切换当前页的多选
*/
onSelectAll(selection, selectable = () => true) {
const { id, selected, data } = this.elDataTable
const selectableRows = data.filter(selectable)
// const isSelected = !!selection.length
// 创建已选择项的 id 集合,用于快速查找
const selectedIds = new Set(selected.map(r => r[id]))
const currentPageIds = new Set(selectableRows.map(row => row[id]))
// 前页面的选中状态
const currentPageSelectedCount = selectableRows.filter(row =>
selectedIds.has(row[id])
).length
// 判断是全选还是取消全选
const shouldSelectAll = currentPageSelectedCount < selectableRows.length
this.elTable.clearSelection()
if (shouldSelectAll) {
selectableRows.forEach(row => {
if (!selectedIds.has(row[id])) selected.push(row)
this.elTable.toggleRowSelection(row, true)
// ! 这里需要触发事件,否则在 el-table 中无法触发 selection-change 事件
this.elDataTable.$emit('toggle-row-selection', true, row)
})
} else {
const newSelected = []
selected.forEach(row => {
if (!currentPageIds.has(row[id])) {
newSelected.push(row)
} else {
this.elDataTable.$emit('toggle-row-selection', false, row)
}
})
this.elDataTable.selected = newSelected
}
this.elDataTable.$emit('selection-change', this.elDataTable.selected)
const isSelected = !!selection.length
this.elDataTable.data.forEach(r => {
if (selectable(r)) {
this.toggleRowSelection(r, isSelected)
}
})
}
/**
* toggleRowSelection和clearSelection管理elDataTable的selected数组
@@ -119,17 +83,14 @@ class StrategyPersistSelection extends StrategyAbstract {
toggleRowSelection(row, isSelected) {
const { id, selected } = this.elDataTable
const foundIndex = selected.findIndex(r => r[id] === row[id])
if (typeof isSelected === 'undefined') {
isSelected = foundIndex <= -1
}
if (isSelected && foundIndex === -1) {
selected.push(row)
} else if (!isSelected && foundIndex > -1) {
selected.splice(foundIndex, 1)
}
this.elDataTable.$emit('toggle-row-selection', isSelected, row)
this.updateElTableSelection()
}
@@ -142,17 +103,14 @@ class StrategyPersistSelection extends StrategyAbstract {
*/
updateElTableSelection() {
const { data, id, selected } = this.elDataTable
const selectedIds = new Set(selected.map(r => r[id]))
this.elTable.clearSelection()
data.forEach(row => {
const shouldBeSelected = selectedIds.has(row[id])
if (!this.elTable) return
if (shouldBeSelected) {
this.elTable.toggleRowSelection(row, true)
// 历史勾选的行已经不在当前页了所以要将当前页的行数据和selected合并
const mergeData = _.uniqWith([...data, ...selected], _.isEqual)
mergeData.forEach(r => {
const isSelected = !!selected.find(r2 => r[id] === r2[id])
if (!this.elTable) {
return
}
this.elTable.toggleRowSelection(r, isSelected)
})
}
}

View File

@@ -10,7 +10,6 @@
</template>
<script>
import { newURL, ObjectLocalStorage } from '@/utils/common'
import { default as ElDatableTable } from './compenents/el-data-table'
import { mapGetters } from 'vuex'
@@ -28,11 +27,7 @@ export default {
},
data() {
const userTableActions = this.config.tableActions || {}
const objTableSize = new ObjectLocalStorage('tableSize')
const pathName = newURL(this.config.url).pathname
return {
objTableSize: objTableSize,
pathName: pathName,
defaultConfig: {
axiosConfig: {
raw: 1,
@@ -75,7 +70,7 @@ export default {
},
pageCount: 5,
paginationLayout: 'total, sizes, prev, pager, next',
paginationSize: objTableSize.get(pathName) || 15,
paginationSize: JSON.parse(localStorage.getItem('paginationSize')) || 15,
paginationSizes: [15, 30, 50, 100],
paginationBackground: true,
transformQuery: query => {
@@ -112,7 +107,7 @@ export default {
return this.$refs.table
},
tableConfig() {
const tableDefaultConfig = this.defaultConfig || {}
const tableDefaultConfig = this.defaultConfig
let tableAttrs = tableDefaultConfig.tableAttrs
if (this.config.tableAttrs) {
tableAttrs = Object.assign(tableAttrs, this.config.tableAttrs)
@@ -162,7 +157,13 @@ export default {
this.$emit('loaded')
},
handleSizeChange(val) {
this.objTableSize.set(this.pathName, val)
localStorage.setItem('paginationSize', val)
this.$store.commit('table/SET_TABLE_CONFIG',
{
key: 'paginationSize',
value: val
}
)
}
}
}

View File

@@ -1,83 +0,0 @@
<template>
<Drawer
:component="component"
:component-listeners="listener"
:size="drawerSize"
:title="title"
:visible.sync="iVisible"
append-to-body
class="form-drawer"
destroy-on-close
v-bind="props"
@close="closeDrawer"
v-on="$listeners"
/>
</template>
<script>
import Drawer from '@/components/Drawer/index.vue'
export default {
components: { Drawer },
props: {
visible: {
type: Boolean,
required: true
},
title: {
type: String,
default: ''
},
component: {
type: [String, Function],
required: true
},
props: {
type: Object,
default: () => ({})
},
action: {
type: String,
default: ''
}
},
data() {
return {
listener: {
...this.$listeners
}
}
},
computed: {
drawerSize() {
const drawerWidth = localStorage.getItem('drawerWidth')
if (drawerWidth && drawerWidth > 100 && drawerWidth < 2000) {
return drawerWidth + 'px'
}
const width = window.innerWidth
if (width >= 800) return '767px'
return '90%'
},
iVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
}
},
methods: {
closeDrawer() {
this.iVisible = false
// 关闭 Drawer 后,清空所有 params 参数
Reflect.ownKeys(this.$route.params).forEach(key => {
Reflect.deleteProperty(this.$route.params, key)
})
}
}
}
</script>
<style lang="scss" scoped>
</style>

View File

@@ -1,236 +0,0 @@
<template>
<div>
<ListTable
ref="ListTable"
:header-actions="iHeaderActions"
:table-config="iTableConfig"
v-bind="$attrs"
/>
<PageDrawer
:action="action"
:class="[action]"
:component="drawerComponent"
:props="drawerProps"
:title="drawerTitle"
:visible.sync="drawerVisible"
class="page-drawer"
/>
</div>
</template>
<script>
import ListTable from '../ListTable'
import PageDrawer from './PageDrawer.vue'
import { setUrlParam, toLowerCaseExcludeAbbr, toSentenceCase } from '@/utils/common'
import { mapGetters } from 'vuex'
const drawerType = [String, Function]
export default {
name: 'GenericListPage',
components: {
ListTable, PageDrawer
},
props: {
detailDrawer: {
type: drawerType,
default: ''
},
createDrawer: {
type: drawerType,
default: ''
},
updateDrawer: {
type: drawerType,
default: ''
},
tableConfig: {
type: Object,
required: true
},
headerActions: {
type: Object,
required: true
},
drawerProps: {
type: Object,
default: () => ({})
},
reloadOrderQuery: {
type: String,
default: '-date_updated'
},
resource: {
type: String,
default: ''
},
getDrawerTitle: {
type: Function,
default: null
}
},
data() {
return {
title: '',
action: '',
visible: false,
drawerVisible: false,
drawerComponent: ''
}
},
computed: {
...mapGetters(['inDrawer']),
drawerTitle() {
return this.getDefaultTitle()
},
iHeaderActions() {
const actions = this.headerActions
if (!actions.onCreate) {
actions.onCreate = this.onCreate
}
return actions
},
iTableConfig() {
const config = {
...this.tableConfig
}
const actionMap = {
'columnsMeta.actions.formatterArgs.onUpdate': this.onUpdate,
'columnsMeta.actions.formatterArgs.onClone': this.onClone,
'columnsMeta.name.formatterArgs.drawer': true,
'columnsMeta.name.formatterArgs.drawerComponent': this.detailDrawer
}
for (const [key, value] of Object.entries(actionMap)) {
if (_.get(config, key)) {
continue
}
_.set(config, key, value)
}
const columnsMeta = config.columnsMeta
for (const value of Object.values(columnsMeta)) {
if (
value.formatter && value.formatter.name === 'AmountFormatter' &&
value.formatterArgs && !value.formatterArgs.drawer
) {
value.formatterArgs.drawer = this.detailDrawer
}
}
return config
}
},
watch: {
inDrawer(val) {
if (!this.drawerVisible) {
return
}
if (!val) {
this.drawerVisible = false
this.reloadTable()
}
}
},
methods: {
getDefaultTitle() {
let title = this.title
let dispatchAction = ''
if (!title && this.resource) {
title = this.resource
}
if (!title) {
title = this.$route.meta?.title
title = title.replace('List', '').replace('列表', '')
title = _.trimEnd(title, 's')
}
if (!title) {
title = this.$t('NoTitle')
}
const action = this.action
if (action === 'clone' || action === 'create') {
dispatchAction = this.$t('Create')
} else if (action === 'update') {
dispatchAction = this.$t('Update')
}
title = dispatchAction + this.$t('WordSep') + toLowerCaseExcludeAbbr(title)
return title
},
getDefaultDrawer(action) {
const route = this.$route.name
const actionRouteName = route.replace('List', toSentenceCase(action))
return this.getRouteNameComponent(actionRouteName, action)
},
getRouteNameComponent(name, action) {
const route = { name: name }
if (action === 'detail' || action === 'update') {
route.params = { id: '1' }
}
const routes = this.$router.resolve(route)
if (!routes) {
return
}
const matched = routes.resolved.matched.filter(item => item.name === name && item.components)
if (matched.length === 0) {
return
}
if (matched[0] && matched[0].components?.default) {
const component = matched[0].components.default
return component
}
},
async showDrawer(action) {
this.action = action
if (action === 'create') {
this.drawerComponent = this.createDrawer
} else if (action === 'update') {
this.drawerComponent = this.updateDrawer || this.createDrawer
} else if (action === 'detail') {
this.drawerComponent = this.detailDrawer
} else if (action === 'clone') {
this.drawerComponent = this.createDrawer || this.getDefaultDrawer('create')
} else {
this.drawerComponent = this.createDrawer
}
if (!this.drawerComponent) {
this.drawerComponent = this.getDefaultDrawer(action)
}
if (this.getDrawerTitle) {
const actionMeta = await this.$store.getters['common/drawerActionMeta']
this.title = this.getDrawerTitle({ action, ...actionMeta })
}
this.drawerVisible = true
},
onCreate(meta) {
if (!meta) {
meta = {}
}
this.$store.dispatch('common/setDrawerActionMeta', {
action: 'create', ...meta
}).then(() => {
this.showDrawer('create')
})
},
reloadTable() {
if (this.reloadOrderQuery) {
this.iTableConfig.url = setUrlParam(this.iTableConfig.url, 'order', this.reloadOrderQuery)
}
this.$refs.ListTable.reloadTable()
},
onClone({ row, col }) {
this.$store.dispatch('common/setDrawerActionMeta', {
action: 'clone', row: row, col: col, id: row.id
}).then(() => {
this.showDrawer('clone')
})
},
onUpdate({ row, col }) {
this.$route.params.id = row.id
this.$route.params.action = 'update'
this.$store.dispatch('common/setDrawerActionMeta', {
action: 'update', row: row, col: col, id: row.id
}).then(() => {
this.showDrawer('update')
})
}
}
}
</script>

View File

@@ -1,64 +0,0 @@
<template>
<div class="item-info">
<el-row>
<el-col v-for="item of infos" :key="item.content" :span="12" class="panel-item">
<small class="item-label">{{ item.title }}</small>
<h4 class="item-value">{{ item.content }}</h4>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'InfoPanel',
components: {},
props: {
infos: {
type: Array,
default: () => ([])
}
},
data() {
return {}
}
}
</script>
<style lang='scss' scoped>
@mixin textOverflow {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.panel-item {
text-align: start;
}
.panel-label {
}
//
//.panel-item {
// flex-wrap: nowrap;
// text-align: left;
// padding: 3px 0;
// line-height: 20px;
//
// .item-label {
// text-align: left;
// display: flex;
// flex: 1;
// min-width: 110px;
// }
//
// .text-info {
// flex: 2;
// @include textOverflow;
// }
//}
//
</style>

View File

@@ -1,237 +0,0 @@
<template>
<div class="info-panel">
<div class="panel-header">
<div class="panel-title">
<el-avatar :src="imageUrl" shape="square" />
<div class="title-display">
<span class="name">{{ object.name }}</span>
<span class="comment">{{ object.provider.label }}</span>
</div>
</div>
<div
v-if="iActions.length !== 0"
class="panel-actions"
@click="handleClick($event)"
>
<el-dropdown>
<el-button size="mini">
<i class="el-icon-more el-icon--right" />
</el-button>
<el-dropdown-menu default="dropdown">
<el-dropdown-item
v-for="action in iActions"
:key="action.name"
:disabled="action.disabled"
@click.native="action.callback(object)"
>
{{ action.name }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="panel-content" @click="gotoDetail">
<InfoPanel :infos="getInfos(object)" />
</div>
<el-row class="panel-footer" />
</div>
</template>
<script>
import InfoPanel from './Info.vue'
export default {
name: 'CardPanel',
components: {
InfoPanel
},
props: {
tableConfig: {
type: Object,
default: () => ({})
},
object: {
type: Object,
required: true
},
actions: {
type: Array,
default: () => []
},
infos: {
type: Array,
default: () => []
},
getImage: {
type: Function,
default: (obj) => ''
},
getInfos: {
type: Function,
default: (obj) => []
},
handleUpdate: {
type: Function,
default: () => {
}
},
onView: {
type: Function,
default: () => {
}
}
},
data() {
return {
defaultActions: [
{
id: 'update',
name: this.$tc('Update'),
icon: 'el-icon-edit',
callback: this.handleUpdate,
disabled: this.isDisabled('change')
},
{
id: 'delete',
name: this.$tc('Delete'),
icon: 'el-icon-delete',
callback: this.handleDelete,
disabled: this.isDisabled('delete')
}
]
}
},
computed: {
imageUrl() {
return this.getImage(this.object)
},
iActions() {
const mergedActions = new Map()
this.defaultActions.forEach(a => {
mergedActions.set(a.id, { ...a })
})
this.actions.forEach(a => {
mergedActions.set(a.id, { ...a })
})
return Array.from(mergedActions.values())
}
},
mounted() {
// console.log('Object: ', this.object)
},
methods: {
isDisabled(action) {
const app = this.tableConfig.permissions?.app
const resource = this.tableConfig.permissions?.resource
return !this.$hasPerm(`${app}.${action}_${resource}`)
},
gotoDetail() {
this.onView(this.object)
},
handleClick(event) {
event.stopPropagation()
},
handleDelete() {
const url = this.tableConfig.url
this.$confirm(this.$tc('DeleteConfirmMessage'), this.$tc('Delete'), {
confirmButtonText: this.$tc('Confirm'),
cancelButtonText: this.$tc('Cancel'),
type: 'warning'
}).then(() => {
this.$axios.delete(`${url}${this.object.id}/`).then(() => {
this.$message({
type: 'success',
message: this.$tc('DeleteSuccess')
})
this.$emit('refresh')
})
})
}
}
}
</script>
<style lang="scss" scoped>
div.info-panel {
display: flex;
flex-direction: column;
padding: 10px;
gap: 10px;
.panel-header {
padding: 10px 20px;
//border-bottom: solid 1px #e7eaec;
display: flex;
justify-content: space-between;
gap: 10px;
cursor: default;
.panel-title {
display: flex;
align-items: center;
font-weight: 600;
gap: 10px;
.title-display {
display: flex;
flex-direction: column;
text-align: left;
.name {
font-size: 1.1em;
color: #555555;
}
.comment {
color: #62686c;
font-weight: 300;
font-size: 0.8em;
}
}
::v-deep {
.el-avatar {
background: #fff;
}
}
}
.panel-actions {
display: flex;
align-items: center;
::v-deep {
button.el-button--mini {
padding: 5px 7px;
.el-icon--right {
margin-left: 0;
}
}
}
}
}
.panel-content {
display: block;
padding: 1px 25px 10px;
cursor: pointer;
.panel-image {
margin: auto 5px;
width: 100px;
}
.panel-info {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.el-divider--horizontal {
margin: 5px 0;
}
}
</style>

View File

@@ -1,61 +0,0 @@
<template>
<CardTable
ref="table"
:columns="3"
:table-config="tableConfig"
class="info-card-table"
v-bind="$attrs"
v-on="$listeners"
>
<template v-slot:default="slotProps">
<CardPanel
:object="slotProps.item"
:on-view="slotProps.onView"
:table-config="tableConfig"
v-bind="subComponentProps"
@refresh="reloadTable"
/>
</template>
</CardTable>
</template>
<script type="text/jsx">
import CardTable from '@/components/Table/CardTable/index.vue'
import CardPanel from './Panel.vue'
export default {
name: 'SmallCard',
components: {
CardPanel,
CardTable
},
props: {
tableConfig: {
type: Object,
default: () => ({})
},
subComponentProps: {
type: Object,
default: () => ({})
}
},
data() {
return {}
},
methods: {
reloadTable() {
this.$refs.table.reloadTable()
}
}
}
</script>
<style lang="scss" scoped>
.info-card-table {
::v-deep {
div.the-card {
padding: 0;
}
}
}
</style>

View File

@@ -1,7 +1,7 @@
<template>
<div>
<div class="tableFilter">
<el-radio-group v-model="importStatusFilter" size="mini">
<el-radio-group v-model="importStatusFilter" size="small">
<el-radio-button label="all">{{ $t('Total') }}: {{ totalCount }}</el-radio-button>
<el-radio-button label="ok">{{ $t('Success') }}: {{ successCount }}</el-radio-button>
<el-radio-button label="error">{{ $t('Failed') }}: {{ failedCount }}</el-radio-button>
@@ -13,7 +13,7 @@
</div>
<DataTable v-if="tableGenDone" id="importTable" ref="dataTable" :config="tableConfig" class="importTable" />
<div class="row" style="padding-top: 20px">
<div class="btn-groups">
<div class="btn-groups" style="float: right">
<el-button v-if="showCancel" size="small" @click="performCancel">{{ $t('Cancel') }}</el-button>
<el-button
v-show="!disableImportBtn"
@@ -27,8 +27,8 @@
v-for="button in moreButtons"
v-show="!button.hidden"
:key="button.title"
:disabled="disableImportBtn"
:loading="button.loading"
:disabled="disableImportBtn"
size="small"
v-bind="button"
@click="handleClick(button)"
@@ -105,7 +105,6 @@ export default {
importStatusFilter: 'all',
iTotalData: [],
defaultTableConfig: {
url: '',
hasSelection: false,
// hasPagination: false,
columns: [],

View File

@@ -8,16 +8,14 @@
</template>
<script>
import { cleanActions } from './utils'
import { createSourceIdCache } from '@/api/common'
import { getErrorResponseMsg } from '@/utils/common'
import i18n from '@/i18n/i18n'
import DataActions from '@/components/Common/DataActions/index.vue'
import DataActions from '@/components/DataActions/index.vue'
import { createSourceIdCache } from '@/api/common'
import { cleanActions } from './utils'
import { getErrorResponseMsg } from '@/utils/common'
const defaultTrue = { type: [Boolean, Function, String], default: true }
const defaultFalse = { type: [Boolean, Function, String], default: false }
export default {
name: 'LeftSide',
components: {
@@ -33,10 +31,6 @@ export default {
return this.$route.name?.replace('List', 'Create')
}
},
beforeCreate: {
type: Function,
default: () => null
},
onCreate: {
type: Function,
default: null
@@ -81,10 +75,6 @@ export default {
default: () => ([])
},
moreActionsTitle: {
type: String,
default: ''
},
moreActionsType: {
type: String,
default: null
},
@@ -105,7 +95,7 @@ export default {
title: this.$t('DeleteSelected'),
name: 'actionDeleteSelected',
has: this.hasBulkDelete,
icon: 'trash',
icon: 'fa fa-trash-o',
can({ selectedRows }) {
return selectedRows.length > 0 && vm.canBulkDelete
},
@@ -138,11 +128,7 @@ export default {
has: this.hasCreate && !this.moreCreates,
can: this.canCreate,
icon: 'plus',
callback: () => {
this.beforeCreate()
const callback = this.onCreate || this.handleCreate
callback()
}
callback: this.onCreate || this.handleCreate
}
]
if (this.moreCreates) {
@@ -154,11 +140,7 @@ export default {
icon: 'plus',
can: this.canCreate,
dropdown: [],
callback: () => {
this.beforeCreate()
const callback = this.onCreate || this.handleCreate
callback()
}
callback: this.onCreate || this.handleCreate
}
const createCreateAction = Object.assign(defaultMoreCreate, this.moreCreates)
defaultActions.push(createCreateAction)
@@ -199,8 +181,7 @@ export default {
return {
name: 'moreActions',
title: this.moreActionsTitle || this.$t('MoreActions'),
dropdown: dropdown,
type: this.moreActionsType
dropdown: dropdown
}
},
hasSelectedRows() {
@@ -213,7 +194,6 @@ export default {
methods: {
handleCreate() {
let route
if (typeof this.createRoute === 'string') {
route = { name: this.createRoute }
route.name = this.createRoute
@@ -222,9 +202,7 @@ export default {
} else if (typeof this.createRoute === 'object') {
route = this.createRoute
}
this.$log.debug('handle create')
if (this.createInNewPage) {
const { href } = this.$router.resolve(route)
window.open(href, '_blank')
@@ -270,6 +248,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
</style>

View File

@@ -1,307 +0,0 @@
<template>
<div v-show="isExpand">
<div
v-if="(filters && filters.length > 0) || (summary && summary.length > 0)"
:class="isExpand ? 'expand': 'shrink' "
class="quick-filter"
>
<div v-show="isExpand" class="quick-filter-wrap">
<div v-if="filters" class="quick-filter-zone">
<div v-for="category in iFilters" :key="category.label" class="item-zone">
<div>
<h5>{{ category.label }}</h5>
<div class="filter-options">
<span
v-for="option in category.options"
:key="option.label"
:class="option.active ? 'active' : ''"
class="item"
@click="handleFilterClick(option)"
>
{{ option.label }}
<span v-if="option.hasCount">
(<span v-async="getCount(option)">-</span>)
</span>
<!-- <i class="el-icon-circle-check" />-->
</span>
</div>
</div>
</div>
</div>
<div v-if="summary" class="summary-zone">
<span v-for="item of iSummary" :key="item.title" class="summary-block">
<SummaryCard
:class="item.active ? 'active' : ''"
:count="getCount(item)"
:title="item.title"
@click="handleFilterClick(item)"
/>
</span>
</div>
</div>
<div class="expand-bar-wrap">
<div class="expand-bar" @click="toggle">
<i :class="isExpand ? 'expand': 'shrink' " class="fa fa-angle-double-up" />
<span v-show="!isExpand"> 展开过滤器 </span>
</div>
</div>
</div>
</div>
</template>
<script>
import SummaryCard from '@/components/Cards/SummaryCard/index.vue'
import { setUrlParam } from '@/utils/common'
export default {
name: 'QuickFilter',
components: { SummaryCard },
props: {
filters: {
type: Array,
default: () => []
},
summary: {
type: Array,
default: null
},
expand: {
type: Boolean,
default: true
},
tableUrl: {
type: String,
default: ''
}
},
data() {
return {
iFilters: this.cleanFilters(),
iSummary: this.cleanSummary(),
filtered: {},
activeFilters: []
}
},
computed: {
isExpand: {
set(val) {
this.$emit('update:expand', val)
},
get() {
return this.expand
}
}
},
methods: {
async getCount(item) {
if (item.count || item.count === 0) {
return item.count
}
if (!item.filter) {
return '-'
}
let url = this.tableUrl
for (const [k, v] of Object.entries({ ...item.filter, limit: 1 })) {
url = setUrlParam(url, k, v)
}
const res = await this.$axios.get(url, { raw: 1 })
item.count = res.data.count
return item.count
},
cleanSummary() {
if (!this.summary) {
return []
}
return this.summary.map(item => {
return {
category: 'summary',
label: item.title,
...item,
filter: item.filter || {},
active: false
}
})
},
cleanFilters() {
if (!this.filters) {
return []
}
return this.filters.map(category => {
return {
...category,
options: category.options.map(option => {
return {
category: category.label,
...option,
active: false,
filter: option.filter || {}
}
})
}
})
},
toggle() {
this.isExpand = !this.isExpand
},
handleFilterClick(option) {
if (!option.active) {
this.activeFilters = this.activeFilters.filter(item => {
const conflict = Object.keys(item.filter).some(key => {
return Object.keys(option.filter).includes(key)
})
if (conflict) {
item.active = false
}
return !conflict
})
this.activeFilters.push(option)
} else {
this.activeFilters = this.activeFilters.filter(item => {
return item.label !== option.label && item.category !== option.category
})
}
option.active = !option.active
this.filtered = this.activeFilters.reduce((acc, item) => {
return { ...acc, ...item.filter }
}, {})
this.$emit('filter', this.filtered)
}
}
}
</script>
<style lang='scss' scoped>
.quick-filter {
background: white;
padding: 10px 10px 10px 20px;
margin-bottom: 10px;
display: flex;
place-content: stretch flex-end;
justify-content: center;
align-content: stretch;
box-shadow: 0 1px 1px 0 rgba(54, 58, 80, .32);
&.shrink {
background: inherit;
padding: 0;
margin-bottom: 0;
box-shadow: none;
}
.quick-filter-wrap {
display: inline-block;
width: calc(100% - 70px);
.summary-zone {
padding-top: 10px;
display: flex;
justify-content: space-between;
}
.summary-block {
.active {
::v-deep .no-margins .num {
color: var(--color-primary);
&::after {
content: "\e720";
font-family: element-icons !important;
font-size: 13px;
line-height: 1;
}
}
}
}
.quick-filter-zone {
display: flex;
justify-content: flex-start;
flex-wrap: wrap; /* 允许 item-zone 换行 */
gap: 10px;
h5 {
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
margin-bottom: .5rem;
line-height: 1.2;
display: inline-block;
}
.item-zone {
margin-right: 30px;
margin-bottom: 5px;
}
.item {
display: inline-block;
margin-right: 8px;
color: #303133;
font-size: 12px;
cursor: pointer;
&::after {
content: "";
margin-left: 4px;
margin-bottom: 2px;
vertical-align: middle;
width: 1px; /* 分割线宽度 */
height: 8px; /* 分割线高度 */
background-color: var(--color-icon-primary); /* 分割线颜色 */
display: inline-block;
}
&:last-child::after {
display: none;
}
i {
visibility: hidden;
margin-left: -3px;
}
&.active {
color: var(--color-primary);
i {
visibility: visible;
}
}
&:hover {
color: var(--color-primary);
}
}
ul {
list-style: none outside none;
margin-block-start: 0;
padding-left: 0;
}
}
}
}
.filter-options {
display: block;
}
.expand-bar-wrap {
margin: auto 0;
min-width: 60px;
.expand-bar {
float: right;
display: block;
cursor: pointer;
i {
padding: 5px;
&.shrink {
transform: rotate(180deg);
}
}
}
}
</style>

View File

@@ -14,7 +14,7 @@
</template>
<script>
import ActionsGroup from '@/components/Common/ActionsGroup/index.vue'
import ActionsGroup from '@/components/ActionsGroup/index.vue'
import ImExportDialog from './ImExportDialog.vue'
import { cleanActions } from './utils'
import { assignIfNot } from '@/utils/common'
@@ -40,8 +40,8 @@ export default {
handleExportClick: {
type: Function,
default: function({ selectedRows }) {
// const { exportOptions, tableUrl } = this
const url = this.iExportOptions.url
const { exportOptions, tableUrl } = this
const url = exportOptions?.url ? exportOptions.url : tableUrl
this.dialogExportVisible = true
this.$nextTick(() => {
this.$eventBus.$emit('showExportDialog', { selectedRows, url, name: this.name })
@@ -98,27 +98,15 @@ export default {
canBulkUpdate: {
type: [Boolean, Function, String],
default: false
},
hasQuickFilter: defaultTrue,
quickFilterExpand: {
type: Boolean,
default: true
}
},
data() {
return {
defaultRightSideActions: [
{
name: 'actionFilter',
icon: 'filter',
tip: this.$t('Filter'),
has: this.hasQuickFilter,
callback: this.handleFilterClick.bind(this)
},
{
name: 'actionSetting',
icon: 'system-setting',
tip: this.$t('ListPreference'),
tip: this.$t('TableSetting'),
has: this.hasColumnSetting,
callback: this.handleTableSettingClick.bind(this)
},
@@ -167,24 +155,10 @@ export default {
})
},
iExportOptions() {
/**
* 原本是使用 assignIfNot 此函数内部使用 partialRight, 该函数
* 只在目标对象的属性未定义时才从源对象复制属性,如果目标对象已经有值,则保留原值
* 那如果首次点击的树节点,那么此时 url 就会被确定,后续点击的树节点,那么 url 就将不会携带节点信息
*
*/
// return assignIfNot(this.exportOptions, { url: this.tableUrl })
return {
url: this.tableUrl,
...this.exportOptions
}
return assignIfNot(this.exportOptions, { url: this.tableUrl })
}
},
methods: {
handleFilterClick() {
this.$emit('update:quick-filter-expand', !this.quickFilterExpand)
},
handleTagSearch(val) {
this.searchTable(val)
},
@@ -211,6 +185,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
padding-left: 10px;
height: 30px;
line-height: 30px;

View File

@@ -1,5 +1,5 @@
<template>
<div :class="device" class="table-header clearfix container">
<div :class="device" class="table-header clearfix">
<slot name="header">
<LeftSide
v-if="hasLeftActions"
@@ -10,7 +10,6 @@
v-on="$listeners"
@init-actions-done="handleActionsDone"
/>
<RightSide
v-if="hasRightActions"
:selected-rows="selectedRows"
@@ -19,7 +18,6 @@
v-bind="$attrs"
v-on="$listeners"
/>
<div :class="searchClass" class="search">
<LabelSearch
v-if="hasLabelSearch"
@@ -160,7 +158,7 @@ $headerHeight: 30px;
.table-header {
.left-side {
display: block;
//float: left;
float: left;
::v-deep .action-item.el-dropdown > .el-button {
height: 100%;
@@ -168,14 +166,13 @@ $headerHeight: 30px;
}
.right-side {
//float: right;
float: right;
height: 30px;
}
.search {
display: flex;
flex-direction: row;
justify-content: flex-end;
.right-side-item.action-search {
border: 1px solid var(--color-border);
@@ -184,60 +181,65 @@ $headerHeight: 30px;
}
.search.left {
float: left;
padding: 0 !important;
gap: 10px;
}
.search.right {
display: flex;
flex-wrap: wrap;
padding-right: 10px;
float: right;
}
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px 0;
&.mobile {
justify-content: flex-start;
.left-side {
gap: 0;
}
.search {
justify-content: flex-start;
gap: 10px;
}
}
}
.left-side {
order: 1;
}
.search {
order: 2;
flex-grow: 1; /* This allows it to grow and fill available space */
}
.right-side {
order: 3;
}
/* When .left-side is not present, adjust the layout */
.container:not(:has(.left-side)) .search {
margin-right: auto; /* Pushes .search to the left */
justify-content: flex-start;
}
.export-item {
display: block;
padding: 5px 20px;
}
.mobile .search {
display: inherit;
}
.mobile .search .datepicker {
margin-left: 0;
}
.mobile .search.right {
clear: both;
float: none;
padding-top: 10px;
.label-search {
margin-right: 0;
::v-deep .el-button.label-button {
border: 1px solid var(--color-border);
}
::v-deep .label-cascader {
display: block;
width: 100%;
}
}
}
.mobile .search.right .action-search {
display: inline-block;
width: 100%;
margin-top: 5px;
}
.mobile .right-side {
padding-top: 3px;
}
@media (max-width: 481px) {
.mobile .right-side {
float: left;
margin-left: -15px;
}
.mobile .left-side {
width: 100%;
}
}
</style>

View File

@@ -1,18 +1,8 @@
<template>
<div>
<QuickFilter
:expand.sync="filterExpand"
:filters="quickFilters"
:summary="quickSummary"
:table-url="tableUrl"
@filter="filter"
/>
<TableAction
v-if="hasActions"
:class="{'filter-expand': filterExpand}"
:date-pick="handleDateChange"
:has-quick-filter="iHasQuickFilter"
:quick-filter-expand.sync="filterExpand"
:reload-table="reloadTable"
:search-table="search"
:selected-rows="selectedRows"
@@ -20,7 +10,7 @@
v-bind="iHeaderActions"
@done="handleActionInitialDone"
/>
<IBox v-loading="!actionInit" class="table-content">
<IBox class="table-content">
<AutoDataTable
v-if="actionInit"
ref="dataTable"
@@ -37,18 +27,15 @@
import { getResourceFromApiUrl } from '@/utils/jms'
import deepmerge from 'deepmerge'
import { mapGetters } from 'vuex'
import IBox from '@/components/Common/IBox/index.vue'
import IBox from '../../IBox/index.vue'
import TableAction from './TableAction/index.vue'
import Emitter from '@/mixins/emitter'
import AutoDataTable from '../AutoDataTable/index.vue'
import QuickFilter from './TableAction/QuickFilter.vue'
import { getDayEnd, getDaysAgo } from '@/utils/time'
import { ObjectLocalStorage } from '@/utils/common'
export default {
name: 'ListTable',
components: {
QuickFilter,
AutoDataTable,
TableAction,
IBox
@@ -64,14 +51,6 @@ export default {
headerActions: {
type: Object,
default: () => ({})
},
quickFilters: {
type: Array,
default: () => null
},
quickSummary: {
type: Array,
default: () => null
}
},
data() {
@@ -100,35 +79,13 @@ export default {
isDeactivated: false,
extraQuery: extraQuery,
actionInit: this.headerActions.has === false,
initQuery: {},
tablePath: new URL(this.tableConfig.url || '', 'http://127.0.0.1').pathname,
objStorage: new ObjectLocalStorage('filterExpand'),
iFilterExpand: null
initQuery: {}
}
},
computed: {
...mapGetters(['currentOrgIsRoot']),
filterExpand: {
get() {
if (this.iFilterExpand !== null) {
return this.iFilterExpand
}
return this.objStorage.get(this.tablePath)
},
set(val) {
this.iFilterExpand = val
this.objStorage.set(this.tablePath, val)
}
},
iHasQuickFilter() {
const has =
(this.quickFilters && this.quickFilters.length > 0) ||
(this.quickSummary && this.quickSummary.length > 0)
return !!has
},
dataTable() {
return this.$refs.dataTable?.$refs.dataTable
return this.$refs.dataTable.$refs.dataTable
},
iHeaderActions() {
// 如果路由中锁定了 root 组织,就不在检查 root 组织下是否可以创建等
@@ -251,28 +208,6 @@ export default {
})
},
methods: {
handleFilterExpandChanged(expand) {
this.filterExpand = expand
},
handleQuickFilter(option) {
if (option.route) {
this.$router.push(option.route)
return
}
if (option.filter) {
const filter = { ...option.filter }
if (option.active) {
for (const key in filter) {
filter[key] = ''
}
}
this.filter(option.filter)
return
}
if (option.callback) {
option.callback(option.active)
}
},
handleActionInitialDone() {
setTimeout(() => {
this.actionInit = true
@@ -347,12 +282,6 @@ export default {
</script>
<style lang="scss" scoped>
.filter-expand {
&::v-deep button.actionFilter {
background-color: rgb(0, 0, 0, 0.08) !important;
}
}
.table-content {
margin-top: 10px;

View File

@@ -1,153 +0,0 @@
<template>
<div>
<el-dropdown
v-if="hasPerm"
size="small"
trigger="hover"
:show-timeout="500"
@command="handleCommand"
@visible-change="visibleChange"
>
<el-button
plain
size="mini"
type="primary"
@click="handlePamConnect"
>
<i :class="IButtonIcon" />
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="Title" disabled>
{{ ITitleText }}
</el-dropdown-item>
<el-dropdown-item divided />
<el-dropdown-item
v-for="protocol in protocols"
:key="protocol.id"
:command="protocol.name"
>
{{ protocol.name }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button
v-else
plain
size="mini"
type="primary"
:disabled="!hasPerm"
>
<i :class="IButtonIcon" style="color: #fff" />
</el-button>
</div>
</template>
<script>
import BaseFormatter from './base.vue'
export default {
name: 'AccountConnectFormatter',
extends: BaseFormatter,
props: {
buttonIcon: {
type: String,
default: 'fa fa-desktop'
},
titleText: {
type: String,
default: ''
},
url: {
type: String,
default: ''
}
},
data() {
return {
hasPerm: false,
protocols: []
}
},
computed: {
IButtonIcon() {
return this.buttonIcon
},
ITitleText() {
return this.titleText || this.$t('SelectProtocol')
}
},
mounted() {
this.hasPerm = this.formatterArgs.can()
},
methods: {
handleCommand(protocol) {
if (protocol === 'Title') return
this.formatterArgs.setMapItem(this.row.id, protocol)
this.handleWindowOpen(this.row, protocol)
},
visibleChange(visible) {
if (visible) {
this.getProtocols(this.row.asset.id)
}
},
handleWindowOpen(row, protocol) {
const url = this.formatterArgs.connectUrlTemplate(row) + `${protocol}`
this.$nextTick(() => {
window.open(url, '_blank')
})
},
async handlePamConnect() {
const protocolMap = this.$store.getters.protocolMap
if (protocolMap.has(this.row.id)) {
// 直连
const protocol = protocolMap.get(this.row.id)
this.handleWindowOpen(this.row, protocol)
} else {
try {
const url = this.formatterArgs.url.replace('{id}', this.row.asset.id)
const res = await this.$axios.get(url)
if (res && res.protocols.length > 0) {
const protocol = res.protocols[0]
this.formatterArgs.setMapItem(this.row.id, protocol.name)
this.handleWindowOpen(this.row, protocol.name)
}
} catch (e) {
throw new Error(`Error getting protocols: ${e}`)
}
}
},
async getProtocols(assetId) {
try {
const url = this.formatterArgs.url.replace('{id}', assetId)
const res = await this.$axios.get(url)
if (res) this.protocols = res.protocols
} catch (e) {
throw new Error(`Error getting protocols: ${e}`)
}
}
}
}
</script>
<style scoped lang="scss">
.el-dropdown-menu__item.is-disabled {
font-weight: 500;
color: var(--el-text-color-secondary);
}
::v-deep .el-dropdown-menu__item {
transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
overflow: hidden;
}
::v-deep .el-dropdown-menu {
transition: min-height 0.3s ease-in-out;
}
</style>

View File

@@ -5,7 +5,7 @@
trigger="click"
@show="getAsyncItems"
>
<div v-if="!loading" class="detail-content">
<div class="detail-content">
<div v-if="accountData.length === 0" class="empty-item">
<span>{{ $t('No accounts') }}</span>
</div>
@@ -13,9 +13,7 @@
<span>{{ account.name }}({{ account.username }})</span>
</div>
</div>
<el-button slot="reference" class="link-btn" plain size="mini" type="primary">
{{ $t('View') }} <i class="el-icon-arrow-down" />
</el-button>
<el-button slot="reference" class="link-btn" size="mini" type="text">{{ $t('View') }}</el-button>
</el-popover>
</template>
@@ -29,8 +27,7 @@ export default {
return {
formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs),
value: this.cellValue,
accountData: [],
loading: false
accountData: []
}
},
computed: {
@@ -40,13 +37,10 @@ export default {
},
methods: {
async getAsyncItems() {
this.loading = true
const userId = this.$route.params.id || 'self'
const url = `/api/v1/perms/users/${userId}/assets/${this.row.id}`
this.$axios.get(url).then(res => {
this.accountData = res?.permed_accounts || []
}).finally(() => {
this.loading = false
})
}
}

View File

@@ -10,8 +10,8 @@
</template>
<script>
import ActionsGroup from '@/components/ActionsGroup/index.vue'
import BaseFormatter from './base.vue'
import ActionsGroup from '@/components/Common/ActionsGroup/index.vue'
const defaultPerformDelete = function({ row, col }) {
const id = row.id
@@ -33,7 +33,6 @@ const defaultUpdateCallback = function({ row, col }) {
} else {
route.name = updateRoute
}
this.$router.push(route)
}
@@ -107,7 +106,7 @@ export default {
onUpdate: defaultUpdateCallback,
onDelete: defaultDeleteCallback,
onClone: defaultCloneCallback,
extraActions: []
extraActions: [] // format see defaultActions
}
}
}
@@ -136,7 +135,7 @@ export default {
{
name: 'clone',
title: this.$t('Duplicate'),
type: 'primary',
type: 'info',
has: colActions.hasClone,
can: colActions.canClone,
callback: colActions.onClone,
@@ -147,8 +146,8 @@ export default {
colActions: colActions,
defaultActions: defaultActions,
extraActions: colActions.extraActions,
// moreActionsTitle: colActions.moreActionsTitle || null
moreActionsTitle: ''
// moreActionsTitle: colActions.moreActionsTitle || null
}
},
computed: {
@@ -224,7 +223,7 @@ export default {
}
</script>
<style lang="scss" scoped>
<style scoped>
.table-actions {
::v-deep {
.el-icon-arrow-down {

View File

@@ -1,5 +1,5 @@
<template>
<DetailFormatter :col="col" :row="row" :prevant-click="formatterArgs.prevantClick">
<DetailFormatter :col="col" :row="row">
<template>
<el-popover
:disabled="!showItems"
@@ -42,8 +42,7 @@ export default {
},
async: false,
ajax: {},
title: '',
prevantClick: false
title: ''
}
}
}

View File

@@ -12,42 +12,8 @@
</template>
<script>
import i18n from '@/i18n/i18n'
import BaseFormatter from './base.vue'
const formatterArgsDefault = {
faChoices: {
true: 'fa-check-circle',
false: 'fa-times-circle'
},
classChoices: {
true: 'text-primary',
false: 'text-danger'
},
textChoices: {
true: i18n.t('Yes'),
false: i18n.t('No')
},
getKey({ row, cellValue }) {
return (cellValue && typeof cellValue === 'object') ? cellValue.value : cellValue
},
getText({ row, cellValue }) {
const key = this.getKey({ row, cellValue })
return (cellValue && typeof cellValue === 'object') ? cellValue.label : this.textChoices[key] || cellValue
},
getIcon({ row, cellValue }) {
const key = this.getKey({ row, cellValue })
return this.faChoices[key]
},
hasTips: false,
showIcon: true,
showText: true,
showFalse: true,
getTips: ({ row, cellValue }) => {
return cellValue
}
}
export default {
name: 'ChoicesFormatter',
extends: BaseFormatter,
@@ -55,22 +21,51 @@ export default {
formatterArgsDefault: {
type: Object,
default() {
return { ...formatterArgsDefault }
return {
faChoices: {
true: 'fa-check-circle',
false: 'fa-times-circle'
},
classChoices: {
true: 'text-primary',
false: 'text-danger'
},
textChoices: {
true: this.$t('Yes'),
false: this.$t('No')
},
getKey({ row, cellValue }) {
return (cellValue && typeof cellValue === 'object') ? cellValue.value : cellValue
},
getText({ row, cellValue }) {
const key = this.getKey({ row, cellValue })
return (cellValue && typeof cellValue === 'object') ? cellValue.label : this.textChoices[key] || cellValue
},
getIcon({ row, cellValue }) {
const key = this.getKey({ row, cellValue })
return this.faChoices[key]
},
hasTips: false,
showIcon: true,
showText: true,
showFalse: true,
getTips: ({ row, cellValue }) => {
return cellValue
}
}
}
}
},
formatterArgsDefault: formatterArgsDefault,
data() {
return {
formatterArgs: Object.assign({}, this.formatterArgsDefault, this.col.formatterArgs)
formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
}
},
computed: {
key() {
const k = this.formatterArgs.getKey(
return this.formatterArgs.getKey(
{ row: this.row, cellValue: this.cellValue }
)
return k
},
icon() {
const icon = this.formatterArgs.getIcon(

View File

@@ -1,68 +0,0 @@
<script>
import BaseFormatter from './base.vue'
import { copy } from '@/utils/common'
export default {
name: 'CopyableFormatter',
extends: BaseFormatter,
props: {
formatterArgsDefault: {
type: Object,
default() {
return {
shadow: false,
getText: ({ cellValue }) => cellValue,
iconPosition: 'right'
}
}
}
},
data() {
return {
formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
}
},
computed: {
iCellValue() {
if (this.formatterArgs.shadow) {
return '*'.repeat(6)
} else {
return this.cellValue
}
},
iconPosition() {
return this.formatterArgs.iconPosition
}
},
methods: {
async copy() {
const text = await this.formatterArgs.getText({ cellValue: this.cellValue, row: this.row })
copy(text)
}
}
}
</script>
<template>
<span class="copyable">
<span :style="{ order: 2 }">{{ iCellValue }}</span>
<i :style="{ order: iconPosition === 'left' ? 0 : 3 } " class="el-icon-copy-document copy" @click="copy()" />
</span>
</template>
<style lang="scss" scoped>
.copyable {
display: flex;
align-items: center;
gap: 4px; /* 元素间距 */
}
.copy {
cursor: pointer;
&:hover {
color: var(--color-primary);
}
}
</style>

View File

@@ -6,30 +6,20 @@
:disabled="disabled"
:type="col.type || 'info'"
class="detail"
@click="handleClick"
@click="goDetail"
>
<slot>
{{ iTitle }}
</slot>
</el-link>
<Drawer
v-if="formatterArgs.drawer && drawerVisible"
:component="drawerComponent"
:has-footer="false"
:title="drawerTitle"
:visible.sync="drawerVisible"
class="detail-drawer"
/>
</div>
</template>
<script>
import BaseFormatter from './base.vue'
import Drawer from '@/components/Drawer/index.vue'
export default {
name: 'DetailFormatter',
components: { Drawer },
extends: BaseFormatter,
props: {
formatterArgsDefault: {
@@ -37,40 +27,26 @@ export default {
default() {
return {
route: this.$route.name.replace('List', 'Detail'),
can: true,
getRoute: null,
routeQuery: null,
drawer: false,
onClick: null,
can: true,
openInNewPage: false,
removeColorOnClick: false,
beforeClick: () => {
getTitle({ col, row, cellValue }) {
return cellValue
},
getTitle({ row, cellValue }) {
return cellValue != null ? cellValue : row.name
},
getDrawerTitle: null,
getIcon({ col, row, cellValue }) {
return null
}
}
}
},
prevantClick: {
type: Boolean,
default: false
}
},
data() {
const formatterArgs = Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
return {
drawerTitle: '',
linkClicked: false,
drawerComponent: '',
showTableDetailDrawer: false,
currentTemplate: null,
formatterArgs: formatterArgs,
drawerVisible: false
formatterArgs: formatterArgs
}
},
computed: {
@@ -78,8 +54,7 @@ export default {
return this.formatterArgs.getTitle({
col: this.col,
row: this.row,
cellValue: this.cellValue,
index: this.index
cellValue: this.cellValue
})
},
disabled() {
@@ -95,109 +70,18 @@ export default {
row: this.row,
cellValue: this.cellValue
})
},
callbackArgs() {
return {
col: this.col,
row: this.row,
cellValue: this.cellValue
}
}
},
methods: {
getResource() {
const route = this.resolveRoute()
if (!route) {
return
}
const resource = route.meta.title || route.name
return resource.replace(' details', '').replace('详情', '')
},
getDrawerTitle() {
let title = this.cellValue || this.row.name
if (this.formatterArgs?.getDrawerTitle && typeof this.formatterArgs.getDrawerTitle === 'function') {
title = this.formatterArgs.getDrawerTitle({
col: this.col,
row: this.row,
cellValue: this.cellValue
})
}
const resource = this.getResource()
if (resource) {
title = `${resource}: ${title}`
}
return title
},
resolveRoute() {
const route = this.getDetailRoute()
const routes = this.$router.resolve(route)
if (!routes) {
return
}
const matched = routes.resolved.matched.filter(item => item.name === route.name && item.components)
if (matched.length === 0) {
return
}
if (matched[0] && matched[0].components?.default) {
return matched[0]
}
},
getRouteComponent() {
const route = this.resolveRoute()
if (route) {
return route.components.default
}
},
showDrawer() {
if (this.formatterArgs.drawerComponent) {
this.drawerComponent = this.formatterArgs.drawerComponent
} else {
this.drawerComponent = this.getRouteComponent()
}
const route = this.getDetailRoute()
if (route?.query?.tab) {
this.$cookie.set(route.name, route.query.tab, 1)
this.$route.query.tab = route.query.tab
}
const payload = {
action: 'detail',
row: this.row,
col: this.col,
id: route.params.id || this.row.id
}
this.$store.dispatch('common/setDrawerActionMeta', payload).then(() => {
this.drawerTitle = this.getDrawerTitle(payload)
this.drawerVisible = true
})
},
handleClick() {
if (this.formatterArgs.beforeClick) {
this.formatterArgs.beforeClick(this.callbackArgs)
}
if (this.formatterArgs.onClick) {
return this.formatterArgs.onClick(this.callbackArgs)
}
if (this.formatterArgs.drawer) {
return this.showDrawer()
}
if (this.prevantClick) {
return
}
this.goDetail()
},
getDetailRoute() {
// const defaultRoute = this.$route.name.replace('List', 'Detail')
let route = this.formatterArgs.route
if (this.formatterArgs.getRoute && typeof this.formatterArgs.getRoute === 'function') {
route = this.formatterArgs.getRoute(this.callbackArgs)
route = this.formatterArgs.getRoute({
row: this.row,
col: this.col,
cellValue: this.cellValue
})
}
if (!route) {
console.error('No route found')
@@ -205,6 +89,7 @@ export default {
}
let detailRoute = { replace: true }
if (typeof route === 'string') {
detailRoute.name = route
detailRoute.params = { id: this.row.id }
@@ -222,18 +107,18 @@ export default {
const detailRoute = this.getDetailRoute()
if (this.formatterArgs.openInNewPage) {
const { href } = this.$router.resolve(detailRoute)
this.linkClicked = this.formatterArgs.removeColorOnClick
return window.open(href, '_blank')
const { href } = this.$router.resolve(detailRoute)
window.open(href, '_blank')
} else {
this.$router.push(detailRoute)
}
this.$router.push(detailRoute)
}
}
}
</script>
<style lang="scss" scoped>
<style scoped>
.detail {
display: inline-block;
max-width: 100%;
@@ -257,18 +142,4 @@ export default {
width: 28px;
height: 28px;
}
::v-deep .go-back {
display: none;
}
.detail-drawer {
::v-deep {
.el-drawer__header {
border-bottom: none;
padding-bottom: 1px;
}
}
}
</style>

Some files were not shown because too many files have changed in this diff Show More