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