同步6/16

2026-06-01 18:12:58 +08:00
parent 38274ab612
commit 50e7b14fd6
183 changed files with 8956 additions and 4803 deletions
--- a/src/views/system/house/components/building.vue
+++ b/src/views/system/house/components/building.vue
@@ -6,7 +6,7 @@
        <span class="pointer" @click="handleAddBuilding" v-hasPermi="['system:building:add']">+增加楼栋</span>
      </div>
    </div>
-    <ul>
+    <ul class="flex-1 overflow-y-auto overflow-x-hidden">
      <li
        v-for="(item, index) in currentBuildingInfoList"
        :class="{
@@ -14,7 +14,7 @@
        }"
        :key="index"
      >
-        <div class="buildingname" @click="switchBuilding(item.id ?? null)">{{ item.buildingName ?? '' }}</div>
+        <div class="buildingname" :title="item.buildingName ?? ''" @click="switchBuilding(item.id ?? null)">{{ item.buildingName ?? '' }}</div>
        <div class="buildactions flex align-center justify-around">
          <el-icon class="pointer hover-color-blue" @click="editBuilding(item.id)" v-hasPermi="['system:building:edit']"><Setting /></el-icon>
          <el-icon class="pointer hover-color-red" @click="deleteBuilding(item.id)" v-hasPermi="['system:building:remove']"><Delete /></el-icon>
@@ -67,6 +67,9 @@ $primary_color: #1978fe;
  border-radius: 2px;
  color: rgba(0, 0, 0, 1);
  margin-right: 10px;
+
+  display: flex;
+  flex-direction: column;
  .buildingheader {
    height: 60px;
    line-height: 60px;
@@ -78,6 +81,9 @@ $primary_color: #1978fe;
  }

  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
    height: 45px;
    line-height: 45px;
    color: rgba(16, 16, 16, 1);
@@ -87,15 +93,17 @@ $primary_color: #1978fe;
      background-color: #1978fe0c;
    }
    .buildingname {
-      text-align: center;
-      width: 100%;
-      padding: 0 20px 0 0;
+      padding: 0 10px 0 5px;
      cursor: pointer;
+      flex: 1;
+      max-width: 175px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+
+      text-align: right;
    }
    .buildactions {
-      position: absolute;
-      right: 0;
-      top: 0;
      width: 75px;
      font-size: 15px;
      padding: 15px 0;
--- a/src/views/system/house/components/components/houseItem.vue
+++ b/src/views/system/house/components/components/houseItem.vue
@@ -1,46 +1,88 @@
 <template>
  <div class="house-list">
-    <div class="house flex align-center" @contextmenu="contextMenu.open($event, house.houseId)" v-for="house in list.houses" :key="house.houseId">
-      <div class="flex flex-center">
-        <el-checkbox :label="house.houseNo" :value="house.houseId" />
-        <div class="calp" @click="handleCalp($event, house.houseId)">···</div>
+    <div class="house flex align-center" @contextmenu="handleContextMenu($event, house.houseId)" v-for="house in sortedHouses" :key="house.houseId">
+      <div class="w-full flex items-center justify-between">
+        <el-checkbox :title="house.houseNo" :label="house.houseNo" :value="house.houseId" />
+        <div class="circlebox" @click="handleContextMenu($event, house.houseId)">
+          <div class="circle"></div>
+          <div class="circle"></div>
+          <div class="circle"></div>
+        </div>
      </div>
    </div>
-    <!-- 右键菜单组件 -->
-    <ContextMenu ref="contextMenu" :menu="menuList" @select="handleSelect" />
  </div>
 </template>

 <script setup lang="ts">
-import ContextMenu from '@/components/ContextMenu/index.vue';
-import { ref } from 'vue';
-import type { FloorsType, HouseType } from '@/api/system/house/type';
+import type { FloorsType } from '@/api/system/house/type';
 const props = defineProps<{
  unit: FloorsType[];
  fIdx: number | string;
-  menuList: {
-    label: string;
-    value: string;
-  }[];
 }>();
-const list = props.unit.find((item) => item.floorNo === props.fIdx) ?? { floorNo: '', houses: [] };
-// 菜单ref
-const contextMenu = ref();
-// 点击事件
-const handleSelect = (data: { type: string; value: string }) => {
-  emit('contextmenufun', data);
+
+// 使用 computed 获取当前楼层数据，确保响应式
+const currentFloor = computed(() => {
+  return props.unit.find((item) => item.floorNo === props.fIdx) ?? { floorNo: '', houses: [] };
+});
+
+// 存储排序后的结果
+const sortedHouses = ref(currentFloor.value.houses);
+
+// 轻量级比较函数：优先尝试数字比较，失败则使用 localeCompare
+const compareHouseNo = (a: string, b: string) => {
+  // 如果都是纯数字，直接数字比较最快
+  const numA = Number(a);
+  const numB = Number(b);
+  if (!isNaN(numA) && !isNaN(numB)) {
+    return numA - numB;
+  }
+  // 否则使用自然排序
+  return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
 };

+// 监听数据源变化，仅当 houses 数组引用或内容变化时重新排序
+watch(
+  () => currentFloor.value.houses,
+  (newHouses) => {
+    // 创建副本并排序
+    sortedHouses.value = [...newHouses].sort((a, b) => compareHouseNo(a.houseNo, b.houseNo));
+  },
+  { immediate: true, deep: false } // deep: false 因为我们要替换整个数组引用
+);
+
 const emit = defineEmits<{
  contextmenufun: [value: { type: string; value: string }];
+  // 新增事件：通知父组件打开菜单
+  openMenu: [data: { event: MouseEvent; houseId: string }];
 }>();

-const handleCalp = (event: MouseEvent, houseid: string) => {
-  contextMenu.value.open(event, houseid);
+// 处理右键点击，向上传递事件对象和ID
+const handleContextMenu = (event: MouseEvent, houseId: string) => {
+  event.preventDefault(); // 阻止默认浏览器菜单
+  emit('openMenu', { event, houseId });
 };
 </script>

 <style scoped lang="scss">
+.circlebox {
+  width: 14px;
+  height: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  $circleSize: 3px;
+  margin-left: 10px;
+  cursor: pointer;
+  .circle {
+    width: $circleSize;
+    height: $circleSize;
+    border-radius: 50%;
+    background-color: #666666;
+  }
+}
+
 .house-list {
  display: flex;
  flex-wrap: wrap;
@@ -52,13 +94,24 @@ const handleCalp = (event: MouseEvent, houseid: string) => {

 .house {
  min-width: 100px;
+
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 5px;
-  padding-left: 10px;
+  padding: 0 10px;
+
+  &:deep(.el-checkbox) {
+    max-width: 200px;
+    .el-checkbox__label {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
 }
+
 .house:hover {
  background: #e8f3ff;
  border-color: #409eff;
@@ -75,19 +128,4 @@ const handleCalp = (event: MouseEvent, houseid: string) => {
  top: 0;
  left: 0;
 }
-
-.calp {
-  margin-left: 10px;
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 10px;
-  letter-spacing: -3px;
-  transform: rotateZ(90deg) scale(0.8);
-  cursor: pointer;
-}
 </style>
--- a/src/views/system/house/components/components/table.vue
+++ b/src/views/system/house/components/components/table.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="h-full">
-    <div class="TableBox p-5 h-full" v-if="houseStore.currentHouseInfoList !== null">
+  <div class="tablebox1 h-full flex-1">
+    <div class="TableBox p-5" v-if="houseStore.currentHouseInfoList !== null">
      <el-checkbox-group @change="handleChangeCheckhouses" v-model="houseStore.checkoutHouses">
        <el-table border :data="houseStore.currentFloorInfoList">
          <el-table-column align="center" fixed label="楼层\单元" max-width="100">
@@ -15,18 +15,28 @@
            :key="index"
          >
            <template #header>
-              <span>{{ unit.unitNoName }}</span>
-              <el-button link type="primary" icon="Edit" @click="HandleEditUnit(unit)"></el-button>
-              <el-button link type="danger" icon="Delete" style="margin-left: 0" @click="HandleDeleteUnit(unit)"></el-button>
+              <div class="flex align-center justify-center">
+                <div class="houseName" :title="unit.unitNoName">{{ unit.unitNoName }}</div>
+                <el-button v-hasPermi="['unitNo:unitNo:edit']" link type="primary" icon="Edit" @click="HandleEditUnit(unit)"></el-button>
+                <el-button
+                  v-hasPermi="['unitNo:unitNo:remove']"
+                  link
+                  type="danger"
+                  icon="Delete"
+                  style="margin-left: 0"
+                  @click="HandleDeleteUnit(unit)"
+                ></el-button>
+              </div>
            </template>
            <template #default="{ row }">
-              <houseItem @contextmenufun="contextMenuFun" :menu-list="menutlist" :unit="unit.floors" :f-idx="row"></houseItem>
+              <houseItem @openMenu="handleOpenMenu" :unit="unit.floors" :f-idx="row"></houseItem>
            </template>
          </el-table-column>
        </el-table>
      </el-checkbox-group>
    </div>
    <div v-else class="nodata">暂无房屋</div>
+    <ContextMenu ref="contextMenuRef" :menu="menutlist" @select="contextMenuFun" />
  </div>
 </template>

@@ -36,6 +46,8 @@ import houseItem from './houseItem.vue';
 import { useHouseStore } from '@/store/modules/house';
 import { checkPermi } from '@/utils/permission';

+import ContextMenu from '@/components/ContextMenu/index.vue';
+
 const houseStore = useHouseStore();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;

@@ -57,6 +69,17 @@ if (checkPermi(['system:house:ByIdList'])) {
 if (checkPermi(['system:house:remove'])) {
  menutlist.push({ label: '删除', value: 'delete' });
 }
+
+const contextMenuRef = ref();
+
+// 处理子组件抛出的打开菜单事件
+const handleOpenMenu = ({ event, houseId }: { event: MouseEvent; houseId: string }) => {
+  // 调用唯一 ContextMenu 实例的 open 方法
+  // 注意：这里需要确保 ContextMenu 组件暴露了 open 方法，或者我们修改 ContextMenu 为受控模式
+  if (contextMenuRef.value) {
+    contextMenuRef.value.open(event, houseId);
+  }
+};
 function handleChangeCheckhouses(val: string[]) {
  houseStore.checkoutHousesFun([]);
  houseStore.checkoutHousesFun(val);
@@ -104,9 +127,35 @@ function HandleDeleteUnit(unit) {
 </script>

 <style scoped lang="scss">
-.TableBox {
-  .el-table {
-    height: calc(100% - 500px);
+.tablebox1 {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  .TableBox {
+    height: 100%;
+    .el-checkbox-group {
+      height: 100%;
+      overflow-y: auto;
+    }
+    .el-table {
+      width: 100%;
+      height: 100%;
+    }
+
+    .houseName {
+      height: 40px;
+      line-height: 40px;
+      font-weight: 600;
+      max-width: 300px;
+      text-align: left;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+
+      cursor: default;
+    }
  }
 }
 .nodata {
--- a/src/views/system/house/components/unit.vue
+++ b/src/views/system/house/components/unit.vue
@@ -15,31 +15,24 @@
          >楼栋结构：{{ houseStore.currentBuildingInfo?.buildStructure ? `${houseStore.currentBuildingInfo?.buildStructure}(m)` : '--' }}
        </span>
      </div> -->
-      <div>
+      <div style="text-wrap: nowrap">
        <span class="text-size-16px text-color-black text-widget-bold mr-30px">
          <strong>{{ houseStore.currentBuildingInfo?.buildingName }}</strong>
        </span>
        <span class="mr-15px"
-          >楼栋朝向:{{ houseStore.currentBuildingInfo?.buildToward ? `${houseStore.currentBuildingInfo?.buildToward}` : '--' }}</span
+          >楼栋朝向:{{ houseStore.currentBuildingInfo?.buildToward ? `${houseStore.currentBuildingInfo?.buildToward}` : ' --' }}</span
        >
-        <span class="mr-15px">楼高：{{ houseStore.currentBuildingInfo?.buildTall ? `${houseStore.currentBuildingInfo?.buildTall}(m)` : '--' }}</span>
+        <span class="mr-15px">楼高:{{ houseStore.currentBuildingInfo?.buildTall ? `${houseStore.currentBuildingInfo?.buildTall}(m)` : ' --' }}</span>
        <span class="mr-15px"
-          >楼栋结构：{{ houseStore.currentBuildingInfo?.buildStructure ? `${houseStore.currentBuildingInfo?.buildStructure}` : '--' }}
+          >楼栋结构:{{ houseStore.currentBuildingInfo?.buildStructure ? `${houseStore.currentBuildingInfo?.buildStructure}` : ' --' }}
        </span>
      </div>
-      <div class="rightActions flex flex-items-center">
-        <span class="mr-20px" @click="handleAddUnit" v-hasPermi="['system:house:add']">+添加单元</span>
+      <div style="text-wrap: nowrap" class="rightActions flex flex-items-center">
+        <span class="mr-20px" @click="handleAddUnit" v-hasPermi="['unitNo:unitNo: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"
-        >
+        <span @click="deleteAllhouse" v-hasPermi="['system:house:remove']">批量删除房屋</span>
+        <el-select clearable @clear="handleClearUse" @change="handleChangeUse" v-model="houseUse" placeholder="筛选房屋类型" class="selectbox">
          <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">
@@ -49,9 +42,9 @@
        </div>
      </div>
    </div>
-    <div class="UnitBody">
-      <TableUnit @edit-unit="handleEditUnit" @delete-unit="handleDelete"></TableUnit>
-    </div>
+    <!-- <div class="UnitBody"> -->
+    <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">
@@ -79,7 +72,7 @@
 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 { listHouseUseType, listHouseUseType_add_house } from '@/api/system/houseUse';
 import { addUnitNo, delUnitNo, getUnitNo, updateUnitNo } from '@/api/system/houseUnit';
 import { UnitNoVO } from '@/api/system/houseUnit/type';

@@ -96,11 +89,8 @@ const houseUseTypeList = ref([]);
 * 获取房屋 类型
 */
 function init() {
-  listHouseUseType({
-    pageNum: 1,
-    pageSize: 99999
-  }).then((res) => {
-    houseUseTypeList.value = res.rows;
+  listHouseUseType_add_house().then((res) => {
+    houseUseTypeList.value = res.data;
  });
 }
 init();
@@ -228,6 +218,8 @@ $primary_color: #1978fe;
  display: flex;
  flex-direction: column;
  overflow: hidden;
+  min-height: 0;
+
  .Unit_top {
    padding: 20px;
    height: 60px;
@@ -238,15 +230,24 @@ $primary_color: #1978fe;
      span {
        cursor: pointer;
      }
-
+      .selectbox {
+        width: 150px;
+        margin: 0 10px;
+        @media (max-width: 1550px) {
+          width: 120px;
+        }
+        @media (max-width: 1400px) {
+          width: 80px;
+        }
+      }
      .searchbox {
        .searchinput {
          width: 250px;
-          @media (max-width: 1200px) {
-            width: 50px;
+          @media (max-width: 1550px) {
+            width: 130px;
          }
          @media (max-width: 1400px) {
-            width: 130px;
+            width: 50px;
          }
        }
      }
@@ -256,6 +257,7 @@ $primary_color: #1978fe;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
+    display: flex;
  }
 }
 </style>