feat(system): 优化配置页面表单组件

- 在 crudTable组件中添加 afterSubmit 钩子,更新 modelValue
-重构 formContent 组件中的 formData,使用 ref 替代 reactive
- 优化 formContent 组件的提交逻辑,简化代码结构
This commit is contained in:
1638245306
2025-03-14 17:33:51 +08:00
parent 8706de5ef4
commit bc7bc3cda6
2 changed files with 12 additions and 12 deletions

View File

@@ -6,7 +6,7 @@
</template>
<script setup lang="ts">
import {defineComponent, onMounted, watch} from "vue";
import {computed, defineComponent, onMounted, watch} from "vue";
import {CreateCrudOptionsProps, CreateCrudOptionsRet, useFs, AddReq,
compute,
DelReq,
@@ -34,6 +34,9 @@ const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsPr
},
col:{
span:24
},
afterSubmit({mode}){
emit('update:modelValue', crudBinding.value.data);
}
},
toolbar:{
@@ -96,6 +99,7 @@ const props = defineProps({
})
const emit = defineEmits(['update:modelValue'])
//通过导出modelValue, 可以导出成为一个input组件
watch(
() => {
@@ -103,7 +107,6 @@ watch(
},
(value = []) => {
crudBinding.value.data = value;
//emit('update:modelValue', value);
},
{
immediate: true

View File

@@ -210,7 +210,7 @@ import {Edit,Finished,Delete} from "@element-plus/icons-vue";
import crudTable from "./components/crudTable.vue"
const props = defineProps(['options', 'editableTabsItem']);
let formData: any = reactive({});
let formData: any = ref({});
let formList: any = ref([]);
const formRef = ref<FormInstance>()
let uploadUrl = ref(getBaseURL() + 'api/system/file/');
@@ -233,29 +233,26 @@ const getInit = () => {
_formData[key] = item.value;
} else {
if ([5, 12,11, 14].indexOf(item.form_item_type) !== -1) {
_formData[key] = [];
_formData[key] = item.value || [];
} else {
_formData[key] = item.value;
}
}
}
formData = Object.assign({}, _formData)
formData.value = Object.assign({}, _formData)
});
};
// 提交数据
const onSubmit = (formEl: FormInstance | undefined) => {
// const form = JSON.parse(JSON.stringify(form));
const keys = Object.keys(formData);
const values = Object.values(formData);
const keys = Object.keys(formData.value);
const values = Object.values(formData.value);
for (const index in formList.value) {
const item = formList.value[index];
// 赋值操作
keys.map((mapKey, mapIndex) => {
keys.forEach((mapKey, mapIndex) => {
if (mapKey === item.key) {
if (item.form_item_type_label !== 'array') {
item.value = values[mapIndex];
}
item.value = values[mapIndex];
// 必填项的验证
if (['img', 'imgs'].indexOf(item.form_item_type_label) > -1) {
for (const arr of item.rule) {