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