chore: seed migration objects batch 17
This commit is contained in:
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<n-tabs type="segment" justify-content="space-evenly">
|
||||||
|
<n-tab-pane name="account" tab="账号登录">
|
||||||
|
<Form @updateActiveModule="updateActiveModule" mode="account" />
|
||||||
|
</n-tab-pane>
|
||||||
|
<n-tab-pane name="mobile" tab="手机号登录">
|
||||||
|
<Form @updateActiveModule="updateActiveModule" mode="mobile" />
|
||||||
|
</n-tab-pane>
|
||||||
|
</n-tabs>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import Form from './form.vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['updateActiveModule']);
|
||||||
|
|
||||||
|
function updateActiveModule(key: string) {
|
||||||
|
emit('updateActiveModule', key);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-checkbox v-model:checked="checked" class="text-12px">我已阅读并接受</n-checkbox>
|
||||||
|
<n-button text type="primary" @click="handleClickProtocol" class="text-12px">
|
||||||
|
《用户协议》
|
||||||
|
</n-button>
|
||||||
|
<n-button text type="primary" @click="handleClickPolicy" class="text-12px">
|
||||||
|
《隐私权政策》
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
value?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
value: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
interface Emits {
|
||||||
|
(e: 'update:value', value: boolean): void;
|
||||||
|
(e: 'click-protocol'): void;
|
||||||
|
(e: 'click-policy'): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const emit = defineEmits<Emits>();
|
||||||
|
|
||||||
|
const checked = computed({
|
||||||
|
get() {
|
||||||
|
return props.value;
|
||||||
|
},
|
||||||
|
set(newValue: boolean) {
|
||||||
|
emit('update:value', newValue);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleClickProtocol() {
|
||||||
|
emit('click-protocol');
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClickPolicy() {
|
||||||
|
emit('click-policy');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.text-12px {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,287 @@
|
|||||||
|
<template>
|
||||||
|
<n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
|
||||||
|
<n-form-item path="username">
|
||||||
|
<n-input
|
||||||
|
@keyup.enter="handleSubmit"
|
||||||
|
v-model:value="formInline.username"
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<n-icon size="18" color="#808695">
|
||||||
|
<PersonOutline />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item path="pass">
|
||||||
|
<n-input
|
||||||
|
@keyup.enter="handleSubmit"
|
||||||
|
v-model:value="formInline.pass"
|
||||||
|
type="password"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<n-icon size="18" color="#808695">
|
||||||
|
<LockClosedOutline />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item path="confirmPwd">
|
||||||
|
<n-input
|
||||||
|
@keyup.enter="handleSubmit"
|
||||||
|
v-model:value="formInline.confirmPwd"
|
||||||
|
type="password"
|
||||||
|
placeholder="再次输入密码"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<n-icon size="18" color="#808695">
|
||||||
|
<LockClosedOutline />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item path="mobile">
|
||||||
|
<n-input
|
||||||
|
@keyup.enter="handleSubmit"
|
||||||
|
v-model:value="formInline.mobile"
|
||||||
|
placeholder="请输入手机号码"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<n-icon size="18" color="#808695">
|
||||||
|
<MobileOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item path="code">
|
||||||
|
<n-input-group>
|
||||||
|
<n-input
|
||||||
|
@keyup.enter="handleSubmit"
|
||||||
|
v-model:value="formInline.code"
|
||||||
|
placeholder="请输入验证码"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<n-icon size="18" color="#808695" :component="SafetyCertificateOutlined" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<n-button
|
||||||
|
type="primary"
|
||||||
|
ghost
|
||||||
|
@click="sendMobileCode"
|
||||||
|
:disabled="isCounting"
|
||||||
|
:loading="sendLoading"
|
||||||
|
>
|
||||||
|
{{ sendLabel }}
|
||||||
|
</n-button>
|
||||||
|
</n-input-group>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item path="inviteCode">
|
||||||
|
<n-input
|
||||||
|
:style="{ width: '100%' }"
|
||||||
|
placeholder="邀请码(选填)"
|
||||||
|
@keyup.enter="handleSubmit"
|
||||||
|
v-model:value="formInline.inviteCode"
|
||||||
|
:disabled="inviteCodeDisabled"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<n-icon size="18" color="#808695" :component="TagOutlined" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item class="default-color">
|
||||||
|
<Agreement
|
||||||
|
v-model:value="agreement"
|
||||||
|
@clickProtocol="handleClickProtocol"
|
||||||
|
@clickPolicy="handleClickPolicy"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item>
|
||||||
|
<n-button type="primary" @click="handleSubmit" size="large" :loading="loading" block>
|
||||||
|
注册
|
||||||
|
</n-button>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<FormOther moduleKey="login" tag="登录账号" @updateActiveModule="updateActiveModule" />
|
||||||
|
</n-form>
|
||||||
|
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
:show-icon="false"
|
||||||
|
:mask-closable="false"
|
||||||
|
preset="dialog"
|
||||||
|
:closable="false"
|
||||||
|
:style="{
|
||||||
|
width: dialogWidth,
|
||||||
|
position: 'top',
|
||||||
|
bottom: '15vw',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<n-space justify="center">
|
||||||
|
<div class="agree-title">《{{ agreeTitle }}》</div>
|
||||||
|
</n-space>
|
||||||
|
|
||||||
|
<div v-html="modalContent"></div>
|
||||||
|
|
||||||
|
<n-divider />
|
||||||
|
<n-space justify="center">
|
||||||
|
<n-button type="info" ghost strong @click="handleAgreement(true)">我已知晓并接受</n-button>
|
||||||
|
<n-button type="error" ghost strong @click="handleAgreement(false)">我拒绝</n-button>
|
||||||
|
</n-space>
|
||||||
|
</n-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import '../components/style.less';
|
||||||
|
import { ref, onMounted, computed } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { ResultEnum } from '@/enums/httpEnum';
|
||||||
|
import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5';
|
||||||
|
import { SafetyCertificateOutlined, MobileOutlined, TagOutlined } from '@vicons/antd';
|
||||||
|
import { aesEcb } from '@/utils/encrypt';
|
||||||
|
import Agreement from './agreement.vue';
|
||||||
|
import FormOther from '../components/form-other.vue';
|
||||||
|
import { useSendCode } from '@/hooks/common';
|
||||||
|
import { validate } from '@/utils/validateUtil';
|
||||||
|
import { register, SendSms } from '@/api/system/user';
|
||||||
|
import { useUserStore } from '@/store/modules/user';
|
||||||
|
import { adaModalWidth } from '@/utils/hotgo';
|
||||||
|
|
||||||
|
interface FormState {
|
||||||
|
username: string;
|
||||||
|
pass: string;
|
||||||
|
confirmPwd: string;
|
||||||
|
mobile: string;
|
||||||
|
code: string;
|
||||||
|
inviteCode: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const emit = defineEmits(['updateActiveModule']);
|
||||||
|
const formRef = ref();
|
||||||
|
const router = useRouter();
|
||||||
|
const message = useMessage();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const loading = ref(false);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const agreeTitle = ref('');
|
||||||
|
const modalContent = ref('');
|
||||||
|
const { sendLabel, isCounting, loading: sendLoading, activateSend } = useSendCode();
|
||||||
|
const agreement = ref(false);
|
||||||
|
const inviteCodeDisabled = ref(false);
|
||||||
|
const dialogWidth = computed(() => {
|
||||||
|
return adaModalWidth();
|
||||||
|
});
|
||||||
|
|
||||||
|
const formInline = ref<FormState>({
|
||||||
|
username: '',
|
||||||
|
pass: '',
|
||||||
|
confirmPwd: '',
|
||||||
|
mobile: '',
|
||||||
|
code: '',
|
||||||
|
inviteCode: '',
|
||||||
|
password: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
username: { required: true, message: '请输入用户名', trigger: 'blur' },
|
||||||
|
pass: { required: true, message: '请输入密码', trigger: 'blur' },
|
||||||
|
mobile: { required: true, message: '请输入手机号码', trigger: 'blur' },
|
||||||
|
code: { required: true, message: '请输入验证码', trigger: 'blur' },
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
formRef.value.validate(async (errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
if (formInline.value.pass !== formInline.value.confirmPwd) {
|
||||||
|
message.info('两次输入的密码不一致，请检查');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!agreement.value) {
|
||||||
|
message.info('请确认你已经仔细阅读并接受《用户协议》和《隐私权政策》并已勾选接受选项');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
message.loading('注册中...');
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { code, message: msg } = await register({
|
||||||
|
username: formInline.value.username,
|
||||||
|
password: aesEcb.encrypt(formInline.value.pass),
|
||||||
|
mobile: formInline.value.mobile,
|
||||||
|
code: formInline.value.code,
|
||||||
|
inviteCode: formInline.value.inviteCode,
|
||||||
|
});
|
||||||
|
message.destroyAll();
|
||||||
|
if (code == ResultEnum.SUCCESS) {
|
||||||
|
message.success('注册成功，请登录！');
|
||||||
|
updateActiveModule('login');
|
||||||
|
} else {
|
||||||
|
message.info(msg || '注册失败');
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息，并且进行验证码校验');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const inviteCode = router.currentRoute.value.query?.inviteCode as string;
|
||||||
|
if (inviteCode) {
|
||||||
|
inviteCodeDisabled.value = true;
|
||||||
|
formInline.value.inviteCode = inviteCode;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateActiveModule(key: string) {
|
||||||
|
emit('updateActiveModule', key);
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendMobileCode() {
|
||||||
|
validate.phone(rules.mobile, formInline.value.mobile, function (error?: Error) {
|
||||||
|
if (error === undefined) {
|
||||||
|
activateSend(SendSms({ mobile: formInline.value.mobile, event: 'register' }));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
message.error(error.message);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClickProtocol() {
|
||||||
|
showModal.value = true;
|
||||||
|
agreeTitle.value = '用户协议';
|
||||||
|
modalContent.value = userStore.loginConfig?.loginProtocol as string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClickPolicy() {
|
||||||
|
showModal.value = true;
|
||||||
|
agreeTitle.value = '隐私权政策';
|
||||||
|
modalContent.value = userStore.loginConfig?.loginPolicy as string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAgreement(agree: boolean) {
|
||||||
|
showModal.value = false;
|
||||||
|
agreement.value = agree;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.agree-title {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,130 @@
|
|||||||
|
import { h } from 'vue';
|
||||||
|
import { NButton, NTag } from 'naive-ui';
|
||||||
|
import { timestampToTime, formatBefore } from '@/utils/dateUtil';
|
||||||
|
import { renderIcon, renderOptionTag, renderTooltip } from '@/utils';
|
||||||
|
import { HelpCircleOutline } from '@vicons/ionicons5';
|
||||||
|
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: '连接ID',
|
||||||
|
key: 'id',
|
||||||
|
width: 80,
|
||||||
|
render(row) {
|
||||||
|
return '# ' + row.id;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '连接协议',
|
||||||
|
key: 'proto',
|
||||||
|
width: 80,
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: 'info',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => row.proto,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '服务端口',
|
||||||
|
key: 'port',
|
||||||
|
width: 80,
|
||||||
|
render(row) {
|
||||||
|
return row.port;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '应用名称',
|
||||||
|
key: 'name',
|
||||||
|
width: 100,
|
||||||
|
render: (rows, _) => {
|
||||||
|
return rows.name;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '登录地址',
|
||||||
|
key: 'addr',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title(_column) {
|
||||||
|
return renderTooltip(
|
||||||
|
h(
|
||||||
|
NButton,
|
||||||
|
{
|
||||||
|
strong: true,
|
||||||
|
size: 'small',
|
||||||
|
text: true,
|
||||||
|
iconPlacement: 'right',
|
||||||
|
},
|
||||||
|
{ default: () => '认证状态', icon: renderIcon(HelpCircleOutline) }
|
||||||
|
),
|
||||||
|
'成功连接到服务端口并通过登录许可认证的客户端连接会显示为 `已认证` 状态'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
key: 'isAuth',
|
||||||
|
width: 80,
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: row.isAuth ? 'success' : 'warning',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => (row.isAuth ? '已认证' : '未认证'),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '授权分组',
|
||||||
|
key: 'group',
|
||||||
|
width: 100,
|
||||||
|
render(row) {
|
||||||
|
return renderOptionTag('ServerLicenseGroupOptions', row.group);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '授权许可',
|
||||||
|
key: 'name',
|
||||||
|
render(row) {
|
||||||
|
return h('p', { id: 'app' }, [
|
||||||
|
h('div', {
|
||||||
|
innerHTML: '<div><p>名称：' + row.licenseName + '</p></div>',
|
||||||
|
}),
|
||||||
|
h('div', {
|
||||||
|
innerHTML: '<div><p>APPID：' + row.appId + '</p></div>',
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
width: 180,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '心跳',
|
||||||
|
key: 'heartbeatTime',
|
||||||
|
width: 100,
|
||||||
|
render: (rows, _) => {
|
||||||
|
return formatBefore(new Date(rows.heartbeatTime * 1000));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '登录时间',
|
||||||
|
key: 'firstTime',
|
||||||
|
width: 150,
|
||||||
|
render: (rows, _) => {
|
||||||
|
return timestampToTime(rows.firstTime);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -0,0 +1,224 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="n-layout-page-header">
|
||||||
|
<n-card :bordered="false" title="在线服务">
|
||||||
|
在这里，您可以方便地查看、维护和管理系统中的在线服务和授权许可证
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<n-card :bordered="false" class="proCard">
|
||||||
|
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
|
||||||
|
<template #statusSlot="{ model, field }">
|
||||||
|
<n-input v-model:value="model[field]" />
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
|
|
||||||
|
<BasicTable
|
||||||
|
:columns="columns"
|
||||||
|
:request="loadDataTable"
|
||||||
|
:row-key="(row) => row.id"
|
||||||
|
ref="actionRef"
|
||||||
|
:actionColumn="actionColumn"
|
||||||
|
:scroll-x="scrollX"
|
||||||
|
:resizeHeightOffset="-10000"
|
||||||
|
>
|
||||||
|
<template #tableTitle>
|
||||||
|
<n-button type="info" @click="openGroupModal">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<TrademarkOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
许可证列表
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</n-card>
|
||||||
|
|
||||||
|
<GroupModal ref="GroupModalRef" />
|
||||||
|
|
||||||
|
<Edit
|
||||||
|
@reload-table="reloadTable"
|
||||||
|
@update-show-modal="updateShowModal"
|
||||||
|
:showModal="showModal"
|
||||||
|
:formParams="formEditParams"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, h, onMounted, reactive, ref } from 'vue';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { BasicTable, TableAction } from '@/components/Table';
|
||||||
|
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
|
||||||
|
import { NetOnlineList, NetOffline } from '@/api/monitor/monitor';
|
||||||
|
import { columns } from './columns';
|
||||||
|
import { TrademarkOutlined } from '@vicons/antd';
|
||||||
|
import GroupModal from './modal/modal.vue';
|
||||||
|
import Edit from '@/views/monitor/netconn/modal/edit.vue';
|
||||||
|
import { loadOptions, newState, State } from '@/views/monitor/netconn/modal/model';
|
||||||
|
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||||
|
import { adaTableScrollX } from '@/utils/hotgo';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
|
||||||
|
const message = useMessage();
|
||||||
|
const dialog = useDialog();
|
||||||
|
const dict = useDictStore();
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formEditParams = ref<State>(newState(null));
|
||||||
|
const actionRef = ref();
|
||||||
|
const formParams = ref({});
|
||||||
|
|
||||||
|
const actionColumn = reactive({
|
||||||
|
width: 180,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
render(record) {
|
||||||
|
return h(TableAction as any, {
|
||||||
|
style: 'button',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '编辑许可证',
|
||||||
|
onClick: handleEditLicense.bind(null, record),
|
||||||
|
type: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '下线',
|
||||||
|
onClick: handleDelete.bind(null, record),
|
||||||
|
type: 'error',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const scrollX = computed(() => {
|
||||||
|
return adaTableScrollX(columns, actionColumn.width);
|
||||||
|
});
|
||||||
|
|
||||||
|
const schemas: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'name',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '应用名称',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入应用名称',
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: [{ trigger: ['blur'] }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'group',
|
||||||
|
component: 'NSelect',
|
||||||
|
label: '授权分组',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择授权分组',
|
||||||
|
options: dict.getOption('ServerLicenseGroupOptions'),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'appId',
|
||||||
|
component: 'NInput',
|
||||||
|
label: 'APPID',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入许可证APPID',
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: [{ trigger: ['blur'] }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'addr',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '登录地址',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入登录地址',
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: [{ trigger: ['blur'] }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'firstTime',
|
||||||
|
component: 'NDatePicker',
|
||||||
|
label: '登录时间',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
clearable: true,
|
||||||
|
shortcuts: defRangeShortcuts(),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const [register, {}] = useForm({
|
||||||
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||||
|
labelWidth: 80,
|
||||||
|
schemas,
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '确认是否要下线该服务？下线操作将中断当前连接，但服务在下线后仍可重新连接',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
NetOffline(record).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadDataTable = async (res) => {
|
||||||
|
return await NetOnlineList({ ...formParams.value, ...res });
|
||||||
|
};
|
||||||
|
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSubmit(values: Recordable) {
|
||||||
|
formParams.value = values;
|
||||||
|
reloadTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleReset(_values: Recordable) {
|
||||||
|
formParams.value = {};
|
||||||
|
reloadTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
const GroupModalRef = ref();
|
||||||
|
function openGroupModal() {
|
||||||
|
const { openDrawer } = GroupModalRef.value;
|
||||||
|
openDrawer();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEditLicense(record: Recordable) {
|
||||||
|
formEditParams.value = newState({ id: record.licenseId } as State);
|
||||||
|
updateShowModal(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateShowModal(value) {
|
||||||
|
showModal.value = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
loadOptions();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,198 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-spin :show="loading" description="请稍候...">
|
||||||
|
<n-modal
|
||||||
|
v-model:show="isShowModal"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
:title="params?.id > 0 ? '编辑许可证 #' + params?.id : '添加许可证'"
|
||||||
|
:style="{
|
||||||
|
width: dialogWidth,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<n-alert :show-icon="false" type="info" v-if="params?.id > 0">
|
||||||
|
注意：如果服务在线，为了确保更新后的许可证信息生效，服务需要重新登录
|
||||||
|
</n-alert>
|
||||||
|
<n-form
|
||||||
|
:model="params"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="100"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-grid x-gap="24" :cols="2">
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="分组" path="group">
|
||||||
|
<n-select
|
||||||
|
v-model:value="params.group"
|
||||||
|
:options="dict.getOptionUnRef('ServerLicenseGroupOptions')"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="许可名称" path="name">
|
||||||
|
<n-input placeholder="请输入许可名称" v-model:value="params.name" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-grid x-gap="24" :cols="2">
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="应用ID" path="appid">
|
||||||
|
<n-input placeholder="请输入应用ID" v-model:value="params.appid" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="应用秘钥" path="secretKey">
|
||||||
|
<n-input
|
||||||
|
placeholder="请输入应用秘钥"
|
||||||
|
v-model:value="params.secretKey"
|
||||||
|
type="password"
|
||||||
|
show-password-on="click"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-grid x-gap="24" :cols="2">
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="在线限制" path="onlineLimit">
|
||||||
|
<n-input-number
|
||||||
|
placeholder="请输入在线数量限制"
|
||||||
|
v-model:value="params.onlineLimit"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="授权有效期" path="endAt">
|
||||||
|
<DatePicker v-model:formValue="params.endAt" type="datetime" style="width: 100%" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-form-item label="IP白名单" path="allowedIps">
|
||||||
|
<n-input
|
||||||
|
type="textarea"
|
||||||
|
placeholder="*代表所有，支持IP段，多个IP用,隔开。只有允许的IP才能连接到tcp服务"
|
||||||
|
v-model:value="params.allowedIps"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="授权状态" path="status">
|
||||||
|
<n-select
|
||||||
|
v-model:value="params.status"
|
||||||
|
:options="dict.getOptionUnRef('sys_normal_disable')"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="备注" path="remark">
|
||||||
|
<n-input type="textarea" placeholder="备注" v-model:value="params.remark" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="closeForm">取消</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</n-spin>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed, watch } from 'vue';
|
||||||
|
import { Edit, View } from '@/api/serveLicense';
|
||||||
|
import DatePicker from '@/components/DatePicker/datePicker.vue';
|
||||||
|
import { rules, State, newState } from './model';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { adaModalWidth } from '@/utils/hotgo';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
|
||||||
|
const emit = defineEmits(['reloadTable', 'updateShowModal']);
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
showModal: boolean;
|
||||||
|
formParams?: State;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
showModal: false,
|
||||||
|
formParams: () => {
|
||||||
|
return newState(null);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const isShowModal = computed({
|
||||||
|
get: () => {
|
||||||
|
return props.showModal;
|
||||||
|
},
|
||||||
|
set: (value) => {
|
||||||
|
emit('updateShowModal', value);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const params = ref<State>(props.formParams);
|
||||||
|
const dict = useDictStore();
|
||||||
|
const message = useMessage();
|
||||||
|
const formRef = ref<any>({});
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const dialogWidth = computed(() => {
|
||||||
|
return adaModalWidth();
|
||||||
|
});
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
Edit(params.value).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
isShowModal.value = false;
|
||||||
|
emit('reloadTable');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeForm() {
|
||||||
|
isShowModal.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadForm(value) {
|
||||||
|
console.log('value:' + JSON.stringify(value));
|
||||||
|
// 新增
|
||||||
|
if (value.id < 1) {
|
||||||
|
params.value = newState(value);
|
||||||
|
loading.value = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
// 编辑
|
||||||
|
View({ id: value.id })
|
||||||
|
.then((res) => {
|
||||||
|
params.value = res;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.formParams,
|
||||||
|
(value) => {
|
||||||
|
loadForm(value);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less"></style>
|
||||||
@@ -0,0 +1,359 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-card :bordered="false" class="proCard">
|
||||||
|
<BasicForm
|
||||||
|
@register="register"
|
||||||
|
@submit="reloadTable"
|
||||||
|
@reset="reloadTable"
|
||||||
|
@keyup.enter="reloadTable"
|
||||||
|
ref="searchFormRef"
|
||||||
|
>
|
||||||
|
<template #statusSlot="{ model, field }">
|
||||||
|
<n-input v-model:value="model[field]" />
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
|
|
||||||
|
<BasicTable
|
||||||
|
:openChecked="true"
|
||||||
|
:columns="columns"
|
||||||
|
:request="loadDataTable"
|
||||||
|
:row-key="(row) => row.id"
|
||||||
|
ref="actionRef"
|
||||||
|
:actionColumn="actionColumn"
|
||||||
|
:checked-row-keys="checkedIds"
|
||||||
|
@update:checked-row-keys="onCheckedRow"
|
||||||
|
:scroll-x="scrollX"
|
||||||
|
:resizeHeightOffset="-10000"
|
||||||
|
>
|
||||||
|
<template #tableTitle>
|
||||||
|
<n-button
|
||||||
|
type="primary"
|
||||||
|
@click="addTable"
|
||||||
|
class="min-left-space"
|
||||||
|
v-if="hasPermission(['/serveLicense/edit'])"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
添加许可证
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
type="error"
|
||||||
|
@click="handleBatchDelete"
|
||||||
|
:disabled="batchDeleteDisabled"
|
||||||
|
class="min-left-space"
|
||||||
|
v-if="hasPermission(['/serveLicense/delete'])"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<DeleteOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
批量删除
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
type="primary"
|
||||||
|
@click="handleExport"
|
||||||
|
class="min-left-space"
|
||||||
|
v-if="hasPermission(['/serveLicense/delete'])"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<ExportOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
导出
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</n-card>
|
||||||
|
<Edit
|
||||||
|
@reload-table="reloadTable"
|
||||||
|
@update-show-modal="updateShowModal"
|
||||||
|
:showModal="showModal"
|
||||||
|
:formParams="formParams"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showRoutesModal"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
:title="'分配路由 #' + formParams?.id"
|
||||||
|
:style="{
|
||||||
|
width: dialogWidth,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<n-alert :show-icon="false" type="info">
|
||||||
|
如果许可证未分配任何路由，则客户端可以访问所有服务路由接口
|
||||||
|
</n-alert>
|
||||||
|
<n-form
|
||||||
|
:model="formParams"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="100"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-transfer
|
||||||
|
ref="transfer"
|
||||||
|
v-model:value="formParams.routes"
|
||||||
|
virtual-scroll
|
||||||
|
:options="routesOptions"
|
||||||
|
source-filterable
|
||||||
|
:render-source-label="renderLabel"
|
||||||
|
:render-target-label="renderLabel"
|
||||||
|
/>
|
||||||
|
</n-form>
|
||||||
|
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="closeForm">取消</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, h, onMounted, reactive, ref } from 'vue';
|
||||||
|
import { useDialog, useMessage, NTag } from 'naive-ui';
|
||||||
|
import { BasicTable, TableAction } from '@/components/Table';
|
||||||
|
import { BasicForm, useForm } from '@/components/Form/index';
|
||||||
|
import { usePermission } from '@/hooks/web/usePermission';
|
||||||
|
import { Delete, Export, List, Status, AssignRouter } from '@/api/serveLicense';
|
||||||
|
import { columns, newState, loadOptions, schemas, State } from './model';
|
||||||
|
import { DeleteOutlined, ExportOutlined, PlusOutlined } from '@vicons/antd';
|
||||||
|
import { adaModalWidth, adaTableScrollX } from '@/utils/hotgo';
|
||||||
|
import Edit from './edit.vue';
|
||||||
|
import { NetOption } from '@/api/monitor/monitor';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
const { hasPermission } = usePermission();
|
||||||
|
const actionRef = ref();
|
||||||
|
const dialog = useDialog();
|
||||||
|
const message = useMessage();
|
||||||
|
const searchFormRef = ref<any>({});
|
||||||
|
const batchDeleteDisabled = ref(true);
|
||||||
|
const checkedIds = ref([]);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formParams = ref<State>(newState(null));
|
||||||
|
const showRoutesModal = ref(false);
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const formRef = ref<any>({});
|
||||||
|
const routesOptions = ref([]);
|
||||||
|
const dialogWidth = computed(() => {
|
||||||
|
return adaModalWidth();
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionColumn = reactive({
|
||||||
|
width: 300,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
render(record) {
|
||||||
|
return h(TableAction as any, {
|
||||||
|
style: 'button',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '分配路由',
|
||||||
|
onClick: handleAssignRouter.bind(null, record),
|
||||||
|
auth: ['/serveLicense/assignRouter'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
onClick: handleEdit.bind(null, record),
|
||||||
|
auth: ['/serveLicense/edit'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '禁用',
|
||||||
|
onClick: handleStatus.bind(null, record, 2),
|
||||||
|
ifShow: () => {
|
||||||
|
return record.status === 1;
|
||||||
|
},
|
||||||
|
auth: ['/serveLicense/status'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '启用',
|
||||||
|
onClick: handleStatus.bind(null, record, 1),
|
||||||
|
ifShow: () => {
|
||||||
|
return record.status === 2;
|
||||||
|
},
|
||||||
|
auth: ['/serveLicense/status'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
onClick: handleDelete.bind(null, record),
|
||||||
|
auth: ['/serveLicense/delete'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const scrollX = computed(() => {
|
||||||
|
return adaTableScrollX(columns, actionColumn.width);
|
||||||
|
});
|
||||||
|
|
||||||
|
const [register, {}] = useForm({
|
||||||
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||||
|
labelWidth: 80,
|
||||||
|
schemas,
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadDataTable = async (res) => {
|
||||||
|
return await List({ ...searchFormRef.value?.formModel, ...res });
|
||||||
|
};
|
||||||
|
|
||||||
|
function addTable() {
|
||||||
|
showModal.value = true;
|
||||||
|
formParams.value = newState(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateShowModal(value) {
|
||||||
|
showModal.value = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onCheckedRow(rowKeys) {
|
||||||
|
batchDeleteDisabled.value = rowKeys.length <= 0;
|
||||||
|
checkedIds.value = rowKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit(record: Recordable) {
|
||||||
|
showModal.value = true;
|
||||||
|
formParams.value = newState(record as State);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete(record).then((_res) => {
|
||||||
|
message.success('删除成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleBatchDelete() {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要批量删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete({ id: checkedIds.value }).then((_res) => {
|
||||||
|
batchDeleteDisabled.value = true;
|
||||||
|
checkedIds.value = [];
|
||||||
|
message.success('删除成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleExport() {
|
||||||
|
message.loading('正在导出列表...', { duration: 1200 });
|
||||||
|
Export(searchFormRef.value?.formModel);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleStatus(record: Recordable, status: number) {
|
||||||
|
Status({ id: record.id, status: status }).then((_res) => {
|
||||||
|
message.success('设为' + dict.getLabel('sys_normal_disable', status) + '成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
AssignRouter(formParams.value).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
showRoutesModal.value = false;
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeForm() {
|
||||||
|
showRoutesModal.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAssignRouter(record: Recordable) {
|
||||||
|
showRoutesModal.value = true;
|
||||||
|
formParams.value = newState(record as State);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderLabel({ option }) {
|
||||||
|
return h(
|
||||||
|
'div',
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
margin: '6px 0',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => [
|
||||||
|
h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: option.isRPC ? 'success' : 'info',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => (option.isRPC ? 'RPC' : 'TCP'),
|
||||||
|
}
|
||||||
|
),
|
||||||
|
h(
|
||||||
|
'div',
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
marginLeft: '6px',
|
||||||
|
alignSelf: 'center',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ default: () => option.label }
|
||||||
|
),
|
||||||
|
],
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadRoutesOptions() {
|
||||||
|
NetOption().then((res) => {
|
||||||
|
routesOptions.value = res.routes;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
loadOptions();
|
||||||
|
loadRoutesOptions();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
style="width: 80%; height: 90%; min-height: 820px"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
:title="title"
|
||||||
|
>
|
||||||
|
<Index />
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import Index from './index.vue';
|
||||||
|
|
||||||
|
const showModal = ref(false);
|
||||||
|
const title = ref('许可证列表');
|
||||||
|
|
||||||
|
function openDrawer() {
|
||||||
|
showModal.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ openDrawer });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@@ -0,0 +1,254 @@
|
|||||||
|
import { h, ref } from 'vue';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import { FormSchema } from '@/components/Form';
|
||||||
|
import { defRangeShortcuts, formatBefore } from '@/utils/dateUtil';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
import { renderOptionTag } from '@/utils';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
|
||||||
|
export interface State {
|
||||||
|
id: number;
|
||||||
|
group: string;
|
||||||
|
name: string;
|
||||||
|
appid: string;
|
||||||
|
secretKey: string;
|
||||||
|
remoteAddr: string;
|
||||||
|
onlineLimit: number;
|
||||||
|
loginTimes: number;
|
||||||
|
lastLoginAt: string;
|
||||||
|
lastActiveAt: string;
|
||||||
|
routes: any;
|
||||||
|
allowedIps: string;
|
||||||
|
endAt: string;
|
||||||
|
remark: string;
|
||||||
|
status: number;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const defaultState = {
|
||||||
|
id: 0,
|
||||||
|
group: '',
|
||||||
|
name: '',
|
||||||
|
appid: '',
|
||||||
|
secretKey: '',
|
||||||
|
remoteAddr: '',
|
||||||
|
onlineLimit: 1,
|
||||||
|
loginTimes: 0,
|
||||||
|
lastLoginAt: '',
|
||||||
|
lastActiveAt: '',
|
||||||
|
routes: null,
|
||||||
|
allowedIps: '',
|
||||||
|
endAt: '',
|
||||||
|
remark: '',
|
||||||
|
status: 1,
|
||||||
|
createdAt: '',
|
||||||
|
updatedAt: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function newState(state: State | null): State {
|
||||||
|
if (state !== null) {
|
||||||
|
return cloneDeep(state);
|
||||||
|
}
|
||||||
|
return cloneDeep(defaultState);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const rules = {
|
||||||
|
group: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
type: 'string',
|
||||||
|
message: '请输入分组',
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
type: 'string',
|
||||||
|
message: '请输入许可名称',
|
||||||
|
},
|
||||||
|
appid: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
type: 'string',
|
||||||
|
message: '请输入应用ID',
|
||||||
|
},
|
||||||
|
endAt: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input', 'focus'],
|
||||||
|
type: 'string',
|
||||||
|
message: '请输入授权结束时间',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const schemas = ref<FormSchema[]>([
|
||||||
|
{
|
||||||
|
field: 'id',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '许可ID',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入许可ID',
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'group',
|
||||||
|
component: 'NSelect',
|
||||||
|
label: '授权分组',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择授权分组',
|
||||||
|
options: dict.getOption('ServerLicenseGroupOptions'),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'name',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '许可名称',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入许可名称',
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'appid',
|
||||||
|
component: 'NInput',
|
||||||
|
label: 'APPID',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入APPID',
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
component: 'NSelect',
|
||||||
|
label: '状态',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择状态',
|
||||||
|
options: dict.getOption('sys_normal_disable'),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'endAt',
|
||||||
|
component: 'NDatePicker',
|
||||||
|
label: '过期时间',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
clearable: true,
|
||||||
|
shortcuts: defRangeShortcuts(),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createdAt',
|
||||||
|
component: 'NDatePicker',
|
||||||
|
label: '创建时间',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
clearable: true,
|
||||||
|
shortcuts: defRangeShortcuts(),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: '许可ID',
|
||||||
|
key: 'id',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '授权分组',
|
||||||
|
key: 'group',
|
||||||
|
width: 100,
|
||||||
|
render(row) {
|
||||||
|
return renderOptionTag('ServerLicenseGroupOptions', row.group);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '授权许可',
|
||||||
|
key: 'name',
|
||||||
|
render(row) {
|
||||||
|
return h('p', { id: 'app' }, [
|
||||||
|
h('div', {
|
||||||
|
innerHTML: '<div><p>名称：' + row.name + '</p></div>',
|
||||||
|
}),
|
||||||
|
h('div', {
|
||||||
|
innerHTML: '<div><p>APPID：' + row.appid + '</p></div>',
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
width: 180,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '在线',
|
||||||
|
key: 'online',
|
||||||
|
render(row) {
|
||||||
|
return row.online + ' / ' + row.onlineLimit;
|
||||||
|
},
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '授权有效期',
|
||||||
|
key: 'endAt',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
key: 'status',
|
||||||
|
width: 100,
|
||||||
|
render(row) {
|
||||||
|
return renderOptionTag('sys_normal_disable', row.status);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '最后连接',
|
||||||
|
key: 'remoteAddr',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '最近登录 / 心跳',
|
||||||
|
key: 'name',
|
||||||
|
render(row) {
|
||||||
|
if (row.lastLoginAt === null) {
|
||||||
|
return '从未登录';
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
formatBefore(new Date(row.lastLoginAt)) + ' / ' + formatBefore(new Date(row.lastActiveAt))
|
||||||
|
);
|
||||||
|
},
|
||||||
|
width: 180,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '累计登录',
|
||||||
|
key: 'loginTimes',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'createdAt',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function loadOptions() {
|
||||||
|
dict.loadOptions(['sys_normal_disable', 'ServerLicenseGroupOptions']);
|
||||||
|
}
|
||||||
@@ -0,0 +1,122 @@
|
|||||||
|
import { h } from 'vue';
|
||||||
|
import { NAvatar, NTag } from 'naive-ui';
|
||||||
|
import { timestampToTime, formatBefore } from '@/utils/dateUtil';
|
||||||
|
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: '会话编号',
|
||||||
|
key: 'id',
|
||||||
|
width: 280,
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: 'info',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => row.id,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '登录应用',
|
||||||
|
key: 'app',
|
||||||
|
width: 80,
|
||||||
|
render(row) {
|
||||||
|
return row.app;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户ID',
|
||||||
|
key: 'userId',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户名',
|
||||||
|
key: 'username',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '头像',
|
||||||
|
key: 'avatar',
|
||||||
|
width: 80,
|
||||||
|
render(row) {
|
||||||
|
if (row.avatar !== '') {
|
||||||
|
return h(NAvatar, {
|
||||||
|
circle: true,
|
||||||
|
size: 'small',
|
||||||
|
src: row.avatar,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return h(
|
||||||
|
NAvatar,
|
||||||
|
{
|
||||||
|
circle: true,
|
||||||
|
size: 'small',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => row.username.substring(0, 2),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '登录IP',
|
||||||
|
key: 'ip',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title: 'IP地区',
|
||||||
|
// key: 'region',
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
title: '浏览器',
|
||||||
|
key: 'browser',
|
||||||
|
width: 200,
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: 'success',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => row.browser,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作系统',
|
||||||
|
key: 'os',
|
||||||
|
width: 150,
|
||||||
|
render(row) {
|
||||||
|
return row.os;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '最后活跃',
|
||||||
|
key: 'heartbeatTime',
|
||||||
|
width: 80,
|
||||||
|
render: (rows, _) => {
|
||||||
|
return formatBefore(new Date(rows.heartbeatTime * 1000));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '登录时间',
|
||||||
|
key: 'firstTime',
|
||||||
|
width: 220,
|
||||||
|
render: (rows, _) => {
|
||||||
|
return timestampToTime(rows.firstTime);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -0,0 +1,153 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-card :bordered="false" class="proCard" title="在线用户">
|
||||||
|
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
|
||||||
|
<template #statusSlot="{ model, field }">
|
||||||
|
<n-input v-model:value="model[field]" />
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
|
|
||||||
|
<BasicTable
|
||||||
|
:columns="columns"
|
||||||
|
:request="loadDataTable"
|
||||||
|
:row-key="(row) => row.id"
|
||||||
|
ref="actionRef"
|
||||||
|
:actionColumn="actionColumn"
|
||||||
|
:scroll-x="scrollX"
|
||||||
|
:resizeHeightOffset="-10000"
|
||||||
|
/>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, h, reactive, ref } from 'vue';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { BasicTable, TableAction } from '@/components/Table';
|
||||||
|
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
|
||||||
|
import { OnlineList, Offline } from '@/api/monitor/monitor';
|
||||||
|
import { columns } from './columns';
|
||||||
|
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||||
|
import { adaTableScrollX } from '@/utils/hotgo';
|
||||||
|
|
||||||
|
const schemas: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'userId',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '用户ID',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入用户ID',
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: [{ trigger: ['blur'] }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'username',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '用户名',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入用户名',
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: [{ trigger: ['blur'] }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'ip',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '登录IP',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入登录IP',
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: [{ trigger: ['blur'] }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'firstTime',
|
||||||
|
component: 'NDatePicker',
|
||||||
|
label: '登录时间',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
clearable: true,
|
||||||
|
shortcuts: defRangeShortcuts(),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const dialog = useDialog();
|
||||||
|
const message = useMessage();
|
||||||
|
const actionRef = ref();
|
||||||
|
const formParams = ref({});
|
||||||
|
|
||||||
|
const actionColumn = reactive({
|
||||||
|
width: 120,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
render(record) {
|
||||||
|
return h(TableAction as any, {
|
||||||
|
style: 'button',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '强制退出',
|
||||||
|
onClick: handleDelete.bind(null, record),
|
||||||
|
type: 'error',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const scrollX = computed(() => {
|
||||||
|
return adaTableScrollX(columns, actionColumn.width);
|
||||||
|
});
|
||||||
|
|
||||||
|
const [register, {}] = useForm({
|
||||||
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||||
|
labelWidth: 80,
|
||||||
|
schemas,
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要强制退出该用户？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Offline(record).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadDataTable = async (res) => {
|
||||||
|
return await OnlineList({ ...formParams.value, ...res });
|
||||||
|
};
|
||||||
|
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSubmit(values: Recordable) {
|
||||||
|
formParams.value = values;
|
||||||
|
reloadTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleReset(_values: Recordable) {
|
||||||
|
formParams.value = {};
|
||||||
|
reloadTable();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,232 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="n-layout-page-header">
|
||||||
|
<n-card :bordered="false" title="服务日志">
|
||||||
|
在这里，开发者可以快速定位重要的运行时日志，以便更方便地排查系统异常和进行日常运维
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
<n-card :bordered="false" class="proCard">
|
||||||
|
<BasicForm
|
||||||
|
@register="register"
|
||||||
|
@submit="reloadTable"
|
||||||
|
@reset="reloadTable"
|
||||||
|
@keyup.enter="reloadTable"
|
||||||
|
ref="searchFormRef"
|
||||||
|
>
|
||||||
|
<template #statusSlot="{ model, field }">
|
||||||
|
<n-input v-model:value="model[field]" />
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
|
|
||||||
|
<BasicTable
|
||||||
|
:openChecked="true"
|
||||||
|
:columns="columns"
|
||||||
|
:request="loadDataTable"
|
||||||
|
:row-key="(row) => row.id"
|
||||||
|
ref="actionRef"
|
||||||
|
:actionColumn="actionColumn"
|
||||||
|
:checked-row-keys="checkedIds"
|
||||||
|
@update:checked-row-keys="onCheckedRow"
|
||||||
|
:scroll-x="scrollX"
|
||||||
|
:resizeHeightOffset="-10000"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<template #tableTitle>
|
||||||
|
<n-button
|
||||||
|
type="error"
|
||||||
|
@click="handleBatchDelete"
|
||||||
|
:disabled="batchDeleteDisabled"
|
||||||
|
class="min-left-space"
|
||||||
|
v-if="hasPermission(['/serveLog/delete'])"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<DeleteOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
批量删除
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
type="primary"
|
||||||
|
@click="handleExport"
|
||||||
|
class="min-left-space"
|
||||||
|
v-if="hasPermission(['/serveLog/delete'])"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<ExportOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
导出
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
|
||||||
|
<n-modal v-model:show="showModal" :show-icon="false" preset="dialog" style="width: 920px">
|
||||||
|
<n-card
|
||||||
|
:bordered="false"
|
||||||
|
title="日志内容"
|
||||||
|
class="proCard mt-4"
|
||||||
|
size="small"
|
||||||
|
:segmented="{ content: true }"
|
||||||
|
>
|
||||||
|
<n-alert type="error" :show-icon="false">
|
||||||
|
{{ preview?.content }}
|
||||||
|
</n-alert>
|
||||||
|
</n-card>
|
||||||
|
|
||||||
|
<n-card
|
||||||
|
:bordered="false"
|
||||||
|
class="proCard mt-4"
|
||||||
|
size="small"
|
||||||
|
:segmented="{ content: true }"
|
||||||
|
title="堆栈打印"
|
||||||
|
>
|
||||||
|
<JsonViewer
|
||||||
|
:value="JSON.parse(preview?.stack)"
|
||||||
|
:expand-depth="10"
|
||||||
|
sort
|
||||||
|
style="width: 100%; min-width: 3.125rem"
|
||||||
|
/>
|
||||||
|
</n-card>
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="() => (showModal = false)">关闭</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, h, onMounted, reactive, ref } from 'vue';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { BasicTable, TableAction } from '@/components/Table';
|
||||||
|
import { BasicForm, useForm } from '@/components/Form/index';
|
||||||
|
import { usePermission } from '@/hooks/web/usePermission';
|
||||||
|
import { List, Export, Delete } from '@/api/serveLog';
|
||||||
|
import { columns, schemas } from './model';
|
||||||
|
import { ExportOutlined, DeleteOutlined } from '@vicons/antd';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { JsonViewer } from 'vue3-json-viewer';
|
||||||
|
import 'vue3-json-viewer/dist/vue3-json-viewer.css';
|
||||||
|
import { adaTableScrollX } from '@/utils/hotgo';
|
||||||
|
import { loadOptions } from './model';
|
||||||
|
|
||||||
|
const { hasPermission } = usePermission();
|
||||||
|
const router = useRouter();
|
||||||
|
const actionRef = ref();
|
||||||
|
const dialog = useDialog();
|
||||||
|
const message = useMessage();
|
||||||
|
const searchFormRef = ref<any>({});
|
||||||
|
const batchDeleteDisabled = ref(true);
|
||||||
|
const checkedIds = ref([]);
|
||||||
|
const showModal = ref(false);
|
||||||
|
|
||||||
|
const actionColumn = reactive({
|
||||||
|
width: 220,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
render(record) {
|
||||||
|
return h(TableAction as any, {
|
||||||
|
style: 'button',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '堆栈',
|
||||||
|
onClick: handleStack.bind(null, record),
|
||||||
|
type: 'primary',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
onClick: handleDelete.bind(null, record),
|
||||||
|
auth: ['/serveLog/delete'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '访问日志',
|
||||||
|
onClick: handleView.bind(null, record),
|
||||||
|
ifShow: record.sysLogId > 0,
|
||||||
|
type: 'default',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const scrollX = computed(() => {
|
||||||
|
return adaTableScrollX(columns, actionColumn.width);
|
||||||
|
});
|
||||||
|
|
||||||
|
const [register, {}] = useForm({
|
||||||
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||||
|
labelWidth: 80,
|
||||||
|
schemas,
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadDataTable = async (res) => {
|
||||||
|
return await List({ ...searchFormRef.value?.formModel, ...res });
|
||||||
|
};
|
||||||
|
|
||||||
|
function onCheckedRow(rowKeys) {
|
||||||
|
batchDeleteDisabled.value = rowKeys.length <= 0;
|
||||||
|
checkedIds.value = rowKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
const preview = ref<Recordable>();
|
||||||
|
function handleStack(record: Recordable) {
|
||||||
|
showModal.value = true;
|
||||||
|
preview.value = record;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleView(record: Recordable) {
|
||||||
|
router.push({ name: 'log_view', params: { id: record.sysLogId } });
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete(record).then((_res) => {
|
||||||
|
message.success('删除成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleBatchDelete() {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要批量删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete({ id: checkedIds.value }).then((_res) => {
|
||||||
|
batchDeleteDisabled.value = true;
|
||||||
|
checkedIds.value = [];
|
||||||
|
message.success('删除成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleExport() {
|
||||||
|
message.loading('正在导出列表...', { duration: 1200 });
|
||||||
|
Export(searchFormRef.value?.formModel);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
loadOptions();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,137 @@
|
|||||||
|
import { h, ref } from 'vue';
|
||||||
|
import { NTag, NButton } from 'naive-ui';
|
||||||
|
import { FormSchema } from '@/components/Form';
|
||||||
|
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||||
|
import { format } from 'date-fns';
|
||||||
|
import { renderIcon, renderOptionTag, renderTooltip } from '@/utils';
|
||||||
|
import { HelpCircleOutline } from '@vicons/ionicons5';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
|
||||||
|
export const schemas = ref<FormSchema[]>([
|
||||||
|
{
|
||||||
|
field: 'traceId',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '链路ID',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入链路ID',
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'content',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '日志内容',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入日志内容关键词',
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'levelFormat',
|
||||||
|
component: 'NSelect',
|
||||||
|
label: '日志级别',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择日志级别',
|
||||||
|
options: dict.getOption('sys_log_type'),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createdAt',
|
||||||
|
component: 'NDatePicker',
|
||||||
|
label: '创建时间',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
clearable: true,
|
||||||
|
shortcuts: defRangeShortcuts(),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: '日志ID',
|
||||||
|
key: 'id',
|
||||||
|
width: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title(_column) {
|
||||||
|
return renderTooltip(
|
||||||
|
h(
|
||||||
|
NButton,
|
||||||
|
{
|
||||||
|
strong: true,
|
||||||
|
size: 'small',
|
||||||
|
text: true,
|
||||||
|
iconPlacement: 'right',
|
||||||
|
},
|
||||||
|
{ default: () => '链路ID', icon: renderIcon(HelpCircleOutline) }
|
||||||
|
),
|
||||||
|
'hotgo默认支持链路追踪，如果是web请求产生的日志则还可以关联对应的访问日志'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
key: 'traceId',
|
||||||
|
width: 280,
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: 'default',
|
||||||
|
bordered: false,
|
||||||
|
checkable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => row.traceId,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '日志级别',
|
||||||
|
key: 'levelFormat',
|
||||||
|
render(row) {
|
||||||
|
return renderOptionTag('sys_log_type', row.levelFormat);
|
||||||
|
},
|
||||||
|
width: 120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '日志内容',
|
||||||
|
key: 'content',
|
||||||
|
width: 320,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '触发时间',
|
||||||
|
key: 'triggerNs',
|
||||||
|
width: 200,
|
||||||
|
render(row) {
|
||||||
|
if (row.triggerNs <= 0) {
|
||||||
|
return '-';
|
||||||
|
}
|
||||||
|
return format(new Date(row.triggerNs / 1000000), 'yyyy-MM-dd HH:mm:ss.SSS');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '记录时间',
|
||||||
|
key: 'createdAt',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function loadOptions() {
|
||||||
|
dict.loadOptions(['sys_normal_disable', 'sys_log_type']);
|
||||||
|
}
|
||||||
@@ -0,0 +1,98 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-card
|
||||||
|
:content-style="{ padding: '10px' }"
|
||||||
|
:header-style="{ padding: '5px' }"
|
||||||
|
:segmented="true"
|
||||||
|
>
|
||||||
|
<template #header>
|
||||||
|
<n-skeleton text v-if="loading" width="60%" />
|
||||||
|
<template v-else>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-sm text-bold">{{ dataModel.title }}</span>
|
||||||
|
<n-icon style="font-size: 26px">
|
||||||
|
<div v-if="dataModel.iconClass === 'HardwareChip'">
|
||||||
|
<HardwareChip />
|
||||||
|
</div>
|
||||||
|
<div v-else-if="dataModel.iconClass === 'AppsSharp'">
|
||||||
|
<AppsSharp />
|
||||||
|
</div>
|
||||||
|
<div v-else-if="dataModel.iconClass === 'Analytics'">
|
||||||
|
<Analytics />
|
||||||
|
</div>
|
||||||
|
<div v-else-if="dataModel.iconClass === 'PieChart'">
|
||||||
|
<PieChart />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
<Bookmark />
|
||||||
|
</div>
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<n-skeleton text v-if="loading" :repeat="6" />
|
||||||
|
<template v-else>
|
||||||
|
<div style="height: 130px" class="flex flex-col justify-between">
|
||||||
|
<div class="flex flex-col justify-center">
|
||||||
|
<span class="text-xxl">{{ dataModel.data }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-center flex-1">
|
||||||
|
<slot name="extra" :extra="dataModel.extra"></slot>
|
||||||
|
</div>
|
||||||
|
<div class="divide"></div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-sm text-grey">{{ dataModel.bottomTitle }}</span>
|
||||||
|
<span class="text-sm text-grey">{{ dataModel.totalSum }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { HardwareChip, Bookmark, AppsSharp, PieChart, Analytics } from '@vicons/ionicons5';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'DataItem',
|
||||||
|
components: {
|
||||||
|
Bookmark,
|
||||||
|
HardwareChip,
|
||||||
|
AppsSharp,
|
||||||
|
PieChart,
|
||||||
|
Analytics,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
dataModel: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => {
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
return {
|
||||||
|
Bookmark,
|
||||||
|
AppsSharp,
|
||||||
|
PieChart,
|
||||||
|
HardwareChip,
|
||||||
|
Analytics,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.divide {
|
||||||
|
margin: 10px 0;
|
||||||
|
border-bottom: 1px solid #f5f5f5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,262 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-card
|
||||||
|
:content-style="{ padding: '10px' }"
|
||||||
|
:header-style="{ padding: '10px' }"
|
||||||
|
:segmented="true"
|
||||||
|
>
|
||||||
|
<template #header>
|
||||||
|
<n-skeleton text style="width: 50%" v-if="loading" />
|
||||||
|
<template v-else>
|
||||||
|
<div class="text-sm"> 实时网卡流量（全部网卡）</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="chart-item-container">
|
||||||
|
<n-skeleton text v-if="loading" :repeat="10" />
|
||||||
|
<template v-else>
|
||||||
|
<n-grid responsive="screen" cols="1 s:2 m:4 l:4 xl:4 2xl:4" x-gap="5" y-gap="5">
|
||||||
|
<n-grid-item class="item-wrapper">
|
||||||
|
<n-card
|
||||||
|
:bordered="false"
|
||||||
|
:content-style="{ padding: '10px' }"
|
||||||
|
:header-style="{ padding: '5px' }"
|
||||||
|
:segmented="true"
|
||||||
|
>
|
||||||
|
<div class="text-number">{{ last?.up }} KB</div>
|
||||||
|
<div class="title-text">
|
||||||
|
<n-badge :value="1" dot color="rgb(58, 104, 255)" />
|
||||||
|
上行
|
||||||
|
</div>
|
||||||
|
</n-card>
|
||||||
|
</n-grid-item>
|
||||||
|
<n-grid-item class="item-wrapper">
|
||||||
|
<n-card
|
||||||
|
:bordered="false"
|
||||||
|
:content-style="{ padding: '10px' }"
|
||||||
|
:header-style="{ padding: '5px' }"
|
||||||
|
:segmented="true"
|
||||||
|
>
|
||||||
|
<div class="text-number"> {{ last?.down ?? 0 }} KB</div>
|
||||||
|
<div class="title-text">
|
||||||
|
<n-badge :value="1" dot color="rgb(241, 136, 136)" />
|
||||||
|
下行
|
||||||
|
</div>
|
||||||
|
</n-card>
|
||||||
|
</n-grid-item>
|
||||||
|
<n-grid-item class="item-wrapper">
|
||||||
|
<n-card
|
||||||
|
:bordered="false"
|
||||||
|
:content-style="{ padding: '10px' }"
|
||||||
|
:header-style="{ padding: '5px' }"
|
||||||
|
:segmented="true"
|
||||||
|
>
|
||||||
|
<div class="text-number">{{ last?.bytesSent ?? 0 }}</div>
|
||||||
|
<div class="title-text"> 总发送</div>
|
||||||
|
</n-card>
|
||||||
|
</n-grid-item>
|
||||||
|
<n-grid-item class="item-wrapper">
|
||||||
|
<n-card
|
||||||
|
:bordered="false"
|
||||||
|
:content-style="{ padding: '10px' }"
|
||||||
|
:header-style="{ padding: '5px' }"
|
||||||
|
:segmented="true"
|
||||||
|
>
|
||||||
|
<div class="text-number">{{ last?.bytesRecv ?? 0 }}</div>
|
||||||
|
<div class="title-text"> 总接收</div>
|
||||||
|
</n-card>
|
||||||
|
</n-grid-item>
|
||||||
|
</n-grid>
|
||||||
|
<div ref="fullYearSalesChart" class="chart-item"></div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import useEcharts from '@/hooks/useEcharts';
|
||||||
|
import { defineComponent, nextTick, onBeforeUnmount, ref, watch } from 'vue';
|
||||||
|
import { dispose, graphic } from 'echarts';
|
||||||
|
import { object } from 'vue-types';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'FullYearSalesChart',
|
||||||
|
props: {
|
||||||
|
dataModel: {
|
||||||
|
type: Array || object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => {
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
const last = ref<any>({
|
||||||
|
bytesSent: '0B',
|
||||||
|
bytesRecv: '0B',
|
||||||
|
down: '0',
|
||||||
|
up: '0',
|
||||||
|
});
|
||||||
|
const s = ref<any>([]);
|
||||||
|
const x = ref<any>([]);
|
||||||
|
const sName = ref('上行宽带');
|
||||||
|
const xName = ref('下行宽带');
|
||||||
|
const months = ref<any>([]);
|
||||||
|
const option = ref({
|
||||||
|
title: {
|
||||||
|
subtext: '单位：KB',
|
||||||
|
},
|
||||||
|
color: ['rgb(58,104,255)', 'rgb(241,136,136)'],
|
||||||
|
grid: {
|
||||||
|
top: '10%',
|
||||||
|
left: '2%',
|
||||||
|
right: '2%',
|
||||||
|
bottom: '5%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
// legend: {
|
||||||
|
// data: [sName.value, xName.value],
|
||||||
|
// },
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: months.value,
|
||||||
|
boundaryGap: false,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
name: sName.value,
|
||||||
|
stack: '总量',
|
||||||
|
data: s.value,
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(24, 160, 88, 0.5)',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
formatter(val: any) {
|
||||||
|
return val.data + 'KB';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(85, 193, 250, 0.1)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(156, 21, 214, 0.2)',
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: false,
|
||||||
|
name: xName.value,
|
||||||
|
stack: '总量',
|
||||||
|
data: x.value,
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'rgba(24, 160, 88, 0.5)',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
formatter(val: any) {
|
||||||
|
return val.data + 'KB';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(132, 248, 187, 0.1)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(51, 209, 125, 0.2)',
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
const fullYearSalesChart = ref<HTMLDivElement | null>(null);
|
||||||
|
watch(props, (newVal, _oldVal) => {
|
||||||
|
last.value = newVal.dataModel[newVal.dataModel.length - 1];
|
||||||
|
if (months.value.length < 10) {
|
||||||
|
for (let i = 0; i < newVal.dataModel?.length; i++) {
|
||||||
|
const v: any = newVal.dataModel[i];
|
||||||
|
s.value.push(v.up);
|
||||||
|
x.value.push(v.down);
|
||||||
|
months.value.push(v.time);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
s.value.shift();
|
||||||
|
s.value.push(last.value.up);
|
||||||
|
|
||||||
|
x.value.shift();
|
||||||
|
x.value.push(last.value.down);
|
||||||
|
|
||||||
|
months.value.shift();
|
||||||
|
months.value.push(last.value.time);
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
nextTick(() =>
|
||||||
|
useEcharts(fullYearSalesChart.value as HTMLDivElement).setOption(option.value)
|
||||||
|
);
|
||||||
|
}, 10);
|
||||||
|
});
|
||||||
|
const updateChart = () => {
|
||||||
|
useEcharts(fullYearSalesChart.value as HTMLDivElement).resize();
|
||||||
|
};
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (fullYearSalesChart.value !== null) {
|
||||||
|
dispose(fullYearSalesChart.value as HTMLDivElement);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
fullYearSalesChart,
|
||||||
|
updateChart,
|
||||||
|
last,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.chart-item-container {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.chart-item {
|
||||||
|
height: 345px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-green {
|
||||||
|
height: 108px;
|
||||||
|
background-color: rgba(0, 128, 0, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
height: 108px;
|
||||||
|
background-color: rgba(0, 128, 0, 0.24);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,130 @@
|
|||||||
|
<template>
|
||||||
|
<div ref="orderChartWrapper" style="height: 100%"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import useEcharts from '@/hooks/useEcharts';
|
||||||
|
import { defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||||
|
import { dispose, graphic } from 'echarts';
|
||||||
|
|
||||||
|
type DataItem = {
|
||||||
|
time: string;
|
||||||
|
avg: number;
|
||||||
|
ratio: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'LoadChart',
|
||||||
|
props: {
|
||||||
|
dataModel: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
const data = ref<any>([]);
|
||||||
|
const option = ref({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
x: '-5%',
|
||||||
|
y: 0,
|
||||||
|
x2: '-5%',
|
||||||
|
y2: 0,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
splitLine: { show: false },
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
splitLine: { show: false },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0,
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(128, 255, 165)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(1, 191, 236)',
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
const orderChartWrapper = ref();
|
||||||
|
|
||||||
|
function getWrapper(): HTMLElement {
|
||||||
|
return orderChartWrapper.value as HTMLElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
// 绘制图表
|
||||||
|
option.value.series.forEach((item) => {
|
||||||
|
item.data = data.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
handleResize();
|
||||||
|
|
||||||
|
useEcharts(getWrapper()).setOption(option.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 调整图表大小
|
||||||
|
const handleResize = () => {
|
||||||
|
useEcharts(getWrapper()).resize();
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(init);
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
dispose(getWrapper());
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(props, (newVal) => {
|
||||||
|
const newValues = newVal.dataModel.map((item: DataItem) => ({
|
||||||
|
name: 'CPU分钟负载比率',
|
||||||
|
value: [item.time, item.ratio],
|
||||||
|
}));
|
||||||
|
|
||||||
|
data.value.push(...newValues);
|
||||||
|
|
||||||
|
// 移除超过10个的最开头元素
|
||||||
|
if (data.value.length > 10) {
|
||||||
|
const removeCount = data.value.length - 10;
|
||||||
|
data.value.splice(0, removeCount);
|
||||||
|
}
|
||||||
|
|
||||||
|
useEcharts(getWrapper()).setOption(option.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
orderChartWrapper,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,270 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="main-container">
|
||||||
|
<n-spin :show="loading" description="正在从服务器查询信息...">
|
||||||
|
<n-grid responsive="screen" cols="1 s:2 m:4 l:4 xl:4 2xl:4" x-gap="5" y-gap="5">
|
||||||
|
<n-grid-item v-for="(item, index) of dataSource.head" :key="index" class="item-wrapper">
|
||||||
|
<DataItem :data-model="item" :loading="loading">
|
||||||
|
<template v-if="index === 0" #extra="{ extra }">
|
||||||
|
<div class="margin-top-lg">
|
||||||
|
<div> {{ extra.data }}</div>
|
||||||
|
<div class="margin-top-sm"> {{ extra.data1 }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="index === 1" #extra="{ extra }">
|
||||||
|
<div class="margin-top" style="position: relative">
|
||||||
|
<div> 已用内存：{{ extra.data }}</div>
|
||||||
|
<div class="margin-top-sm"> 剩余内存：{{ extra.data1 }}</div>
|
||||||
|
<div class="stack-avatar-wrapper"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="index === 2" #extra="{ extra }">
|
||||||
|
<n-progress type="line" :percentage="Number(extra.data)" />
|
||||||
|
</template>
|
||||||
|
<template v-else-if="index === 3" #extra>
|
||||||
|
<LoadChart ref="loadChartRef" :data-model="dataSource.load" />
|
||||||
|
</template>
|
||||||
|
</DataItem>
|
||||||
|
</n-grid-item>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-grid class="mt-2">
|
||||||
|
<n-grid-item :span="24">
|
||||||
|
<FullYearSalesChart
|
||||||
|
ref="fullYearSalesChartRef"
|
||||||
|
:data-model="dataSource.net"
|
||||||
|
:loading="loading"
|
||||||
|
/>
|
||||||
|
</n-grid-item>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-space vertical style="padding-top: 10px">
|
||||||
|
<n-card title="服务器信息">
|
||||||
|
<n-descriptions
|
||||||
|
label-placement="top"
|
||||||
|
bordered
|
||||||
|
cols="1 s:1 m:2 l:3 xl:4 2xl:4"
|
||||||
|
:label-style="{ 'font-weight': 'bold', 'font-size': '16px' }"
|
||||||
|
>
|
||||||
|
<n-descriptions-item label="服务器名称">
|
||||||
|
{{ dataRunInfo.hostname }}
|
||||||
|
</n-descriptions-item>
|
||||||
|
<n-descriptions-item label="操作系统"> {{ dataRunInfo.os }}</n-descriptions-item>
|
||||||
|
<n-descriptions-item label="服务器IP">
|
||||||
|
{{ dataRunInfo.intranet_ip }} /
|
||||||
|
{{ dataRunInfo.public_ip }}
|
||||||
|
</n-descriptions-item>
|
||||||
|
<n-descriptions-item label="系统架构"> {{ dataRunInfo.arch }}</n-descriptions-item>
|
||||||
|
</n-descriptions>
|
||||||
|
</n-card>
|
||||||
|
<n-card title="运行信息">
|
||||||
|
<n-descriptions
|
||||||
|
label-placement="top"
|
||||||
|
bordered
|
||||||
|
cols="1 s:1 m:2 l:3 xl:4 2xl:4"
|
||||||
|
:label-style="{ 'font-weight': 'bold', 'font-size': '16px' }"
|
||||||
|
>
|
||||||
|
<n-descriptions-item label="Go版本"> {{ dataRunInfo.version }}</n-descriptions-item>
|
||||||
|
|
||||||
|
<n-descriptions-item label="HotGo版本">
|
||||||
|
{{ dataRunInfo.hgVersion }}</n-descriptions-item
|
||||||
|
>
|
||||||
|
<n-descriptions-item label="启动时间">
|
||||||
|
{{ dataRunInfo.startTime }}</n-descriptions-item
|
||||||
|
>
|
||||||
|
<n-descriptions-item label="运行时长">
|
||||||
|
{{ formatBefore(new Date(dataRunInfo.startTime)) }}
|
||||||
|
</n-descriptions-item>
|
||||||
|
<n-descriptions-item label="运行路径"> {{ dataRunInfo.pwd }}</n-descriptions-item>
|
||||||
|
<n-descriptions-item label="goroutine数量">
|
||||||
|
{{ dataRunInfo.goroutine }}
|
||||||
|
</n-descriptions-item>
|
||||||
|
<n-descriptions-item label="运行内存"> {{ dataRunInfo.goMem }}</n-descriptions-item>
|
||||||
|
<n-descriptions-item label="磁盘占用"> {{ dataRunInfo.goSize }}</n-descriptions-item>
|
||||||
|
</n-descriptions>
|
||||||
|
</n-card>
|
||||||
|
</n-space>
|
||||||
|
</n-spin>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import DataItem from './components/DataItem.vue';
|
||||||
|
import LoadChart from './components/chart/LoadChart.vue';
|
||||||
|
import FullYearSalesChart from './components/chart/FullYearSalesChart.vue';
|
||||||
|
import { defineComponent, onMounted, ref, onUnmounted } from 'vue';
|
||||||
|
import { SocketEnum } from '@/enums/socketEnum';
|
||||||
|
import { addOnMessage, removeOnMessage, sendMsg, WebSocketMessage } from '@/utils/websocket';
|
||||||
|
import { formatBefore } from '@/utils/dateUtil';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Home',
|
||||||
|
components: {
|
||||||
|
DataItem,
|
||||||
|
LoadChart,
|
||||||
|
FullYearSalesChart,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const timer = ref(0);
|
||||||
|
const dataRunInfo = ref({
|
||||||
|
arch: '',
|
||||||
|
goMem: '0MB',
|
||||||
|
hgVersion: '',
|
||||||
|
goSize: '0MB',
|
||||||
|
goroutine: 0,
|
||||||
|
hostname: '',
|
||||||
|
intranet_ip: '127.0.0.1',
|
||||||
|
os: '',
|
||||||
|
public_ip: '0.0.0.0',
|
||||||
|
pwd: '/',
|
||||||
|
rootPath: '/',
|
||||||
|
runTime: 0,
|
||||||
|
startTime: '',
|
||||||
|
version: '',
|
||||||
|
});
|
||||||
|
const dataSource = ref({
|
||||||
|
head: [
|
||||||
|
{
|
||||||
|
title: 'CPU',
|
||||||
|
data: '0%',
|
||||||
|
bottomTitle: 'CPU数量',
|
||||||
|
totalSum: '',
|
||||||
|
iconClass: 'HardwareChip',
|
||||||
|
extra: {
|
||||||
|
data: '',
|
||||||
|
data1: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '内存',
|
||||||
|
data: '0%',
|
||||||
|
bottomTitle: '总内存',
|
||||||
|
totalSum: '0GB',
|
||||||
|
iconClass: 'AppsSharp',
|
||||||
|
extra: {
|
||||||
|
data: '0GB',
|
||||||
|
data1: '0GB',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '磁盘',
|
||||||
|
data: '已用 0GB',
|
||||||
|
bottomTitle: '总容量',
|
||||||
|
totalSum: '0GB',
|
||||||
|
iconClass: 'PieChart',
|
||||||
|
extra: {
|
||||||
|
data: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '负载',
|
||||||
|
data: '0%',
|
||||||
|
bottomTitle: '总进程数',
|
||||||
|
totalSum: '0个',
|
||||||
|
iconClass: 'Analytics',
|
||||||
|
extra: {
|
||||||
|
data: 80,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
load: {},
|
||||||
|
net: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
const collapse = true;
|
||||||
|
const message = useMessage();
|
||||||
|
const dialog = useDialog();
|
||||||
|
const loading = ref(true);
|
||||||
|
const loadChartRef = ref<InstanceType<typeof LoadChart>>();
|
||||||
|
const fullYearSalesChartRef = ref<InstanceType<typeof FullYearSalesChart>>();
|
||||||
|
|
||||||
|
// 运行信息
|
||||||
|
const onMessageAdminMonitorRunInfo = (res: WebSocketMessage) => {
|
||||||
|
loading.value = false;
|
||||||
|
if (res.code == SocketEnum.CodeErr) {
|
||||||
|
message.error('查询出错:' + res.event);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
dataRunInfo.value = res.data;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 服务器信息
|
||||||
|
const onMessageAdminMonitorTrends = (res: WebSocketMessage) => {
|
||||||
|
loading.value = false;
|
||||||
|
if (res.code == SocketEnum.CodeErr) {
|
||||||
|
message.error('查询出错:' + res.event);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
dataSource.value = res.data;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
addOnMessage(SocketEnum.EventAdminMonitorRunInfo, onMessageAdminMonitorRunInfo);
|
||||||
|
addOnMessage(SocketEnum.EventAdminMonitorTrends, onMessageAdminMonitorTrends);
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
sendMsg(SocketEnum.EventAdminMonitorTrends);
|
||||||
|
sendMsg(SocketEnum.EventAdminMonitorRunInfo);
|
||||||
|
|
||||||
|
timer.value = window.setInterval(function () {
|
||||||
|
sendMsg(SocketEnum.EventAdminMonitorTrends);
|
||||||
|
sendMsg(SocketEnum.EventAdminMonitorRunInfo);
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (loading.value) {
|
||||||
|
loading.value = false;
|
||||||
|
dialog.error({
|
||||||
|
title: '错误',
|
||||||
|
content: '连接超时，请刷新重试。如仍未解决请检查websocket连接是否正确！',
|
||||||
|
positiveText: '确定',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, 5000);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.clearInterval(timer.value);
|
||||||
|
removeOnMessage(SocketEnum.EventAdminMonitorTrends);
|
||||||
|
removeOnMessage(SocketEnum.EventAdminMonitorRunInfo);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
collapse,
|
||||||
|
loadChartRef,
|
||||||
|
fullYearSalesChartRef,
|
||||||
|
dataSource,
|
||||||
|
dataRunInfo,
|
||||||
|
formatBefore,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@media screen and (max-width: 992px) {
|
||||||
|
.item-wrapper {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-margin-tb {
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.light {
|
||||||
|
.chart-item {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stack-avatar-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
right: -2%;
|
||||||
|
top: 10%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,169 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
:mask-closable="false"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
transform-origin="center"
|
||||||
|
:title="formValue.id > 0 ? '编辑普通树表 #' + formValue.id : '添加普通树表'"
|
||||||
|
:style="{
|
||||||
|
width: dialogWidth,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<n-scrollbar style="max-height: 87vh" class="pr-5">
|
||||||
|
<n-spin :show="loading" description="请稍候...">
|
||||||
|
<n-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formValue"
|
||||||
|
:rules="rules"
|
||||||
|
:label-placement="settingStore.isMobile ? 'top' : 'left'"
|
||||||
|
:label-width="100"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-grid cols="1 s:1 m:2 l:2 xl:2 2xl:2" responsive="screen">
|
||||||
|
<n-gi span="2">
|
||||||
|
<n-form-item label="标题" path="title">
|
||||||
|
<n-input placeholder="请输入标题" v-model:value="formValue.title" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="2">
|
||||||
|
<n-form-item label="上级" path="pid">
|
||||||
|
<n-tree-select
|
||||||
|
:options="treeOption"
|
||||||
|
v-model:value="formValue.pid"
|
||||||
|
key-field="id"
|
||||||
|
label-field="title"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
default-expand-all
|
||||||
|
show-path
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="2">
|
||||||
|
<n-form-item label="测试分类" path="categoryId">
|
||||||
|
<n-select v-model:value="formValue.categoryId" :options="dict.getOptionUnRef('testCategoryOption')" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="2">
|
||||||
|
<n-form-item label="描述" path="description">
|
||||||
|
<n-input placeholder="请输入描述" v-model:value="formValue.description" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="排序" path="sort">
|
||||||
|
<n-input-number placeholder="请输入排序" v-model:value="formValue.sort" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="状态" path="status">
|
||||||
|
<n-select v-model:value="formValue.status" :options="dict.getOptionUnRef('sys_normal_disable')" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
</n-scrollbar>
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="closeForm">
|
||||||
|
取消
|
||||||
|
</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">
|
||||||
|
确定
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
import { Edit, View, MaxSort } from '@/api/normalTreeDemo';
|
||||||
|
import { State, newState, treeOption, loadTreeOption, rules } from './model';
|
||||||
|
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { adaModalWidth } from '@/utils/hotgo';
|
||||||
|
|
||||||
|
const emit = defineEmits(['reloadTable']);
|
||||||
|
const message = useMessage();
|
||||||
|
const settingStore = useProjectSettingStore();
|
||||||
|
const dict = useDictStore();
|
||||||
|
const loading = ref(false);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formValue = ref<State>(newState(null));
|
||||||
|
const formRef = ref<any>({});
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const dialogWidth = computed(() => {
|
||||||
|
return adaModalWidth(840);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 提交表单
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
Edit(formValue.value)
|
||||||
|
.then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
closeForm();
|
||||||
|
emit('reloadTable');
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭表单
|
||||||
|
function closeForm() {
|
||||||
|
showModal.value = false;
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开模态框
|
||||||
|
function openModal(state: State) {
|
||||||
|
showModal.value = true;
|
||||||
|
|
||||||
|
// 加载关系树选项
|
||||||
|
loadTreeOption();
|
||||||
|
|
||||||
|
// 新增
|
||||||
|
if (!state || state.id < 1) {
|
||||||
|
formValue.value = newState(state);
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
MaxSort()
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value.sort = res.sort;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑
|
||||||
|
loading.value = true;
|
||||||
|
View({ id: state.id })
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value = res;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
openModal,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less"></style>
|
||||||
@@ -0,0 +1,209 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="n-layout-page-header">
|
||||||
|
<n-card :bordered="false" title="普通树表">
|
||||||
|
<!-- 这是由系统生成的CURD表格，你可以将此行注释改为表格的描述 -->
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
<n-card :bordered="false" class="proCard">
|
||||||
|
<BasicForm ref="searchFormRef" @register="register" @submit="reloadTable" @reset="reloadTable" @keyup.enter="reloadTable">
|
||||||
|
<template #statusSlot="{ model, field }">
|
||||||
|
<n-input v-model:value="model[field]" />
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
|
<BasicTable ref="actionRef" openChecked :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" :actionColumn="actionColumn" :scroll-x="scrollX" :resizeHeightOffset="-10000" :cascade="false" :expanded-row-keys="expandedKeys" @update:expanded-row-keys="updateExpandedKeys" :checked-row-keys="checkedIds" @update:checked-row-keys="handleOnCheckedRow">
|
||||||
|
<template #tableTitle>
|
||||||
|
<n-button type="primary" @click="addTable" class="min-left-space" v-if="hasPermission(['/normalTreeDemo/edit'])">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
添加
|
||||||
|
</n-button>
|
||||||
|
<n-button type="error" @click="handleBatchDelete" class="min-left-space" v-if="hasPermission(['/normalTreeDemo/delete'])">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<DeleteOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
批量删除
|
||||||
|
</n-button>
|
||||||
|
<n-button type="primary" icon-placement="left" @click="handleAllExpanded" class="min-left-space">
|
||||||
|
全部{{ expandedKeys.length ? '收起' : '展开' }}
|
||||||
|
<template #icon>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<n-icon size="14">
|
||||||
|
<AlignLeftOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</n-card>
|
||||||
|
<Edit ref="editRef" @reloadTable="reloadTable" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { h, reactive, ref, computed, onMounted } from 'vue';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { BasicTable, TableAction } from '@/components/Table';
|
||||||
|
import { BasicForm, useForm } from '@/components/Form/index';
|
||||||
|
import { usePermission } from '@/hooks/web/usePermission';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
import { List, Delete } from '@/api/normalTreeDemo';
|
||||||
|
import { PlusOutlined, DeleteOutlined, AlignLeftOutlined } from '@vicons/antd';
|
||||||
|
import { columns, schemas, loadOptions, newState } from './model';
|
||||||
|
import { adaTableScrollX, convertListToTree } from '@/utils/hotgo';
|
||||||
|
import Edit from './edit.vue';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
const dialog = useDialog();
|
||||||
|
const message = useMessage();
|
||||||
|
const { hasPermission } = usePermission();
|
||||||
|
const actionRef = ref();
|
||||||
|
const searchFormRef = ref<any>({});
|
||||||
|
const editRef = ref();
|
||||||
|
|
||||||
|
const checkedIds = ref([]);
|
||||||
|
const expandedKeys = ref([]);
|
||||||
|
const allTreeKeys = ref([]);
|
||||||
|
|
||||||
|
const actionColumn = reactive({
|
||||||
|
width: 216,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
render(record: State) {
|
||||||
|
return h(TableAction as any, {
|
||||||
|
style: 'button',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
onClick: handleEdit.bind(null, record),
|
||||||
|
auth: ['/normalTreeDemo/edit'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '添加',
|
||||||
|
onClick: handleAdd.bind(null, record),
|
||||||
|
auth: ['/normalTreeDemo/edit'],
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
onClick: handleDelete.bind(null, record),
|
||||||
|
auth: ['/normalTreeDemo/delete'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const scrollX = computed(() => {
|
||||||
|
return adaTableScrollX(columns, actionColumn.width);
|
||||||
|
});
|
||||||
|
|
||||||
|
const [register, {}] = useForm({
|
||||||
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||||
|
labelWidth: 80,
|
||||||
|
schemas,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载普通数表数据
|
||||||
|
const loadDataTable = async (res = {}) => {
|
||||||
|
const params = { ...(searchFormRef.value?.formModel ?? {}), ...res, pagination: false };
|
||||||
|
const dataSource = await List(params);
|
||||||
|
allTreeKeys.value = expandedKeys.value = dataSource.list.map((item) => item.id);
|
||||||
|
dataSource.list = convertListToTree(dataSource.list, 'id');
|
||||||
|
return dataSource;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 更新选中的行
|
||||||
|
function handleOnCheckedRow(rowKeys) {
|
||||||
|
checkedIds.value = rowKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重新加载表格数据
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value?.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加数据
|
||||||
|
function addTable() {
|
||||||
|
editRef.value.openModal(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加树节点下级数据
|
||||||
|
function handleAdd(record: Recordable) {
|
||||||
|
const state = newState(null);
|
||||||
|
state.pid = record.id;
|
||||||
|
editRef.value.openModal(state);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑数据
|
||||||
|
function handleEdit(record: Recordable) {
|
||||||
|
editRef.value.openModal(record);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 单个删除
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete(record).then((_res) => {
|
||||||
|
message.success('删除成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 批量删除
|
||||||
|
function handleBatchDelete() {
|
||||||
|
if (checkedIds.value.length < 1){
|
||||||
|
message.error('请至少选择一项要删除的数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要批量删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete({ id: checkedIds.value }).then((_res) => {
|
||||||
|
checkedIds.value = [];
|
||||||
|
message.success('删除成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 收起/展开全部树节点
|
||||||
|
function handleAllExpanded() {
|
||||||
|
if (expandedKeys.value.length) {
|
||||||
|
expandedKeys.value = [];
|
||||||
|
} else {
|
||||||
|
expandedKeys.value = allTreeKeys.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新展开的树节点
|
||||||
|
function updateExpandedKeys(openKeys: never[]) {
|
||||||
|
expandedKeys.value = openKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadOptions();
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,171 @@
|
|||||||
|
import { h, ref } from 'vue';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import { FormSchema } from '@/components/Form';
|
||||||
|
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||||
|
import { renderOptionTag, renderPopoverMemberSumma, MemberSumma } from '@/utils';
|
||||||
|
import { TreeOption } from '@/api/normalTreeDemo';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
|
||||||
|
export class State {
|
||||||
|
public title = ''; // 标题
|
||||||
|
public id = 0; // ID
|
||||||
|
public pid = 0; // 上级
|
||||||
|
public level = 1; // 关系树级别
|
||||||
|
public tree = ''; // 关系树
|
||||||
|
public categoryId = null; // 测试分类
|
||||||
|
public description = ''; // 描述
|
||||||
|
public sort = 0; // 排序
|
||||||
|
public status = 1; // 状态
|
||||||
|
public createdBy = 0; // 创建者
|
||||||
|
public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
|
||||||
|
public updatedBy = 0; // 更新者
|
||||||
|
public createdAt = ''; // 创建时间
|
||||||
|
public updatedAt = ''; // 修改时间
|
||||||
|
public deletedAt = ''; // 删除时间
|
||||||
|
|
||||||
|
constructor(state?: Partial<State>) {
|
||||||
|
if (state) {
|
||||||
|
Object.assign(this, state);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function newState(state: State | Record<string, any> | null): State {
|
||||||
|
if (state !== null) {
|
||||||
|
if (state instanceof State) {
|
||||||
|
return cloneDeep(state);
|
||||||
|
}
|
||||||
|
return new State(state);
|
||||||
|
}
|
||||||
|
return new State();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单验证规则
|
||||||
|
export const rules = {
|
||||||
|
title: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
type: 'string',
|
||||||
|
message: '请输入标题',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格搜索表单
|
||||||
|
export const schemas = ref<FormSchema[]>([
|
||||||
|
{
|
||||||
|
field: 'title',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '标题',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入标题',
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'categoryId',
|
||||||
|
component: 'NSelect',
|
||||||
|
label: '测试分类',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择测试分类',
|
||||||
|
options: dict.getOption('testCategoryOption'),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
component: 'NSelect',
|
||||||
|
label: '状态',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择状态',
|
||||||
|
options: dict.getOption('sys_normal_disable'),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createdAt',
|
||||||
|
component: 'NDatePicker',
|
||||||
|
label: '创建时间',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
clearable: true,
|
||||||
|
shortcuts: defRangeShortcuts(),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 表格列
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: '标题',
|
||||||
|
key: 'title',
|
||||||
|
align: 'left',
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '测试分类',
|
||||||
|
key: 'categoryId',
|
||||||
|
align: 'left',
|
||||||
|
width: 100,
|
||||||
|
render(row: State) {
|
||||||
|
return renderOptionTag('testCategoryOption', row.categoryId);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '描述',
|
||||||
|
key: 'description',
|
||||||
|
align: 'left',
|
||||||
|
width: 300,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
key: 'status',
|
||||||
|
align: 'left',
|
||||||
|
width: 150,
|
||||||
|
render(row: State) {
|
||||||
|
return renderOptionTag('sys_normal_disable', row.status);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建者',
|
||||||
|
key: 'createdBy',
|
||||||
|
align: 'left',
|
||||||
|
width: 100,
|
||||||
|
render(row: State) {
|
||||||
|
return renderPopoverMemberSumma(row.createdBySumma);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'createdAt',
|
||||||
|
align: 'left',
|
||||||
|
width: 180,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 加载字典数据选项
|
||||||
|
export function loadOptions() {
|
||||||
|
dict.loadOptions(['sys_normal_disable', 'testCategoryOption']);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关系树选项
|
||||||
|
export const treeOption = ref([]);
|
||||||
|
|
||||||
|
// 加载关系树选项
|
||||||
|
export function loadTreeOption() {
|
||||||
|
TreeOption().then((res) => {
|
||||||
|
treeOption.value = res;
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,170 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
:mask-closable="false"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
transform-origin="center"
|
||||||
|
:title="formValue.id > 0 ? '编辑选项树表 #' + formValue.id : '添加选项树表'"
|
||||||
|
:style="{
|
||||||
|
width: dialogWidth,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<n-scrollbar style="max-height: 87vh" class="pr-5">
|
||||||
|
<n-spin :show="loading" description="请稍候...">
|
||||||
|
<n-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formValue"
|
||||||
|
:rules="rules"
|
||||||
|
:label-placement="settingStore.isMobile ? 'top' : 'left'"
|
||||||
|
:label-width="100"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-grid cols="1 s:1 m:2 l:2 xl:2 2xl:2" responsive="screen">
|
||||||
|
<n-gi span="2">
|
||||||
|
<n-form-item label="标题" path="title">
|
||||||
|
<n-input placeholder="请输入标题" v-model:value="formValue.title" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="2">
|
||||||
|
<n-form-item label="上级" path="pid">
|
||||||
|
<n-tree-select
|
||||||
|
:options="treeOption"
|
||||||
|
v-model:value="formValue.pid"
|
||||||
|
key-field="id"
|
||||||
|
label-field="title"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
default-expand-all
|
||||||
|
show-path
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="2">
|
||||||
|
<n-form-item label="测试分类" path="categoryId">
|
||||||
|
<n-select v-model:value="formValue.categoryId" :options="dict.getOptionUnRef('testCategoryOption')" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="2">
|
||||||
|
<n-form-item label="描述" path="description">
|
||||||
|
<n-input placeholder="请输入描述" v-model:value="formValue.description" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="排序" path="sort">
|
||||||
|
<n-input-number placeholder="请输入排序" v-model:value="formValue.sort" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="状态" path="status">
|
||||||
|
<n-select v-model:value="formValue.status" :options="dict.getOptionUnRef('sys_normal_disable')" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
</n-scrollbar>
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="closeForm">
|
||||||
|
取消
|
||||||
|
</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" :disabled="!isFormValid" @click="confirmForm">
|
||||||
|
确定
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
import { Edit, View, MaxSort } from '@/api/optionTreeDemo';
|
||||||
|
import { State, newState, treeOption, loadTreeOption, rules } from './model';
|
||||||
|
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { adaModalWidth } from '@/utils/hotgo';
|
||||||
|
|
||||||
|
const emit = defineEmits(['reloadTable']);
|
||||||
|
const message = useMessage();
|
||||||
|
const settingStore = useProjectSettingStore();
|
||||||
|
const dict = useDictStore();
|
||||||
|
const loading = ref(false);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formValue = ref<State>(newState(null));
|
||||||
|
const formRef = ref<any>({});
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const dialogWidth = computed(() => {
|
||||||
|
return adaModalWidth(840);
|
||||||
|
});
|
||||||
|
const isFormValid = ref(true);
|
||||||
|
|
||||||
|
// 提交表单
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
Edit(formValue.value)
|
||||||
|
.then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
closeForm();
|
||||||
|
emit('reloadTable');
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭表单
|
||||||
|
function closeForm() {
|
||||||
|
showModal.value = false;
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开模态框
|
||||||
|
function openModal(state: State) {
|
||||||
|
showModal.value = true;
|
||||||
|
|
||||||
|
// 加载关系树选项
|
||||||
|
loadTreeOption();
|
||||||
|
|
||||||
|
// 新增
|
||||||
|
if (!state || state.id < 1) {
|
||||||
|
formValue.value = newState(state);
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
MaxSort()
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value.sort = res.sort;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑
|
||||||
|
loading.value = true;
|
||||||
|
View({ id: state.id })
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value = res;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
openModal,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less"></style>
|
||||||
@@ -0,0 +1,319 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="n-layout-page-header">
|
||||||
|
<n-card :bordered="false" title="选项树表">
|
||||||
|
<!-- 这是由系统生成的CURD表格，你可以将此行注释改为表格的描述 -->
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
<n-grid cols="1 s:1 m:1 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12">
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
|
||||||
|
<template #header>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="info" icon-placement="left" @click="addTable" v-if="hasPermission(['/optionTreeDemo/edit'])">
|
||||||
|
<template #icon>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<n-icon size="14">
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
添加
|
||||||
|
</n-button>
|
||||||
|
<n-button v-if="hasPermission(['/optionTreeDemo/edit'])" type="info" icon-placement="left" @click="handleEdit(selectedState)" :disabled="selectedState.id < 1">
|
||||||
|
<template #icon>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<n-icon size="14">
|
||||||
|
<EditOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
编辑
|
||||||
|
</n-button>
|
||||||
|
<n-button v-if="hasPermission(['/optionTreeDemo/delete'])" type="error" icon-placement="left" @click="handleDelete(selectedState)" :disabled="selectedState.id < 1">
|
||||||
|
<template #icon>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<n-icon size="14">
|
||||||
|
<DeleteOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
删除
|
||||||
|
</n-button>
|
||||||
|
<n-button type="info" icon-placement="left" @click="handleAllExpanded">
|
||||||
|
{{ expandedKeys.length ? '收起' : '展开' }}
|
||||||
|
<template #icon>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<n-icon size="14">
|
||||||
|
<AlignLeftOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
<div class="w-full menu">
|
||||||
|
<n-input v-model:value="pattern" placeholder="输入名称搜索">
|
||||||
|
<template #suffix>
|
||||||
|
<n-icon size="18" class="cursor-pointer">
|
||||||
|
<SearchOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<div class="py-3 menu-list">
|
||||||
|
<template v-if="loading">
|
||||||
|
<div class="flex items-center justify-center py-4">
|
||||||
|
<n-spin size="medium" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<n-tree v-else show-line block-line cascade virtual-scroll :pattern="pattern" :data="treeOption" :expandedKeys="expandedKeys" style="height: 75vh" key-field="id" label-field="title" @update:selected-keys="handleSelected" @update:expanded-keys="handleOnExpandedKeys" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="3">
|
||||||
|
<n-card :bordered="false" class="proCard">
|
||||||
|
<template #header v-if="selectedState.id > 0">
|
||||||
|
<n-space>
|
||||||
|
<n-icon size="18">
|
||||||
|
<FormOutlined />
|
||||||
|
</n-icon>
|
||||||
|
<span>
|
||||||
|
正在编辑 {{ selectedState.title }}
|
||||||
|
</span>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
<n-result v-show="selectedState.id < 1" status="info" title="提示" description="请先从列表选择一项后，进行编辑">
|
||||||
|
<template #footer>
|
||||||
|
<n-button type="info" icon-placement="left" @click="handleAdd(selectedState)" v-if="hasPermission(['/optionTreeDemo/edit'])">
|
||||||
|
<template #icon>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<n-icon size="14">
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
添加
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</n-result>
|
||||||
|
<BasicForm v-if="selectedState.id > 0" ref="searchFormRef" @register="register" @submit="reloadTable" @reset="reloadTable" @keyup.enter="reloadTable">
|
||||||
|
<template #statusSlot="{ model, field }">
|
||||||
|
<n-input v-model:value="model[field]" />
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
|
<BasicTable v-if="selectedState.id > 0" ref="actionRef" openChecked :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" :actionColumn="actionColumn" :scroll-x="scrollX" :resizeHeightOffset="-10000" :checked-row-keys="checkedIds" @update:checked-row-keys="handleOnCheckedRow">
|
||||||
|
<template #tableTitle>
|
||||||
|
<n-button type="primary" @click="handleAdd(selectedState)" class="min-left-space" v-if="hasPermission(['/optionTreeDemo/edit'])">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
添加
|
||||||
|
</n-button>
|
||||||
|
<n-button type="error" @click="handleBatchDelete" class="min-left-space" v-if="hasPermission(['/optionTreeDemo/delete'])">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<DeleteOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
批量删除
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
<Edit ref="editRef" @reloadTable="reloadTable" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { h, reactive, ref, computed, onMounted, unref } from 'vue';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { BasicTable, TableAction } from '@/components/Table';
|
||||||
|
import { BasicForm, useForm } from '@/components/Form/index';
|
||||||
|
import { usePermission } from '@/hooks/web/usePermission';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
import { List, Delete, TreeOption } from '@/api/optionTreeDemo';
|
||||||
|
import { PlusOutlined, EditOutlined, DeleteOutlined, AlignLeftOutlined, FormOutlined, SearchOutlined } from '@vicons/antd';
|
||||||
|
import { columns, schemas, loadOptions, loadTreeOption, treeOption, State, newState } from './model';
|
||||||
|
import { adaTableScrollX, getTreeKeys } from '@/utils/hotgo';
|
||||||
|
import Edit from './edit.vue';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
const dialog = useDialog();
|
||||||
|
const message = useMessage();
|
||||||
|
const { hasPermission } = usePermission();
|
||||||
|
const actionRef = ref();
|
||||||
|
const searchFormRef = ref<any>({});
|
||||||
|
const editRef = ref();
|
||||||
|
|
||||||
|
const checkedIds = ref([]);
|
||||||
|
|
||||||
|
const expandedKeys = ref([]);
|
||||||
|
const pattern = ref('');
|
||||||
|
const selectedState = ref<State>(newState(null));
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const actionColumn = reactive({
|
||||||
|
width: 144,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
render(record: State) {
|
||||||
|
return h(TableAction as any, {
|
||||||
|
style: 'button',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
onClick: handleEdit.bind(null, record),
|
||||||
|
auth: ['/optionTreeDemo/edit'],
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
onClick: handleDelete.bind(null, record),
|
||||||
|
auth: ['/optionTreeDemo/delete'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const scrollX = computed(() => {
|
||||||
|
return adaTableScrollX(columns, actionColumn.width);
|
||||||
|
});
|
||||||
|
|
||||||
|
const [register, {}] = useForm({
|
||||||
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||||
|
labelWidth: 80,
|
||||||
|
schemas,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载选项式树表数据
|
||||||
|
const loadDataTable = async (res = {}) => {
|
||||||
|
if (selectedState.value.id < 1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新树选项
|
||||||
|
loadTreeOption();
|
||||||
|
|
||||||
|
// 获取选中的下级列表
|
||||||
|
const params = {
|
||||||
|
...(searchFormRef.value?.formModel ?? {}),
|
||||||
|
...res,
|
||||||
|
pid: selectedState.value.id,
|
||||||
|
};
|
||||||
|
return await List(params);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 更新选中的行
|
||||||
|
function handleOnCheckedRow(rowKeys) {
|
||||||
|
checkedIds.value = rowKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重新加载表格数据
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value?.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加数据
|
||||||
|
function addTable() {
|
||||||
|
editRef.value.openModal(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加树节点下级数据
|
||||||
|
function handleAdd(record: Recordable) {
|
||||||
|
const state = newState(null);
|
||||||
|
state.pid = record.id;
|
||||||
|
editRef.value.openModal(state);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑数据
|
||||||
|
function handleEdit(record: Recordable) {
|
||||||
|
editRef.value.openModal(record);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 单个删除
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete(record).then((_res) => {
|
||||||
|
message.success('删除成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 批量删除
|
||||||
|
function handleBatchDelete() {
|
||||||
|
if (checkedIds.value.length < 1){
|
||||||
|
message.error('请至少选择一项要删除的数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要批量删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete({ id: checkedIds.value }).then((_res) => {
|
||||||
|
checkedIds.value = [];
|
||||||
|
message.success('删除成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选中树节点
|
||||||
|
function handleSelected(keys, option) {
|
||||||
|
if (keys.length) {
|
||||||
|
selectedState.value = newState(option[0]);
|
||||||
|
reloadTable();
|
||||||
|
} else {
|
||||||
|
selectedState.value = newState(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 展开指定节点
|
||||||
|
function handleOnExpandedKeys(keys) {
|
||||||
|
expandedKeys.value = keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 展开全部节点
|
||||||
|
function handleAllExpanded() {
|
||||||
|
if (expandedKeys.value.length) {
|
||||||
|
expandedKeys.value = [];
|
||||||
|
} else {
|
||||||
|
expandedKeys.value = getTreeKeys(unref(treeOption), 'id');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 首次加载树选项，默认展开全部
|
||||||
|
function firstLoadTreeOption() {
|
||||||
|
loading.value = true;
|
||||||
|
TreeOption().then((res) => {
|
||||||
|
treeOption.value = res;
|
||||||
|
expandedKeys.value = getTreeKeys(unref(treeOption), 'id');
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadOptions();
|
||||||
|
firstLoadTreeOption();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,165 @@
|
|||||||
|
import { h, ref } from 'vue';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import { FormSchema } from '@/components/Form';
|
||||||
|
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||||
|
import { renderOptionTag, renderPopoverMemberSumma, MemberSumma } from '@/utils';
|
||||||
|
import { TreeOption } from '@/api/optionTreeDemo';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
|
||||||
|
export class State {
|
||||||
|
|
||||||
|
public title = '';//标题
|
||||||
|
public id = 0;//ID
|
||||||
|
public pid = 0;//上级
|
||||||
|
public level = 1;//关系树级别
|
||||||
|
public tree = null;//关系树
|
||||||
|
public categoryId = null;//测试分类
|
||||||
|
public description = '';//描述
|
||||||
|
public sort = 0;//排序
|
||||||
|
public status = 1;//状态
|
||||||
|
public createdBy = 0;//创建者
|
||||||
|
public createdBySumma?: null | MemberSumma = null;//创建者摘要信息
|
||||||
|
public updatedBy = 0;//更新者
|
||||||
|
public createdAt = '';//创建时间
|
||||||
|
public updatedAt = '';//修改时间
|
||||||
|
public deletedAt = '';//删除时间
|
||||||
|
constructor(state?: Partial<State>) {
|
||||||
|
if (state) {
|
||||||
|
Object.assign(this, state);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function newState(state: State | Record<string, any> | null): State {
|
||||||
|
if (state !== null) {
|
||||||
|
if (state instanceof State) {
|
||||||
|
return cloneDeep(state);
|
||||||
|
}
|
||||||
|
return new State(state);
|
||||||
|
}
|
||||||
|
return new State();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单验证规则
|
||||||
|
export const rules = {
|
||||||
|
title: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
type: 'string',
|
||||||
|
message: '请输入标题',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格搜索表单
|
||||||
|
export const schemas = ref<FormSchema[]>([
|
||||||
|
{
|
||||||
|
field: 'title',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '标题',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入标题',
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'categoryId',
|
||||||
|
component: 'NSelect',
|
||||||
|
label: '测试分类',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择测试分类',
|
||||||
|
options: dict.getOption('testCategoryOption'),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
component: 'NSelect',
|
||||||
|
label: '状态',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择状态',
|
||||||
|
options: dict.getOption('sys_normal_disable'),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createdAt',
|
||||||
|
component: 'NDatePicker',
|
||||||
|
label: '创建时间',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
clearable: true,
|
||||||
|
shortcuts: defRangeShortcuts(),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 表格列
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: '标题',
|
||||||
|
key: 'title',
|
||||||
|
align: 'left',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '测试分类',
|
||||||
|
key: 'categoryId',
|
||||||
|
align: 'left',
|
||||||
|
width: 100,
|
||||||
|
render(row: State) {
|
||||||
|
return renderOptionTag('testCategoryOption', row.categoryId);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
key: 'status',
|
||||||
|
align: 'left',
|
||||||
|
width: 150,
|
||||||
|
render(row: State) {
|
||||||
|
return renderOptionTag('sys_normal_disable', row.status);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建者',
|
||||||
|
key: 'createdBy',
|
||||||
|
align: 'left',
|
||||||
|
width: 100,
|
||||||
|
render(row: State) {
|
||||||
|
return renderPopoverMemberSumma(row.createdBySumma);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'createdAt',
|
||||||
|
align: 'left',
|
||||||
|
width: 180,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 加载字典数据选项
|
||||||
|
export function loadOptions() {
|
||||||
|
dict.loadOptions(['sys_normal_disable', 'testCategoryOption']);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关系树选项
|
||||||
|
export const treeOption = ref([]);
|
||||||
|
|
||||||
|
// 加载关系树选项
|
||||||
|
export function loadTreeOption() {
|
||||||
|
TreeOption().then((res) => {
|
||||||
|
treeOption.value = res;
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,232 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-card :bordered="false" class="proCard" title="部门管理">
|
||||||
|
<BasicForm
|
||||||
|
ref="searchFormRef"
|
||||||
|
@register="register"
|
||||||
|
@submit="reloadTable"
|
||||||
|
@reset="reloadTable"
|
||||||
|
@keyup.enter="reloadTable"
|
||||||
|
>
|
||||||
|
<template #statusSlot="{ model, field }">
|
||||||
|
<n-input v-model:value="model[field]" />
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
|
<BasicTable
|
||||||
|
ref="actionRef"
|
||||||
|
openChecked
|
||||||
|
:columns="columns"
|
||||||
|
:pagination="false"
|
||||||
|
:request="loadDataTable"
|
||||||
|
:row-key="(row) => row.id"
|
||||||
|
:actionColumn="actionColumn"
|
||||||
|
:scroll-x="1280"
|
||||||
|
:resizeHeightOffset="-10000"
|
||||||
|
:cascade="false"
|
||||||
|
:expanded-row-keys="expandedKeys"
|
||||||
|
@update:expanded-row-keys="updateExpandedKeys"
|
||||||
|
:checked-row-keys="checkedIds"
|
||||||
|
@update:checked-row-keys="handleOnCheckedRow"
|
||||||
|
>
|
||||||
|
<template #tableTitle>
|
||||||
|
<n-button
|
||||||
|
type="primary"
|
||||||
|
@click="addTable"
|
||||||
|
class="min-left-space"
|
||||||
|
v-if="hasPermission(['/dept/edit'])"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
添加部门
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
type="error"
|
||||||
|
@click="handleBatchDelete"
|
||||||
|
class="min-left-space"
|
||||||
|
v-if="hasPermission(['/dept/delete'])"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<DeleteOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
批量删除
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
type="primary"
|
||||||
|
icon-placement="left"
|
||||||
|
@click="handleAllExpanded"
|
||||||
|
class="min-left-space"
|
||||||
|
>
|
||||||
|
全部{{ expandedKeys.length ? '收起' : '展开' }}
|
||||||
|
<template #icon>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<n-icon size="14">
|
||||||
|
<AlignLeftOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</n-card>
|
||||||
|
<Edit ref="editRef" @reloadTable="reloadTable" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { h, reactive, ref, onMounted } from 'vue';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { BasicTable, TableAction } from '@/components/Table';
|
||||||
|
import { BasicForm, useForm } from '@/components/Form/index';
|
||||||
|
import { usePermission } from '@/hooks/web/usePermission';
|
||||||
|
import { getDeptList, Delete } from '@/api/org/dept';
|
||||||
|
import { PlusOutlined, DeleteOutlined, AlignLeftOutlined } from '@vicons/antd';
|
||||||
|
import { columns, schemas, loadOptions, newState, filterIds } from './model';
|
||||||
|
import { convertListToTree } from '@/utils/hotgo';
|
||||||
|
import Edit from './edit.vue';
|
||||||
|
|
||||||
|
const dialog = useDialog();
|
||||||
|
const message = useMessage();
|
||||||
|
const { hasPermission } = usePermission();
|
||||||
|
const actionRef = ref();
|
||||||
|
const searchFormRef = ref<any>({});
|
||||||
|
const editRef = ref();
|
||||||
|
const checkedIds = ref([]);
|
||||||
|
const expandedKeys = ref([]);
|
||||||
|
const allTreeKeys = ref([]);
|
||||||
|
|
||||||
|
const actionColumn = reactive({
|
||||||
|
width: 220,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
render(record) {
|
||||||
|
return h(TableAction as any, {
|
||||||
|
style: 'button',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
onClick: handleEdit.bind(null, record),
|
||||||
|
auth: ['/dept/edit'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '添加子部门',
|
||||||
|
onClick: handleAdd.bind(null, record),
|
||||||
|
auth: ['/dept/edit'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
onClick: handleDelete.bind(null, record),
|
||||||
|
auth: ['/dept/delete'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [register, {}] = useForm({
|
||||||
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||||
|
labelWidth: 80,
|
||||||
|
schemas,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载普通数表数据
|
||||||
|
const loadDataTable = async (res = {}) => {
|
||||||
|
filterIds.value = [];
|
||||||
|
const params = { ...(searchFormRef.value?.formModel ?? {}), ...res, pagination: false };
|
||||||
|
const dataSource = await getDeptList(params);
|
||||||
|
allTreeKeys.value = expandedKeys.value = dataSource.list.map((item) => item.id);
|
||||||
|
dataSource.list = convertListToTree(dataSource.list, 'id');
|
||||||
|
filterIds.value = dataSource.ids;
|
||||||
|
return dataSource;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 更新选中的行
|
||||||
|
function handleOnCheckedRow(rowKeys) {
|
||||||
|
checkedIds.value = rowKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重新加载表格数据
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value?.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加数据
|
||||||
|
function addTable() {
|
||||||
|
editRef.value.openModal(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加树节点下级数据
|
||||||
|
function handleAdd(record: Recordable) {
|
||||||
|
const state = newState(null);
|
||||||
|
state.pid = record.id;
|
||||||
|
editRef.value.openModal(state);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑数据
|
||||||
|
function handleEdit(record: Recordable) {
|
||||||
|
editRef.value.openModal(record);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 单个删除
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete(record).then((_res) => {
|
||||||
|
message.success('删除成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 批量删除
|
||||||
|
function handleBatchDelete() {
|
||||||
|
if (checkedIds.value.length < 1) {
|
||||||
|
message.error('请至少选择一项要删除的数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要批量删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete({ id: checkedIds.value }).then((_res) => {
|
||||||
|
checkedIds.value = [];
|
||||||
|
message.success('删除成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 收起/展开全部树节点
|
||||||
|
function handleAllExpanded() {
|
||||||
|
if (expandedKeys.value.length) {
|
||||||
|
expandedKeys.value = [];
|
||||||
|
} else {
|
||||||
|
expandedKeys.value = allTreeKeys.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新展开的树节点
|
||||||
|
function updateExpandedKeys(openKeys: never[]) {
|
||||||
|
expandedKeys.value = openKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadOptions();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,194 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
:mask-closable="false"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
transform-origin="center"
|
||||||
|
:title="formValue.id > 0 ? '编辑部门 #' + formValue.id : '添加部门'"
|
||||||
|
:style="{
|
||||||
|
width: dialogWidth,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<n-scrollbar style="max-height: 87vh" class="pr-5">
|
||||||
|
<n-spin :show="loading" description="请稍候...">
|
||||||
|
<n-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formValue"
|
||||||
|
:rules="rules"
|
||||||
|
:label-placement="settingStore.isMobile ? 'top' : 'left'"
|
||||||
|
:label-width="100"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="上级部门" path="pid">
|
||||||
|
<n-tree-select
|
||||||
|
:options="treeOption"
|
||||||
|
v-model:value="formValue.pid"
|
||||||
|
key-field="id"
|
||||||
|
label-field="name"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
default-expand-all
|
||||||
|
show-path
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="部门名称" path="name">
|
||||||
|
<n-input placeholder="请输入部门名称" v-model:value="formValue.name" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="部门编码" path="code">
|
||||||
|
<n-input placeholder="请输入部门编码" v-model:value="formValue.code" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="部门类型" path="type">
|
||||||
|
<n-radio-group v-model:value="formValue.type" name="type">
|
||||||
|
<n-space>
|
||||||
|
<n-radio v-for="item in dict.getOptionUnRef('deptType')" :value="item.value">
|
||||||
|
{{ item.label }}
|
||||||
|
</n-radio>
|
||||||
|
</n-space>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="负责人" path="leader">
|
||||||
|
<n-input placeholder="请输入负责人" v-model:value="formValue.leader" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="联系电话" path="phone">
|
||||||
|
<n-input placeholder="请输入联系电话" v-model:value="formValue.phone" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="邮箱" path="email">
|
||||||
|
<n-input placeholder="请输入邮箱" v-model:value="formValue.email" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="排序" path="sort">
|
||||||
|
<n-input-number
|
||||||
|
placeholder="请输入排序"
|
||||||
|
v-model:value="formValue.sort"
|
||||||
|
clearable
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="状态" path="status">
|
||||||
|
<n-radio-group v-model:value="formValue.status" name="status">
|
||||||
|
<n-radio-button
|
||||||
|
v-for="status in dict.getOptionUnRef('sys_normal_disable')"
|
||||||
|
:key="status.value"
|
||||||
|
:value="status.value"
|
||||||
|
:label="status.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
</n-scrollbar>
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="closeForm"> 取消 </n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm"> 确定 </n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { Edit, View, MaxSort } from '@/api/org/dept';
|
||||||
|
import { State, newState, treeOption, loadTreeOption, rules } from './model';
|
||||||
|
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { adaModalWidth } from '@/utils/hotgo';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
|
||||||
|
const emit = defineEmits(['reloadTable']);
|
||||||
|
const message = useMessage();
|
||||||
|
const settingStore = useProjectSettingStore();
|
||||||
|
const dict = useDictStore();
|
||||||
|
const loading = ref(false);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formValue = ref<State>(newState(null));
|
||||||
|
const formRef = ref<any>({});
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const dialogWidth = computed(() => {
|
||||||
|
return adaModalWidth(520);
|
||||||
|
});
|
||||||
|
|
||||||
|
function openModal(state: State) {
|
||||||
|
showModal.value = true;
|
||||||
|
|
||||||
|
// 加载关系树选项
|
||||||
|
loadTreeOption();
|
||||||
|
|
||||||
|
// 新增
|
||||||
|
if (!state || state.id < 1) {
|
||||||
|
formValue.value = newState(state);
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
MaxSort()
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value.sort = res.sort;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑
|
||||||
|
loading.value = true;
|
||||||
|
View({ id: state.id })
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value = res;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
Edit(formValue.value).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
closeForm();
|
||||||
|
emit('reloadTable');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeForm() {
|
||||||
|
showModal.value = false;
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
openModal,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less"></style>
|
||||||
@@ -0,0 +1,201 @@
|
|||||||
|
import { h, ref } from 'vue';
|
||||||
|
import { NTag, NButton } from 'naive-ui';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import { FormSchema } from '@/components/Form';
|
||||||
|
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||||
|
import { validate } from '@/utils/validateUtil';
|
||||||
|
import { renderTooltip, renderIcon, renderOptionTag } from '@/utils';
|
||||||
|
import { HelpCircleOutline } from '@vicons/ionicons5';
|
||||||
|
import { TreeOption } from '@/api/org/dept';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
import type { FormRules } from 'naive-ui/es/form/src/interface';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
|
||||||
|
export class State {
|
||||||
|
public id = 0; // 部门ID
|
||||||
|
public pid = 0; // 父部门ID
|
||||||
|
public name = ''; // 部门名称
|
||||||
|
public code = ''; // 部门编码
|
||||||
|
public type = 'company'; // 部门类型
|
||||||
|
public leader = ''; // 负责人
|
||||||
|
public phone = ''; // 联系电话
|
||||||
|
public email = ''; // 邮箱
|
||||||
|
public level = 0; // 关系树等级
|
||||||
|
public tree = ''; // 关系树
|
||||||
|
public sort = 0; // 排序
|
||||||
|
public status = 1; // 部门状态
|
||||||
|
public createdAt = ''; // 创建时间
|
||||||
|
public updatedAt = ''; // 更新时间
|
||||||
|
|
||||||
|
constructor(state?: Partial<State>) {
|
||||||
|
if (state) {
|
||||||
|
Object.assign(this, state);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function newState(state: State | Record<string, any> | null): State {
|
||||||
|
if (state !== null) {
|
||||||
|
if (state instanceof State) {
|
||||||
|
return cloneDeep(state);
|
||||||
|
}
|
||||||
|
return new State(state);
|
||||||
|
}
|
||||||
|
return new State();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单验证规则
|
||||||
|
export const rules: FormRules = {
|
||||||
|
email: {
|
||||||
|
required: false,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
type: 'string',
|
||||||
|
validator: validate.email,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格搜索表单
|
||||||
|
export const schemas = ref<FormSchema[]>([
|
||||||
|
{
|
||||||
|
field: 'name',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '部门名称',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入部门名称',
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: [{ message: '请输入部门名称', trigger: ['blur'] }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'code',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '部门编码',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入部门编码',
|
||||||
|
showButton: false,
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'leader',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '负责人',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入负责人',
|
||||||
|
showButton: false,
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createdAt',
|
||||||
|
component: 'NDatePicker',
|
||||||
|
label: '创建时间',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
clearable: true,
|
||||||
|
shortcuts: defRangeShortcuts(),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
export const filterIds = ref([]);
|
||||||
|
|
||||||
|
// 表格列
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title(_column) {
|
||||||
|
return renderTooltip(
|
||||||
|
h(
|
||||||
|
NButton,
|
||||||
|
{
|
||||||
|
strong: true,
|
||||||
|
size: 'small',
|
||||||
|
text: true,
|
||||||
|
iconPlacement: 'right',
|
||||||
|
},
|
||||||
|
{ default: () => '部门名称', icon: renderIcon(HelpCircleOutline) }
|
||||||
|
),
|
||||||
|
'支持上下级部门，点击列表中左侧 > 按钮可展开下级部门列表'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
key: 'name',
|
||||||
|
render(row) {
|
||||||
|
const filter = filterIds.value.includes(row.id as never);
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
type: 'info',
|
||||||
|
checkable: filter,
|
||||||
|
checked: filter,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => row.name,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '部门编码',
|
||||||
|
key: 'code',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '部门类型',
|
||||||
|
key: 'type',
|
||||||
|
align: 'left',
|
||||||
|
width: 100,
|
||||||
|
render(row) {
|
||||||
|
return renderOptionTag('deptType', row.type);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '负责人',
|
||||||
|
key: 'leader',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '联系电话',
|
||||||
|
key: 'phone',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
key: 'status',
|
||||||
|
align: 'left',
|
||||||
|
width: 80,
|
||||||
|
render(row) {
|
||||||
|
return renderOptionTag('sys_normal_disable', row.status);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'createdAt',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 加载字典数据选项
|
||||||
|
export function loadOptions() {
|
||||||
|
dict.loadOptions(['sys_normal_disable', 'deptType']);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关系树选项
|
||||||
|
export const treeOption = ref([]);
|
||||||
|
|
||||||
|
// 加载关系树选项
|
||||||
|
export function loadTreeOption() {
|
||||||
|
TreeOption().then((res) => {
|
||||||
|
treeOption.value = res;
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
import { h } from 'vue';
|
||||||
|
import { NTag } from 'naive-ui';
|
||||||
|
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: 'ID',
|
||||||
|
key: 'id',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '岗位',
|
||||||
|
key: 'name',
|
||||||
|
width: 200,
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
type: 'info',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => row.name,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '岗位编码',
|
||||||
|
key: 'code',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
key: 'status',
|
||||||
|
width: 100,
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: row.status == 1 ? 'info' : 'error',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => (row.status == 1 ? '正常' : '已禁用'),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '备注',
|
||||||
|
key: 'sort',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'createdAt',
|
||||||
|
width: 180,
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -0,0 +1,305 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-card :bordered="false" class="proCard" title="岗位管理">
|
||||||
|
<BasicForm
|
||||||
|
@register="register"
|
||||||
|
@submit="handleSubmit"
|
||||||
|
@reset="handleReset"
|
||||||
|
@keyup.enter="handleSubmit"
|
||||||
|
ref="searchFormRef"
|
||||||
|
>
|
||||||
|
<template #statusSlot="{ model, field }">
|
||||||
|
<n-input v-model:value="model[field]" />
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
|
|
||||||
|
<BasicTable
|
||||||
|
:openChecked="true"
|
||||||
|
:columns="columns"
|
||||||
|
:request="loadDataTable"
|
||||||
|
:row-key="(row) => row.id"
|
||||||
|
ref="actionRef"
|
||||||
|
:actionColumn="actionColumn"
|
||||||
|
@update:checked-row-keys="onCheckedRow"
|
||||||
|
:resizeHeightOffset="-10000"
|
||||||
|
:scroll-x="1090"
|
||||||
|
>
|
||||||
|
<template #tableTitle>
|
||||||
|
<n-button type="primary" @click="addTable">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
添加岗位
|
||||||
|
</n-button>
|
||||||
|
|
||||||
|
<n-button type="error" @click="batchDelete" :disabled="batchDeleteDisabled">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<DeleteOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
批量删除
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
:title="formParams?.id > 0 ? '编辑岗位 #' + formParams?.id : '添加岗位'"
|
||||||
|
>
|
||||||
|
<n-form
|
||||||
|
:model="formParams"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="80"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-form-item label="岗位名称" path="name">
|
||||||
|
<n-input placeholder="请输入岗位名称" v-model:value="formParams.name" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="岗位编码" path="code">
|
||||||
|
<n-input placeholder="请输入岗位编码" v-model:value="formParams.code" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="排序" path="sort">
|
||||||
|
<n-input-number v-model:value="formParams.sort" clearable style="width: 100%" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="状态" path="status">
|
||||||
|
<n-radio-group v-model:value="formParams.status" name="status">
|
||||||
|
<n-radio-button
|
||||||
|
v-for="status in statusOptions"
|
||||||
|
:key="status.value"
|
||||||
|
:value="status.value"
|
||||||
|
:label="status.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="备注" path="remark">
|
||||||
|
<n-input type="textarea" placeholder="请输入备注" v-model:value="formParams.remark" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="() => (showModal = false)">取消</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { h, reactive, ref } from 'vue';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { BasicTable, TableAction } from '@/components/Table';
|
||||||
|
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
|
||||||
|
import { Delete, Edit, getPostList } from '@/api/org/post';
|
||||||
|
import { columns } from './columns';
|
||||||
|
import { DeleteOutlined, PlusOutlined } from '@vicons/antd';
|
||||||
|
import { statusOptions } from '@/enums/optionsiEnum';
|
||||||
|
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
|
||||||
|
const params = ref<any>({
|
||||||
|
pageSize: 10,
|
||||||
|
name: '',
|
||||||
|
code: '',
|
||||||
|
status: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const schemas: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'name',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '岗位名称',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入岗位名称',
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: [{ message: '请输入岗位名称', trigger: ['blur'] }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'code',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '岗位编码',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入岗位编码',
|
||||||
|
showButton: false,
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
component: 'NSelect',
|
||||||
|
label: '状态',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择类型',
|
||||||
|
options: statusOptions,
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createdAt',
|
||||||
|
component: 'NDatePicker',
|
||||||
|
label: '创建时间',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
clearable: true,
|
||||||
|
shortcuts: defRangeShortcuts(),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const message = useMessage();
|
||||||
|
const actionRef = ref();
|
||||||
|
const dialog = useDialog();
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const searchFormRef = ref<any>({});
|
||||||
|
const formRef = ref<any>({});
|
||||||
|
const batchDeleteDisabled = ref(true);
|
||||||
|
const checkedIds = ref([]);
|
||||||
|
|
||||||
|
const resetFormParams = {
|
||||||
|
id: 0,
|
||||||
|
code: '',
|
||||||
|
name: '',
|
||||||
|
remark: '',
|
||||||
|
sort: 10,
|
||||||
|
status: 1,
|
||||||
|
};
|
||||||
|
const formParams = ref<any>(resetFormParams);
|
||||||
|
const actionColumn = reactive({
|
||||||
|
width: 150,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
render(record) {
|
||||||
|
return h(TableAction as any, {
|
||||||
|
style: 'button',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
onClick: handleEdit.bind(null, record),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
onClick: handleDelete.bind(null, record),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [register, {}] = useForm({
|
||||||
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||||
|
labelWidth: 80,
|
||||||
|
schemas,
|
||||||
|
});
|
||||||
|
|
||||||
|
function addTable() {
|
||||||
|
showModal.value = true;
|
||||||
|
formParams.value = cloneDeep(resetFormParams);
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadDataTable = async (res) => {
|
||||||
|
return await getPostList({ ...params.value, ...res, ...searchFormRef.value?.formModel });
|
||||||
|
};
|
||||||
|
|
||||||
|
function onCheckedRow(rowKeys) {
|
||||||
|
console.log(rowKeys);
|
||||||
|
batchDeleteDisabled.value = rowKeys.length <= 0;
|
||||||
|
checkedIds.value = rowKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
Edit(formParams.value).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
showModal.value = false;
|
||||||
|
reloadTable();
|
||||||
|
formParams.value = ref(resetFormParams);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit(record: Recordable) {
|
||||||
|
showModal.value = true;
|
||||||
|
formParams.value = record;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete(record).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function batchDelete() {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete({ id: checkedIds.value }).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSubmit(values: Recordable) {
|
||||||
|
console.log(values);
|
||||||
|
params.value = values;
|
||||||
|
reloadTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleReset(values: Recordable) {
|
||||||
|
params.value = values;
|
||||||
|
reloadTable();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,147 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-spin :show="loading" description="请稍候...">
|
||||||
|
<n-modal
|
||||||
|
v-model:show="isShowModal"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
title="变更余额"
|
||||||
|
:style="{
|
||||||
|
width: dialogWidth,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<n-alert :show-icon="false" type="info">
|
||||||
|
通过扣除或增加你的余额来为
|
||||||
|
<b> {{ params.realName }}</b> 加款或扣款。当扣款方余额不足时，则会操作失败
|
||||||
|
</n-alert>
|
||||||
|
<n-form
|
||||||
|
:model="params"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="80"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-form-item label="管理员ID" path="id">
|
||||||
|
<n-input v-model:value="params.id" :disabled="true" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="TA的余额" path="balance">
|
||||||
|
<n-input placeholder="请输入" v-model:value="params.balance" :disabled="true" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="操作方式" path="operateMode">
|
||||||
|
<n-radio-group v-model:value="params.operateMode" name="operateMode">
|
||||||
|
<n-radio-button
|
||||||
|
v-for="status in operateModes"
|
||||||
|
:key="status.value"
|
||||||
|
:value="status.value"
|
||||||
|
:label="status.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="操作数量" path="num">
|
||||||
|
<n-input placeholder="请输入操作数量" v-model:value="params.num" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="closeForm">取消</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</n-spin>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed, watch } from 'vue';
|
||||||
|
import {
|
||||||
|
addRules as rules,
|
||||||
|
addState as State,
|
||||||
|
addNewState as newState,
|
||||||
|
operateModes,
|
||||||
|
} from './model';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { adaModalWidth } from '@/utils/hotgo';
|
||||||
|
import { GetMemberView, AddMemberBalance } from '@/api/org/user';
|
||||||
|
const emit = defineEmits(['reloadTable', 'updateShowModal']);
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
showModal: boolean;
|
||||||
|
formParams?: State;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
showModal: false,
|
||||||
|
formParams: () => {
|
||||||
|
return newState(null);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const isShowModal = computed({
|
||||||
|
get: () => {
|
||||||
|
return props.showModal;
|
||||||
|
},
|
||||||
|
set: (value) => {
|
||||||
|
emit('updateShowModal', value);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const params = ref<State>(props.formParams);
|
||||||
|
const message = useMessage();
|
||||||
|
const formRef = ref<any>({});
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const dialogWidth = computed(() => {
|
||||||
|
return adaModalWidth();
|
||||||
|
});
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
AddMemberBalance(params.value).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
isShowModal.value = false;
|
||||||
|
emit('reloadTable');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeForm() {
|
||||||
|
isShowModal.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadForm(value) {
|
||||||
|
loading.value = true;
|
||||||
|
GetMemberView({ id: value.id })
|
||||||
|
.then((res) => {
|
||||||
|
params.value = res;
|
||||||
|
params.value.operateMode = 1;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.formParams,
|
||||||
|
(value) => {
|
||||||
|
if (isShowModal.value) {
|
||||||
|
loadForm(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less"></style>
|
||||||
@@ -0,0 +1,147 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-spin :show="loading" description="请稍候...">
|
||||||
|
<n-modal
|
||||||
|
v-model:show="isShowModal"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
title="变更积分"
|
||||||
|
:style="{
|
||||||
|
width: dialogWidth,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<n-alert :show-icon="false" type="info">
|
||||||
|
通过扣除或增加你的积分来为
|
||||||
|
<b> {{ params.realName }}</b> 加款或扣款。当扣款方积分不足时，则会操作失败
|
||||||
|
</n-alert>
|
||||||
|
<n-form
|
||||||
|
:model="params"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="80"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-form-item label="管理员ID" path="id">
|
||||||
|
<n-input v-model:value="params.id" :disabled="true" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="TA的积分" path="integral">
|
||||||
|
<n-input placeholder="请输入" v-model:value="params.integral" :disabled="true" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="操作方式" path="operateMode">
|
||||||
|
<n-radio-group v-model:value="params.operateMode" name="operateMode">
|
||||||
|
<n-radio-button
|
||||||
|
v-for="status in operateModes"
|
||||||
|
:key="status.value"
|
||||||
|
:value="status.value"
|
||||||
|
:label="status.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="操作数量" path="num">
|
||||||
|
<n-input placeholder="请输入操作数量" v-model:value="params.num" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="closeForm">取消</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</n-spin>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref, computed, watch } from 'vue';
|
||||||
|
import {
|
||||||
|
addRules as rules,
|
||||||
|
addState as State,
|
||||||
|
addNewState as newState,
|
||||||
|
operateModes,
|
||||||
|
} from './model';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { adaModalWidth } from '@/utils/hotgo';
|
||||||
|
import { GetMemberView, AddMemberIntegral } from '@/api/org/user';
|
||||||
|
const emit = defineEmits(['reloadTable', 'updateShowModal']);
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
showModal: boolean;
|
||||||
|
formParams?: State;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
showModal: false,
|
||||||
|
formParams: () => {
|
||||||
|
return newState(null);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const isShowModal = computed({
|
||||||
|
get: () => {
|
||||||
|
return props.showModal;
|
||||||
|
},
|
||||||
|
set: (value) => {
|
||||||
|
emit('updateShowModal', value);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const params = ref<State>(props.formParams);
|
||||||
|
const message = useMessage();
|
||||||
|
const formRef = ref<any>({});
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const dialogWidth = computed(() => {
|
||||||
|
return adaModalWidth();
|
||||||
|
});
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
AddMemberIntegral(params.value).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
isShowModal.value = false;
|
||||||
|
emit('reloadTable');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeForm() {
|
||||||
|
isShowModal.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadForm(value) {
|
||||||
|
loading.value = true;
|
||||||
|
GetMemberView({ id: value.id })
|
||||||
|
.then((res) => {
|
||||||
|
params.value = res;
|
||||||
|
params.value.operateMode = 1;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.formParams,
|
||||||
|
(value) => {
|
||||||
|
if (isShowModal.value) {
|
||||||
|
loadForm(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less"></style>
|
||||||
@@ -0,0 +1,148 @@
|
|||||||
|
import { h } from 'vue';
|
||||||
|
import { NAvatar, NTag, NText } from 'naive-ui';
|
||||||
|
import { formatBefore } from '@/utils/dateUtil';
|
||||||
|
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: '管理员ID',
|
||||||
|
key: 'id',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '用户名',
|
||||||
|
key: 'username',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '姓名',
|
||||||
|
key: 'realName',
|
||||||
|
width: 100,
|
||||||
|
render(row) {
|
||||||
|
if (row.realName == '') {
|
||||||
|
return h(NText, { depth: 3 }, { default: () => '未设置' });
|
||||||
|
}
|
||||||
|
return row.realName;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '头像',
|
||||||
|
key: 'avatar',
|
||||||
|
width: 70,
|
||||||
|
render(row) {
|
||||||
|
if (row.avatar !== '') {
|
||||||
|
return h(NAvatar, {
|
||||||
|
circle: true,
|
||||||
|
size: 'small',
|
||||||
|
src: row.avatar,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return h(
|
||||||
|
NAvatar,
|
||||||
|
{
|
||||||
|
circle: true,
|
||||||
|
size: 'small',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () =>
|
||||||
|
row.realName !== '' ? row.realName.substring(0, 1) : row.username.substring(0, 2),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '绑定角色',
|
||||||
|
key: 'roleName',
|
||||||
|
width: 100,
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: 'success',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => row.roleName,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '所属部门',
|
||||||
|
key: 'deptName',
|
||||||
|
width: 100,
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: 'info',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => row.deptName,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '余额',
|
||||||
|
key: 'balance',
|
||||||
|
width: 120,
|
||||||
|
render(row) {
|
||||||
|
return '￥' + Number(row.balance).toFixed(2);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '积分',
|
||||||
|
key: 'integral',
|
||||||
|
width: 120,
|
||||||
|
render(row) {
|
||||||
|
return Number(row.integral).toFixed(2);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
key: 'status',
|
||||||
|
width: 80,
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: row.status == 1 ? 'info' : 'error',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => (row.status == 1 ? '正常' : '已禁用'),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '最近活跃',
|
||||||
|
key: 'lastActiveAt',
|
||||||
|
width: 100,
|
||||||
|
render(row) {
|
||||||
|
if (row.lastActiveAt === null) {
|
||||||
|
return '从未登录';
|
||||||
|
}
|
||||||
|
return formatBefore(new Date(row.lastActiveAt));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'createdAt',
|
||||||
|
width: 180,
|
||||||
|
render: (rows, _) => {
|
||||||
|
return rows.createdAt;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -0,0 +1,526 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<BasicForm
|
||||||
|
@register="register"
|
||||||
|
@submit="handleSubmit"
|
||||||
|
@reset="handleReset"
|
||||||
|
@keyup.enter="handleSubmit"
|
||||||
|
ref="searchFormRef"
|
||||||
|
>
|
||||||
|
<template #statusSlot="{ model, field }">
|
||||||
|
<n-input v-model:value="model[field]" />
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
|
|
||||||
|
<BasicTable
|
||||||
|
:openChecked="true"
|
||||||
|
:columns="columns"
|
||||||
|
:request="loadDataTable"
|
||||||
|
:row-key="(row) => row.id"
|
||||||
|
ref="actionRef"
|
||||||
|
:actionColumn="actionColumn"
|
||||||
|
@update:checked-row-keys="onCheckedRow"
|
||||||
|
:scroll-x="scrollX"
|
||||||
|
:resizeHeightOffset="-10000"
|
||||||
|
>
|
||||||
|
<template #tableTitle>
|
||||||
|
<n-button
|
||||||
|
type="primary"
|
||||||
|
@click="addTable"
|
||||||
|
class="min-left-space"
|
||||||
|
v-if="hasPermission(['/member/edit'])"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
添加用户
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
type="error"
|
||||||
|
@click="batchDelete"
|
||||||
|
:disabled="batchDeleteDisabled"
|
||||||
|
class="min-left-space"
|
||||||
|
v-if="hasPermission(['/member/delete'])"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<DeleteOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
批量删除
|
||||||
|
</n-button>
|
||||||
|
|
||||||
|
<n-button
|
||||||
|
type="success"
|
||||||
|
@click="handleInviteQR(userStore.info?.inviteCode)"
|
||||||
|
class="min-left-space"
|
||||||
|
v-if="userStore.loginConfig?.loginRegisterSwitch === 1"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<QrCodeOutline />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
邀请注册
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
:mask-closable="false"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
:title="formParams?.id > 0 ? '编辑用户 #' + formParams?.id : '添加用户'"
|
||||||
|
:style="{
|
||||||
|
width: dialogWidth,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<n-form
|
||||||
|
:model="formParams"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="80"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-grid x-gap="24" :cols="2">
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="用户名" path="username">
|
||||||
|
<n-input placeholder="请输入登录用户名" v-model:value="formParams.username" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="密码" path="password">
|
||||||
|
<n-input
|
||||||
|
type="password"
|
||||||
|
:placeholder="formParams.id === 0 ? '请输入' : '不填则不修改'"
|
||||||
|
v-model:value="formParams.password"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-grid x-gap="24" :cols="2">
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="所属部门" path="deptId">
|
||||||
|
<n-tree-select
|
||||||
|
key-field="id"
|
||||||
|
:options="deptTreeOptions"
|
||||||
|
:default-value="formParams.deptId"
|
||||||
|
@update:value="handleUpdateDeptValue"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
default-expand-all
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="绑定角色" path="roleId">
|
||||||
|
<n-tree-select
|
||||||
|
key-field="id"
|
||||||
|
:options="roleTreeOptions"
|
||||||
|
:default-value="formParams.roleId"
|
||||||
|
@update:value="handleUpdateRoleValue"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
default-expand-all
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-divider title-placement="left">填写更多信息（可选)</n-divider>
|
||||||
|
<n-grid x-gap="24" :cols="2">
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="姓名" path="realName">
|
||||||
|
<n-input placeholder="请输入姓名" v-model:value="formParams.realName" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="绑定岗位" path="postIds">
|
||||||
|
<n-select
|
||||||
|
:default-value="formParams.postIds"
|
||||||
|
:options="dict.getOptionUnRef('adminPostOption')"
|
||||||
|
@update:value="handleUpdatePostValue"
|
||||||
|
multiple
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-grid x-gap="24" :cols="2">
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="手机号" path="mobile">
|
||||||
|
<n-input placeholder="请输入" v-model:value="formParams.mobile" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="邮箱" path="email">
|
||||||
|
<n-input placeholder="请输入" v-model:value="formParams.email" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-grid x-gap="24" :cols="2">
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="性别" path="sex">
|
||||||
|
<n-radio-group v-model:value="formParams.sex" name="sex">
|
||||||
|
<n-radio-button
|
||||||
|
v-for="status in dict.getOptionUnRef('sys_user_sex')"
|
||||||
|
:key="status.value"
|
||||||
|
:value="status.value"
|
||||||
|
:label="status.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="状态" path="status">
|
||||||
|
<n-radio-group v-model:value="formParams.status" name="status">
|
||||||
|
<n-radio-button
|
||||||
|
v-for="status in dict.getOptionUnRef('sys_normal_disable')"
|
||||||
|
:key="status.value"
|
||||||
|
:value="status.value"
|
||||||
|
:label="status.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-form-item label="备注" path="remark">
|
||||||
|
<n-input type="textarea" placeholder="请输入备注" v-model:value="formParams.remark" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="() => (showModal = false)">取消</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
|
||||||
|
<AddBalance
|
||||||
|
@reload-table="reloadTable"
|
||||||
|
@update-show-modal="updateBalanceShowModal"
|
||||||
|
:showModal="showBalanceModal"
|
||||||
|
:formParams="formParams"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<AddIntegral
|
||||||
|
@reload-table="reloadTable"
|
||||||
|
@update-show-modal="updateIntegralShowModal"
|
||||||
|
:showModal="showIntegralModal"
|
||||||
|
:formParams="formParams"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<n-modal v-model:show="showQrModal" :show-icon="false" preset="dialog" title="邀请注册二维码">
|
||||||
|
<n-form class="py-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<qrcode-vue :value="qrParams.qrUrl" :size="220" class="canvas" style="margin: 0 auto" />
|
||||||
|
</div>
|
||||||
|
</n-form>
|
||||||
|
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="() => (showQrModal = false)">关闭</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { h, reactive, ref, computed } from 'vue';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { ActionItem, BasicTable, TableAction } from '@/components/Table';
|
||||||
|
import { BasicForm } from '@/components/Form/index';
|
||||||
|
import { Delete, Edit, List, ResetPwd } from '@/api/org/user';
|
||||||
|
import { columns } from './columns';
|
||||||
|
import { PlusOutlined, DeleteOutlined } from '@vicons/antd';
|
||||||
|
import { QrCodeOutline } from '@vicons/ionicons5';
|
||||||
|
import { adaModalWidth, adaTableScrollX } from '@/utils/hotgo';
|
||||||
|
import { getRandomString } from '@/utils/charset';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import QrcodeVue from 'qrcode.vue';
|
||||||
|
import AddBalance from './addBalance.vue';
|
||||||
|
import AddIntegral from './addIntegral.vue';
|
||||||
|
import {
|
||||||
|
addNewState,
|
||||||
|
addState,
|
||||||
|
register,
|
||||||
|
defaultState,
|
||||||
|
deptTreeOptions,
|
||||||
|
roleTreeOptions,
|
||||||
|
} from './model';
|
||||||
|
import { usePermission } from '@/hooks/web/usePermission';
|
||||||
|
import { useUserStore } from '@/store/modules/user';
|
||||||
|
import { LoginRoute } from '@/router';
|
||||||
|
import { getNowUrl } from '@/utils/urlUtils';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
type?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
type: '-1',
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
username: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
message: '请输入用户名',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
const { hasPermission } = usePermission();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const showIntegralModal = ref(false);
|
||||||
|
const showBalanceModal = ref(false);
|
||||||
|
const message = useMessage();
|
||||||
|
const actionRef = ref();
|
||||||
|
const dialog = useDialog();
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const searchFormRef = ref<any>({});
|
||||||
|
const formRef = ref<any>({});
|
||||||
|
const batchDeleteDisabled = ref(true);
|
||||||
|
const checkedIds = ref([]);
|
||||||
|
const formParams = ref<any>();
|
||||||
|
const showQrModal = ref(false);
|
||||||
|
const qrParams = ref({
|
||||||
|
name: '',
|
||||||
|
qrUrl: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const dialogWidth = computed(() => {
|
||||||
|
return adaModalWidth();
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionColumn = reactive({
|
||||||
|
width: 200,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
render(record) {
|
||||||
|
const downActions = getDropDownActions(record);
|
||||||
|
return h(TableAction as any, {
|
||||||
|
style: 'button',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
onClick: handleEdit.bind(null, record),
|
||||||
|
ifShow: () => {
|
||||||
|
return record.id !== 1;
|
||||||
|
},
|
||||||
|
auth: ['/member/edit'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
onClick: handleDelete.bind(null, record),
|
||||||
|
ifShow: () => {
|
||||||
|
return record.id !== 1;
|
||||||
|
},
|
||||||
|
auth: ['/member/delete'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
dropDownActions: downActions,
|
||||||
|
select: (key) => {
|
||||||
|
if (key === 0) {
|
||||||
|
return handleResetPwd(record);
|
||||||
|
}
|
||||||
|
if (key === 100) {
|
||||||
|
return handleAddBalance(record);
|
||||||
|
}
|
||||||
|
if (key === 101) {
|
||||||
|
return handleAddIntegral(record);
|
||||||
|
}
|
||||||
|
if (key === 102) {
|
||||||
|
if (userStore.loginConfig?.loginRegisterSwitch !== 1) {
|
||||||
|
message.error('管理员暂未开启此功能');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return handleInviteQR(record.inviteCode);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const scrollX = computed(() => {
|
||||||
|
return adaTableScrollX(columns, actionColumn.width);
|
||||||
|
});
|
||||||
|
|
||||||
|
function getDropDownActions(record: Recordable): ActionItem[] {
|
||||||
|
if (record.id === 1) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
let list = [
|
||||||
|
{
|
||||||
|
label: '重置密码',
|
||||||
|
key: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '变更余额',
|
||||||
|
key: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '变更积分',
|
||||||
|
key: 101,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
if (userStore.loginConfig?.loginRegisterSwitch === 1) {
|
||||||
|
list.push({
|
||||||
|
label: 'TA的邀请码',
|
||||||
|
key: 102,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return list;
|
||||||
|
}
|
||||||
|
|
||||||
|
function addTable() {
|
||||||
|
showModal.value = true;
|
||||||
|
formParams.value = cloneDeep(defaultState);
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadDataTable = async (res) => {
|
||||||
|
return await List({ ...res, ...searchFormRef.value?.formModel, ...{ roleId: props.type } });
|
||||||
|
};
|
||||||
|
|
||||||
|
function onCheckedRow(rowKeys) {
|
||||||
|
batchDeleteDisabled.value = rowKeys.length <= 0;
|
||||||
|
checkedIds.value = rowKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
Edit(formParams.value).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
showModal.value = false;
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit(record: Recordable) {
|
||||||
|
showModal.value = true;
|
||||||
|
formParams.value = cloneDeep(record);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleResetPwd(record: Recordable) {
|
||||||
|
record.password = getRandomString(12);
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要重置密码？\r\n重置成功后密码为：' + record.password + '\r\n 请先保存',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
ResetPwd(record).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete(record).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function batchDelete() {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete({ id: checkedIds.value }).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSubmit(_values: Recordable) {
|
||||||
|
reloadTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleReset(_values: Recordable) {
|
||||||
|
reloadTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleUpdateDeptValue(value) {
|
||||||
|
formParams.value.deptId = Number(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleUpdateRoleValue(value) {
|
||||||
|
formParams.value.roleId = Number(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleUpdatePostValue(value) {
|
||||||
|
formParams.value.postIds = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateBalanceShowModal(value) {
|
||||||
|
showBalanceModal.value = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAddBalance(record: Recordable) {
|
||||||
|
showBalanceModal.value = true;
|
||||||
|
formParams.value = addNewState(record as addState);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateIntegralShowModal(value) {
|
||||||
|
showIntegralModal.value = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAddIntegral(record: Recordable) {
|
||||||
|
showIntegralModal.value = true;
|
||||||
|
formParams.value = addNewState(record as addState);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleInviteQR(code: any) {
|
||||||
|
const domain = getNowUrl() + '#';
|
||||||
|
qrParams.value.qrUrl = domain + LoginRoute.path + '?scope=register&inviteCode=' + code;
|
||||||
|
showQrModal.value = true;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,237 @@
|
|||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { getDeptOption } from '@/api/org/dept';
|
||||||
|
import { getRoleOption } from '@/api/system/role';
|
||||||
|
import { FormSchema, useForm } from '@/components/Form';
|
||||||
|
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||||
|
import { useDictStore, Option } from '@/store/modules/dict';
|
||||||
|
|
||||||
|
// 增加余额/积分.
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
|
||||||
|
export interface addState {
|
||||||
|
id: number;
|
||||||
|
username: string;
|
||||||
|
realName: string;
|
||||||
|
integral: number;
|
||||||
|
balance: number;
|
||||||
|
operateMode: number;
|
||||||
|
num: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const addDefaultState = {
|
||||||
|
id: 0,
|
||||||
|
realName: '',
|
||||||
|
username: '',
|
||||||
|
integral: 0,
|
||||||
|
balance: 0,
|
||||||
|
operateMode: 1,
|
||||||
|
num: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
export function addNewState(state: addState | null): addState {
|
||||||
|
if (state !== null) {
|
||||||
|
return cloneDeep(state);
|
||||||
|
}
|
||||||
|
return cloneDeep(addDefaultState);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const operateModes = [
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
label: '加款',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
label: '扣款',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const addRules = {};
|
||||||
|
|
||||||
|
// 用户列表.
|
||||||
|
|
||||||
|
export const defaultState = {
|
||||||
|
id: 0,
|
||||||
|
roleId: null,
|
||||||
|
realName: '',
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
deptId: null,
|
||||||
|
postIds: null,
|
||||||
|
mobile: '',
|
||||||
|
email: '',
|
||||||
|
sex: 1,
|
||||||
|
leader: '',
|
||||||
|
phone: '',
|
||||||
|
sort: 0,
|
||||||
|
status: 1,
|
||||||
|
createdAt: '',
|
||||||
|
updatedAt: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface State {
|
||||||
|
id: number;
|
||||||
|
roleId: number | null;
|
||||||
|
realName: string;
|
||||||
|
username: string;
|
||||||
|
password: string;
|
||||||
|
deptId: number | null;
|
||||||
|
postIds: any;
|
||||||
|
mobile: string;
|
||||||
|
email: string;
|
||||||
|
sex: number;
|
||||||
|
leader: string;
|
||||||
|
phone: string;
|
||||||
|
sort: number;
|
||||||
|
status: number;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const schemas: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'username',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '用户名',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入用户名',
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: [{ message: '请输入用户名', trigger: ['blur'] }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'realName',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '姓名',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入姓名',
|
||||||
|
showButton: false,
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'mobile',
|
||||||
|
component: 'NInputNumber',
|
||||||
|
label: '手机号',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入手机号码',
|
||||||
|
showButton: false,
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'email',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '邮箱',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入邮箱地址',
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'id',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '用户ID',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入用户ID',
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'pid',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '上级ID',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入上级用户ID',
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
component: 'NSelect',
|
||||||
|
label: '状态',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择类型',
|
||||||
|
options: dict.getOption('sys_normal_disable'),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'created_at',
|
||||||
|
component: 'NDatePicker',
|
||||||
|
label: '创建时间',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
clearable: true,
|
||||||
|
shortcuts: defRangeShortcuts(),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const [register, {}] = useForm({
|
||||||
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||||
|
labelWidth: 80,
|
||||||
|
schemas,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const deptTreeOptions = ref([]);
|
||||||
|
export const roleTreeOptions = ref([]);
|
||||||
|
|
||||||
|
export async function loadOptions() {
|
||||||
|
dict.loadOptions(['adminPostOption', 'sys_user_sex', 'sys_normal_disable']);
|
||||||
|
|
||||||
|
getDeptOption().then((res) => {
|
||||||
|
if (res.list) {
|
||||||
|
deptTreeOptions.value = res.list;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
getRoleOption().then((res) => {
|
||||||
|
if (res.list) {
|
||||||
|
roleTreeOptions.value = res.list;
|
||||||
|
registerRoleTabsOption();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 将角色Tabs选项注册到字典
|
||||||
|
function registerRoleTabsOption() {
|
||||||
|
const items = [{ id: -1, name: '全部' }];
|
||||||
|
treeDataToCompressed(items, roleTreeOptions.value);
|
||||||
|
|
||||||
|
const roleTabs: Option[] = [];
|
||||||
|
for (const item of items) {
|
||||||
|
roleTabs.push(dict.genOption(item.id, item.name));
|
||||||
|
}
|
||||||
|
dict.setOption('roleTabs', roleTabs);
|
||||||
|
}
|
||||||
|
|
||||||
|
function treeDataToCompressed(items: any[], source: any) {
|
||||||
|
for (const i in source) {
|
||||||
|
items.push(source[i]);
|
||||||
|
source[i].children && source[i].children.length > 0
|
||||||
|
? treeDataToCompressed(items, source[i].children)
|
||||||
|
: ''; // 子级递归
|
||||||
|
}
|
||||||
|
return items;
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-card :bordered="false" class="proCard" title="后台用户">
|
||||||
|
<n-tabs
|
||||||
|
type="card"
|
||||||
|
class="card-tabs"
|
||||||
|
:value="defaultTab"
|
||||||
|
animated
|
||||||
|
@before-leave="handleBeforeLeave"
|
||||||
|
>
|
||||||
|
<n-tab-pane
|
||||||
|
:name="item.key.toString()"
|
||||||
|
:tab="item.label"
|
||||||
|
v-for="item in dict.getOptionUnRef('roleTabs')"
|
||||||
|
:key="item.key"
|
||||||
|
>
|
||||||
|
<List :type="defaultTab" />
|
||||||
|
</n-tab-pane>
|
||||||
|
</n-tabs>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import List from './list.vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { loadOptions } from './model';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
const router = useRouter();
|
||||||
|
const defaultTab = ref('-1');
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (router.currentRoute.value.query?.type) {
|
||||||
|
defaultTab.value = router.currentRoute.value.query.type as string;
|
||||||
|
}
|
||||||
|
loadOptions();
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleBeforeLeave(tabName: string): boolean | Promise<boolean> {
|
||||||
|
defaultTab.value = tabName;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
:mask-closable="false"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
transform-origin="center"
|
||||||
|
title="添加菜单"
|
||||||
|
:style="{
|
||||||
|
width: dialogWidth,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<n-scrollbar style="max-height: 87vh" class="pr-5">
|
||||||
|
<n-spin :show="loading" description="请稍候...">
|
||||||
|
<EditForm
|
||||||
|
ref="editFormRef"
|
||||||
|
v-model:formParams="formParams"
|
||||||
|
v-model:treeOption="treeOption"
|
||||||
|
@reloadTable="reloadTable"
|
||||||
|
@closeForm="closeForm"
|
||||||
|
/>
|
||||||
|
</n-spin>
|
||||||
|
</n-scrollbar>
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="closeForm"> 关闭 </n-button>
|
||||||
|
<n-button @click="handleReset"> 重置 </n-button>
|
||||||
|
<n-button type="primary" :loading="formLoading" @click="formSubmit"> 确定添加 </n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { State, newState } from './model';
|
||||||
|
import { adaModalWidth } from '@/utils/hotgo';
|
||||||
|
import EditForm from '@/views/permission/menu/editForm.vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['reloadTable']);
|
||||||
|
const formParams = ref<State>(newState(null));
|
||||||
|
const treeOption = defineModel<any[]>('treeOption');
|
||||||
|
const loading = ref(false);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const editFormRef = ref();
|
||||||
|
const formLoading = computed(() => {
|
||||||
|
return editFormRef.value?.getFormLoading();
|
||||||
|
});
|
||||||
|
|
||||||
|
const dialogWidth = computed(() => {
|
||||||
|
return adaModalWidth(960);
|
||||||
|
});
|
||||||
|
|
||||||
|
function reloadTable() {
|
||||||
|
emit('reloadTable');
|
||||||
|
}
|
||||||
|
|
||||||
|
function openModal(state: State) {
|
||||||
|
showModal.value = true;
|
||||||
|
formParams.value = newState(state);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
editFormRef.value.formSubmit();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleReset() {
|
||||||
|
editFormRef.value.handleReset();
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeForm() {
|
||||||
|
showModal.value = false;
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
openModal,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less"></style>
|
||||||
@@ -0,0 +1,415 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-form
|
||||||
|
:model="formParams"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="100"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-grid cols="2 300:1 600:2">
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="菜单类型" path="type">
|
||||||
|
<n-radio-group
|
||||||
|
v-model:value="formParams.type"
|
||||||
|
name="type"
|
||||||
|
:on-update:value="handleUpdateType"
|
||||||
|
>
|
||||||
|
<n-radio-button
|
||||||
|
v-for="menuType in dict.getOptionUnRef('sys_menu_types')"
|
||||||
|
:key="menuType.value"
|
||||||
|
:value="menuType.value"
|
||||||
|
:label="menuType.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="上级目录" path="pid">
|
||||||
|
<n-cascader
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
:options="filterTreeOption"
|
||||||
|
v-model:value="formParams.pid"
|
||||||
|
value-field="key"
|
||||||
|
label-field="label"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item :label="titleLabel" path="title">
|
||||||
|
<n-input placeholder="请输入" v-model:value="formParams.title" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi v-if="formParams.type !== 3">
|
||||||
|
<n-form-item path="icon">
|
||||||
|
<IconSelector style="width: 100%" v-model:value="formParams.icon" option="antd" />
|
||||||
|
<template #label>
|
||||||
|
<n-tooltip trigger="hover">
|
||||||
|
<template #trigger>
|
||||||
|
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||||
|
</template>
|
||||||
|
请填写图标编码，可以参考图标库，也可以不填使用默认图标
|
||||||
|
</n-tooltip>
|
||||||
|
菜单图标
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi v-if="formParams.type !== 3">
|
||||||
|
<n-form-item path="path">
|
||||||
|
<n-input placeholder="路由地址" v-model:value="formParams.path" />
|
||||||
|
<template #label>
|
||||||
|
<n-tooltip trigger="hover">
|
||||||
|
<template #trigger>
|
||||||
|
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||||
|
</template>
|
||||||
|
请路由地址，如：user
|
||||||
|
</n-tooltip>
|
||||||
|
路由地址
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item path="name">
|
||||||
|
<n-input placeholder="路由别名" v-model:value="formParams.name" />
|
||||||
|
<template #label>
|
||||||
|
<n-tooltip trigger="hover">
|
||||||
|
<template #trigger>
|
||||||
|
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||||
|
</template>
|
||||||
|
对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址 则会新窗口打开
|
||||||
|
</n-tooltip>
|
||||||
|
路由别名
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-grid cols="2 300:1 600:2" v-if="formParams.type !== 3">
|
||||||
|
<n-gi v-if="formParams.type === 1">
|
||||||
|
<n-form-item label="目录组件" path="component">
|
||||||
|
<n-select
|
||||||
|
v-if="formParams.type === 1"
|
||||||
|
:options="dict.getOptionUnRef('sys_menu_component')"
|
||||||
|
v-model:value="formParams.component"
|
||||||
|
placeholder="请选择目录组件"
|
||||||
|
clearable
|
||||||
|
tag
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
|
||||||
|
<n-gi v-if="formParams.type === 2">
|
||||||
|
<n-form-item label="组件路径" path="component">
|
||||||
|
<n-input placeholder="组件路径" v-model:value="formParams.component" />
|
||||||
|
<template #feedback> 填 Vue 组件路径，如：`/system/menu/menu` </template>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi v-if="formParams.type === 1">
|
||||||
|
<n-form-item label="默认跳转" path="redirect">
|
||||||
|
<n-input placeholder="默认路由跳转地址" v-model:value="formParams.redirect" />
|
||||||
|
<template #feedback>当目录下存在多个同级菜单时适用，如：`/system/menu/menu`</template>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-divider title-placement="left">功能设置</n-divider>
|
||||||
|
|
||||||
|
<n-grid cols="1">
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="分配权限" path="permissions">
|
||||||
|
<n-dynamic-tags
|
||||||
|
v-model:value="permissions"
|
||||||
|
:on-update:value="handleUpdatePermissions"
|
||||||
|
type="success"
|
||||||
|
/>
|
||||||
|
<template #label>
|
||||||
|
<n-tooltip trigger="hover">
|
||||||
|
<template #trigger>
|
||||||
|
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||||
|
</template>
|
||||||
|
请填写API路径地址，可同时作用于server端接口鉴权和web端细粒度权限
|
||||||
|
</n-tooltip>
|
||||||
|
分配权限
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-grid cols="2 300:1 600:2">
|
||||||
|
<n-gi v-if="formParams.type !== 3">
|
||||||
|
<n-form-item label="高亮路由" path="activeMenu">
|
||||||
|
<n-input placeholder="高亮路由" v-model:value="formParams.activeMenu" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="菜单排序" path="sort">
|
||||||
|
<n-input-number style="width: 100%" v-model:value="formParams.sort" clearable />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi v-if="formParams.type !== 3">
|
||||||
|
<n-form-item label="内嵌链接" path="frameSrc">
|
||||||
|
<n-input-group>
|
||||||
|
<n-select
|
||||||
|
:style="{ width: '33%', minWidth: '80px' }"
|
||||||
|
:options="dict.getOptionUnRef('sys_switch')"
|
||||||
|
v-model:value="formParams.isFrame"
|
||||||
|
/>
|
||||||
|
<n-input
|
||||||
|
placeholder="格式：http://www.xxx.cn 或 https://www.xxx.cn"
|
||||||
|
v-model:value="formParams.frameSrc"
|
||||||
|
/>
|
||||||
|
</n-input-group>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="菜单状态" path="status">
|
||||||
|
<n-radio-group v-model:value="formParams.status" name="status">
|
||||||
|
<n-radio-button
|
||||||
|
v-for="status in dict.getOptionUnRef('sys_normal_disable')"
|
||||||
|
:key="status.value"
|
||||||
|
:value="status.value"
|
||||||
|
:label="status.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-form-item label="高级选项" path="senior" v-if="formParams.type !== 3">
|
||||||
|
<n-checkbox-group v-model:value="senior" :on-update:value="handleSeniorChecked">
|
||||||
|
<n-space item-style="display: flex;">
|
||||||
|
<n-checkbox value="keepAlive" label="缓存路由" />
|
||||||
|
<n-checkbox value="hidden" label="隐藏菜单" />
|
||||||
|
<n-checkbox value="alwaysShow" label="简化路由" />
|
||||||
|
<n-checkbox value="affix" label="页签固定" />
|
||||||
|
<n-checkbox value="isRoot" label="根路由" />
|
||||||
|
</n-space>
|
||||||
|
</n-checkbox-group>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item path="auth" style="margin-left: 100px" v-if="formParams.id > 0">
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" :loading="loading" @click="formSubmit">保存修改 </n-button>
|
||||||
|
<n-button @click="handleReset">重置</n-button>
|
||||||
|
<n-button @click="handleDel">删除</n-button>
|
||||||
|
</n-space>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { QuestionCircleOutlined } from '@vicons/antd';
|
||||||
|
import IconSelector from '@/components/IconSelector/index.vue';
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import { newState, State } from '@/views/permission/menu/model';
|
||||||
|
import { FormItemRule, useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import { DeleteMenu, EditMenu } from '@/api/system/menu';
|
||||||
|
import { findTreeNode } from '@/utils';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
import type { FormRules } from 'naive-ui/es/form/src/interface';
|
||||||
|
|
||||||
|
const rules: FormRules = {
|
||||||
|
title: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入名称',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入标题',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
path: {
|
||||||
|
required: false,
|
||||||
|
message: '请输入路由地址',
|
||||||
|
trigger: 'blur',
|
||||||
|
validator: function (_rule: FormItemRule, value: any, callback: Function): boolean | Error {
|
||||||
|
if (formParams.value.type != 3 && !value) {
|
||||||
|
callback(new Error('请输入路由地址'));
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const emit = defineEmits(['reloadTable', 'closeForm']);
|
||||||
|
const dict = useDictStore();
|
||||||
|
const message = useMessage();
|
||||||
|
const dialog = useDialog();
|
||||||
|
const loading = ref(false);
|
||||||
|
const formRef = ref();
|
||||||
|
const formParams = defineModel<State>('formParams', { required: true });
|
||||||
|
const treeOption = defineModel<any[]>('treeOption');
|
||||||
|
const titleLabel = computed(() => {
|
||||||
|
const type = formParams.value.type as number;
|
||||||
|
if (type == 1) {
|
||||||
|
return '目录名称';
|
||||||
|
}
|
||||||
|
if (type == 2) {
|
||||||
|
return '菜单名称';
|
||||||
|
}
|
||||||
|
return '按钮名称';
|
||||||
|
});
|
||||||
|
|
||||||
|
const filterTreeOption = computed(() => {
|
||||||
|
const list = cloneDeep(treeOption.value) as any[];
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
const item = list[i];
|
||||||
|
if (item.id === formParams.value.id) {
|
||||||
|
item.disabled = true;
|
||||||
|
if (item.children) {
|
||||||
|
setChildrenDisabled(item.children);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (item.children) {
|
||||||
|
const foundChild = findItemById(item.children, formParams.value.id);
|
||||||
|
if (foundChild) {
|
||||||
|
foundChild.disabled = true;
|
||||||
|
setChildrenDisabled(foundChild.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return list;
|
||||||
|
});
|
||||||
|
|
||||||
|
const senior = computed(() => {
|
||||||
|
let opts: string[] = [];
|
||||||
|
if (formParams.value.keepAlive == 1) {
|
||||||
|
opts.push('keepAlive');
|
||||||
|
}
|
||||||
|
if (formParams.value.hidden == 1) {
|
||||||
|
opts.push('hidden');
|
||||||
|
}
|
||||||
|
if (formParams.value.alwaysShow == 1) {
|
||||||
|
opts.push('alwaysShow');
|
||||||
|
}
|
||||||
|
if (formParams.value.affix == 1) {
|
||||||
|
opts.push('affix');
|
||||||
|
}
|
||||||
|
if (formParams.value.isRoot == 1) {
|
||||||
|
opts.push('isRoot');
|
||||||
|
}
|
||||||
|
return opts;
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleSeniorChecked(_: string, opt: { actionType: 'check' | 'uncheck'; value: string }) {
|
||||||
|
if (opt.actionType == 'check') {
|
||||||
|
formParams.value[opt.value] = 1;
|
||||||
|
} else {
|
||||||
|
formParams.value[opt.value] = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setChildrenDisabled(children: State[]) {
|
||||||
|
if (!children) return;
|
||||||
|
for (let i = 0; i < children.length; i++) {
|
||||||
|
const child = children[i];
|
||||||
|
child.disabled = true;
|
||||||
|
if (child.children) {
|
||||||
|
setChildrenDisabled(child.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function findItemById(children: State[], id: number) {
|
||||||
|
if (!children) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
for (let i = 0; i < children.length; i++) {
|
||||||
|
const item = children[i];
|
||||||
|
if (item.id === id) {
|
||||||
|
return item;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.children) {
|
||||||
|
const child = findItemById(item.children, id);
|
||||||
|
if (child) {
|
||||||
|
return child;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getFormLoading() {
|
||||||
|
return loading.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDel() {
|
||||||
|
dialog.warning({
|
||||||
|
title: '提示',
|
||||||
|
content: `您确定要删除 ` + formParams.value.title + ` 菜单吗?`,
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
DeleteMenu(formParams.value).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
formParams.value = newState(null);
|
||||||
|
emit('reloadTable');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleReset() {
|
||||||
|
const item = findTreeNode(treeOption.value, formParams.value.id);
|
||||||
|
formParams.value = newState(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors: boolean) => {
|
||||||
|
if (!errors) {
|
||||||
|
loading.value = true;
|
||||||
|
EditMenu(formParams.value)
|
||||||
|
.then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
emit('reloadTable');
|
||||||
|
emit('closeForm');
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const permissions = computed(() => {
|
||||||
|
if (formParams.value.permissions.length == 0) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
return formParams.value.permissions.split(',');
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleUpdatePermissions(values: string[]) {
|
||||||
|
formParams.value.permissions = Array.from(new Set(values)).join(',');
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleUpdateType(value: number) {
|
||||||
|
formParams.value.type = value;
|
||||||
|
if (value == 1) {
|
||||||
|
formParams.value.component = null;
|
||||||
|
} else {
|
||||||
|
formParams.value.component = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
const item = findTreeNode(treeOption.value, formParams.value.id);
|
||||||
|
if (item && item.type == value) {
|
||||||
|
formParams.value.component = item.component;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
handleReset,
|
||||||
|
formSubmit,
|
||||||
|
getFormLoading,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less"></style>
|
||||||
@@ -0,0 +1,215 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="n-layout-page-header" v-if="!isModal">
|
||||||
|
<n-card :bordered="false" title="菜单管理">
|
||||||
|
在这里可以管理编辑系统下的所有菜单导航和分配相应的菜单权限
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
<n-grid
|
||||||
|
cols="1 s:1 m:1 l:3 xl:3 2xl:3"
|
||||||
|
responsive="screen"
|
||||||
|
:x-gap="12"
|
||||||
|
>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
|
||||||
|
<template #header>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="info" icon-placement="left" @click="openCreateDrawer">
|
||||||
|
<template #icon>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<n-icon size="14">
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
添加菜单
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
type="info"
|
||||||
|
icon-placement="left"
|
||||||
|
@click="openChildCreateDrawer"
|
||||||
|
:disabled="formParams.id == 0"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<n-icon size="14">
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
添加子菜单
|
||||||
|
</n-button>
|
||||||
|
<n-button type="primary" icon-placement="left" @click="packHandle">
|
||||||
|
全部{{ expandedKeys.length ? '收起' : '展开' }}
|
||||||
|
<template #icon>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<n-icon size="14">
|
||||||
|
<AlignLeftOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
<div class="w-full menu">
|
||||||
|
<n-input type="text" v-model:value="pattern" placeholder="输入菜单名称或权限路径搜索">
|
||||||
|
<template #suffix>
|
||||||
|
<n-icon size="18" class="cursor-pointer">
|
||||||
|
<SearchOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<div class="py-3 menu-list">
|
||||||
|
<template v-if="loading">
|
||||||
|
<div class="flex items-center justify-center py-4">
|
||||||
|
<n-spin size="medium" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<n-tree
|
||||||
|
block-line
|
||||||
|
cascade
|
||||||
|
checkable
|
||||||
|
:virtual-scroll="true"
|
||||||
|
:pattern="pattern"
|
||||||
|
:filter="filterTreeNode"
|
||||||
|
:data="treeOption"
|
||||||
|
:expandedKeys="expandedKeys"
|
||||||
|
style="max-height: 650px; overflow: hidden"
|
||||||
|
@update:selected-keys="selectedTree"
|
||||||
|
@update:expanded-keys="onExpandedKeys"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="2">
|
||||||
|
<n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
|
||||||
|
<template #header>
|
||||||
|
<n-space>
|
||||||
|
<n-icon size="18">
|
||||||
|
<FormOutlined />
|
||||||
|
</n-icon>
|
||||||
|
<span>编辑菜单{{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<n-result
|
||||||
|
v-show="formParams.id == 0"
|
||||||
|
status="info"
|
||||||
|
title="提示"
|
||||||
|
description="从菜单列表中选择一项进行编辑"
|
||||||
|
/>
|
||||||
|
<EditForm
|
||||||
|
v-if="formParams.id > 0"
|
||||||
|
v-model:formParams="formParams"
|
||||||
|
v-model:treeOption="treeOption"
|
||||||
|
@reloadTable="loadTreeOption"
|
||||||
|
/>
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
<AddModal ref="addModalRef" v-model:treeOption="treeOption" @reloadTable="loadTreeOption" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, onMounted, ref, unref } from 'vue';
|
||||||
|
import { AlignLeftOutlined, FormOutlined, PlusOutlined, SearchOutlined } from '@vicons/antd';
|
||||||
|
import { getMenuList } from '@/api/system/menu';
|
||||||
|
import { newState, State, loadOptions } from '@/views/permission/menu/model';
|
||||||
|
import EditForm from '@/views/permission/menu/editForm.vue';
|
||||||
|
import AddModal from '@/views/permission/menu/addModal.vue';
|
||||||
|
|
||||||
|
const addModalRef = ref();
|
||||||
|
const loading = ref(false);
|
||||||
|
const treeOption = ref([]);
|
||||||
|
const pattern = ref('');
|
||||||
|
const expandedKeys = ref([]);
|
||||||
|
const formParams = ref<State>(newState(null));
|
||||||
|
const treeItemTitle = computed(() => {
|
||||||
|
if (formParams.value.id > 0) {
|
||||||
|
return formParams.value.label + ' #' + formParams.value.id;
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
});
|
||||||
|
const isModal = defineModel<boolean>('isModal', { default: false });
|
||||||
|
|
||||||
|
function openCreateDrawer() {
|
||||||
|
addModalRef.value.openModal(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openChildCreateDrawer() {
|
||||||
|
const state = newState(null);
|
||||||
|
state.pid = formParams.value.id;
|
||||||
|
state.type = formParams.value.type;
|
||||||
|
addModalRef.value.openModal(state);
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectedTree(keys: number[], option: any[]) {
|
||||||
|
let item = null;
|
||||||
|
if (keys.length) {
|
||||||
|
item = option[0];
|
||||||
|
}
|
||||||
|
formParams.value = newState(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
function packHandle() {
|
||||||
|
if (expandedKeys.value.length) {
|
||||||
|
expandedKeys.value = [];
|
||||||
|
} else {
|
||||||
|
expandedKeys.value = unref(treeOption).map((item: any) => item.key as string) as [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onExpandedKeys(keys) {
|
||||||
|
expandedKeys.value = keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按名称和权限搜索
|
||||||
|
function filterTreeNode(pattern: string, node: any) {
|
||||||
|
if (!pattern) return true;
|
||||||
|
const searchText = pattern.toLowerCase();
|
||||||
|
|
||||||
|
const label = (node.label || node.title || '').toLowerCase();
|
||||||
|
if (label.includes(searchText)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const permissions = node.permissions || '';
|
||||||
|
if (permissions) {
|
||||||
|
const permissionsLower = permissions.toLowerCase();
|
||||||
|
if (permissionsLower.includes(searchText)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载菜单选项树
|
||||||
|
function loadTreeOption() {
|
||||||
|
const needLoading = treeOption.value.length == 0;
|
||||||
|
if (needLoading) {
|
||||||
|
loading.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
getMenuList()
|
||||||
|
.then((res) => {
|
||||||
|
if (res.list && res.list.length > 0) {
|
||||||
|
treeOption.value = res.list;
|
||||||
|
} else {
|
||||||
|
treeOption.value = [];
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
if (needLoading) {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadTreeOption();
|
||||||
|
loadOptions();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-modal
|
||||||
|
title="菜单管理"
|
||||||
|
v-model:show="showModal"
|
||||||
|
:block-scroll="false"
|
||||||
|
:mask-closable="false"
|
||||||
|
:show-icon="false"
|
||||||
|
:on-after-leave="handleCancel"
|
||||||
|
preset="card"
|
||||||
|
:style="{
|
||||||
|
width: dialogWidth,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<Menu v-model:isModal="isModal" />
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import Menu from './menu.vue';
|
||||||
|
import { adaModalWidth } from '@/utils/hotgo';
|
||||||
|
|
||||||
|
const emit = defineEmits(['reloadTable']);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const isModal = ref(true);
|
||||||
|
const dialogWidth = computed(() => {
|
||||||
|
return adaModalWidth(1280);
|
||||||
|
});
|
||||||
|
|
||||||
|
function openModal() {
|
||||||
|
showModal.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCancel() {
|
||||||
|
emit('reloadTable');
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
openModal,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
|
||||||
|
export interface State {
|
||||||
|
id: number;
|
||||||
|
pid?: number | null;
|
||||||
|
title: string;
|
||||||
|
name: string;
|
||||||
|
path: string;
|
||||||
|
label: string;
|
||||||
|
icon: string;
|
||||||
|
type: number;
|
||||||
|
redirect: string;
|
||||||
|
permissions: string;
|
||||||
|
permissionName: string;
|
||||||
|
component?: string | null;
|
||||||
|
alwaysShow: number;
|
||||||
|
activeMenu: string;
|
||||||
|
isRoot: number;
|
||||||
|
isFrame: number;
|
||||||
|
frameSrc: string;
|
||||||
|
keepAlive: number;
|
||||||
|
hidden: number;
|
||||||
|
affix: number;
|
||||||
|
status: number;
|
||||||
|
sort: number;
|
||||||
|
disabled: boolean;
|
||||||
|
children?: State[] | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const defaultState: State = {
|
||||||
|
id: 0,
|
||||||
|
pid: 0,
|
||||||
|
title: '',
|
||||||
|
name: '',
|
||||||
|
path: '',
|
||||||
|
label: '',
|
||||||
|
icon: '',
|
||||||
|
type: 1,
|
||||||
|
redirect: '',
|
||||||
|
permissions: '',
|
||||||
|
permissionName: '',
|
||||||
|
component: null,
|
||||||
|
alwaysShow: 2,
|
||||||
|
activeMenu: '',
|
||||||
|
isRoot: 2,
|
||||||
|
isFrame: 2,
|
||||||
|
frameSrc: '',
|
||||||
|
keepAlive: 2,
|
||||||
|
hidden: 2,
|
||||||
|
affix: 2,
|
||||||
|
status: 1,
|
||||||
|
sort: 10,
|
||||||
|
disabled: false,
|
||||||
|
children: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
export function newState(state: State | null): State {
|
||||||
|
if (state !== null) {
|
||||||
|
return defaultValueCheck(cloneDeep(state));
|
||||||
|
}
|
||||||
|
return defaultValueCheck(cloneDeep(defaultState));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 默认值校正，主要为了解决历史数据格式不规范问题
|
||||||
|
export function defaultValueCheck(state: State): State {
|
||||||
|
if (!state) {
|
||||||
|
state = newState(null);
|
||||||
|
}
|
||||||
|
if (!state.pid || state.pid < 1) {
|
||||||
|
state.pid = null;
|
||||||
|
}
|
||||||
|
if (state.alwaysShow != 1) {
|
||||||
|
state.alwaysShow = 2;
|
||||||
|
}
|
||||||
|
if (state.isRoot != 1) {
|
||||||
|
state.isRoot = 2;
|
||||||
|
}
|
||||||
|
if (state.isFrame != 1) {
|
||||||
|
state.isFrame = 2;
|
||||||
|
}
|
||||||
|
if (state.keepAlive != 1) {
|
||||||
|
state.keepAlive = 2;
|
||||||
|
}
|
||||||
|
if (state.hidden != 1) {
|
||||||
|
state.hidden = 2;
|
||||||
|
}
|
||||||
|
if (state.affix != 1) {
|
||||||
|
state.affix = 2;
|
||||||
|
}
|
||||||
|
if (state.status != 1) {
|
||||||
|
state.status = 2;
|
||||||
|
}
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载字典数据选项
|
||||||
|
export function loadOptions() {
|
||||||
|
dict.loadOptions(['sys_menu_types', 'sys_menu_component', 'sys_normal_disable', 'sys_switch']);
|
||||||
|
}
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
import { h } from 'vue';
|
||||||
|
import { NTag, NButton } from 'naive-ui';
|
||||||
|
import { HelpCircleOutline } from '@vicons/ionicons5';
|
||||||
|
import { renderTooltip, renderIcon } from '@/utils';
|
||||||
|
export const columns = [
|
||||||
|
// {
|
||||||
|
// title: '角色ID',
|
||||||
|
// key: 'id',
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
title(_column) {
|
||||||
|
return renderTooltip(
|
||||||
|
h(
|
||||||
|
NButton,
|
||||||
|
{
|
||||||
|
strong: true,
|
||||||
|
size: 'small',
|
||||||
|
text: true,
|
||||||
|
iconPlacement: 'right',
|
||||||
|
},
|
||||||
|
{ default: () => '角色', icon: renderIcon(HelpCircleOutline) }
|
||||||
|
),
|
||||||
|
'支持上下级角色，点击列表中左侧 > 按钮可展开下级角色列表'
|
||||||
|
);
|
||||||
|
},
|
||||||
|
key: 'name',
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
type: 'info',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => row.name,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '角色编码',
|
||||||
|
key: 'key',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title: '上级角色',
|
||||||
|
// key: 'pid',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: '默认角色',
|
||||||
|
// key: 'isDefault',
|
||||||
|
// render(row) {
|
||||||
|
// return h(
|
||||||
|
// NTag,
|
||||||
|
// {
|
||||||
|
// type: row.id == 1 ? 'success' : 'error',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// default: () => (row.id == 1 ? '是' : '否'),
|
||||||
|
// }
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
// width: 80,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: '排序',
|
||||||
|
// key: 'sort',
|
||||||
|
// width: 100,
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
title: '备注',
|
||||||
|
key: 'remark',
|
||||||
|
width: 180,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
key: 'status',
|
||||||
|
width: 80,
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: row.status == 1 ? 'info' : 'error',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => (row.status == 1 ? '正常' : '已禁用'),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'createdAt',
|
||||||
|
width: 180,
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -0,0 +1,117 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
:mask-closable="false"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
transform-origin="center"
|
||||||
|
:title="'修改 ' + formValue.name + ' 的数据权限'"
|
||||||
|
>
|
||||||
|
<n-scrollbar style="max-height: 87vh" class="pr-5">
|
||||||
|
<n-spin :show="loading" description="请稍候...">
|
||||||
|
<n-form
|
||||||
|
:model="formValue"
|
||||||
|
ref="formRef"
|
||||||
|
:label-placement="settingStore.isMobile ? 'top' : 'left'"
|
||||||
|
:label-width="100"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-form-item label="数据范围" path="dataScope">
|
||||||
|
<n-select v-model:value="formValue.dataScope" :options="dataScopeOption" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="自定义权限" path="customDept" v-if="formValue.dataScope === 4">
|
||||||
|
<n-tree-select
|
||||||
|
multiple
|
||||||
|
key-field="id"
|
||||||
|
label-field="name"
|
||||||
|
:options="deptList"
|
||||||
|
v-model:value="formValue.customDept"
|
||||||
|
:default-expand-all="true"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
</n-scrollbar>
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="closeForm">取消</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { DataScopeEdit, DataScopeSelect } from '@/api/system/role';
|
||||||
|
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { newState, State } from '@/views/permission/role/model';
|
||||||
|
import { getDeptList } from '@/api/org/dept';
|
||||||
|
|
||||||
|
const emit = defineEmits(['reloadTable']);
|
||||||
|
const message = useMessage();
|
||||||
|
const settingStore = useProjectSettingStore();
|
||||||
|
const loading = ref(false);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formValue = ref<State>(newState(null));
|
||||||
|
const formRef = ref();
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const dataScopeOption = ref<any>([]);
|
||||||
|
const deptList = ref<any>([]);
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
DataScopeEdit(formValue.value).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
showModal.value = false;
|
||||||
|
emit('reloadTable');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeForm() {
|
||||||
|
showModal.value = false;
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadDataScopeSelect() {
|
||||||
|
const res = await DataScopeSelect();
|
||||||
|
if (res.list) {
|
||||||
|
dataScopeOption.value = res.list;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadDeptList() {
|
||||||
|
const res = await getDeptList({});
|
||||||
|
if (res.list) {
|
||||||
|
deptList.value = res.list;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function openModal(record: Recordable) {
|
||||||
|
showModal.value = true;
|
||||||
|
loading.value = true;
|
||||||
|
formValue.value = newState(record);
|
||||||
|
await loadDeptList();
|
||||||
|
await loadDataScopeSelect();
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
openModal,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less"></style>
|
||||||
@@ -0,0 +1,221 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-drawer v-model:show="showModal" :width="dialogWidth" :show-icon="false" preset="dialog">
|
||||||
|
<n-drawer-content closable :title="`分配 ${formValue.name} 的菜单权限`">
|
||||||
|
<n-spin :show="loading" description="请稍候...">
|
||||||
|
<div :style="{ maxHeight: '78vh', height: '78vh' }">
|
||||||
|
<n-input v-model:value="pattern" placeholder="输入菜单名称或权限路径搜索" class="mb-2">
|
||||||
|
<template #suffix>
|
||||||
|
<n-icon size="18" class="cursor-pointer">
|
||||||
|
<SearchOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<n-tree
|
||||||
|
block-line
|
||||||
|
checkable
|
||||||
|
check-on-click
|
||||||
|
default-expand-all
|
||||||
|
virtual-scroll
|
||||||
|
:data="treeData"
|
||||||
|
:pattern="pattern"
|
||||||
|
:filter="filterTreeNode"
|
||||||
|
:expandedKeys="expandedKeys"
|
||||||
|
:checked-keys="checkedKeys"
|
||||||
|
style="max-height: 950px; overflow: hidden"
|
||||||
|
@update:checked-keys="checkedTree"
|
||||||
|
@update:expanded-keys="onExpandedKeys"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</n-spin>
|
||||||
|
<template #footer>
|
||||||
|
<n-space v-if="showImportSelect">
|
||||||
|
<n-input-group>
|
||||||
|
<n-tree-select
|
||||||
|
placeholder="请选择一个要导入的角色"
|
||||||
|
:consistent-menu-width="false"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
default-expand-all
|
||||||
|
:options="editRoleOption"
|
||||||
|
key-field="id"
|
||||||
|
label-field="name"
|
||||||
|
:on-update:value="handleImportSelect"
|
||||||
|
style="width: 300px"
|
||||||
|
/>
|
||||||
|
<div class="mr-2"></div>
|
||||||
|
<n-button ghost @click="showImportSelect = false"> 取消 </n-button>
|
||||||
|
</n-input-group>
|
||||||
|
</n-space>
|
||||||
|
|
||||||
|
<n-space v-if="!showImportSelect">
|
||||||
|
<n-button ghost @click="showImportSelect = true"> 导入权限 </n-button>
|
||||||
|
<n-button type="info" ghost icon-placement="left" @click="packHandle">
|
||||||
|
全部{{ expandedKeys.length ? '收起' : '展开' }}
|
||||||
|
</n-button>
|
||||||
|
<n-button type="info" ghost icon-placement="left" @click="checkedAllHandle">
|
||||||
|
全部{{ checkedAll ? '取消' : '选择' }}
|
||||||
|
</n-button>
|
||||||
|
|
||||||
|
<n-popconfirm @positive-click="confirmForm">
|
||||||
|
<template #trigger>
|
||||||
|
<n-button type="primary" :loading="formBtnLoading">提交</n-button>
|
||||||
|
</template>
|
||||||
|
你正在修改 {{ formValue.name }} 的菜单权限，确定要提交吗？
|
||||||
|
</n-popconfirm>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-drawer-content>
|
||||||
|
</n-drawer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import { GetPermissions, getRoleList, UpdatePermissions } from '@/api/system/role';
|
||||||
|
import { NButton, useMessage } from 'naive-ui';
|
||||||
|
import { adaModalWidth, getTreeKeys } from '@/utils/hotgo';
|
||||||
|
import { findTreeNode, getAllExpandKeys } from '@/utils';
|
||||||
|
import { getMenuList } from '@/api/system/menu';
|
||||||
|
import { SearchOutlined } from '@vicons/antd';
|
||||||
|
import { State, newState } from '@/views/permission/role/model';
|
||||||
|
|
||||||
|
const emit = defineEmits(['reloadTable']);
|
||||||
|
const message = useMessage();
|
||||||
|
const loading = ref(false);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formValue = ref<State>(newState(null));
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const rawRoleOption = ref<State[]>([]);
|
||||||
|
const checkedAll = ref(false);
|
||||||
|
const treeData = ref([]);
|
||||||
|
const expandedKeys = ref<any[]>([]);
|
||||||
|
const checkedKeys = ref<any[]>([]);
|
||||||
|
const pattern = ref('');
|
||||||
|
const showImportSelect = ref(false);
|
||||||
|
|
||||||
|
const editRoleOption = computed<State[]>(() => {
|
||||||
|
if (!rawRoleOption.value) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const role = findTreeNode(rawRoleOption.value, formValue.value.id, 'id');
|
||||||
|
if (role) {
|
||||||
|
role.disabled = true;
|
||||||
|
}
|
||||||
|
return rawRoleOption.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
const dialogWidth = computed(() => {
|
||||||
|
return adaModalWidth(630);
|
||||||
|
});
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
const params = {
|
||||||
|
id: formValue.value.id,
|
||||||
|
menuIds: checkedKeys.value ?? [],
|
||||||
|
};
|
||||||
|
UpdatePermissions(params)
|
||||||
|
.then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
showModal.value = false;
|
||||||
|
emit('reloadTable');
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkedTree(keys) {
|
||||||
|
checkedKeys.value = keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onExpandedKeys(keys) {
|
||||||
|
expandedKeys.value = keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function packHandle() {
|
||||||
|
if (expandedKeys.value.length) {
|
||||||
|
expandedKeys.value = [];
|
||||||
|
} else {
|
||||||
|
expandedKeys.value = getAllExpandKeys(treeData) as [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkedAllHandle() {
|
||||||
|
if (!checkedAll.value) {
|
||||||
|
checkedKeys.value = getTreeKeys(treeData.value);
|
||||||
|
checkedAll.value = true;
|
||||||
|
} else {
|
||||||
|
checkedKeys.value = [];
|
||||||
|
checkedAll.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按名称和权限搜索
|
||||||
|
function filterTreeNode(pattern: string, node: any) {
|
||||||
|
if (!pattern) return true;
|
||||||
|
const searchText = pattern.toLowerCase();
|
||||||
|
|
||||||
|
const label = (node.label || node.title || '').toLowerCase();
|
||||||
|
if (label.includes(searchText)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const permissions = node.permissions || '';
|
||||||
|
if (permissions) {
|
||||||
|
const permissionsLower = permissions.toLowerCase();
|
||||||
|
if (permissionsLower.includes(searchText)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleImportSelect(key: number) {
|
||||||
|
showImportSelect.value = false;
|
||||||
|
showModal.value = true;
|
||||||
|
getPermissions(key);
|
||||||
|
|
||||||
|
// 默认全部展开
|
||||||
|
expandedKeys.value = getAllExpandKeys(treeData);
|
||||||
|
message.success('导入成功，提交后生效');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadMenuList() {
|
||||||
|
const res = await getMenuList();
|
||||||
|
expandedKeys.value = getAllExpandKeys(res.list) as [];
|
||||||
|
treeData.value = res.list;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getPermissions(id: number) {
|
||||||
|
checkedKeys.value = [];
|
||||||
|
checkedAll.value = false;
|
||||||
|
const res = await GetPermissions({ id: id });
|
||||||
|
checkedKeys.value = res.menuIds;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadDataList() {
|
||||||
|
const res = await getRoleList({ pageSize: 100, page: 1 });
|
||||||
|
rawRoleOption.value = res.list;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function openModal(record: Recordable) {
|
||||||
|
loading.value = true;
|
||||||
|
formValue.value = newState(record);
|
||||||
|
showModal.value = true;
|
||||||
|
await loadMenuList();
|
||||||
|
await getPermissions(record.id);
|
||||||
|
await loadDataList();
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
openModal,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,146 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
:mask-closable="false"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
transform-origin="center"
|
||||||
|
:title="formValue.id > 0 ? '编辑角色 #' + formValue.id : '添加角色'"
|
||||||
|
>
|
||||||
|
<n-scrollbar style="max-height: 87vh" class="pr-5">
|
||||||
|
<n-spin :show="loading" description="请稍候...">
|
||||||
|
<n-form
|
||||||
|
:model="formValue"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
:label-placement="settingStore.isMobile ? 'top' : 'left'"
|
||||||
|
:label-width="100"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-form-item label="上级角色" path="pid">
|
||||||
|
<n-tree-select
|
||||||
|
:options="editRoleOption"
|
||||||
|
v-model:value="formValue.pid"
|
||||||
|
key-field="id"
|
||||||
|
label-field="name"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
default-expand-all
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="角色名称" path="name">
|
||||||
|
<n-input placeholder="请输入名称" v-model:value="formValue.name" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="角色编码" path="key">
|
||||||
|
<n-input placeholder="请输入" v-model:value="formValue.key" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="排序" path="sort">
|
||||||
|
<n-input-number v-model:value="formValue.sort" clearable style="width: 100%" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="状态" path="status">
|
||||||
|
<n-radio-group v-model:value="formValue.status" name="status">
|
||||||
|
<n-radio-button
|
||||||
|
v-for="status in statusOptions"
|
||||||
|
:key="status.value"
|
||||||
|
:value="status.value"
|
||||||
|
:label="status.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="备注" path="remark">
|
||||||
|
<n-input type="textarea" placeholder="请输入" v-model:value="formValue.remark" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
</n-scrollbar>
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="closeForm">取消</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import { Edit, getRoleList } from '@/api/system/role';
|
||||||
|
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { statusOptions } from '@/enums/optionsiEnum';
|
||||||
|
import { newState, State } from '@/views/permission/role/model';
|
||||||
|
|
||||||
|
const emit = defineEmits(['reloadTable']);
|
||||||
|
const message = useMessage();
|
||||||
|
const settingStore = useProjectSettingStore();
|
||||||
|
const loading = ref(false);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formValue = ref<State>(newState(null));
|
||||||
|
const formRef = ref();
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const rawRoleOption = ref([]);
|
||||||
|
|
||||||
|
const editRoleOption = computed(() => {
|
||||||
|
return rawRoleOption.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
name: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
message: '请输入名称',
|
||||||
|
},
|
||||||
|
key: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
message: '请输入角色编码',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
Edit(formValue.value).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
showModal.value = false;
|
||||||
|
emit('reloadTable');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeForm() {
|
||||||
|
showModal.value = false;
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadDataList() {
|
||||||
|
loading.value = true;
|
||||||
|
getRoleList({ pageSize: 100, page: 1 }).then((res) => {
|
||||||
|
rawRoleOption.value = res.list;
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function openModal(record: Recordable) {
|
||||||
|
loadDataList();
|
||||||
|
showModal.value = true;
|
||||||
|
formValue.value = newState(record);
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
openModal,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less"></style>
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
|
||||||
|
export class State {
|
||||||
|
id = 0;
|
||||||
|
name = '';
|
||||||
|
key = '';
|
||||||
|
dataScope = 1;
|
||||||
|
customDept: any[] = [];
|
||||||
|
pid = 0;
|
||||||
|
level = 1;
|
||||||
|
tree = '';
|
||||||
|
remark = '';
|
||||||
|
sort = 0;
|
||||||
|
status = 1;
|
||||||
|
createdAt = '';
|
||||||
|
updatedAt = '';
|
||||||
|
label = '';
|
||||||
|
value = 0;
|
||||||
|
children: State[] | null = null;
|
||||||
|
|
||||||
|
constructor(state?: Partial<State>) {
|
||||||
|
if (state) {
|
||||||
|
Object.keys(this).forEach((key) => {
|
||||||
|
if (state[key] !== undefined) {
|
||||||
|
this[key] = state[key];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function newState(state: State | Record<string, any> | null): State {
|
||||||
|
if (state !== null) {
|
||||||
|
if (state instanceof State) {
|
||||||
|
return cloneDeep(state);
|
||||||
|
}
|
||||||
|
return new State(state);
|
||||||
|
}
|
||||||
|
return new State();
|
||||||
|
}
|
||||||
@@ -0,0 +1,153 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-card :bordered="false" class="proCard" title="角色管理">
|
||||||
|
<n-space vertical :size="12">
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" @click="addTable">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
添加角色
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
|
||||||
|
<n-data-table
|
||||||
|
v-if="dataSource.length > 0 || !loading"
|
||||||
|
:columns="columns.concat(actionColumn)"
|
||||||
|
:data="dataSource"
|
||||||
|
:row-key="(row) => row.id"
|
||||||
|
:loading="loading"
|
||||||
|
:resizeHeightOffset="-20000"
|
||||||
|
default-expand-all
|
||||||
|
/>
|
||||||
|
</n-space>
|
||||||
|
</n-card>
|
||||||
|
|
||||||
|
<EditRole ref="editRoleRef" @reloadTable="reloadTable" />
|
||||||
|
<EditMenuAuth ref="editMenuAuthRef" @reloadTable="reloadTable" />
|
||||||
|
<EditDataAuth ref="editDataAuthRef" @reloadTable="reloadTable" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { h, onMounted, reactive, ref } from 'vue';
|
||||||
|
import { NButton, useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { BasicColumn, TableAction } from '@/components/Table';
|
||||||
|
import { Delete, getRoleList } from '@/api/system/role';
|
||||||
|
import { columns } from './columns';
|
||||||
|
import { PlusOutlined } from '@vicons/antd';
|
||||||
|
import EditRole from './editRole.vue';
|
||||||
|
import EditMenuAuth from './editMenuAuth.vue';
|
||||||
|
import EditDataAuth from './editDataAuth.vue';
|
||||||
|
import { newState } from '@/views/permission/role/model';
|
||||||
|
|
||||||
|
const message = useMessage();
|
||||||
|
const dialog = useDialog();
|
||||||
|
const loading = ref(false);
|
||||||
|
const dataSource = ref<any>([]);
|
||||||
|
const editRoleRef = ref();
|
||||||
|
const editMenuAuthRef = ref();
|
||||||
|
const editDataAuthRef = ref();
|
||||||
|
|
||||||
|
const actionColumn = reactive<BasicColumn>({
|
||||||
|
width: 200,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
render(record) {
|
||||||
|
return h(TableAction, {
|
||||||
|
style: 'primary',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '菜单权限',
|
||||||
|
onClick: handleMenuAuth.bind(null, record),
|
||||||
|
ifShow: () => {
|
||||||
|
return record.id !== 1;
|
||||||
|
},
|
||||||
|
type: 'default',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数据权限',
|
||||||
|
onClick: handleDataAuth.bind(null, record),
|
||||||
|
ifShow: () => {
|
||||||
|
return record.id !== 1;
|
||||||
|
},
|
||||||
|
type: 'default',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '添加子角色',
|
||||||
|
onClick: handleAddSub.bind(null, record),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
onClick: handleEdit.bind(null, record),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
onClick: handleDelete.bind(null, record),
|
||||||
|
ifShow: () => {
|
||||||
|
return record.id !== 1;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function loadDataTable() {
|
||||||
|
loading.value = true;
|
||||||
|
getRoleList({ pageSize: 100, page: 1 }).then((res) => {
|
||||||
|
dataSource.value = res.list ?? [];
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function reloadTable() {
|
||||||
|
loadDataTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
function addTable() {
|
||||||
|
editRoleRef.value.openModal(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit(record: Recordable) {
|
||||||
|
editRoleRef.value.openModal(record);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAddSub(record: Recordable) {
|
||||||
|
let state = newState(null);
|
||||||
|
state.pid = record.id;
|
||||||
|
editRoleRef.value.openModal(state);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete(record).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleMenuAuth(record: Recordable) {
|
||||||
|
editMenuAuthRef.value.openModal(record);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDataAuth(record: Recordable) {
|
||||||
|
editDataAuthRef.value.openModal(record);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadDataTable();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
<script lang="tsx">
|
||||||
|
import { defineComponent, onBeforeMount } from 'vue';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import { NEmpty } from 'naive-ui';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Redirect',
|
||||||
|
setup() {
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
onBeforeMount(() => {
|
||||||
|
const { params, query } = route;
|
||||||
|
const { path } = params;
|
||||||
|
router.replace({
|
||||||
|
path: '/' + (Array.isArray(path) ? path.join('/') : path),
|
||||||
|
query,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return () => <NEmpty />;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,344 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-card :bordered="false" class="proCard" title="访问黑名单">
|
||||||
|
<BasicForm
|
||||||
|
@register="register"
|
||||||
|
@submit="handleSubmit"
|
||||||
|
@reset="handleReset"
|
||||||
|
@keyup.enter="handleSubmit"
|
||||||
|
ref="searchFormRef"
|
||||||
|
>
|
||||||
|
<template #statusSlot="{ model, field }">
|
||||||
|
<n-input v-model:value="model[field]" />
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
|
|
||||||
|
<BasicTable
|
||||||
|
:openChecked="true"
|
||||||
|
:columns="columns"
|
||||||
|
:request="loadDataTable"
|
||||||
|
:row-key="(row) => row.id"
|
||||||
|
ref="actionRef"
|
||||||
|
:actionColumn="actionColumn"
|
||||||
|
@update:checked-row-keys="onCheckedRow"
|
||||||
|
:scroll-x="1090"
|
||||||
|
:resizeHeightOffset="-10000"
|
||||||
|
>
|
||||||
|
<template #tableTitle>
|
||||||
|
<n-button type="primary" @click="addTable">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
添加策略
|
||||||
|
</n-button>
|
||||||
|
|
||||||
|
<n-button type="error" @click="batchDelete" :disabled="batchDeleteDisabled">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<DeleteOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
批量删除
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
:title="formParams?.id > 0 ? '编辑策略 #' + formParams.id : '添加策略'"
|
||||||
|
style="width: 720px"
|
||||||
|
>
|
||||||
|
<n-form
|
||||||
|
:model="formParams"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="80"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-form-item label="IP策略" path="ip">
|
||||||
|
<n-input type="textarea" placeholder="请输入IP策略" v-model:value="formParams.ip" />
|
||||||
|
<template #feedback>
|
||||||
|
<p>支持添加IP：如果添加多个IP请用","隔开</p>
|
||||||
|
<p>支持添加IP段,如：192.168.0.0/24</p>
|
||||||
|
<p>支持添加IP范围,格式如：192.168.1.xx-192.168.1.xx</p>
|
||||||
|
<br />
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="状态" path="status">
|
||||||
|
<n-radio-group v-model:value="formParams.status" name="status">
|
||||||
|
<n-radio-button
|
||||||
|
v-for="status in dict.getOptionUnRef('BlacklistStatusOptions')"
|
||||||
|
:key="status.value"
|
||||||
|
:value="status.value"
|
||||||
|
:label="status.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="备注" path="remark">
|
||||||
|
<n-input type="textarea" placeholder="请输入备注" v-model:value="formParams.remark" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="() => (showModal = false)">取消</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { h, onMounted, reactive, ref } from 'vue';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { BasicTable, TableAction } from '@/components/Table';
|
||||||
|
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
|
||||||
|
import { Delete, Edit, List, Status } from '@/api/sys/blacklist';
|
||||||
|
import { DeleteOutlined, PlusOutlined } from '@vicons/antd';
|
||||||
|
import { statusActions } from '@/enums/optionsiEnum';
|
||||||
|
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
import { renderOptionTag } from '@/utils';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: 'ID',
|
||||||
|
key: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'IP地址',
|
||||||
|
key: 'ip',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '备注',
|
||||||
|
key: 'remark',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
key: 'status',
|
||||||
|
render(row) {
|
||||||
|
return renderOptionTag('BlacklistStatusOptions', row.status);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'createdAt',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const params = ref<any>({
|
||||||
|
pageSize: 10,
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
status: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules = {};
|
||||||
|
|
||||||
|
const schemas = ref<FormSchema[]>([
|
||||||
|
{
|
||||||
|
field: 'ip',
|
||||||
|
component: 'NInput',
|
||||||
|
label: 'IP地址',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入IP地址',
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: [{ message: '请输入IP地址', trigger: ['blur'] }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
component: 'NSelect',
|
||||||
|
label: '状态',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择类型',
|
||||||
|
options: dict.getOption('BlacklistStatusOptions'),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'created_at',
|
||||||
|
component: 'NDatePicker',
|
||||||
|
label: '创建时间',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
clearable: true,
|
||||||
|
shortcuts: defRangeShortcuts(),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'remark',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '备注',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入备注',
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: [{ message: '请输入备注', trigger: ['blur'] }],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const message = useMessage();
|
||||||
|
const actionRef = ref();
|
||||||
|
const dialog = useDialog();
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const searchFormRef = ref<any>({});
|
||||||
|
const formRef = ref<any>({});
|
||||||
|
const batchDeleteDisabled = ref(true);
|
||||||
|
const checkedIds = ref([]);
|
||||||
|
|
||||||
|
const resetFormParams = {
|
||||||
|
id: 0,
|
||||||
|
ip: '',
|
||||||
|
remark: '',
|
||||||
|
sort: 0,
|
||||||
|
status: 1,
|
||||||
|
};
|
||||||
|
const formParams = ref<any>(resetFormParams);
|
||||||
|
|
||||||
|
const actionColumn = reactive({
|
||||||
|
width: 150,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
render(record) {
|
||||||
|
return h(TableAction as any, {
|
||||||
|
style: 'button',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
onClick: handleEdit.bind(null, record),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
onClick: handleDelete.bind(null, record),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [register, {}] = useForm({
|
||||||
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||||
|
labelWidth: 80,
|
||||||
|
schemas,
|
||||||
|
});
|
||||||
|
|
||||||
|
function addTable() {
|
||||||
|
showModal.value = true;
|
||||||
|
formParams.value = resetFormParams;
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadDataTable = async (res) => {
|
||||||
|
return await List({ ...params.value, ...res, ...searchFormRef.value?.formModel });
|
||||||
|
};
|
||||||
|
|
||||||
|
function onCheckedRow(rowKeys) {
|
||||||
|
batchDeleteDisabled.value = rowKeys.length <= 0;
|
||||||
|
checkedIds.value = rowKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
Edit(formParams.value)
|
||||||
|
.then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
showModal.value = false;
|
||||||
|
reloadTable();
|
||||||
|
formParams.value = ref(resetFormParams);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e: Error) => {
|
||||||
|
message.error(e.message ?? '操作失败');
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit(record: Recordable) {
|
||||||
|
showModal.value = true;
|
||||||
|
formParams.value = record;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete(record).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function batchDelete() {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete({ id: checkedIds.value })
|
||||||
|
.then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
reloadTable();
|
||||||
|
})
|
||||||
|
.catch((e: Error) => {
|
||||||
|
message.error(e.message ?? '操作失败');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSubmit(values: Recordable) {
|
||||||
|
params.value = values;
|
||||||
|
reloadTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleReset(values: Recordable) {
|
||||||
|
params.value = values;
|
||||||
|
reloadTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
dict.loadOptions(['BlacklistStatusOptions']);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,142 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-spin :show="show" description="请稍候...">
|
||||||
|
<n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
|
||||||
|
<n-form-item label="网站名称" path="basicName">
|
||||||
|
<n-input v-model:value="formValue.basicName" placeholder="请输入网站名称" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="网站logo" path="basicLogo">
|
||||||
|
<FileChooser v-model:value="formValue.basicLogo" file-type="image" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="网站域名" path="basicDomain">
|
||||||
|
<n-input v-model:value="formValue.basicDomain" placeholder="请输入网站域名" />
|
||||||
|
<template #feedback>
|
||||||
|
如果客户端通过本地或内网访问，则认为是调试模式，走实际请求地址，否则走该配置
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="websocket地址" path="basicWsAddr">
|
||||||
|
<n-input v-model:value="formValue.basicWsAddr" placeholder="请输入websocket地址" />
|
||||||
|
<template #feedback>
|
||||||
|
如果客户端通过本地或内网访问，则认为是调试模式，走实际请求地址，否则走该配置
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="网站开启访问" path="basicSystemOpen">
|
||||||
|
<n-switch
|
||||||
|
size="large"
|
||||||
|
v-model:value="formValue.basicSystemOpen"
|
||||||
|
@update:value="systemOpenChange"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="网站关闭提示" path="basicCloseText">
|
||||||
|
<n-input
|
||||||
|
v-model:value="formValue.basicCloseText"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入网站关闭提示"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="备案编号" path="basicIcpCode">
|
||||||
|
<n-input placeholder="请输入备案编号" v-model:value="formValue.basicIcpCode" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="版权所有" path="basicCopyright">
|
||||||
|
<n-input placeholder="版权所有" v-model:value="formValue.basicCopyright" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" @click="formSubmit">保存更新</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { getConfig, updateConfig } from '@/api/sys/config';
|
||||||
|
import FileChooser from '@/components/FileChooser/index.vue';
|
||||||
|
|
||||||
|
const group = ref('basic');
|
||||||
|
const show = ref(false);
|
||||||
|
const formRef: any = ref(null);
|
||||||
|
const message = useMessage();
|
||||||
|
const dialog = useDialog();
|
||||||
|
|
||||||
|
const formValue = ref({
|
||||||
|
basicName: 'HotGo',
|
||||||
|
basicLogo: '',
|
||||||
|
basicDomain: 'https://hotgo.facms.cn',
|
||||||
|
basicWsAddr: 'wss://hotgo.facms.cn/socket',
|
||||||
|
basicIcpCode: '',
|
||||||
|
basicLoginCode: 0,
|
||||||
|
basicRegisterSwitch: 1,
|
||||||
|
basicCaptchaSwitch: 1,
|
||||||
|
basicCopyright: '© 2021 - 2023 HotGo All Rights Reserved.',
|
||||||
|
basicCloseText:
|
||||||
|
'网站维护中，暂时无法访问！本网站正在进行系统维护和技术升级，网站暂时无法访问，敬请谅解！',
|
||||||
|
basicSystemOpen: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
basicName: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入网站名称',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
function systemOpenChange(value) {
|
||||||
|
if (!value) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '提示',
|
||||||
|
content: '您确定要关闭系统访问吗？该操作保存后立马生效，请慎重操作！',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
// message.success('操作成功');
|
||||||
|
},
|
||||||
|
onNegativeClick: () => {
|
||||||
|
formValue.value.basicSystemOpen = true;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
|
||||||
|
message.success('更新成功');
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('验证失败，请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
|
||||||
|
function load() {
|
||||||
|
show.value = true;
|
||||||
|
new Promise((_resolve, _reject) => {
|
||||||
|
getConfig({ group: group.value })
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value = res.list;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
show.value = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-spin :show="show" description="请稍候...">
|
||||||
|
<n-form :label-width="100" :model="formValue" :rules="rules" ref="formRef">
|
||||||
|
<n-form-item label="申请提现开关" path="cashSwitch">
|
||||||
|
<n-radio-group v-model:value="formValue.cashSwitch" name="cashSwitch">
|
||||||
|
<n-space>
|
||||||
|
<n-radio :value="1">开启</n-radio>
|
||||||
|
<n-radio :value="2">关闭</n-radio>
|
||||||
|
</n-space>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="提现最低手续费（元）" path="cashMinFee">
|
||||||
|
<n-input-number placeholder="" v-model:value="formValue.cashMinFee" style="width: 100%" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="提现最低手续费比率" path="cashMinFeeRatio">
|
||||||
|
<n-input-number
|
||||||
|
placeholder=""
|
||||||
|
v-model:value="formValue.cashMinFeeRatio"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="提现最低金额" path="cashMinMoney">
|
||||||
|
<n-input-number
|
||||||
|
placeholder=""
|
||||||
|
v-model:value="formValue.cashMinMoney"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="提现提示信息" path="cashTips">
|
||||||
|
<Editor style="height: 320px" v-model:value="formValue.cashTips" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" @click="formSubmit">保存更新</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { getConfig, updateConfig } from '@/api/sys/config';
|
||||||
|
import Editor from '@/components/Editor/editor.vue';
|
||||||
|
|
||||||
|
const group = ref('cash');
|
||||||
|
const show = ref(false);
|
||||||
|
const rules = {};
|
||||||
|
const formRef: any = ref(null);
|
||||||
|
const message = useMessage();
|
||||||
|
const formValue = ref({
|
||||||
|
cashSwitch: '',
|
||||||
|
cashMinFee: 0,
|
||||||
|
cashMinFeeRatio: 0,
|
||||||
|
cashMinMoney: 0,
|
||||||
|
cashTips: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
updateConfig({ group: group.value, list: formValue.value })
|
||||||
|
.then((_res) => {
|
||||||
|
message.success('更新成功');
|
||||||
|
load();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
message.error(error.toString());
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('验证失败，请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
|
||||||
|
function load() {
|
||||||
|
show.value = true;
|
||||||
|
new Promise((_resolve, _reject) => {
|
||||||
|
getConfig({ group: group.value })
|
||||||
|
.then((res) => {
|
||||||
|
show.value = false;
|
||||||
|
formValue.value = res.list;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
show.value = false;
|
||||||
|
message.error(error.toString());
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,210 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-spin :show="show" description="请稍候...">
|
||||||
|
<n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
|
||||||
|
<n-form-item label="SMTP服务器" path="smtpHost">
|
||||||
|
<n-input v-model:value="formValue.smtpHost" placeholder="" />
|
||||||
|
<template #feedback> 错误的配置发送邮件会导致服务器超时</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="SMTP端口" path="smtpPort">
|
||||||
|
<n-input-number v-model:value="formValue.smtpPort" placeholder="" :show-button="false" />
|
||||||
|
<template #feedback> (不加密默认25,SSL默认465,TLS默认587)</template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="SMTP用户名" path="smtpUser">
|
||||||
|
<n-input v-model:value="formValue.smtpUser" placeholder="" />
|
||||||
|
<template #feedback>填写完整用户名</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="SMTP密码" path="smtpPass">
|
||||||
|
<n-input
|
||||||
|
v-model:value="formValue.smtpPass"
|
||||||
|
placeholder=""
|
||||||
|
type="password"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #password-visible-icon>
|
||||||
|
<n-icon :size="16" :component="GlassesOutline" />
|
||||||
|
</template>
|
||||||
|
<template #password-invisible-icon>
|
||||||
|
<n-icon :size="16" :component="Glasses" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<template #feedback>填写您的密码</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="发件人名称" path="smtpSendName">
|
||||||
|
<n-input v-model:value="formValue.smtpSendName" placeholder="" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="管理员邮箱" path="smtpAdminMailbox">
|
||||||
|
<n-input v-model:value="formValue.smtpAdminMailbox" placeholder="" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-divider title-placement="left">发信限制</n-divider>
|
||||||
|
<n-form-item label="最小发送间隔" path="smtpMinInterval">
|
||||||
|
<n-input-number
|
||||||
|
:show-button="false"
|
||||||
|
placeholder="请输入"
|
||||||
|
v-model:value="formValue.smtpMinInterval"
|
||||||
|
>
|
||||||
|
<template #suffix> 秒 </template>
|
||||||
|
</n-input-number>
|
||||||
|
<template #feedback> 同地址</template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="IP最大发送次数" path="smtpMaxIpLimit">
|
||||||
|
<n-input-number v-model:value="formValue.smtpMaxIpLimit" placeholder="" />
|
||||||
|
<template #feedback> 同IP每天最大允许发送次数 </template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="验证码有效期" path="smtpCodeExpire">
|
||||||
|
<n-input-number
|
||||||
|
:show-button="false"
|
||||||
|
placeholder="请输入"
|
||||||
|
v-model:value="formValue.smtpCodeExpire"
|
||||||
|
>
|
||||||
|
<template #suffix> 秒 </template>
|
||||||
|
</n-input-number>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="邮件模板" path="smtpTemplate">
|
||||||
|
<n-dynamic-input
|
||||||
|
v-model:value="formValue.smtpTemplate"
|
||||||
|
preset="pair"
|
||||||
|
key-placeholder="事件KEY"
|
||||||
|
value-placeholder="模板路径"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" @click="formSubmit">保存更新</n-button>
|
||||||
|
<n-button type="default" @click="sendTest">发送测试邮件</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
|
||||||
|
<n-modal
|
||||||
|
:block-scroll="false"
|
||||||
|
:mask-closable="false"
|
||||||
|
v-model:show="showModal"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
title="发送测试邮件"
|
||||||
|
>
|
||||||
|
<n-form
|
||||||
|
:model="formParams"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="80"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-form-item label="接收邮箱" path="to">
|
||||||
|
<n-input
|
||||||
|
type="textarea"
|
||||||
|
placeholder="多个用;隔开"
|
||||||
|
v-model:value="formParams.to"
|
||||||
|
:required="true"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="() => (showModal = false)">关闭</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">发送</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { getConfig, sendTestEmail, updateConfig } from '@/api/sys/config';
|
||||||
|
import { GlassesOutline, Glasses } from '@vicons/ionicons5';
|
||||||
|
|
||||||
|
const group = ref('smtp');
|
||||||
|
const show = ref(false);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const formParams = ref({ to: '' });
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
smtpHost: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入SMTP服务器',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const formRef: any = ref(null);
|
||||||
|
const message = useMessage();
|
||||||
|
|
||||||
|
const formValue = ref({
|
||||||
|
smtpHost: 'smtpdm.aliyun.com',
|
||||||
|
smtpPort: 25,
|
||||||
|
smtpUser: '',
|
||||||
|
smtpPass: '',
|
||||||
|
smtpSendName: 'HotGo',
|
||||||
|
smtpAdminMailbox: '',
|
||||||
|
smtpMinInterval: 60,
|
||||||
|
smtpMaxIpLimit: 10,
|
||||||
|
smtpCodeExpire: 600,
|
||||||
|
smtpTemplate: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
sendTestEmail(formParams.value).then((_res) => {
|
||||||
|
message.success('发送成功');
|
||||||
|
showModal.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendTest() {
|
||||||
|
showModal.value = true;
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
updateConfig({ group: group.value, list: formValue.value }).then((res) => {
|
||||||
|
message.success('更新成功');
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('验证失败，请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
|
||||||
|
function load() {
|
||||||
|
show.value = true;
|
||||||
|
new Promise((_resolve, _reject) => {
|
||||||
|
getConfig({ group: group.value })
|
||||||
|
.then((res) => {
|
||||||
|
res.list.smtpTemplate = JSON.parse(res.list.smtpTemplate);
|
||||||
|
formValue.value = res.list;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
show.value = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-spin :show="show" description="请稍候...">
|
||||||
|
<n-form :label-width="100" :model="formValue" :rules="rules" ref="formRef">
|
||||||
|
<n-form-item label="高德Web服务key" path="geoAmapWebKey">
|
||||||
|
<n-input
|
||||||
|
v-model:value="formValue.geoAmapWebKey"
|
||||||
|
placeholder=""
|
||||||
|
type="password"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #password-visible-icon>
|
||||||
|
<n-icon :size="16" :component="GlassesOutline" />
|
||||||
|
</template>
|
||||||
|
<template #password-invisible-icon>
|
||||||
|
<n-icon :size="16" :component="Glasses" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<template #feedback> 申请地址：https://console.amap.com/dev/key/app</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" @click="formSubmit">保存更新</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { getConfig, updateConfig } from '@/api/sys/config';
|
||||||
|
import { GlassesOutline, Glasses } from '@vicons/ionicons5';
|
||||||
|
|
||||||
|
const group = ref('geo');
|
||||||
|
const show = ref(false);
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
geoAmapWebKey: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入高德Web服务key',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const formRef: any = ref(null);
|
||||||
|
const message = useMessage();
|
||||||
|
|
||||||
|
const formValue = ref({
|
||||||
|
geoAmapWebKey: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
|
||||||
|
message.success('更新成功');
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('验证失败，请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
|
||||||
|
function load() {
|
||||||
|
show.value = true;
|
||||||
|
new Promise((_resolve, _reject) => {
|
||||||
|
getConfig({ group: group.value })
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value = res.list;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
show.value = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,208 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-spin :show="show" description="请稍候...">
|
||||||
|
<n-form :label-width="100" :model="formValue" ref="formRef">
|
||||||
|
<n-divider title-placement="left">开关配置</n-divider>
|
||||||
|
<n-form-item label="登录验证码开关" path="loginCaptchaSwitch">
|
||||||
|
<n-radio-group v-model:value="formValue.loginCaptchaSwitch" name="loginCaptchaSwitch">
|
||||||
|
<n-space>
|
||||||
|
<n-radio :value="1">开启</n-radio>
|
||||||
|
<n-radio :value="2">关闭</n-radio>
|
||||||
|
</n-space>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="验证码方式" path="loginCaptchaType">
|
||||||
|
<n-radio-group v-model:value="formValue.loginCaptchaType" name="loginCaptchaType">
|
||||||
|
<n-space>
|
||||||
|
<n-radio :value="1">字符</n-radio>
|
||||||
|
<n-radio :value="2">算数</n-radio>
|
||||||
|
</n-space>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="注册开关" path="loginRegisterSwitch">
|
||||||
|
<n-radio-group v-model:value="formValue.loginRegisterSwitch" name="cashSwitch">
|
||||||
|
<n-space>
|
||||||
|
<n-radio :value="1">开启</n-radio>
|
||||||
|
<n-radio :value="2">关闭</n-radio>
|
||||||
|
</n-space>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="强制邀请" path="loginForceInvite">
|
||||||
|
<n-radio-group v-model:value="formValue.loginForceInvite" name="loginForceInvite">
|
||||||
|
<n-space>
|
||||||
|
<n-radio :value="1">开启</n-radio>
|
||||||
|
<n-radio :value="2">关闭</n-radio>
|
||||||
|
</n-space>
|
||||||
|
</n-radio-group>
|
||||||
|
<template #feedback>
|
||||||
|
用户通过注册页面发起注册时是否必须填写邀请信息，用于上下级关系绑定</template
|
||||||
|
>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="自动获取openId" path="loginAutoOpenId">
|
||||||
|
<n-radio-group v-model:value="formValue.loginAutoOpenId" name="loginAutoOpenId">
|
||||||
|
<n-space>
|
||||||
|
<n-radio :value="1">开启</n-radio>
|
||||||
|
<n-radio :value="2">关闭</n-radio>
|
||||||
|
</n-space>
|
||||||
|
</n-radio-group>
|
||||||
|
<template #feedback>
|
||||||
|
在微信内登录后台时，自动获取当前登录人的openid（如开启需要配置微信公众号参数）</template
|
||||||
|
>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-divider title-placement="left">注册默认信息配置</n-divider>
|
||||||
|
<n-form-item label="默认注册头像" path="loginAvatar">
|
||||||
|
<FileChooser v-model:value="formValue.loginAvatar" file-type="image" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="默认注册角色" path="loginRoleId">
|
||||||
|
<n-tree-select
|
||||||
|
key-field="id"
|
||||||
|
:options="options.role"
|
||||||
|
v-model:value="formValue.loginRoleId"
|
||||||
|
:default-expand-all="true"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="默认注册部门" path="loginDeptId">
|
||||||
|
<n-tree-select
|
||||||
|
key-field="id"
|
||||||
|
:options="options.dept"
|
||||||
|
v-model:value="formValue.loginDeptId"
|
||||||
|
:default-expand-all="true"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="默认注册岗位（非必选）" path="loginPostIds">
|
||||||
|
<n-select v-model:value="formValue.loginPostIds" multiple :options="options.post" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-divider title-placement="left">协议配置</n-divider>
|
||||||
|
<n-form-item label="用户协议" path="loginProtocol">
|
||||||
|
<Editor
|
||||||
|
style="height: 320px"
|
||||||
|
v-model:value="formValue.loginProtocol"
|
||||||
|
id="loginProtocol"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="隐私权政策" path="loginPolicy">
|
||||||
|
<Editor style="height: 320px" v-model:value="formValue.loginPolicy" id="loginPolicy" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" @click="formSubmit">保存更新</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { getConfig, updateConfig } from '@/api/sys/config';
|
||||||
|
import Editor from '@/components/Editor/editor.vue';
|
||||||
|
import FileChooser from '@/components/FileChooser/index.vue';
|
||||||
|
import { getDeptOption } from '@/api/org/dept';
|
||||||
|
import { getRoleOption } from '@/api/system/role';
|
||||||
|
import { getPostOption } from '@/api/org/post';
|
||||||
|
|
||||||
|
const message = useMessage();
|
||||||
|
const formRef: any = ref(null);
|
||||||
|
const group = ref('login');
|
||||||
|
const show = ref(false);
|
||||||
|
|
||||||
|
const formValue = ref({
|
||||||
|
loginRegisterSwitch: 1,
|
||||||
|
loginCaptchaSwitch: 1,
|
||||||
|
loginCaptchaType: 1, // 1: 'str' or 2: 'numMath'
|
||||||
|
loginForceInvite: 2,
|
||||||
|
loginAutoOpenId: 2,
|
||||||
|
loginAvatar: '',
|
||||||
|
loginProtocol: '',
|
||||||
|
loginPolicy: '',
|
||||||
|
loginRoleId: null,
|
||||||
|
loginDeptId: null,
|
||||||
|
loginPostIds: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const options = ref<any>({
|
||||||
|
role: [],
|
||||||
|
roleTabs: [{ id: -1, name: '全部' }],
|
||||||
|
dept: [],
|
||||||
|
post: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
async function loadOptions() {
|
||||||
|
const dept = await getDeptOption();
|
||||||
|
if (dept.list !== undefined) {
|
||||||
|
options.value.dept = dept.list;
|
||||||
|
}
|
||||||
|
|
||||||
|
const role = await getRoleOption();
|
||||||
|
if (role.list !== undefined) {
|
||||||
|
options.value.role = role.list;
|
||||||
|
treeDataToCompressed(role.list);
|
||||||
|
}
|
||||||
|
|
||||||
|
const post = await getPostOption();
|
||||||
|
if (post.list !== undefined && post.list.length > 0) {
|
||||||
|
for (let i = 0; i < post.list.length; i++) {
|
||||||
|
post.list[i].label = post.list[i].name;
|
||||||
|
post.list[i].value = post.list[i].id;
|
||||||
|
}
|
||||||
|
options.value.post = post.list;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function treeDataToCompressed(source) {
|
||||||
|
for (const i in source) {
|
||||||
|
options.value.roleTabs.push(source[i]);
|
||||||
|
source[i].children && source[i].children.length > 0
|
||||||
|
? treeDataToCompressed(source[i].children)
|
||||||
|
: ''; // 子级递归
|
||||||
|
}
|
||||||
|
|
||||||
|
return options.value.roleTabs;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
updateConfig({ group: group.value, list: formValue.value })
|
||||||
|
.then((_res) => {
|
||||||
|
message.success('更新成功');
|
||||||
|
load();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
message.error(error.toString());
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('验证失败，请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function load() {
|
||||||
|
show.value = true;
|
||||||
|
getConfig({ group: group.value })
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value = res.list;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
show.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
load();
|
||||||
|
await loadOptions();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,237 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-spin :show="show" description="请稍候...">
|
||||||
|
<n-form :label-width="100" :model="formValue" :rules="rules" ref="formRef">
|
||||||
|
<n-form-item label="开启debug" path="payDebug">
|
||||||
|
<n-switch size="large" v-model:value="formValue.payDebug" />
|
||||||
|
<template #feedback>开启后控制台会输出支付相关的日志</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-divider title-placement="left">支付宝</n-divider>
|
||||||
|
<n-alert :show-icon="false" type="info">
|
||||||
|
确保你已经申请开通过支付宝相关产品权限，建议按照以下步骤进行配置
|
||||||
|
<br />1.
|
||||||
|
下载支付宝平台密钥工具（下载地址：https://opendocs.alipay.com/common/02kipk），加签方式选择证书，加密算法选择RSA2
|
||||||
|
<br />2. 生成后的私钥请在工具中转换为PKCS1格式 <br />3.
|
||||||
|
在支付宝中配置证书，参考地址：https://opendocs.alipay.com/common/02khjo?pathHash=5403bedd
|
||||||
|
</n-alert>
|
||||||
|
<n-form-item label="应用ID" path="payAliPayAppId">
|
||||||
|
<n-input v-model:value="formValue.payAliPayAppId" placeholder="" />
|
||||||
|
<template #feedback></template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="应用私钥路径" path="payAliPayPrivateKey">
|
||||||
|
<n-input v-model:value="formValue.payAliPayPrivateKey" placeholder="" clearable />
|
||||||
|
<template #feedback
|
||||||
|
>RSA2 加密算法默认生成格式为 PKCS8，系统默认是RSA2加密，切记转换为 PKCS1 格式</template
|
||||||
|
>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="应用公钥" path="payAliPayAppCertPublicKey">
|
||||||
|
<n-input v-model:value="formValue.payAliPayAppCertPublicKey" placeholder="" clearable />
|
||||||
|
<template #feedback>appCertPublicKey.crt证书路径</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="支付宝根证书路径" path="payAliPayRootCert">
|
||||||
|
<n-input v-model:value="formValue.payAliPayRootCert" placeholder="" clearable />
|
||||||
|
<template #feedback>alipayRootCert.crt证书路径"</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="支付宝公钥证书路径" path="payAliPayCertPublicKeyRSA2">
|
||||||
|
<n-input v-model:value="formValue.payAliPayCertPublicKeyRSA2" placeholder="" clearable />
|
||||||
|
<template #feedback>alipayCertPublicKey_RSA2.crt证书路径"</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-divider title-placement="left">微信支付</n-divider>
|
||||||
|
<n-form-item label="应用ID" path="payWxPayAppId">
|
||||||
|
<n-input v-model:value="formValue.payWxPayAppId" placeholder="" />
|
||||||
|
<template #feedback>和微信配置中的微信公众号配置保持一致</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="商户ID" path="payWxPayMchId">
|
||||||
|
<n-input v-model:value="formValue.payWxPayMchId" placeholder="" />
|
||||||
|
<template #feedback>商户ID 或者服务商模式的 sp_mchid</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="证书序列号" path="payWxPaySerialNo">
|
||||||
|
<n-input v-model:value="formValue.payWxPaySerialNo" placeholder="" />
|
||||||
|
<template #feedback>商户证书的证书序列号</template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="APIv3Key" path="payWxPayAPIv3Key">
|
||||||
|
<n-input v-model:value="formValue.payWxPayAPIv3Key" placeholder="" clearable />
|
||||||
|
<template #feedback>商户平台获取</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="私钥" path="payWxPayPrivateKey">
|
||||||
|
<n-input
|
||||||
|
type="textarea"
|
||||||
|
v-model:value="formValue.payWxPayPrivateKey"
|
||||||
|
placeholder=""
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
<template #feedback>apiclient_key.pem 读取后的内容</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-divider title-placement="left">QQ支付</n-divider>
|
||||||
|
<n-form-item label="应用ID" path="payQQPayAppId">
|
||||||
|
<n-input v-model:value="formValue.payQQPayAppId" placeholder="" />
|
||||||
|
<template #feedback></template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="商户ID" path="payQQPayMchId">
|
||||||
|
<n-input v-model:value="formValue.payQQPayMchId" placeholder="" />
|
||||||
|
<template #feedback></template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="ApiKey" path="payQQPayApiKey">
|
||||||
|
<n-input
|
||||||
|
type="textarea"
|
||||||
|
v-model:value="formValue.payQQPayApiKey"
|
||||||
|
placeholder=""
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
<template #feedback>API秘钥值</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" @click="formSubmit">保存更新</n-button>
|
||||||
|
<!-- <n-button type="default" @click="sendTest">测试支付</n-button>-->
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
|
||||||
|
<n-modal
|
||||||
|
:block-scroll="false"
|
||||||
|
:mask-closable="false"
|
||||||
|
v-model:show="showModal"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
title="发送测试短信"
|
||||||
|
>
|
||||||
|
<n-form
|
||||||
|
:model="formParams"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formTestRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="80"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-form-item label="事件模板" path="event">
|
||||||
|
<n-select
|
||||||
|
:options="dict.getOptionUnRef('config_sms_template')"
|
||||||
|
v-model:value="formParams.event"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="手机号" path="mobile">
|
||||||
|
<n-input
|
||||||
|
placeholder="请输入接收手机号"
|
||||||
|
v-model:value="formParams.mobile"
|
||||||
|
:required="true"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="验证码" path="code">
|
||||||
|
<n-input
|
||||||
|
placeholder="请输入要接收的验证码"
|
||||||
|
v-model:value="formParams.code"
|
||||||
|
:required="true"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="() => (showModal = false)">关闭</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">发送</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { getConfig, sendTestSms, updateConfig } from '@/api/sys/config';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
|
||||||
|
const group = ref('pay');
|
||||||
|
const show = ref(false);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const formParams = ref({ mobile: '', event: '', code: '1234' });
|
||||||
|
const rules = {};
|
||||||
|
const formTestRef = ref<any>();
|
||||||
|
const formRef: any = ref(null);
|
||||||
|
const message = useMessage();
|
||||||
|
const dict = useDictStore();
|
||||||
|
|
||||||
|
const formValue = ref({
|
||||||
|
payDebug: true,
|
||||||
|
payAliPayAppId: '',
|
||||||
|
payAliPayPrivateKey: '',
|
||||||
|
payAliPayAppCertPublicKey: '',
|
||||||
|
payAliPayRootCert: '',
|
||||||
|
payAliPayCertPublicKeyRSA2: '',
|
||||||
|
payWxPayAppId: '',
|
||||||
|
payWxPayMchId: '',
|
||||||
|
payWxPaySerialNo: '',
|
||||||
|
payWxPayAPIv3Key: '',
|
||||||
|
payWxPayPrivateKey: '',
|
||||||
|
payQQPayAppId: '',
|
||||||
|
payQQPayMchId: '',
|
||||||
|
payQQPayApiKey: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
|
||||||
|
message.success('更新成功');
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('验证失败，请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function load() {
|
||||||
|
show.value = true;
|
||||||
|
loadOptions();
|
||||||
|
getConfig({ group: group.value })
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value = res.list;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
show.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadOptions() {
|
||||||
|
dict.loadOptions(['config_sms_template', 'config_sms_drive']);
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formTestRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
sendTestSms(formParams.value).then((_res) => {
|
||||||
|
message.success('发送成功');
|
||||||
|
showModal.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,193 @@
|
|||||||
|
<template>
|
||||||
|
<n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
|
||||||
|
<n-grid-item>
|
||||||
|
<n-form :label-width="120" :model="formValue" :rules="rules" ref="formRef">
|
||||||
|
<n-form-item label="商品图片(大)">
|
||||||
|
<n-space align="center">
|
||||||
|
<span>宽度：</span>
|
||||||
|
<n-input
|
||||||
|
v-model:value="formValue.bigWidth"
|
||||||
|
style="width: 80px"
|
||||||
|
placeholder="宽度像素"
|
||||||
|
/>
|
||||||
|
<span>高度：</span>
|
||||||
|
<n-input
|
||||||
|
v-model:value="formValue.bigHeight"
|
||||||
|
style="width: 80px"
|
||||||
|
placeholder="高度像素"
|
||||||
|
/>
|
||||||
|
</n-space>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="商品图片(小)">
|
||||||
|
<n-space align="center">
|
||||||
|
<span>宽度：</span>
|
||||||
|
<n-input
|
||||||
|
v-model:value="formValue.smallWidth"
|
||||||
|
style="width: 80px"
|
||||||
|
placeholder="宽度像素"
|
||||||
|
/>
|
||||||
|
<span>高度：</span>
|
||||||
|
<n-input
|
||||||
|
v-model:value="formValue.smallHeight"
|
||||||
|
style="width: 80px"
|
||||||
|
placeholder="高度像素"
|
||||||
|
/>
|
||||||
|
</n-space>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="水印透明度" path="watermarkClarity">
|
||||||
|
<n-input-number
|
||||||
|
v-model:value="formValue.watermarkClarity"
|
||||||
|
:show-button="false"
|
||||||
|
placeholder="请输入水印透明度"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="水印图片" path="watermarkClarity">
|
||||||
|
<n-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f">
|
||||||
|
<n-button>上传文件</n-button>
|
||||||
|
</n-upload>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="水印位置" path="watermarkPlace">
|
||||||
|
<n-select
|
||||||
|
placeholder="请选择价格精确方式"
|
||||||
|
:options="watermarkPlaceList"
|
||||||
|
v-model:value="formValue.watermarkPlace"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="价格精确位数" path="pricePreciseNum">
|
||||||
|
<n-select
|
||||||
|
placeholder="请选择价格精确位数"
|
||||||
|
:options="pricePreciseNumList"
|
||||||
|
v-model:value="formValue.pricePreciseNum"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="价格精确方式" path="pricePrecise">
|
||||||
|
<n-select
|
||||||
|
placeholder="请选择价格精确方式"
|
||||||
|
:options="pricePreciseList"
|
||||||
|
v-model:value="formValue.pricePrecise"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="前台显示市场价" path="isMarketPrice">
|
||||||
|
<n-switch size="large" v-model:value="formValue.isMarketPrice" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" @click="formSubmit">更新显示信息</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-form>
|
||||||
|
</n-grid-item>
|
||||||
|
</n-grid>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, reactive, ref, toRefs } from 'vue';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
name: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入网站名称',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
mobile: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入联系电话',
|
||||||
|
trigger: 'input',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const watermarkPlaceList = [
|
||||||
|
{
|
||||||
|
label: '左上',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '右上',
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '居中',
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '右下',
|
||||||
|
value: 4,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const pricePreciseNumList = [
|
||||||
|
{
|
||||||
|
label: '2位',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '3位',
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '4位',
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const pricePreciseList = [
|
||||||
|
{
|
||||||
|
label: '四舍五入',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '向上取整',
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '向下取整',
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
setup() {
|
||||||
|
const formRef: any = ref(null);
|
||||||
|
const message = useMessage();
|
||||||
|
const state = reactive({
|
||||||
|
formValue: {
|
||||||
|
bigWidth: '',
|
||||||
|
bigHeight: '',
|
||||||
|
smallWidth: '',
|
||||||
|
smallHeight: '',
|
||||||
|
watermarkClarity: null,
|
||||||
|
pricePrecise: 1,
|
||||||
|
isMarketPrice: true,
|
||||||
|
pricePreciseNum: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
message.success('验证成功');
|
||||||
|
} else {
|
||||||
|
message.error('验证失败，请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
formRef,
|
||||||
|
...toRefs(state),
|
||||||
|
pricePreciseList,
|
||||||
|
watermarkPlaceList,
|
||||||
|
pricePreciseNumList,
|
||||||
|
rules,
|
||||||
|
formSubmit,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,322 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-spin :show="show" description="请稍候...">
|
||||||
|
<n-form
|
||||||
|
:label-width="150"
|
||||||
|
:model="formValue"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="top"
|
||||||
|
>
|
||||||
|
<n-divider title-placement="left">基础设置</n-divider>
|
||||||
|
<n-form-item label="默认驱动" path="smsDrive">
|
||||||
|
<n-select
|
||||||
|
placeholder="默认发送驱动"
|
||||||
|
:options="dict.getOptionUnRef('config_sms_drive')"
|
||||||
|
v-model:value="formValue.smsDrive"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="最小发送间隔" path="smsMinInterval">
|
||||||
|
<n-input-number
|
||||||
|
:show-button="false"
|
||||||
|
placeholder="请输入"
|
||||||
|
v-model:value="formValue.smsMinInterval"
|
||||||
|
>
|
||||||
|
<template #suffix> 秒 </template>
|
||||||
|
</n-input-number>
|
||||||
|
<template #feedback> 同号码</template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="IP最大发送次数" path="smsMaxIpLimit">
|
||||||
|
<n-input-number v-model:value="formValue.smsMaxIpLimit" placeholder="" />
|
||||||
|
<template #feedback> 同IP每天最大允许发送次数 </template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="验证码有效期" path="smsCodeExpire">
|
||||||
|
<n-input-number
|
||||||
|
:show-button="false"
|
||||||
|
placeholder="请输入"
|
||||||
|
v-model:value="formValue.smsCodeExpire"
|
||||||
|
>
|
||||||
|
<template #suffix> 秒 </template>
|
||||||
|
</n-input-number>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-tabs type="card" size="small" v-model:value="tabName">
|
||||||
|
<n-tab-pane name="aliyun">
|
||||||
|
<template #tab> 阿里云 </template>
|
||||||
|
<n-divider title-placement="left"> 阿里云</n-divider>
|
||||||
|
<n-form-item label="AccessKeyID" path="smsAliYunAccessKeyID">
|
||||||
|
<n-input v-model:value="formValue.smsAliYunAccessKeyID" placeholder="" />
|
||||||
|
<template #feedback>
|
||||||
|
应用key和密钥你可以通过 https://ram.console.aliyun.com/manage/ak 获取
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="AccessKeySecret" path="smsAliYunAccessKeySecret">
|
||||||
|
<n-input
|
||||||
|
type="password"
|
||||||
|
v-model:value="formValue.smsAliYunAccessKeySecret"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #password-visible-icon>
|
||||||
|
<n-icon :size="16" :component="GlassesOutline" />
|
||||||
|
</template>
|
||||||
|
<template #password-invisible-icon>
|
||||||
|
<n-icon :size="16" :component="Glasses" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="签名" path="smsAliYunSign">
|
||||||
|
<n-input v-model:value="formValue.smsAliYunSign" placeholder="" />
|
||||||
|
<template #feedback>
|
||||||
|
申请地址：https://dysms.console.aliyun.com/domestic/text/sign
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="短信模板" path="smsAliYunTemplate">
|
||||||
|
<n-dynamic-input
|
||||||
|
v-model:value="formValue.smsAliYunTemplate"
|
||||||
|
preset="pair"
|
||||||
|
key-placeholder="事件KEY"
|
||||||
|
value-placeholder="模板CODE"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-tab-pane>
|
||||||
|
|
||||||
|
<n-tab-pane name="tencent">
|
||||||
|
<template #tab> 腾讯云 </template>
|
||||||
|
<n-divider title-placement="left"> 腾讯云</n-divider>
|
||||||
|
<n-form-item label="APPID" path="smsTencentSecretId">
|
||||||
|
<n-input v-model:value="formValue.smsTencentSecretId" placeholder="" />
|
||||||
|
<template #feedback>
|
||||||
|
子账号密钥获取地址：https://cloud.tencent.com/document/product/598/37140
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="密钥" path="smsTencentSecretKey">
|
||||||
|
<n-input
|
||||||
|
type="password"
|
||||||
|
v-model:value="formValue.smsTencentSecretKey"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #password-visible-icon>
|
||||||
|
<n-icon :size="16" :component="GlassesOutline" />
|
||||||
|
</template>
|
||||||
|
<template #password-invisible-icon>
|
||||||
|
<n-icon :size="16" :component="Glasses" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="接入地域域名" path="smsTencentEndpoint">
|
||||||
|
<n-input v-model:value="formValue.smsTencentEndpoint" placeholder="" />
|
||||||
|
<template #feedback>
|
||||||
|
默认就近地域接入域名为 <n-text code>sms.tencentcloudapi.com</n-text>
|
||||||
|
，也支持指定地域域名访问，例如广州地域的域名为
|
||||||
|
<n-text code>sms.ap-guangzhou.tencentcloudapi.com</n-text>
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="地域信息" path="smsTencentRegion">
|
||||||
|
<n-input v-model:value="formValue.smsTencentRegion" placeholder="" />
|
||||||
|
<template #feedback>
|
||||||
|
支持的地域列表参考
|
||||||
|
https://cloud.tencent.com/document/api/382/52071#.E5.9C.B0.E5.9F.9F.E5.88.97.E8.A1.A8
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="短信应用ID" path="smsTencentAppId">
|
||||||
|
<n-input v-model:value="formValue.smsTencentAppId" placeholder="" />
|
||||||
|
<template #feedback>
|
||||||
|
查看地址：https://console.cloud.tencent.com/smsv2/app-manage
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="签名" path="smsTencentSign">
|
||||||
|
<n-input v-model:value="formValue.smsTencentSign" placeholder="" />
|
||||||
|
<template #feedback>
|
||||||
|
查看地址：https://console.cloud.tencent.com/smsv2/csms-sign
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="短信模板" path="smsTencentTemplate">
|
||||||
|
<n-dynamic-input
|
||||||
|
v-model:value="formValue.smsTencentTemplate"
|
||||||
|
preset="pair"
|
||||||
|
key-placeholder="事件KEY"
|
||||||
|
value-placeholder="模板ID"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-tab-pane>
|
||||||
|
|
||||||
|
<!-- tencent -->
|
||||||
|
</n-tabs>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" @click="formSubmit">保存更新</n-button>
|
||||||
|
<n-button type="default" @click="sendTest">发送测试短信</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
|
||||||
|
<n-modal
|
||||||
|
:block-scroll="false"
|
||||||
|
:mask-closable="false"
|
||||||
|
v-model:show="showModal"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
title="发送测试短信"
|
||||||
|
>
|
||||||
|
<n-form
|
||||||
|
:model="formParams"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formTestRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="80"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-form-item label="事件模板" path="event">
|
||||||
|
<n-select
|
||||||
|
:options="dict.getOptionUnRef('config_sms_template')"
|
||||||
|
v-model:value="formParams.event"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="手机号" path="mobile">
|
||||||
|
<n-input
|
||||||
|
placeholder="请输入接收手机号"
|
||||||
|
v-model:value="formParams.mobile"
|
||||||
|
:required="true"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="验证码" path="code">
|
||||||
|
<n-input
|
||||||
|
placeholder="请输入要接收的验证码"
|
||||||
|
v-model:value="formParams.code"
|
||||||
|
:required="true"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="() => (showModal = false)">关闭</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm"> 发送 </n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted, watch } from 'vue';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { getConfig, sendTestSms, updateConfig } from '@/api/sys/config';
|
||||||
|
import { GlassesOutline, Glasses } from '@vicons/ionicons5';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
import type { FormRules } from 'naive-ui/es/form/src/interface';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
const message = useMessage();
|
||||||
|
const group = ref('sms');
|
||||||
|
const show = ref(false);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const formParams = ref({ mobile: '', event: '', code: '1234' });
|
||||||
|
const formTestRef = ref<any>();
|
||||||
|
const formRef: any = ref(null);
|
||||||
|
const defaultTabName = 'aliyun';
|
||||||
|
const tabName = ref<string>(defaultTabName);
|
||||||
|
|
||||||
|
const rules: FormRules = {
|
||||||
|
smsDrive: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入默认驱动',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const formValue = ref({
|
||||||
|
smsDrive: defaultTabName,
|
||||||
|
smsMinInterval: 60,
|
||||||
|
smsMaxIpLimit: 10,
|
||||||
|
smsCodeExpire: 600,
|
||||||
|
smsAliYunAccessKeyID: '',
|
||||||
|
smsAliYunAccessKeySecret: '',
|
||||||
|
smsAliYunSign: '',
|
||||||
|
smsAliYunTemplate: null,
|
||||||
|
smsTencentSecretId: '',
|
||||||
|
smsTencentSecretKey: '',
|
||||||
|
smsTencentEndpoint: 'sms.tencentcloudapi.com',
|
||||||
|
smsTencentRegion: 'ap-guangzhou',
|
||||||
|
smsTencentAppId: '',
|
||||||
|
smsTencentSign: '',
|
||||||
|
smsTencentTemplate: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
function sendTest() {
|
||||||
|
showModal.value = true;
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
|
||||||
|
message.success('更新成功');
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('验证失败，请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function load() {
|
||||||
|
show.value = true;
|
||||||
|
getConfig({ group: group.value })
|
||||||
|
.then((res) => {
|
||||||
|
res.list.smsAliYunTemplate = JSON.parse(res.list.smsAliYunTemplate);
|
||||||
|
res.list.smsTencentTemplate = JSON.parse(res.list.smsTencentTemplate);
|
||||||
|
formValue.value = res.list;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
show.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadOptions() {
|
||||||
|
dict.loadOptions(['config_sms_template', 'config_sms_drive']);
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formTestRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
sendTestSms(formParams.value).then((_res) => {
|
||||||
|
message.success('发送成功');
|
||||||
|
showModal.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => formValue.value.smsDrive,
|
||||||
|
(smsDrive: string) => {
|
||||||
|
tabName.value = smsDrive;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadOptions();
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-spin :show="show" description="请稍候...">
|
||||||
|
<n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
|
||||||
|
<n-form-item label="默认主题" path="themeDarkTheme">
|
||||||
|
<n-input v-model:value="formValue.themeDarkTheme" placeholder="" />
|
||||||
|
<template #feedback> 可选：'dark' 、 'light' </template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="默认系统主题" path="themeAppTheme">
|
||||||
|
<n-input v-model:value="formValue.themeAppTheme" placeholder="" />
|
||||||
|
<template #feedback> 默认：#2d8cf0 </template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="默认侧边栏风格" path="themeNavTheme">
|
||||||
|
<n-input v-model:value="formValue.themeNavTheme" placeholder="" />
|
||||||
|
<template #feedback>可选：'light'、 'header-dark'</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" @click="formSubmit">保存更新</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { getConfig, updateConfig } from '@/api/sys/config';
|
||||||
|
|
||||||
|
const group = ref('theme');
|
||||||
|
const show = ref(false);
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
themeDarkTheme: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入默认主题',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const formRef: any = ref(null);
|
||||||
|
const message = useMessage();
|
||||||
|
|
||||||
|
const formValue = ref({
|
||||||
|
themeDarkTheme: 'dark',
|
||||||
|
themeAppTheme: '#2d8cf0',
|
||||||
|
themeNavTheme: 'dark',
|
||||||
|
});
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
|
||||||
|
message.success('更新成功');
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('验证失败，请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
|
||||||
|
function load() {
|
||||||
|
show.value = true;
|
||||||
|
new Promise((_resolve, _reject) => {
|
||||||
|
getConfig({ group: group.value })
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value = res.list;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
show.value = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,409 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-spin :show="show" description="请稍候...">
|
||||||
|
<n-form
|
||||||
|
:label-width="150"
|
||||||
|
:model="formValue"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="top"
|
||||||
|
>
|
||||||
|
<n-form-item label="默认驱动" path="uploadDrive">
|
||||||
|
<n-select
|
||||||
|
placeholder="默认驱动"
|
||||||
|
:options="dict.getOptionUnRef('config_upload_drive')"
|
||||||
|
v-model:value="formValue.uploadDrive"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-tabs type="card" size="small" v-model:value="tabName">
|
||||||
|
<n-tab-pane name="local" tab="本地存储">
|
||||||
|
<n-form-item label="本地存储路径" path="uploadLocalPath">
|
||||||
|
<n-input v-model:value="formValue.uploadLocalPath" placeholder="" />
|
||||||
|
<template #feedback>填对外访问的相对路径</template>
|
||||||
|
</n-form-item>
|
||||||
|
</n-tab-pane>
|
||||||
|
|
||||||
|
<n-tab-pane name="oss" tab="阿里云OSS">
|
||||||
|
<n-form-item label="AccessKey ID" path="uploadOssSecretId">
|
||||||
|
<n-input
|
||||||
|
type="password"
|
||||||
|
v-model:value="formValue.uploadOssSecretId"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #password-visible-icon>
|
||||||
|
<n-icon :size="16" :component="GlassesOutline" />
|
||||||
|
</template>
|
||||||
|
<template #password-invisible-icon>
|
||||||
|
<n-icon :size="16" :component="Glasses" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<template #feedback> 创建地址：https://ram.console.aliyun.com/manage/ak </template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="AccessKey Secret" path="uploadOssSecretKey">
|
||||||
|
<n-input
|
||||||
|
type="password"
|
||||||
|
v-model:value="formValue.uploadOssSecretKey"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #password-visible-icon>
|
||||||
|
<n-icon :size="16" :component="GlassesOutline" />
|
||||||
|
</template>
|
||||||
|
<template #password-invisible-icon>
|
||||||
|
<n-icon :size="16" :component="Glasses" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="Endpoint" path="uploadOssEndpoint">
|
||||||
|
<n-input v-model:value="formValue.uploadOssEndpoint" placeholder="" />
|
||||||
|
<template #feedback> Endpoint（地域节点）</template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="存储路径" path="uploadOssPath">
|
||||||
|
<n-input v-model:value="formValue.uploadOssPath" placeholder="" />
|
||||||
|
<template #feedback>填对对象存储中的相对路径</template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="存储空间名称" path="uploadOssBucket">
|
||||||
|
<n-input v-model:value="formValue.uploadOssBucket" placeholder="" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="Bucket 域名" path="uploadOssBucketURL">
|
||||||
|
<n-input v-model:value="formValue.uploadOssBucketURL" placeholder="" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-tab-pane>
|
||||||
|
|
||||||
|
<n-tab-pane name="cos" tab="腾讯云COS">
|
||||||
|
<n-form-item label="APPID" path="uploadCosSecretId">
|
||||||
|
<n-input v-model:value="formValue.uploadCosSecretId" />
|
||||||
|
<template #feedback>
|
||||||
|
子账号密钥获取地址：https://cloud.tencent.com/document/product/598/37140
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="密钥" path="uploadCosSecretKey">
|
||||||
|
<n-input
|
||||||
|
type="password"
|
||||||
|
v-model:value="formValue.uploadCosSecretKey"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #password-visible-icon>
|
||||||
|
<n-icon :size="16" :component="GlassesOutline" />
|
||||||
|
</template>
|
||||||
|
<template #password-invisible-icon>
|
||||||
|
<n-icon :size="16" :component="Glasses" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="存储路径" path="uploadCosPath">
|
||||||
|
<n-input v-model:value="formValue.uploadCosPath" placeholder="" />
|
||||||
|
<template #feedback>填对对象存储中的相对路径</template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="访问域名" path="uploadCosBucketURL">
|
||||||
|
<n-input v-model:value="formValue.uploadCosBucketURL" placeholder="" />
|
||||||
|
<template #feedback
|
||||||
|
>控制台查看地址：https://console.cloud.tencent.com/cos5/bucket</template
|
||||||
|
>
|
||||||
|
</n-form-item>
|
||||||
|
</n-tab-pane>
|
||||||
|
|
||||||
|
<n-tab-pane name="qiniu" tab="七牛云对象存储">
|
||||||
|
<n-form-item label="AccessKey" path="uploadQiNiuAccessKey">
|
||||||
|
<n-input
|
||||||
|
type="password"
|
||||||
|
v-model:value="formValue.uploadQiNiuAccessKey"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #password-visible-icon>
|
||||||
|
<n-icon :size="16" :component="GlassesOutline" />
|
||||||
|
</template>
|
||||||
|
<template #password-invisible-icon>
|
||||||
|
<n-icon :size="16" :component="Glasses" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<template #feedback>创建地址：https://portal.qiniu.com/user/key</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="SecretKey" path="uploadQiNiuSecretKey">
|
||||||
|
<n-input
|
||||||
|
type="password"
|
||||||
|
v-model:value="formValue.uploadQiNiuSecretKey"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #password-visible-icon>
|
||||||
|
<n-icon :size="16" :component="GlassesOutline" />
|
||||||
|
</template>
|
||||||
|
<template #password-invisible-icon>
|
||||||
|
<n-icon :size="16" :component="Glasses" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="储存路径" path="uploadQiNiuPath">
|
||||||
|
<n-input v-model:value="formValue.uploadQiNiuPath" placeholder="" />
|
||||||
|
<template #feedback>填对对象存储中的相对路径</template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="存储空间名称" path="uploadQiNiuBucket">
|
||||||
|
<n-input v-model:value="formValue.uploadQiNiuBucket" placeholder="" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="访问域名" path="uploadQiNiuDomain">
|
||||||
|
<n-input v-model:value="formValue.uploadQiNiuDomain" placeholder="" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-tab-pane>
|
||||||
|
|
||||||
|
<n-tab-pane name="ucloud" tab="UC对象存储">
|
||||||
|
<n-form-item label="公钥" path="uploadUCloudPublicKey">
|
||||||
|
<n-input
|
||||||
|
type="password"
|
||||||
|
v-model:value="formValue.uploadUCloudPublicKey"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #password-visible-icon>
|
||||||
|
<n-icon :size="16" :component="GlassesOutline" />
|
||||||
|
</template>
|
||||||
|
<template #password-invisible-icon>
|
||||||
|
<n-icon :size="16" :component="Glasses" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<template #feedback> 获取地址：https://console.ucloud.cn/ufile/token </template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="私钥" path="uploadUCloudPrivateKey">
|
||||||
|
<n-input
|
||||||
|
type="password"
|
||||||
|
v-model:value="formValue.uploadUCloudPrivateKey"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #password-visible-icon>
|
||||||
|
<n-icon :size="16" :component="GlassesOutline" />
|
||||||
|
</template>
|
||||||
|
<template #password-invisible-icon>
|
||||||
|
<n-icon :size="16" :component="Glasses" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="存储路径" path="uploadUCloudPath">
|
||||||
|
<n-input v-model:value="formValue.uploadUCloudPath" placeholder="" />
|
||||||
|
<template #feedback>填对对象存储中的相对路径</template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="地域API" path="uploadUCloudBucketHost">
|
||||||
|
<n-input v-model:value="formValue.uploadUCloudBucketHost" placeholder="" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="存储桶名称" path="uploadUCloudBucketName">
|
||||||
|
<n-input v-model:value="formValue.uploadUCloudBucketName" placeholder="" />
|
||||||
|
<template #feedback>存储空间名称</template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="存储桶地域host" path="uploadUCloudFileHost">
|
||||||
|
<n-input v-model:value="formValue.uploadUCloudFileHost" placeholder="" />
|
||||||
|
<template #feedback>不需要包含桶名称</template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="访问域名" path="uploadUCloudEndpoint">
|
||||||
|
<n-input v-model:value="formValue.uploadUCloudEndpoint" placeholder="" />
|
||||||
|
<template #feedback> 格式，http://abc.com 或 https://abc.com，不可为空 </template>
|
||||||
|
</n-form-item>
|
||||||
|
</n-tab-pane>
|
||||||
|
|
||||||
|
<n-tab-pane name="minio" tab="MinIO">
|
||||||
|
<n-form-item label="AccessKey ID" path="uploadMinioAccessKey">
|
||||||
|
<n-input
|
||||||
|
type="password"
|
||||||
|
v-model:value="formValue.uploadMinioAccessKey"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #password-visible-icon>
|
||||||
|
<n-icon :size="16" :component="GlassesOutline" />
|
||||||
|
</template>
|
||||||
|
<template #password-invisible-icon>
|
||||||
|
<n-icon :size="16" :component="Glasses" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<template #feedback>相关文档：https://min.io/</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="AccessKey Secret" path="uploadMinioSecretKey">
|
||||||
|
<n-input
|
||||||
|
type="password"
|
||||||
|
v-model:value="formValue.uploadMinioSecretKey"
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #password-visible-icon>
|
||||||
|
<n-icon :size="16" :component="GlassesOutline" />
|
||||||
|
</template>
|
||||||
|
<template #password-invisible-icon>
|
||||||
|
<n-icon :size="16" :component="Glasses" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="Endpoint" path="uploadMinioEndpoint">
|
||||||
|
<n-input v-model:value="formValue.uploadMinioEndpoint" placeholder="" />
|
||||||
|
<template #feedback> Endpoint（不带http://和路径）</template>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item path="uploadMinioUseSSL" label="SSL">
|
||||||
|
<n-switch
|
||||||
|
v-model:value="formValue.uploadMinioUseSSL"
|
||||||
|
:checked-value="1"
|
||||||
|
:unchecked-value="2"
|
||||||
|
>
|
||||||
|
<template #checked> 已启用</template>
|
||||||
|
<template #unchecked> 已禁用</template>
|
||||||
|
</n-switch>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="储存路径" path="uploadMinioPath">
|
||||||
|
<n-input v-model:value="formValue.uploadMinioPath" placeholder="" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="存储桶名称" path="uploadMinioBucket">
|
||||||
|
<n-input v-model:value="formValue.uploadMinioBucket" placeholder="" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="访问域名" path="uploadMinioDomain">
|
||||||
|
<n-input v-model:value="formValue.uploadMinioDomain" placeholder="" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-tab-pane>
|
||||||
|
</n-tabs>
|
||||||
|
|
||||||
|
<n-grid x-gap="24" :cols="4" class="mt-4">
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="图片大小限制" path="uploadImageSize">
|
||||||
|
<n-input-number
|
||||||
|
:show-button="false"
|
||||||
|
placeholder="请输入"
|
||||||
|
v-model:value="formValue.uploadImageSize"
|
||||||
|
>
|
||||||
|
<template #suffix> MB</template>
|
||||||
|
</n-input-number>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi :span="3">
|
||||||
|
<n-form-item label="图片类型限制" path="uploadImageType">
|
||||||
|
<n-input v-model:value="formValue.uploadImageType" placeholder="" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<n-grid x-gap="24" :cols="4">
|
||||||
|
<n-gi>
|
||||||
|
<n-form-item label="文件大小限制" path="uploadFileSize">
|
||||||
|
<n-input-number
|
||||||
|
:show-button="false"
|
||||||
|
placeholder="请输入"
|
||||||
|
v-model:value="formValue.uploadFileSize"
|
||||||
|
>
|
||||||
|
<template #suffix> MB</template>
|
||||||
|
</n-input-number>
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi :span="3">
|
||||||
|
<n-form-item label="文件类型限制" path="uploadFileType">
|
||||||
|
<n-input v-model:value="formValue.uploadFileType" placeholder="" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" @click="formSubmit">保存更新</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, ref, watch } from 'vue';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { getConfig, updateConfig } from '@/api/sys/config';
|
||||||
|
import { Glasses, GlassesOutline } from '@vicons/ionicons5';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
import type { FormRules } from 'naive-ui/es/form/src/interface';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
const message = useMessage();
|
||||||
|
const group = ref('upload');
|
||||||
|
const show = ref(false);
|
||||||
|
const formRef: any = ref(null);
|
||||||
|
const defaultTabName = 'local';
|
||||||
|
const tabName = ref<string>(defaultTabName);
|
||||||
|
|
||||||
|
const rules: FormRules = {
|
||||||
|
uploadDrive: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入默认驱动',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const formValue = ref({
|
||||||
|
uploadDrive: defaultTabName,
|
||||||
|
uploadImageSize: 2,
|
||||||
|
uploadImageType: '',
|
||||||
|
uploadFileSize: 10,
|
||||||
|
uploadFileType: '',
|
||||||
|
uploadLocalPath: '',
|
||||||
|
uploadUCloudPath: '',
|
||||||
|
uploadUCloudPublicKey: '',
|
||||||
|
uploadUCloudPrivateKey: '',
|
||||||
|
uploadUCloudBucketHost: 'api.ucloud.cn',
|
||||||
|
uploadUCloudBucketName: '',
|
||||||
|
uploadUCloudFileHost: 'cn-bj.ufileos.com',
|
||||||
|
uploadUCloudEndpoint: '',
|
||||||
|
uploadCosSecretId: '',
|
||||||
|
uploadCosSecretKey: '',
|
||||||
|
uploadCosBucketURL: '',
|
||||||
|
uploadCosPath: '',
|
||||||
|
uploadOssSecretId: '',
|
||||||
|
uploadOssSecretKey: '',
|
||||||
|
uploadOssEndpoint: '',
|
||||||
|
uploadOssBucketURL: '',
|
||||||
|
uploadOssPath: '',
|
||||||
|
uploadOssBucket: '',
|
||||||
|
uploadQiNiuAccessKey: '',
|
||||||
|
uploadQiNiuSecretKey: '',
|
||||||
|
uploadQiNiuDomain: '',
|
||||||
|
uploadQiNiuPath: '',
|
||||||
|
uploadQiNiuBucket: '',
|
||||||
|
uploadMinioAccessKey: '',
|
||||||
|
uploadMinioSecretKey: '',
|
||||||
|
uploadMinioEndpoint: '',
|
||||||
|
uploadMinioUseSSL: 2,
|
||||||
|
uploadMinioPath: '',
|
||||||
|
uploadMinioBucket: '',
|
||||||
|
uploadMinioDomain: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
|
||||||
|
message.success('更新成功');
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('验证失败，请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function load() {
|
||||||
|
show.value = true;
|
||||||
|
getConfig({ group: group.value })
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value = res.list;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
show.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadOptions() {
|
||||||
|
dict.loadOptions(['config_upload_drive']);
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => formValue.value.uploadDrive,
|
||||||
|
(uploadDrive: string) => {
|
||||||
|
tabName.value = uploadDrive;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
loadOptions();
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,121 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-spin :show="show" description="请稍候...">
|
||||||
|
<n-form :label-width="100" :model="formValue" :rules="rules" ref="formRef">
|
||||||
|
<n-divider title-placement="left">公众号</n-divider>
|
||||||
|
<n-form-item label="AppID" path="officialAccountAppId">
|
||||||
|
<n-input v-model:value="formValue.officialAccountAppId" placeholder="" />
|
||||||
|
<template #feedback>请填写微信公众平台后台的AppId</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="AppSecret" path="officialAccountAppSecret">
|
||||||
|
<n-input v-model:value="formValue.officialAccountAppSecret" placeholder="" clearable />
|
||||||
|
<template #feedback>请填写微信公众平台后台的AppSecret</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="Token" path="officialAccountToken">
|
||||||
|
<n-input v-model:value="formValue.officialAccountToken" placeholder="" clearable />
|
||||||
|
<template #feedback
|
||||||
|
>与公众平台接入设置值一致，必须为英文或者数字，长度为3到32个字符</template
|
||||||
|
>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="EncodingAESKey" path="officialAccountEncodingAESKey">
|
||||||
|
<n-input
|
||||||
|
v-model:value="formValue.officialAccountEncodingAESKey"
|
||||||
|
placeholder=""
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
<template #feedback
|
||||||
|
>与公众平台接入设置值一致，必须为英文或者数字，长度为43个字符
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-divider title-placement="left">开放平台</n-divider>
|
||||||
|
<n-form-item label="AppID" path="openPlatformAppId">
|
||||||
|
<n-input v-model:value="formValue.openPlatformAppId" placeholder="" />
|
||||||
|
<template #feedback>请填写微信开放平台后台的AppId</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="AppSecret" path="openPlatformAppSecret">
|
||||||
|
<n-input v-model:value="formValue.openPlatformAppSecret" placeholder="" clearable />
|
||||||
|
<template #feedback>请填写微信开放平台后台的AppSecret</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="Token" path="openPlatformToken">
|
||||||
|
<n-input v-model:value="formValue.openPlatformToken" placeholder="" clearable />
|
||||||
|
<template #feedback
|
||||||
|
>与开放平台接入设置值一致，必须为英文或者数字，长度为3到32个字符</template
|
||||||
|
>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="EncodingAESKey" path="openPlatformEncodingAESKey">
|
||||||
|
<n-input v-model:value="formValue.openPlatformEncodingAESKey" placeholder="" clearable />
|
||||||
|
<template #feedback
|
||||||
|
>与开放平台接入设置值一致，必须为英文或者数字，长度为43个字符</template
|
||||||
|
>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<!-- <n-divider title-placement="left">小程序</n-divider>-->
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" @click="formSubmit">保存更新</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { getConfig, updateConfig } from '@/api/sys/config';
|
||||||
|
|
||||||
|
const group = ref('wechat');
|
||||||
|
const show = ref(false);
|
||||||
|
const rules = {};
|
||||||
|
const formRef: any = ref(null);
|
||||||
|
const message = useMessage();
|
||||||
|
const formValue = ref({
|
||||||
|
officialAccountAppId: '',
|
||||||
|
officialAccountAppSecret: '',
|
||||||
|
officialAccountToken: '',
|
||||||
|
officialAccountEncodingAESKey: '',
|
||||||
|
openPlatformAppId: '',
|
||||||
|
openPlatformAppSecret: '',
|
||||||
|
openPlatformToken: '',
|
||||||
|
openPlatformEncodingAESKey: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
|
||||||
|
message.success('更新成功');
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('验证失败，请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
show.value = true;
|
||||||
|
new Promise((_resolve, _reject) => {
|
||||||
|
getConfig({ group: group.value })
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value = res.list;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
show.value = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,206 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-grid cols="24 300:1 600:24" :x-gap="12">
|
||||||
|
<n-grid-item span="6">
|
||||||
|
<n-card :bordered="false" size="small" class="proCard">
|
||||||
|
<n-thing
|
||||||
|
class="thing-cell"
|
||||||
|
v-for="item in typeTabList"
|
||||||
|
:key="item.key"
|
||||||
|
:class="{ 'thing-cell-on': type === item.key }"
|
||||||
|
@click="switchType(item)"
|
||||||
|
>
|
||||||
|
<template #header>{{ item.name }}</template>
|
||||||
|
<template #description>{{ item.desc }}</template>
|
||||||
|
</n-thing>
|
||||||
|
</n-card>
|
||||||
|
</n-grid-item>
|
||||||
|
<n-grid-item span="18">
|
||||||
|
<n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
|
||||||
|
<BasicSetting v-if="type === 1" />
|
||||||
|
<ThemeSetting v-if="type === 2" />
|
||||||
|
<RevealSetting v-if="type === 3" />
|
||||||
|
<EmailSetting v-if="type === 4" />
|
||||||
|
<SmsSetting v-if="type === 5" />
|
||||||
|
<LoginSetting v-if="type === 6" />
|
||||||
|
<CashSetting v-if="type === 7" />
|
||||||
|
<UploadSetting v-if="type === 8" />
|
||||||
|
<GeoSetting v-if="type === 9" />
|
||||||
|
<PaySetting v-if="type === 10" />
|
||||||
|
<WechatSetting v-if="type === 11" />
|
||||||
|
</n-card>
|
||||||
|
</n-grid-item>
|
||||||
|
</n-grid>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineAsyncComponent, defineComponent, reactive, toRefs, onMounted } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { pushHashRouterParameter } from '@/utils/urlUtils';
|
||||||
|
/** 异步加载的组件，用到的时候再加载组件 */
|
||||||
|
const BasicSetting = defineAsyncComponent(() => {
|
||||||
|
return import('./BasicSetting.vue');
|
||||||
|
}),
|
||||||
|
RevealSetting = defineAsyncComponent(() => {
|
||||||
|
return import('./RevealSetting.vue');
|
||||||
|
}),
|
||||||
|
EmailSetting = defineAsyncComponent(() => {
|
||||||
|
return import('./EmailSetting.vue');
|
||||||
|
}),
|
||||||
|
ThemeSetting = defineAsyncComponent(() => {
|
||||||
|
return import('./ThemeSetting.vue');
|
||||||
|
}),
|
||||||
|
CashSetting = defineAsyncComponent(() => {
|
||||||
|
return import('./CashSetting.vue');
|
||||||
|
}),
|
||||||
|
UploadSetting = defineAsyncComponent(() => {
|
||||||
|
return import('./UploadSetting.vue');
|
||||||
|
}),
|
||||||
|
GeoSetting = defineAsyncComponent(() => {
|
||||||
|
return import('./GeoSetting.vue');
|
||||||
|
}),
|
||||||
|
SmsSetting = defineAsyncComponent(() => {
|
||||||
|
return import('./SmsSetting.vue');
|
||||||
|
}),
|
||||||
|
PaySetting = defineAsyncComponent(() => {
|
||||||
|
return import('./PaySetting.vue');
|
||||||
|
}),
|
||||||
|
WechatSetting = defineAsyncComponent(() => {
|
||||||
|
return import('./WechatSetting.vue');
|
||||||
|
}),
|
||||||
|
LoginSetting = defineAsyncComponent(() => {
|
||||||
|
return import('./LoginSetting.vue');
|
||||||
|
});
|
||||||
|
const typeTabList = [
|
||||||
|
{
|
||||||
|
name: '基本设置',
|
||||||
|
desc: '系统常规设置',
|
||||||
|
key: 1,
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// name: '主题设置',
|
||||||
|
// desc: '系统主题设置',
|
||||||
|
// key: 2,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '显示设置',
|
||||||
|
// desc: '系统显示设置',
|
||||||
|
// key: 3,
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
name: '邮件设置',
|
||||||
|
desc: '系统邮件设置',
|
||||||
|
key: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '短信配置',
|
||||||
|
desc: '短信验证码平台',
|
||||||
|
key: 5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '登录注册',
|
||||||
|
desc: '登录注册配置',
|
||||||
|
key: 6,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '提现配置',
|
||||||
|
desc: '管理员提现规则配置',
|
||||||
|
key: 7,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '云存储',
|
||||||
|
desc: '配置上传文件驱动',
|
||||||
|
key: 8,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '地理位置',
|
||||||
|
desc: '配置地理位置工具',
|
||||||
|
key: 9,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '支付配置',
|
||||||
|
desc: '支付宝/微信/QQ支付配置等',
|
||||||
|
key: 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '微信配置',
|
||||||
|
desc: '公众号/开放平台/小程序配置等',
|
||||||
|
key: 11,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
BasicSetting,
|
||||||
|
RevealSetting,
|
||||||
|
EmailSetting,
|
||||||
|
ThemeSetting,
|
||||||
|
CashSetting,
|
||||||
|
UploadSetting,
|
||||||
|
GeoSetting,
|
||||||
|
SmsSetting,
|
||||||
|
PaySetting,
|
||||||
|
WechatSetting,
|
||||||
|
LoginSetting,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const router = useRouter();
|
||||||
|
const state = reactive({
|
||||||
|
type: 1,
|
||||||
|
typeTitle: '基本设置',
|
||||||
|
});
|
||||||
|
|
||||||
|
function switchType(e) {
|
||||||
|
state.type = e.key;
|
||||||
|
state.typeTitle = e.name;
|
||||||
|
pushHashRouterParameter(window.location.href, 'type', e.key);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setDefaultOption() {
|
||||||
|
const key = router.currentRoute.value.query.type as unknown as number;
|
||||||
|
if (key !== undefined && key > 0) {
|
||||||
|
for (const item of typeTabList) {
|
||||||
|
if (item.key == key) {
|
||||||
|
switchType(item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (router.currentRoute.value.query?.type) {
|
||||||
|
setDefaultOption();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
switchType,
|
||||||
|
typeTabList,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.thing-cell {
|
||||||
|
margin: 0 -16px 10px;
|
||||||
|
padding: 5px 16px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #f3f3f3;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.thing-cell-on {
|
||||||
|
background: #f0faff;
|
||||||
|
color: #2d8cf0;
|
||||||
|
|
||||||
|
::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
|
||||||
|
color: #2d8cf0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #f0faff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
import { h } from 'vue';
|
||||||
|
import { NTag } from 'naive-ui';
|
||||||
|
|
||||||
|
const policyOptions = {
|
||||||
|
1: '并行策略',
|
||||||
|
2: '单例策略',
|
||||||
|
3: '单次策略',
|
||||||
|
4: '多次策略',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: 'ID',
|
||||||
|
key: 'id',
|
||||||
|
width: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '任务标题',
|
||||||
|
key: 'title',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '任务分组',
|
||||||
|
key: 'groupName',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '执行方法',
|
||||||
|
key: 'name',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title: '执行参数',
|
||||||
|
// key: 'params',
|
||||||
|
// render(row) {
|
||||||
|
// return row.params;
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
title: '执行策略',
|
||||||
|
key: 'policy',
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: 'info',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => policyOptions[row.policy] ?? '未知',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '表达式',
|
||||||
|
key: 'pattern',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title: '执行次数',
|
||||||
|
// key: 'count',
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
key: 'status',
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: row.status == 1 ? 'success' : 'warning',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => (row.status == 1 ? '运行中' : '已结束'),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'createdAt',
|
||||||
|
width: 180,
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -0,0 +1,554 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-card :bordered="false" class="proCard" title="定时任务">
|
||||||
|
<BasicForm
|
||||||
|
@register="register"
|
||||||
|
@submit="handleSubmit"
|
||||||
|
@reset="handleReset"
|
||||||
|
@keyup.enter="handleSubmit"
|
||||||
|
ref="searchFormRef"
|
||||||
|
>
|
||||||
|
<template #statusSlot="{ model, field }">
|
||||||
|
<n-input v-model:value="model[field]" />
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
|
|
||||||
|
<BasicTable
|
||||||
|
:openChecked="true"
|
||||||
|
:columns="columns"
|
||||||
|
:request="loadDataTable"
|
||||||
|
:row-key="(row) => row.id"
|
||||||
|
ref="actionRef"
|
||||||
|
:actionColumn="actionColumn"
|
||||||
|
@update:checked-row-keys="onCheckedRow"
|
||||||
|
:scroll-x="scrollX"
|
||||||
|
:resizeHeightOffset="-10000"
|
||||||
|
>
|
||||||
|
<template #tableTitle>
|
||||||
|
<n-button type="primary" @click="addTable">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
添加任务
|
||||||
|
</n-button>
|
||||||
|
|
||||||
|
<n-button type="error" @click="batchDelete" :disabled="batchDeleteDisabled">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<DeleteOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
批量删除
|
||||||
|
</n-button>
|
||||||
|
|
||||||
|
<n-button type="info" @click="openGroupModal">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<GroupOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
任务分组
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
:title="formParams?.id > 0 ? '编辑任务 #' + formParams.id : '添加任务'"
|
||||||
|
style="width: 720px"
|
||||||
|
>
|
||||||
|
<n-form
|
||||||
|
:model="formParams"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="80"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-form-item label="任务分组" path="groupId">
|
||||||
|
<n-tree-select
|
||||||
|
:options="optionTreeData"
|
||||||
|
:default-value="formParams.groupId"
|
||||||
|
@update:value="handleUpdateValue"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="任务标题" path="title">
|
||||||
|
<n-input placeholder="请输入任务标题" v-model:value="formParams.title" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="执行方法" path="name">
|
||||||
|
<n-input placeholder="请输入执行方法" v-model:value="formParams.name" />
|
||||||
|
<template #feedback>go方法名称</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="执行参数" path="params">
|
||||||
|
<n-input
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入执行参数，如果函数需要多个参数请用,隔开"
|
||||||
|
v-model:value="formParams.params"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="执行策略" path="policy">
|
||||||
|
<n-radio-group v-model:value="formParams.policy" name="policy">
|
||||||
|
<n-radio-button
|
||||||
|
v-for="type in policyOptions"
|
||||||
|
:key="type.value"
|
||||||
|
:value="type.value"
|
||||||
|
:label="type.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="执行次数" path="count" v-if="formParams.policy === 4">
|
||||||
|
<n-input placeholder="请输入执行次数" v-model:value="formParams.count" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="表达式" path="pattern">
|
||||||
|
<n-input placeholder="请输入定时表达式" v-model:value="formParams.pattern" />
|
||||||
|
<template #feedback>
|
||||||
|
表达式语法参考：<a
|
||||||
|
target="_blank"
|
||||||
|
href="https://goframe.org/pages/viewpage.action?pageId=30736411"
|
||||||
|
>https://goframe.org/pages/viewpage.action?pageId=30736411</a
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="排序" path="sort">
|
||||||
|
<n-input-number v-model:value="formParams.sort" clearable />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="状态" path="status">
|
||||||
|
<n-radio-group v-model:value="formParams.status" name="status">
|
||||||
|
<n-radio-button
|
||||||
|
v-for="status in statusOptions"
|
||||||
|
:key="status.value"
|
||||||
|
:value="status.value"
|
||||||
|
:label="status.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="备注" path="remark">
|
||||||
|
<n-input type="textarea" placeholder="请输入备注" v-model:value="formParams.remark" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="() => (showModal = false)">取消</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</n-card>
|
||||||
|
|
||||||
|
<GroupModal ref="GroupModalRef" @reloadGroupOption="reloadGroupOption" />
|
||||||
|
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showStdout"
|
||||||
|
style="width: 72%"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
title="调度日志"
|
||||||
|
>
|
||||||
|
<n-form ref="formRef" label-placement="left" :label-width="80" class="py-4">
|
||||||
|
<n-form-item label="日志文件" path="fileName">
|
||||||
|
<n-input placeholder="" v-model:value="log.fileName" readonly />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="文件大小" path="sizeFormat">
|
||||||
|
<n-input placeholder="" v-model:value="log.sizeFormat" readonly />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="日志内容" path="log" class="n-code-container">
|
||||||
|
<n-code
|
||||||
|
class="n-code-contents"
|
||||||
|
id="n-code"
|
||||||
|
:word-wrap="true"
|
||||||
|
:code="log?.contents ?? ''"
|
||||||
|
language="html"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { h, reactive, ref, onBeforeMount, computed } from 'vue';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { BasicTable, TableAction } from '@/components/Table';
|
||||||
|
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
|
||||||
|
import { Delete, Edit, getSelect, List, Status, OnlineExec, DispatchLog } from '@/api/sys/cron';
|
||||||
|
import { columns } from './columns';
|
||||||
|
import { DeleteOutlined, GroupOutlined, PlusOutlined } from '@vicons/antd';
|
||||||
|
import GroupModal from './modal/modal.vue';
|
||||||
|
import { adaTableScrollX } from '@/utils/hotgo';
|
||||||
|
|
||||||
|
const optionTreeData = ref<any>([]);
|
||||||
|
const defaultValueRef = () => ({
|
||||||
|
id: 0,
|
||||||
|
groupId: 0,
|
||||||
|
title: '',
|
||||||
|
name: '',
|
||||||
|
params: '',
|
||||||
|
pattern: '',
|
||||||
|
policy: 1,
|
||||||
|
count: 1,
|
||||||
|
sort: 0,
|
||||||
|
remark: '',
|
||||||
|
status: 1,
|
||||||
|
});
|
||||||
|
const params = ref<any>({
|
||||||
|
pageSize: 10,
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
status: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules = {};
|
||||||
|
|
||||||
|
const policyOptions = [
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
label: '并行策略',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
label: '单例策略',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 3,
|
||||||
|
label: '单次策略',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 4,
|
||||||
|
label: '多次策略',
|
||||||
|
},
|
||||||
|
].map((s) => {
|
||||||
|
return s;
|
||||||
|
});
|
||||||
|
|
||||||
|
const statusOptions = [
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
label: '运行中',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
label: '已结束',
|
||||||
|
},
|
||||||
|
].map((s) => {
|
||||||
|
return s;
|
||||||
|
});
|
||||||
|
|
||||||
|
const statusActions = [
|
||||||
|
{
|
||||||
|
label: '设为运行中',
|
||||||
|
key: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '设为已结束',
|
||||||
|
key: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除任务',
|
||||||
|
key: 3,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const groupOptions = ref<any>([]);
|
||||||
|
const showStdout = ref(false);
|
||||||
|
const log = ref();
|
||||||
|
const schemas: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'groupId',
|
||||||
|
component: 'NTreeSelect',
|
||||||
|
label: '任务分组',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择分组',
|
||||||
|
options: groupOptions,
|
||||||
|
clearable: true,
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'name',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '任务名称',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入任务名称',
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: [{ message: '请输入任务名称', trigger: ['blur'] }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'policy',
|
||||||
|
component: 'NSelect',
|
||||||
|
label: '执行策略',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择策略',
|
||||||
|
options: policyOptions,
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
component: 'NSelect',
|
||||||
|
label: '运行状态',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择类型',
|
||||||
|
options: statusOptions,
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const message = useMessage();
|
||||||
|
const actionRef = ref();
|
||||||
|
const dialog = useDialog();
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const searchFormRef = ref<any>({});
|
||||||
|
const formRef = ref<any>({});
|
||||||
|
const batchDeleteDisabled = ref(true);
|
||||||
|
const checkedIds = ref([]);
|
||||||
|
let formParams = ref<any>(defaultValueRef());
|
||||||
|
|
||||||
|
const actionColumn = reactive({
|
||||||
|
width: 320,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
render(record) {
|
||||||
|
return h(TableAction as any, {
|
||||||
|
style: 'button',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '在线执行',
|
||||||
|
onClick: handleExecute.bind(null, record),
|
||||||
|
type: 'success',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '调度日志',
|
||||||
|
onClick: handleDispatchLog.bind(null, record),
|
||||||
|
type: 'default',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
onClick: handleEdit.bind(null, record),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
dropDownActions: statusActions,
|
||||||
|
select: (key) => {
|
||||||
|
if (key < 3) {
|
||||||
|
updateStatus(record.id, key);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (key == 3) {
|
||||||
|
handleDelete(record);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const scrollX = computed(() => {
|
||||||
|
return adaTableScrollX(columns, actionColumn.width);
|
||||||
|
});
|
||||||
|
|
||||||
|
const [register, {}] = useForm({
|
||||||
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||||
|
labelWidth: 80,
|
||||||
|
schemas,
|
||||||
|
});
|
||||||
|
|
||||||
|
function addTable() {
|
||||||
|
showModal.value = true;
|
||||||
|
formParams.value = defaultValueRef();
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadDataTable = async (res) => {
|
||||||
|
return await List({ ...params.value, ...res, ...searchFormRef.value?.formModel });
|
||||||
|
};
|
||||||
|
|
||||||
|
function onCheckedRow(rowKeys) {
|
||||||
|
batchDeleteDisabled.value = rowKeys.length <= 0;
|
||||||
|
checkedIds.value = rowKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
Edit(formParams.value).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
showModal.value = false;
|
||||||
|
reloadTable();
|
||||||
|
formParams.value = ref(defaultValueRef());
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit(record: Recordable) {
|
||||||
|
showModal.value = true;
|
||||||
|
formParams.value = record;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDispatchLog(record: Recordable) {
|
||||||
|
DispatchLog(record).then((res) => {
|
||||||
|
showStdout.value = true;
|
||||||
|
log.value = res;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
const container = document.getElementById('n-code');
|
||||||
|
container.scrollTop = container.scrollHeight;
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleExecute(record: Recordable) {
|
||||||
|
dialog.info({
|
||||||
|
title: '提示',
|
||||||
|
content: '提交成功后将立即执行一次，你确定要执行吗？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
OnlineExec(record).then((_res) => {
|
||||||
|
message.success('提交成功，执行结果请登录控制台查看日志！');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete(record).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function batchDelete() {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete({ id: checkedIds.value }).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSubmit(values: Recordable) {
|
||||||
|
params.value = values;
|
||||||
|
reloadTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleReset(values: Recordable) {
|
||||||
|
params.value = values;
|
||||||
|
reloadTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateStatus(id, status) {
|
||||||
|
Status({ id: id, status: status }).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const GroupModalRef = ref();
|
||||||
|
function openGroupModal() {
|
||||||
|
const { openDrawer } = GroupModalRef.value;
|
||||||
|
openDrawer();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function reloadGroupOption() {
|
||||||
|
const tmp = await getSelect({});
|
||||||
|
optionTreeData.value = tmp.list;
|
||||||
|
if (optionTreeData.value === undefined || optionTreeData.value === null) {
|
||||||
|
optionTreeData.value = [];
|
||||||
|
}
|
||||||
|
groupOptions.value = transformGroupData(optionTreeData.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function transformGroupData(data: any[]) {
|
||||||
|
return data.map((item) => {
|
||||||
|
return {
|
||||||
|
key: item.key,
|
||||||
|
value: item.key,
|
||||||
|
label: item.label,
|
||||||
|
children: item.children !== null ? transformGroupData(item.children) : null,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
await reloadGroupOption();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 处理选项更新
|
||||||
|
function handleUpdateValue(value: string | number) {
|
||||||
|
formParams.value.groupId = value;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.n-code-container {
|
||||||
|
height: 450px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.n-code-contents {
|
||||||
|
height: 450px;
|
||||||
|
width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
background: #2f3129;
|
||||||
|
color: wheat;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
import { h } from 'vue';
|
||||||
|
import { NTag } from 'naive-ui';
|
||||||
|
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: 'ID',
|
||||||
|
dataIndex: 'id',
|
||||||
|
key: 'id',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '分组名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
key: 'name',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '上级分组',
|
||||||
|
dataIndex: 'supName',
|
||||||
|
key: 'supName',
|
||||||
|
width: 150,
|
||||||
|
render(row) {
|
||||||
|
if (row.supName == ''){
|
||||||
|
return '顶级分组';
|
||||||
|
}
|
||||||
|
return row.supName;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '默认',
|
||||||
|
dataIndex: 'isDefault',
|
||||||
|
key: 'isDefault',
|
||||||
|
render(row) {
|
||||||
|
return row.isDefault === 1 ? '是' : '否';
|
||||||
|
},
|
||||||
|
width: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'status',
|
||||||
|
key: 'status',
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: row.status === 1 ? 'info' : 'error',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => (row.status === 1 ? '正常' : '禁用'),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title: '排序',
|
||||||
|
// dataIndex: 'sort',
|
||||||
|
// key: 'sort',
|
||||||
|
// width: 100,
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
title: '备注',
|
||||||
|
dataIndex: 'remark',
|
||||||
|
key: 'remark',
|
||||||
|
width: 150,
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title: '更新时间',
|
||||||
|
// dataIndex: 'updatedAt',
|
||||||
|
// key: 'updatedAt',
|
||||||
|
// width: 160,
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
dataIndex: 'createdAt',
|
||||||
|
key: 'createdAt',
|
||||||
|
width: 160,
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -0,0 +1,237 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-card :bordered="false" class="proCard">
|
||||||
|
<BasicTable
|
||||||
|
:columns="columns"
|
||||||
|
:request="loadDataTable"
|
||||||
|
:row-key="(row) => row.id"
|
||||||
|
ref="actionRef"
|
||||||
|
:actionColumn="actionColumn"
|
||||||
|
@update:checked-row-keys="onCheckedRow"
|
||||||
|
:scroll-x="1090"
|
||||||
|
:flex-height="false"
|
||||||
|
:pagination="{ pageSize: 10 }"
|
||||||
|
:resizeHeightOffset="-50000"
|
||||||
|
>
|
||||||
|
<template #tableTitle>
|
||||||
|
<n-button type="primary" @click="addTable">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
添加分组
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
|
||||||
|
<n-modal v-model:show="showModal" :show-icon="false" preset="dialog" :title="modalTitle">
|
||||||
|
<n-form
|
||||||
|
:model="formParams"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="80"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-form-item label="上级分组" path="pid">
|
||||||
|
<n-tree-select
|
||||||
|
:options="optionTreeData"
|
||||||
|
:default-value="formParams.pid"
|
||||||
|
@update:value="handleUpdateValue"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="分组名称" path="name">
|
||||||
|
<n-input placeholder="请输入分组名称" v-model:value="formParams.name" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="状态" path="status">
|
||||||
|
<n-radio-group v-model:value="formParams.status" name="status">
|
||||||
|
<n-radio-button
|
||||||
|
v-for="status in statusOptions"
|
||||||
|
:key="status.value"
|
||||||
|
:value="status.value"
|
||||||
|
:label="status.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<!-- <n-form-item label="排序" path="sort">-->
|
||||||
|
<!-- <n-input-number v-model:value="formParams.sort" clearable />-->
|
||||||
|
<!-- </n-form-item>-->
|
||||||
|
|
||||||
|
<n-form-item label="备注" path="remark">
|
||||||
|
<n-input type="textarea" placeholder="请输入备注" v-model:value="formParams.remark" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="() => (showModal = false)">取消</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { h, reactive, ref, onMounted } from 'vue';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { BasicTable, TableAction } from '@/components/Table';
|
||||||
|
import { columns } from './columns';
|
||||||
|
import { PlusOutlined } from '@vicons/antd';
|
||||||
|
import { GroupDelete, GroupEdit, GroupList, getSelect } from '@/api/sys/cron';
|
||||||
|
import { statusOptions } from '@/enums/optionsiEnum';
|
||||||
|
|
||||||
|
const emit = defineEmits(['reloadGroupOption']);
|
||||||
|
const optionTreeData = ref<any>([]);
|
||||||
|
const message = useMessage();
|
||||||
|
const statusValue = ref(1);
|
||||||
|
const defaultValueRef = () => ({
|
||||||
|
id: 0,
|
||||||
|
pid: 0,
|
||||||
|
name: '',
|
||||||
|
sort: 0,
|
||||||
|
remark: '',
|
||||||
|
status: statusValue.value,
|
||||||
|
});
|
||||||
|
const modalTitle = ref('添加分组');
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const rules = {
|
||||||
|
name: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
message: '请输入名称',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
function addTable() {
|
||||||
|
showModal.value = true;
|
||||||
|
modalTitle.value = '添加分组';
|
||||||
|
formParams.value = defaultValueRef();
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
GroupEdit(formParams.value).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
showModal.value = false;
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const dialog = useDialog();
|
||||||
|
const actionRef = ref();
|
||||||
|
const formParams = ref<any>(defaultValueRef);
|
||||||
|
const formRef = ref<any>({});
|
||||||
|
|
||||||
|
const actionColumn = reactive({
|
||||||
|
width: 150,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
// fixed: 'right',
|
||||||
|
render(record) {
|
||||||
|
return h(TableAction as any, {
|
||||||
|
style: 'button',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
onClick: handleEdit.bind(null, record),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
onClick: handleDelete.bind(null, record),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleEdit(record: Recordable) {
|
||||||
|
showModal.value = true;
|
||||||
|
modalTitle.value = '编辑分组 ID：' + record.id;
|
||||||
|
formParams.value = {
|
||||||
|
id: record.id,
|
||||||
|
pid: record.pid,
|
||||||
|
name: record.name,
|
||||||
|
sort: record.sort,
|
||||||
|
remark: record.remark,
|
||||||
|
status: record.status,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
GroupDelete(record).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onNegativeClick: () => {
|
||||||
|
// message.error('取消');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const dataSource = ref({
|
||||||
|
successful_order: 0,
|
||||||
|
transaction_money: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadDataTable = async (res) => {
|
||||||
|
dataSource.value = await GroupList({ ...res });
|
||||||
|
return dataSource.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
function onCheckedRow(rowKeys) {
|
||||||
|
console.log(rowKeys);
|
||||||
|
}
|
||||||
|
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value.reload();
|
||||||
|
emit('reloadGroupOption');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function setDictSelect() {
|
||||||
|
const tmp = await getSelect({});
|
||||||
|
optionTreeData.value = [
|
||||||
|
{
|
||||||
|
id: 0,
|
||||||
|
key: 0,
|
||||||
|
label: '顶级分组',
|
||||||
|
pid: 0,
|
||||||
|
name: '顶级分组',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
optionTreeData.value = optionTreeData.value.concat(tmp.list);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await setDictSelect();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 处理选项更新
|
||||||
|
function handleUpdateValue(value: string | number | Array<string | number> | null) {
|
||||||
|
formParams.value.pid = value;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
style="width: 80%; height: 700px"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
:title="title"
|
||||||
|
>
|
||||||
|
<Index @reloadGroupOption="reloadGroupOption" />
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import Index from './index.vue';
|
||||||
|
|
||||||
|
const emit = defineEmits(['reloadGroupOption']);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const title = ref('任务分组');
|
||||||
|
|
||||||
|
function openDrawer() {
|
||||||
|
showModal.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function reloadGroupOption() {
|
||||||
|
emit('reloadGroupOption');
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ openDrawer });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<n-drawer
|
||||||
|
v-model:show="isDrawer"
|
||||||
|
:width="dialogWidth"
|
||||||
|
:label-placement="settingStore.isMobile ? 'top' : 'left'"
|
||||||
|
>
|
||||||
|
<n-drawer-content :title="title" closable>
|
||||||
|
<n-form
|
||||||
|
:model="formParams"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="100"
|
||||||
|
>
|
||||||
|
<n-divider title-placement="left">基本设置</n-divider>
|
||||||
|
<n-form-item label="上级字典" path="pid">
|
||||||
|
<n-tree-select
|
||||||
|
:options="optionTreeData"
|
||||||
|
:default-value="formParams.pid"
|
||||||
|
@update:value="handleUpdateValue"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="类型名称" path="name">
|
||||||
|
<n-input placeholder="请输入类型名称" v-model:value="formParams.name" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="类型编码" path="type">
|
||||||
|
<n-input placeholder="请输入类型编码" v-model:value="formParams.type" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="排序" path="sort">
|
||||||
|
<n-input-number v-model:value="formParams.sort" clearable />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="状态" path="status">
|
||||||
|
<n-radio-group v-model:value="formParams.status" name="status">
|
||||||
|
<n-radio-button
|
||||||
|
v-for="status in dict.getOptionUnRef('sys_normal_disable')"
|
||||||
|
:key="status.value"
|
||||||
|
:value="status.value"
|
||||||
|
:label="status.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" :loading="btnLoading" @click="formSubmit">提交</n-button>
|
||||||
|
<n-button @click="closeDrawer">取消</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-drawer-content>
|
||||||
|
</n-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { EditDict } from '@/api/dict/dict';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
import type { FormRules } from 'naive-ui/es/form/src/interface';
|
||||||
|
import { State } from '@/views/system/dict/model';
|
||||||
|
import { adaModalWidth } from '@/utils/hotgo';
|
||||||
|
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||||
|
|
||||||
|
const rules: FormRules = {
|
||||||
|
name: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入类型名称',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入类型编码',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: '添加顶级菜单';
|
||||||
|
optionTreeData: [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const emit = defineEmits(['loadData']);
|
||||||
|
const props = withDefaults(defineProps<Props>(), {});
|
||||||
|
const dict = useDictStore();
|
||||||
|
const message = useMessage();
|
||||||
|
const settingStore = useProjectSettingStore();
|
||||||
|
const formRef: any = ref(null);
|
||||||
|
const formParams = ref<State>(new State());
|
||||||
|
const btnLoading = ref(false);
|
||||||
|
const isDrawer = ref(false);
|
||||||
|
|
||||||
|
const dialogWidth = computed(() => {
|
||||||
|
return adaModalWidth(500);
|
||||||
|
});
|
||||||
|
|
||||||
|
function openDrawer(state: State) {
|
||||||
|
isDrawer.value = true;
|
||||||
|
formParams.value = state;
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeDrawer() {
|
||||||
|
isDrawer.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
btnLoading.value = true;
|
||||||
|
EditDict(formParams.value)
|
||||||
|
.then(async (_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
emit('loadData');
|
||||||
|
closeDrawer();
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
btnLoading.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理选项更新
|
||||||
|
function handleUpdateValue(value: number) {
|
||||||
|
formParams.value.pid = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
openDrawer,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
import { h } from 'vue';
|
||||||
|
import { NTag } from 'naive-ui';
|
||||||
|
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: '字典ID',
|
||||||
|
key: 'id',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '字典类型',
|
||||||
|
key: 'type',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '字典标签',
|
||||||
|
key: 'type',
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: row.listClass,
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => row.label,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '字典键值',
|
||||||
|
key: 'value',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '键值类型',
|
||||||
|
key: 'valueType',
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: 'default',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => row.valueType,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
key: 'status',
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
type: row.status == 1 ? 'success' : 'warning',
|
||||||
|
bordered: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => (row.status == 1 ? '正常' : '隐藏'),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -0,0 +1,217 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="n-layout-page-header">
|
||||||
|
<n-card :bordered="false" title="字典管理">
|
||||||
|
可代替后台管理系统，设置的大量枚举值和配置，统一标准化管理，随时修改或增加
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
<n-grid cols="1 s:1 m:1 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12">
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
|
||||||
|
<template #header>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="info" icon-placement="left" @click="openCreateDrawer">
|
||||||
|
<template #icon>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<n-icon size="14">
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
添加
|
||||||
|
</n-button>
|
||||||
|
<n-button
|
||||||
|
type="info"
|
||||||
|
icon-placement="left"
|
||||||
|
@click="openEditDrawer"
|
||||||
|
:disabled="formParams.id === 0"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<n-icon size="14">
|
||||||
|
<EditOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
编辑
|
||||||
|
</n-button>
|
||||||
|
<n-button type="error" icon-placement="left" @click="handleDel">
|
||||||
|
<template #icon>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<n-icon size="14">
|
||||||
|
<DeleteOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
删除
|
||||||
|
</n-button>
|
||||||
|
<n-button type="info" icon-placement="left" @click="packHandle">
|
||||||
|
{{ expandedKeys.length ? '收起' : '展开' }}
|
||||||
|
<template #icon>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<n-icon size="14">
|
||||||
|
<AlignLeftOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
<div class="w-full menu">
|
||||||
|
<n-input type="text" v-model:value="pattern" placeholder="输入字典名称搜索">
|
||||||
|
<template #suffix>
|
||||||
|
<n-icon size="18" class="cursor-pointer">
|
||||||
|
<SearchOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<div class="py-3 menu-list">
|
||||||
|
<template v-if="loading">
|
||||||
|
<div class="flex items-center justify-center py-4">
|
||||||
|
<n-spin size="medium" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<n-tree
|
||||||
|
block-line
|
||||||
|
cascade
|
||||||
|
checkable
|
||||||
|
:virtual-scroll="true"
|
||||||
|
:pattern="pattern"
|
||||||
|
:data="treeData"
|
||||||
|
:expandedKeys="expandedKeys"
|
||||||
|
style="max-height: 95%; overflow: hidden"
|
||||||
|
@update:selected-keys="selectedTree"
|
||||||
|
@update:expanded-keys="onExpandedKeys"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="3">
|
||||||
|
<n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
|
||||||
|
<template #header>
|
||||||
|
<n-space>
|
||||||
|
<n-icon size="18">
|
||||||
|
<FormOutlined />
|
||||||
|
</n-icon>
|
||||||
|
<span>编辑字典{{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
|
||||||
|
<span style="font-size: 14px">{{
|
||||||
|
treeItemTitle ? '' : '从列表选择一项后，进行编辑'
|
||||||
|
}}</span>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<List :checkedId="checkedId" />
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
<CreateDrawer
|
||||||
|
ref="createDrawerRef"
|
||||||
|
:title="drawerTitle"
|
||||||
|
:optionTreeData="optionTreeData"
|
||||||
|
@load-data="loadData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onMounted, reactive, ref, unref } from 'vue';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
import {
|
||||||
|
AlignLeftOutlined,
|
||||||
|
FormOutlined,
|
||||||
|
PlusOutlined,
|
||||||
|
EditOutlined,
|
||||||
|
SearchOutlined,
|
||||||
|
DeleteOutlined,
|
||||||
|
} from '@vicons/antd';
|
||||||
|
import CreateDrawer from './CreateDrawer.vue';
|
||||||
|
import List from './list.vue';
|
||||||
|
import { DeleteDict, getDictTree } from '@/api/dict/dict';
|
||||||
|
import { State } from '@/views/system/dict/model';
|
||||||
|
|
||||||
|
const createDrawerRef = ref();
|
||||||
|
const message = useMessage();
|
||||||
|
const dialog = useDialog();
|
||||||
|
let treeItemKey = ref([]);
|
||||||
|
let expandedKeys = ref([]);
|
||||||
|
const treeData = ref([]);
|
||||||
|
const loading = ref(true);
|
||||||
|
const isEditMenu = ref(false);
|
||||||
|
const treeItemTitle = ref('');
|
||||||
|
const checkedId = ref(0);
|
||||||
|
const pattern = ref('');
|
||||||
|
const drawerTitle = ref('');
|
||||||
|
const optionTreeData = ref([]);
|
||||||
|
const formParams = ref<State>(new State());
|
||||||
|
|
||||||
|
function openCreateDrawer() {
|
||||||
|
drawerTitle.value = '添加字典类型';
|
||||||
|
const { openDrawer } = createDrawerRef.value;
|
||||||
|
openDrawer(new State());
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEditDrawer() {
|
||||||
|
drawerTitle.value = '编辑字典类型';
|
||||||
|
const { openDrawer } = createDrawerRef.value;
|
||||||
|
openDrawer(formParams.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectedTree(keys, opts) {
|
||||||
|
if (keys.length) {
|
||||||
|
const treeItem = opts[0];
|
||||||
|
treeItemKey.value = keys;
|
||||||
|
treeItemTitle.value = treeItem.label;
|
||||||
|
formParams.value = unref(treeItem);
|
||||||
|
isEditMenu.value = true;
|
||||||
|
checkedId.value = treeItem.id;
|
||||||
|
} else {
|
||||||
|
isEditMenu.value = false;
|
||||||
|
treeItemKey.value = [];
|
||||||
|
treeItemTitle.value = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDel() {
|
||||||
|
dialog.info({
|
||||||
|
title: '提示',
|
||||||
|
content: `您确定想删除此类型吗?`,
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
DeleteDict(formParams.value).then(async (_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
await loadData();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function packHandle() {
|
||||||
|
if (expandedKeys.value.length) {
|
||||||
|
expandedKeys.value = [];
|
||||||
|
} else {
|
||||||
|
expandedKeys.value = unref(treeData).map((item: any) => item.key as string) as [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadData() {
|
||||||
|
const treeMenuList = await getDictTree();
|
||||||
|
const keys = treeMenuList.list.map((item) => item.key);
|
||||||
|
Object.assign(formParams.value, keys);
|
||||||
|
treeData.value = [];
|
||||||
|
optionTreeData.value = [];
|
||||||
|
treeData.value = treeMenuList.list;
|
||||||
|
optionTreeData.value = optionTreeData.value.concat(treeMenuList.list);
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onExpandedKeys(keys) {
|
||||||
|
expandedKeys.value = keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await loadData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,325 @@
|
|||||||
|
<template>
|
||||||
|
<n-card :bordered="false" class="proCard">
|
||||||
|
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
|
||||||
|
<template #statusSlot="{ model, field }">
|
||||||
|
<n-input v-model:value="model[field]" />
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
|
|
||||||
|
<BasicTable
|
||||||
|
:columns="columns"
|
||||||
|
:request="loadDataTable"
|
||||||
|
:row-key="(row) => row.id"
|
||||||
|
ref="actionRef"
|
||||||
|
:actionColumn="actionColumn"
|
||||||
|
@update:checked-row-keys="onCheckedRow"
|
||||||
|
:scroll-x="1090"
|
||||||
|
:resizeHeightOffset="-10000"
|
||||||
|
>
|
||||||
|
<template #tableTitle>
|
||||||
|
<n-button type="primary" @click="addTable">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
添加数据
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
:title="formParams?.id > 0 ? '编辑数据' : '添加数据'"
|
||||||
|
>
|
||||||
|
<n-form
|
||||||
|
:model="formParams"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="80"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-form-item label="字典类型" path="typeId">
|
||||||
|
<n-tree-select
|
||||||
|
:options="typeList"
|
||||||
|
:default-value="formParams.typeId"
|
||||||
|
:default-expand-all="true"
|
||||||
|
@update:value="handleUpdateTypeIdValue"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="标签" path="label">
|
||||||
|
<n-input placeholder="请输入标签名称" v-model:value="formParams.label" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="标签样式" path="listClass">
|
||||||
|
<n-select
|
||||||
|
:render-tag="renderTag"
|
||||||
|
v-model:value="formParams.listClass"
|
||||||
|
:options="dict.getOptionUnRef('tagTypeOptions')"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="字典键值" path="value">
|
||||||
|
<n-input placeholder="请输入键值" v-model:value="formParams.value" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="键值类型" path="valueType">
|
||||||
|
<n-select v-model:value="formParams.valueType" :options="options" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="排序" path="sort">
|
||||||
|
<n-input-number placeholder="请输入" v-model:value="formParams.sort" />
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="状态" path="status">
|
||||||
|
<n-radio-group v-model:value="formParams.status" name="status">
|
||||||
|
<n-radio-button
|
||||||
|
v-for="status in dict.getOptionUnRef('sys_normal_disable')"
|
||||||
|
:key="status.value"
|
||||||
|
:value="status.value"
|
||||||
|
:label="status.label"
|
||||||
|
/>
|
||||||
|
</n-radio-group>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="备注" path="remark">
|
||||||
|
<n-input type="textarea" placeholder="请输入备注" v-model:value="formParams.remark" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="() => (showModal = false)">取消</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</n-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { h, reactive, ref, watch, onMounted } from 'vue';
|
||||||
|
import { useMessage, useDialog, NTag, SelectRenderTag } from 'naive-ui';
|
||||||
|
import { BasicTable, TableAction } from '@/components/Table';
|
||||||
|
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
|
||||||
|
import { getDataList, getDictSelect, EditData, DeleteData } from '@/api/dict/dict';
|
||||||
|
import { columns } from './columns';
|
||||||
|
import { PlusOutlined } from '@vicons/antd';
|
||||||
|
import { TypeSelect } from '@/api/sys/config';
|
||||||
|
import { findTreeNode } from '@/utils';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import { Option, useDictStore } from '@/store/modules/dict';
|
||||||
|
import { State } from '@/views/system/dict/model';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
checkedId?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
const props = withDefaults(defineProps<Props>(), { checkedId: 0 });
|
||||||
|
const typeList = ref<any>([]);
|
||||||
|
const rules = {
|
||||||
|
label: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
message: '请输入标签名称',
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
message: '请输入键值',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const schemas: FormSchema[] = [
|
||||||
|
{
|
||||||
|
field: 'label',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '字典标签',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入字典标签',
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
params.value.label = e;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: [{ message: '请输入字典标签', trigger: ['blur'] }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'value',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '字典键值',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入字典键值',
|
||||||
|
onInput: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
params.value.value = e;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: [{ message: '请输入字典键值', trigger: ['blur'] }],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const renderTag: SelectRenderTag = ({ option }) => {
|
||||||
|
return h(
|
||||||
|
NTag,
|
||||||
|
{
|
||||||
|
type: option.listClass as 'success' | 'warning' | 'error' | 'info' | 'primary' | 'default',
|
||||||
|
},
|
||||||
|
{ default: () => option.label }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formRef: any = ref(null);
|
||||||
|
const message = useMessage();
|
||||||
|
const dialog = useDialog();
|
||||||
|
const actionRef = ref();
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const formParams = ref<State>(new State());
|
||||||
|
const options = ref<Option>();
|
||||||
|
const typeId = ref(0);
|
||||||
|
|
||||||
|
const params = ref({
|
||||||
|
pageSize: 10,
|
||||||
|
typeId: props.checkedId,
|
||||||
|
label: '',
|
||||||
|
value: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionColumn = reactive({
|
||||||
|
width: 140,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
render(record) {
|
||||||
|
return h(TableAction as any, {
|
||||||
|
style: 'button',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
onClick: handleEdit.bind(null, record),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
onClick: handleDelete.bind(null, record),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [register, {}] = useForm({
|
||||||
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||||
|
labelWidth: 80,
|
||||||
|
schemas,
|
||||||
|
});
|
||||||
|
|
||||||
|
function addTable() {
|
||||||
|
showModal.value = true;
|
||||||
|
formParams.value = new State();
|
||||||
|
if (typeId.value > 0) {
|
||||||
|
formParams.value.typeId = typeId.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadDataTable = async (res) => {
|
||||||
|
return await getDataList({ ...params.value, ...res });
|
||||||
|
};
|
||||||
|
|
||||||
|
function onCheckedRow(rowKeys) {
|
||||||
|
console.log(rowKeys);
|
||||||
|
}
|
||||||
|
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
EditData(formParams.value)
|
||||||
|
.then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
showModal.value = false;
|
||||||
|
reloadTable();
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
DeleteData(record).then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit(record: Recordable) {
|
||||||
|
showModal.value = true;
|
||||||
|
formParams.value = cloneDeep(record) as unknown as State;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSubmit(_values: Recordable) {
|
||||||
|
reloadTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleReset(_values: Recordable) {
|
||||||
|
params.value.label = '';
|
||||||
|
params.value.value = '';
|
||||||
|
reloadTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function setDictSelect() {
|
||||||
|
const tmp = await getDictSelect({});
|
||||||
|
typeList.value = tmp.list;
|
||||||
|
if (typeList.value === undefined || typeList.value === null) {
|
||||||
|
typeList.value = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleUpdateTypeIdValue(value) {
|
||||||
|
const row = findTreeNode(typeList.value, value, 'id');
|
||||||
|
if (!row) {
|
||||||
|
message.error('未找到该节点数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
formParams.value.typeId = value;
|
||||||
|
formParams.value.type = row.type;
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadOptions() {
|
||||||
|
dict.loadOptions(['sys_normal_disable']);
|
||||||
|
TypeSelect().then((res) => {
|
||||||
|
options.value = res;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(props, (newVal, _oldVal) => {
|
||||||
|
params.value.typeId = newVal.checkedId;
|
||||||
|
typeId.value = newVal.checkedId;
|
||||||
|
actionRef.value.reload();
|
||||||
|
setDictSelect();
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
loadOptions();
|
||||||
|
await setDictSelect();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
export class State {
|
||||||
|
typeId = 0;
|
||||||
|
key = '';
|
||||||
|
id = 0;
|
||||||
|
label = '';
|
||||||
|
value = '';
|
||||||
|
valueType = 'string';
|
||||||
|
type = '';
|
||||||
|
listClass = 'primary';
|
||||||
|
isDefault = 0;
|
||||||
|
sort = 0;
|
||||||
|
remark = '';
|
||||||
|
status = 1;
|
||||||
|
createdAt = '';
|
||||||
|
updatedAt = '';
|
||||||
|
pid: number | null = 0;
|
||||||
|
name = '';
|
||||||
|
}
|
||||||
@@ -0,0 +1,157 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-modal
|
||||||
|
v-model:show="showModal"
|
||||||
|
:mask-closable="false"
|
||||||
|
:show-icon="false"
|
||||||
|
preset="dialog"
|
||||||
|
transform-origin="center"
|
||||||
|
:title="formValue.id > 0 ? '编辑测试分类 #' + formValue.id : '添加测试分类'"
|
||||||
|
:style="{
|
||||||
|
width: dialogWidth,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<n-scrollbar style="max-height: 87vh" class="pr-5">
|
||||||
|
<n-spin :show="loading" description="请稍候...">
|
||||||
|
<n-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formValue"
|
||||||
|
:rules="rules"
|
||||||
|
:label-placement="settingStore.isMobile ? 'top' : 'left'"
|
||||||
|
:label-width="100"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-grid cols="1 s:1 m:2 l:2 xl:2 2xl:2" responsive="screen">
|
||||||
|
<n-gi span="2">
|
||||||
|
<n-form-item label="分类名称" path="name">
|
||||||
|
<n-input placeholder="请输入分类名称" v-model:value="formValue.name" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="2">
|
||||||
|
<n-form-item label="简称" path="shortName">
|
||||||
|
<n-input placeholder="请输入简称" v-model:value="formValue.shortName" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="2">
|
||||||
|
<n-form-item label="描述" path="description">
|
||||||
|
<n-input type="textarea" placeholder="描述" v-model:value="formValue.description" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="排序" path="sort">
|
||||||
|
<n-input-number placeholder="请输入排序" v-model:value="formValue.sort" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="1">
|
||||||
|
<n-form-item label="状态" path="status">
|
||||||
|
<n-select v-model:value="formValue.status" :options="dict.getOptionUnRef('sys_normal_disable')" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi span="2">
|
||||||
|
<n-form-item label="备注" path="remark">
|
||||||
|
<n-input type="textarea" placeholder="备注" v-model:value="formValue.remark" />
|
||||||
|
</n-form-item>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
</n-form>
|
||||||
|
</n-spin>
|
||||||
|
</n-scrollbar>
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="closeForm">
|
||||||
|
取消
|
||||||
|
</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">
|
||||||
|
确定
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
import { Edit, View, MaxSort } from '@/api/testCategory';
|
||||||
|
import { State, newState, rules } from './model';
|
||||||
|
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||||
|
import { useMessage } from 'naive-ui';
|
||||||
|
import { adaModalWidth } from '@/utils/hotgo';
|
||||||
|
|
||||||
|
const emit = defineEmits(['reloadTable']);
|
||||||
|
const message = useMessage();
|
||||||
|
const settingStore = useProjectSettingStore();
|
||||||
|
const dict = useDictStore();
|
||||||
|
const loading = ref(false);
|
||||||
|
const showModal = ref(false);
|
||||||
|
const formValue = ref<State>(newState(null));
|
||||||
|
const formRef = ref<any>({});
|
||||||
|
const formBtnLoading = ref(false);
|
||||||
|
const dialogWidth = computed(() => {
|
||||||
|
return adaModalWidth(840);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 提交表单
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
formBtnLoading.value = true;
|
||||||
|
Edit(formValue.value)
|
||||||
|
.then((_res) => {
|
||||||
|
message.success('操作成功');
|
||||||
|
closeForm();
|
||||||
|
emit('reloadTable');
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
formBtnLoading.value = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭表单
|
||||||
|
function closeForm() {
|
||||||
|
showModal.value = false;
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开模态框
|
||||||
|
function openModal(state: State) {
|
||||||
|
showModal.value = true;
|
||||||
|
|
||||||
|
// 新增
|
||||||
|
if (!state || state.id < 1) {
|
||||||
|
formValue.value = newState(state);
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
MaxSort()
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value.sort = res.sort;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑
|
||||||
|
loading.value = true;
|
||||||
|
View({ id: state.id })
|
||||||
|
.then((res) => {
|
||||||
|
formValue.value = res;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
openModal,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less"></style>
|
||||||
@@ -0,0 +1,193 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="n-layout-page-header">
|
||||||
|
<n-card :bordered="false" title="测试分类">
|
||||||
|
<!-- 这是由系统生成的CURD表格，你可以将此行注释改为表格的描述 -->
|
||||||
|
</n-card>
|
||||||
|
</div>
|
||||||
|
<n-card :bordered="false" class="proCard">
|
||||||
|
<BasicForm ref="searchFormRef" @register="register" @submit="reloadTable" @reset="reloadTable" @keyup.enter="reloadTable">
|
||||||
|
<template #statusSlot="{ model, field }">
|
||||||
|
<n-input v-model:value="model[field]" />
|
||||||
|
</template>
|
||||||
|
</BasicForm>
|
||||||
|
<BasicTable ref="actionRef" openChecked :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" :actionColumn="actionColumn" :scroll-x="scrollX" :resizeHeightOffset="-10000" :checked-row-keys="checkedIds" @update:checked-row-keys="handleOnCheckedRow">
|
||||||
|
<template #tableTitle>
|
||||||
|
<n-button type="primary" @click="addTable" class="min-left-space" v-if="hasPermission(['/testCategory/edit'])">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<PlusOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
添加
|
||||||
|
</n-button>
|
||||||
|
<n-button type="error" @click="handleBatchDelete" class="min-left-space" v-if="hasPermission(['/testCategory/delete'])">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<DeleteOutlined />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
批量删除
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</BasicTable>
|
||||||
|
</n-card>
|
||||||
|
<Edit ref="editRef" @reloadTable="reloadTable" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { h, reactive, ref, computed, onMounted } from 'vue';
|
||||||
|
import { useDialog, useMessage } from 'naive-ui';
|
||||||
|
import { BasicTable, TableAction } from '@/components/Table';
|
||||||
|
import { BasicForm, useForm } from '@/components/Form/index';
|
||||||
|
import { usePermission } from '@/hooks/web/usePermission';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
import { List, Delete, Status } from '@/api/testCategory';
|
||||||
|
import { PlusOutlined, DeleteOutlined } from '@vicons/antd';
|
||||||
|
import { columns, schemas, loadOptions } from './model';
|
||||||
|
import { adaTableScrollX } from '@/utils/hotgo';
|
||||||
|
import Edit from './edit.vue';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
const dialog = useDialog();
|
||||||
|
const message = useMessage();
|
||||||
|
const { hasPermission } = usePermission();
|
||||||
|
const actionRef = ref();
|
||||||
|
const searchFormRef = ref<any>({});
|
||||||
|
const editRef = ref();
|
||||||
|
|
||||||
|
const checkedIds = ref([]);
|
||||||
|
|
||||||
|
const actionColumn = reactive({
|
||||||
|
width: 216,
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
fixed: 'right',
|
||||||
|
render(record: State) {
|
||||||
|
return h(TableAction as any, {
|
||||||
|
style: 'button',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
onClick: handleEdit.bind(null, record),
|
||||||
|
auth: ['/testCategory/edit'],
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: '禁用',
|
||||||
|
onClick: handleStatus.bind(null, record, 2),
|
||||||
|
ifShow: () => {
|
||||||
|
return record.status === 1;
|
||||||
|
},
|
||||||
|
auth: ['/testCategory/status'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '启用',
|
||||||
|
onClick: handleStatus.bind(null, record, 1),
|
||||||
|
ifShow: () => {
|
||||||
|
return record.status === 2;
|
||||||
|
},
|
||||||
|
auth: ['/testCategory/status'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
onClick: handleDelete.bind(null, record),
|
||||||
|
auth: ['/testCategory/delete'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const scrollX = computed(() => {
|
||||||
|
return adaTableScrollX(columns, actionColumn.width);
|
||||||
|
});
|
||||||
|
|
||||||
|
const [register, {}] = useForm({
|
||||||
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||||
|
labelWidth: 80,
|
||||||
|
schemas,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载表格数据
|
||||||
|
const loadDataTable = async (res) => {
|
||||||
|
return await List({ ...searchFormRef.value?.formModel, ...res });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 更新选中的行
|
||||||
|
function handleOnCheckedRow(rowKeys) {
|
||||||
|
checkedIds.value = rowKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重新加载表格数据
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value?.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加数据
|
||||||
|
function addTable() {
|
||||||
|
editRef.value.openModal(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑数据
|
||||||
|
function handleEdit(record: Recordable) {
|
||||||
|
editRef.value.openModal(record);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 单个删除
|
||||||
|
function handleDelete(record: Recordable) {
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete(record).then((_res) => {
|
||||||
|
message.success('删除成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 批量删除
|
||||||
|
function handleBatchDelete() {
|
||||||
|
if (checkedIds.value.length < 1){
|
||||||
|
message.error('请至少选择一项要删除的数据');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: '你确定要批量删除？',
|
||||||
|
positiveText: '确定',
|
||||||
|
negativeText: '取消',
|
||||||
|
onPositiveClick: () => {
|
||||||
|
Delete({ id: checkedIds.value }).then((_res) => {
|
||||||
|
checkedIds.value = [];
|
||||||
|
message.success('删除成功');
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改状态
|
||||||
|
function handleStatus(record: Recordable, status: number) {
|
||||||
|
Status({ id: record.id, status: status }).then((_res) => {
|
||||||
|
message.success('设为' + dict.getLabel('sys_normal_disable', status) + '成功');
|
||||||
|
setTimeout(() => {
|
||||||
|
reloadTable();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadOptions();
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@@ -0,0 +1,153 @@
|
|||||||
|
import { h, ref } from 'vue';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import { FormSchema } from '@/components/Form';
|
||||||
|
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||||
|
import { renderOptionTag } from '@/utils';
|
||||||
|
import { useDictStore } from '@/store/modules/dict';
|
||||||
|
|
||||||
|
const dict = useDictStore();
|
||||||
|
|
||||||
|
export class State {
|
||||||
|
public id = 0; // 分类ID
|
||||||
|
public name = ''; // 分类名称
|
||||||
|
public shortName = ''; // 简称
|
||||||
|
public description = ''; // 描述
|
||||||
|
public sort = 0; // 排序
|
||||||
|
public status = 1; // 状态
|
||||||
|
public remark = ''; // 备注
|
||||||
|
public createdAt = ''; // 创建时间
|
||||||
|
public updatedAt = ''; // 修改时间
|
||||||
|
public deletedAt = ''; // 删除时间
|
||||||
|
|
||||||
|
constructor(state?: Partial<State>) {
|
||||||
|
if (state) {
|
||||||
|
Object.assign(this, state);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function newState(state: State | Record<string, any> | null): State {
|
||||||
|
if (state !== null) {
|
||||||
|
if (state instanceof State) {
|
||||||
|
return cloneDeep(state);
|
||||||
|
}
|
||||||
|
return new State(state);
|
||||||
|
}
|
||||||
|
return new State();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单验证规则
|
||||||
|
export const rules = {
|
||||||
|
name: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
type: 'string',
|
||||||
|
message: '请输入分类名称',
|
||||||
|
},
|
||||||
|
sort: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
type: 'number',
|
||||||
|
message: '请输入排序',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格搜索表单
|
||||||
|
export const schemas = ref<FormSchema[]>([
|
||||||
|
{
|
||||||
|
field: 'id',
|
||||||
|
component: 'NInputNumber',
|
||||||
|
label: '分类ID',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入分类ID',
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'name',
|
||||||
|
component: 'NInput',
|
||||||
|
label: '分类名称',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入分类名称',
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
component: 'NSelect',
|
||||||
|
label: '状态',
|
||||||
|
defaultValue: null,
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择状态',
|
||||||
|
options: dict.getOption('sys_normal_disable'),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'createdAt',
|
||||||
|
component: 'NDatePicker',
|
||||||
|
label: '创建时间',
|
||||||
|
componentProps: {
|
||||||
|
type: 'datetimerange',
|
||||||
|
clearable: true,
|
||||||
|
shortcuts: defRangeShortcuts(),
|
||||||
|
onUpdateValue: (e: any) => {
|
||||||
|
console.log(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 表格列
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: '分类ID',
|
||||||
|
key: 'id',
|
||||||
|
align: 'left',
|
||||||
|
width: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '分类名称',
|
||||||
|
key: 'name',
|
||||||
|
align: 'left',
|
||||||
|
width: -1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '简称',
|
||||||
|
key: 'shortName',
|
||||||
|
align: 'left',
|
||||||
|
width: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '描述',
|
||||||
|
key: 'description',
|
||||||
|
align: 'left',
|
||||||
|
width: 300,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
key: 'status',
|
||||||
|
align: 'left',
|
||||||
|
width: -1,
|
||||||
|
render(row: State) {
|
||||||
|
return renderOptionTag('sys_normal_disable', row.status);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'createdAt',
|
||||||
|
align: 'left',
|
||||||
|
width: 180,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// 加载字典数据选项
|
||||||
|
export function loadOptions() {
|
||||||
|
dict.loadOptions(['sys_normal_disable']);
|
||||||
|
}
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
plugins: ['stylelint-order'],
|
||||||
|
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
|
||||||
|
rules: {
|
||||||
|
'selector-pseudo-class-no-unknown': [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
ignorePseudoClasses: ['global'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'selector-pseudo-element-no-unknown': [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
ignorePseudoElements: ['v-deep'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'at-rule-no-unknown': [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
ignoreAtRules: [
|
||||||
|
'tailwind',
|
||||||
|
'apply',
|
||||||
|
'variants',
|
||||||
|
'responsive',
|
||||||
|
'screen',
|
||||||
|
'function',
|
||||||
|
'if',
|
||||||
|
'each',
|
||||||
|
'include',
|
||||||
|
'mixin',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'no-empty-source': null,
|
||||||
|
'named-grid-areas-no-invalid': null,
|
||||||
|
'unicode-bom': 'never',
|
||||||
|
'no-descending-specificity': null,
|
||||||
|
'font-family-no-missing-generic-family-keyword': null,
|
||||||
|
'declaration-colon-space-after': 'always-single-line',
|
||||||
|
'declaration-colon-space-before': 'never',
|
||||||
|
// 'declaration-block-trailing-semicolon': 'always',
|
||||||
|
'rule-empty-line-before': [
|
||||||
|
'always',
|
||||||
|
{
|
||||||
|
ignore: ['after-comment', 'first-nested'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
|
||||||
|
'order/order': [
|
||||||
|
[
|
||||||
|
'dollar-variables',
|
||||||
|
'custom-properties',
|
||||||
|
'at-rules',
|
||||||
|
'declarations',
|
||||||
|
{
|
||||||
|
type: 'at-rule',
|
||||||
|
name: 'supports',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'at-rule',
|
||||||
|
name: 'media',
|
||||||
|
},
|
||||||
|
'rules',
|
||||||
|
],
|
||||||
|
{ severity: 'warning' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
|
||||||
|
};
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
module.exports = {
|
||||||
|
content: ['./index.html', './src/**/*.{vue,ts,tsx}'],
|
||||||
|
important: true,
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "esnext",
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strictFunctionTypes": false,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"baseUrl": ".",
|
||||||
|
"allowJs": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"esnext"
|
||||||
|
],
|
||||||
|
"types": [
|
||||||
|
"vite/client"
|
||||||
|
],
|
||||||
|
"typeRoots": [
|
||||||
|
"./node_modules/@types/",
|
||||||
|
"./types"
|
||||||
|
],
|
||||||
|
"noImplicitAny": false,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
],
|
||||||
|
"/#/*": [
|
||||||
|
"types/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.d.ts",
|
||||||
|
"src/**/*.tsx",
|
||||||
|
"src/**/*.vue",
|
||||||
|
"types/**/*.d.ts",
|
||||||
|
"types/**/*.ts",
|
||||||
|
"build/**/*.ts",
|
||||||
|
"build/**/*.d.ts",
|
||||||
|
"mock/**/*.ts",
|
||||||
|
"components.d.ts",
|
||||||
|
"auto-imports.d.ts",
|
||||||
|
"vite.config.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"dist",
|
||||||
|
"**/*.js"
|
||||||
|
]
|
||||||
|
}
|
||||||
Vendored
+71
@@ -0,0 +1,71 @@
|
|||||||
|
export interface ProjectSettingState {
|
||||||
|
//导航模式
|
||||||
|
navMode: string;
|
||||||
|
//导航风格
|
||||||
|
navTheme: string;
|
||||||
|
//顶部设置
|
||||||
|
headerSetting: object;
|
||||||
|
//页脚
|
||||||
|
showFooter: boolean;
|
||||||
|
//菜单设置
|
||||||
|
menuSetting: object;
|
||||||
|
//多标签
|
||||||
|
multiTabsSetting: object;
|
||||||
|
//面包屑
|
||||||
|
crumbsSetting: object;
|
||||||
|
//权限模式
|
||||||
|
permissionMode: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IbodySetting {
|
||||||
|
fixed: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IheaderSetting {
|
||||||
|
bgColor: string;
|
||||||
|
fixed: boolean;
|
||||||
|
isReload: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ImenuSetting {
|
||||||
|
minMenuWidth: number;
|
||||||
|
menuWidth: number;
|
||||||
|
fixed: boolean;
|
||||||
|
mixMenu: boolean;
|
||||||
|
collapsed: boolean;
|
||||||
|
mobileWidth: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IcrumbsSetting {
|
||||||
|
show: boolean;
|
||||||
|
showIcon: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ImultiTabsSetting {
|
||||||
|
bgColor: string;
|
||||||
|
fixed: boolean;
|
||||||
|
show: boolean;
|
||||||
|
}
|
||||||
|
export interface GlobConfig {
|
||||||
|
title: string;
|
||||||
|
apiUrl: string;
|
||||||
|
shortName: string;
|
||||||
|
urlPrefix?: string;
|
||||||
|
uploadUrl?: string;
|
||||||
|
imgUrl?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GlobEnvConfig {
|
||||||
|
// 标题
|
||||||
|
VITE_GLOB_APP_TITLE: string;
|
||||||
|
// 接口地址
|
||||||
|
VITE_GLOB_API_URL: string;
|
||||||
|
// 接口前缀
|
||||||
|
VITE_GLOB_API_URL_PREFIX?: string;
|
||||||
|
// Project abbreviation
|
||||||
|
VITE_GLOB_APP_SHORT_NAME: string;
|
||||||
|
// 图片上传地址
|
||||||
|
VITE_GLOB_UPLOAD_URL?: string;
|
||||||
|
//图片前缀地址
|
||||||
|
VITE_GLOB_IMG_URL?: string;
|
||||||
|
}
|
||||||
Vendored
+100
@@ -0,0 +1,100 @@
|
|||||||
|
import type {
|
||||||
|
ComponentRenderProxy,
|
||||||
|
VNode,
|
||||||
|
VNodeChild,
|
||||||
|
ComponentPublicInstance,
|
||||||
|
FunctionalComponent,
|
||||||
|
PropType as VuePropType,
|
||||||
|
} from 'vue';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
const __APP_INFO__: {
|
||||||
|
pkg: {
|
||||||
|
name: string;
|
||||||
|
version: string;
|
||||||
|
dependencies: Recordable<string>;
|
||||||
|
devDependencies: Recordable<string>;
|
||||||
|
};
|
||||||
|
lastBuildTime: string;
|
||||||
|
};
|
||||||
|
// declare interface Window {
|
||||||
|
// // Global vue app instance
|
||||||
|
// __APP__: App<Element>;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// vue
|
||||||
|
declare type PropType<T> = VuePropType<T>;
|
||||||
|
declare type VueNode = VNodeChild | JSX.Element;
|
||||||
|
|
||||||
|
export type Writable<T> = {
|
||||||
|
-readonly [P in keyof T]: T[P];
|
||||||
|
};
|
||||||
|
|
||||||
|
declare type Nullable<T> = T | null;
|
||||||
|
declare type NonNullable<T> = T extends null | undefined ? never : T;
|
||||||
|
declare type Recordable<T = any> = Record<string, T>;
|
||||||
|
declare type ReadonlyRecordable<T = any> = {
|
||||||
|
readonly [key: string]: T;
|
||||||
|
};
|
||||||
|
declare type Indexable<T = any> = {
|
||||||
|
[key: string]: T;
|
||||||
|
};
|
||||||
|
declare type DeepPartial<T> = {
|
||||||
|
[P in keyof T]?: DeepPartial<T[P]>;
|
||||||
|
};
|
||||||
|
declare type TimeoutHandle = ReturnType<typeof setTimeout>;
|
||||||
|
declare type IntervalHandle = ReturnType<typeof setInterval>;
|
||||||
|
|
||||||
|
declare interface ChangeEvent extends Event {
|
||||||
|
target: HTMLInputElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare interface WheelEvent {
|
||||||
|
path?: EventTarget[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMetaEnv extends ViteEnv {
|
||||||
|
__: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare interface ViteEnv {
|
||||||
|
VITE_PORT: number;
|
||||||
|
VITE_PUBLIC_PATH: string;
|
||||||
|
VITE_GLOB_APP_TITLE: string;
|
||||||
|
VITE_GLOB_APP_SHORT_NAME: string;
|
||||||
|
VITE_DROP_CONSOLE: boolean;
|
||||||
|
VITE_GLOB_IMG_URL: string;
|
||||||
|
VITE_PROXY: [string, string][];
|
||||||
|
VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none';
|
||||||
|
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare function parseInt(s: string | number, radix?: number): number;
|
||||||
|
|
||||||
|
declare function parseFloat(string: string | number): number;
|
||||||
|
|
||||||
|
namespace JSX {
|
||||||
|
// tslint:disable no-empty-interface
|
||||||
|
type Element = VNode;
|
||||||
|
// tslint:disable no-empty-interface
|
||||||
|
type ElementClass = ComponentRenderProxy;
|
||||||
|
|
||||||
|
interface ElementAttributesProperty {
|
||||||
|
$props: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IntrinsicElements {
|
||||||
|
[elem: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IntrinsicAttributes {
|
||||||
|
[elem: string]: any;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'vue' {
|
||||||
|
export type JSXComponent<Props = any> =
|
||||||
|
| { new (): ComponentPublicInstance<Props> }
|
||||||
|
| FunctionalComponent<Props>;
|
||||||
|
}
|
||||||
Vendored
+28
@@ -0,0 +1,28 @@
|
|||||||
|
declare interface Fn<T = any, R = T> {
|
||||||
|
(...arg: T[]): R;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare interface PromiseFn<T = any, R = T> {
|
||||||
|
(...arg: T[]): Promise<R>;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare type RefType<T> = T | null;
|
||||||
|
|
||||||
|
declare type LabelValueOptions = {
|
||||||
|
label: string;
|
||||||
|
value: any;
|
||||||
|
disabled: boolean;
|
||||||
|
[key: string]: string | number | boolean;
|
||||||
|
}[];
|
||||||
|
|
||||||
|
declare type EmitType = (event: string, ...args: any[]) => void;
|
||||||
|
|
||||||
|
declare type TargetContext = '_self' | '_blank';
|
||||||
|
|
||||||
|
declare interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
|
||||||
|
$el: T;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare type ComponentRef<T extends HTMLElement = HTMLDivElement> = ComponentElRef<T> | null;
|
||||||
|
|
||||||
|
declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
|
||||||
Vendored
+10
@@ -0,0 +1,10 @@
|
|||||||
|
declare module '*.vue' {
|
||||||
|
import { DefineComponent } from 'vue';
|
||||||
|
const Component: DefineComponent<{}, {}, any>;
|
||||||
|
export default Component;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'virtual:*' {
|
||||||
|
const result: any;
|
||||||
|
export default result;
|
||||||
|
}
|
||||||
Vendored
+5
@@ -0,0 +1,5 @@
|
|||||||
|
import type { ComputedRef, Ref } from 'vue';
|
||||||
|
|
||||||
|
export type DynamicProps<T> = {
|
||||||
|
[P in keyof T]: Ref<T[P]> | T[P] | ComputedRef<T[P]>;
|
||||||
|
};
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
import type { UserConfig, ConfigEnv } from 'vite';
|
||||||
|
import { loadEnv } from 'vite';
|
||||||
|
import { resolve } from 'path';
|
||||||
|
import { wrapperEnv } from './build/utils';
|
||||||
|
import { createVitePlugins } from './build/vite/plugin';
|
||||||
|
import { OUTPUT_DIR } from './build/constant';
|
||||||
|
import { createProxy } from './build/vite/proxy';
|
||||||
|
import pkg from './package.json';
|
||||||
|
import { format } from 'date-fns';
|
||||||
|
const { dependencies, devDependencies, name, version } = pkg;
|
||||||
|
|
||||||
|
const __APP_INFO__ = {
|
||||||
|
pkg: { dependencies, devDependencies, name, version },
|
||||||
|
lastBuildTime: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
|
||||||
|
};
|
||||||
|
|
||||||
|
function pathResolve(dir: string) {
|
||||||
|
return resolve(process.cwd(), '.', dir);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ({ command, mode }: ConfigEnv): UserConfig => {
|
||||||
|
const root = process.cwd();
|
||||||
|
const env = loadEnv(mode, root);
|
||||||
|
const viteEnv = wrapperEnv(env);
|
||||||
|
const { VITE_PUBLIC_PATH, VITE_PORT, VITE_PROXY } = viteEnv;
|
||||||
|
const isBuild = command === 'build';
|
||||||
|
return {
|
||||||
|
base: VITE_PUBLIC_PATH,
|
||||||
|
esbuild: {},
|
||||||
|
resolve: {
|
||||||
|
alias: [
|
||||||
|
{
|
||||||
|
find: /\/#\//,
|
||||||
|
replacement: pathResolve('types') + '/',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
find: '@',
|
||||||
|
replacement: pathResolve('src') + '/',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
dedupe: ['vue'],
|
||||||
|
},
|
||||||
|
plugins: createVitePlugins(viteEnv, isBuild),
|
||||||
|
define: {
|
||||||
|
__APP_INFO__: JSON.stringify(__APP_INFO__),
|
||||||
|
__VUE_OPTIONS_API__: true,
|
||||||
|
__VUE_PROD_DEVTOOLS__: false,
|
||||||
|
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true,
|
||||||
|
},
|
||||||
|
css: {
|
||||||
|
preprocessorOptions: {
|
||||||
|
less: {
|
||||||
|
modifyVars: {},
|
||||||
|
javascriptEnabled: true,
|
||||||
|
additionalData: `@import "src/styles/var.less";`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
host: true,
|
||||||
|
port: VITE_PORT,
|
||||||
|
proxy: createProxy(VITE_PROXY),
|
||||||
|
// proxy: {
|
||||||
|
// '/api': {
|
||||||
|
// target: '',
|
||||||
|
// changeOrigin: true,
|
||||||
|
// rewrite: (path) => path.replace(/^\/api/, '/api/v1')
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
optimizeDeps: {
|
||||||
|
include: [],
|
||||||
|
exclude: ['vue-demi'],
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
target: 'es2015',
|
||||||
|
cssTarget: 'chrome80',
|
||||||
|
outDir: OUTPUT_DIR,
|
||||||
|
reportCompressedSize: false,
|
||||||
|
chunkSizeWarningLimit: 3000,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user