feat:入驻单位入驻位置修改

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

@@ -1,20 +1,21 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import {computed, ref} from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { cloneDeep, handleNode } 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 {useVbenForm} from '#/adapter/form';
 import {
   resident_unitAdd,
   resident_unitInfo,
   resident_unitUpdate,
 } from '#/api/property/resident/unit';
-import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
 
-import { modalSchema } from './data';
-import { communityTree } from '#/api/property/community';
+import {modalSchema} from './data';
+import RoomTree from "./components/room-tree.vue";
+import {message} from "ant-design-vue";
 
 const emit = defineEmits<{ reload: [] }>();
 
@@ -26,7 +27,7 @@ const title = computed(() => {
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
-    formItemClass: 'col-span-1',
+    formItemClass: 'col-span-2',
     // 默认label宽度 px
     labelWidth: 100,
     // 通用配置项 会影响到所有表单项
@@ -39,7 +40,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),
@@ -59,16 +60,16 @@ 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;
-    await initLocationOptions();
     if (isUpdate.value && id) {
       const record = await resident_unitInfo(id);
-      let roomIds=record.location.split(',')
-      await formApi.setValues({...record,
-        authTime:[record.authBegDate,record.authEndDate],
-        locations:roomIds
+      let roomIds = record.location.split(',')
+      await formApi.setValues({
+        ...record,
+        authTime: [record.authBegDate, record.authEndDate],
       });
+      checkedRoomId.value = roomIds
     }
     await markInitialized();
 
@@ -79,7 +80,11 @@ const [BasicModal, modalApi] = useVbenModal({
 async function handleConfirm() {
   try {
     modalApi.lock(true);
-    const { valid } = await formApi.validate();
+    const {valid} = await formApi.validate();
+    if (!checkedRoomId.value.length) {
+      message.error('请选择入驻位置');
+      return;
+    }
     if (!valid) {
       return;
     }
@@ -88,7 +93,7 @@ async function handleConfirm() {
 
     data.authBegDate = data.authTime[0];
     data.authEndDate = data.authTime[1];
-    data.location=data.locations.join(',')
+    data.location = checkedRoomId.value.join(',')
     await (isUpdate.value ? resident_unitUpdate(data) : resident_unitAdd(data));
     resetInitialized();
     emit('reload');
@@ -99,51 +104,26 @@ async function handleConfirm() {
     modalApi.lock(false);
   }
 }
-/**
- * 入驻位置数据
- */
-async function initLocationOptions() {
-  const locationList = await communityTree(4);
-  const splitStr = '/';
-  handleNode(locationList, 'label', splitStr, function (node: any) {
-    if (node.level != 4) {
-      node.disabled = true;
-    }
-  });
-  formApi.updateSchema([
-    {
-      componentProps: () => ({
-        class: 'w-full',
-        fieldNames: {
-          key: 'id',
-          label: 'label',
-          value: 'code',
-          children: 'children',
-        },
-        placeholder: '请选择入驻位置',
-        showSearch: true,
-        treeData: locationList,
-        treeDefaultExpandAll: true,
-        treeLine: { showLeafIcon: false },
-        // 筛选的字段
-        treeNodeFilterProp: 'label',
-        // 选中后显示在输入框的值
-        treeNodeLabelProp: 'fullName',
-        multiple:true
-      }),
-      fieldName: 'locations',
-    },
-  ]);
-}
 
 async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
 }
+
+const checkedRoomId = ref<string[]>([]);
 </script>
 
 <template>
   <BasicModal :title="title">
-    <BasicForm> </BasicForm>
+    <div class="flex  gap-[8px]">
+      <div class="w-[260px]">
+        <RoomTree
+          :checkable="true"
+          class="max-h-[calc(100vh-45vh)]"
+          v-model:checked-room-id="checkedRoomId"
+        />
+      </div>
+      <BasicForm class="flex-1"></BasicForm>
+    </div>
   </BasicModal>
 </template>