gxwebsoft/mp-10584
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor(system): 重构系统设置组件以支持按键更新

Browse Source 
- 将 updateSetting 替换为 updateSettingByKey 方法调用
- 为所有设置组件添加默认的 settingId 和 settingKey 初始值
- 在表单提交前确保 settingKey 正确赋值
- 优化 watch 数据监听逻辑以支持按键匹配
- 重构数据处理流程以支持数组和对象格式的数据
- 统一错误处理和边界条件检查
- 修复表单重置和初始化逻辑
- 标准化各组件中的 settingKey 默认值设定
This commit is contained in:
赵忠林
2026-02-27 18:37:37 +08:00
parent 061f1cbe48
commit d1b7943e5d
14 changed files with 776 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/views/system/setting/components/basic.vue
View File

@@ -132,7 +132,7 @@
import { storeToRefs } from 'pinia';
import { FormInstance } from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
import { addSetting, listSetting, updateSetting } from "@/api/system/setting";
import { addSetting, listSetting, updateSettingByKey } from "@/api/system/setting";
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
import { uploadFile } from "@/api/system/file";
import { FILE_SERVER } from "@/config/setting";
@@ -149,7 +149,7 @@
// 保存字段信息(设定好key和描述,content里的字段是随意加的会自动转为json保存到数据库)
const settingId = ref(null);
const settingKey = ref('');
const settingKey = ref('basic');
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
@@ -167,6 +167,8 @@
const formRef = ref<FormInstance | null>(null);
// 表单数据
const { form, resetFields, assignFields } = useFormData<Setting>({
settingId: undefined,
settingKey: settingKey.value,
siteName: '',
icp: '',
copyright: '',
@@ -266,11 +268,12 @@
.validate()
.then(() => {
loading.value = true;
form.settingKey = settingKey.value;
const appForm = {
...form,
content: JSON.stringify(form),
};
const saveOrUpdate = isUpdate.value ? updateSetting : addSetting;
const saveOrUpdate = isUpdate.value ? updateSettingByKey : addSetting;
saveOrUpdate(appForm)
.then((msg) => {
message.success('保存成功');
@@ -285,32 +288,64 @@
watch(
() => props.data,
(data) => {
if(data?.settingId){
isUpdate.value = true
// 表单赋值
if(data.content){
const jsonData = JSON.parse(data.content);
assignFields(jsonData);
// 头像赋值
logo.value = [];
if (jsonData.logo) {
logo.value.push({ uid:1, url: jsonData.logo, status: '' });
}
if(jsonData.keyword){
keyword.value = JSON.parse(jsonData.keyword)
}
}
// 其他必要参数
form.settingId = data.settingId
form.settingKey = data.settingKey
} else {
// 新增
isUpdate.value = false
const activeMatch = props.value === settingKey.value;
if (!data || typeof data !== 'object') {
if (!activeMatch) return;
isUpdate.value = false;
resetFields();
form.settingKey = props.value
logo.value = [];
keyword.value = [];
form.settingId = undefined;
form.settingKey = settingKey.value;
return;
}
const normalized: any = Array.isArray(data)
? data.find((d) => d?.settingKey === settingKey.value) ?? data[0]
: (data as any).data && typeof (data as any).data === 'object'
? (data as any).data
: data;
let parsedContent: any | undefined;
const rawContent = (normalized as any).content;
if (rawContent) {
if (typeof rawContent === 'string') {
try {
parsedContent = JSON.parse(rawContent);
} catch {
parsedContent = undefined;
}
} else if (typeof rawContent === 'object') {
parsedContent = rawContent;
}
}
const contentOrRow = parsedContent ?? normalized;
const incomingKey = (contentOrRow as any).settingKey ?? (normalized as any).settingKey;
if (!activeMatch && incomingKey !== settingKey.value) return;
isUpdate.value = true;
assignFields(contentOrRow);
// 头像/关键词回显（兼容 content 与平铺字段两种返回）
logo.value = [];
const logoPath = (contentOrRow as any).logo;
if (logoPath) {
logo.value.push({ uid: 1, url: logoPath, status: '' });
}
const rawKeyword = (contentOrRow as any).keyword;
if (rawKeyword) {
try {
keyword.value = typeof rawKeyword === 'string' ? JSON.parse(rawKeyword) : rawKeyword;
} catch {
keyword.value = [];
}
}
form.settingId = (normalized as any).settingId;
form.settingKey = settingKey.value;
},
{ immediate: true }
);
</script>

54
src/views/system/setting/components/clear.vue
View File

@@ -50,7 +50,7 @@ const props = defineProps<{
// 保存字段信息(设定好key和描述,content里的字段是随意加的会自动转为json保存到数据库)
const settingId = ref(undefined);
const settingKey = ref('setting');
const settingKey = ref('clear');
const comments = ref('系统设置');
// 是否开启响应式布局
const themeStore = useThemeStore();
@@ -64,6 +64,8 @@ const isUpdate = ref(false);
const formRef = ref<FormInstance | null>(null);
// 表单数据
const { form, resetFields, assignFields } = useFormData<Setting>({
settingId: undefined,
settingKey: settingKey.value,
clearCache: 'setting,dict,category,temp',
tenantId: localStorage.getItem('TenantId')
});
@@ -116,22 +118,44 @@ const save = () => {
watch(
() => props.data,
(data) => {
if(data?.settingId){
isUpdate.value = true
// 表单赋值
if(data.content){
const jsonData = JSON.parse(data.content);
assignFields(jsonData);
}
// 其他必要参数
form.settingId = data.settingId
form.settingKey = data.settingKey
} else {
// 新增
isUpdate.value = false
const activeMatch = props.value === settingKey.value;
if (!data || typeof data !== 'object') {
if (!activeMatch) return;
isUpdate.value = false;
resetFields();
form.settingKey = props.value
form.settingId = undefined;
form.settingKey = settingKey.value;
return;
}
const normalized: any = Array.isArray(data)
? data.find((d) => d?.settingKey === settingKey.value) ?? data[0]
: (data as any).data && typeof (data as any).data === 'object'
? (data as any).data
: data;
let parsedContent: any | undefined;
const rawContent = (normalized as any).content;
if (rawContent) {
if (typeof rawContent === 'string') {
try {
parsedContent = JSON.parse(rawContent);
} catch {
parsedContent = undefined;
}
} else if (typeof rawContent === 'object') {
parsedContent = rawContent;
}
}
const contentOrRow = parsedContent ?? normalized;
const incomingKey = (contentOrRow as any).settingKey ?? (normalized as any).settingKey;
if (!activeMatch && incomingKey !== settingKey.value) return;
isUpdate.value = true;
assignFields(contentOrRow);
form.settingId = (normalized as any).settingId;
form.settingKey = settingKey.value;
},
{ immediate: true }
);
</script>

84
src/views/system/setting/components/developer.vue
View File

@@ -25,7 +25,7 @@
import { storeToRefs } from 'pinia';
import { FormInstance } from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
import { addSetting, listSetting, updateSetting } from "@/api/system/setting";
import { addSetting, listSetting, updateSettingByKey } from "@/api/system/setting";
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
import { uploadFile } from "@/api/system/file";
import { FILE_SERVER } from "@/config/setting";
@@ -61,6 +61,8 @@
const formRef = ref<FormInstance | null>(null);
// 表单数据
const { form, resetFields, assignFields } = useFormData<Setting>({
settingId: undefined,
settingKey: settingKey.value,
siteName: '',
icp: '',
copyright: '',
@@ -152,11 +154,12 @@
.validate()
.then(() => {
loading.value = true;
form.settingKey = settingKey.value;
const appForm = {
...form,
content: JSON.stringify(form),
};
const saveOrUpdate = isUpdate.value ? updateSetting : addSetting;
const saveOrUpdate = isUpdate.value ? updateSettingByKey : addSetting;
saveOrUpdate(appForm)
.then((msg) => {
message.success('保存成功');
@@ -171,32 +174,63 @@
watch(
() => props.data,
(data) => {
if(data?.settingId){
isUpdate.value = true
// 表单赋值
if(data.content){
const jsonData = JSON.parse(data.content);
assignFields(jsonData);
// 头像赋值
logo.value = [];
if (jsonData.logo) {
logo.value.push({ uid:1, url: FILE_SERVER + jsonData.logo, status: '' });
}
if(jsonData.keyword){
keyword.value = JSON.parse(jsonData.keyword)
}
}
// 其他必要参数
form.settingId = data.settingId
form.settingKey = data.settingKey
} else {
// 新增
isUpdate.value = false
const activeMatch = props.value === settingKey.value;
if (!data || typeof data !== 'object') {
if (!activeMatch) return;
isUpdate.value = false;
resetFields();
form.settingKey = props.value
logo.value = [];
keyword.value = [];
form.settingId = undefined;
form.settingKey = settingKey.value;
return;
}
const normalized: any = Array.isArray(data)
? data.find((d) => d?.settingKey === settingKey.value) ?? data[0]
: (data as any).data && typeof (data as any).data === 'object'
? (data as any).data
: data;
let parsedContent: any | undefined;
const rawContent = (normalized as any).content;
if (rawContent) {
if (typeof rawContent === 'string') {
try {
parsedContent = JSON.parse(rawContent);
} catch {
parsedContent = undefined;
}
} else if (typeof rawContent === 'object') {
parsedContent = rawContent;
}
}
const contentOrRow = parsedContent ?? normalized;
const incomingKey = (contentOrRow as any).settingKey ?? (normalized as any).settingKey;
if (!activeMatch && incomingKey !== settingKey.value) return;
isUpdate.value = true;
assignFields(contentOrRow);
// 头像/关键词回显（兼容 content 与平铺字段两种返回）
logo.value = [];
const logoPath = (contentOrRow as any).logo;
if (logoPath) {
logo.value.push({ uid: 1, url: FILE_SERVER + logoPath, status: '' });
}
const rawKeyword = (contentOrRow as any).keyword;
if (rawKeyword) {
try {
keyword.value = typeof rawKeyword === 'string' ? JSON.parse(rawKeyword) : rawKeyword;
} catch {
keyword.value = [];
}
}
form.settingId = (normalized as any).settingId;
form.settingKey = settingKey.value;
},
{ immediate: true }
);
</script>

57
src/views/system/setting/components/mp-weixin.vue
View File

@@ -86,7 +86,7 @@ import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { FormInstance } from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
import { addSetting, updateSetting } from "@/api/system/setting";
import { addSetting, updateSettingByKey } from "@/api/system/setting";
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
import { uploadFile } from "@/api/system/file";
import { FILE_SERVER } from "@/config/setting";
@@ -116,6 +116,8 @@ const isUpdate = ref(false);
const formRef = ref<FormInstance | null>(null);
// 表单数据
const { form, resetFields, assignFields } = useFormData<Setting>({
settingId: undefined,
settingKey: settingKey.value,
appId: '',
appSecret: '',
tenantId: localStorage.getItem('TenantId')
@@ -169,11 +171,12 @@ const save = () => {
.validate()
.then(() => {
loading.value = true;
form.settingKey = settingKey.value;
const appForm = {
...form,
content: JSON.stringify(form)
};
const saveOrUpdate = isUpdate.value ? updateSetting : addSetting;
const saveOrUpdate = isUpdate.value ? updateSettingByKey : addSetting;
saveOrUpdate(appForm)
.then((msg) => {
message.success('保存成功');
@@ -189,23 +192,45 @@ const save = () => {
watch(
() => props.data,
(data) => {
if(data?.settingId){
isUpdate.value = true
// 表单赋值
if(data.content){
const jsonData = JSON.parse(data.content);
assignFields(jsonData);
}
// 其他必要参数
form.settingId = data.settingId
form.settingKey = data.settingKey
} else {
// 新增
isUpdate.value = false
const activeMatch = props.value === settingKey.value;
if (!data || typeof data !== 'object') {
if (!activeMatch) return;
isUpdate.value = false;
resetFields();
form.settingKey = props.value
form.settingId = undefined;
form.settingKey = settingKey.value;
return;
}
const normalized: any = Array.isArray(data)
? data.find((d) => d?.settingKey === settingKey.value) ?? data[0]
: (data as any).data && typeof (data as any).data === 'object'
? (data as any).data
: data;
let parsedContent: any | undefined;
const rawContent = (normalized as any).content;
if (rawContent) {
if (typeof rawContent === 'string') {
try {
parsedContent = JSON.parse(rawContent);
} catch {
parsedContent = undefined;
}
} else if (typeof rawContent === 'object') {
parsedContent = rawContent;
}
}
const contentOrRow = parsedContent ?? normalized;
const incomingKey = (contentOrRow as any).settingKey ?? (normalized as any).settingKey;
if (!activeMatch && incomingKey !== settingKey.value) return;
isUpdate.value = true;
assignFields(contentOrRow);
form.settingId = (normalized as any).settingId;
form.settingKey = settingKey.value;
},
{ immediate: true }
);
</script>

57
src/views/system/setting/components/payment.vue
View File

@@ -257,7 +257,7 @@ import { storeToRefs } from "pinia";
import { UploadOutlined } from '@ant-design/icons-vue';
import { FormInstance } from "ant-design-vue/es/form";
import useFormData from "@/utils/use-form-data";
import { addSetting, updateSetting } from "@/api/system/setting";
import { addSetting, updateSettingByKey } from "@/api/system/setting";
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
import { uploadFile } from "@/api/system/file";
import Upload from "@/components/UploadCert/index.vue";
@@ -287,6 +287,8 @@ const token = localStorage.getItem(TOKEN_STORE_NAME);
const formRef = ref<FormInstance | null>(null);
// 表单数据
const { form, resetFields, assignFields } = useFormData<Setting>({
settingId: undefined,
settingKey: settingKey.value,
payMethod: 10,
signMode: "公钥证书",
appId: "",
@@ -477,11 +479,12 @@ const save = () => {
.validate()
.then(() => {
loading.value = true;
form.settingKey = settingKey.value;
const appForm = {
...form,
content: JSON.stringify(form)
};
const saveOrUpdate = isUpdate.value ? updateSetting : addSetting;
const saveOrUpdate = isUpdate.value ? updateSettingByKey : addSetting;
saveOrUpdate(appForm)
.then((msg) => {
message.success("保存成功");
@@ -498,23 +501,47 @@ const save = () => {
watch(
() => props.data,
(data) => {
if (data?.settingId) {
isUpdate.value = true;
// 表单赋值
if (data.content) {
const jsonData = JSON.parse(data.content);
assignFields(jsonData);
}
// 其他必要参数
form.settingId = data.settingId;
form.settingKey = data.settingKey;
} else {
// 新增
const activeMatch = props.value === settingKey.value;
if (!data || typeof data !== "object") {
if (!activeMatch) return;
isUpdate.value = false;
resetFields();
form.settingKey = props.value;
form.settingId = undefined;
form.settingKey = settingKey.value;
return;
}
const normalized: any = Array.isArray(data)
? data.find((d) => d?.settingKey === settingKey.value) ?? data[0]
: (data as any).data && typeof (data as any).data === "object"
? (data as any).data
: data;
let parsedContent: any | undefined;
const rawContent = (normalized as any).content;
if (rawContent) {
if (typeof rawContent === "string") {
try {
parsedContent = JSON.parse(rawContent);
} catch {
parsedContent = undefined;
}
} else if (typeof rawContent === "object") {
parsedContent = rawContent;
}
}
const contentOrRow = parsedContent ?? normalized;
const incomingKey =
(contentOrRow as any).settingKey ?? (normalized as any).settingKey;
if (!activeMatch && incomingKey !== settingKey.value) return;
isUpdate.value = true;
assignFields(contentOrRow);
form.settingId = (normalized as any).settingId;
form.settingKey = settingKey.value;
},
{ immediate: true }
);
</script>

57
src/views/system/setting/components/printer.vue
View File

@@ -88,7 +88,7 @@ import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { FormInstance } from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
import { addSetting, updateSetting } from "@/api/system/setting";
import { addSetting, updateSettingByKey } from "@/api/system/setting";
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
import { uploadFile } from "@/api/system/file";
import { FILE_SERVER } from "@/config/setting";
@@ -117,6 +117,8 @@ const isUpdate = ref(false);
const formRef = ref<FormInstance | null>(null);
// 表单数据
const { form, resetFields, assignFields } = useFormData<Setting>({
settingId: undefined,
settingKey: settingKey.value,
isOpenPrinter: '0',
printerType: '1',
printerStatus: '20',
@@ -174,11 +176,12 @@ const save = () => {
.validate()
.then(() => {
loading.value = true;
form.settingKey = settingKey.value;
const appForm = {
...form,
content: JSON.stringify(form)
};
const saveOrUpdate = isUpdate.value ? updateSetting : addSetting;
const saveOrUpdate = isUpdate.value ? updateSettingByKey : addSetting;
saveOrUpdate(appForm)
.then((msg) => {
message.success('保存成功');
@@ -193,22 +196,44 @@ const save = () => {
watch(
() => props.data,
(data) => {
if(data?.settingId){
isUpdate.value = true
// 表单赋值
if(data.content){
const jsonData = JSON.parse(data.content);
assignFields(jsonData);
}
// 其他必要参数
form.settingId = data.settingId
form.settingKey = data.settingKey
} else {
// 新增
isUpdate.value = false
const activeMatch = props.value === settingKey.value;
if (!data || typeof data !== 'object') {
if (!activeMatch) return;
isUpdate.value = false;
resetFields();
form.settingKey = props.value
form.settingId = undefined;
form.settingKey = settingKey.value;
return;
}
const normalized: any = Array.isArray(data)
? data.find((d) => d?.settingKey === settingKey.value) ?? data[0]
: (data as any).data && typeof (data as any).data === 'object'
? (data as any).data
: data;
let parsedContent: any | undefined;
const rawContent = (normalized as any).content;
if (rawContent) {
if (typeof rawContent === 'string') {
try {
parsedContent = JSON.parse(rawContent);
} catch {
parsedContent = undefined;
}
} else if (typeof rawContent === 'object') {
parsedContent = rawContent;
}
}
const contentOrRow = parsedContent ?? normalized;
const incomingKey = (contentOrRow as any).settingKey ?? (normalized as any).settingKey;
if (!activeMatch && incomingKey !== settingKey.value) return;
isUpdate.value = true;
assignFields(contentOrRow);
form.settingId = (normalized as any).settingId;
form.settingKey = settingKey.value;
},
{ immediate: true }
);
</script>

45
src/views/system/setting/components/privacy.vue
View File

@@ -114,16 +114,47 @@
watch(
() => props.data,
(data) => {
console.log(data, 'propss');
if (data?.settingKey) {
isUpdate.value = true;
// 表单赋值
assignFields(data);
} else {
// 新增
const settingKey = 'privacy';
const activeMatch = props.value === settingKey;
if (!data || typeof data !== 'object') {
if (!activeMatch) return;
isUpdate.value = false;
resetFields();
form.settingId = undefined;
form.settingKey = settingKey;
return;
}
const normalized: any = Array.isArray(data)
? data.find((d) => d?.settingKey === settingKey) ?? data[0]
: (data as any).data && typeof (data as any).data === 'object'
? (data as any).data
: data;
let parsedContent: any | undefined;
const rawContent = (normalized as any).content;
if (rawContent) {
if (typeof rawContent === 'string') {
try {
parsedContent = JSON.parse(rawContent);
} catch {
parsedContent = undefined;
}
} else if (typeof rawContent === 'object') {
parsedContent = rawContent;
}
}
const contentOrRow = parsedContent ?? normalized;
const incomingKey =
(contentOrRow as any).settingKey ?? (normalized as any).settingKey;
if (!activeMatch && incomingKey !== settingKey) return;
isUpdate.value = true;
assignFields(contentOrRow);
form.settingId = (normalized as any).settingId;
form.settingKey = settingKey;
},
{ immediate: true }
);
</script>

59
src/views/system/setting/components/register.vue
View File

@@ -78,7 +78,7 @@ import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { FormInstance } from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
import { addSetting, updateSetting } from "@/api/system/setting";
import { addSetting, updateSettingByKey } from "@/api/system/setting";
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
import { uploadFile } from "@/api/system/file";
import RoleSelect from './role-select.vue';
@@ -108,7 +108,8 @@ const isUpdate = ref(false);
const formRef = ref<FormInstance | null>(null);
// 表单数据
const { form, resetFields, assignFields } = useFormData<Setting>({
settingKey: '',
settingId: undefined,
settingKey: settingKey.value,
type: 1,
roleId: undefined,
openWxAuth: 1,
@@ -196,11 +197,12 @@ const save = () => {
.validate()
.then(() => {
loading.value = true;
form.settingKey = settingKey.value;
const appForm = {
...form,
content: JSON.stringify(form)
};
const saveOrUpdate = isUpdate.value ? updateSetting : addSetting;
const saveOrUpdate = isUpdate.value ? updateSettingByKey : addSetting;
saveOrUpdate(appForm)
.then((msg) => {
message.success('保存成功');
@@ -215,22 +217,45 @@ const save = () => {
watch(
() => props.data,
(data) => {
if(data?.settingId){
isUpdate.value = true
// 表单赋值
if(data.content){
const jsonData = JSON.parse(data.content);
assignFields(jsonData);
}
// 其他必要参数
form.settingId = data.settingId
form.settingKey = data.settingKey
} else {
// 新增
isUpdate.value = false
const activeMatch = props.value === settingKey.value;
if (!data || typeof data !== 'object') {
if (!activeMatch) return;
isUpdate.value = false;
resetFields();
form.settingKey = settingKey.value
form.settingId = undefined;
form.settingKey = settingKey.value;
return;
}
const normalized: any = Array.isArray(data)
? data.find((d) => d?.settingKey === settingKey.value) ?? data[0]
: (data as any).data && typeof (data as any).data === 'object'
? (data as any).data
: data;
let parsedContent: any | undefined;
const rawContent = (normalized as any).content;
if (rawContent) {
if (typeof rawContent === 'string') {
try {
parsedContent = JSON.parse(rawContent);
} catch {
parsedContent = undefined;
}
} else if (typeof rawContent === 'object') {
parsedContent = rawContent;
}
}
const contentOrRow = parsedContent ?? normalized;
const incomingKey = (contentOrRow as any).settingKey ?? (normalized as any).settingKey;
if (!activeMatch && incomingKey !== settingKey.value) return;
isUpdate.value = true;
assignFields(contentOrRow);
form.settingId = (normalized as any).settingId;
form.settingKey = settingKey.value;
},
{ immediate: true }
);
</script>

62
src/views/system/setting/components/sms.vue
View File

@@ -109,7 +109,7 @@ import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { FormInstance } from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
import { addSetting, listSetting, updateSetting } from "@/api/system/setting";
import { addSetting, listSetting, updateSettingByKey } from "@/api/system/setting";
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
import { uploadFile } from "@/api/system/file";
import { FILE_SERVER } from "@/config/setting";
@@ -127,7 +127,7 @@ const emit = defineEmits<{
// 保存字段信息(设定好key和描述,content里的字段是随意加的会自动转为json保存到数据库)
const settingId = ref<number>();
const settingKey = ref('');
const settingKey = ref('sms');
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
@@ -141,7 +141,8 @@ const isUpdate = ref(false);
const formRef = ref<FormInstance | null>(null);
// 表单数据
const { form, resetFields, assignFields } = useFormData<Setting>({
settingKey: '',
settingId: undefined,
settingKey: settingKey.value,
type: 1,
accessKeyId: '',
accessKeySecret: '',
@@ -206,11 +207,14 @@ const save = () => {
.validate()
.then(() => {
loading.value = true;
// Keep key stable; parent `props.value` is the active tab key and may change.
form.settingKey = settingKey.value;
const appForm = {
...form,
content: JSON.stringify(form)
};
const saveOrUpdate = isUpdate.value ? updateSetting : addSetting;
// `getByKey` may not include `settingId`; update by key is safer here.
const saveOrUpdate = isUpdate.value ? updateSettingByKey : addSetting;
saveOrUpdate(appForm)
.then((msg) => {
message.success('保存成功');
@@ -225,22 +229,44 @@ const save = () => {
watch(
() => props.data,
(data) => {
if(data?.settingId){
isUpdate.value = true
// 表单赋值
if(data.content){
const jsonData = JSON.parse(data.content);
assignFields(jsonData);
}
// 其他必要参数
form.settingId = data.settingId
form.settingKey = data.settingKey
} else {
// 新增
isUpdate.value = false
const activeMatch = props.value === settingKey.value;
if (!data || typeof data !== 'object') {
if (!activeMatch) return;
isUpdate.value = false;
resetFields();
form.settingKey = props.value
form.settingId = undefined;
form.settingKey = settingKey.value;
return;
}
const normalized: any = Array.isArray(data)
? data.find((d) => d?.settingKey === settingKey.value) ?? data[0]
: (data as any).data && typeof (data as any).data === 'object'
? (data as any).data
: data;
let parsedContent: any | undefined;
const rawContent = (normalized as any).content;
if (rawContent) {
if (typeof rawContent === 'string') {
try {
parsedContent = JSON.parse(rawContent);
} catch {
parsedContent = undefined;
}
} else if (typeof rawContent === 'object') {
parsedContent = rawContent;
}
}
const contentOrRow = parsedContent ?? normalized;
const incomingKey = (contentOrRow as any).settingKey ?? (normalized as any).settingKey;
if (!activeMatch && incomingKey !== settingKey.value) return;
isUpdate.value = true;
assignFields(contentOrRow);
form.settingId = (normalized as any).settingId;
form.settingKey = settingKey.value;
},
{ immediate: true }
);
</script>

250
src/views/system/setting/components/upload.vue
View File

@@ -16,46 +16,25 @@
</a-radio-group>
</a-form-item>
<template v-if="form.uploadMethod !== 'file'">
<a-form-item
label="存储空间名称"
name="bucketName"
>
<a-input
v-model:value="form.bucketName"
placeholder="存储空间名称"
/>
<a-form-item label="存储空间名称" name="bucketName">
<a-input v-model:value="form.bucketName" placeholder="存储空间名称" />
</a-form-item>
<a-form-item
label="Region域名"
name="endpoint"
>
<a-form-item label="Region域名" name="bucketEndpoint">
<a-input
v-model:value="form.bucketEndpoint"
placeholder="https://oss-cn-shenzhen.aliyuncs.com"
/>
</a-form-item>
<a-form-item
label="accessKeyId"
name="accessKeyId"
>
<a-input
v-model:value="form.accessKeyId"
placeholder="accessKeyId"
/>
<a-form-item label="accessKeyId" name="accessKeyId">
<a-input v-model:value="form.accessKeyId" placeholder="accessKeyId" />
</a-form-item>
<a-form-item
label="accessKeySecret"
name="accessKeySecret"
>
<a-input
<a-form-item label="accessKeySecret" name="accessKeySecret">
<a-input-password
v-model:value="form.accessKeySecret"
placeholder="accessKeySecret"
/>
</a-form-item>
<a-form-item
label="空间域名"
name="bucketDomain"
>
<a-form-item label="空间域名" name="bucketDomain">
<a-input
v-model:value="form.bucketDomain"
placeholder="https://oss-gxwebsoft.oss-cn-shenzhen.aliyuncs.com"
@@ -64,10 +43,7 @@
</template>
<!-- 私有云 -->
<template v-if="form.uploadMethod === 'file'">
<a-form-item
label="域名"
name="fileUrl"
>
<a-form-item label="域名" name="fileUrl">
<a-input-group compact>
<a-input
v-model:value="form.fileUrl"
@@ -85,33 +61,37 @@
<!-- 阿里云 -->
<template v-if="form.uploadMethod === 'oss'">
<a-form-item label="去申请">
<a href="https://oss.console.aliyun.com" target="_blank">https://oss.console.aliyun.com</a>
<a href="https://oss.console.aliyun.com" target="_blank"
>https://oss.console.aliyun.com</a
>
</a-form-item>
</template>
<!-- 腾讯云 -->
<template v-if="form.uploadMethod === 'cos'">
<a-form-item label="去申请">
<a href="https://cloud.tencent.com/product/cos" target="_blank">https://cloud.tencent.com/product/cos</a>
<a href="https://cloud.tencent.com/product/cos" target="_blank"
>https://cloud.tencent.com/product/cos</a
>
</a-form-item>
</template>
<!-- 七牛云 -->
<template v-if="form.uploadMethod === 'kodo'">
<a-form-item label="去申请">
<a href="https://www.qiniu.com/products/kodo" target="_blank">https://www.qiniu.com/products/kodo</a>
<a href="https://www.qiniu.com/products/kodo" target="_blank"
>https://www.qiniu.com/products/kodo</a
>
</a-form-item>
</template>
<a-form-item label="使用临时存储" v-if="form.uploadMethod === 'oss'">
<div style="margin-top: 6px">
<a class="" @click="onDemoOss">立即填入</a>
<div class="ele-text-secondary">仅供体验及测试使用，空间大小和有流量有一定限制不推荐使用，正式使用请单独申请独立的云存储</div>
<div class="ele-text-secondary"
>仅供体验及测试使用，空间大小和有流量有一定限制不推荐使用，正式使用请单独申请独立的云存储</div
>
</div>
</a-form-item>
<a-form-item label="操作">
<a-button
type="primary"
class="ele-btn-icon"
@click="save"
>
<a-button type="primary" class="ele-btn-icon" @click="save">
<span>保存</span>
</a-button>
</a-form-item>
@@ -120,21 +100,16 @@
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import { copyText } from "@/utils/common";
import { message } from "ant-design-vue";
import { reactive, ref, watch } from 'vue';
import { copyText } from '@/utils/common';
import { message } from 'ant-design-vue';
import { CopyOutlined } from '@ant-design/icons-vue';
import { Setting } from "@/api/system/setting/model";
import { useThemeStore } from "@/store/modules/theme";
import { storeToRefs } from "pinia";
import { UploadOutlined } from '@ant-design/icons-vue';
import { FormInstance } from "ant-design-vue/es/form";
import useFormData from "@/utils/use-form-data";
import { addSetting, updateSetting } from "@/api/system/setting";
import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
import { uploadFile } from "@/api/system/file";
import Upload from "@/components/UploadCert/index.vue";
import { FILE_SERVER, TOKEN_STORE_NAME } from "@/config/setting";
import { Setting } from '@/api/system/setting/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { FormInstance } from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
import { addSetting, updateSettingByKey } from '@/api/system/setting';
const props = defineProps<{
value?: string;
@@ -143,23 +118,18 @@ const props = defineProps<{
}>();
// 保存字段信息(设定好key和描述,content里的字段是随意加的会自动转为json保存到数据库)
const settingId = ref(undefined);
const settingKey = ref("upload");
const settingKey = ref('upload');
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
// 编辑器内容，双向绑定
const logo = ref<any>([]);
// 提交状态
const loading = ref(false);
// 是否是修改
const isUpdate = ref(false);
// token
const token = localStorage.getItem(TOKEN_STORE_NAME);
//
const formRef = ref<FormInstance | null>(null);
// 表单数据
const { form, resetFields, assignFields } = useFormData<Setting>({
settingId: undefined,
settingKey: settingKey.value,
uploadMethod: 'oss',
fileUrl: 'https://file.wsdns.cn',
bucketName: '',
@@ -175,41 +145,41 @@ const rules = reactive({
uploadMethod: [
{
required: true,
type: "string",
message: "请设置上传方式",
trigger: "blur"
type: 'string',
message: '请设置上传方式',
trigger: 'blur'
}
],
bucketName: [
{
required: true,
type: "string",
message: "请填写存储空间名称",
trigger: "blur"
type: 'string',
message: '请填写存储空间名称',
trigger: 'blur'
}
],
accessKeyId: [
{
required: true,
type: "string",
message: "请填写accessKeyId",
trigger: "blur"
type: 'string',
message: '请填写accessKeyId',
trigger: 'blur'
}
],
accessKeySecret: [
{
required: true,
type: "string",
message: "请填写accessKeySecret",
trigger: "blur"
type: 'string',
message: '请填写accessKeySecret',
trigger: 'blur'
}
],
bucketDomain: [
{
required: true,
type: "string",
message: "请填写存储空间域名",
trigger: "blur"
type: 'string',
message: '请填写存储空间域名',
trigger: 'blur'
}
]
});
@@ -218,40 +188,18 @@ const onCopyText = (text) => {
copyText(text);
};
const onMethod = (e) => {
const onMethod = (_e) => {
resetFields();
}
const onDemoOss = () => {
form.uploadMethod == 'oss'
form.bucketName = 'oss-gxwebsoft'
form.bucketEndpoint = 'https://oss-cn-shenzhen.aliyuncs.com'
form.accessKeyId = 'LTAI4GKGZ9Z2Z8JZ77c3GNZP'
form.accessKeySecret = 'BiDkpS7UXj72HWwDWaFZxiXjNFBNCM'
form.bucketDomain = 'https://oss.wsdns.cn'
form.settingKey = 'upload';
}
const onApiclientKey = (e) => {
const response = e.file.response
const parse = JSON.parse(response);
console.log(parse);
form.apiclientKey = e.file.response
}
const onUpload = (d: ItemType) => {
uploadFile(<File>d.file)
.then((result) => {
form.logo = result.path;
message.success("上传成功");
})
.catch((e) => {
message.error(e.message);
});
};
const onClose = () => {
form.logo = undefined;
const onDemoOss = () => {
form.uploadMethod = 'oss';
form.bucketName = 'oss-gxwebsoft';
form.bucketEndpoint = 'https://oss-cn-shenzhen.aliyuncs.com';
form.accessKeyId = 'LTAI4GKGZ9Z2Z8JZ77c3GNZP';
form.accessKeySecret = 'BiDkpS7UXj72HWwDWaFZxiXjNFBNCM';
form.bucketDomain = 'https://oss.wsdns.cn';
form.settingKey = settingKey.value;
};
/* 保存编辑 */
@@ -263,45 +211,87 @@ const save = () => {
formRef.value
.validate()
.then(() => {
loading.value = true;
// Make sure key is stable even if the parent passes a changing `value` prop.
form.settingKey = settingKey.value;
const appForm = {
...form,
content: JSON.stringify(form)
};
const saveOrUpdate = isUpdate.value ? updateSetting : addSetting;
// `getByKey` may not return `settingId`; update by key is safer here.
const saveOrUpdate = isUpdate.value ? updateSettingByKey : addSetting;
saveOrUpdate(appForm)
.then((msg) => {
message.success("保存成功");
.then((_msg) => {
message.success('保存成功');
})
.catch((e) => {
message.error(e.message);
});
})
.catch(() => {
});
.catch(() => {});
};
watch(
() => props.data,
(data) => {
if (data?.settingId) {
isUpdate.value = true;
// 表单赋值
if (data.content) {
const jsonData = JSON.parse(data.content);
assignFields(jsonData);
}
// 其他必要参数
form.settingId = data.settingId;
form.settingKey = data.settingKey;
} else {
// 新增
// Parent shares one `data` ref across tabs; ignore unrelated keys to avoid polluting this form.
if (!data || typeof data !== 'object') {
isUpdate.value = false;
resetFields();
form.settingKey = props.value;
form.settingKey = settingKey.value;
form.settingId = undefined;
return;
}
// Be tolerant to endpoints returning arrays or nested payloads.
const normalized: any = Array.isArray(data)
? data.find((d) => d?.settingKey === settingKey.value) ?? data[0]
: (data as any).data && typeof (data as any).data === 'object'
? (data as any).data
: data;
// Some endpoints return the full Setting row (with `content`), others return merged fields directly.
let parsedContent: any | undefined;
const rawContent = (normalized as any).content;
if (rawContent) {
if (typeof rawContent === 'string') {
try {
parsedContent = JSON.parse(rawContent);
} catch {
parsedContent = undefined;
}
} else if (typeof rawContent === 'object') {
parsedContent = rawContent;
}
}
const contentOrRow = parsedContent ?? normalized;
const hasUploadFields =
'uploadMethod' in contentOrRow ||
'bucketName' in contentOrRow ||
'bucketEndpoint' in contentOrRow ||
'bucketDomain' in contentOrRow ||
'fileUrl' in contentOrRow;
const incomingKey =
(contentOrRow as any).settingKey ?? (normalized as any).settingKey;
const belongsToUpload =
incomingKey === settingKey.value || hasUploadFields;
if (!belongsToUpload) {
isUpdate.value = false;
resetFields();
form.settingKey = settingKey.value;
form.settingId = undefined;
return;
}
isUpdate.value = true;
assignFields(contentOrRow);
// Keep stable key; id is optional.
form.settingKey = settingKey.value;
form.settingId = (normalized as any).settingId;
},
{ immediate: true }
);
</script>

57
src/views/system/setting/components/website.vue
View File

@@ -34,7 +34,7 @@ import {useThemeStore} from '@/store/modules/theme';
import {storeToRefs} from 'pinia';
import {FormInstance} from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
import {addSetting, updateSetting} from "@/api/system/setting";
import {addSetting, updateSettingByKey} from "@/api/system/setting";
import {ItemType} from "ele-admin-pro/es/ele-image-upload/types";
import {uploadFile} from "@/api/system/file";
@@ -58,6 +58,7 @@ const isUpdate = ref(false);
const formRef = ref<FormInstance | null>(null);
// 表单数据
const {form, resetFields, assignFields} = useFormData<Setting>({
settingId: undefined,
settingKey: 'website',
type: 1,
roleId: undefined,
@@ -146,11 +147,12 @@ const save = () => {
.validate()
.then(() => {
loading.value = true;
form.settingKey = settingKey.value;
const appForm = {
...form,
content: JSON.stringify(form)
};
const saveOrUpdate = isUpdate.value ? updateSetting : addSetting;
const saveOrUpdate = isUpdate.value ? updateSettingByKey : addSetting;
saveOrUpdate(appForm)
.then((msg) => {
message.success('保存成功');
@@ -166,22 +168,45 @@ const save = () => {
watch(
() => props.data,
(data) => {
if (data?.settingId) {
isUpdate.value = true
// 表单赋值
if (data.content) {
const jsonData = JSON.parse(data.content);
assignFields(jsonData);
}
// 其他必要参数
form.settingId = data.settingId
form.settingKey = data.settingKey
} else {
// 新增
isUpdate.value = false
const activeMatch = props.value === settingKey.value;
if (!data || typeof data !== 'object') {
if (!activeMatch) return;
isUpdate.value = false;
resetFields();
form.settingKey = settingKey.value
form.settingId = undefined;
form.settingKey = settingKey.value;
return;
}
const normalized: any = Array.isArray(data)
? data.find((d) => d?.settingKey === settingKey.value) ?? data[0]
: (data as any).data && typeof (data as any).data === 'object'
? (data as any).data
: data;
let parsedContent: any | undefined;
const rawContent = (normalized as any).content;
if (rawContent) {
if (typeof rawContent === 'string') {
try {
parsedContent = JSON.parse(rawContent);
} catch {
parsedContent = undefined;
}
} else if (typeof rawContent === 'object') {
parsedContent = rawContent;
}
}
const contentOrRow = parsedContent ?? normalized;
const incomingKey = (contentOrRow as any).settingKey ?? (normalized as any).settingKey;
if (!activeMatch && incomingKey !== settingKey.value) return;
isUpdate.value = true;
assignFields(contentOrRow);
form.settingId = (normalized as any).settingId;
form.settingKey = settingKey.value;
},
{ immediate: true }
);
</script>

57
src/views/system/setting/components/wx-official.vue
View File

@@ -76,7 +76,7 @@
import { storeToRefs } from 'pinia';
import { FormInstance } from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
import { addSetting, updateSetting } from '@/api/system/setting';
import { addSetting, updateSettingByKey } from '@/api/system/setting';
import { copyText } from '@/utils/common';
import { CopyOutlined } from '@ant-design/icons-vue';
@@ -93,6 +93,7 @@
// 保存字段信息(设定好key和描述,content里的字段是随意加的会自动转为json保存到数据库)
// const settingId = ref(null);
// const settingKey = ref('');
const settingKey = ref('wx-official');
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
@@ -104,6 +105,8 @@
const formRef = ref<FormInstance | null>(null);
// 表单数据
const { form, resetFields, assignFields } = useFormData<Setting>({
settingId: undefined,
settingKey: settingKey.value,
appId: '',
appSecret: '',
wxOfficialAccount: '',
@@ -132,11 +135,12 @@
.validate()
.then(() => {
loading.value = true;
form.settingKey = settingKey.value;
const appForm = {
...form,
content: JSON.stringify(form)
};
const saveOrUpdate = isUpdate.value ? updateSetting : addSetting;
const saveOrUpdate = isUpdate.value ? updateSettingByKey : addSetting;
saveOrUpdate(appForm)
.then(() => {
message.success('保存成功');
@@ -155,22 +159,45 @@
watch(
() => props.data,
(data) => {
if (data?.settingId) {
isUpdate.value = true;
// 表单赋值
if (data.content) {
const jsonData = JSON.parse(data.content);
assignFields(jsonData);
}
// 其他必要参数
form.settingId = data.settingId;
form.settingKey = data.settingKey;
} else {
// 新增
const activeMatch = props.value === settingKey.value;
if (!data || typeof data !== 'object') {
if (!activeMatch) return;
isUpdate.value = false;
resetFields();
form.settingKey = props.value;
form.settingId = undefined;
form.settingKey = settingKey.value;
return;
}
const normalized: any = Array.isArray(data)
? data.find((d) => d?.settingKey === settingKey.value) ?? data[0]
: (data as any).data && typeof (data as any).data === 'object'
? (data as any).data
: data;
let parsedContent: any | undefined;
const rawContent = (normalized as any).content;
if (rawContent) {
if (typeof rawContent === 'string') {
try {
parsedContent = JSON.parse(rawContent);
} catch {
parsedContent = undefined;
}
} else if (typeof rawContent === 'object') {
parsedContent = rawContent;
}
}
const contentOrRow = parsedContent ?? normalized;
const incomingKey =
(contentOrRow as any).settingKey ?? (normalized as any).settingKey;
if (!activeMatch && incomingKey !== settingKey.value) return;
isUpdate.value = true;
assignFields(contentOrRow);
form.settingId = (normalized as any).settingId;
form.settingKey = settingKey.value;
},
{ immediate: true }
);
</script>

57
src/views/system/setting/components/wx-work.vue
View File

@@ -113,7 +113,7 @@
import { storeToRefs } from 'pinia';
import { FormInstance } from 'ant-design-vue/es/form';
import useFormData from '@/utils/use-form-data';
import { addSetting, updateSetting } from '@/api/system/setting';
import { addSetting, updateSettingByKey } from '@/api/system/setting';
import { copyText } from '@/utils/common';
import { CopyOutlined } from '@ant-design/icons-vue';
@@ -130,6 +130,7 @@
// 保存字段信息(设定好key和描述,content里的字段是随意加的会自动转为json保存到数据库)
// const settingId = ref(null);
// const settingKey = ref('');
const settingKey = ref('wx-work');
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
@@ -141,6 +142,8 @@
const formRef = ref<FormInstance | null>(null);
// 表单数据
const { form, resetFields, assignFields } = useFormData<Setting>({
settingId: undefined,
settingKey: settingKey.value,
suiteId: '',
secret: '',
corpId: '',
@@ -170,11 +173,12 @@
.validate()
.then(() => {
loading.value = true;
form.settingKey = settingKey.value;
const appForm = {
...form,
content: JSON.stringify(form)
};
const saveOrUpdate = isUpdate.value ? updateSetting : addSetting;
const saveOrUpdate = isUpdate.value ? updateSettingByKey : addSetting;
saveOrUpdate(appForm)
.then(() => {
message.success('保存成功');
@@ -193,22 +197,45 @@
watch(
() => props.data,
(data) => {
if (data?.settingId) {
isUpdate.value = true;
// 表单赋值
if (data.content) {
const jsonData = JSON.parse(data.content);
assignFields(jsonData);
}
// 其他必要参数
form.settingId = data.settingId;
form.settingKey = data.settingKey;
} else {
// 新增
const activeMatch = props.value === settingKey.value;
if (!data || typeof data !== 'object') {
if (!activeMatch) return;
isUpdate.value = false;
resetFields();
form.settingKey = props.value;
form.settingId = undefined;
form.settingKey = settingKey.value;
return;
}
const normalized: any = Array.isArray(data)
? data.find((d) => d?.settingKey === settingKey.value) ?? data[0]
: (data as any).data && typeof (data as any).data === 'object'
? (data as any).data
: data;
let parsedContent: any | undefined;
const rawContent = (normalized as any).content;
if (rawContent) {
if (typeof rawContent === 'string') {
try {
parsedContent = JSON.parse(rawContent);
} catch {
parsedContent = undefined;
}
} else if (typeof rawContent === 'object') {
parsedContent = rawContent;
}
}
const contentOrRow = parsedContent ?? normalized;
const incomingKey =
(contentOrRow as any).settingKey ?? (normalized as any).settingKey;
if (!activeMatch && incomingKey !== settingKey.value) return;
isUpdate.value = true;
assignFields(contentOrRow);
form.settingId = (normalized as any).settingId;
form.settingKey = settingKey.value;
},
{ immediate: true }
);
</script>

14
src/views/system/setting/index.vue
View File

@@ -5,21 +5,21 @@
:body-style="{ paddingTop: '0px', minHeight: '800px' }"
>
<a-tabs v-model:active-key="active">
<a-tab-pane tab="网站设置" key="website">
<Website v-model:value="active" :data="data" />
</a-tab-pane>
<!-- <a-tab-pane tab="网站设置" key="website">-->
<!-- <Website v-model:value="active" :data="data" />-->
<!-- </a-tab-pane>-->
<a-tab-pane tab="上传设置" key="upload">
<Upload v-model:value="active" :data="data" />
</a-tab-pane>
<a-tab-pane tab="微信小程序" key="mp-weixin">
<MpWeixin :value="active" :data="data" />
</a-tab-pane>
<a-tab-pane tab="短信设置" key="sms">
<Sms v-model:value="active" :data="data" />
</a-tab-pane>
<a-tab-pane tab="注册设置" key="register">
<Register :value="active" :data="data" />
</a-tab-pane>
<a-tab-pane tab="微信小程序" key="mp-weixin">
<MpWeixin :value="active" :data="data" />
</a-tab-pane>
<a-tab-pane tab="企业微信" key="wx-work">
<WxWork :value="active" :data="data" />
</a-tab-pane>
@@ -57,7 +57,7 @@
import { getSettingByKey } from '@/api/system/setting';
// tab页选中
const active = ref('privacy');
const active = ref('upload');
const data = ref<Setting>();