123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 |
- <template>
- <el-dialog :title="title" :visible.sync="dialog" :before-close="handleClose" width="900px" id="addEqDialog">
- <el-row class="filters">
- <el-col :span="7" style="width:268px;padding:0px;">
- <el-input style placeholder="输入业务空间名称、本地编码进行查询" v-model="keycode" clearable @keyup.enter.native="getTableData">
- <i slot="suffix" class="el-input__icon el-icon-search" @click="getTableData"></i>
- </el-input>
- </el-col>
- <el-col :span="8.5" style="padding:0 0;margin-left:-2px">
- <floor-cascader ref="floorcas" @change="changeFloor"></floor-cascader>
- </el-col>
- <el-col :span="7.5" style="padding:0 0;">
- <space-select ref="spacesel" @change="changeSpace"></space-select>
- </el-col>
- </el-row>
- <el-row class="filters" :gutter="20"></el-row>
- <div class="table-box">
- <el-table :data="tableData" style="width: 100%" height="350" v-loading="loading" :header-cell-style="headerStyle" ref="multipleTable"
- @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55"></el-table-column>
- <el-table-column :label="`${inSpaceType}本地名称`" show-overflow-tooltip min-width="100">
- <template slot-scope="scope">
- {{scope.row.RoomLocalName||scope.row.RoomName||''}}
- </template>
- </el-table-column>
- <el-table-column prop="RoomLocalID" :label="`${inSpaceType}本地编码`" show-overflow-tooltip min-width="100"></el-table-column>
- <el-table-column prop :label="`所属建筑楼层`" show-overflow-tooltip min-width="100">
- <template slot-scope="scope">
- {{ scope.row.BuildingId && floorType[scope.row.BuildingId]? ((floorType[scope.row.BuildingId] || '') + (scope.row.FloorId && floorType[scope.row.FloorId] ? (' - ' + floorType[scope.row.FloorId] || '') : '')) : ''}}
- </template>
- </el-table-column>
- <el-table-column prop="ObjectType" :label="`空间类型`" show-overflow-tooltip min-width="100">
- <template slot-scope="scope">
- {{spaceType[scope.row.ObjectType] || ''}}
- </template>
- </el-table-column>
- <el-table-column prop="action" label="操作" min-width="100">
- <template slot-scope="scope">
- <el-button size="mini" @click="toDetail(scope.$index, scope.row)" plain>查看详情</el-button>
- </template>
- </el-table-column>
- </el-table>
- <!-- 分页 -->
- <el-pagination class="fr" v-show="tableData && tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
- :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
- :total="page.total"></el-pagination>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button size="small" @click="handleClose">取 消</el-button>
- <el-button size="small" type="primary" @click="savaRelation">确 定</el-button>
- </span>
- </el-dialog>
- </template>
- <script>
- import {
- shaftUnlinkSpaceQuery,
- unSysZoneSpace,
- linkShaftSpace
- } from "@/api/scan/request";
- import floorCascader from "@/components/ledger/lib/floorCascader";
- import dictionaryCas from "@/components/config_point/dictionaryCascader";
- import spaceSelect from "@/components/ledger/lib/spaceSelect";
- import { mapGetters } from "vuex";
- export default {
- components: {
- floorCascader,
- dictionaryCas,
- spaceSelect
- },
- computed: {
- ...mapGetters("layout", ["projectId"]),
- dialog() {
- return this.dialogVisible;
- }
- },
- data() {
- return {
- title: "添加系统所在业务空间",
- keycode: "", //输入查询条件
- inSpaceType: "业务空间",
- Buildfloor: ["all"], // 选中的建筑楼层
- Spacecategory: null, // 选中的业务空间类型
- tableData: [],
- floorData: {}, //楼层
- spaceData: {}, //业务空间分区
- loading: false,
- selections: [], // 选中项
- page: {
- pageSize: 50,
- pageSizes: [10, 20, 50, 100],
- pageNumber: 1,
- total: 0
- },
- headerStyle: {
- backgroundColor: "#e1e4e5",
- color: "#2b2b2b",
- lineHeight: "30px"
- } // 列表样式
- };
- },
- props: {
- params: Object, //查看的竖井关系信息
- spaceType: Object,
- dialogVisible: Boolean,
- floorType: Object
- },
- mounted() { },
- methods: {
- // 显示弹窗
- showDialog() {
- this.dialogVisible = true;
- },
- //修改建筑楼层
- changeFloor(value) {
- this.Buildfloor = value;
- this.getTableData();
- },
- //修改空间类型
- changeSpace(value) {
- this.Spacecategory = value;
- this.getTableData();
- },
- getTableData() {
- let params = {
- data: {
- Filters: "not RoomID isNull",
- Orders: "RoomLocalName desc",
- PageNumber: this.page.pageNumber,
- PageSize: this.page.pageSize
- },
- ShaftId: this.$route.query.ShaftId
- };
- if (this.Buildfloor[0] == "noKnow") {
- params.data.Filters += `;buildingId isNull`;
- } else if (this.Buildfloor[0] && this.Buildfloor[0] != "all") {
- params.data.Filters += `;buildingId='${this.Buildfloor[0]}'`;
- }
- if (this.Buildfloor[1] == "noKnow") {
- params.data.Filters += `;floorId isNull`;
- } else if (this.Buildfloor[1] && this.Buildfloor[1] != "all") {
- params.data.Filters += `;floorId='${this.Buildfloor[1]}'`;
- }
- if (this.Spacecategory) {
- params.data.Filters += `;ObjectType='${this.Spacecategory}'`;
- }
- if (this.keycode != "") {
- params.data.Filters += `;RoomName contain '${this.keycode}' or RoomLocalName contain '${this.keycode}'`;
- }
- shaftUnlinkSpaceQuery(params, res => {
- this.tableData = res.Content;
- this.page.total = res.Total;
- });
- },
- handleClose() {
- this.$emit("update:dialogVisible", false);
- },
- //选中项修改
- handleSelectionChange(val) {
- this.selections = val;
- },
- savaRelation() {
- if (this.selections.length) {
- let params = {
- Content: this.selections.map(item => {
- return {
- SpaceID: item.RoomID,
- ShaftId: this.$route.query.ShaftId,
- ObjectType: item.ObjectType
- };
- })
- };
- linkShaftSpace(params, res => {
- this.$message.success("关联成功!");
- this.$emit("refresh");
- });
- } else {
- this.$message("请选择要关联的设备");
- }
- },
- //改变pagesize
- handleSizeChange(pageSize) {
- this.page.pageSize = pageSize;
- this.getTableData();
- },
- //改变pageno
- handleCurrentChange(pageNo) {
- this.page.pageNumber = pageNo;
- this.getTableData();
- },
- // 查看详情
- toDetail() {
- this.$message("开发中");
- }
- },
- watch: {
- dialogVisible: {
- handler() {
- if (this.dialogVisible) {
- this.page.pageNumber = 1;
- this.tableData = [];
- this.getTableData();
- }
- },
- immediate: true
- }
- }
- };
- </script>
- <style lang="less" scoped>
- #addEqDialog {
- .filters {
- margin: 0 0 10px 0;
- }
- .table-box {
- height: 370px;
- .fr {
- margin-top: 10px;
- }
- }
- }
- </style>
|