Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
18fb52ac by xiaomiao
Options

登记簿左侧菜单重构

1 parent 56ab0c7f
Inline Side-by-side
Showing 6 changed files with 684 additions and 325 deletions
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
4 * @LastEditTime: 2023-07-28 15:45:21 4 * @LastEditTime: 2023-07-28 15:45:21
5 */ 5 */
6 import { getUserInfo } from '@/api/user' 6 import { getUserInfo } from '@/api/user'
7 import { log } from 'bpmn-js-token-simulation'
8 const state = { 7 const state = {
9 name: '', 8 name: '',
10 userInfo:{}, 9 userInfo:{},
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-08-15 10:39:19 4 * @LastEditTime: 2023-08-15 10:39:19
5 --> 5 -->
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
18 </tr> 18 </tr>
19 <tr v-for="(item, index) in bdcqlml" :key="index"> 19 <tr v-for="(item, index) in bdcqlml" :key="index">
20 <td>{{ index + 1 }}</td> 20 <td>{{ index + 1 }}</td>
21 <td><el-link type="primary" @click="handleSelectBdcdyh(item.bdcdyh)" :underline="false">{{ item.bdcdyh }} </el-link></td> 21 <td><el-link type="primary" @click="handleSelectBdcdyh(item)" :underline="false">{{ item.bdcdyh }} </el-link></td>
22 <td>{{ item.bdclx }}</td> 22 <td>{{ item.bdclx }}</td>
23 <td>{{ item.szbs }}</td> 23 <td>{{ item.szbs }}</td>
24 <td>{{ item.bz }}</td> 24 <td>{{ item.bz }}</td>
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-07-19 09:52:07 4 * @LastEditTime: 2023-07-19 09:52:07
5 --> 5 -->
6 <template> 6 <template>
7 <div class="bdcqljqtsx"> 7 <div class="bdcqljqtsx">
8 <div class="content"> 8 <div class="content" v-if="qlxxList.ztqlmc">
9 <div class="title">不动产权利及其他事项<br />登记信息</div> 9 <div class="title">不动产权利及其他事项<br />登记信息</div>
10 <div> 10 <div>
11 不动产单元号: 11 不动产单元号:
......
...@@ -6,147 +6,325 @@ ...@@ -6,147 +6,325 @@
6 <template> 6 <template>
7 <div class="content"> 7 <div class="content">
8 <div class="left"> 8 <div class="left">
9 <el-tree ref="tree" :data="treedata" :props="defaultProps" @node-click="handleNodeClick" 9 <el-tree
10 :default-expand-all="true" :expand-on-click-node="false" node-key="id" :default-checked-keys="[showTab]"> 10 ref="tree"
11 :data="treedata"
12 :props="defaultProps"
13 @node-click="handleNodeClick"
14 :default-expand-all="true"
15 :expand-on-click-node="false"
16 node-key="id"
17 :default-checked-keys="[showTab]"
18 >
11 </el-tree> 19 </el-tree>
20 <el-collapse v-model="activeName" accordion>
21 <el-collapse-item
22 class="sfqqq"
23 ref="sfq"
24 v-for="(item, index) in sfqdata"
25 :key="index"
26 :name="index"
27 >
28 <template slot="title">
29 <span class="text" @click="addlist(item)">
30 <span>
31 {{ item.label }}
32 </span>
33 </span>
34 </template>
35 <el-button
36 v-for="(item, index) in item.children"
37 :re='item'
38 :key="index"
39 class="sfqcontent"
40 @click="addlist(item, index)"
41 >
42 {{ item.label }}
43 </el-button>
44 </el-collapse-item>
45 </el-collapse>
12 </div> 46 </div>
13 <div class="right"> 47 <div class="right">
14 <component :is="componentTag" @getBdcdyh="getBdcdyh" v-bind="currentSelectProps" /> 48 <component
49 :is="componentTag"
50 @getBdcdyh="getBdcdyh"
51 v-bind="currentSelectProps"
52 />
15 </div> 53 </div>
16 </div> 54 </div>
17 </template> 55 </template>
18 <script> 56 <script>
19 import { getBdcqljqtsx } from "@/api/djbDetail.js"; 57 import { getBdcqljqtsx } from "@/api/djbDetail.js";
20 import { loadTreeData, getNode } from "./djbFrameData.js"; 58 import { loadTreeData, loadsfqData, getNode } from "./djbFrameData.js";
21 export default { 59 export default {
22 data () { 60 data() {
23 return { 61 return {
24 //接收参数 62 activeName: 0,
25 // propsParam: this.$attrs, 63 //接收参数
26 //左侧目录 64 // propsParam: this.$attrs,
27 catalog: {}, 65 //左侧目录
28 //选择加载哪一个组件 66 catalog: {},
29 componentTag: "", 67 //选择加载哪一个组件
30 //子组件接收参数 68 componentTag: "",
31 currentSelectProps: {}, 69 //子组件接收参数
32 //左侧树形结构数据 70 currentSelectProps: {},
33 treedata: [], 71 //左侧树形结构数据
34 defaultNode: "", 72 treedata: [],
35 defaultProps: { 73 sfqdata: [],
36 value: "id", 74 defaultNode: "",
37 children: "children", 75 defaultProps: {
38 label: "label", 76 value: "id",
39 }, 77 children: "children",
40 showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断 78 label: "label",
41 };
42 },
43 props: ["formData"],
44 mounted () {
45 this.loadData(this.formData.bdcdyh);
46 },
47 methods: {
48 getBdcdyh (val) {
49 console.log(val, ';222222222222');
50 // this.loadData(val);
51 }, 79 },
52 /** 80 showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
53 * @description: loadData 81 };
54 * @author: renchao 82 },
55 */ 83 props: ["formData"],
56 loadData (val) { 84 mounted() {
57 getBdcqljqtsx({ 85 this.loadData(this.formData.bdcdyh);
58 bdcdyid: this.formData.bdcdyid, 86 },
59 bdcdyh: val, 87 methods: {
60 }).then((res) => { 88
61 if (res.code === 200) { 89 /**
62 this.treedata = loadTreeData(res.result, this.formData.bdcdyh); 90 * @description: getBdcdyh
63 this.$nextTick(function () { 91 * @author: miaofang
64 this.defaultNode = getNode(this.formData.qllx, { linShi: 0, xianShi: 0, liShi: 0 }, this.formData.bdcdylx || ""); 92 * 点击不动产单元号事件
65 this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点 93 */
66 this.loadComponent(this.defaultNode.form); 94 getBdcdyh(val) {
67 }) 95 this.addloadData(val);
96 },
97 /**
98 * @description: addloadData
99 * @author: miaofang
100 */
101 addloadData(val) {
102 getBdcqljqtsx({
103 bdcdyid: val.bdcdyid,
104 bdcdyh: val.bdcdyh,
105 }).then((res) => {
106 if (res.code === 200) {
107 if (this.sfqdata.some((item) => item.bdcdyid === val.bdcdyid)) {
108 let index= this.sfqdata.findIndex((item) => {
109 return item.bdcdyid ==val.bdcdyid;
110 });
111 this.activeName=index
112 this.setstyle(index,0);
113 } else {
114 this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid));
115 this.activeName = this.sfqdata.length - 1;
116 this.$nextTick(() => {
117 this.setstyle(this.sfqdata.length - 1,0);
118 })
68 } 119 }
69 })
70 this.currentSelectProps = {
71 bdcdyid: this.formData.bdcdyid,
72 bdcdyh: this.formData.bdcdyh,
73 qllx: this.formData.qllx,
74 bsmQlxx: this.formData.bsmQlxx
75 } 120 }
76 }, 121 });
77 /** 122 this.currentSelectProps = {
78 * @description: handleNodeClick 123 bdcdyid: val.bdcdyid,
79 * @param {*} data 124 bdcdyh: val.bdcdyh,
80 * @param {*} node 125 qllx: this.formData.qllx,
81 * @param {*} elem 126 bsmQlxx: this.formData.bsmQlxx,
82 * @author: renchao 127 };
83 */ 128 },
84 handleNodeClick (data, node, elem) { 129 /**
85 this.loadComponent(data.form); 130 * @description: loadData
86 }, 131 * @author: renchao
87 /** 132 */
88 * @description: loadComponent 133 loadData(val) {
89 * @param {*} form 134 getBdcqljqtsx({
90 * @author: renchao 135 bdcdyid: this.formData.bdcdyid,
91 */ 136 bdcdyh: val,
92 loadComponent (form) { 137 }).then((res) => {
93 this.componentTag = (r) => 138 if (res.code === 200) {
94 require.ensure([], () => r(require("@/views/registerBook/" + form))) 139 this.treedata = loadTreeData(val);
140 this.sfqdata.push(
141 loadsfqData(res.result, val, this.formData.bdcdyid)
142 );
143 this.$nextTick(function () {
144 this.defaultNode = getNode(
145 this.formData.qllx,
146 { linShi: 0, xianShi: 0, liShi: 0 },
147 this.formData.bdcdylx || ""
148 );
149 this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
150 this.loadComponent(this.defaultNode.form);
151 this.setstyle(0,0);
152 });
153 }
154 });
155 this.currentSelectProps = {
156 bdcdyid: this.formData.bdcdyid,
157 bdcdyh: val,
158 qllx: this.formData.qllx,
159 bsmQlxx: this.formData.bsmQlxx,
160 };
161 },
162 /**
163 * @description: handleNodeClick
164 * @param {*} data
165 * @author: renchao
166 */
167 handleNodeClick(data) {
168 this.loadComponent(data.form);
169 },
170 /**
171 * @description: setstyle
172 * @param {*} data
173 * @author: renchao
174 * 设置样式和点击定位到当前功能
175 */
176 setstyle(newindex,index) {
177 if(index==0){
178 this.loadComponent(this.$refs.sfq[newindex].$children[0].$attrs.re.form);
95 } 179 }
96 } 180 let dpme = this.$refs.sfq[newindex].$children[0].$el
97 } 181 if (index != 0) {
182 dpme.style.backgroundColor = "#ffffff";
183 dpme.style.color = "black";
184 dpme.style.border = "none";
185 } else {
186 dpme.style.backgroundColor = "#f5f5f5";
187 dpme.style.color = "#0079fe";
188 dpme.style.borderRight = "4px solid #0079fe";
189 }
190 },
191 /**
192 * @description: addlist
193 * @param {*} data
194 * @author: renchao
195 * 新增列表功能
196 */
197 addlist(data, index) {
198 let newindex= this.sfqdata.findIndex((item) => {
199 return item.bdcdyid ==data.bdcdyid;
200 });
201 this.setstyle(newindex,index);
202 this.currentSelectProps.bdcdyid = data.bdcdyid;
203 this.loadComponent(data.form);
204 },
205 /**
206 * @description: loadComponent
207 * @param {*} form
208 * @author: renchao
209 */
210 loadComponent(form) {
211 this.componentTag = (r) =>
212 require.ensure([], () => r(require("@/views/registerBook/" + form)));
213 },
214 },
215 };
98 </script> 216 </script>
99 <style scoped lang="scss"> 217 <style scoped lang="scss">
100 /deep/.rollTable { 218 /deep/.rollTable {
101 height: calc(100vh - 300px) !important; 219 height: calc(100vh - 300px) !important;
102 } 220 }
103
104 .content {
105 width: 100%;
106 height: 100%;
107 display: flex;
108
109 .left {
110 width: 256px;
111 height: 704px;
112 background-color: #f5f5f5;
113 color: #333;
114 border: 1px solid rgb(228, 228, 228);
115 }
116 221
117 .right { 222 .content {
118 width: calc(100% - 256px); 223 width: 100%;
119 height: 704px; 224 height: 100%;
120 // overflow-y: scroll; 225 display: flex;
121 // overflow: auto;
122 background-color: #f5f5f5;
123 border: 1px solid rgb(228, 228, 228);
124 }
125 }
126 226
127 /deep/ .expanded.el-tree-node__expand-icon, 227 .left {
128 /deep/ .el-tree-node__expand-icon { 228 width: 256px;
129 visibility: hidden; 229 height: 704px;
130 } 230 background-color: #f5f5f5;
131 231 color: #333;
132 /deep/ .el-tree-node__content {
133 border: 1px solid rgb(228, 228, 228); 232 border: 1px solid rgb(228, 228, 228);
134 height: 45px; 233 overflow-y: auto;
135 } 234 }
136 235
137 /deep/ .el-tree-node:focus > .el-tree-node__content { 236 .right {
237 width: calc(100% - 256px);
238 height: 704px;
239 // overflow-y: scroll;
240 // overflow: auto;
138 background-color: #f5f5f5; 241 background-color: #f5f5f5;
139 color: #0079fe; 242 border: 1px solid rgb(228, 228, 228);
140 border-right: 4px solid #0079fe;
141 } 243 }
244 }
142 245
143 /deep/.el-tree-node { 246 /deep/ .expanded.el-tree-node__expand-icon,
144 white-space: pre-wrap; 247 /deep/ .el-tree-node__expand-icon {
145 } 248 visibility: hidden;
249 }
146 250
147 /deep/ .is-current > .el-tree-node__content { 251 /deep/ .el-tree-node__content {
148 background-color: #f5f5f5; 252 border: 1px solid rgb(228, 228, 228);
149 color: #0079fe; 253 height: 45px;
150 border-right: 4px solid #0079fe; 254 }
255
256 /deep/ .el-tree-node:focus > .el-tree-node__content {
257 // background-color: #f5f5f5;
258 // color: #0079fe;
259 // border-right: 4px solid #0079fe;
260 }
261
262 /deep/.el-tree-node {
263 white-space: pre-wrap;
264 }
265
266 /deep/ .is-current > .el-tree-node__content {
267 // background-color: #f5f5f5;
268 // color: #0079fe;
269 // border-right: 4px solid #0079fe;
270 }
271
272 /deep/.el-collapse-item__header {
273 width: 100%;
274 cursor: pointer;
275 position: relative;
276 .el-collapse-item__arrow {
277 position: absolute;
278 top: 15px;
279 right: 0px;
280 }
281 align-items: center;
282 .text {
283 width: 100%;
284 height: 45px;
285 display: inline-block;
286 span {
287 margin-left: 60px;
288 padding-top: 10px;
289 display: inline-block;
290 line-height: 15px;
291 }
292 }
293 height: 45px;
294 display: inline-block;
295 line-height: 45px;
296 border: 1px solid rgb(228, 228, 228);
297 }
298 /deep/.el-collapse-item__content {
299 padding-bottom: 5px;
300 }
301 /deep/.sfqcontent {
302 white-space: wrap;
303 border: none;
304 padding: 0;
305 margin: 0;
306 cursor: pointer;
307 width: 100%;
308 height: 100px;
309 word-break: break-word;
310 display: inline;
311 span {
312 font-size: 13px;
313 display: block;
314 line-height: 15px;
315 margin-left: 70px;
151 } 316 }
317 height: 45px;
318 border: 1px solid rgb(228, 228, 228);
319 border-right: 4px solid #f5f5f5;
320 }
321 .sfqcontent:hover {
322 background-color: #f5f5f5;
323 color: black;
324 }
325 .sfqcontent:focus {
326 background-color: #f5f5f5;
327 color: #0079fe;
328 border-right: 4px solid #0079fe;
329 }
152 </style> 330 </style>
......
1 import { log } from "bpmn-js-token-simulation";
1 2
2 3
3 var qlxxPage = [ 4 var qlxxPage = [
...@@ -41,34 +42,36 @@ var qlxxPage = [ ...@@ -41,34 +42,36 @@ var qlxxPage = [
41 //组装登记簿树形结构 42 //组装登记簿树形结构
42 /** 43 /**
43 * @description: 组装登记簿树形结构 44 * @description: 组装登记簿树形结构
44 * @param {*} qlxxData
45 * @param {*} bdcdyh 45 * @param {*} bdcdyh
46 * @author: renchao 46 * @author: renchao
47 */ 47 */
48 export function loadTreeData(qlxxData, bdcdyh) { 48 export function loadTreeData(bdcdyh) {
49 let treedata = []; 49 let treedata = [];
50 //加载封面 50 //加载封面
51 treedata.push({ id: "djbfm", form: "djbfm.vue", label: "登记簿封面" }); 51 treedata.push({ id: "djbfm", form: "djbfm.vue", label: "登记簿封面" });
52 treedata.push({ id: "zdjbxx", form: "zdjbxx.vue", label: "宗地基本信息\n(" + bdcdyh.substring(0, 19) + ")", children: [] }); 52 treedata.push({ id: "zdjbxx", form: "zdjbxx.vue", label: "宗地基本信息\n(" + bdcdyh.substring(0, 19) + ")", children: [] });
53 treedata[1].children.push({ id: "bdcqldjml", form: "bdcqldjml.vue", label: "不动产权利登记目录", children: [] }); 53 treedata[1].children.push({ id: "bdcqldjml", form: "bdcqldjml.vue", label: "不动产权利登记目录", children: [] });
54 treedata[1].children[0].children.push({
55 id: "bdcqljqtsx", form: "bdcqljqtsx.vue", label: "不动产权利及其他事项\n (" + bdcdyh.slice(19) + ")", children: [],
56 });
57 //主体权利
58 treedata[1].children[0].children[0].children.push(getNode(qlxxData.ztqllx, qlxxData.ztql, qlxxData.bdcdylx));
59 //抵押权
60 treedata[1].children[0].children[0].children.push(getNode("A37", qlxxData.diyaq, ''));
61 //地役权
62 treedata[1].children[0].children[0].children.push(getNode("A19", qlxxData.diyiq, ''));
63 //预告登记
64 treedata[1].children[0].children[0].children.push(getNode("B40", qlxxData.ygdj, ''));
65 //异议登记
66 treedata[1].children[0].children[0].children.push(getNode("B38", qlxxData.yydj, ''));
67 //查封登记
68 treedata[1].children[0].children[0].children.push(getNode("B39", qlxxData.cfdj, ''));
69
70 return treedata; 54 return treedata;
71 } 55 }
56 export function loadsfqData(qlxxData, bdcdyh,bdcdyid) {
57 let treedata={
58 bdcdyid:bdcdyid,id: "bdcqljqtsx", form: "bdcqljqtsx.vue", label: "不动产权利及其他事项\n (" + bdcdyh.slice(19) + ")", children: [],
59 };
60 //主体权利
61 treedata.children.push(getNode(qlxxData.ztqllx, qlxxData.ztql, qlxxData.bdcdylx,bdcdyid));
62 //抵押权
63 treedata.children.push(getNode("A37", qlxxData.diyaq, '',bdcdyid));
64 //地役权
65 treedata.children.push(getNode("A19", qlxxData.diyiq, '',bdcdyid));
66 //预告登记
67 treedata.children.push(getNode("B40", qlxxData.ygdj, '',bdcdyid));
68 //异议登记
69 treedata.children.push(getNode("B38", qlxxData.yydj, '',bdcdyid));
70 //查封登记
71 treedata.children.push(getNode("B39", qlxxData.cfdj, '',bdcdyid));
72
73 return treedata;
74 }
72 75
73 //获取权利类型、不动产单元类型对应的树形节点信息 76 //获取权利类型、不动产单元类型对应的树形节点信息
74 /** 77 /**
...@@ -78,18 +81,18 @@ export function loadTreeData(qlxxData, bdcdyh) { ...@@ -78,18 +81,18 @@ export function loadTreeData(qlxxData, bdcdyh) {
78 * @param {*} bdcdylx 81 * @param {*} bdcdylx
79 * @author: renchao 82 * @author: renchao
80 */ 83 */
81 export function getNode(qllx, qlxx, bdcdylx) { 84 export function getNode(qllx, qlxx, bdcdylx,bdcdyid) {
82 let node; 85 let node;
83 for (var i = 0; i < qlxxPage.length; i++) { 86 for (var i = 0; i < qlxxPage.length; i++) {
84 if (qlxxPage[i].qllx == qllx) { 87 if (qlxxPage[i].qllx == qllx) {
85 if (qllx == "A04" || qllx == "A06" || qllx == "A08") { 88 if (qllx == "A04" || qllx == "A06" || qllx == "A08") {
86 if (bdcdylx == "4") { 89 if (bdcdylx == "4") {
87 node = { id: "fdcq1", form: "fdcq1.vue", label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"}; 90 node = {bdcdyid:bdcdyid,id: "fdcq1", form: "fdcq1.vue", label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
88 } else { 91 } else {
89 node = { id: "fdcq2", form: "fdcq2.vue", label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"}; 92 node = { bdcdyid:bdcdyid,id: "fdcq2", form: "fdcq2.vue", label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
90 } 93 }
91 } else { 94 } else {
92 node = { id: qlxxPage[i].id, form: qlxxPage[i].form, label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"}; 95 node = { bdcdyid:bdcdyid,id: qlxxPage[i].id, form: qlxxPage[i].form, label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
93 } 96 }
94 break; 97 break;
95 } 98 }
......
...@@ -6,215 +6,394 @@ ...@@ -6,215 +6,394 @@
6 <template> 6 <template>
7 <div class="content loadingtext"> 7 <div class="content loadingtext">
8 <div class="left"> 8 <div class="left">
9 <el-tree ref="tree" :data="treedata" :props="defaultProps" @node-click="handleNodeClick" 9 <el-tree
10 :default-expand-all="true" :expand-on-click-node="false" node-key="id" :default-checked-keys="[showTab]"> 10 ref="tree"
11 :data="treedata"
12 :props="defaultProps"
13 @node-click="handleNodeClick"
14 :default-expand-all="true"
15 :expand-on-click-node="false"
16 node-key="id"
17 :default-checked-keys="[showTab]"
18 >
11 </el-tree> 19 </el-tree>
20 <el-collapse v-model="activeName" accordion>
21 <el-collapse-item
22 class="sfqqq"
23 ref="sfq"
24 v-for="(item, index) in sfqdata"
25 :key="index"
26 :name="index"
27 >
28 <template slot="title">
29 <span class="text" @click="addlist(item)">
30 <span>
31 {{ item.label }}
32 </span>
33 </span>
34 </template>
35 <el-button
36 v-for="(item, index) in item.children"
37 :re='item'
38 :key="index"
39 class="sfqcontent"
40 @click="addlist(item, index)"
41 >
42 {{ item.label }}
43 </el-button>
44 </el-collapse-item>
45 </el-collapse>
12 </div> 46 </div>
13 <div class="right"> 47 <div class="right">
14 <component :is="componentTag" v-bind="currentSelectProps" /> 48 <component
49 :is="componentTag"
50 @getBdcdyh="getBdcdyh"
51 v-bind="currentSelectProps"
52 />
15 </div> 53 </div>
16 </div> 54 </div>
17 </template> 55 </template>
18 <script> 56 <script>
19 import { getBdcqljqtsx } from "@/api/djbDetail.js"; 57 import { getBdcqljqtsx } from "@/api/djbDetail.js";
20 import { loadTreeData, getNode } from "./djbFrameData.js"; 58 import { loadTreeData,loadsfqData, getNode } from "./djbFrameData.js";
21 import { searchTaskToDo } from "@/api/workflow/search.js"; 59 import { searchTaskToDo } from "@/api/workflow/search.js";
22 import { 60 import { leftMenu } from "@/api/workFlow.js";
23 leftMenu 61 export default {
24 } from "@/api/workFlow.js"; 62 data() {
25 export default { 63 return {
26 data () { 64 //接收参数
27 return { 65 // propsParam: this.$attrs,
28 //接收参数 66 //左侧目录
29 // propsParam: this.$attrs, 67 catalog: {},
30 //左侧目录 68 //选择加载哪一个组件
31 catalog: {}, 69 componentTag: "",
32 //选择加载哪一个组件 70 //子组件接收参数
33 componentTag: "", 71 currentSelectProps: {},
34 //子组件接收参数 72 //左侧树形结构数据
35 currentSelectProps: {}, 73 treedata: [],
36 //左侧树形结构数据 74 sfqdata: [],
37 treedata: [], 75 activeName: 0,
38 // 查询参数 76 // 查询参数
39 queryForm: {}, 77 queryForm: {},
40 78
41 defaultNode: "", 79 defaultNode: "",
42 defaultProps: { 80 defaultProps: {
43 value: "id", 81 value: "id",
44 children: "children", 82 children: "children",
45 label: "label", 83 label: "label",
46 }, 84 },
47 showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断 85 showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
48 }; 86 };
87 },
88 mounted() {
89 this.getdata();
90 },
91 methods: {
92 // 截取字符的方法
93 /**
94 * @description: 截取字符的方法
95 * @param {*} obj
96 * @author: renchao
97 */
98 getCaption(obj) {
99 let index = obj.lastIndexOf("=");
100 obj = obj.substring(index + 1, obj.length);
101 return obj;
49 }, 102 },
50 mounted () { 103 // 通过不动产业务号获取参数
51 this.getdata() 104 /**
105 * @description: 通过不动产业务号获取参数
106 * @author: renchao
107 */
108 getdata() {
109 this.queryForm = {
110 bdcdyh: this.getCaption(window.location.href),
111 currentPage: 1,
112 djlx: "",
113 pageSize: 10,
114 qllx: "",
115 ywh: "",
116 ywly: "",
117 };
118 if (this.queryForm) {
119 this.$startLoading();
120 searchTaskToDo({
121 ...this.queryForm,
122 }).then((res) => {
123 if (res.code === 200) {
124 let { records } = res.result;
52 125
126 this.loadBdcdylist(records[0].bsmSlsq, records[0].bestepid);
127 this.$endLoading();
128 }
129 });
130 }
53 }, 131 },
54 methods: {
55 // 截取字符的方法
56 /**
57 * @description: 截取字符的方法
58 * @param {*} obj
59 * @author: renchao
60 */
61 getCaption (obj) {
62 let index = obj.lastIndexOf("=");
63 obj = obj.substring(index + 1, obj.length);
64 return obj
65 },
66 // 通过不动产业务号获取参数
67 /**
68 * @description: 通过不动产业务号获取参数
69 * @author: renchao
70 */
71 getdata () {
72 this.queryForm = {
73 bdcdyh: this.getCaption(window.location.href),
74 currentPage: 1,
75 djlx: "",
76 pageSize: 10,
77 qllx: "",
78 ywh: "",
79 ywly: ""
80 }
81 if (this.queryForm) {
82 this.$startLoading();
83 searchTaskToDo({
84 ...this.queryForm,
85 }).then((res) => {
86 if (res.code === 200) {
87 let { records } = res.result;
88 132
89 this.loadBdcdylist(records[0].bsmSlsq, records[0].bestepid); 133 // 获取不动产信息
90 this.$endLoading(); 134 /**
91 } 135 * @description: 获取不动产信息
92 }); 136 * @param {*} a
137 * @param {*} b
138 * @author: renchao
139 */
140 loadBdcdylist(a, b) {
141 var formdata = new FormData();
142 formdata.append("bsmSlsq", a);
143 formdata.append("bestepid", b);
144 leftMenu(formdata).then((res) => {
145 if (res.code === 200) {
146 if (res.result) {
147 this.currentSelectProps = res.result[0];
148 this.loadData(this.currentSelectProps.bdcdyh);
149 }
93 } 150 }
151 });
152 },
94 153
95 }, 154 /**
96 155 * @description: getBdcdyh
97 // 获取不动产信息 156 * @author: miaofang
98 /** 157 * 点击不动产单元号事件
99 * @description: 获取不动产信息 158 */
100 * @param {*} a 159 getBdcdyh(val) {
101 * @param {*} b 160 this.addloadData(val);
102 * @author: renchao 161 },
103 */ 162 /**
104 loadBdcdylist (a, b) { 163 * @description: addloadData
105 var formdata = new FormData(); 164 * @author: miaofang
106 formdata.append("bsmSlsq", a); 165 */
107 formdata.append("bestepid", b); 166 addloadData(val) {
108 leftMenu(formdata).then((res) => { 167 getBdcqljqtsx({
109 if (res.code === 200) { 168 bdcdyid: val.bdcdyid,
110 if (res.result) { 169 bdcdyh: val.bdcdyh,
111 this.currentSelectProps = res.result[0]; 170 }).then((res) => {
112 this.loadData(); 171 if (res.code === 200) {
113 } 172 if (this.sfqdata.some((item) => item.bdcdyid === val.bdcdyid)) {
114 } 173 let index= this.sfqdata.findIndex((item) => {
115 }); 174 return item.bdcdyid ==val.bdcdyid;
116 },
117 /**
118 * @description: loadData
119 * @author: renchao
120 */
121 loadData () {
122 getBdcqljqtsx({
123 bdcdyid: this.currentSelectProps.bdcdyid,
124 bdcdyh: this.currentSelectProps.bdcdyh,
125 }).then((res) => {
126 if (res.code === 200) {
127 this.treedata = loadTreeData(res.result, this.currentSelectProps.bdcdyh);
128 this.$nextTick(function () {
129 this.defaultNode = getNode(this.currentSelectProps.qllx, { linShi: 0, xianShi: 0, liShi: 0 }, "");
130 this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
131 this.loadComponent(this.defaultNode.form);
132 }); 175 });
176 this.activeName=index
177 this.setstyle(index,0);
178 } else {
179 this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid));
180 this.activeName = this.sfqdata.length - 1;
181 this.$nextTick(() => {
182 this.setstyle(this.sfqdata.length - 1,0);
183 })
133 } 184 }
134 }); 185 }
135 this.currentSelectProps = { 186 });
136 bdcdyid: this.currentSelectProps.bdcdyid, 187 this.currentSelectProps = {
137 bdcdyh: this.currentSelectProps.bdcdyh, 188 bdcdyid: val.bdcdyid,
138 qllx: this.currentSelectProps.qllx, 189 bdcdyh: val.bdcdyh,
139 bsmQlxx: this.currentSelectProps.bsmQlxx, 190 qllx: this.formData.qllx,
140 }; 191 bsmQlxx: this.formData.bsmQlxx,
141 }, 192 };
142 /* 193 },
194 /**
195 * @description: loadData
196 * @author: renchao
197 */
198 loadData(val) {
199 getBdcqljqtsx({
200 bdcdyid: this.currentSelectProps.bdcdyid,
201 bdcdyh: val,
202 }).then((res) => {
203 if (res.code === 200) {
204 this.treedata = loadTreeData(
205 val
206 );
207 this.sfqdata.push(
208 loadsfqData(res.result, val, this.currentSelectProps.bdcdyid)
209 );
210 this.$nextTick(function () {
211 this.defaultNode = getNode(
212 this.currentSelectProps.qllx,
213 { linShi: 0, xianShi: 0, liShi: 0 },
214 ""
215 );
216 this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
217 this.loadComponent(this.defaultNode.form);
218 this.setstyle(0,0);
219 });
220 }
221 });
222 this.currentSelectProps = {
223 bdcdyid: this.currentSelectProps.bdcdyid,
224 bdcdyh: this.currentSelectProps.bdcdyh,
225 qllx: this.currentSelectProps.qllx,
226 bsmQlxx: this.currentSelectProps.bsmQlxx,
227 };
228 },
229 /*
143 点击登记簿菜单 230 点击登记簿菜单
144 */ 231 */
232 /**
233 * @description: 点击登记簿菜单
234 * @param {*} data
235 * @author: renchao
236 */
237 handleNodeClick(data) {
238 this.loadComponent(data.form);
239 },
240
241 /**
242 * @description: setstyle
243 * @param {*} data
244 * @author: renchao
245 * 设置样式和点击定位到当前功能
246 */
247 setstyle(newindex,index) {
248 if(index==0){
249 this.loadComponent(this.$refs.sfq[newindex].$children[0].$attrs.re.form);
250 }
251 let dpme = this.$refs.sfq[newindex].$children[0].$el
252 if (index != 0) {
253 dpme.style.backgroundColor = "#ffffff";
254 dpme.style.color = "black";
255 dpme.style.border = "none";
256 } else {
257 dpme.style.backgroundColor = "#f5f5f5";
258 dpme.style.color = "#0079fe";
259 dpme.style.borderRight = "4px solid #0079fe";
260 }
261 },
262 /**
263 * @description: addlist
264 * @param {*} data
265 * @author: renchao
266 * 新增列表功能
267 */
268 addlist(data, index) {
269 let newindex= this.sfqdata.findIndex((item) => {
270 return item.bdcdyid ==data.bdcdyid;
271 });
272 this.setstyle(newindex,index);
273 this.currentSelectProps.bdcdyid = data.bdcdyid;
274 this.loadComponent(data.form);
275 },
145 /** 276 /**
146 * @description: 点击登记簿菜单 277 * @description: loadComponent
147 * @param {*} data 278 * @param {*} form
148 * @param {*} node 279 * @author: renchao
149 * @param {*} elem 280 */
150 * @author: renchao 281 loadComponent(form) {
151 */ 282 this.componentTag = (r) =>
152 handleNodeClick (data, node, elem) { 283 require.ensure([], () => r(require("@/views/registerBook/" + form)));
153 this.loadComponent(data.form);
154 },
155 /**
156 * @description: loadComponent
157 * @param {*} form
158 * @author: renchao
159 */
160 loadComponent (form) {
161 this.componentTag = (r) =>
162 require.ensure([], () => r(require("@/views/registerBook/" + form)));
163 },
164 }, 284 },
165 }; 285 },
286 };
166 </script> 287 </script>
167 <style scoped lang="scss"> 288 <style scoped lang="scss">
168 /deep/.rollTable { 289 /deep/.rollTable {
169 height: calc(120vh - 254px) !important; 290 height: calc(120vh - 254px) !important;
291 }
292
293 .content {
294 width: 100%;
295 height: 100%;
296 display: flex;
297
298 .left {
299 width: 256px;
300 height: 100%;
301 background-color: #f5f5f5;
302 color: #333;
303 border: 1px solid rgb(228, 228, 228);
170 } 304 }
171 305
172 .content { 306 .right {
173 width: 100%; 307 width: calc(100% - 256px);
174 height: 100%; 308 height: 100%;
175 display: flex; 309 // overflow-y: scroll;
310 overflow: auto;
311 background-color: #f5f5f5;
312 border: 1px solid rgb(228, 228, 228);
313 }
314 }
176 315
177 .left { 316 /deep/ .expanded.el-tree-node__expand-icon,
178 width: 256px; 317 /deep/ .el-tree-node__expand-icon {
179 height: 100%; 318 visibility: hidden;
180 background-color: #f5f5f5; 319 }
181 color: #333;
182 border: 1px solid rgb(228, 228, 228);
183 }
184 320
185 .right { 321 /deep/ .el-tree-node__content {
186 width: calc(100% - 256px); 322 border: 1px solid rgb(228, 228, 228);
187 height: 100%; 323 height: 45px;
188 // overflow-y: scroll; 324 }
189 overflow: auto;
190 background-color: #f5f5f5;
191 border: 1px solid rgb(228, 228, 228);
192 }
193 }
194 325
195 /deep/ .expanded.el-tree-node__expand-icon, 326 /deep/ .el-tree-node:focus > .el-tree-node__content {
196 /deep/ .el-tree-node__expand-icon { 327 // background-color: #f5f5f5;
197 visibility: hidden; 328 // color: #0079fe;
198 } 329 // border-right: 4px solid #0079fe;
330 }
199 331
200 /deep/ .el-tree-node__content { 332 /deep/.el-tree-node {
201 border: 1px solid rgb(228, 228, 228); 333 white-space: pre-wrap;
202 height: 45px; 334 }
203 }
204 335
205 /deep/ .el-tree-node:focus > .el-tree-node__content { 336 /deep/ .is-current > .el-tree-node__content {
206 background-color: #f5f5f5; 337 // background-color: #f5f5f5;
207 color: #0079fe; 338 // color: #0079fe;
208 border-right: 4px solid #0079fe; 339 // border-right: 4px solid #0079fe;
340 }
341 /deep/.el-collapse-item__header {
342 width: 100%;
343 cursor: pointer;
344 position: relative;
345 .el-collapse-item__arrow {
346 position: absolute;
347 top: 15px;
348 right: 0px;
209 } 349 }
210 350 align-items: center;
211 /deep/.el-tree-node { 351 .text {
212 white-space: pre-wrap; 352 width: 100%;
353 height: 45px;
354 display: inline-block;
355 span {
356 margin-left: 60px;
357 padding-top: 10px;
358 display: inline-block;
359 line-height: 15px;
360 }
213 } 361 }
214 362 height: 45px;
215 /deep/ .is-current > .el-tree-node__content { 363 display: inline-block;
216 background-color: #f5f5f5; 364 line-height: 45px;
217 color: #0079fe; 365 border: 1px solid rgb(228, 228, 228);
218 border-right: 4px solid #0079fe; 366 }
367 /deep/.el-collapse-item__content {
368 padding-bottom: 5px;
369 }
370 /deep/.sfqcontent {
371 white-space: wrap;
372 border: none;
373 padding: 0;
374 margin: 0;
375 cursor: pointer;
376 width: 100%;
377 height: 100px;
378 word-break: break-word;
379 display: inline;
380 span {
381 font-size: 13px;
382 display: block;
383 line-height: 15px;
384 margin-left: 70px;
219 } 385 }
386 height: 45px;
387 border: 1px solid rgb(228, 228, 228);
388 border-right: 4px solid #f5f5f5;
389 }
390 .sfqcontent:hover {
391 background-color: #f5f5f5;
392 color: black;
393 }
394 .sfqcontent:focus {
395 background-color: #f5f5f5;
396 color: #0079fe;
397 border-right: 4px solid #0079fe;
398 }
220 </style> 399 </style>
......