up.
This commit is contained in:
parent
744e6c9de1
commit
28712780ff
@ -26,7 +26,6 @@
|
||||
<el-switch
|
||||
size="small"
|
||||
:model-value="dataValue"
|
||||
@update:modelValue="(val) => updateDataValue(val)"
|
||||
v-bind="itemBind"
|
||||
/>
|
||||
</template>
|
||||
@ -77,7 +76,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, onMounted} from "vue";
|
||||
import {ref, onMounted, toRaw} from "vue";
|
||||
import { strToValue } from "@/utils/sys-config";
|
||||
|
||||
const props = defineProps<{
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -30,9 +30,11 @@
|
||||
@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>
|
||||
@ -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 () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user