TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-03 07:50:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 使用泛型重构参数绑定等

Browse Source
This commit is contained in:
meilin.huang
2025-05-24 16:22:54 +08:00
parent 666b191b6c
commit d6280ea280
75 changed files with 1340 additions and 732 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@@ -24,7 +24,7 @@
"crypto-js": "^4.2.0",
"dayjs": "^1.11.13",
"echarts": "^5.6.0",
"element-plus": "^2.9.10",
"element-plus": "^2.9.11",
"js-base64": "^3.7.7",
"jsencrypt": "^3.3.2",
"mitt": "^3.0.1",

2
frontend/src/common/commonEnum.ts
View File

@@ -16,7 +16,7 @@ export const ResourceTypeEnum = {
Redis: EnumValue.of(3, 'redis').setExtra({ icon: 'icon redis/redis', iconColor: 'var(--el-color-danger)' }).tagTypeInfo(),
Mongo: EnumValue.of(4, 'mongo').setExtra({ icon: 'icon mongo/mongo', iconColor: 'var(--el-color-success)' }).tagTypeDanger(),
AuthCert: EnumValue.of(5, '授权凭证').setExtra({ icon: 'Ticket', iconColor: 'var(--el-color-success)' }),
Es: EnumValue.of(6, 'ES实例').setExtra({ icon: 'Coin', iconColor: 'var(--el-color-warning)' }).tagTypeWarning(),
Es: EnumValue.of(6, 'ES实例').setExtra({ icon: 'icon es/es-color', iconColor: 'var(--el-color-warning)' }).tagTypeWarning(),
};
// 标签关联的资源类型

28
frontend/src/views/ops/component/TagTreeSelect.vue
View File

@@ -1,8 +1,7 @@
<template>
<el-tree-select
v-bind="$attrs"
v-model="state.selectTags"
@change="changeTag"
v-model="modelValue"
:data="tags"
:placeholder="$t('tag.selectTagPlaceholder')"
:default-expanded-keys="defaultExpandedKeys"
@@ -35,44 +34,33 @@ import { tagApi } from '../tag/api';
import { TagResourceTypeEnum } from '@/common/commonEnum';
import EnumValue from '@/common/Enum';
//定义事件
const emit = defineEmits(['update:modelValue', 'changeTag', 'input']);
const props = defineProps({
selectTags: {
type: [Array<any>, Object],
},
tagType: {
type: Number,
default: TagResourceTypeEnum.Tag.value,
},
});
const modelValue = defineModel<Array<any> | Object>('modelValue');
const state = reactive({
tags: [],
// 单选则为codePath，多选为codePath数组
selectTags: [] as any,
});
const { tags } = toRefs(state);
const defaultExpandedKeys = computed(() => {
if (Array.isArray(state.selectTags)) {
// 如果 state.selectTags 是数组，直接返回
return state.selectTags;
if (Array.isArray(modelValue.value)) {
// 如果 modelValue 是数组，直接返回
return modelValue.value;
}
// 如果 state.selectTags 不是数组，转换为包含 state.selectTags 的数组
return [state.selectTags];
// 如果 modelValue 不是数组，转换为包含 state.selectTags 的数组
return [modelValue.value];
});
onMounted(async () => {
state.selectTags = props.selectTags;
state.tags = await tagApi.getTagTrees.request({ type: props.tagType });
});
const changeTag = () => {
emit('changeTag', state.selectTags);
};
</script>
<style lang="scss"></style>

14
frontend/src/views/ops/db/DbEdit.vue
View File

@@ -4,7 +4,7 @@
:title="title"
v-model="dialogVisible"
@open="open"
:before-close="cancel"
:before-close="onCancel"
:close-on-click-modal="false"
:destroy-on-close="true"
width="38%"
@@ -51,7 +51,7 @@
:loading="state.loadingDbNames"
>
<template #header>
<el-checkbox v-model="checkAllDbNames" :indeterminate="indeterminateDbNames" @change="handleCheckAll">
<el-checkbox v-model="checkAllDbNames" :indeterminate="indeterminateDbNames" @change="onCheckAll">
{{ $t('db.allSelect') }}
</el-checkbox>
</template>
@@ -65,8 +65,8 @@
</el-form>
<template #footer>
<el-button @click="cancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" @click="btnOk">{{ $t('common.confirm') }}</el-button>
<el-button @click="onCancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" @click="onConfirm">{{ $t('common.confirm') }}</el-button>
</template>
</el-dialog>
</div>
@@ -198,7 +198,7 @@ const open = async () => {
}
};
const btnOk = async () => {
const onConfirm = async () => {
await useI18nFormValidate(dbForm);
emit('confirm', state.form);
};
@@ -209,7 +209,7 @@ const resetInputDb = () => {
state.instances = [];
};
const cancel = () => {
const onCancel = () => {
dialogVisible.value = false;
emit('cancel');
setTimeout(() => {
@@ -243,7 +243,7 @@ watch(allDatabases, (val: string[]) => {
state.dbNamesFiltered = val.map((dbName: string) => dbName);
});
const handleCheckAll = (val: CheckboxValueType) => {
const onCheckAll = (val: CheckboxValueType) => {
const otherSelected = state.dbNamesSelected.filter((dbName: string) => {
return !state.dbNamesFiltered.includes(dbName);
});

18
frontend/src/views/ops/db/InstanceEdit.vue
View File

@@ -8,17 +8,8 @@
<el-form :model="form" ref="dbFormRef" :rules="rules" label-width="auto">
<el-divider content-position="left">{{ $t('common.basic') }}</el-divider>
<el-form-item ref="tagSelectRef" prop="tagCodePaths" :label="$t('tag.relateTag')">
<tag-tree-select
multiple
@change-tag="
(paths: any) => {
form.tagCodePaths = paths;
tagSelectRef.validate();
}
"
:select-tags="form.tagCodePaths"
/>
<el-form-item prop="tagCodePaths" :label="$t('tag.relateTag')">
<tag-tree-select multiple v-model="form.tagCodePaths" />
</el-form-item>
<el-form-item prop="name" :label="$t('common.name')" required>
@@ -114,7 +105,7 @@
</template>
<script lang="ts" setup>
import { computed, reactive, ref, toRefs, watchEffect } from 'vue';
import { computed, reactive, toRefs, useTemplateRef, watchEffect } from 'vue';
import { dbApi } from './api';
import { ElMessage } from 'element-plus';
import SshTunnelSelect from '../component/SshTunnelSelect.vue';
@@ -153,8 +144,7 @@ const rules = {
host: [Rules.requiredInput('Host:Port')],
};
const dbFormRef: any = ref(null);
const tagSelectRef: any = ref(null);
const dbFormRef: any = useTemplateRef('dbFormRef');
const DefaultForm = {
id: null,

57
frontend/src/views/ops/es/EsInstanceEdit.vue
View File

@@ -1,24 +1,15 @@
<template>
<div>
<el-drawer :title="title" v-model="dialogVisible" :before-close="cancel" :destroy-on-close="true" :close-on-click-modal="false" size="40%">
<el-drawer :title="title" v-model="dialogVisible" :before-close="onCancel" :destroy-on-close="true" :close-on-click-modal="false" size="40%">
<template #header>
<DrawerHeader :header="title" :back="cancel" />
<DrawerHeader :header="title" :back="onCancel" />
</template>
<el-form :model="form" ref="dbForm" :rules="rules" label-width="auto">
<el-form :model="form" ref="dbFormRef" :rules="rules" label-width="auto">
<el-divider content-position="left">{{ t('common.basic') }}</el-divider>
<el-form-item ref="tagSelectRef" prop="tagCodePaths" :label="t('tag.relateTag')">
<tag-tree-select
multiple
@change-tag="
(paths: any) => {
form.tagCodePaths = paths;
tagSelectRef.validate();
}
"
:select-tags="form.tagCodePaths"
/>
<el-form-item prop="tagCodePaths" :label="t('tag.relateTag')">
<tag-tree-select multiple v-model="form.tagCodePaths" />
</el-form-item>
<el-form-item prop="name" :label="t('common.name')" required>
@@ -50,7 +41,7 @@
:resource-code="form.code"
:resource-type="TagResourceTypeEnum.EsInstance.value"
:test-conn-btn-loading="testConnBtnLoading"
@test-conn="testConn"
@test-conn="onTestConn"
:disable-ciphertext-type="[AuthCertCiphertextTypeEnum.PrivateKey.value]"
/>
</div>
@@ -63,16 +54,16 @@
</el-form>
<template #footer>
<el-button @click="testConn(null)" type="success" v-if="form.authCerts?.length <= 0">{{ t('ac.testConn') }}</el-button>
<el-button @click="cancel()">{{ t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="btnOk">{{ t('common.confirm') }}</el-button>
<el-button @click="onTestConn(null)" type="success" v-if="form.authCerts?.length <= 0">{{ t('ac.testConn') }}</el-button>
<el-button @click="onCancel()">{{ t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="onConfirm">{{ t('common.confirm') }}</el-button>
</template>
</el-drawer>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs, watchEffect } from 'vue';
import { reactive, toRefs, useTemplateRef, watchEffect } from 'vue';
import { esApi } from './api';
import { ElMessage } from 'element-plus';
import SshTunnelSelect from '../component/SshTunnelSelect.vue';
@@ -88,9 +79,6 @@ import { Rules } from '@/common/rule';
const { t } = useI18n();
const props = defineProps({
visible: {
type: Boolean,
},
data: {
type: [Boolean, Object],
},
@@ -99,6 +87,8 @@ const props = defineProps({
},
});
const dialogVisible = defineModel<boolean>('visible', { default: false });
//定义事件
const emit = defineEmits(['update:visible', 'cancel', 'val-change']);
@@ -109,8 +99,7 @@ const rules = {
host: [Rules.requiredInput('Host:Port')],
};
const dbForm: any = ref(null);
const tagSelectRef: any = ref(null);
const dbFormRef: any = useTemplateRef('dbFormRef');
const DefaultForm = {
id: null,
@@ -126,19 +115,17 @@ const DefaultForm = {
};
const state = reactive({
dialogVisible: false,
form: DefaultForm,
submitForm: {} as any,
});
const { dialogVisible, form, submitForm } = toRefs(state);
const { form, submitForm } = toRefs(state);
const { isFetching: saveBtnLoading, execute: saveInstanceExec, data: saveInstanceRes } = esApi.saveInstance.useApi(submitForm);
const { isFetching: testConnBtnLoading, execute: testConnExec, data: testConnRes } = esApi.testConn.useApi<any>(submitForm);
watchEffect(() => {
state.dialogVisible = props.visible;
if (!state.dialogVisible) {
if (!dialogVisible.value) {
return;
}
const dbInst: any = props.data;
@@ -161,8 +148,8 @@ const getReqForm = async () => {
return reqForm;
};
const testConn = async (authCert: any) => {
await useI18nFormValidate(dbForm);
const onTestConn = async (authCert: any) => {
await useI18nFormValidate(dbFormRef);
state.submitForm = await getReqForm();
if (authCert) {
state.submitForm.authCerts = [authCert];
@@ -172,23 +159,23 @@ const testConn = async (authCert: any) => {
ElMessage.success(t('es.connSuccess'));
};
const btnOk = async () => {
const onConfirm = async () => {
if (!state.form.version) {
ElMessage.warning(t('es.shouldTestConn'));
return;
}
await useI18nFormValidate(dbForm);
await useI18nFormValidate(dbFormRef);
state.submitForm = await getReqForm();
await saveInstanceExec();
useI18nSaveSuccessMsg();
state.form.id = saveInstanceRes as any;
emit('val-change', state.form);
cancel();
onCancel();
};
const cancel = () => {
emit('update:visible', false);
const onCancel = () => {
dialogVisible.value = false;
emit('cancel');
};
</script>

42
frontend/src/views/ops/machine/MachineEdit.vue
View File

@@ -1,23 +1,14 @@
<template>
<div>
<el-drawer :title="title" v-model="dialogVisible" :before-close="cancel" :destroy-on-close="true" :close-on-click-modal="false" size="40%">
<el-drawer :title="title" v-model="dialogVisible" :before-close="onCancel" :destroy-on-close="true" :close-on-click-modal="false" size="40%">
<template #header>
<DrawerHeader :header="title" :back="cancel" />
<DrawerHeader :header="title" :back="onCancel" />
</template>
<el-form :model="form" ref="machineForm" :rules="rules" label-width="auto">
<el-form :model="form" ref="machineFormRef" :rules="rules" label-width="auto">
<el-divider content-position="left">{{ $t('common.basic') }}</el-divider>
<el-form-item ref="tagSelectRef" prop="tagCodePaths" :label="$t('tag.relateTag')">
<tag-tree-select
multiple
@change-tag="
(paths) => {
form.tagCodePaths = paths;
tagSelectRef.validate();
}
"
:select-tags="form.tagCodePaths"
/>
<el-form-item prop="tagCodePaths" :label="$t('tag.relateTag')">
<tag-tree-select multiple v-model="form.tagCodePaths" />
</el-form-item>
<el-form-item prop="name" :label="$t('common.name')" required>
<el-input v-model.trim="form.name" auto-complete="off"></el-input>
@@ -48,7 +39,7 @@
:resource-code="form.code"
:resource-type="TagResourceTypeEnum.Machine.value"
:test-conn-btn-loading="testConnBtnLoading"
@test-conn="testConn"
@test-conn="onTestConn"
/>
</div>
@@ -71,8 +62,8 @@
<template #footer>
<div>
<el-button @click="cancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="btnOk">{{ $t('common.confirm') }}</el-button>
<el-button @click="onCancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="onConfirm">{{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-drawer>
@@ -80,7 +71,7 @@
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs, watchEffect } from 'vue';
import { reactive, toRefs, useTemplateRef, watchEffect } from 'vue';
import { machineApi } from './api';
import { ElMessage } from 'element-plus';
import TagTreeSelect from '../component/TagTreeSelect.vue';
@@ -119,8 +110,7 @@ const rules = {
ip: [Rules.requiredInput('machine.ipAndPort')],
};
const machineForm: any = ref(null);
const tagSelectRef: any = ref(null);
const machineFormRef: any = useTemplateRef('machineFormRef');
const defaultForm = {
id: null,
@@ -166,8 +156,8 @@ watchEffect(() => {
}
});
const testConn = async (authCert: any) => {
await useI18nFormValidate(machineForm);
const onTestConn = async (authCert: any) => {
await useI18nFormValidate(machineFormRef);
state.submitForm = getReqForm();
state.submitForm.authCerts = [authCert];
@@ -175,8 +165,8 @@ const testConn = async (authCert: any) => {
ElMessage.success(t('machine.connSuccess'));
};
const btnOk = async () => {
await useI18nFormValidate(machineForm);
const onConfirm = async () => {
await useI18nFormValidate(machineFormRef);
if (state.form.authCerts.length == 0) {
ElMessage.error(t('machine.noAcErrMsg'));
@@ -187,7 +177,7 @@ const btnOk = async () => {
await saveMachineExec();
useI18nSaveSuccessMsg();
emit('val-change', submitForm);
cancel();
onCancel();
};
const getReqForm = () => {
@@ -208,7 +198,7 @@ const handleChangeProtocol = (val: any) => {
}
};
const cancel = () => {
const onCancel = () => {
dialogVisible.value = false;
emit('cancel');
};

40
frontend/src/views/ops/machine/security/CmdConfList.vue
View File

@@ -20,11 +20,12 @@
<el-table-column :label="$t('common.operation')" min-width="120px">
<template #header>
<el-text tag="b">{{ $t('common.operation') }}</el-text>
<el-button v-auth="'cmdconf:save'" class="ml-1" type="primary" circle size="small" icon="Plus" @click="openFormDialog(false)"> </el-button>
<el-button v-auth="'cmdconf:save'" class="ml-1" type="primary" circle size="small" icon="Plus" @click="onOpenFormDialog(false)">
</el-button>
</template>
<template #default="scope">
<el-button v-auth="'cmdconf:save'" @click="openFormDialog(scope.row)" type="primary" link>{{ $t('common.edit') }}</el-button>
<el-button v-auth="'cmdconf:del'" @click="deleteCmdConf(scope.row)" type="danger" link>{{ $t('common.delete') }}</el-button>
<el-button v-auth="'cmdconf:save'" @click="onOpenFormDialog(scope.row)" type="primary" link>{{ $t('common.edit') }}</el-button>
<el-button v-auth="'cmdconf:del'" @click="onDeleteCmdConf(scope.row)" type="danger" link>{{ $t('common.delete') }}</el-button>
</template>
</el-table-column>
</el-table>
@@ -38,7 +39,7 @@
:close-on-click-modal="false"
>
<template #header>
<DrawerHeader :header="$t('machine.cmdConfig')" :back="cancelEdit" />
<DrawerHeader :header="$t('machine.cmdConfig')" :back="onCancelEdit" />
</template>
<el-form ref="formRef" :model="state.form" :rules="rules" label-width="auto">
@@ -46,7 +47,7 @@
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item prop="cmds" :label="$t('machine.filterCmds')" required>
<el-form-item prop="cmds" :label="$t('machine.filterCmds')">
<el-row>
<el-tag
class="ml-0.5 mt-0.5"
@@ -54,7 +55,7 @@
:key="tag"
closable
:disable-transitions="false"
@close="handleCmdClose(tag)"
@close="onCmdClose(tag)"
type="danger"
>
{{ tag }}
@@ -65,11 +66,11 @@
v-model="state.cmdInputValue"
class="mt-0.5"
size="small"
@keyup.enter="handleCmdInputConfirm"
@blur="handleCmdInputConfirm"
@keyup.enter="onCmdInputConfirm"
@blur="onCmdInputConfirm"
:placeholder="$t('machine.cmdPlaceholder')"
/>
<el-button v-else class="ml-0.5 mt-0.5" size="small" @click="showCmdInput"> + {{ $t('machine.newCmd') }} </el-button>
<el-button v-else class="ml-0.5 mt-0.5" size="small" @click="onShowCmdInput"> + {{ $t('machine.newCmd') }} </el-button>
</el-row>
</el-form-item>
@@ -87,8 +88,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="submiting" @click="cancelEdit">{{ $t('common.cancel') }}</el-button>
<el-button v-auth="'cmdconf:save'" type="primary" :loading="submiting" @click="submitForm">{{ $t('common.confirm') }}</el-button>
<el-button :loading="submiting" @click="onCancelEdit">{{ $t('common.cancel') }}</el-button>
<el-button v-auth="'cmdconf:save'" type="primary" :loading="submiting" @click="onSubmitForm">{{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-drawer>
@@ -143,18 +144,18 @@ const getCmdConfs = async () => {
state.cmdConfs = await cmdConfApi.list.request();
};
const handleCmdClose = (tag: string) => {
const onCmdClose = (tag: string) => {
state.form.cmds.splice(state.form.cmds.indexOf(tag), 1);
};
const showCmdInput = () => {
const onShowCmdInput = () => {
state.inputCmdVisible = true;
nextTick(() => {
cmdInputRef.value!.input!.focus();
});
};
const handleCmdInputConfirm = () => {
const onCmdInputConfirm = () => {
if (state.cmdInputValue) {
state.form.cmds.push(state.cmdInputValue);
}
@@ -162,24 +163,25 @@ const handleCmdInputConfirm = () => {
state.cmdInputValue = '';
};
const openFormDialog = (data: any) => {
const onOpenFormDialog = (data: any) => {
if (!data) {
state.form = { ...DefaultForm };
} else {
state.form = deepClone(data);
state.form.codePaths = data.tags?.map((tag: any) => tag.codePath);
state.form.cmds = data.cmds || [];
}
state.dialogVisible = true;
};
const deleteCmdConf = async (data: any) => {
const onDeleteCmdConf = async (data: any) => {
await useI18nDeleteConfirm(data.name);
await cmdConfApi.delete.request({ id: data.id });
useI18nDeleteSuccessMsg();
getCmdConfs();
};
const cancelEdit = () => {
const onCancelEdit = () => {
state.dialogVisible = false;
// 取消表单的校验
setTimeout(() => {
@@ -188,14 +190,14 @@ const cancelEdit = () => {
}, 200);
};
const submitForm = async () => {
const onSubmitForm = async () => {
try {
await useI18nFormValidate(formRef);
state.submiting = true;
await cmdConfApi.save.request(state.form);
useI18nSaveSuccessMsg();
cancelEdit();
onCancelEdit();
getCmdConfs();
} finally {
state.submiting = false;

57
frontend/src/views/ops/mongo/MongoEdit.vue
View File

@@ -1,20 +1,11 @@
<template>
<div>
<el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false" width="38%" :destroy-on-close="true">
<el-form :model="form" ref="mongoForm" :rules="rules" label-width="auto">
<el-dialog :title="title" v-model="dialogVisible" :before-close="onCancel" :close-on-click-modal="false" width="38%" :destroy-on-close="true">
<el-form :model="form" ref="mongoFormRef" :rules="rules" label-width="auto">
<el-tabs v-model="tabActiveName">
<el-tab-pane :label="$t('common.basic')" name="basic">
<el-form-item ref="tagSelectRef" prop="tagCodePaths" :label="$t('tag.relateTag')" required>
<tag-tree-select
@change-tag="
(tagCodePaths) => {
form.tagCodePaths = tagCodePaths;
tagSelectRef.validate();
}
"
multiple
:select-tags="form.tagCodePaths"
/>
<el-form-item prop="tagCodePaths" :label="$t('tag.relateTag')" required>
<tag-tree-select multiple v-model="form.tagCodePaths" />
</el-form-item>
<el-form-item prop="name" :label="$t('common.name')" required>
@@ -41,9 +32,9 @@
<template #footer>
<div class="dialog-footer">
<el-button @click="testConn" :loading="testConnBtnLoading" type="success">{{ $t('ac.testConn') }}</el-button>
<el-button @click="cancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="btnOk">{{ $t('common.confirm') }}</el-button>
<el-button @click="onTestConn" :loading="testConnBtnLoading" type="success">{{ $t('ac.testConn') }}</el-button>
<el-button @click="onCancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="onConfirm">{{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-dialog>
@@ -51,7 +42,7 @@
</template>
<script lang="ts" setup>
import { toRefs, reactive, ref, watchEffect } from 'vue';
import { toRefs, reactive, watchEffect, useTemplateRef } from 'vue';
import { mongoApi } from './api';
import { ElMessage } from 'element-plus';
import TagTreeSelect from '../component/TagTreeSelect.vue';
@@ -63,9 +54,6 @@ import { Rules } from '@/common/rule';
const { t } = useI18n();
const props = defineProps({
visible: {
type: Boolean,
},
mongo: {
type: [Boolean, Object],
},
@@ -74,8 +62,10 @@ const props = defineProps({
},
});
const dialogVisible = defineModel<boolean>('visible', { default: false });
//定义事件
const emit = defineEmits(['update:visible', 'cancel', 'val-change']);
const emit = defineEmits(['cancel', 'val-change']);
const rules = {
tagCodePaths: [Rules.requiredSelect('tag.relateTag')],
@@ -83,11 +73,9 @@ const rules = {
uri: [Rules.requiredInput('mongo.connUrl')],
};
const mongoForm: any = ref(null);
const tagSelectRef: any = ref(null);
const mongoFormRef: any = useTemplateRef('mongoFormRef');
const state = reactive({
dialogVisible: false,
tabActiveName: 'basic',
form: {
id: null,
@@ -100,14 +88,13 @@ const state = reactive({
submitForm: {},
});
const { dialogVisible, tabActiveName, form, submitForm } = toRefs(state);
const { tabActiveName, form, submitForm } = toRefs(state);
const { isFetching: testConnBtnLoading, execute: testConnExec } = mongoApi.testConn.useApi(submitForm);
const { isFetching: saveBtnLoading, execute: saveMongoExec } = mongoApi.saveMongo.useApi(submitForm);
watchEffect(() => {
state.dialogVisible = props.visible;
if (!state.dialogVisible) {
if (!dialogVisible.value) {
return;
}
state.tabActiveName = 'basic';
@@ -116,7 +103,7 @@ watchEffect(() => {
state.form = { ...mongo };
state.form.tagCodePaths = mongo.tags.map((t: any) => t.codePath);
} else {
state.form = { db: 0 } as any;
state.form = { db: 0, tagCodePaths: [] } as any;
}
});
@@ -128,24 +115,24 @@ const getReqForm = () => {
return reqForm;
};
const testConn = async () => {
await useI18nFormValidate(mongoForm);
const onTestConn = async () => {
await useI18nFormValidate(mongoFormRef);
state.submitForm = getReqForm();
await testConnExec();
ElMessage.success(t('ac.connSuccess'));
};
const btnOk = async () => {
await useI18nFormValidate(mongoForm);
const onConfirm = async () => {
await useI18nFormValidate(mongoFormRef);
state.submitForm = getReqForm();
await saveMongoExec();
useI18nSaveSuccessMsg();
emit('val-change', state.form);
cancel();
onCancel();
};
const cancel = () => {
emit('update:visible', false);
const onCancel = () => {
dialogVisible.value = false;
emit('cancel');
};
</script>

2
frontend/src/views/ops/mongo/MongoList.vue
View File

@@ -12,7 +12,7 @@
lazy
>
<template #tableHeader>
<el-button type="primary" icon="plus" @click="editMongo(true)" plain>{{ $t('common.create') }}</el-button>
<el-button type="primary" icon="plus" @click="editMongo(false)" plain>{{ $t('common.create') }}</el-button>
<el-button type="danger" icon="delete" :disabled="selectionData.length < 1" @click="deleteMongo" plain>{{ $t('common.delete') }}</el-button>
</template>

87
frontend/src/views/ops/redis/RedisEdit.vue
View File

@@ -1,22 +1,13 @@
<template>
<div>
<el-drawer :title="title" v-model="dialogVisible" :before-close="cancel" :destroy-on-close="true" :close-on-click-modal="false" size="40%">
<el-drawer :title="title" v-model="dialogVisible" :before-close="onCancel" :destroy-on-close="true" :close-on-click-modal="false" size="40%">
<template #header>
<DrawerHeader :header="title" :back="cancel" />
<DrawerHeader :header="title" :back="onCancel" />
</template>
<el-form :model="form" ref="redisForm" :rules="rules" label-width="auto">
<el-form-item ref="tagSelectRef" prop="tagCodePaths" :label="$t('tag.relateTag')" required>
<tag-tree-select
@change-tag="
(tagCodePaths) => {
form.tagCodePaths = tagCodePaths;
tagSelectRef.validate();
}
"
multiple
:select-tags="form.tagCodePaths"
/>
<el-form :model="form" ref="redisFormRef" :rules="rules" label-width="auto">
<el-form-item prop="tagCodePaths" :label="$t('tag.relateTag')" required>
<tag-tree-select multiple v-model="form.tagCodePaths" />
</el-form-item>
<el-form-item prop="name" :label="$t('common.name')" required>
<el-input v-model.trim="form.name" auto-complete="off"></el-input>
@@ -55,9 +46,9 @@
<template #footer>
<div class="dialog-footer">
<el-button @click="testConn" :loading="testConnBtnLoading" type="success">{{ $t('ac.testConn') }}</el-button>
<el-button @click="cancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="btnOk">{{ $t('common.confirm') }}</el-button>
<el-button @click="onTestConn" :loading="testConnBtnLoading" type="success">{{ $t('ac.testConn') }}</el-button>
<el-button @click="onCancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="onConfirm">{{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-drawer>
@@ -65,7 +56,7 @@
</template>
<script lang="ts" setup>
import { toRefs, reactive, ref, watch } from 'vue';
import { toRefs, reactive, watch, useTemplateRef } from 'vue';
import { redisApi } from './api';
import { ElMessage } from 'element-plus';
import TagTreeSelect from '../component/TagTreeSelect.vue';
@@ -78,9 +69,6 @@ import { Rules } from '@/common/rule';
const { t } = useI18n();
const props = defineProps({
visible: {
type: Boolean,
},
redis: {
type: [Boolean, Object],
},
@@ -89,7 +77,9 @@ const props = defineProps({
},
});
const emit = defineEmits(['update:visible', 'val-change', 'cancel']);
const dialogVisible = defineModel<boolean>('visible', { default: false });
const emit = defineEmits(['val-change', 'cancel']);
const rules = {
tagCodePaths: [Rules.requiredSelect('tag.relateTag')],
@@ -99,12 +89,9 @@ const rules = {
mode: [Rules.requiredSelect('mode')],
};
const redisForm: any = ref(null);
const tagSelectRef: any = ref(null);
const redisFormRef: any = useTemplateRef('redisFormRef');
const state = reactive({
dialogVisible: false,
tabActiveName: 'basic',
form: {
id: null,
code: '',
@@ -124,30 +111,26 @@ const state = reactive({
pwd: '',
});
const { dialogVisible, tabActiveName, form, submitForm, dbList } = toRefs(state);
const { form, submitForm, dbList } = toRefs(state);
const { isFetching: testConnBtnLoading, execute: testConnExec } = redisApi.testConn.useApi(submitForm);
const { isFetching: saveBtnLoading, execute: saveRedisExec } = redisApi.saveRedis.useApi(submitForm);
watch(
() => props.visible,
() => {
state.dialogVisible = props.visible;
if (!state.dialogVisible) {
return;
}
state.tabActiveName = 'basic';
const redis: any = props.redis;
if (redis) {
state.form = { ...redis };
state.form.tagCodePaths = redis.tags.map((t: any) => t.codePath);
convertDb(state.form.db);
} else {
state.form = { db: '0', tagCodePaths: [] } as any;
state.dbList = [0];
}
watch(dialogVisible, () => {
if (!dialogVisible.value) {
return;
}
);
const redis: any = props.redis;
if (redis) {
state.form = { ...redis };
state.form.tagCodePaths = redis.tags.map((t: any) => t.codePath);
convertDb(state.form.db);
} else {
state.form = { db: '0', tagCodePaths: [] } as any;
state.dbList = [0];
}
});
const convertDb = (db: string) => {
state.dbList = db.split(',').map((x) => Number.parseInt(x));
@@ -172,24 +155,24 @@ const getReqForm = async () => {
return reqForm;
};
const testConn = async () => {
await useI18nFormValidate(redisForm);
const onTestConn = async () => {
await useI18nFormValidate(redisFormRef);
state.submitForm = await getReqForm();
await testConnExec();
ElMessage.success(t('ac.connSuccess'));
};
const btnOk = async () => {
await useI18nFormValidate(redisForm);
const onConfirm = async () => {
await useI18nFormValidate(redisFormRef);
state.submitForm = await getReqForm();
await saveRedisExec();
useI18nSaveSuccessMsg();
emit('val-change', state.form);
cancel();
onCancel();
};
const cancel = () => {
emit('update:visible', false);
const onCancel = () => {
dialogVisible.value = false;
emit('cancel');
};
</script>

14
frontend/src/views/ops/tag/AuthCertList.vue
View File

@@ -8,7 +8,7 @@
:columns="state.columns"
>
<template #tableHeader>
<el-button v-auth="'authcert:save'" type="primary" icon="plus" @click="edit(false)">{{ $t('common.create') }}</el-button>
<el-button v-auth="'authcert:save'" type="primary" icon="plus" @click="onEdit(false)">{{ $t('common.create') }}</el-button>
</template>
<template #resourceCode="{ data }">
@@ -20,9 +20,9 @@
</template>
<template #action="{ data }">
<el-button v-auth="'authcert:save'" @click="edit(data)" type="primary" link>{{ $t('common.edit') }}</el-button>
<el-button v-auth="'authcert:save'" @click="onEdit(data)" type="primary" link>{{ $t('common.edit') }}</el-button>
<el-button v-auth="'authcert:del'" @click="deleteAc(data)" type="danger" link>{{ $t('common.delete') }}</el-button>
<el-button v-auth="'authcert:del'" @click="onDeleteAc(data)" type="danger" link>{{ $t('common.delete') }}</el-button>
</template>
</page-table>
@@ -30,7 +30,7 @@
:title="editor.title"
v-model:visible="editor.visible"
:auth-cert="editor.authcert"
@confirm="confirmSave"
@confirm="onConfirmSave"
@cancel="editor.authcert = {}"
:disable-type="state.disableAuthCertType"
:disable-ciphertext-type="state.disableAuthCertCiphertextType"
@@ -102,7 +102,7 @@ const search = async () => {
pageTableRef.value.search();
};
const edit = (data: any) => {
const onEdit = (data: any) => {
state.disableAuthCertType = [];
state.disableAuthCertCiphertextType = [];
if (data) {
@@ -128,14 +128,14 @@ const edit = (data: any) => {
state.editor.visible = true;
};
const confirmSave = async (authCert: any) => {
const onConfirmSave = async (authCert: any) => {
await resourceAuthCertApi.save.request(authCert);
useI18nSaveSuccessMsg();
state.editor.visible = false;
search();
};
const deleteAc = async (data: any) => {
const onDeleteAc = async (data: any) => {
try {
await useI18nDeleteConfirm(data.name);
await resourceAuthCertApi.delete.request({ id: data.id });

53
frontend/src/views/ops/tag/TagTreeList.vue
View File

@@ -10,7 +10,7 @@
v-auth="'tag:save'"
type="primary"
icon="plus"
@click="showSaveTagDialog(null)"
@click="onShowSaveTagDialog(null)"
></el-button>
</div>
<div>
@@ -33,15 +33,15 @@
highlight-current
:props="props"
:data="data"
@node-expand="handleNodeExpand"
@node-collapse="handleNodeCollapse"
@node-contextmenu="nodeContextmenu"
@node-click="treeNodeClick"
@node-expand="onNodeExpand"
@node-collapse="onNodeCollapse"
@node-contextmenu="onNodeContextmenu"
@node-click="onTreeNodeClick"
:default-expanded-keys="defaultExpandedKeys"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag"
@node-drop="handleDrop"
@node-drop="onNodeDrop"
:expand-on-click-node="false"
:filter-node-method="filterNode"
>
@@ -67,7 +67,7 @@
<Pane min-size="40" size="70">
<div class="ml-2 h-full">
<el-tabs class="h-full" @tab-change="tabChange" v-model="state.activeTabName" v-if="currentTag">
<el-tabs class="h-full" @tab-change="onTabChange" v-model="state.activeTabName" v-if="currentTag">
<el-tab-pane :label="$t('common.detail')" :name="TagDetail">
<el-descriptions :column="2" border>
<el-descriptions-item :label="$t('common.type')">
@@ -137,7 +137,7 @@
</Pane>
</Splitpanes>
<el-dialog width="500px" :title="saveTabDialog.title" :before-close="cancelSaveTag" v-model="saveTabDialog.visible">
<el-dialog width="500px" :title="saveTabDialog.title" :before-close="onCancelSaveTag" v-model="saveTabDialog.visible">
<el-form ref="tagForm" :rules="rules" :model="saveTabDialog.form" label-width="auto">
<el-form-item prop="code" :label="$t('tag.code')" required>
<el-input :disabled="saveTabDialog.form.id ? true : false" v-model="saveTabDialog.form.code" auto-complete="off"></el-input>
@@ -151,8 +151,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancelSaveTag()">{{ $t('common.cancel') }}</el-button>
<el-button @click="saveTag" type="primary">{{ $t('common.confirm') }}</el-button>
<el-button @click="onCancelSaveTag()">{{ $t('common.cancel') }}</el-button>
<el-button @click="onSaveTag" type="primary">{{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-dialog>
@@ -223,7 +223,7 @@ const contextmenuAdd = new ContextmenuItem('addTag', 'tag.createSubTag')
// 非标签类型不可添加子标签
return data.type != TagResourceTypeEnum.Tag.value || (data.children && data.children?.[0].type != TagResourceTypeEnum.Tag.value);
})
.withOnClick((data: any) => showSaveTagDialog(data));
.withOnClick((data: any) => onShowSaveTagDialog(data));
const contextmenuEdit = new ContextmenuItem('edit', 'common.edit')
.withIcon('edit')
@@ -231,7 +231,7 @@ const contextmenuEdit = new ContextmenuItem('edit', 'common.edit')
.withHideFunc((data: any) => {
return data.type != TagResourceTypeEnum.Tag.value;
})
.withOnClick((data: any) => showEditTagDialog(data));
.withOnClick((data: any) => onShowEditTagDialog(data));
const contextmenuDel = new ContextmenuItem('delete', 'common.delete')
.withIcon('delete')
@@ -240,7 +240,7 @@ const contextmenuDel = new ContextmenuItem('delete', 'common.delete')
// 存在子标签，则不允许删除
return data.children || data.type != TagResourceTypeEnum.Tag.value;
})
.withOnClick((data: any) => deleteTag(data));
.withOnClick((data: any) => onDeleteTag(data));
const state = reactive({
data: [],
@@ -364,7 +364,7 @@ const allowDrag = (node: any) => {
);
};
const handleDrop = async (draggingNode: any, dropNode: any) => {
const onNodeDrop = async (draggingNode: any, dropNode: any) => {
const draggingData = draggingNode.data;
const dropData = dropNode.data;
@@ -378,7 +378,7 @@ const handleDrop = async (draggingNode: any, dropNode: any) => {
}
};
const tabChange = () => {
const onTabChange = () => {
setNowTabData();
};
@@ -420,20 +420,21 @@ const getDetail = async (id: number) => {
};
// 树节点右击事件
const nodeContextmenu = (event: any, data: any) => {
const onNodeContextmenu = (event: any, data: any) => {
const { clientX, clientY } = event;
state.contextmenu.dropdown.x = clientX;
state.contextmenu.dropdown.y = clientY;
contextmenuRef.value.openContextmenu(data);
};
const treeNodeClick = async (data: any) => {
const onTreeNodeClick = async (data: any) => {
state.currentTag = await getDetail(data.id);
state.activeTabName = TagDetail;
// 关闭可能存在的右击菜单
contextmenuRef.value.closeContextmenu();
};
const showSaveTagDialog = (data: any) => {
const onShowSaveTagDialog = (data: any) => {
if (data) {
state.saveTabDialog.form.pid = data.id;
state.saveTabDialog.title = t('tag.createSubTagTitle', { codePath: data.codePath });
@@ -443,7 +444,7 @@ const showSaveTagDialog = (data: any) => {
state.saveTabDialog.visible = true;
};
const showEditTagDialog = (data: any) => {
const onShowEditTagDialog = (data: any) => {
state.saveTabDialog.form.id = data.id;
state.saveTabDialog.form.code = data.code;
state.saveTabDialog.form.name = data.name;
@@ -452,23 +453,23 @@ const showEditTagDialog = (data: any) => {
state.saveTabDialog.visible = true;
};
const saveTag = async () => {
const onSaveTag = async () => {
await useI18nFormValidate(tagForm);
const form = state.saveTabDialog.form;
await tagApi.saveTagTree.request(form);
useI18nSaveSuccessMsg();
search();
cancelSaveTag();
onCancelSaveTag();
state.currentTag = null;
};
const cancelSaveTag = () => {
const onCancelSaveTag = () => {
state.saveTabDialog.visible = false;
state.saveTabDialog.form = {} as any;
tagForm.value.resetFields();
};
const deleteTag = async (data: any) => {
const onDeleteTag = async (data: any) => {
await useI18nDeleteConfirm(data.codePath);
await tagApi.delTagTree.request({ id: data.id });
useI18nDeleteSuccessMsg();
@@ -476,7 +477,7 @@ const deleteTag = async (data: any) => {
};
// 节点被展开时触发的事件
const handleNodeExpand = (data: any, node: any) => {
const onNodeExpand = (data: any, node: any) => {
const id: any = node.data.id;
if (!state.defaultExpandedKeys.includes(id)) {
state.defaultExpandedKeys.push(id);
@@ -484,7 +485,7 @@ const handleNodeExpand = (data: any, node: any) => {
};
// 关闭节点
const handleNodeCollapse = (data: any, node: any) => {
const onNodeCollapse = (data: any, node: any) => {
removeDeafultExpandId(node.data.id);
let childNodes = node.childNodes;
@@ -493,7 +494,7 @@ const handleNodeCollapse = (data: any, node: any) => {
removeDeafultExpandId(cn.data.id);
}
// 递归删除展开的子节点节点id
handleNodeCollapse(data, cn);
onNodeCollapse(data, cn);
}
};

48
frontend/src/views/ops/tag/TeamList.vue
View File

@@ -10,8 +10,8 @@
:columns="columns"
>
<template #tableHeader>
<el-button v-auth="'team:save'" type="primary" icon="plus" @click="showSaveTeamDialog(false)">{{ $t('common.create') }}</el-button>
<el-button v-auth="'team:del'" :disabled="selectionData.length < 1" @click="deleteTeam()" type="danger" icon="delete">
<el-button v-auth="'team:save'" type="primary" icon="plus" @click="onShowSaveTeamDialog(false)">{{ $t('common.create') }}</el-button>
<el-button v-auth="'team:del'" :disabled="selectionData.length < 1" @click="onDeleteTeam()" type="danger" icon="delete">
{{ $t('common.delete') }}
</el-button>
</template>
@@ -23,22 +23,22 @@
<template #validityDate="{ data }"> {{ formatDate(data.validityStartDate) }} ~ {{ formatDate(data.validityEndDate) }} </template>
<template #action="{ data }">
<el-button @click.prevent="showMembers(data)" link type="primary">{{ $t('team.member') }}</el-button>
<el-button @click.prevent="onShowMembers(data)" link type="primary">{{ $t('team.member') }}</el-button>
<el-button v-auth="'team:save'" @click.prevent="showSaveTeamDialog(data)" link type="warning">{{ $t('common.edit') }}</el-button>
<el-button v-auth="'team:save'" @click.prevent="onShowSaveTeamDialog(data)" link type="warning">{{ $t('common.edit') }}</el-button>
</template>
</page-table>
<el-drawer
:title="addTeamDialog.title"
v-model="addTeamDialog.visible"
:before-close="cancelSaveTeam"
:before-close="onCancelSaveTeam"
:destroy-on-close="true"
:close-on-click-modal="false"
size="40%"
>
<template #header>
<DrawerHeader :header="addTeamDialog.title" :back="cancelSaveTeam" />
<DrawerHeader :header="addTeamDialog.title" :back="onCancelSaveTeam" />
</template>
<el-form ref="teamForm" :model="addTeamDialog.form" :rules="teamFormRules" label-width="auto">
@@ -69,8 +69,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancelSaveTeam()">{{ $t('common.cancel') }}</el-button>
<el-button @click="saveTeam" type="primary">{{ $t('common.confirm') }}</el-button>
<el-button @click="onCancelSaveTeam()">{{ $t('common.cancel') }}</el-button>
<el-button @click="onSaveTeam" type="primary">{{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-drawer>
@@ -85,22 +85,22 @@
:columns="showMemDialog.columns"
>
<template #tableHeader>
<el-button v-auth="'team:member:save'" @click="showAddMemberDialog()" type="primary" icon="plus">{{ $t('common.add') }}</el-button>
<el-button v-auth="'team:member:save'" @click="onShowAddMemberDialog()" type="primary" icon="plus">{{ $t('common.add') }}</el-button>
</template>
<template #action="{ data }">
<el-button v-auth="'team:member:del'" @click="deleteMember(data)" type="danger" link icon="delete"></el-button>
<el-button v-auth="'team:member:del'" @click="onDeleteMember(data)" type="danger" link icon="delete"></el-button>
</template>
</page-table>
<el-dialog width="400px" :title="$t('team.addMember')" :before-close="cancelAddMember" v-model="showMemDialog.addVisible">
<el-dialog width="400px" :title="$t('team.addMember')" :before-close="onCancelAddMember" v-model="showMemDialog.addVisible">
<el-form :model="showMemDialog.memForm" label-width="auto">
<AccountSelectFormItem v-model="showMemDialog.memForm.accountIds" multiple focus />
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancelAddMember()">{{ $t('common.cancel') }}</el-button>
<el-button @click="addMember" type="primary">{{ $t('common.confirm') }}</el-button>
<el-button @click="onCancelAddMember()">{{ $t('common.cancel') }}</el-button>
<el-button @click="onAddMember" type="primary">{{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-dialog>
@@ -207,7 +207,7 @@ const search = async () => {
pageTableRef.value.search();
};
const showSaveTeamDialog = async (data: any) => {
const onShowSaveTeamDialog = async (data: any) => {
if (data) {
state.addTeamDialog.title = useI18nEditTitle('team.team');
state.addTeamDialog.form.id = data.id;
@@ -225,7 +225,7 @@ const showSaveTeamDialog = async (data: any) => {
state.addTeamDialog.visible = true;
};
const saveTeam = async () => {
const onSaveTeam = async () => {
await useI18nFormValidate(teamForm);
const form = state.addTeamDialog.form;
form.validityStartDate = formatDate(form.validityDate[0]);
@@ -233,10 +233,10 @@ const saveTeam = async () => {
await tagApi.saveTeam.request(form);
useI18nSaveSuccessMsg();
search();
cancelSaveTeam();
onCancelSaveTeam();
};
const cancelSaveTeam = () => {
const onCancelSaveTeam = () => {
state.addTeamDialog.visible = false;
teamForm.value.resetFields();
setTimeout(() => {
@@ -244,7 +244,7 @@ const cancelSaveTeam = () => {
}, 500);
};
const deleteTeam = async () => {
const onDeleteTeam = async () => {
await useI18nDeleteConfirm(state.selectionData.map((x: any) => x.name).join('、'));
await tagApi.delTeam.request({ id: state.selectionData.map((x: any) => x.id).join(',') });
useI18nDeleteSuccessMsg();
@@ -253,13 +253,13 @@ const deleteTeam = async () => {
/********** 团队成员相关 ***********/
const showMembers = async (team: any) => {
const onShowMembers = async (team: any) => {
state.showMemDialog.query.teamId = team.id;
state.showMemDialog.visible = true;
state.showMemDialog.title = t('team.teamMember', { teamName: team.name });
};
const deleteMember = async (data: any) => {
const onDeleteMember = async (data: any) => {
await tagApi.delTeamMem.request(data);
useI18nOperateSuccessMsg();
// 重新赋值成员列表
@@ -273,11 +273,11 @@ const setMemebers = async () => {
showMemPageTableRef.value.search();
};
const showAddMemberDialog = () => {
const onShowAddMemberDialog = () => {
state.showMemDialog.addVisible = true;
};
const addMember = async () => {
const onAddMember = async () => {
const memForm = state.showMemDialog.memForm;
memForm.teamId = state.showMemDialog.query.teamId;
notBlank(memForm.accountIds, t('team.selectAccountTips'));
@@ -285,10 +285,10 @@ const addMember = async () => {
await tagApi.saveTeamMem.request(memForm);
useI18nSaveSuccessMsg();
setMemebers();
cancelAddMember();
onCancelAddMember();
};
const cancelAddMember = () => {
const onCancelAddMember = () => {
state.showMemDialog.memForm = {} as any;
state.showMemDialog.addVisible = false;
};

20
frontend/src/views/system/account/AccountEdit.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<el-dialog :title="title" v-model="visible" :before-close="cancel" :show-close="false" width="600px" :destroy-on-close="true">
<el-form :model="form" ref="accountForm" :rules="rules" label-width="auto">
<el-dialog :title="title" v-model="visible" :before-close="onCancel" :show-close="false" width="600px" :destroy-on-close="true">
<el-form :model="form" ref="accountFormRef" :rules="rules" label-width="auto">
<el-form-item prop="name" :label="$t('system.account.name')">
<el-input v-model.trim="form.name" auto-complete="off" clearable></el-input>
</el-form-item>
@@ -49,15 +49,15 @@
</el-form>
<template #footer>
<el-button @click="cancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="btnOk">{{ $t('common.confirm') }}</el-button>
<el-button @click="onCancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="onConfirm">{{ $t('common.confirm') }}</el-button>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { toRefs, reactive, watch, ref } from 'vue';
import { toRefs, reactive, watch, useTemplateRef } from 'vue';
import { accountApi } from '../api';
import { randomPassword } from '@/common/utils/string';
import { useI18nFormValidate, useI18nSaveSuccessMsg } from '@/hooks/useI18n';
@@ -77,7 +77,7 @@ const emit = defineEmits(['cancel', 'val-change']);
const visible = defineModel<boolean>('visible', { default: false });
const accountForm: any = ref(null);
const accountFormRef: any = useTemplateRef('accountFormRef');
const rules = {
name: [Rules.requiredInput('system.account.name')],
@@ -123,16 +123,16 @@ watch(props, (newValue: any) => {
}
});
const btnOk = async () => {
await useI18nFormValidate(accountForm);
const onConfirm = async () => {
await useI18nFormValidate(accountFormRef);
await saveAccountExec();
useI18nSaveSuccessMsg();
emit('val-change', state.form);
//重置表单域
accountForm.value.resetFields();
accountFormRef.value.resetFields();
};
const cancel = () => {
const onCancel = () => {
visible.value = false;
emit('cancel');
};

32
frontend/src/views/system/account/AccountList.vue
View File

@@ -10,24 +10,24 @@
:columns="columns"
>
<template #tableHeader>
<el-button v-auth="perms.addAccount" type="primary" icon="plus" @click="editAccount(false)">{{ $t('common.create') }}</el-button>
<el-button v-auth="perms.delAccount" :disabled="state.selectionData.length < 1" @click="deleteAccount()" type="danger" icon="delete">
<el-button v-auth="perms.addAccount" type="primary" icon="plus" @click="onEditAccount(false)">{{ $t('common.create') }}</el-button>
<el-button v-auth="perms.delAccount" :disabled="state.selectionData.length < 1" @click="onDeleteAccount()" type="danger" icon="delete">
{{ $t('common.delete') }}
</el-button>
</template>
<template #action="{ data }">
<el-button link v-if="actionBtns[perms.addAccount]" @click="editAccount(data)" type="primary">{{ $t('common.edit') }}</el-button>
<el-button link v-if="actionBtns[perms.addAccount]" @click="onEditAccount(data)" type="primary">{{ $t('common.edit') }}</el-button>
<el-button link v-if="actionBtns[perms.saveAccountRole]" @click="showRoleEdit(data)" type="success">
<el-button link v-if="actionBtns[perms.saveAccountRole]" @click="onShowRoleEdit(data)" type="success">
{{ $t('system.account.roleAllocation') }}
</el-button>
<el-button link v-if="actionBtns[perms.changeAccountStatus] && data.status == 1" @click="changeStatus(data)" type="danger">
<el-button link v-if="actionBtns[perms.changeAccountStatus] && data.status == 1" @click="onChangeStatus(data)" type="danger">
{{ $t('common.disable') }}
</el-button>
<el-button link v-if="actionBtns[perms.changeAccountStatus] && data.status == -1" type="success" @click="changeStatus(data)">
<el-button link v-if="actionBtns[perms.changeAccountStatus] && data.status == -1" type="success" @click="onChangeStatus(data)">
{{ $t('common.enable') }}
</el-button>
@@ -35,7 +35,7 @@
link
v-if="actionBtns[perms.addAccount]"
:disabled="!data.otpSecret || data.otpSecret == '-'"
@click="resetOtpSecret(data)"
@click="onResetOtpSecret(data)"
type="warning"
>
{{ $t('system.account.resetOtp') }}
@@ -55,8 +55,8 @@
</el-table>
</el-dialog>
<role-allocation v-model:visible="roleDialog.visible" :account="roleDialog.account" @cancel="cancel()" />
<account-edit :title="accountDialog.title" v-model:visible="accountDialog.visible" v-model:account="accountDialog.data" @val-change="valChange()" />
<role-allocation v-model:visible="roleDialog.visible" :account="roleDialog.account" @cancel="onCancel()" />
<account-edit :title="accountDialog.title" v-model:visible="accountDialog.visible" v-model:account="accountDialog.data" @val-change="onValChange()" />
</div>
</template>
@@ -150,7 +150,7 @@ const search = async () => {
pageTableRef.value.search();
};
const changeStatus = async (row: any) => {
const onChangeStatus = async (row: any) => {
let id = row.id;
let status = row.status == AccountStatusEnum.Disable.value ? AccountStatusEnum.Enable.value : AccountStatusEnum.Disable.value;
await accountApi.changeStatus.request({
@@ -161,7 +161,7 @@ const changeStatus = async (row: any) => {
search();
};
const resetOtpSecret = async (row: any) => {
const onResetOtpSecret = async (row: any) => {
let id = row.id;
await accountApi.resetOtpSecret.request({
id,
@@ -170,7 +170,7 @@ const resetOtpSecret = async (row: any) => {
row.otpSecret = '-';
};
const editAccount = (data: any) => {
const onEditAccount = (data: any) => {
if (!data) {
state.accountDialog.title = useI18nCreateTitle('personal.accountInfo');
state.accountDialog.data = null;
@@ -181,22 +181,22 @@ const editAccount = (data: any) => {
state.accountDialog.visible = true;
};
const showRoleEdit = (data: any) => {
const onShowRoleEdit = (data: any) => {
state.roleDialog.visible = true;
state.roleDialog.account = data;
};
const cancel = () => {
const onCancel = () => {
state.roleDialog.visible = false;
state.roleDialog.account = null;
};
const valChange = () => {
const onValChange = () => {
state.accountDialog.visible = false;
search();
};
const deleteAccount = async () => {
const onDeleteAccount = async () => {
await useI18nDeleteConfirm(state.selectionData.map((x: any) => x.username).join('、'));
await accountApi.del.request({ id: state.selectionData.map((x: any) => x.id).join(',') });
useI18nDeleteSuccessMsg();

14
frontend/src/views/system/account/RoleAllocation.vue
View File

@@ -4,7 +4,7 @@
@open="searchAccountRoles()"
:title="account == null ? '' : $t('system.account.allocateRoleTitle', { name: account.username })"
v-model="dialogVisible"
:before-close="cancel"
:before-close="onCancel"
:destroy-on-close="true"
width="55%"
>
@@ -20,11 +20,11 @@
lazy
>
<template #tableHeader>
<el-button @click="showResources" icon="view" type="primary" link>{{ $t('system.account.menuAndPermission') }}</el-button>
<el-button @click="onShowResources" icon="view" type="primary" link>{{ $t('system.account.menuAndPermission') }}</el-button>
</template>
<template #action="{ data }">
<el-button v-auth="'account:saveRoles'" type="danger" @click="relateRole(-1, data.roleId)" icon="delete" link plain>
<el-button v-auth="'account:saveRoles'" type="danger" @click="onRelateRole(-1, data.roleId)" icon="delete" link plain>
{{ $t('system.account.remove') }}
</el-button>
</template>
@@ -44,7 +44,7 @@
<template #action="{ data }">
<el-button
v-auth="'account:saveRoles'"
@click="relateRole(1, data.id)"
@click="onRelateRole(1, data.id)"
:disabled="data.code?.indexOf('COMMON') == 0 || data.status == RoleStatusEnum.Disable.value"
type="success"
icon="CirclePlus"
@@ -176,7 +176,7 @@ const onTabChange = () => {
searchAccountRoles();
};
const relateRole = async (relateType: number, roleId: number) => {
const onRelateRole = async (relateType: number, roleId: number) => {
await accountApi.saveRole.request({
id: props.account!.id,
roleId,
@@ -191,7 +191,7 @@ const relateRole = async (relateType: number, roleId: number) => {
}
};
const showResources = async () => {
const onShowResources = async () => {
let showResourceDialog = state.showResourceDialog;
showResourceDialog.title = t('system.account.userMenuTitle', { name: props.account?.username });
showResourceDialog.resources = [];
@@ -204,7 +204,7 @@ const showResources = async () => {
/**
* 取消
*/
const cancel = () => {
const onCancel = () => {
state.unRelatedQuery.pageNum = 1;
state.unRelatedQuery.name = null;
state.unRelatedQuery.code = null;

22
frontend/src/views/system/config/ConfigEdit.vue
View File

@@ -1,11 +1,11 @@
<template>
<div>
<el-drawer :title="title" v-model="visible" :show-close="false" :before-close="cancel" size="1000px" :destroy-on-close="true">
<el-drawer :title="title" v-model="visible" :show-close="false" :before-close="onCancel" size="1000px" :destroy-on-close="true">
<template #header>
<DrawerHeader :header="title" :back="cancel" />
<DrawerHeader :header="title" :back="onCancel" />
</template>
<el-form ref="configForm" :model="form" :rules="rules" label-width="auto">
<el-form ref="configFormRef" :model="form" :rules="rules" label-width="auto">
<el-form-item prop="name" :label="$t('system.sysconf.confItem')" required>
<el-input v-model="form.name"></el-input>
</el-form-item>
@@ -35,8 +35,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="btnOk">{{ $t('common.confirm') }}</el-button>
<el-button @click="onCancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="onConfirm">{{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-drawer>
@@ -44,7 +44,7 @@
</template>
<script lang="ts" setup>
import { ref, toRefs, reactive, watch } from 'vue';
import { toRefs, reactive, watch, useTemplateRef } from 'vue';
import { configApi, accountApi } from '../api';
import { DynamicFormEdit } from '@/components/dynamic-form';
import DrawerHeader from '@/components/drawer-header/DrawerHeader.vue';
@@ -70,7 +70,7 @@ const visible = defineModel<boolean>('visible', { default: false });
//定义事件
const emit = defineEmits(['cancel', 'val-change']);
const configForm: any = ref(null);
const configFormRef: any = useTemplateRef('configFormRef');
const state = reactive({
params: [] as any,
@@ -116,7 +116,7 @@ watch(visible, () => {
}
});
const cancel = () => {
const onCancel = () => {
visible.value = false;
// 若父组件有取消事件，则调用
emit('cancel');
@@ -131,8 +131,8 @@ const getAccount = (username: any) => {
}
};
const btnOk = async () => {
await useI18nFormValidate(configForm);
const onConfirm = async () => {
await useI18nFormValidate(configFormRef);
if (state.params) {
state.form.params = JSON.stringify(state.params);
}
@@ -144,7 +144,7 @@ const btnOk = async () => {
await saveConfigExec();
emit('val-change', state.form);
cancel();
onCancel();
};
</script>
<style lang="scss"></style>

18
frontend/src/views/system/config/ConfigList.vue
View File

@@ -9,7 +9,7 @@
:data-handler-fn="handleData"
>
<template #tableHeader>
<el-button v-auth="perms.saveConfig" type="primary" icon="plus" @click="editConfig(false)">{{ $t('common.create') }}</el-button>
<el-button v-auth="perms.saveConfig" type="primary" icon="plus" @click="onEditConfig(false)">{{ $t('common.create') }}</el-button>
</template>
<template #status="{ data }">
@@ -19,11 +19,11 @@
<template #action="{ data }">
<el-button :disabled="data.status == -1" type="warning" @click="showSetConfigDialog(data)" link>{{ $t('system.sysconf.conf') }}</el-button>
<el-button v-if="actionBtns[perms.saveConfig]" @click="editConfig(data)" type="primary" link>{{ $t('common.edit') }}</el-button>
<el-button v-if="actionBtns[perms.saveConfig]" @click="onEditConfig(data)" type="primary" link>{{ $t('common.edit') }}</el-button>
</template>
</page-table>
<el-dialog @close="closeSetConfigDialog" :title="$t('system.sysconf.confItemSetting')" v-model="paramsDialog.visible" width="700px">
<el-dialog @close="onCloseSetConfigDialog" :title="$t('system.sysconf.confItemSetting')" v-model="paramsDialog.visible" width="700px">
<dynamic-form
ref="paramsFormRef"
v-if="paramsDialog.paramsFormItem.length > 0"
@@ -39,13 +39,13 @@
<template #footer>
<span class="dialog-footer">
<el-button @click="closeSetConfigDialog()">{{ $t('common.cancel') }}</el-button>
<el-button @click="onCloseSetConfigDialog()">{{ $t('common.cancel') }}</el-button>
<el-button v-auth="'config:save'" type="primary" @click="setConfig()">{{ $t('common.confirm') }}</el-button>
</span>
</template>
</el-dialog>
<config-edit :title="$t(configEdit.title)" v-model:visible="configEdit.visible" :data="configEdit.config" @val-change="configEditChange" />
<config-edit :title="$t(configEdit.title)" v-model:visible="configEdit.visible" :data="configEdit.config" @val-change="onConfigEditChange" />
</div>
</template>
@@ -143,7 +143,7 @@ const showSetConfigDialog = (row: any) => {
state.paramsDialog.visible = true;
};
const closeSetConfigDialog = () => {
const onCloseSetConfigDialog = () => {
state.paramsDialog.visible = false;
setTimeout(() => {
state.paramsDialog.config = {};
@@ -182,7 +182,7 @@ const setConfig = async () => {
value: paramsValue,
});
useI18nSaveSuccessMsg();
closeSetConfigDialog();
onCloseSetConfigDialog();
search();
};
@@ -195,12 +195,12 @@ const hasParam = (paramKey: string, paramItems: any) => {
return false;
};
const configEditChange = () => {
const onConfigEditChange = () => {
useI18nSaveSuccessMsg();
search();
};
const editConfig = (data: any) => {
const onEditConfig = (data: any) => {
if (data) {
state.configEdit.title = 'common.edit';
state.configEdit.config = data;

30
frontend/src/views/system/resource/ResourceEdit.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<el-dialog :title="title" :destroy-on-close="true" v-model="visible" width="800px">
<el-form :model="form" :inline="true" ref="menuForm" :rules="rules" label-width="auto">
<el-form :model="form" :inline="true" ref="menuFormRef" :rules="rules" label-width="auto">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-form-item class="!w-full" prop="type" :label="$t('common.type')" required>
@@ -71,7 +71,7 @@
prop="meta.linkType"
:tooltip="$t('system.menu.externalLinkTips')"
>
<el-select class="!w-full" @change="changeLinkType" v-model="form.meta.linkType">
<el-select class="!w-full" @change="onChangeLinkType" v-model="form.meta.linkType">
<el-option :key="0" :label="$t('system.menu.no')" :value="0"> </el-option>
<el-option :key="1" :label="$t('system.menu.inline')" :value="1"> </el-option>
<el-option :key="2" :label="$t('system.menu.externalLink')" :value="2"> </el-option>
@@ -87,17 +87,15 @@
</el-form>
<template #footer>
<div>
<el-button @click="cancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="btnOk">{{ $t('common.confirm') }}</el-button>
</div>
<el-button @click="onCancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="onConfirm">{{ $t('common.confirm') }}</el-button>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { ref, toRefs, reactive, watchEffect } from 'vue';
import { toRefs, reactive, watchEffect, useTemplateRef } from 'vue';
import { ElMessage } from 'element-plus';
import { resourceApi } from '../api';
import { ResourceTypeEnum } from '../enums';
@@ -107,6 +105,7 @@ import { useI18n } from 'vue-i18n';
import EnumSelect from '@/components/enumselect/EnumSelect.vue';
import FormItemTooltip from '@/components/form/FormItemTooltip.vue';
import { Rules } from '@/common/rule';
import { useI18nFormValidate } from '@/hooks/useI18n';
const { t } = useI18n();
@@ -127,7 +126,7 @@ const visible = defineModel<boolean>('visible', { default: false });
//定义事件
const emit = defineEmits(['cancel', 'val-change']);
const menuForm: any = ref(null);
const menuFormRef: any = useTemplateRef('menuFormRef');
const menuTypeValue = ResourceTypeEnum.Menu.value;
@@ -208,17 +207,12 @@ watchEffect(() => {
});
// 改变外链类型
const changeLinkType = () => {
const onChangeLinkType = () => {
state.form.meta.component = '';
};
const btnOk = async () => {
try {
await menuForm.value.validate();
} catch (e: any) {
ElMessage.error(t('common.formValidationError'));
return false;
}
const onConfirm = async () => {
await useI18nFormValidate(menuFormRef);
const submitForm = { ...state.form };
if (submitForm.type == 1) {
@@ -233,7 +227,7 @@ const btnOk = async () => {
emit('val-change', submitForm);
ElMessage.success(t('common.saveSuccess'));
cancel();
onCancel();
};
const parseMenuMeta = (meta: any) => {
@@ -270,7 +264,7 @@ const parseMenuMeta = (meta: any) => {
return metaForm;
};
const cancel = () => {
const onCancel = () => {
visible.value = false;
emit('cancel');
};

28
frontend/src/views/system/resource/ResourceList.vue
View File

@@ -5,7 +5,7 @@
<div class="card !p-1 mr-1 flex justify-between">
<div class="mb-1">
<el-input v-model="filterResource" clearable :placeholder="$t('system.menu.filterPlaceholder')" class="mr-2 !w-[200px]" />
<el-button v-auth="perms.addResource" type="primary" icon="plus" @click="addResource(false)"></el-button>
<el-button v-auth="perms.addResource" type="primary" icon="plus" @click="onAddResource(false)"></el-button>
</div>
<div>
@@ -27,7 +27,7 @@
@node-expand="handleNodeExpand"
@node-collapse="handleNodeCollapse"
@node-contextmenu="nodeContextmenu"
@node-click="treeNodeClick"
@node-click="onTreeNodeClick"
:default-expanded-keys="defaultExpandedKeys"
:expand-on-click-node="false"
draggable
@@ -136,7 +136,7 @@
:typeDisabled="dialogForm.typeDisabled"
:departTree="data"
:type="dialogForm.type"
@val-change="valChange"
@val-change="onValChange"
/>
<contextmenu :dropdown="state.contextmenu.dropdown" :items="state.contextmenu.items" ref="contextmenuRef" />
@@ -186,29 +186,29 @@ const contextmenuAdd = new ContextmenuItem('add', 'system.menu.addSubResource')
.withIcon('circle-plus')
.withPermission(perms.addResource)
.withHideFunc((data: any) => data.type !== menuTypeValue)
.withOnClick((data: any) => addResource(data));
.withOnClick((data: any) => onAddResource(data));
const contextmenuEdit = new ContextmenuItem('edit', 'common.edit')
.withIcon('edit')
.withPermission(perms.updateResource)
.withOnClick((data: any) => editResource(data));
.withOnClick((data: any) => onEditResource(data));
const contextmenuEnable = new ContextmenuItem('enable', 'system.menu.enable')
.withIcon('circle-check')
.withPermission(perms.updateResource)
.withHideFunc((data: any) => data.status === 1)
.withOnClick((data: any) => changeStatus(data, 1));
.withOnClick((data: any) => onChangeStatus(data, 1));
const contextmenuDisable = new ContextmenuItem('disable', 'system.menu.disable')
.withIcon('circle-close')
.withPermission(perms.updateResource)
.withHideFunc((data: any) => data.status === -1)
.withOnClick((data: any) => changeStatus(data, -1));
.withOnClick((data: any) => onChangeStatus(data, -1));
const contextmenuDel = new ContextmenuItem('delete', 'common.delete')
.withIcon('delete')
.withPermission(perms.delResource)
.withOnClick((data: any) => deleteMenu(data));
.withOnClick((data: any) => onDeleteMenu(data));
const state = reactive({
contextmenu: {
@@ -263,7 +263,7 @@ const nodeContextmenu = (event: any, data: any) => {
contextmenuRef.value.openContextmenu(data);
};
const treeNodeClick = async (data: any) => {
const onTreeNodeClick = async (data: any) => {
state.activeTabName = ResourceDetail;
// 关闭可能存在的右击菜单
contextmenuRef.value.closeContextmenu();
@@ -286,7 +286,7 @@ const onTabClick = async (activeTab: any) => {
}
};
const deleteMenu = async (data: any) => {
const onDeleteMenu = async (data: any) => {
await useI18nDeleteConfirm(data.name);
await resourceApi.del.request({
id: data.id,
@@ -296,7 +296,7 @@ const deleteMenu = async (data: any) => {
search();
};
const addResource = (data: any) => {
const onAddResource = (data: any) => {
let dialog = state.dialogForm;
dialog.data = { pid: 0, type: 1 };
// 添加顶级菜单情况
@@ -333,7 +333,7 @@ const addResource = (data: any) => {
dialog.visible = true;
};
const editResource = async (data: any) => {
const onEditResource = async (data: any) => {
const res = await resourceApi.detail.request({
id: data.id,
});
@@ -347,12 +347,12 @@ const editResource = async (data: any) => {
state.dialogForm.visible = true;
};
const valChange = () => {
const onValChange = () => {
search();
state.dialogForm.visible = false;
};
const changeStatus = async (data: any, status: any) => {
const onChangeStatus = async (data: any, status: any) => {
await resourceApi.changeStatus.request({
id: data.id,
status: status,

18
frontend/src/views/system/role/AccountAllocation.vue
View File

@@ -9,11 +9,11 @@
>
<page-table ref="pageTableRef" :page-api="roleApi.roleAccounts" :search-items="searchItems" v-model:query-form="query" :columns="columns" lazy>
<template #tableHeader>
<el-button v-auth="perms.saveAccountRole" type="primary" icon="plus" @click="showAddAccount()">{{ $t('common.add') }}</el-button>
<el-button v-auth="perms.saveAccountRole" type="primary" icon="plus" @click="onShowAddAccount()">{{ $t('common.add') }}</el-button>
</template>
<template #action="{ data }">
<el-button link v-if="actionBtns[perms.saveAccountRole]" @click="relateAccount(-1, data.accountId)" icon="delete" type="danger">
<el-button link v-if="actionBtns[perms.saveAccountRole]" @click="onRelateAccount(-1, data.accountId)" icon="delete" type="danger">
{{ $t('common.remove') }}
</el-button>
</template>
@@ -22,7 +22,7 @@
<el-dialog
width="400px"
:title="$t('system.role.addAccount')"
:before-close="cancelAddAccount"
:before-close="onCancelAddAccount"
v-model="addAccountDialog.visible"
:destroy-on-close="true"
>
@@ -31,8 +31,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancelAddAccount()">{{ $t('common.cancel') }}</el-button>
<el-button @click="relateAccount(1, addAccountDialog.accountId)" type="primary">{{ $t('common.confirm') }}</el-button>
<el-button @click="onCancelAddAccount()">{{ $t('common.cancel') }}</el-button>
<el-button @click="onRelateAccount(1, addAccountDialog.accountId)" type="primary">{{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-dialog>
@@ -107,7 +107,7 @@ const searchRoleAccount = () => {
pageTableRef.value.search();
};
const relateAccount = async (relateType: number, accountId: number) => {
const onRelateAccount = async (relateType: number, accountId: number) => {
await accountApi.saveRole.request({
id: accountId,
roleId: props.role?.id,
@@ -116,16 +116,16 @@ const relateAccount = async (relateType: number, accountId: number) => {
useI18nOperateSuccessMsg();
// 如果是新增账号，则关闭新增账号弹窗
if (relateType == 1) {
cancelAddAccount();
onCancelAddAccount();
}
searchRoleAccount();
};
const showAddAccount = () => {
const onShowAddAccount = () => {
state.addAccountDialog.visible = true;
};
const cancelAddAccount = () => {
const onCancelAddAccount = () => {
state.addAccountDialog.accountId = null;
state.addAccountDialog.accounts = [];
state.addAccountDialog.visible = false;

10
frontend/src/views/system/role/ResourceEdit.vue
View File

@@ -3,7 +3,7 @@
<el-dialog
:title="$t('system.role.allocateMenuTitle', { roleName: roleInfo?.name })"
v-model="visible"
:before-close="cancel"
:before-close="onCancel"
:show-close="false"
width="400px"
>
@@ -26,8 +26,8 @@
</el-tree>
<template #footer>
<div class="dialog-footer">
<el-button :loading="state.submiting" @click="cancel">{{ $t('common.cancel') }}</el-button>
<el-button :loading="state.submiting" type="primary" @click="btnOk">{{ $t('common.confirm') }}</el-button>
<el-button :loading="state.submiting" @click="onCancel">{{ $t('common.cancel') }}</el-button>
<el-button :loading="state.submiting" type="primary" @click="onConfirm">{{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-dialog>
@@ -88,7 +88,7 @@ watch(
}
);
const btnOk = async () => {
const onConfirm = async () => {
let menuIds = menuTree.value.getCheckedKeys();
let halfMenuIds = menuTree.value.getHalfCheckedKeys();
let resources = [].concat(menuIds, halfMenuIds).join(',');
@@ -105,7 +105,7 @@ const btnOk = async () => {
}
};
const cancel = () => {
const onCancel = () => {
visible.value = false;
emit('cancel');
};

21
frontend/src/views/system/role/RoleEdit.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<el-dialog :title="title" v-model="visible" :show-close="false" :before-close="cancel" width="600px" :destroy-on-close="true">
<el-form ref="roleForm" :model="form" :rules="rules" label-width="auto">
<el-dialog :title="title" v-model="visible" :show-close="false" :before-close="onCancel" width="600px" :destroy-on-close="true">
<el-form ref="roleFormRef" :model="form" :rules="rules" label-width="auto">
<el-form-item prop="name" :label="$t('system.role.roleName')" required>
<el-input v-model="form.name" auto-complete="off"></el-input>
</el-form-item>
@@ -22,8 +22,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="btnOk">{{ $t('common.confirm') }}</el-button>
<el-button @click="onCancel()">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" :loading="saveBtnLoading" @click="onConfirm">{{ $t('common.confirm') }}</el-button>
</div>
</template>
</el-dialog>
@@ -31,7 +31,7 @@
</template>
<script lang="ts" setup>
import { ref, toRefs, reactive, watchEffect } from 'vue';
import { toRefs, reactive, watchEffect, useTemplateRef } from 'vue';
import { roleApi } from '../api';
import { RoleStatusEnum } from '../enums';
import EnumSelect from '@/components/enumselect/EnumSelect.vue';
@@ -58,7 +58,8 @@ const visible = defineModel<boolean>('visible', { default: false });
//定义事件
const emit = defineEmits(['cancel', 'val-change']);
const roleForm: any = ref(null);
const roleFormRef: any = useTemplateRef('roleFormRef');
const state = reactive({
form: {
id: null,
@@ -84,17 +85,17 @@ watchEffect(() => {
}
});
const cancel = () => {
const onCancel = () => {
visible.value = false;
// 若父组件有取消事件，则调用
emit('cancel');
};
const btnOk = async () => {
await useI18nFormValidate(roleForm);
const onConfirm = async () => {
await useI18nFormValidate(roleFormRef);
await saveRoleExec();
emit('val-change', state.form);
cancel();
onCancel();
};
</script>
<style lang="scss"></style>