mirror of
https://github.com/jumpserver/lina.git
synced 2025-11-09 03:14:48 +00:00
Compare commits
71 Commits
pr@dev@fix
...
v4.3
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
56aa3caa83 | ||
|
|
19b1dc0dbc | ||
|
|
77ef172a23 | ||
|
|
4596887bf1 | ||
|
|
0a3dc30c85 | ||
|
|
51d24bc8e5 | ||
|
|
1b15a4d043 | ||
|
|
7d3f818242 | ||
|
|
4e26f18d77 | ||
|
|
b22613617a | ||
|
|
e971cbf4a8 | ||
|
|
4672abae35 | ||
|
|
ba36d72602 | ||
|
|
4bfbbba4c5 | ||
|
|
ea038ce43a | ||
|
|
e16b19666c | ||
|
|
c7f5409eb6 | ||
|
|
fdbd7d2222 | ||
|
|
ddbaeeafea | ||
|
|
efb0e9dacb | ||
|
|
f6f8301ad5 | ||
|
|
9a63ae63d4 | ||
|
|
1e007ccda3 | ||
|
|
d1d0b06b53 | ||
|
|
5fb70d2f24 | ||
|
|
b54a95430f | ||
|
|
4d8b4c45af | ||
|
|
a6d642df60 | ||
|
|
2e74f1522f | ||
|
|
fe615e0314 | ||
|
|
09f734e6fc | ||
|
|
3117046342 | ||
|
|
b68aecb5cc | ||
|
|
1c9b155d97 | ||
|
|
75b1be9864 | ||
|
|
615c3c1cf4 | ||
|
|
4d82231af4 | ||
|
|
c6cf6571b6 | ||
|
|
8ea990d070 | ||
|
|
f4a32170d5 | ||
|
|
073508675e | ||
|
|
1d6ca0a93a | ||
|
|
36aea652d6 | ||
|
|
1a42ce90ab | ||
|
|
31a401b55d | ||
|
|
582a84178d | ||
|
|
9b9f7c936c | ||
|
|
2a6100957f | ||
|
|
16606d6a27 | ||
|
|
0a612f50e6 | ||
|
|
fe36fa9390 | ||
|
|
ba109900ec | ||
|
|
ec7768267f | ||
|
|
cc58b374ab | ||
|
|
04ffbb8fd6 | ||
|
|
49880f6739 | ||
|
|
e6f98d58c4 | ||
|
|
fd1f16d43c | ||
|
|
968b2415b1 | ||
|
|
776090d6ba | ||
|
|
3a37952288 | ||
|
|
62b8fc0e3b | ||
|
|
b2028869cb | ||
|
|
5277a725f8 | ||
|
|
f137788c1a | ||
|
|
f7d17c8de7 | ||
|
|
feea70b0be | ||
|
|
04696ef3d6 | ||
|
|
1731f4f788 | ||
|
|
6f25d93909 | ||
|
|
46461ec324 |
@@ -1,28 +0,0 @@
|
||||
name: LLM Code Review
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pull-requests: write
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
types: [opened, reopened, synchronize]
|
||||
|
||||
jobs:
|
||||
llm-code-review:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: fit2cloud/LLM-CodeReview-Action@main
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
|
||||
OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
|
||||
LANGUAGE: English
|
||||
OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
|
||||
MODEL: qwen2-1.5b-instruct
|
||||
PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
|
||||
top_p: 1
|
||||
temperature: 1
|
||||
# max_tokens: 10000
|
||||
MAX_PATCH_LENGTH: 10000
|
||||
IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
|
||||
FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"
|
||||
28
.github/workflows/llm-code-review.yml
vendored
28
.github/workflows/llm-code-review.yml
vendored
@@ -1,28 +0,0 @@
|
||||
name: LLM Code Review
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pull-requests: write
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
types: [opened, reopened, synchronize]
|
||||
|
||||
jobs:
|
||||
llm-code-review:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: fit2cloud/LLM-CodeReview-Action@main
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
|
||||
OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
|
||||
LANGUAGE: English
|
||||
OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
|
||||
MODEL: qwen2-1.5b-instruct
|
||||
PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
|
||||
top_p: 1
|
||||
temperature: 1
|
||||
# max_tokens: 10000
|
||||
MAX_PATCH_LENGTH: 10000
|
||||
IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
|
||||
FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -17,5 +17,3 @@ tests/**/coverage/
|
||||
*.sln
|
||||
.env.development
|
||||
.python-version
|
||||
|
||||
helper.json
|
||||
@@ -5,6 +5,5 @@
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 |
@@ -3,7 +3,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataActions from '@/components/Common/DataActions/index.vue'
|
||||
import DataActions from '@/components/DataActions'
|
||||
|
||||
export default {
|
||||
name: 'ActionsGroup',
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IBox from '@/components/Common/IBox/index.vue'
|
||||
import IBox from '@/components/IBox/index.vue'
|
||||
import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
|
||||
|
||||
export default {
|
||||
@@ -48,13 +48,11 @@ export default {
|
||||
},
|
||||
performAdd: {
|
||||
type: Function,
|
||||
default: (objects, that) => {
|
||||
}
|
||||
default: (objects, that) => {}
|
||||
},
|
||||
onAddSuccess: {
|
||||
type: Function,
|
||||
default: (objects, that) => {
|
||||
}
|
||||
default: (objects, that) => {}
|
||||
},
|
||||
canSelect: {
|
||||
type: Function,
|
||||
@@ -64,7 +62,8 @@ export default {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addObjects() {
|
||||
@@ -78,18 +77,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
b, strong {
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
}
|
||||
b, strong {
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
tr td {
|
||||
line-height: 1.42857;
|
||||
padding: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
tr td {
|
||||
line-height: 1.42857;
|
||||
padding: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
tr.item td {
|
||||
border-top: 1px solid #e7eaec;
|
||||
}
|
||||
tr.item td {
|
||||
border-top: 1px solid #e7eaec;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<Dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="$tc('Assets')"
|
||||
:disabled-status="!isLoaded"
|
||||
custom-class="asset-select-dialog"
|
||||
top="2vh"
|
||||
v-bind="$attrs"
|
||||
@@ -22,8 +23,8 @@
|
||||
:url="baseUrl"
|
||||
class="tree-table"
|
||||
v-bind="$attrs"
|
||||
@loaded="handleTableLoaded"
|
||||
v-on="$listeners"
|
||||
@loaded="handleTableLoaded"
|
||||
/>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -82,7 +83,7 @@ export default {
|
||||
},
|
||||
{
|
||||
prop: 'address',
|
||||
label: this.$t('Address'),
|
||||
label: this.$t('IpDomain'),
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
|
||||
@@ -56,10 +56,6 @@ export default {
|
||||
treeSetting: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
disabled: {
|
||||
type: [Boolean, Function],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -75,7 +71,6 @@ export default {
|
||||
dialogVisible: false,
|
||||
initialValue: _.cloneDeep(iValue),
|
||||
select2Config: {
|
||||
disabled: this.disabled,
|
||||
value: iValue,
|
||||
multiple: true,
|
||||
clearable: true,
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DrawerListTable as ListTable } from '@/components'
|
||||
import ListTable from '@/components/Table/ListTable/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'BlockedIPList',
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
>
|
||||
<el-form :model="secretInfo" class="password-form" label-position="right" label-width="100px">
|
||||
<el-form-item :label="$tc('OldSecret')">
|
||||
<SecretViewerFormatter
|
||||
<ShowKeyCopyFormatter
|
||||
:cell-value="secretInfo.old_secret"
|
||||
:col="{ formatterArgs: {
|
||||
name: 'old_secret'
|
||||
@@ -20,7 +20,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$tc('NewSecret')">
|
||||
<SecretViewerFormatter
|
||||
<ShowKeyCopyFormatter
|
||||
:cell-value="secretInfo.new_secret"
|
||||
:col="{ formatterArgs: {
|
||||
name: 'new_secret'
|
||||
@@ -34,13 +34,13 @@
|
||||
|
||||
<script>
|
||||
import Dialog from '@/components/Dialog/index.vue'
|
||||
import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
|
||||
import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
|
||||
|
||||
export default {
|
||||
name: 'RecordViewSecret',
|
||||
components: {
|
||||
Dialog,
|
||||
SecretViewerFormatter
|
||||
ShowKeyCopyFormatter
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
|
||||
@@ -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 }
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -78,7 +78,7 @@ export default {
|
||||
formatterData = data
|
||||
}
|
||||
return (
|
||||
<span style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: '1.2' }}>{formatterData}</span>
|
||||
<span style={{ whiteSpace: 'pre-wrap', lineHeight: '1.2' }}>{formatterData}</span>
|
||||
)
|
||||
}
|
||||
if (this.value instanceof Array) {
|
||||
@@ -92,7 +92,7 @@ export default {
|
||||
)
|
||||
}
|
||||
return (
|
||||
<span style='white-space: pre-wrap;' title={this.displayValue}>{this.displayValue}</span>
|
||||
<span title={this.displayValue}>{this.displayValue}</span>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
<script>
|
||||
import { createSourceIdCache } from '@/api/common'
|
||||
import { Select2 } from '@/components/Form/FormFields'
|
||||
import IBox from '@/components/Common/IBox/index.vue'
|
||||
import IBox from '@/components/IBox/index.vue'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
@@ -340,13 +340,13 @@ b, strong {
|
||||
}
|
||||
|
||||
tr td {
|
||||
line-height: 1.4;
|
||||
padding: 8px 0;
|
||||
line-height: 1.42857;
|
||||
padding: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
tr.item td {
|
||||
border-top: 1px dashed #EBEEF5;
|
||||
border-top: 1px solid #e7eaec;
|
||||
}
|
||||
|
||||
.box-margin {
|
||||
|
||||
@@ -1,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>
|
||||
|
||||
@@ -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;
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-if="detailVisible"
|
||||
:modal="false"
|
||||
:show-cancel="false"
|
||||
:show-confirm="false"
|
||||
:title="title"
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<Dialog
|
||||
:show-cancel="false"
|
||||
:visible="iVisible"
|
||||
class="processing-dialog"
|
||||
height="300"
|
||||
title="Processing"
|
||||
width="300"
|
||||
@confirm="iVisible=false"
|
||||
>
|
||||
<div id="load">
|
||||
<div class="spinner" />
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Dialog from './index.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProcessingDialog',
|
||||
components: { Dialog },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
iVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.processing-dialog {
|
||||
::v-deep .el-dialog__body {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 5px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
border-top-color: var(--color-primary);
|
||||
animation: spin 1s infinite linear;
|
||||
}
|
||||
|
||||
#load {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<Dialog
|
||||
:visible="iVisible"
|
||||
height="300"
|
||||
title="Processing"
|
||||
width="300"
|
||||
class="processing-dialog"
|
||||
>
|
||||
<div id="load">
|
||||
<div class="spinner" />
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Dialog from './index.vue'
|
||||
|
||||
export default {
|
||||
name: 'RemoteProcessingDialog',
|
||||
components: { Dialog },
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
iVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.processing-dialog {
|
||||
::v-deep .el-dialog__body {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 5px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
border-top-color: var(--color-primary);
|
||||
animation: spin 1s infinite linear;
|
||||
}
|
||||
|
||||
#load {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Dialog
|
||||
v-if="iVisible"
|
||||
:destroy-on-close="true"
|
||||
:show-cancel="false"
|
||||
:show-confirm="false"
|
||||
:title="$tc('Report')"
|
||||
:visible.sync="iVisible"
|
||||
top="35vh"
|
||||
width="80%"
|
||||
@close="loading=true"
|
||||
>
|
||||
<span v-if="loading" v-loading="loading" class="loading" />
|
||||
<iframe title="dialog" :src="url" style="border: none;" @load="onIframeLoad" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Dialog from '@/components/Dialog/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'ReportDialog',
|
||||
components: {
|
||||
Dialog
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeMount() {
|
||||
},
|
||||
methods: {
|
||||
onIframeLoad() {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
margin-top: 20px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<Dialog
|
||||
:show-cancel="false"
|
||||
:title="title"
|
||||
:visible.sync="visible"
|
||||
:close-on-click-modal="false"
|
||||
width="700px"
|
||||
@close="onClose"
|
||||
@confirm="visible = false"
|
||||
>
|
||||
<el-alert type="warning" :closable="false">
|
||||
{{ warningText }}
|
||||
<div class="secret">
|
||||
<div class="row">
|
||||
<span class="col">ID:</span>
|
||||
<span class="value">{{ keyInfo.id }}</span>
|
||||
<i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.id)" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col">Secret:</span>
|
||||
<span class="value">{{ keyInfo.secret }}</span>
|
||||
<i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.secret)" />
|
||||
</div>
|
||||
</div>
|
||||
</el-alert>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/i18n/i18n'
|
||||
import { copy } from '@/utils/common'
|
||||
import Dialog from '@/components/Dialog/index'
|
||||
|
||||
export default {
|
||||
name: 'Secret',
|
||||
components: {
|
||||
Dialog
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: () => i18n.t('CreateAccessKey')
|
||||
},
|
||||
warningText: {
|
||||
type: String,
|
||||
default: () => i18n.t('ApiKeyWarning')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyInfo: { id: '', secret: '' },
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show(data) {
|
||||
this.keyInfo = data
|
||||
this.visible = true
|
||||
},
|
||||
onClose() {
|
||||
this.$emit('close')
|
||||
},
|
||||
handleCopy(value) {
|
||||
copy(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.secret {
|
||||
color: #2b2f3a;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
width: 100px;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,6 @@
|
||||
<transition name="dialog-fade">
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
:class="{ shadow: shadow }"
|
||||
:modal-append-to-body="true"
|
||||
:title="title"
|
||||
:top="top"
|
||||
@@ -47,7 +46,7 @@ export default {
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '800px'
|
||||
default: '60%'
|
||||
},
|
||||
showConfirm: {
|
||||
type: Boolean,
|
||||
@@ -80,14 +79,11 @@ export default {
|
||||
maxWidth: {
|
||||
type: String,
|
||||
default: '1200px'
|
||||
},
|
||||
shadow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iWidth() {
|
||||
@@ -106,69 +102,59 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog.shadow ::v-deep .el-dialog {
|
||||
box-shadow: 1px 2px 12px 0 rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.dialog ::v-deep .el-dialog {
|
||||
border-radius: 0.3em;
|
||||
max-width: min(100vw, 1500px);
|
||||
|
||||
.form-group-header {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.el-form--label-top {
|
||||
.form-group-header {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-circle-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__header {
|
||||
box-sizing: border-box;
|
||||
padding: 15px 22px;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 20px 30px;
|
||||
font-size: 13px;
|
||||
|
||||
&:has(.el-table) {
|
||||
background: #f3f3f4;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
border-top: 1px solid #dee2e6;
|
||||
padding: 16px 25px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.dialog ::v-deep .el-dialog {
|
||||
max-width: calc(100% - 30px);
|
||||
border-radius: 0.3em;
|
||||
max-width: min(100vw, 1500px);
|
||||
|
||||
.form-group-header {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.el-icon-circle-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__header {
|
||||
box-sizing: border-box;
|
||||
padding: 15px 22px;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 20px 30px;
|
||||
font-size: 13px;
|
||||
|
||||
&:has(.el-table) {
|
||||
background: #f3f3f4;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
border-top: 1px solid #dee2e6;
|
||||
padding: 16px 25px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer ::v-deep button.el-button {
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.dialog ::v-deep .el-dialog {
|
||||
max-width: calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-fade-enter-active, .dialog-fade-leave-active {
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
.dialog-footer ::v-deep button.el-button {
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */
|
||||
{
|
||||
opacity: 0;
|
||||
}
|
||||
.dialog-fade-enter-active, .dialog-fade-leave-active {
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
.dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */
|
||||
{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -245,7 +245,7 @@ export default {
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:value', val)
|
||||
this.$emit('input', val)
|
||||
this.$emit('change', val)
|
||||
}
|
||||
},
|
||||
iOptions() {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -5,9 +5,7 @@
|
||||
v-bind="iAttrs"
|
||||
@input="handleInput"
|
||||
v-on="$listeners"
|
||||
>
|
||||
hello
|
||||
</Password>
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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: {
|
||||
@@ -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 {
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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,避免同一个类型接口生成多个key,localStorage中的数据无法共用.
|
||||
tableName = replaceAllUUID(tableName)
|
||||
|
||||
this.objTableColumns.set(tableName, columns)
|
||||
|
||||
_tableConfig[tableName] = {
|
||||
'showColumns': columns
|
||||
}
|
||||
localStorage.setItem('tableConfig', JSON.stringify(_tableConfig))
|
||||
this.filterShowColumns()
|
||||
},
|
||||
filterChange(filters) {
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否
|
||||
*
|
||||
|
||||
@@ -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)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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: [],
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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>
|
||||
@@ -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
Reference in New Issue
Block a user