Browse Source

wanda-adm:feat > 空间表格添加分区筛选

shaun-sheep 4 years ago
parent
commit
ba9cbc7e77
1 changed files with 53 additions and 33 deletions
  1. 53 33
      src/views/maintain/space/index.vue

+ 53 - 33
src/views/maintain/space/index.vue

@@ -11,25 +11,29 @@
                 <div class="search" :class="{ 'borderBottom': activeName==='picture' }">
                     <template v-if="activeName==='table'">
                         <el-cascader clearable ref="floorCascader" placeholder="请选择建筑楼层" :options="options"
-                                    v-model="building" filterable size="small"
-                                    @change="changeCascader" style="margin-right: 12px"
-                                    ></el-cascader>
+                                     v-model="building" filterable size="small"
+                                     @change="changeCascader" style="margin-right: 12px"
+                        ></el-cascader>
+                        <el-cascader v-model="zoneTypeValue" :options="zoneTypeOption" placeholder="请选择分区"
+                                     @change="changeZoneTypes"
+                                     class="item"></el-cascader>
                         <admSearch @SearchValue="searchValue" class="item"/>
                     </template>
                     <template v-if="activeName==='picture'">
                         <el-cascader clearable ref="graphCascader" placeholder="请选择建筑楼层" :options="graphOptions"
-                                    v-model="graphBuilding" filterable size="small"
-                                    @change="changeGraphCascader" style="margin-right: 12px" :props="graphProps">
+                                     v-model="graphBuilding" filterable size="small"
+                                     @change="changeGraphCascader" style="margin-right: 12px" :props="graphProps">
                         </el-cascader>
                         <el-cascader v-model="zoneTypeVal" :options="zoneTypeOption" @change="changeZoneType"
-                                    placeholder="请选择分区" class="item"></el-cascader>
-                        <el-autocomplete popper-class="my-autocomplete" v-model="autoCompleteSearch" :fetch-suggestions="querySearch"
-                            placeholder="输入平面图中已有的业务空间名称进行查找" width="180" @select="handleSelect">
+                                     placeholder="请选择分区" class="item"></el-cascader>
+                        <el-autocomplete popper-class="my-autocomplete" v-model="autoCompleteSearch"
+                                         :fetch-suggestions="querySearch"
+                                         placeholder="输入平面图中已有的业务空间名称进行查找" width="180" @select="handleSelect">
                             <i class="el-icon-search el-input__icon" slot="suffix"></i>
                             <template slot-scope="{ item }">
                                 <div class="name"
-                                    style="position: relative;padding-right:40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
-                                    :title="item.data.RoomLocalName">
+                                     style="position: relative;padding-right:40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
+                                     :title="item.data.RoomLocalName">
                                     {{ item.data.RoomLocalName }}
                                     <span class="addr" style="position: absolute;right:0;color:#409EFF;">定位</span>
                                 </div>
@@ -82,13 +86,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { AdmMultiTable, AdmSearch, baseDataForm, Pagination, Statistics } from "../components/index";
+import {Component, Vue} from "vue-property-decorator";
+import {AdmMultiTable, AdmSearch, baseDataForm, Pagination, Statistics} from "../components/index";
 import spaceGraph from "./components/spaceGraph.vue";
-import { buildingQuery, dictQuery, floorQuery, queryCountSpace, queryZone, updateZone } from "@/api/datacenter";
+import {buildingQuery, dictQuery, floorQuery, queryCountSpace, queryZone, updateZone} from "@/api/datacenter";
 import tools from "@/utils/maintain";
-import { BeatchQueryParam } from "@/api/equipComponent";
-import { UserModule } from "@/store/modules/user";
+import {BeatchQueryParam} from "@/api/equipComponent";
+import {UserModule} from "@/store/modules/user";
 
 @Component({
     name: "adm-space",
@@ -113,6 +117,7 @@ export default class spaceIndex extends Vue {
     building = ["all"];
 
     zoneTypeVal = ["FunctionZone"];
+    zoneTypeValue = ["FunctionZone"];
     // 分页
     private paginationList = {
         page: 1,
@@ -171,6 +176,7 @@ export default class spaceIndex extends Vue {
     zoneList = []
     // 禁用
     createDisable = true
+
     // 项目id
     private get projectId(): string {
         return UserModule.projectId;
@@ -201,20 +207,20 @@ export default class spaceIndex extends Vue {
     }
 
     // 查询选中,定位
-    handleSelect(zone:any) {
-        if(this.$refs.spaceGraph) {
+    handleSelect(zone: any) {
+        if (this.$refs.spaceGraph) {
             this.$refs.spaceGraph.handleSelect(zone)
         }
     }
 
     // 子组件中获取业务空间成功
-    getZoneSuc(list: []){
+    getZoneSuc(list: []) {
         this.zoneList = list
     }
 
     // 创建空间
     editGraphy() {
-        if(this.$refs.spaceGraph) {
+        if (this.$refs.spaceGraph) {
             this.createDisable = true
             this.$refs.spaceGraph.editGraphy()
         }
@@ -222,7 +228,7 @@ export default class spaceIndex extends Vue {
 
     // 下拉菜单
     handleCommand(command: string) {
-        if(this.$refs.spaceGraph) {
+        if (this.$refs.spaceGraph) {
             this.createDisable = true
             this.$refs.spaceGraph.handleCommand(command)
         }
@@ -230,7 +236,7 @@ export default class spaceIndex extends Vue {
 
     /**
      * 初始化创建按钮
-    */
+     */
     initCreatBtn(flag: boolean) {
         this.createDisable = flag
     }
@@ -332,7 +338,7 @@ export default class spaceIndex extends Vue {
         const pa = {
             pageSize: 1000,
             orders: "localName asc",
-            cascade: [{ name: "floor", orders: "floorSequenceId desc" }],
+            cascade: [{name: "floor", orders: "floorSequenceId desc"}],
         };
         buildingQuery(pa).then((res) => {
             try {
@@ -361,7 +367,8 @@ export default class spaceIndex extends Vue {
         if (this.building.length > 0) {
             this.loading = true;
             let param = {
-                type: "FunctionZone",
+                // type: "FunctionZone",
+                type: this.zoneTypeValue[this.zoneTypeValue.length - 1],
                 orders: "sort asc, name desc",
                 pageNumber: 1,
                 pageSize: 1000,
@@ -369,24 +376,25 @@ export default class spaceIndex extends Vue {
             let param2 = {
                 // 级联查建筑楼层信息
                 cascade: [
-                    { name: "building" },
-                    { name: "floor", orders: "floorSequenceId desc" },
+                    {name: "building"},
+                    {name: "floor", orders: "floorSequenceId desc"},
                 ],
-                zoneType: "FunctionZone",
+                // zoneType: "FunctionZone",
+                zoneType: this.zoneTypeValue[this.zoneTypeValue.length - 1],
                 pageNumber: this.paginationList.page,
                 pageSize: this.paginationList.size,
                 orders: "createTime asc, localName asc, localId desc, id asc",
             };
-            let search = this.inputSearch ? `;localName contain '${ this.inputSearch }' or localId contain '${ this.inputSearch }'` : ''
+            let search = this.inputSearch ? `;localName contain '${this.inputSearch}' or localId contain '${this.inputSearch}'` : ''
             if (this.building.length === 1) {
                 param2.filters = "";
                 switch (this.building[0]) {
                     case "noKnow":
-                        param2.filters = `buildingId='isnull'${ search }`;
+                        param2.filters = `buildingId='isnull'${search}`;
                         break;
                     case "all":
                         if (this.inputSearch) {
-                            param2.filters = `localName contain '${ this.inputSearch }' or localId contain '${ this.inputSearch }'`
+                            param2.filters = `localName contain '${this.inputSearch}' or localId contain '${this.inputSearch}'`
                         } else {
                             delete param2.filters;
                         }
@@ -395,14 +403,14 @@ export default class spaceIndex extends Vue {
             } else if (this.building.length === 2) {
                 switch (this.building[1]) {
                     case "noKnow":
-                        param2.filters = `buildingId='${ this.building[0] }';floorId='isnull'${ search }`;
+                        param2.filters = `buildingId='${this.building[0]}';floorId='isnull'${search}`;
 
                         break;
                     case "all":
-                        param2.filters = `buildingId='${ this.building[0] }'${ search }`;
+                        param2.filters = `buildingId='${this.building[0]}'${search}`;
                         break;
                     default:
-                        param2.filters = `buildingId='${ this.building[0] }';floorId='${ this.building[1] }'${ search }`;
+                        param2.filters = `buildingId='${this.building[0]}';floorId='${this.building[1]}'${search}`;
                 }
             }
 
@@ -574,6 +582,12 @@ export default class spaceIndex extends Vue {
         this.toGraph();
     }
 
+    // 修改表格分区类型
+    changeZoneTypes() {
+        this.changeCascader();
+    }
+
+
     // 当前分页
     handleCurrentChange(val: number) {
         this.paginationList.page = val;
@@ -697,7 +711,8 @@ export default class spaceIndex extends Vue {
                 & > .item + .item {
                     margin-left: 16px;
                 }
-                .createMask{
+
+                .createMask {
                     position: absolute;
                     width: 100%;
                     height: 100%;
@@ -739,23 +754,28 @@ export default class spaceIndex extends Vue {
     .el-select, .el-date-editor.el-input, .el-date-editor.el-input__inner {
         width: 100%;
     }
+
     .el-autocomplete {
         display: inline-block;
         width: 320px;
         margin-left: 12px;
     }
+
     .my-autocomplete {
         li {
             line-height: normal;
             padding: 7px;
+
             .name {
                 text-overflow: ellipsis;
                 overflow: hidden;
             }
+
             .addr {
                 font-size: 12px;
                 color: #b4b4b4;
             }
+
             .highlighted .addr {
                 color: #ddd;
             }