From f346dcb4e26bfca845b4825006af03affe089b8a Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期五, 02 八月 2024 17:23:42 +0800 Subject: [PATCH] 对外支持模块 --- src/components/form/FYForm.vue | 91 +++++++++++++++++++++++++++++++++++++-------- 1 files changed, 74 insertions(+), 17 deletions(-) diff --git a/src/components/form/FYForm.vue b/src/components/form/FYForm.vue index c4919dd..9c5405e 100644 --- a/src/components/form/FYForm.vue +++ b/src/components/form/FYForm.vue @@ -3,7 +3,7 @@ :inline="false" :model="formObj" ref="formRef" - :rules="rules" + :rules="allRules" label-position="right" label-width="150px" > @@ -12,8 +12,8 @@ <el-button :disabled="!edit" type="primary" @click="onSubmit" :loading="loading" >鎻愪氦</el-button > - <el-button :disabled="!edit" @click="onReset">閲嶇疆</el-button> - <el-button v-if="enableCancelBtn" @click="onCancel">鍙栨秷</el-button> + <el-button v-if="useReset" :disabled="!edit" @click="onReset">閲嶇疆</el-button> + <el-button v-if="useCancel" @click="onCancel">鍙栨秷</el-button> </el-form-item> </el-form> </template> @@ -26,12 +26,17 @@ * 鍙紶鍏ュ垵濮嬭〃鍗曟暟鎹甪ormInfo锛岃〃鍗曟牎楠岃鍒檙ules * 瀹炵幇submit鍜宑ancel瑙﹀彂鍑芥暟 */ -import { defineProps, defineEmits, reactive, ref, watch } from 'vue'; +import { defineProps, defineEmits, reactive, ref, watch, computed, defineExpose } from 'vue'; import { useFormConfirm } from '@/composables/formConfirm'; const props = defineProps({ //琛ㄥ崟鍩烘湰淇℃伅 - formInfo: Object, + formInfo: { + type: Object, + default: () => { + return {}; + } + }, //琛ㄥ崟妫�楠岃鍒� rules: Object, showButtons: { @@ -39,9 +44,11 @@ default: true }, //鍙栨秷鎸夐挳鏄惁鍙敤 - enableCancelBtn: Boolean, + useCancel: Boolean, + //閲嶇疆鎸夐挳鏄惁鍙敤 + useReset: Boolean, //瑙﹀彂閲嶇疆 - reset: Boolean, + doClear: Boolean, //閫氱煡缂栬緫鐘舵�� isEdit: Boolean }); @@ -49,8 +56,32 @@ //瑙﹀彂鍑芥暟锛屾彁浜ゅ拰鍙栨秷 const emit = defineEmits(['submit', 'cancel', 'update:isEdit']); +const baseRules = reactive({ + _usertype: [ + { + required: true, + message: '鐢ㄦ埛绫诲瀷涓嶈兘涓虹┖', + trigger: 'change' + } + ], + _locations: [ + { + required: true, + message: '琛屾斂鍖哄垝涓嶈兘涓虹┖', + trigger: 'change' + } + ], + _scenetype: [ + { + required: true, + message: '鍦烘櫙绫诲瀷涓嶈兘涓虹┖', + trigger: 'change' + } + ] +}); + //琛ㄥ崟鎿嶄綔鍑芥暟 -const { formObj, formRef, edit, onSubmit, onCancel, onReset } = useFormConfirm({ +const { formObj, formRef, edit, onSubmit, onCancel, onReset, clear } = useFormConfirm({ submit: { do: submit }, @@ -66,10 +97,18 @@ function submit() { loading.value = true; return new Promise((resolve, reject) => { - emit('submit', formObj, () => { - loading.value = false; - resolve(); - }); + emit( + 'submit', + formObj, + () => { + loading.value = false; + resolve(); + }, + (err) => { + loading.value = false; + reject(err); + } + ); }); } @@ -78,28 +117,46 @@ emit('cancel'); } +const allRules = computed(() => { + return { ...baseRules, ...props.rules }; +}); + //鐩戝惉琛ㄥ崟鍒濆鏁版嵁浼犲叆 watch( () => props.formInfo, (nValue) => { formObj.value = nValue; - } + }, + { deep: false, immediate: true } ); //鐩戝惉琛ㄥ崟閲嶇疆鍔熻兘瑙﹀彂 watch( - () => props.reset, + () => props.doClear, (nValue) => { if (nValue) { - onReset(); + clear(); } } ); //鐩戝惉琛ㄥ崟缂栬緫鐘舵�� -watch(edit, (nValue) => { - emit('update:isEdit', nValue); +watch( + () => props.isEdit, + (nV, oV) => { + if (nV != oV) { + edit.value = nV; + } + }, + { immediate: true } +); +watch(edit, (nV, oV) => { + if (nV != oV) { + emit('update:isEdit', nV); + } }); + +defineExpose({ formObj, onSubmit, onCancel, onReset }); </script> <style scoped></style> -- Gitblit v1.9.3