|
|
@@ -0,0 +1,173 @@
|
|
|
+<template>
|
|
|
+ <div id="relatedSpace">
|
|
|
+ <div class="condition">
|
|
|
+ <div class="header">
|
|
|
+ <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
|
|
|
+ <span style="float:left;">{{ cenoteObj.ShaftLocalName || cenoteObj.ShaftName || '' }}</span>
|
|
|
+ <div class="edit-tool" v-if="!cenoteObj.onlyRead">
|
|
|
+ <el-button v-if="isMyTab == 2" size="small" style="float:right">添加</el-button>
|
|
|
+ <div v-else>
|
|
|
+ <el-button v-show="!isEdit" @click="isEdit = true" size="small" style="float:right">编辑</el-button>
|
|
|
+ <el-button v-show="isEdit" size="small" style="float:right">保存</el-button>
|
|
|
+ <el-button v-show="isEdit" size="small" @click="isEdit = false" style="float:right">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <space-select @change="changeSpace"></space-select>
|
|
|
+ </div>
|
|
|
+ <div class="saga-build-tab">
|
|
|
+ <el-radio-group v-model="isMyTab" @change="changeRadio" style="width: 136px;">
|
|
|
+ <el-radio-button label="1">平面图</el-radio-button>
|
|
|
+ <el-radio-button label="2" class="space-own-radio" style="width: 68px;">列表</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div v-show="isMyTab == 1" class="data-item">
|
|
|
+ <el-select v-model="floor" placeholder="请选择楼层" >
|
|
|
+ <el-option v-for="item in floorList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div v-show="isMyTab == 2" class="data-item">
|
|
|
+ <related-spaceList :space="space" ref="spacelist"></related-spaceList>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import spaceSelect from "@/components/ledger/lib/spaceSelect";
|
|
|
+import relatedSpaceList from "@/views/ledger/cenotelist/relatedSpaceList"
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isMyTab: 1,//默认平面图
|
|
|
+ isEdit: false,//是否正在编辑
|
|
|
+ floor:'',//楼层
|
|
|
+ floorList:[],
|
|
|
+ space:'',//当前业务空间
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ cenoteObj() {
|
|
|
+ return this.$route.query.infos;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ showIt: Boolean
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ spaceSelect,
|
|
|
+ relatedSpaceList
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.load();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //更改业务空间类型
|
|
|
+ changeSpace(val) {
|
|
|
+ this.space = val;
|
|
|
+ this.load();
|
|
|
+ },
|
|
|
+ //加载数据
|
|
|
+ load() {
|
|
|
+ if(this.isMyTab == 1){
|
|
|
+
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.$refs.spacelist.getSpaceList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //更换列表或平面图
|
|
|
+ changeRadio(val) {
|
|
|
+ this.isMyTab = val;
|
|
|
+ this.load();
|
|
|
+ },
|
|
|
+ //返回
|
|
|
+ goBack() {
|
|
|
+ this.$router.push({
|
|
|
+ name: 'cenotelist'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.condition {
|
|
|
+ position: relative;
|
|
|
+ padding: 10px 10px;
|
|
|
+ display: flex;
|
|
|
+ height: calc(100% - 22px);
|
|
|
+ flex-direction: column;
|
|
|
+ border: 1px solid #dfe6ec;
|
|
|
+ background: #fff;
|
|
|
+ .header {
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.5);
|
|
|
+ span {
|
|
|
+ line-height: 33px;
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+ /deep/ .buildFloor {
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .spaceTypes {
|
|
|
+ .types {
|
|
|
+ float: left;
|
|
|
+ width: calc(100% - 200px);
|
|
|
+ /deep/ .el-tabs__item.is-top {
|
|
|
+ border-top: 2px solid transparent;
|
|
|
+ &.is-active {
|
|
|
+ border-top: 2px solid #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .deleBtn {
|
|
|
+ float: left;
|
|
|
+ width: 200px;
|
|
|
+ text-align: right;
|
|
|
+ height: 40px;
|
|
|
+ border-bottom: 1px solid #e4e7ed;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.saga-build-tab {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ .tab-main {
|
|
|
+ float: left;
|
|
|
+ width: 120px;
|
|
|
+ padding: 0 5px;
|
|
|
+ margin: 5px 0;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ background-color: #fff;
|
|
|
+ height: 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+ i {
|
|
|
+ font-size: 18px;
|
|
|
+ padding-right: 10px;
|
|
|
+ float: left;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ line-height: 30px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab-active {
|
|
|
+ background-color: #409eff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.data-item {
|
|
|
+ height: calc(100% - 44px);
|
|
|
+ padding: 10px 0px;
|
|
|
+}
|
|
|
+</style>
|
