feat: add web application
This commit is contained in:
richjohnrambo
@@ -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 = '';
|
||||
}
|
||||
Reference in New Issue
Block a user