楼盘表选项卡布局修改

杨威
Showing 3 changed files with 63 additions and 43 deletions
src/views/zrz/lpb/bjlp/index.vue
src/views/zrz/lpb/index.vue
src/views/zrz/lpb/xxxx/index.vue
--- a/src/views/zrz/lpb/bjlp/index.vue
View file @ee2771b
+++ b/src/views/zrz/lpb/bjlp/index.vue
View file @ee2771b
@@ -2,7 +2,7 @@
 	<div class="edit">
 		<div class="tab-header">
 			<el-row class="searchContent">
-				<el-col :span="6">
+				<el-col :span="24" style="margin:0 0 10px 18px;">
 					<el-radio-group  v-model="scyclx" @change="scyclxChange">
 						<el-radio-button label="0">预测</el-radio-button>
 						<el-radio-button label="1">实测</el-radio-button>
@@ -11,8 +11,6 @@
 						maxlength="28"
 						v-model="bdcdyh"
 						:style="{ width: inputWidth + 'px' }"
-						@focus="inputFocus"
-						@blur="inputBlur"
 						@change="inputChange"
 						class="searchInput"
 						placeholder="输入不动产单元号或室号"
@@ -23,8 +21,10 @@
 						></i
 					></el-input>
 				</el-col>
-				<el-col :span="18">
+			</el-row>
-					<div class="fr">
+			<el-row class="searchContent">
+				<el-col :span="24">
+					<div class="fl">
 						<el-button class="radioBtn" label="1" border @click="create"
 							><i class="iconfont iconchuangjianloupan"></i>创建楼盘</el-button
 						>
@@ -82,12 +82,17 @@
 					</div>
 				</el-col>
 			</el-row>
+			<div class="change">
+				<i class="iconfont iconloupanbiaoxinxi" v-show="bjztFlag" @click="bjztChange" title="详细信息"></i>
+				<i class="iconfont iconloupanbiaobianji" v-show="!bjztFlag" @click="bjztChange" title="编辑楼盘"></i>
+			</div>
 		</div>
 		<div
 			class="tab-content"
 			ref="tabContent"
 			:style="{ height: lpbContentHight + 'px' }"
 			v-loading="lpbloading"
+			v-if="bjztFlag"
 		>
 			<!-- 左侧树结构 -->
 			<div class="lp-tree" :class="createFlag ? 'w260' : 'w0'">
@@ -222,6 +227,8 @@
 				</div>
 			</div>
 		</div>
+        <xxxx v-if="!bjztFlag"></xxxx>
 		<!-- 右键菜单弹出框 -->
 		<el-dialog v-dialogDrag :close-on-click-modal="false" title="添加" :visible.sync="dialogVisible" width="50%" >
@@ -268,6 +275,7 @@ import addZdy from "./zdy/index";
 import addCh from "./ch/index";
 import lpbContent from "./lpbContent/index";
 import { getLpbMenuTree, batchScYcChange, getLpbTj,batchGeneratorBdcdyh,getLpbFwytAndQlxz ,batchCommit} from "@api/lpb";
+import xxxx from '../xxxx/index'
 export default {
 	name: "",
@@ -281,6 +289,7 @@ export default {
 		PlSh,
 		PlH,
 		PlZl,
+		xxxx
 	},
 	props: {},
 	data() {
@@ -300,7 +309,7 @@ export default {
 			pd: [], //创建楼盘的树结构数据
 			menuType: "",
 			treeData: {},
-			inputWidth: 74,
+			inputWidth: 200,
 			selectedZt: "dyzt", //图例选中项，默认选中单元状态
 			dyztList: [
 				{
@@ -367,6 +376,7 @@ export default {
 			dyztBsmList: {}, //单元状态bsmList
 			cbsmList:[], // 层bsmlist
 			lpbloading:true,
+			bjztFlag:true,
 		};
 	},
 	created() {
@@ -441,6 +451,10 @@ export default {
 		plshClose() {
 			this.plShVisible = false;
 		},
+		//改变编辑或详细信息状态
+		bjztChange(){
+			this.bjztFlag = !this.bjztFlag;
+		},
 		//改变实预测数据类型
 		scyclxChange(val){
 			//清空已选中层户
@@ -552,12 +566,12 @@ export default {
 			this.cbsmList = data;
 		},
 		//不动产单元号输入框事件
-		inputFocus() {
+		// inputFocus() {
-			this.inputWidth = 200;
+		// 	this.inputWidth = 200;
-		},
+		// },
-		inputBlur() {
+		// inputBlur() {
-			this.inputWidth = 74;
+		// 	this.inputWidth = 74;
-		},
+		// },
 		inputChange() {
 			if (this.bdcdyh != "") {
 				// console.log("查询" + this.bdcdyh);
@@ -774,7 +788,9 @@ export default {
 		padding: 20px 0;
 		background-color: #ffffff;
 		margin-bottom: 15px;
+		position: relative;
 		.searchContent {
+			margin-left: 50px;
 			box-sizing: border-box;
 			padding: 0 20px;
 			/deep/.el-radio-button__inner {
@@ -797,6 +813,22 @@ export default {
 				display: inline-block;
 			}
 		}
+		.change{
+			position: absolute;
+			left: 0;
+			top: 0;
+			height: 100%;
+			width: 70px;
+			border-right: 1px solid #dedede;
+			i{
+				cursor: pointer;
+				color: #0090FF;
+				font-size: 36px;
+				display: inherit;
+				text-align: center;
+				line-height: 128px;
+			}
+		}
 		.radioBtn {
 			margin-left: 10px;
 			padding: 12px 10px;
--- a/src/views/zrz/lpb/index.vue
View file @ee2771b
+++ b/src/views/zrz/lpb/index.vue
View file @ee2771b
 <template>
  <div class="lpb">
-     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <bjlp></bjlp>
+     <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="编辑楼盘" name="edit">
-        <bjlp></bjlp>
      </el-tab-pane>
      <el-tab-pane label="预览楼盘" name="preview">
        <yllp></yllp>
@@ -10,17 +10,15 @@
      <el-tab-pane label="详细信息" name="detail">
        <xxxx></xxxx>
      </el-tab-pane>
-    </el-tabs>
+    </el-tabs> -->
  </div>
 </template>
 <script>
 import bjlp from "./bjlp"
-import yllp from "./yllp"
-import xxxx from "./xxxx"
 export default {
  name:"",
-  components:{bjlp,yllp,xxxx},
+  components:{bjlp},
  props:{},
  data() {
      return {
--- a/src/views/zrz/lpb/xxxx/index.vue
View file @ee2771b
+++ b/src/views/zrz/lpb/xxxx/index.vue
View file @ee2771b
 <template>
  <div class="">
-    <el-radio-group  v-model="scyclx" @change="scyclxChange">
-      <el-radio-button label="0">预测</el-radio-button>
-      <el-radio-button label="1">实测</el-radio-button>
-    </el-radio-group>
-    <el-button @click="update">更新数据</el-button>
    <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
@@ -14,6 +9,7 @@
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
              prop="mc"
+              width="200"
              label="地址(单元名称)">
      </el-table-column>
      <el-table-column
@@ -73,7 +69,6 @@ export default {
      tableData: [],
      scData:[],
      ycData:[],
-      scyclx:'0',
    }
  },
  created(){},
@@ -82,13 +77,6 @@ export default {
  },
  methods:{
-    scyclxChange(){
-      if(this.scyclx === '0'){
-        this.tableData = this.ycData;
-      }else {
-        this.tableData = this.scData;
-      }
-    },
    chFilter(row, column){
      if(row.ch === 0){
@@ -106,26 +94,20 @@ export default {
      }
    },
-    update(){
+    // update(){
-      this.getData();
+    //   this.getData();
-    },
+    // },
    getData(){
      let zrzbsm = this.$store.state.zrzbsm;
      // let scyclx = this.scyclx;
-      getDetailInfo(zrzbsm,'0').then((res)=>{
+      getDetailInfo(zrzbsm,this.$parent.scyclx).then((res)=>{
        if(res.code===200){
          console.log(res.result)
          this.ycData = res.result;
          this.tableData=this.ycData;
        }
      });
-      getDetailInfo(zrzbsm,'1').then((res)=>{
-        if(res.code===200){
-          console.log(res.result)
-          this.scData = res.result;
-        }
-      })
    },
    load(tree, treeNode, resolve) {
@@ -148,8 +130,16 @@ export default {
  },
-  computed: {},
+  computed: {
-  watch: {},
+    scyclx(){
+      return this.$parent.scyclx
+    }
+  },
+  watch: {
+    scyclx(){
+      this.getData();
+    }
+  },
 }
 </script>
 <style scoped  lang="less">