refactor(setting): 优化系统设置组件的数据处理逻辑

- 将 updateSetting 替换为 updateSettingByKey 方法调用
- 统一设置表单中的 settingKey 字段值
- 重构 watch 数据监听逻辑，增强数据类型检查
- 改进表单初始化和数据回显流程
- 添加对 content 字段的 JSON 解析错误处理
- 标准化各设置组件的表单数据结构
- 优化数组和对象数据的查找匹配逻辑

src/views/system/setting/components/basic.vue

@@ -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){
+      const activeMatch = props.value === settingKey.value;
-        isUpdate.value = true
+      if (!data || typeof data !== 'object') {
-        // 表单赋值
+        if (!activeMatch) return;
-        if(data.content){
+        isUpdate.value = false;
-          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
         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>

src/views/system/setting/components/clear.vue

@@ -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){
+    const activeMatch = props.value === settingKey.value;
-      isUpdate.value = true
+    if (!data || typeof data !== 'object') {
-      // 表单赋值
+      if (!activeMatch) return;
-      if(data.content){
+      isUpdate.value = false;
-        const jsonData = JSON.parse(data.content);
-        assignFields(jsonData);
-      }
-      // 其他必要参数
-      form.settingId = data.settingId
-      form.settingKey = data.settingKey
-    } else {
-      // 新增
-      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>

src/views/system/setting/components/developer.vue

@@ -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){
+      const activeMatch = props.value === settingKey.value;
-        isUpdate.value = true
+      if (!data || typeof data !== 'object') {
-        // 表单赋值
+        if (!activeMatch) return;
-        if(data.content){
+        isUpdate.value = false;
-          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
         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>

src/views/system/setting/components/mp-weixin.vue

@@ -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){
+    const activeMatch = props.value === settingKey.value;
-      isUpdate.value = true
+    if (!data || typeof data !== 'object') {
-      // 表单赋值
+      if (!activeMatch) return;
-      if(data.content){
+      isUpdate.value = false;
-        const jsonData = JSON.parse(data.content);
-        assignFields(jsonData);
-      }
-      // 其他必要参数
-      form.settingId = data.settingId
-      form.settingKey = data.settingKey
-    } else {
-      // 新增
-      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>
 

src/views/system/setting/components/payment.vue

@@ -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) {
+    const activeMatch = props.value === settingKey.value;
-      isUpdate.value = true;
+    if (!data || typeof data !== "object") {
-      // 表单赋值
+      if (!activeMatch) return;
-      if (data.content) {
-        const jsonData = JSON.parse(data.content);
-        assignFields(jsonData);
-      }
-      // 其他必要参数
-      form.settingId = data.settingId;
-      form.settingKey = data.settingKey;
-    } else {
-      // 新增
       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>
 

src/views/system/setting/components/printer.vue

@@ -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){
+    const activeMatch = props.value === settingKey.value;
-      isUpdate.value = true
+    if (!data || typeof data !== 'object') {
-      // 表单赋值
+      if (!activeMatch) return;
-      if(data.content){
+      isUpdate.value = false;
-        const jsonData = JSON.parse(data.content);
-        assignFields(jsonData);
-      }
-      // 其他必要参数
-      form.settingId = data.settingId
-      form.settingKey = data.settingKey
-    } else {
-      // 新增
-      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>

src/views/system/setting/components/privacy.vue

@@ -114,16 +114,47 @@
   watch(
     () => props.data,
     (data) => {
-      console.log(data, 'propss');
+      const settingKey = 'privacy';
-      if (data?.settingKey) {
+      const activeMatch = props.value === settingKey;
-        isUpdate.value = true;
+      if (!data || typeof data !== 'object') {
-        // 表单赋值
+        if (!activeMatch) return;
-        assignFields(data);
-      } else {
-        // 新增
         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>

src/views/system/setting/components/register.vue

@@ -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){
+    const activeMatch = props.value === settingKey.value;
-      isUpdate.value = true
+    if (!data || typeof data !== 'object') {
-      // 表单赋值
+      if (!activeMatch) return;
-      if(data.content){
+      isUpdate.value = false;
-        const jsonData = JSON.parse(data.content);
-        assignFields(jsonData);
-      }
-      // 其他必要参数
-      form.settingId = data.settingId
-      form.settingKey = data.settingKey
-    } else {
-      // 新增
-      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>

src/views/system/setting/components/sms.vue

@@ -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){
+    const activeMatch = props.value === settingKey.value;
-      isUpdate.value = true
+    if (!data || typeof data !== 'object') {
-      // 表单赋值
+      if (!activeMatch) return;
-      if(data.content){
+      isUpdate.value = false;
-        const jsonData = JSON.parse(data.content);
-        assignFields(jsonData);
-      }
-      // 其他必要参数
-      form.settingId = data.settingId
-      form.settingKey = data.settingKey
-    } else {
-      // 新增
-      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>

src/views/system/setting/components/upload.vue

@@ -16,46 +16,25 @@
         </a-radio-group>
       </a-form-item>
       <template v-if="form.uploadMethod !== 'file'">
-        <a-form-item
+        <a-form-item label="存储空间名称" name="bucketName">
-          label="存储空间名称"
+          <a-input v-model:value="form.bucketName" placeholder="存储空间名称" />
-          name="bucketName"
-        >
-          <a-input
-            v-model:value="form.bucketName"
-            placeholder="存储空间名称"
-          />
         </a-form-item>
-        <a-form-item
+        <a-form-item label="Region域名" name="bucketEndpoint">
-          label="Region域名"
-          name="endpoint"
-        >
           <a-input
             v-model:value="form.bucketEndpoint"
             placeholder="https://oss-cn-shenzhen.aliyuncs.com"
           />
         </a-form-item>
-        <a-form-item
+        <a-form-item label="accessKeyId" name="accessKeyId">
-          label="accessKeyId"
+          <a-input v-model:value="form.accessKeyId" placeholder="accessKeyId" />
-          name="accessKeyId"
-        >
-          <a-input
-            v-model:value="form.accessKeyId"
-            placeholder="accessKeyId"
-          />
         </a-form-item>
-        <a-form-item
+        <a-form-item label="accessKeySecret" name="accessKeySecret">
-          label="accessKeySecret"
+          <a-input-password
-          name="accessKeySecret"
-        >
-          <a-input
             v-model:value="form.accessKeySecret"
             placeholder="accessKeySecret"
           />
         </a-form-item>
-        <a-form-item
+        <a-form-item label="空间域名" name="bucketDomain">
-          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
+        <a-form-item label="域名" name="fileUrl">
-          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
+        <a-button type="primary" class="ele-btn-icon" @click="save">
-          type="primary"
-          class="ele-btn-icon"
-          @click="save"
-        >
           <span>保存</span>
         </a-button>
       </a-form-item>
@@ -120,194 +100,204 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, watch } from "vue";
+  import { reactive, ref, watch } from 'vue';
-import { copyText } from "@/utils/common";
+  import { copyText } from '@/utils/common';
-import { message } from "ant-design-vue";
+  import { message } from 'ant-design-vue';
-import { CopyOutlined } from '@ant-design/icons-vue';
+  import { CopyOutlined } from '@ant-design/icons-vue';
-import { Setting } from "@/api/system/setting/model";
+  import { Setting } from '@/api/system/setting/model';
-import { useThemeStore } from "@/store/modules/theme";
+  import { useThemeStore } from '@/store/modules/theme';
-import { storeToRefs } from "pinia";
+  import { storeToRefs } from 'pinia';
-import { UploadOutlined } from '@ant-design/icons-vue';
+  import { FormInstance } from 'ant-design-vue/es/form';
-import { FormInstance } from "ant-design-vue/es/form";
+  import useFormData from '@/utils/use-form-data';
-import useFormData from "@/utils/use-form-data";
+  import { addSetting, updateSettingByKey } from '@/api/system/setting';
-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";
 
-const props = defineProps<{
+  const props = defineProps<{
-  value?: string;
+    value?: string;
-  // 修改回显的数据
+    // 修改回显的数据
-  data?: Setting | null;
+    data?: Setting | null;
-}>();
+  }>();
 
-// 保存字段信息(设定好key和描述,content里的字段是随意加的会自动转为json保存到数据库)
+  // 保存字段信息(设定好key和描述,content里的字段是随意加的会自动转为json保存到数据库)
-const settingId = ref(undefined);
+  const settingKey = ref('upload');
-const settingKey = ref("upload");
+  // 是否开启响应式布局
-// 是否开启响应式布局
+  const themeStore = useThemeStore();
-const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
-const { styleResponsive } = storeToRefs(themeStore);
+  // 是否是修改
-// 编辑器内容，双向绑定
+  const isUpdate = ref(false);
-const logo = ref<any>([]);
+  //
-// 提交状态
+  const formRef = ref<FormInstance | null>(null);
-const loading = ref(false);
+  // 表单数据
-// 是否是修改
+  const { form, resetFields, assignFields } = useFormData<Setting>({
-const isUpdate = ref(false);
+    settingId: undefined,
-// token
+    settingKey: settingKey.value,
-const token = localStorage.getItem(TOKEN_STORE_NAME);
+    uploadMethod: 'oss',
-//
+    fileUrl: 'https://file.wsdns.cn',
-const formRef = ref<FormInstance | null>(null);
+    bucketName: '',
-// 表单数据
+    bucketEndpoint: '',
-const { form, resetFields, assignFields } = useFormData<Setting>({
+    accessKeyId: '',
-  uploadMethod: 'oss',
+    accessKeySecret: '',
-  fileUrl: 'https://file.wsdns.cn',
+    bucketDomain: '',
-  bucketName: '',
+    tenantId: localStorage.getItem('TenantId')
-  bucketEndpoint: '',
+  });
-  accessKeyId: '',
-  accessKeySecret: '',
-  bucketDomain: '',
-  tenantId: localStorage.getItem('TenantId')
-});
 
-// 表单验证规则
+  // 表单验证规则
-const rules = reactive({
+  const rules = reactive({
-  uploadMethod: [
+    uploadMethod: [
-    {
+      {
-      required: true,
+        required: true,
-      type: "string",
+        type: 'string',
-      message: "请设置上传方式",
+        message: '请设置上传方式',
-      trigger: "blur"
+        trigger: 'blur'
-    }
-  ],
-  bucketName: [
-    {
-      required: true,
-      type: "string",
-      message: "请填写存储空间名称",
-      trigger: "blur"
-    }
-  ],
-  accessKeyId: [
-    {
-      required: true,
-      type: "string",
-      message: "请填写accessKeyId",
-      trigger: "blur"
-    }
-  ],
-  accessKeySecret: [
-    {
-      required: true,
-      type: "string",
-      message: "请填写accessKeySecret",
-      trigger: "blur"
-    }
-  ],
-  bucketDomain: [
-    {
-      required: true,
-      type: "string",
-      message: "请填写存储空间域名",
-      trigger: "blur"
-    }
-  ]
-});
-
-const onCopyText = (text) => {
-  copyText(text);
-};
-
-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 save = () => {
-  console.log(form);
-  if (!formRef.value) {
-    return;
-  }
-  formRef.value
-    .validate()
-    .then(() => {
-      loading.value = true;
-      const appForm = {
-        ...form,
-        content: JSON.stringify(form)
-      };
-      const saveOrUpdate = isUpdate.value ? updateSetting : addSetting;
-      saveOrUpdate(appForm)
-        .then((msg) => {
-          message.success("保存成功");
-        })
-        .catch((e) => {
-          message.error(e.message);
-        });
-    })
-    .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;
+    bucketName: [
-      form.settingKey = data.settingKey;
+      {
-    } else {
+        required: true,
-      // 新增
+        type: 'string',
-      isUpdate.value = false;
+        message: '请填写存储空间名称',
-      resetFields();
+        trigger: 'blur'
-      form.settingKey = props.value;
+      }
+    ],
+    accessKeyId: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写accessKeyId',
+        trigger: 'blur'
+      }
+    ],
+    accessKeySecret: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写accessKeySecret',
+        trigger: 'blur'
+      }
+    ],
+    bucketDomain: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写存储空间域名',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const onCopyText = (text) => {
+    copyText(text);
+  };
+
+  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 = settingKey.value;
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    console.log(form);
+    if (!formRef.value) {
+      return;
     }
-  }
+    formRef.value
-);
+      .validate()
+      .then(() => {
+        // 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)
+        };
+        // `getByKey` may not return `settingId`; update by key is safer here.
+        const saveOrUpdate = isUpdate.value ? updateSettingByKey : addSetting;
+        saveOrUpdate(appForm)
+          .then((_msg) => {
+            message.success('保存成功');
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.data,
+    (data) => {
+      // 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 = 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>
 
 <style lang="less">
-.small {
+  .small {
-  color: var(--text-color-secondary);
+    color: var(--text-color-secondary);
-  font-size: 14px !important;
+    font-size: 14px !important;
-}
+  }
 </style>

src/views/system/setting/components/website.vue

@@ -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,
@@ -143,18 +144,19 @@ const save = () => {
     return;
   }
   formRef.value
-    .validate()
+	    .validate()
-    .then(() => {
+	    .then(() => {
-      loading.value = true;
+	      loading.value = true;
-      const appForm = {
+	      form.settingKey = settingKey.value;
-        ...form,
+	      const appForm = {
-        content: JSON.stringify(form)
+	        ...form,
-      };
+	        content: JSON.stringify(form)
-      const saveOrUpdate = isUpdate.value ? updateSetting : addSetting;
+	      };
-      saveOrUpdate(appForm)
+	      const saveOrUpdate = isUpdate.value ? updateSettingByKey : addSetting;
-        .then((msg) => {
+	      saveOrUpdate(appForm)
-          message.success('保存成功');
+	        .then((msg) => {
-        })
+	          message.success('保存成功');
+	        })
         .catch((e) => {
           message.error(e.message);
         });
@@ -166,22 +168,45 @@ const save = () => {
 watch(
   () => props.data,
   (data) => {
-    if (data?.settingId) {
+    const activeMatch = props.value === settingKey.value;
-      isUpdate.value = true
+    if (!data || typeof data !== 'object') {
-      // 表单赋值
+      if (!activeMatch) return;
-      if (data.content) {
+      isUpdate.value = false;
-        const jsonData = JSON.parse(data.content);
-        assignFields(jsonData);
-      }
-      // 其他必要参数
-      form.settingId = data.settingId
-      form.settingKey = data.settingKey
-    } else {
-      // 新增
-      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>

src/views/system/setting/components/wx-official.vue

@@ -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) {
+      const activeMatch = props.value === settingKey.value;
-        isUpdate.value = true;
+      if (!data || typeof data !== 'object') {
-        // 表单赋值
+        if (!activeMatch) return;
-        if (data.content) {
-          const jsonData = JSON.parse(data.content);
-          assignFields(jsonData);
-        }
-        // 其他必要参数
-        form.settingId = data.settingId;
-        form.settingKey = data.settingKey;
-      } else {
-        // 新增
         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>

src/views/system/setting/components/wx-work.vue

@@ -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) {
+      const activeMatch = props.value === settingKey.value;
-        isUpdate.value = true;
+      if (!data || typeof data !== 'object') {
-        // 表单赋值
+        if (!activeMatch) return;
-        if (data.content) {
-          const jsonData = JSON.parse(data.content);
-          assignFields(jsonData);
-        }
-        // 其他必要参数
-        form.settingId = data.settingId;
-        form.settingKey = data.settingKey;
-      } else {
-        // 新增
         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>

src/views/system/setting/index.vue

@@ -5,21 +5,21 @@
       :body-style="{ paddingTop: '0px', minHeight: '800px' }"
     >
       <a-tabs v-model:active-key="active">
-        <a-tab-pane tab="网站设置" key="website">
+<!--        <a-tab-pane tab="网站设置" key="website">-->
-          <Website v-model:value="active" :data="data" />
+<!--          <Website v-model:value="active" :data="data" />-->
-        </a-tab-pane>
+<!--        </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>();