1、入驻人员

apps/web-antd/src/views/property/resident/person/person-modal.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import {computed, reactive, ref} from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
+import {useVbenModal} from '@vben/common-ui';
+import {$t} from '@vben/locales';
+import {cloneDeep} from '@vben/utils';
 
-import { useVbenForm } from '#/adapter/form';
-import { personAdd, personInfo, personUpdate } from '#/api/property/resident/person';
-import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import {useVbenForm} from '#/adapter/form';
+import {personAdd, personInfo, personUpdate} from '#/api/property/resident/person';
+import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
 
-import { modalSchema } from './data';
+import {modalSchema} from './data';
+import QueryUserList from './query-user-list.vue'
+import QueryUnitList from './query-unit-list.vue'
 
 const emit = defineEmits<{ reload: [] }>();
 
@@ -17,11 +19,17 @@ const isUpdate = ref(false);
 const title = computed(() => {
   return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
 });
-
+let userInfo = reactive({
+  userId: '',
+  userName: '',
+  phone: '',
+  gender: '',
+});
+let unitName = ref('');
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
-    formItemClass: 'col-span-2',
+    formItemClass: 'col-span-1',
     // 默认label宽度 px
     labelWidth: 80,
     // 通用配置项 会影响到所有表单项
@@ -34,7 +42,7 @@ const [BasicForm, formApi] = useVbenForm({
   wrapperClass: 'grid-cols-2',
 });
 
-const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
   {
     initializedGetter: defaultFormValueGetter(formApi),
     currentGetter: defaultFormValueGetter(formApi),
@@ -43,7 +51,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
 
 const [BasicModal, modalApi] = useVbenModal({
   // 在这里更改宽度
-  class: 'w-[550px]',
+  class: 'w-[70%]',
   fullscreenButton: false,
   onBeforeClose,
   onClosed: handleClosed,
@@ -54,7 +62,7 @@ const [BasicModal, modalApi] = useVbenModal({
     }
     modalApi.modalLoading(true);
 
-    const { id } = modalApi.getData() as { id?: number | string };
+    const {id} = modalApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
 
     if (isUpdate.value && id) {
@@ -70,12 +78,18 @@ const [BasicModal, modalApi] = useVbenModal({
 async function handleConfirm() {
   try {
     modalApi.lock(true);
-    const { valid } = await formApi.validate();
+    const {valid} = await formApi.validate();
     if (!valid) {
       return;
     }
     // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(await formApi.getValues());
+    let data = cloneDeep(await formApi.getValues());
+    if (!isUpdate.value) {
+      data.userName = userInfo.userName
+      data.phone = userInfo.phone
+      data.gender = userInfo.gender
+      data.unitName = unitName.value
+    }
     await (isUpdate.value ? personUpdate(data) : personAdd(data));
     resetInitialized();
     emit('reload');
@@ -91,11 +105,26 @@ async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
 }
+
+function getUserInfo(user: any) {
+  userInfo = user;
+}
+
+function getUnitInfo(unit: { name: string }) {
+  unitName.value = unit.name;
+}
 </script>
 
 <template>
   <BasicModal :title="title">
-    <BasicForm />
+    <BasicForm>
+      <template #userId="slotProps">
+        <QueryUserList @update:userInfo="getUserInfo" v-bind="slotProps" :disabled="isUpdate"/>
+      </template>
+      <template #unitId="slotProps">
+        <QueryUnitList @update:unitInfo="getUnitInfo" v-bind="slotProps" :disabled="isUpdate"/>
+      </template>
+    </BasicForm>
   </BasicModal>
 </template>