Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
c70eb0e5 by renchao@pashanhoo.com
Options

style：登记簿详情

1 parent 3f8965b6
Inline Side-by-side
Showing 5 changed files with 276 additions and 278 deletions
...@@ -53,11 +53,9 @@ ...@@ -53,11 +53,9 @@
53 }, 53 },
54 watch: { 54 watch: {
55 isShow (newValue) { 55 isShow (newValue) {
56 this.editItem = this.loadViewFn(this.editItem)
57 document.body.appendChild(this.$el);
58 this.$nextTick(() => { 56 this.$nextTick(() => {
59 // this.editItem = this.loadViewFn(this.editItem) 57 this.editItem = this.loadViewFn(this.editItem)
60 // document.body.appendChild(this.$el); 58 document.body.appendChild(this.$el);
61 this.myShow = newValue 59 this.myShow = newValue
62 }) 60 })
63 } 61 }
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
8 margin: 0 auto; 8 margin: 0 auto;
9 display: flex; 9 display: flex;
10 flex-wrap: wrap; 10 flex-wrap: wrap;
11 height: 100%;
11 12
12 .title { 13 .title {
13 width: 100%; 14 width: 100%;
...@@ -259,7 +260,8 @@ ...@@ -259,7 +260,8 @@
259 .rollTable { 260 .rollTable {
260 margin-top: -2px; 261 margin-top: -2px;
261 display: block; 262 display: block;
262 height: calc(100vh - 185px); 263 height: 100%;
264 // height: calc(100vh - 185px);
263 overflow-y: scroll; 265 overflow-y: scroll;
264 margin-left: 2px; 266 margin-left: 2px;
265 } 267 }
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-09-18 13:39:51 4 * @LastEditTime: 2023-10-13 14:30:26
5 --> 5 -->
6 <template> 6 <template>
7 <div class="content"> 7 <div class="content">
...@@ -14,8 +14,7 @@ ...@@ -14,8 +14,7 @@
14 :default-expand-all="true" 14 :default-expand-all="true"
15 :expand-on-click-node="false" 15 :expand-on-click-node="false"
16 node-key="id" 16 node-key="id"
17 :default-checked-keys="[showTab]" 17 :default-checked-keys="[showTab]">
18 >
19 </el-tree> 18 </el-tree>
20 <el-collapse v-model="activeName" accordion> 19 <el-collapse v-model="activeName" accordion>
21 <el-collapse-item 20 <el-collapse-item
...@@ -23,8 +22,7 @@ ...@@ -23,8 +22,7 @@
23 ref="sfq" 22 ref="sfq"
24 v-for="(item, index) in sfqdata" 23 v-for="(item, index) in sfqdata"
25 :key="index" 24 :key="index"
26 :name="index" 25 :name="index">
27 >
28 <template slot="title"> 26 <template slot="title">
29 <span class="text" @click="tap(item, index)"> 27 <span class="text" @click="tap(item, index)">
30 <span> {{ item.label }}</span> 28 <span> {{ item.label }}</span>
...@@ -35,8 +33,7 @@ ...@@ -35,8 +33,7 @@
35 :re="item" 33 :re="item"
36 :key="index" 34 :key="index"
37 :class="[isActive == index ? activeCls : '', errorCls]" 35 :class="[isActive == index ? activeCls : '', errorCls]"
38 @click="taplist(item, index)" 36 @click="taplist(item, index)">
39 >
40 <span> 37 <span>
41 {{ item.label }} 38 {{ item.label }}
42 </span> 39 </span>
...@@ -51,298 +48,297 @@ ...@@ -51,298 +48,297 @@
51 <component 48 <component
52 :is="componentTag" 49 :is="componentTag"
53 @getBdcdyh="getBdcdyh" 50 @getBdcdyh="getBdcdyh"
54 v-bind="currentSelectProps" 51 v-bind="currentSelectProps" />
55 />
56 </div> 52 </div>
57 </div> 53 </div>
58 </template> 54 </template>
59 <script> 55 <script>
60 import { getBdcqljqtsx } from "@/api/djbDetail.js"; 56 import { getBdcqljqtsx } from "@/api/djbDetail.js";
61 import { loadTreeData, loadsfqData, getNode } from "./djbFrameData.js"; 57 import { loadTreeData, loadsfqData, getNode } from "./djbFrameData.js";
62 export default { 58 export default {
63 data() { 59 data () {
64 return { 60 return {
65 activeName: 0, 61 activeName: 0,
66 //接收参数 62 //接收参数
67 // propsParam: this.$attrs, 63 // propsParam: this.$attrs,
68 //左侧目录 64 //左侧目录
69 catalog: {}, 65 catalog: {},
70 //选择加载哪一个组件 66 //选择加载哪一个组件
71 componentTag: "", 67 componentTag: "",
72 //子组件接收参数 68 //子组件接收参数
73 currentSelectProps: {}, 69 currentSelectProps: {},
74 //左侧树形结构数据 70 //左侧树形结构数据
75 treedata: [], 71 treedata: [],
76 sfqdata: [], 72 sfqdata: [],
77 keyy: "", 73 keyy: "",
78 iskey: "", 74 iskey: "",
79 defaultNode: "", 75 defaultNode: "",
80 isActive: "", 76 isActive: "",
81 activeCls: "select", 77 activeCls: "select",
82 errorCls: "unselected", 78 errorCls: "unselected",
83 defaultProps: { 79 defaultProps: {
84 value: "id", 80 value: "id",
85 children: "children", 81 children: "children",
86 label: "label", 82 label: "label",
87 }, 83 },
88 showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断 84 showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
89 };
90 },
91 props: ["formData"],
92 mounted() {
93 this.loadData(this.formData.bdcdyh);
94 },
95 methods: {
96 /**
97 * @description: getBdcdyh
98 * @author: miaofang
99 * 点击不动产单元号事件
100 */
101 getBdcdyh(val) {
102 this.addloadData(val);
103 },
104 /**
105 * @description: addloadData
106 * @author: miaofang
107 */
108 addloadData(val) {
109 getBdcqljqtsx({
110 bdcdyid: val.bdcdyid,
111 bdcdyh: val.bdcdyh,
112 }).then((res) => {
113 if (res.code === 200) {
114 if (this.sfqdata.some((item) => item.bdcdyid === val.bdcdyid)) {
115 let index = this.sfqdata.findIndex((item) => {
116 return item.bdcdyid == val.bdcdyid;
117 });
118 this.activeName = index;
119
120 // this.setstyle(index, 0, this.iskey);
121 } else {
122 this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid));
123 this.activeName = this.sfqdata.length - 1;
124 this.isActive=""
125 // this.$nextTick(() => {
126 // this.setstyle(this.sfqdata.length - 1, 0, this.iskey);
127 // })
128 }
129 }
130 });
131 this.currentSelectProps = {
132 bdcdyid: val.bdcdyid,
133 bdcdyh: val.bdcdyh,
134 qllx: this.formData.qllx,
135 bsmQlxx: this.formData.bsmQlxx,
136 }; 85 };
137 }, 86 },
138 /** 87 props: ["formData"],
139 * @description: loadData 88 mounted () {
140 * @author: renchao 89 this.loadData(this.formData.bdcdyh);
141 */ 90 },
142 loadData(val) { 91 methods: {
143 getBdcqljqtsx({ 92 /**
144 bdcdyid: this.formData.bdcdyid, 93 * @description: getBdcdyh
145 bdcdyh: val, 94 * @author: miaofang
146 }).then((res) => { 95 * 点击不动产单元号事件
147 if (res.code === 200) { 96 */
148 this.treedata = loadTreeData(val); 97 getBdcdyh (val) {
149 this.sfqdata.push( 98 this.addloadData(val);
150 loadsfqData(res.result, val, this.formData.bdcdyid) 99 },
151 ); 100 /**
152 this.$nextTick(function () { 101 * @description: addloadData
153 this.defaultNode = getNode( 102 * @author: miaofang
154 this.formData.qllx, 103 */
155 { linShi: 0, xianShi: 0, liShi: 0 }, 104 addloadData (val) {
156 res.result.bdcdylx || "" 105 getBdcqljqtsx({
106 bdcdyid: val.bdcdyid,
107 bdcdyh: val.bdcdyh,
108 }).then((res) => {
109 if (res.code === 200) {
110 if (this.sfqdata.some((item) => item.bdcdyid === val.bdcdyid)) {
111 let index = this.sfqdata.findIndex((item) => {
112 return item.bdcdyid == val.bdcdyid;
113 });
114 this.activeName = index;
115
116 // this.setstyle(index, 0, this.iskey);
117 } else {
118 this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid));
119 this.activeName = this.sfqdata.length - 1;
120 this.isActive = ""
121 // this.$nextTick(() => {
122 // this.setstyle(this.sfqdata.length - 1, 0, this.iskey);
123 // })
124 }
125 }
126 });
127 this.currentSelectProps = {
128 bdcdyid: val.bdcdyid,
129 bdcdyh: val.bdcdyh,
130 qllx: this.formData.qllx,
131 bsmQlxx: this.formData.bsmQlxx,
132 };
133 },
134 /**
135 * @description: loadData
136 * @author: renchao
137 */
138 loadData (val) {
139 getBdcqljqtsx({
140 bdcdyid: this.formData.bdcdyid,
141 bdcdyh: val,
142 }).then((res) => {
143 if (res.code === 200) {
144 this.treedata = loadTreeData(val);
145 this.sfqdata.push(
146 loadsfqData(res.result, val, this.formData.bdcdyid)
157 ); 147 );
158 this.sfqdata[0].children.forEach((item, index) => { 148 this.$nextTick(function () {
159 if (item.id == this.defaultNode.id) { 149 this.defaultNode = getNode(
160 this.loadComponent(item.form); 150 this.formData.qllx,
161 this.isActive = index; 151 { linShi: 0, xianShi: 0, liShi: 0 },
162 } 152 res.result.bdcdylx || ""
153 );
154 this.sfqdata[0].children.forEach((item, index) => {
155 if (item.id == this.defaultNode.id) {
156 this.loadComponent(item.form);
157 this.isActive = index;
158 }
159 });
160 // this.setstyle(0, 0, this.iskey);
163 }); 161 });
164 // this.setstyle(0, 0, this.iskey); 162 }
165 }); 163 });
166 } 164 this.currentSelectProps = {
167 }); 165 bdcdyid: this.formData.bdcdyid,
168 this.currentSelectProps = { 166 bdcdyh: val,
169 bdcdyid: this.formData.bdcdyid, 167 qllx: this.formData.qllx,
170 bdcdyh: val, 168 bsmQlxx: this.formData.bsmQlxx,
171 qllx: this.formData.qllx, 169 };
172 bsmQlxx: this.formData.bsmQlxx, 170 },
173 }; 171 /**
174 }, 172 * @description: handleNodeClick
175 /** 173 * @param {*} data
176 * @description: handleNodeClick 174 * @author: renchao
177 * @param {*} data 175 */
178 * @author: renchao 176 handleNodeClick (data) {
179 */ 177 this.loadComponent(data.form);
180 handleNodeClick(data) { 178 },
181 this.loadComponent(data.form); 179 // setstyle(newindex, index, key) {
182 }, 180 // if (key != undefined || this.keyy == index) {
183 // setstyle(newindex, index, key) { 181 // if (key != undefined) {
184 // if (key != undefined || this.keyy == index) { 182 // this.keyy = key;
185 // if (key != undefined) { 183 // }
186 // this.keyy = key; 184 // this.loadComponent(
187 // } 185 // this.$refs.sfq[newindex].$children[this.keyy].$attrs.re.form
188 // this.loadComponent( 186 // );
189 // this.$refs.sfq[newindex].$children[this.keyy].$attrs.re.form 187 // let dpme = this.$refs.sfq[newindex].$children[this.keyy].$el;
190 // ); 188 // dpme.style.backgroundColor = "#f5f5f5";
191 // let dpme = this.$refs.sfq[newindex].$children[this.keyy].$el; 189 // dpme.style.color = "#0079fe";
192 // dpme.style.backgroundColor = "#f5f5f5"; 190 // dpme.style.borderRight = "4px solid #0079fe";
193 // dpme.style.color = "#0079fe"; 191 // } else {
194 // dpme.style.borderRight = "4px solid #0079fe"; 192 // let dpme = this.$refs.sfq[newindex].$children[this.keyy].$el;
195 // } else { 193 // dpme.style.backgroundColor = "#ffffff";
196 // let dpme = this.$refs.sfq[newindex].$children[this.keyy].$el; 194 // dpme.style.color = "black";
197 // dpme.style.backgroundColor = "#ffffff"; 195 // dpme.style.border = "none";
198 // dpme.style.color = "black"; 196 // }
199 // dpme.style.border = "none"; 197 // },
200 // } 198 /**
201 // }, 199 * @description: addlist
202 /** 200 * @param {*} data
203 * @description: addlist 201 * @author: renchao
204 * @param {*} data 202 * 新增列表功能
205 * @author: renchao 203 */
206 * 新增列表功能 204 tap (data, index) {
207 */ 205 this.loadComponent(data.form);
208 tap(data, index) { 206 },
209 this.loadComponent(data.form); 207 taplist (data, index) {
210 }, 208 this.loadComponent(data.form);
211 taplist(data, index) { 209 this.isActive = index;
212 this.loadComponent(data.form); 210 },
213 this.isActive = index; 211 /**
214 }, 212 * @description: loadComponent
215 /** 213 * @param {*} form
216 * @description: loadComponent 214 * @author: renchao
217 * @param {*} form 215 */
218 * @author: renchao 216 loadComponent (form) {
219 */ 217 this.componentTag = (r) =>
220 loadComponent(form) { 218 require.ensure([], () => r(require("@/views/registerBook/" + form)));
221 this.componentTag = (r) => 219 },
222 require.ensure([], () => r(require("@/views/registerBook/" + form)));
223 }, 220 },
224 }, 221 };
225 };
226 </script> 222 </script>
227 <style scoped lang="scss"> 223 <style scoped lang="scss">
228 /deep/.rollTable { 224 // /deep/.rollTable {
229 height: calc(100vh - 300px) !important; 225 // height: calc(100vh - 300px) !important;
230 } 226 // }
231 227
232 .content { 228 .content {
233 width: 100%; 229 width: 100%;
234 height: 100%; 230 height: 100%;
235 display: flex; 231 display: flex;
236 232
237 .left { 233 .left {
238 width: 256px; 234 width: 256px;
239 height: 704px; 235 height: 704px;
240 background-color: #f5f5f5; 236 background-color: #f5f5f5;
241 color: #333; 237 color: #333;
242 border: 1px solid rgb(228, 228, 228); 238 border: 1px solid rgb(228, 228, 228);
243 overflow-y: auto; 239 overflow-y: auto;
244 } 240 }
245 241
246 .right { 242 .right {
247 width: calc(100% - 256px); 243 width: calc(100% - 256px);
248 height: 704px; 244 height: 704px;
249 // overflow-y: scroll; 245 // overflow-y: scroll;
250 // overflow: auto; 246 // overflow: auto;
251 background-color: #f5f5f5; 247 background-color: #f5f5f5;
252 border: 1px solid rgb(228, 228, 228); 248 border: 1px solid rgb(228, 228, 228);
249 }
253 } 250 }
254 }
255
256 /deep/ .expanded.el-tree-node__expand-icon,
257 /deep/ .el-tree-node__expand-icon {
258 visibility: hidden;
259 }
260 251
261 /deep/ .el-tree-node__content { 252 /deep/ .expanded.el-tree-node__expand-icon,
262 border: 1px solid rgb(228, 228, 228); 253 /deep/ .el-tree-node__expand-icon {
263 height: 45px; 254 visibility: hidden;
264 } 255 }
265 256
266 /deep/ .el-tree-node:focus > .el-tree-node__content { 257 /deep/ .el-tree-node__content {
267 // background-color: #f5f5f5; 258 border: 1px solid rgb(228, 228, 228);
268 // color: #0079fe; 259 height: 45px;
269 // border-right: 4px solid #0079fe; 260 }
270 }
271 261
272 /deep/.el-tree-node { 262 /deep/ .el-tree-node:focus > .el-tree-node__content {
273 white-space: pre-wrap; 263 // background-color: #f5f5f5;
274 } 264 // color: #0079fe;
265 // border-right: 4px solid #0079fe;
266 }
275 267
276 /deep/ .is-current > .el-tree-node__content { 268 /deep/.el-tree-node {
277 // background-color: #f5f5f5; 269 white-space: pre-wrap;
278 // color: #0079fe; 270 }
279 // border-right: 4px solid #0079fe;
280 }
281 271
282 /deep/.el-collapse-item__header { 272 /deep/ .is-current > .el-tree-node__content {
283 width: 100%; 273 // background-color: #f5f5f5;
284 cursor: pointer; 274 // color: #0079fe;
285 position: relative; 275 // border-right: 4px solid #0079fe;
286 .el-collapse-item__arrow {
287 position: absolute;
288 top: 15px;
289 right: 0px;
290 } 276 }
291 align-items: center; 277
292 .text { 278 /deep/.el-collapse-item__header {
293 width: 100%; 279 width: 100%;
280 cursor: pointer;
281 position: relative;
282 .el-collapse-item__arrow {
283 position: absolute;
284 top: 15px;
285 right: 0px;
286 }
287 align-items: center;
288 .text {
289 width: 100%;
290 height: 45px;
291 display: inline-block;
292 span {
293 margin-left: 60px;
294 padding-top: 10px;
295 display: inline-block;
296 line-height: 15px;
297 }
298 }
294 height: 45px; 299 height: 45px;
295 display: inline-block; 300 display: inline-block;
301 line-height: 45px;
302 border: 1px solid rgb(228, 228, 228);
303 }
304 /deep/.el-collapse-item__content {
305 padding-bottom: 5px;
306 }
307 /deep/.unselected {
308 // white-space: wrap;
309 border: none;
310 cursor: pointer;
311 width: 250px;
312 height: 45px;
313 border: 1px solid rgb(228, 228, 228);
314 border-right: 4px solid #f5f5f5;
315 margin: auto;
316 text-align: center;
317 align-items: center;
296 span { 318 span {
297 margin-left: 60px; 319 width: 100%;
298 padding-top: 10px;
299 display: inline-block; 320 display: inline-block;
300 line-height: 15px; 321 justify-content: center;
322 align-items: center;
301 } 323 }
302 } 324 }
303 height: 45px;
304 display: inline-block;
305 line-height: 45px;
306 border: 1px solid rgb(228, 228, 228);
307 }
308 /deep/.el-collapse-item__content {
309 padding-bottom: 5px;
310 }
311 /deep/.unselected {
312 // white-space: wrap;
313 border: none;
314 cursor: pointer;
315 width: 250px;
316 height: 45px;
317 border: 1px solid rgb(228, 228, 228);
318 border-right: 4px solid #f5f5f5;
319 margin: auto;
320 text-align: center;
321 align-items: center;
322 span {
323 width: 100%;
324 display: inline-block;
325 justify-content: center;
326 align-items: center;
327 }
328 }
329 325
330 .select { 326 .select {
331 border: none; 327 border: none;
332 cursor: pointer; 328 cursor: pointer;
333 width: 250px; 329 width: 250px;
334 height: 45px; 330 height: 45px;
335 background-color: #f5f5f5; 331 background-color: #f5f5f5;
336 color: #0079fe; 332 color: #0079fe;
337 border-right: 4px solid #0079fe; 333 border-right: 4px solid #0079fe;
338 margin: auto; 334 margin: auto;
339 text-align: center; 335 text-align: center;
340 align-items: center;
341 span {
342 width: 100%;
343 display: inline-block;
344 justify-content: center;
345 align-items: center; 336 align-items: center;
337 span {
338 width: 100%;
339 display: inline-block;
340 justify-content: center;
341 align-items: center;
342 }
346 } 343 }
347 }
348 </style> 344 </style>
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
8 margin: 0 auto; 8 margin: 0 auto;
9 display: flex; 9 display: flex;
10 flex-wrap: wrap; 10 flex-wrap: wrap;
11 height: 100%;
11 12
12 .title { 13 .title {
13 width: 100%; 14 width: 100%;
...@@ -258,7 +259,8 @@ ...@@ -258,7 +259,8 @@
258 .rollTable { 259 .rollTable {
259 margin-top: -2px; 260 margin-top: -2px;
260 display: block; 261 display: block;
261 height: calc(100vh - 185px); 262 height: calc(100% - 60px);
263 // height: calc(100vh - 185px);
262 overflow-y: scroll; 264 overflow-y: scroll;
263 margin-left: 2px; 265 margin-left: 2px;
264 } 266 }
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-10-13 10:37:29 4 * @LastEditTime: 2023-10-13 13:38:21
5 --> 5 -->
6 <template> 6 <template>
7 <div> 7 <div>
...@@ -196,7 +196,7 @@ ...@@ -196,7 +196,7 @@
196 qlxxCol: datas.qlxxCol(), 196 qlxxCol: datas.qlxxCol(),
197 }; 197 };
198 }, 198 },
199 mounted () { 199 created () {
200 sendThis(this) 200 sendThis(this)
201 this.init() 201 this.init()
202 }, 202 },
......