up.

z_ele/src/views/system/config-set/components/config-form-item.vue

@@ -26,7 +26,6 @@
       <el-switch
         size="small"
         :model-value="dataValue"
-        @update:modelValue="(val) => updateDataValue(val)"
         v-bind="itemBind"
       />
     </template>
@@ -77,8 +76,8 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted} from "vue";
-import { strToValue} from "@/utils/sys-config";
+import {ref, onMounted, toRaw} from "vue";
+import { strToValue } from "@/utils/sys-config";
 
 const props = defineProps<{
   name: string;
@@ -92,11 +91,12 @@ const props = defineProps<{
 const dataValue = ref<any>();
 onMounted(() => {
   dataValue.value = strToValue(props.type, props.value);
-  // console.log("渲染完成", props, dataValue.value,);
 });
-const updateDataValue = (val) => {
-  console.log("更新val", val);
-}
+defineExpose({
+  getDataValue(){
+    return [props.name, toRaw(dataValue.value)];
+  }
+})
 </script>
 
 <style scoped lang="scss">

z_ele/src/views/system/config-set/components/config-form-list.vue

@@ -48,6 +48,7 @@
         :option="config.option"
         :item-bind="config.bind"
         :key="config.id"
+        :ref="setItemRef"
       />
       <el-form-item v-if="config.tips">
         <ele-text type="placeholder" style="line-height: 1.6">
@@ -60,6 +61,39 @@
 
 <script setup lang="ts">
   import ConfigFormItem from '../components/config-form-item.vue';
+  import {onBeforeUpdate, ref} from "vue";
+  import type { ComponentPublicInstance } from "vue";
+
+
+  // 定义组件引用类型
+  interface ConfigFormItemInstance {
+    getDataValue: () => any; // 根据实际返回类型调整
+  }
+
+  // 存储所有组件引用的数组
+  const itemRefs = ref<ConfigFormItemInstance[]>([]);
+
+  // 收集组件引用的函数
+  const setItemRef = (el: unknown) => {
+    const component = el as ComponentPublicInstance & ConfigFormItemInstance;
+    if (component && component.getDataValue) {
+      itemRefs.value.push(component);
+    }
+  };
+  // 获取所有组件数据的函数
+  const getAllDataValues = () => {
+    let data = {}
+    itemRefs.value.map((item)=>{
+      const [name, value] = item.getDataValue();
+      data[name] = value;
+    });
+    return data;
+  };
+  // 每次更新前清空引用数组
+  onBeforeUpdate(() => {
+    itemRefs.value = [];
+  });
+
   const props = defineProps<{
     configList: any;
   }>();
@@ -70,4 +104,10 @@
     }
     return null;
   };
+
+  defineExpose({
+    getFormData(){
+      return getAllDataValues();
+    }
+  })
 </script>

z_ele/src/views/system/config-set/index.vue

@@ -30,16 +30,18 @@
         @submit.prevent=""
       >
         <config-form-list
+          ref="configFormListRef"
           :config-list="configList"
           v-if="configList.length > 0"
         />
+        <el-button @click="saveForm">保存</el-button>
       </el-form>
     </ele-card>
   </ele-page>
 </template>
 
 <script lang="ts" setup>
-import {onMounted, ref} from 'vue';
+import {onMounted, ref } from 'vue';
 import {Refresh} from '@element-plus/icons-vue';
 import {listConfigs, syncConfigs} from '@/api/system/config';
 import {getSysConfig, strToBind, strToOption} from '@/utils/sys-config';
@@ -86,6 +88,12 @@ const sync = () => {
   });
 }
 
+const configFormListRef = ref(null);
+const saveForm = () => {
+  const allValues =  configFormListRef.value?.getFormData();
+  console.log('所有组件数据:', allValues);
+}
+
 const groupItems = ref([]);
 const configGroup = ref('');
 onMounted(async () => {