feat(system): 优化配置页面表单组件
- 在 crudTable组件中添加 afterSubmit 钩子,更新 modelValue -重构 formContent 组件中的 formData,使用 ref 替代 reactive - 优化 formContent 组件的提交逻辑,简化代码结构
This commit is contained in:
@@ -6,7 +6,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {defineComponent, onMounted, watch} from "vue";
|
import {computed, defineComponent, onMounted, watch} from "vue";
|
||||||
import {CreateCrudOptionsProps, CreateCrudOptionsRet, useFs, AddReq,
|
import {CreateCrudOptionsProps, CreateCrudOptionsRet, useFs, AddReq,
|
||||||
compute,
|
compute,
|
||||||
DelReq,
|
DelReq,
|
||||||
@@ -34,6 +34,9 @@ const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsPr
|
|||||||
},
|
},
|
||||||
col:{
|
col:{
|
||||||
span:24
|
span:24
|
||||||
|
},
|
||||||
|
afterSubmit({mode}){
|
||||||
|
emit('update:modelValue', crudBinding.value.data);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
toolbar:{
|
toolbar:{
|
||||||
@@ -96,6 +99,7 @@ const props = defineProps({
|
|||||||
})
|
})
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
|
||||||
|
|
||||||
//通过导出modelValue, 可以导出成为一个input组件
|
//通过导出modelValue, 可以导出成为一个input组件
|
||||||
watch(
|
watch(
|
||||||
() => {
|
() => {
|
||||||
@@ -103,7 +107,6 @@ watch(
|
|||||||
},
|
},
|
||||||
(value = []) => {
|
(value = []) => {
|
||||||
crudBinding.value.data = value;
|
crudBinding.value.data = value;
|
||||||
//emit('update:modelValue', value);
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true
|
immediate: true
|
||||||
|
|||||||
@@ -210,7 +210,7 @@ import {Edit,Finished,Delete} from "@element-plus/icons-vue";
|
|||||||
import crudTable from "./components/crudTable.vue"
|
import crudTable from "./components/crudTable.vue"
|
||||||
const props = defineProps(['options', 'editableTabsItem']);
|
const props = defineProps(['options', 'editableTabsItem']);
|
||||||
|
|
||||||
let formData: any = reactive({});
|
let formData: any = ref({});
|
||||||
let formList: any = ref([]);
|
let formList: any = ref([]);
|
||||||
const formRef = ref<FormInstance>()
|
const formRef = ref<FormInstance>()
|
||||||
let uploadUrl = ref(getBaseURL() + 'api/system/file/');
|
let uploadUrl = ref(getBaseURL() + 'api/system/file/');
|
||||||
@@ -233,29 +233,26 @@ const getInit = () => {
|
|||||||
_formData[key] = item.value;
|
_formData[key] = item.value;
|
||||||
} else {
|
} else {
|
||||||
if ([5, 12,11, 14].indexOf(item.form_item_type) !== -1) {
|
if ([5, 12,11, 14].indexOf(item.form_item_type) !== -1) {
|
||||||
_formData[key] = [];
|
_formData[key] = item.value || [];
|
||||||
} else {
|
} else {
|
||||||
_formData[key] = item.value;
|
_formData[key] = item.value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
formData = Object.assign({}, _formData)
|
formData.value = Object.assign({}, _formData)
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 提交数据
|
// 提交数据
|
||||||
const onSubmit = (formEl: FormInstance | undefined) => {
|
const onSubmit = (formEl: FormInstance | undefined) => {
|
||||||
// const form = JSON.parse(JSON.stringify(form));
|
const keys = Object.keys(formData.value);
|
||||||
const keys = Object.keys(formData);
|
const values = Object.values(formData.value);
|
||||||
const values = Object.values(formData);
|
|
||||||
for (const index in formList.value) {
|
for (const index in formList.value) {
|
||||||
const item = formList.value[index];
|
const item = formList.value[index];
|
||||||
// 赋值操作
|
// 赋值操作
|
||||||
keys.map((mapKey, mapIndex) => {
|
keys.forEach((mapKey, mapIndex) => {
|
||||||
if (mapKey === item.key) {
|
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) {
|
if (['img', 'imgs'].indexOf(item.form_item_type_label) > -1) {
|
||||||
for (const arr of item.rule) {
|
for (const arr of item.rule) {
|
||||||
|
|||||||
Reference in New Issue
Block a user