From e5875000e60d4976f159f287ae3773f1d11960b3 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期五, 22 十二月 2023 17:36:56 +0800 Subject: [PATCH] 调整FYForm表单逻辑 --- src/enum/scene.js | 8 + src/views/baseinfo/fysp/scene/SceneEdit.vue | 2 src/api/index.js | 2 src/views/fytz/user/UserEdit.vue | 2 src/views/fysp/evaluation/components/precheck/CompCheckArea.vue | 7 src/components.d.ts | 1 src/views/fytz/user/components/CompUserInfo.vue | 112 +++++++-------- src/composables/formConfirm.js | 5 src/views/fytz/user/UserInfo.vue | 2 src/components/form/FYForm.vue | 32 ++-- src/views/fytz/user/components/CompUserInfoAddDrawer.vue | 42 ++---- src/views/baseinfo/fysp/scene/CompSceneBaseInfo.vue | 155 ++++++++------------- 12 files changed, 159 insertions(+), 211 deletions(-) diff --git a/src/api/index.js b/src/api/index.js index 45f5a4f..27fb8ac 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -1,7 +1,7 @@ import axios from 'axios'; import { ElMessage } from 'element-plus'; -const debug = false; +const debug = true; let ip1 = 'http://47.100.191.150:9005/'; let ip1_file = 'http://47.100.191.150:9005/'; diff --git a/src/components.d.ts b/src/components.d.ts index 62001ec..6eff6e0 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -61,7 +61,6 @@ ElTag: typeof import('element-plus/es')['ElTag'] ElText: typeof import('element-plus/es')['ElText'] ElTooltip: typeof import('element-plus/es')['ElTooltip'] - ElTransfer: typeof import('element-plus/es')['ElTransfer'] ElTree: typeof import('element-plus/es')['ElTree'] Footer: typeof import('./components/core/Footer.vue')['default'] FormCol: typeof import('./components/layout/FormCol.vue')['default'] diff --git a/src/components/form/FYForm.vue b/src/components/form/FYForm.vue index 1b9625f..a305bde 100644 --- a/src/components/form/FYForm.vue +++ b/src/components/form/FYForm.vue @@ -62,15 +62,15 @@ _locations: [ { required: true, - // message: '琛屾斂鍖哄垝涓嶈兘涓虹┖', + message: '琛屾斂鍖哄垝涓嶈兘涓虹┖', trigger: 'change', - validator: (rule, value, callback) => { - if (!value) { - callback(new Error('Please input the age')); - } else { - callback() - } - } + // validator: (rule, value, callback) => { + // if (!value) { + // callback(new Error('Please input the age')); + // } else { + // callback() + // } + // } } ], _scenetype: [ @@ -78,13 +78,13 @@ required: true, message: '鍦烘櫙绫诲瀷涓嶈兘涓虹┖', trigger: 'change', - validator: (rule, value, callback) => { - if (!value) { - callback(new Error('Please input the age')); - } else { - callback() - } - } + // validator: (rule, value, callback) => { + // if (!value) { + // callback(new Error('Please input the age')); + // } else { + // callback() + // } + // } } ] }); @@ -154,7 +154,7 @@ emit('update:isEdit', nValue); }); -defineExpose({ onSubmit, onCancel, onReset }); +defineExpose({ formObj, onSubmit, onCancel, onReset }); </script> <style scoped></style> diff --git a/src/composables/formConfirm.js b/src/composables/formConfirm.js index ffe4b1b..fcd2828 100644 --- a/src/composables/formConfirm.js +++ b/src/composables/formConfirm.js @@ -1,4 +1,4 @@ -import { defineProps, onActivated, onDeactivated, ref, watch } from 'vue'; +import { defineProps, onActivated, onDeactivated, reactive, ref, watch } from 'vue'; import { useCloned } from '@vueuse/core'; import { useMessageBoxTip, useMessageBox } from './messageBox'; @@ -26,7 +26,8 @@ // }); //琛ㄥ崟鍐呭 - const formObj = ref(defaultForm ? defaultForm : {}); + const formObj = reactive(defaultForm ? defaultForm : {}); + // const formObj = reactive({}); let formObjClone = useCloned(formObj, { manual: true }); //琛ㄥ崟缁勪欢寮曠敤 const formRef = ref(null); diff --git a/src/enum/scene.js b/src/enum/scene.js index bc0b524..80aa423 100644 --- a/src/enum/scene.js +++ b/src/enum/scene.js @@ -66,6 +66,14 @@ label: '姹戒慨', value: '7', }, + { + label: '瀹為獙瀹�', + value: '8', + }, + { + label: '鍖荤枟鏈烘瀯', + value: '9', + }, ]; } diff --git a/src/views/baseinfo/fysp/scene/CompSceneBaseInfo.vue b/src/views/baseinfo/fysp/scene/CompSceneBaseInfo.vue index 4695690..602aaf9 100644 --- a/src/views/baseinfo/fysp/scene/CompSceneBaseInfo.vue +++ b/src/views/baseinfo/fysp/scene/CompSceneBaseInfo.vue @@ -1,29 +1,13 @@ <!-- 鍦烘櫙鍩烘湰淇℃伅缂栬緫 --> <template> - <FYForm - :form-info="_formInfo" - :rules="rules" - :useReset="true" - @submit="submit" - @cancel="cancel" - > + <FYForm :form-info="formInfo" :rules="rules" :useReset="true" @submit="submit" @cancel="cancel"> <template #form-item="{ formObj }"> <el-form-item label="鍦烘櫙鍚嶇О" prop="name"> - <el-input - clearable - show-word-limit - v-model="formObj.name" - placeholder="鍦烘櫙鍚嶇О" - /> + <el-input clearable show-word-limit v-model="formObj.name" placeholder="鍦烘櫙鍚嶇О" /> </el-form-item> <el-form-item label="鍦烘櫙绫诲瀷" prop="_typeObj"> <el-select v-model="formObj._typeObj" placeholder="鍦烘櫙绫诲瀷"> - <el-option - v-for="s in sceneTypes" - :key="s.value" - :label="s.label" - :value="s" - /> + <el-option v-for="s in sceneTypes" :key="s.value" :label="s.label" :value="s" /> </el-select> </el-form-item> <el-form-item label="鐪�/甯�/鍖�/闀�" prop="_locations"> @@ -36,12 +20,7 @@ /> </el-form-item> <el-form-item label="鍦板潃" prop="location"> - <el-input - show-word-limit - clearable - v-model="formObj.location" - placeholder="鍦板潃" - /> + <el-input show-word-limit clearable v-model="formObj.location" placeholder="鍦板潃" /> </el-form-item> <el-form-item label="缁忓害" prop="longitude"> <!-- <el-input type="number" v-model="formObj.longitude" placeholder="缁忓害" /> --> @@ -62,12 +41,7 @@ /> </el-form-item> <el-form-item label="鑱旂郴浜�" prop="contacts"> - <el-input - show-word-limit - clearable - v-model="formObj.contacts" - placeholder="鑱旂郴浜�" - /> + <el-input show-word-limit clearable v-model="formObj.contacts" placeholder="鑱旂郴浜�" /> </el-form-item> <el-form-item label="鑱旂郴鐢佃瘽" prop="contactst"> <el-input type="tel" v-model="formObj.contactst" placeholder="鑱旂郴鐢佃瘽"> @@ -80,9 +54,7 @@ </el-form-item> <el-form-item label="鐘舵��" prop="online"> <el-switch v-model="formObj.online" /> - <span style="margin-left: 16px">{{ - formObj.online ? '鍦ㄧ嚎' : '涓嬬嚎' - }}</span> + <span style="margin-left: 16px">{{ formObj.online ? '鍦ㄧ嚎' : '涓嬬嚎' }}</span> </el-form-item> <el-form-item label="缂栧彿" prop="index"> <el-input-number readonly v-model="formObj.index" :step="1" :min="0" /> @@ -92,62 +64,71 @@ </template> <script setup> -import { defineProps, defineEmits, reactive, ref, watch } from 'vue'; +import { defineProps, defineEmits, reactive, ref, watch, computed } from 'vue'; import { enumScene } from '@/enum/scene'; import { enumLocation } from '@/enum/location'; import sceneApi from '@/api/fysp/sceneApi'; const props = defineProps({ //鍦烘櫙鍩烘湰淇℃伅 - formInfo: Object, + model: { + type: Object, + default: () => { + return {}; + } + }, //鏄垱寤烘垨鑰呮洿鏂板満鏅� - create: Boolean, + create: Boolean +}); + +// 鍦烘櫙鍩烘湰淇℃伅锛屽仛鐩稿簲鐨勬暟鎹牸寮忓寲 +const formInfo = computed(() => { + return parseSceneBaseInfo(props.model); }); const emit = defineEmits(['onSubmit', 'onCancel']); -const _formInfo = ref({}); const sceneTypes = reactive(enumScene(2, false)); const locations = reactive(enumLocation(false)); const cascaderProps = reactive({ - checkStrictly: true, + checkStrictly: true }); const rules = reactive({ name: [ { required: true, message: '鍦烘櫙鍚嶇О涓嶈兘涓虹┖', - trigger: 'blur', - }, + trigger: 'blur' + } ], _typeObj: [ { required: true, message: '鍦烘櫙绫诲瀷涓嶈兘涓虹┖', - trigger: 'change', - }, + trigger: 'change' + } ], _locations: [ { required: true, message: '琛屾斂鍖哄垝涓嶈兘涓虹┖', - trigger: 'change', - }, + trigger: 'change' + } ], longitude: [ { required: true, message: '缁忓害涓嶈兘涓虹┖', - trigger: 'blur', - }, + trigger: 'blur' + } ], latitude: [ { required: true, message: '绾害涓嶈兘涓虹┖', - trigger: 'blur', - }, - ], + trigger: 'blur' + } + ] }); /** @@ -158,92 +139,80 @@ function parseSceneBaseInfo(s) { s._typeObj = { label: s.type, - value: s.typeid + '', + value: s.typeid + '' }; s._locations = []; if (s.provincecode && s.provincecode.length > 0) s._locations.push([s.provincecode, s.provincename]); - if (s.citycode && s.citycode.length > 0) - s._locations.push([s.citycode, s.cityname]); + if (s.citycode && s.citycode.length > 0) s._locations.push([s.citycode, s.cityname]); if (s.districtcode && s.districtcode.length > 0) s._locations.push([s.districtcode, s.districtname]); - if (s.towncode && s.towncode.length > 0) - s._locations.push([s.towncode, s.townname]); + if (s.towncode && s.towncode.length > 0) s._locations.push([s.towncode, s.townname]); s.online = s.extension1 != '0'; return s; } // 鍒涘缓鏂板満鏅� -function createScene(formObj, func) { +function createScene(v, success, fail) { return sceneApi - .createScene(formObj.value) + .createScene(v) .then(() => { - emit('onSubmit', formObj); + emit('onSubmit', v); + success(); }) - .finally(() => { - func(); + .catch((err) => { + fail(err); }); } // 鏇存柊鍦烘櫙 -function updateScene(formObj, func) { +function updateScene(v, success, fail) { return sceneApi - .updateScene(formObj.value) + .updateScene(v) .then(() => { - emit('onSubmit', formObj); + emit('onSubmit', v); + success(); }) - .finally(() => { - func(); + .catch((err) => { + fail(err); }); } -function submit(formObj, func) { +function submit(v, success, fail) { // 琛屾斂鍖哄垝淇℃伅濉厖 - const a = formObj.value._locations; + const a = v.value._locations; if (a[0]) { - formObj.value.provincecode = a[0][0]; - formObj.value.provincename = a[0][1]; + v.value.provincecode = a[0][0]; + v.value.provincename = a[0][1]; } if (a[1]) { - formObj.value.citycode = a[1][0]; - formObj.value.cityname = a[1][1]; + v.value.citycode = a[1][0]; + v.value.cityname = a[1][1]; } if (a[2]) { - formObj.value.districtcode = a[2][0]; - formObj.value.districtname = a[2][1]; + v.value.districtcode = a[2][0]; + v.value.districtname = a[2][1]; } if (a[3]) { - formObj.value.towncode = a[3][0]; - formObj.value.townname = a[3][1]; + v.value.towncode = a[3][0]; + v.value.townname = a[3][1]; } // 鍦烘櫙绫诲瀷淇℃伅濉厖 - const b = formObj.value._typeObj; - formObj.value.typeid = b.value; - formObj.value.type = b.label; + const b = v.value._typeObj; + v.value.typeid = b.value; + v.value.type = b.label; // 鏄惁鍦ㄧ嚎淇℃伅濉厖 - formObj.value.online - ? (formObj.value.extension1 = '1') - : (formObj.value.extension1 = '0'); + v.value.online ? (v.value.extension1 = '1') : (v.value.extension1 = '0'); - formObj.value.updatedate = new Date().toISOString(); + v.value.updatedate = new Date().toISOString(); - emit('onSubmit', formObj); - - return props.create ? createScene(formObj, func) : updateScene(formObj, func); + return props.create ? createScene(v.value, success, fail) : updateScene(v.value, success, fail); } function cancel() { emit('onCancel'); } - -// 鐩戝惉浼犲叆鐨勫満鏅熀鏈俊鎭紝鍋氱浉搴旂殑鏁版嵁鏍煎紡鍖� -watch( - () => props.formInfo, - (nValue) => { - _formInfo.value = parseSceneBaseInfo(nValue); - } -); </script> <style scoped></style> diff --git a/src/views/baseinfo/fysp/scene/SceneEdit.vue b/src/views/baseinfo/fysp/scene/SceneEdit.vue index 429cc87..2261a8b 100644 --- a/src/views/baseinfo/fysp/scene/SceneEdit.vue +++ b/src/views/baseinfo/fysp/scene/SceneEdit.vue @@ -15,7 +15,7 @@ <div class="sub-title">鍩烘湰淇℃伅</div> <el-row> <FormCol> - <CompSceneBaseInfo :form-info="formScene" /> + <CompSceneBaseInfo :model="formScene" /> </FormCol> </el-row> <template v-if="formScene.typeid == 1"> diff --git a/src/views/fysp/evaluation/components/precheck/CompCheckArea.vue b/src/views/fysp/evaluation/components/precheck/CompCheckArea.vue index 2d6ac12..171acd3 100644 --- a/src/views/fysp/evaluation/components/precheck/CompCheckArea.vue +++ b/src/views/fysp/evaluation/components/precheck/CompCheckArea.vue @@ -6,7 +6,6 @@ </template> <FYForm ref="formRef" - :form-info="evaConditon" :rules="evaConditionRules" :showButtons="false" @submit="nextStep" @@ -63,8 +62,6 @@ data() { return { loading: false, - // 璇勪及浠诲姟鑼冨洿 - evaConditon: {}, evaConditionRules: { time: [ { @@ -78,8 +75,8 @@ }, methods: { setOptions(param) { - this.evaConditon._locations = param.locations; - this.evaConditon._scenetype = param.scenetype; + this.$refs.formRef.formObj._locations = param.locations; + this.$refs.formRef.formObj._scenetype = param.scenetype; }, submit() { this.$refs.formRef.onSubmit(false); diff --git a/src/views/fytz/user/UserEdit.vue b/src/views/fytz/user/UserEdit.vue index 60e1399..9731d0d 100644 --- a/src/views/fytz/user/UserEdit.vue +++ b/src/views/fytz/user/UserEdit.vue @@ -9,7 +9,7 @@ <el-tab-pane label="鍩烘湰淇℃伅" name="first"> <div class="sub-title">鐢ㄦ埛淇℃伅</div> <FormCol> - <CompUserInfo :form-info="formUser" /> + <CompUserInfo :model="formUser" /> </FormCol> <el-divider /> <div class="sub-title">鐢ㄦ埛淇℃伅琛�</div> diff --git a/src/views/fytz/user/UserInfo.vue b/src/views/fytz/user/UserInfo.vue index 72b8dd9..759ad03 100644 --- a/src/views/fytz/user/UserInfo.vue +++ b/src/views/fytz/user/UserInfo.vue @@ -108,7 +108,7 @@ </el-table-column> </template> </FYTable> - <CompUserInfoAddDrawer v-model:drawer="drawer"></CompUserInfoAddDrawer> + <CompUserInfoAddDrawer v-model="drawer"></CompUserInfoAddDrawer> </template> <script> diff --git a/src/views/fytz/user/components/CompUserInfo.vue b/src/views/fytz/user/components/CompUserInfo.vue index cb70f52..d782e78 100644 --- a/src/views/fytz/user/components/CompUserInfo.vue +++ b/src/views/fytz/user/components/CompUserInfo.vue @@ -1,14 +1,13 @@ <template> <FYForm - :form-info="_formInfo" + :form-info="formInfo" :rules="rules" :doClear="active" :useCancel="create" :useReset="!create" - :clearAftSubmit="create" - v-model:is-edit="_edit" + @updateEdit="(v) => $emit('updateEdit', v)" @submit="submit" - @cancel="cancel" + @cancel="$emit('onCancel')" > <template #form-item="{ formObj }"> <!-- <el-form-item label="澶村儚url" prop="HeadIconUrl"> @@ -85,15 +84,19 @@ </template> <script setup> -import { defineProps, defineEmits, reactive, ref, watch } from 'vue'; +import { defineProps, defineEmits, reactive, ref, watch, computed } from 'vue'; import { getSceneName } from '@/enum/scene'; import userApi from '@/api/fytz/userApi'; import { useMessageBoxTip } from '@/composables/messageBox'; const props = defineProps({ //鍩烘湰淇℃伅 - formInfo: Object, - isEdit: Boolean, + model: { + type: Object, + default: () => { + return { isenable: true }; + } + }, create: { type: Boolean, default: false @@ -104,10 +107,12 @@ } }); -const emit = defineEmits(['onSubmit', 'onCancel', 'update:isEdit']); +const formInfo = computed(() => { + return parseUserInfo(props.model); +}); -const _formInfo = ref({ isenable: true }); -const _edit = ref(false); +const emit = defineEmits(['onSubmit', 'onCancel', 'updateEdit']); + const rules = reactive({ acountname: [ { @@ -122,7 +127,7 @@ message: '鐢ㄦ埛鏄电О涓嶈兘涓虹┖', trigger: 'blur' } - ], + ] // password: [ // { // required: props.create, @@ -134,38 +139,42 @@ // 鐢ㄦ埛鍩烘湰淇℃伅鏍煎紡鍖� function parseUserInfo(s) { - s._usertype = { - label: s.usertype, - value: s.usertypeid + '' - }; + if (s.usertype && s.usertypeid) { + s._usertype = { + label: s.usertype, + value: s.usertypeid + '' + }; + } - s._scenetype = getSceneName(s.extension2, 1); + if (s.extension2) { + s._scenetype = getSceneName(s.extension2, 1); + } s._locations = {}; return s; } -function parseUserInfoReverse(formObj) { +function parseUserInfoReverse(v) { // 琛屾斂鍖哄垝淇℃伅濉厖 - const a = formObj.value._locations; - formObj.value.extension1 = a.dName; + const a = v._locations; + v.extension1 = a.dName; // 鐢ㄦ埛绫诲瀷淇℃伅濉厖 - const b = formObj.value._usertype; - formObj.value.usertypeid = b.value; - formObj.value.usertype = b.label; + const b = v._usertype; + v.usertypeid = b.value; + v.usertype = b.label; // 鍦烘櫙绫诲瀷淇℃伅濉厖 - const c = formObj.value._scenetype; - formObj.value.extension2 = c.value; + const c = v._scenetype; + v.extension2 = c.value; - return formObj; + return v; } -function createUser(formObj, success, fail) { - const l = formObj.value._locations; +function createUser(v, success, fail) { + const l = v._locations; const params = { - userInfo: formObj.value, + userInfo: v, baseInfo: { biProvinceCode: l.pCode, biProvinceName: l.pName, @@ -176,7 +185,7 @@ biTownCode: l.tCode, biTownName: l.tName, biAreaCode: l.aCode, - biArea: l.aName, + biArea: l.aName // biManagementCompanyId: // biManagementCompany: // biContact @@ -195,11 +204,11 @@ }); } -function updateUser(formObj, success, fail) { +function updateUser(v, success, fail) { return userApi - .updateUserInfo(formObj.value) + .updateUserInfo(v) .then(() => { - emit('onSubmit', formObj); + emit('onSubmit', v); if (success) success(); }) .catch((err) => { @@ -207,39 +216,18 @@ }); } -function submit(formObj, success, fail) { - parseUserInfoReverse(formObj); +function submit(v, success, fail) { + parseUserInfoReverse(v.value); - return props.create ? createUser(formObj, success, fail) : updateUser(formObj, success, fail); + return props.create ? createUser(v.value, success, fail) : updateUser(v.value, success, fail); + // parseUserInfoReverse(props.formInfo); + + // return props.create + // ? createUser(props.formInfo, success, fail) + // : updateUser(props.formInfo, success, fail); } - -function cancel() { - emit('onCancel'); -} - -watch( - () => props.formInfo, - (nValue) => { - _formInfo.value = parseUserInfo(nValue); - } -); - -// watch( -// () => props.create, -// (nValue) => { -// if (nValue) { - -// } -// }, -// {immediate:true} -// ); - -watch(_edit, (nValue) => { - emit('update:isEdit', nValue); -}); // 閲嶇疆瀵嗙爜 - const pwLoading = ref(false); function onResetPw() { @@ -248,7 +236,7 @@ confirmTitle: '閲嶇疆瀵嗙爜', onConfirm: async () => { pwLoading.value = true; - return userApi.resetPassword(props.formInfo.guid).finally(() => { + return userApi.resetPassword(formInfo.value.guid).finally(() => { pwLoading.value = false; }); } diff --git a/src/views/fytz/user/components/CompUserInfoAddDrawer.vue b/src/views/fytz/user/components/CompUserInfoAddDrawer.vue index fc0f3d1..ef4039c 100644 --- a/src/views/fytz/user/components/CompUserInfoAddDrawer.vue +++ b/src/views/fytz/user/components/CompUserInfoAddDrawer.vue @@ -1,16 +1,18 @@ <template> <el-drawer - v-model="drawer_" title="鏂板鐢ㄦ埛" direction="rtl" + :model-value="modelValue" + @open="updateDrawer(true)" + @close="updateDrawer(false)" :before-close="onDrawerClose" > <CompUserInfo :create="true" - :active="drawer" - v-model:is-edit="drawerEdit" - @on-submit="onDrawerSubmit" - @on-cancel="onDrawerCancel" + :active="modelValue" + @updateEdit="(v) => (drawerEdit = v)" + @on-submit="updateDrawer(false)" + @on-cancel="updateDrawer(false)" ></CompUserInfo> </el-drawer> </template> @@ -21,26 +23,16 @@ export default { components: { CompUserInfo }, - props: ['drawer'], - emits: ['update:drawer'], + props: ['modelValue'], + emits: ['update:modelValue'], data() { return { - drawer_: this.drawer, - drawerEdit: false, + drawerEdit: false }; }, - watch: { - drawer(nValue) { - this.drawer_ = nValue; - }, - drawer_(nValue) { - this.$emit('update:drawer', nValue); - }, - }, methods: { - onDrawerSubmit() { - // 鍏抽棴寮瑰嚭妗� - this.drawer_ = false; + updateDrawer(status) { + this.$emit('update:modelValue', status); }, onDrawerClose(done) { if (this.drawerEdit) { @@ -50,19 +42,13 @@ confirmTitle: '鍙栨秷', onConfirm: () => { done(); - }, + } }); } else { // 鐩存帴鍏抽棴 done(); } }, - onDrawerCancel() { - // this.onDrawerClose(() => { - // this.drawer_ = false; - // }); - this.drawer_ = false; - }, - }, + } }; </script> -- Gitblit v1.9.3