From 3959e507bfa99cc4ced2a6f48f9b4358334d34c4 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 19 十二月 2023 17:34:45 +0800
Subject: [PATCH] 1. 调试表单选项组件的双向绑定逻辑
---
src/views/fytz/user/components/CompUserInfo.vue | 214 ++++++++++++++++++++++++++++-------------------------
1 files changed, 114 insertions(+), 100 deletions(-)
diff --git a/src/views/fytz/user/components/CompUserInfo.vue b/src/views/fytz/user/components/CompUserInfo.vue
index e8be54c..9ee0edf 100644
--- a/src/views/fytz/user/components/CompUserInfo.vue
+++ b/src/views/fytz/user/components/CompUserInfo.vue
@@ -2,7 +2,10 @@
<FYForm
:form-info="_formInfo"
:rules="rules"
- :reset="active"
+ :doClear="active"
+ :useCancel="create"
+ :useReset="!create"
+ :clearAftSubmit="create"
v-model:is-edit="_edit"
@submit="submit"
@cancel="cancel"
@@ -33,13 +36,12 @@
</el-col>
<el-col :span="6" v-if="!create">
<el-row justify="end">
- <el-button type="danger" @click="onResetPw" :loading="pwLoading"
- >閲嶇疆瀵嗙爜</el-button
- >
+ <el-button type="danger" @click="onResetPw" :loading="pwLoading">閲嶇疆瀵嗙爜</el-button>
</el-row>
</el-col>
</el-form-item>
<FYOptionUserType
+ prop="_usertype"
:allOption="false"
:initValue="false"
v-model:value="formObj._usertype"
@@ -54,32 +56,25 @@
</el-form-item> -->
<el-form-item label="鏄惁鍙敤" prop="isenable">
<el-switch v-model="formObj.isenable" />
- <span style="margin-left: 16px">{{
- formObj.isenable ? '鍙敤' : '涓嶅彲鐢�'
- }}</span>
+ <span style="margin-left: 16px">{{ formObj.isenable ? '鍙敤' : '涓嶅彲鐢�' }}</span>
</el-form-item>
<el-form-item label="宸ュ彿" prop="workno">
<el-input clearable v-model="formObj.workno" placeholder="宸ュ彿" />
</el-form-item>
<el-form-item label="鎵嬫満" prop="telephone">
- <el-input
- clearable
- type="tel"
- v-model="formObj.telephone"
- placeholder="鎵嬫満"
- />
+ <el-input clearable type="tel" v-model="formObj.telephone" placeholder="鎵嬫満" />
</el-form-item>
- <!-- <el-form-item label="鐪�/甯�/鍖�/闀�" prop="_locations">
- <el-cascader
- v-model="formObj._locations"
- :options="locations"
- placeholder="鐪�/甯�/鍖�/闀�"
- :props="locationsProps"
- style="width: 280px"
- :disabled="!create"
- />
- </el-form-item> -->
+ <FYOptionLocation
+ v-if="create"
+ prop="_locations"
+ :allOption="false"
+ :level="4"
+ :checkStrictly="false"
+ :initValue="false"
+ v-model:value="formObj._locations"
+ ></FYOptionLocation>
<FYOptionScene
+ prop="_scenetype"
:allOption="false"
:type="1"
:initValue="false"
@@ -92,8 +87,8 @@
<script setup>
import { defineProps, defineEmits, reactive, ref, watch } from 'vue';
import { getSceneName } from '@/enum/scene';
-import { enumLocation } from '@/enum/location';
import userApi from '@/api/fytz/userApi';
+import { useMessageBoxTip } from '@/composables/messageBox';
const props = defineProps({
//鍩烘湰淇℃伅
@@ -101,36 +96,32 @@
isEdit: Boolean,
create: {
type: Boolean,
- default: false,
+ default: false
},
active: {
type: Boolean,
- default: false,
- },
+ default: false
+ }
});
const emit = defineEmits(['onSubmit', 'onCancel', 'update:isEdit']);
-const _formInfo = ref();
+const _formInfo = ref({ isenable: true });
const _edit = ref(false);
-const locations = enumLocation(false);
-const locationsProps = reactive({
- checkStrictly: true,
-});
const rules = reactive({
acountname: [
{
required: true,
message: '璐︽埛鍚嶄笉鑳戒负绌�',
- trigger: 'blur',
- },
+ trigger: 'blur'
+ }
],
realname: [
{
required: true,
message: '鐢ㄦ埛鏄电О涓嶈兘涓虹┖',
- trigger: 'blur',
- },
+ trigger: 'blur'
+ }
],
// password: [
// {
@@ -139,85 +130,33 @@
// trigger: 'blur',
// },
// ],
- _usertype: [
- {
- required: true,
- message: '鐢ㄦ埛绫诲瀷涓嶈兘涓虹┖',
- trigger: 'change',
- },
- ],
- _locations: [
- {
- required: props.create,
- message: '鐪�/甯�/鍖�/闀囦笉鑳戒负绌�',
- trigger: 'change',
- },
- ],
- _scenetype: [
- {
- required: true,
- message: '鍦烘櫙绫诲瀷涓嶈兘涓虹┖',
- trigger: 'change',
- },
- ],
});
// 鐢ㄦ埛鍩烘湰淇℃伅鏍煎紡鍖�
function parseUserInfo(s) {
s._usertype = {
label: s.usertype,
- value: s.usertypeid + '',
+ value: s.usertypeid + ''
};
s._scenetype = getSceneName(s.extension2, 1);
- s._locations = [];
+ s._locations = {};
return s;
}
-function createUser(formObj, func) {
- return userApi
- .createUser(formObj.value)
- .then(() => {
- emit('onSubmit', formObj);
- })
- .finally(() => {
- func();
- });
-}
-
-function updateUser(formObj, func) {
- return userApi
- .updateUserInfo(formObj.value)
- .then(() => {
- emit('onSubmit', formObj);
- })
- .finally(() => {
- func();
- });
-}
-
-function submit(formObj, func) {
+function parseUserInfoReverse(formObj) {
// 琛屾斂鍖哄垝淇℃伅濉厖
const a = formObj.value._locations;
- if (a[0]) {
- formObj.value.provincecode = a[0][0];
- formObj.value.provincename = a[0][1];
- }
- if (a[1]) {
- formObj.value.citycode = a[1][0];
- formObj.value.cityname = a[1][1];
- }
- if (a[2]) {
- formObj.value.districtcode = a[2][0];
- formObj.value.extension1 = a[2][1];
- }
- if (a[3]) {
- formObj.value.towncode = a[3][0];
- formObj.value.townname = a[3][1];
- }
-
+ formObj.value.provincecode = a.pCode;
+ formObj.value.provincename = a.pName;
+ formObj.value.citycode = a.cCode;
+ formObj.value.cityname = a.cName;
+ formObj.value.districtcode = a.dCode;
+ formObj.value.extension1 = a.dName;
+ formObj.value.towncode = a.tCode;
+ formObj.value.townname = a.tName;
// 鐢ㄦ埛绫诲瀷淇℃伅濉厖
const b = formObj.value._usertype;
formObj.value.usertypeid = b.value;
@@ -227,7 +166,57 @@
const c = formObj.value._scenetype;
formObj.value.extension2 = c.value;
- return props.create ? createUser(formObj, func) : updateUser(formObj, func);
+ return formObj;
+}
+
+function createUser(formObj, success, fail) {
+ const params = {
+ userInfo: formObj.value,
+ baseInfo: {
+ biProvinceCode: formObj.value.provincecode,
+ biProvinceName: formObj.value.provincename,
+ biCityCode: formObj.value.citycode,
+ biCityName: formObj.value.cityname,
+ biDistrictCode: formObj.value.districtcode,
+ biDistrictName: formObj.value.extension1,
+ biTownCode: formObj.value.towncode,
+ biTownName: formObj.value.townname
+ // biAreaCode
+ // biArea
+ // biManagementCompanyId
+ // biManagementCompany
+ // biContact
+ // biTelephone
+ // biAddress
+ }
+ };
+ return userApi
+ .createUser(params)
+ .then(() => {
+ emit('onSubmit', params);
+ success();
+ })
+ .catch((err) => {
+ fail(err);
+ });
+}
+
+function updateUser(formObj, success, fail) {
+ return userApi
+ .updateUserInfo(formObj.value)
+ .then(() => {
+ emit('onSubmit', formObj);
+ if (success) success();
+ })
+ .catch((err) => {
+ if (fail) fail(err);
+ });
+}
+
+function submit(formObj, success, fail) {
+ parseUserInfoReverse(formObj);
+
+ return props.create ? createUser(formObj, success, fail) : updateUser(formObj, success, fail);
}
function cancel() {
@@ -241,9 +230,34 @@
}
);
+// watch(
+// () => props.create,
+// (nValue) => {
+// if (nValue) {
+
+// }
+// },
+// {immediate:true}
+// );
+
watch(_edit, (nValue) => {
emit('update:isEdit', nValue);
});
+// 閲嶇疆瀵嗙爜
+
const pwLoading = ref(false);
+
+function onResetPw() {
+ useMessageBoxTip({
+ confirmMsg: '鏄惁閲嶇疆璇ュ満鏅瘑鐮侊紵',
+ confirmTitle: '閲嶇疆瀵嗙爜',
+ onConfirm: async () => {
+ pwLoading.value = true;
+ return userApi.resetPassword(props.formInfo.guid).finally(() => {
+ pwLoading.value = false;
+ });
+ }
+ });
+}
</script>
--
Gitblit v1.9.3