房屋详情，单元变更

src/views/system/house/components/unit.vue

@@ -28,9 +28,20 @@
         </span>
       </div>
       <div class="rightActions flex flex-items-center">
+        <span class="mr-20px" @click="handleAddUnit" v-hasPermi="['system:house:add']">+添加单元</span>
         <span class="mr-20px" @click="handleAddHouse" v-hasPermi="['system:house:add']">+增加房屋</span>
         <!-- <span class="mr-20px">收费标准设置</span> -->
         <span @click="deleteAllhouse" v-hasPermi="['system:house:remove']">删除</span>
+        <el-select
+          clearable
+          @clear="handleClearUse"
+          @change="handleChangeUse"
+          v-model="houseUse"
+          placeholder="筛选房屋类型"
+          style="width: 180px; margin: 0 10px"
+        >
+          <el-option v-for="item in houseUseTypeList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
         <div class="searchbox flex flex-items-center">
           <el-input v-model="housename" class="searchinput" placeholder="请输入房屋号"></el-input>
           <el-button style="margin-left: 10px" type="primary" @click="handleSearchHouse">搜索</el-button>
@@ -39,8 +50,28 @@
       </div>
     </div>
     <div class="UnitBody">
-      <TableUnit></TableUnit>
+      <TableUnit @edit-unit="handleEditUnit" @delete-unit="handleDelete"></TableUnit>
     </div>
+    <!-- 添加或修改单元对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="unitNoFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="单元名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入单元名称" />
+        </el-form-item>
+        <el-form-item label="楼栋" prop="buildingId">
+          <!-- <el-input v-model="form.buildingId" placeholder="请输入楼栋" /> -->
+          <el-select v-model="form.buildingId" placeholder="请选择">
+            <el-option v-for="item in houseStore.currentBuildingInfoList" :key="item.id" :label="item.buildingName" :value="item.id" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -48,6 +79,9 @@
 import { deleteHouseApi } from '@/api/system/house';
 import TableUnit from './components/table.vue';
 import { useHouseStore } from '@/store/modules/house';
+import { listHouseUseType } from '@/api/system/houseUse';
+import { addUnitNo, delUnitNo, getUnitNo, updateUnitNo } from '@/api/system/houseUnit';
+import { UnitNoVO } from '@/api/system/houseUnit/type';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -55,20 +89,117 @@ const houseStore = useHouseStore();
 const router = useRouter();
 
 const housename = ref('');
+const houseUse = ref('');
+const houseUseTypeList = ref([]);
+
+/**
+ * 获取房屋 类型
+ */
+function init() {
+  listHouseUseType({
+    pageNum: 1,
+    pageSize: 99999
+  }).then((res) => {
+    houseUseTypeList.value = res.rows;
+  });
+}
+init();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const unitNoFormRef = ref();
+const buttonLoading = ref(false);
+const form = ref({
+  id: undefined,
+  name: undefined,
+  buildingId: undefined,
+  villageId: undefined
+});
+
+const rules = {
+  name: [{ required: true, message: '单元名称不能为空', trigger: 'blur' }],
+  buildingId: [{ required: true, message: '所属楼栋不能为空', trigger: 'blur' }]
+};
+/** 新增按钮操作 */
+const handleAddUnit = () => {
+  resetForm();
+  dialog.visible = true;
+  dialog.title = '添加单元';
+};
+/** 修改按钮操作 */
+const handleEditUnit = async (id: string) => {
+  resetForm();
+  const res = await getUnitNo(id);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = '修改单元';
+};
+/** 删除按钮操作 */
+const handleDelete = async (id: string) => {
+  await proxy?.$modal.confirm('是否确认删除该单元？');
+  await delUnitNo(id);
+  proxy?.$modal.msgSuccess('删除成功');
+  // await getList();
+  houseStore.updateCureentBuilding();
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  unitNoFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateUnitNo(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addUnitNo(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      houseStore.updateCureentBuilding();
+    }
+  });
+};
+/** 取消按钮 */
+const cancel = () => {
+  resetForm();
+  dialog.visible = false;
+};
+/** 表单重置 */
+const resetForm = () => {
+  form.value = { id: undefined, name: undefined, buildingId: undefined, villageId: undefined };
+  unitNoFormRef.value?.resetFields();
+};
+/**
+ * 改变房屋类型
+ * @param id
+ */
+function handleChangeUse(id?: string) {
+  houseUse.value = id;
+}
+function handleClearUse() {
+  houseUse.value = '';
+  handleSearchHouse();
+}
 /** 添加房屋 */
 function handleAddHouse() {
   router.push({
     path: '/house/addHouse'
   });
 }
+
+/**
+ * 搜索 房屋
+ */
 function handleSearchHouse() {
-  if (housename.value && housename.value.trim()) {
-    houseStore.getHouseBybuildingNo(housename.value);
-  }
+  houseStore.getHouseBybuildingNo(housename.value, houseUse.value);
 }
 function reset() {
   housename.value = '';
-  houseStore.getHouseBybuildingNo(housename.value);
+  houseUse.value = '';
+  houseStore.getHouseBybuildingNo(housename.value, houseUse.value);
 }
 
 async function deleteAllhouse() {
@@ -109,7 +240,6 @@ $primary_color: #1978fe;
       }
 
       .searchbox {
-        margin-left: 30px;
         .searchinput {
           width: 250px;
           @media (max-width: 1200px) {