Skip to content

bdc / bdcdj-web

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

登记簿左侧菜单重构

1 parent 56ab0c7f master ... dev
Inline Side-by-side
Showing 6 changed files with 471 additions and 112 deletions
......@@ -4,7 +4,6 @@
* @LastEditTime: 2023-07-28 15:45:21
*/
import { getUserInfo } from '@/api/user'
import { log } from 'bpmn-js-token-simulation'
const state = {
name: '',
userInfo:{},
......
......@@ -18,7 +18,7 @@
</tr>
<tr v-for="(item, index) in bdcqlml" :key="index">
<td>{{ index + 1 }}</td>
<td><el-link type="primary" @click="handleSelectBdcdyh(item.bdcdyh)" :underline="false">{{ item.bdcdyh }} </el-link></td>
<td><el-link type="primary" @click="handleSelectBdcdyh(item)" :underline="false">{{ item.bdcdyh }} </el-link></td>
<td>{{ item.bdclx }}</td>
<td>{{ item.szbs }}</td>
<td>{{ item.bz }}</td>
......
......@@ -5,7 +5,7 @@
-->
<template>
<div class="bdcqljqtsx">
<div class="content">
<div class="content" v-if="qlxxList.ztqlmc">
<div class="title">不动产权利及其他事项<br />登记信息</div>
<div>
不动产单元号:
......
......@@ -6,21 +6,60 @@
<template>
<div class="content">
<div class="left">
<el-tree ref="tree" :data="treedata" :props="defaultProps" @node-click="handleNodeClick"
:default-expand-all="true" :expand-on-click-node="false" node-key="id" :default-checked-keys="[showTab]">
<el-tree
ref="tree"
:data="treedata"
:props="defaultProps"
@node-click="handleNodeClick"
:default-expand-all="true"
:expand-on-click-node="false"
node-key="id"
:default-checked-keys="[showTab]"
>
</el-tree>
<el-collapse v-model="activeName" accordion>
<el-collapse-item
class="sfqqq"
ref="sfq"
v-for="(item, index) in sfqdata"
:key="index"
:name="index"
>
<template slot="title">
<span class="text" @click="addlist(item)">
<span>
{{ item.label }}
</span>
</span>
</template>
<el-button
v-for="(item, index) in item.children"
:re='item'
:key="index"
class="sfqcontent"
@click="addlist(item, index)"
>
{{ item.label }}
</el-button>
</el-collapse-item>
</el-collapse>
</div>
<div class="right">
<component :is="componentTag" @getBdcdyh="getBdcdyh" v-bind="currentSelectProps" />
<component
:is="componentTag"
@getBdcdyh="getBdcdyh"
v-bind="currentSelectProps"
/>
</div>
</div>
</template>
<script>
import { getBdcqljqtsx } from "@/api/djbDetail.js";
import { loadTreeData, getNode } from "./djbFrameData.js";
export default {
data () {
import { getBdcqljqtsx } from "@/api/djbDetail.js";
import { loadTreeData, loadsfqData, getNode } from "./djbFrameData.js";
export default {
data() {
return {
activeName: 0,
//接收参数
// propsParam: this.$attrs,
//左侧目录
......@@ -31,6 +70,7 @@
currentSelectProps: {},
//左侧树形结构数据
treedata: [],
sfqdata: [],
defaultNode: "",
defaultProps: {
value: "id",
......@@ -41,47 +81,125 @@
};
},
props: ["formData"],
mounted () {
mounted() {
this.loadData(this.formData.bdcdyh);
},
methods: {
getBdcdyh (val) {
console.log(val, ';222222222222');
// this.loadData(val);
/**
* @description: getBdcdyh
* @author: miaofang
* 点击不动产单元号事件
*/
getBdcdyh(val) {
this.addloadData(val);
},
/**
* @description: addloadData
* @author: miaofang
*/
addloadData(val) {
getBdcqljqtsx({
bdcdyid: val.bdcdyid,
bdcdyh: val.bdcdyh,
}).then((res) => {
if (res.code === 200) {
if (this.sfqdata.some((item) => item.bdcdyid === val.bdcdyid)) {
let index= this.sfqdata.findIndex((item) => {
return item.bdcdyid ==val.bdcdyid;
});
this.activeName=index
this.setstyle(index,0);
} else {
this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid));
this.activeName = this.sfqdata.length - 1;
this.$nextTick(() => {
this.setstyle(this.sfqdata.length - 1,0);
})
}
}
});
this.currentSelectProps = {
bdcdyid: val.bdcdyid,
bdcdyh: val.bdcdyh,
qllx: this.formData.qllx,
bsmQlxx: this.formData.bsmQlxx,
};
},
/**
* @description: loadData
* @author: renchao
*/
loadData (val) {
loadData(val) {
getBdcqljqtsx({
bdcdyid: this.formData.bdcdyid,
bdcdyh: val,
}).then((res) => {
if (res.code === 200) {
this.treedata = loadTreeData(res.result, this.formData.bdcdyh);
this.treedata = loadTreeData(val);
this.sfqdata.push(
loadsfqData(res.result, val, this.formData.bdcdyid)
);
this.$nextTick(function () {
this.defaultNode = getNode(this.formData.qllx, { linShi: 0, xianShi: 0, liShi: 0 }, this.formData.bdcdylx || "");
this.defaultNode = getNode(
this.formData.qllx,
{ linShi: 0, xianShi: 0, liShi: 0 },
this.formData.bdcdylx || ""
);
this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
this.loadComponent(this.defaultNode.form);
})
this.setstyle(0,0);
});
}
})
});
this.currentSelectProps = {
bdcdyid: this.formData.bdcdyid,
bdcdyh: this.formData.bdcdyh,
bdcdyh: val,
qllx: this.formData.qllx,
bsmQlxx: this.formData.bsmQlxx
}
bsmQlxx: this.formData.bsmQlxx,
};
},
/**
* @description: handleNodeClick
* @param {*} data
* @param {*} node
* @param {*} elem
* @author: renchao
*/
handleNodeClick (data, node, elem) {
handleNodeClick(data) {
this.loadComponent(data.form);
},
/**
* @description: setstyle
* @param {*} data
* @author: renchao
* 设置样式和点击定位到当前功能
*/
setstyle(newindex,index) {
if(index==0){
this.loadComponent(this.$refs.sfq[newindex].$children[0].$attrs.re.form);
}
let dpme = this.$refs.sfq[newindex].$children[0].$el
if (index != 0) {
dpme.style.backgroundColor = "#ffffff";
dpme.style.color = "black";
dpme.style.border = "none";
} else {
dpme.style.backgroundColor = "#f5f5f5";
dpme.style.color = "#0079fe";
dpme.style.borderRight = "4px solid #0079fe";
}
},
/**
* @description: addlist
* @param {*} data
* @author: renchao
* 新增列表功能
*/
addlist(data, index) {
let newindex= this.sfqdata.findIndex((item) => {
return item.bdcdyid ==data.bdcdyid;
});
this.setstyle(newindex,index);
this.currentSelectProps.bdcdyid = data.bdcdyid;
this.loadComponent(data.form);
},
/**
......@@ -89,19 +207,19 @@
* @param {*} form
* @author: renchao
*/
loadComponent (form) {
loadComponent(form) {
this.componentTag = (r) =>
require.ensure([], () => r(require("@/views/registerBook/" + form)))
}
}
}
require.ensure([], () => r(require("@/views/registerBook/" + form)));
},
},
};
</script>
<style scoped lang="scss">
/deep/.rollTable {
/deep/.rollTable {
height: calc(100vh - 300px) !important;
}
}
.content {
.content {
width: 100%;
height: 100%;
display: flex;
......@@ -112,6 +230,7 @@
background-color: #f5f5f5;
color: #333;
border: 1px solid rgb(228, 228, 228);
overflow-y: auto;
}
.right {
......@@ -122,31 +241,90 @@
background-color: #f5f5f5;
border: 1px solid rgb(228, 228, 228);
}
}
}
/deep/ .expanded.el-tree-node__expand-icon,
/deep/ .el-tree-node__expand-icon {
/deep/ .expanded.el-tree-node__expand-icon,
/deep/ .el-tree-node__expand-icon {
visibility: hidden;
}
}
/deep/ .el-tree-node__content {
/deep/ .el-tree-node__content {
border: 1px solid rgb(228, 228, 228);
height: 45px;
}
}
/deep/ .el-tree-node:focus > .el-tree-node__content {
background-color: #f5f5f5;
color: #0079fe;
border-right: 4px solid #0079fe;
}
/deep/ .el-tree-node:focus > .el-tree-node__content {
// background-color: #f5f5f5;
// color: #0079fe;
// border-right: 4px solid #0079fe;
}
/deep/.el-tree-node {
/deep/.el-tree-node {
white-space: pre-wrap;
}
}
/deep/ .is-current > .el-tree-node__content {
/deep/ .is-current > .el-tree-node__content {
// background-color: #f5f5f5;
// color: #0079fe;
// border-right: 4px solid #0079fe;
}
/deep/.el-collapse-item__header {
width: 100%;
cursor: pointer;
position: relative;
.el-collapse-item__arrow {
position: absolute;
top: 15px;
right: 0px;
}
align-items: center;
.text {
width: 100%;
height: 45px;
display: inline-block;
span {
margin-left: 60px;
padding-top: 10px;
display: inline-block;
line-height: 15px;
}
}
height: 45px;
display: inline-block;
line-height: 45px;
border: 1px solid rgb(228, 228, 228);
}
/deep/.el-collapse-item__content {
padding-bottom: 5px;
}
/deep/.sfqcontent {
white-space: wrap;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
width: 100%;
height: 100px;
word-break: break-word;
display: inline;
span {
font-size: 13px;
display: block;
line-height: 15px;
margin-left: 70px;
}
height: 45px;
border: 1px solid rgb(228, 228, 228);
border-right: 4px solid #f5f5f5;
}
.sfqcontent:hover {
background-color: #f5f5f5;
color: black;
}
.sfqcontent:focus {
background-color: #f5f5f5;
color: #0079fe;
border-right: 4px solid #0079fe;
}
}
</style>
......
import { log } from "bpmn-js-token-simulation";
var qlxxPage = [
......@@ -41,31 +42,33 @@ var qlxxPage = [
//组装登记簿树形结构
/**
* @description: 组装登记簿树形结构
* @param {*} qlxxData
* @param {*} bdcdyh
* @author: renchao
*/
export function loadTreeData(qlxxData, bdcdyh) {
export function loadTreeData(bdcdyh) {
let treedata = [];
//加载封面
treedata.push({ id: "djbfm", form: "djbfm.vue", label: "登记簿封面" });
treedata.push({ id: "zdjbxx", form: "zdjbxx.vue", label: "宗地基本信息\n(" + bdcdyh.substring(0, 19) + ")", children: [] });
treedata[1].children.push({ id: "bdcqldjml", form: "bdcqldjml.vue", label: "不动产权利登记目录", children: [] });
treedata[1].children[0].children.push({
id: "bdcqljqtsx", form: "bdcqljqtsx.vue", label: "不动产权利及其他事项\n (" + bdcdyh.slice(19) + ")", children: [],
});
return treedata;
}
export function loadsfqData(qlxxData, bdcdyh,bdcdyid) {
let treedata={
bdcdyid:bdcdyid,id: "bdcqljqtsx", form: "bdcqljqtsx.vue", label: "不动产权利及其他事项\n (" + bdcdyh.slice(19) + ")", children: [],
};
//主体权利
treedata[1].children[0].children[0].children.push(getNode(qlxxData.ztqllx, qlxxData.ztql, qlxxData.bdcdylx));
treedata.children.push(getNode(qlxxData.ztqllx, qlxxData.ztql, qlxxData.bdcdylx,bdcdyid));
//抵押权
treedata[1].children[0].children[0].children.push(getNode("A37", qlxxData.diyaq, ''));
treedata.children.push(getNode("A37", qlxxData.diyaq, '',bdcdyid));
//地役权
treedata[1].children[0].children[0].children.push(getNode("A19", qlxxData.diyiq, ''));
treedata.children.push(getNode("A19", qlxxData.diyiq, '',bdcdyid));
//预告登记
treedata[1].children[0].children[0].children.push(getNode("B40", qlxxData.ygdj, ''));
treedata.children.push(getNode("B40", qlxxData.ygdj, '',bdcdyid));
//异议登记
treedata[1].children[0].children[0].children.push(getNode("B38", qlxxData.yydj, ''));
treedata.children.push(getNode("B38", qlxxData.yydj, '',bdcdyid));
//查封登记
treedata[1].children[0].children[0].children.push(getNode("B39", qlxxData.cfdj, ''));
treedata.children.push(getNode("B39", qlxxData.cfdj, '',bdcdyid));
return treedata;
}
......@@ -78,18 +81,18 @@ export function loadTreeData(qlxxData, bdcdyh) {
* @param {*} bdcdylx
* @author: renchao
*/
export function getNode(qllx, qlxx, bdcdylx) {
export function getNode(qllx, qlxx, bdcdylx,bdcdyid) {
let node;
for (var i = 0; i < qlxxPage.length; i++) {
if (qlxxPage[i].qllx == qllx) {
if (qllx == "A04" || qllx == "A06" || qllx == "A08") {
if (bdcdylx == "4") {
node = { id: "fdcq1", form: "fdcq1.vue", label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
node = {bdcdyid:bdcdyid,id: "fdcq1", form: "fdcq1.vue", label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
} else {
node = { id: "fdcq2", form: "fdcq2.vue", label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
node = { bdcdyid:bdcdyid,id: "fdcq2", form: "fdcq2.vue", label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
}
} else {
node = { id: qlxxPage[i].id, form: qlxxPage[i].form, label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
node = { bdcdyid:bdcdyid,id: qlxxPage[i].id, form: qlxxPage[i].form, label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
}
break;
}
......
......@@ -6,24 +6,60 @@
<template>
<div class="content loadingtext">
<div class="left">
<el-tree ref="tree" :data="treedata" :props="defaultProps" @node-click="handleNodeClick"
:default-expand-all="true" :expand-on-click-node="false" node-key="id" :default-checked-keys="[showTab]">
<el-tree
ref="tree"
:data="treedata"
:props="defaultProps"
@node-click="handleNodeClick"
:default-expand-all="true"
:expand-on-click-node="false"
node-key="id"
:default-checked-keys="[showTab]"
>
</el-tree>
<el-collapse v-model="activeName" accordion>
<el-collapse-item
class="sfqqq"
ref="sfq"
v-for="(item, index) in sfqdata"
:key="index"
:name="index"
>
<template slot="title">
<span class="text" @click="addlist(item)">
<span>
{{ item.label }}
</span>
</span>
</template>
<el-button
v-for="(item, index) in item.children"
:re='item'
:key="index"
class="sfqcontent"
@click="addlist(item, index)"
>
{{ item.label }}
</el-button>
</el-collapse-item>
</el-collapse>
</div>
<div class="right">
<component :is="componentTag" v-bind="currentSelectProps" />
<component
:is="componentTag"
@getBdcdyh="getBdcdyh"
v-bind="currentSelectProps"
/>
</div>
</div>
</template>
<script>
import { getBdcqljqtsx } from "@/api/djbDetail.js";
import { loadTreeData, getNode } from "./djbFrameData.js";
import { searchTaskToDo } from "@/api/workflow/search.js";
import {
leftMenu
} from "@/api/workFlow.js";
export default {
data () {
import { getBdcqljqtsx } from "@/api/djbDetail.js";
import { loadTreeData,loadsfqData, getNode } from "./djbFrameData.js";
import { searchTaskToDo } from "@/api/workflow/search.js";
import { leftMenu } from "@/api/workFlow.js";
export default {
data() {
return {
//接收参数
// propsParam: this.$attrs,
......@@ -35,6 +71,8 @@
currentSelectProps: {},
//左侧树形结构数据
treedata: [],
sfqdata: [],
activeName: 0,
// 查询参数
queryForm: {},
......@@ -47,9 +85,8 @@
showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
};
},
mounted () {
this.getdata()
mounted() {
this.getdata();
},
methods: {
// 截取字符的方法
......@@ -58,17 +95,17 @@
* @param {*} obj
* @author: renchao
*/
getCaption (obj) {
getCaption(obj) {
let index = obj.lastIndexOf("=");
obj = obj.substring(index + 1, obj.length);
return obj
return obj;
},
// 通过不动产业务号获取参数
/**
* @description: 通过不动产业务号获取参数
* @author: renchao
*/
getdata () {
getdata() {
this.queryForm = {
bdcdyh: this.getCaption(window.location.href),
currentPage: 1,
......@@ -76,8 +113,8 @@
pageSize: 10,
qllx: "",
ywh: "",
ywly: ""
}
ywly: "",
};
if (this.queryForm) {
this.$startLoading();
searchTaskToDo({
......@@ -91,7 +128,6 @@
}
});
}
},
// 获取不动产信息
......@@ -101,7 +137,7 @@
* @param {*} b
* @author: renchao
*/
loadBdcdylist (a, b) {
loadBdcdylist(a, b) {
var formdata = new FormData();
formdata.append("bsmSlsq", a);
formdata.append("bestepid", b);
......@@ -109,26 +145,77 @@
if (res.code === 200) {
if (res.result) {
this.currentSelectProps = res.result[0];
this.loadData();
this.loadData(this.currentSelectProps.bdcdyh);
}
}
});
},
/**
* @description: getBdcdyh
* @author: miaofang
* 点击不动产单元号事件
*/
getBdcdyh(val) {
this.addloadData(val);
},
/**
* @description: addloadData
* @author: miaofang
*/
addloadData(val) {
getBdcqljqtsx({
bdcdyid: val.bdcdyid,
bdcdyh: val.bdcdyh,
}).then((res) => {
if (res.code === 200) {
if (this.sfqdata.some((item) => item.bdcdyid === val.bdcdyid)) {
let index= this.sfqdata.findIndex((item) => {
return item.bdcdyid ==val.bdcdyid;
});
this.activeName=index
this.setstyle(index,0);
} else {
this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid));
this.activeName = this.sfqdata.length - 1;
this.$nextTick(() => {
this.setstyle(this.sfqdata.length - 1,0);
})
}
}
});
this.currentSelectProps = {
bdcdyid: val.bdcdyid,
bdcdyh: val.bdcdyh,
qllx: this.formData.qllx,
bsmQlxx: this.formData.bsmQlxx,
};
},
/**
* @description: loadData
* @author: renchao
*/
loadData () {
loadData(val) {
getBdcqljqtsx({
bdcdyid: this.currentSelectProps.bdcdyid,
bdcdyh: this.currentSelectProps.bdcdyh,
bdcdyh: val,
}).then((res) => {
if (res.code === 200) {
this.treedata = loadTreeData(res.result, this.currentSelectProps.bdcdyh);
this.treedata = loadTreeData(
val
);
this.sfqdata.push(
loadsfqData(res.result, val, this.currentSelectProps.bdcdyid)
);
this.$nextTick(function () {
this.defaultNode = getNode(this.currentSelectProps.qllx, { linShi: 0, xianShi: 0, liShi: 0 }, "");
this.defaultNode = getNode(
this.currentSelectProps.qllx,
{ linShi: 0, xianShi: 0, liShi: 0 },
""
);
this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
this.loadComponent(this.defaultNode.form);
this.setstyle(0,0);
});
}
});
......@@ -145,11 +232,45 @@
/**
* @description: 点击登记簿菜单
* @param {*} data
* @param {*} node
* @param {*} elem
* @author: renchao
*/
handleNodeClick (data, node, elem) {
handleNodeClick(data) {
this.loadComponent(data.form);
},
/**
* @description: setstyle
* @param {*} data
* @author: renchao
* 设置样式和点击定位到当前功能
*/
setstyle(newindex,index) {
if(index==0){
this.loadComponent(this.$refs.sfq[newindex].$children[0].$attrs.re.form);
}
let dpme = this.$refs.sfq[newindex].$children[0].$el
if (index != 0) {
dpme.style.backgroundColor = "#ffffff";
dpme.style.color = "black";
dpme.style.border = "none";
} else {
dpme.style.backgroundColor = "#f5f5f5";
dpme.style.color = "#0079fe";
dpme.style.borderRight = "4px solid #0079fe";
}
},
/**
* @description: addlist
* @param {*} data
* @author: renchao
* 新增列表功能
*/
addlist(data, index) {
let newindex= this.sfqdata.findIndex((item) => {
return item.bdcdyid ==data.bdcdyid;
});
this.setstyle(newindex,index);
this.currentSelectProps.bdcdyid = data.bdcdyid;
this.loadComponent(data.form);
},
/**
......@@ -157,19 +278,19 @@
* @param {*} form
* @author: renchao
*/
loadComponent (form) {
loadComponent(form) {
this.componentTag = (r) =>
require.ensure([], () => r(require("@/views/registerBook/" + form)));
},
},
};
};
</script>
<style scoped lang="scss">
/deep/.rollTable {
/deep/.rollTable {
height: calc(120vh - 254px) !important;
}
}
.content {
.content {
width: 100%;
height: 100%;
display: flex;
......@@ -190,31 +311,89 @@
background-color: #f5f5f5;
border: 1px solid rgb(228, 228, 228);
}
}
}
/deep/ .expanded.el-tree-node__expand-icon,
/deep/ .el-tree-node__expand-icon {
/deep/ .expanded.el-tree-node__expand-icon,
/deep/ .el-tree-node__expand-icon {
visibility: hidden;
}
}
/deep/ .el-tree-node__content {
/deep/ .el-tree-node__content {
border: 1px solid rgb(228, 228, 228);
height: 45px;
}
}
/deep/ .el-tree-node:focus > .el-tree-node__content {
background-color: #f5f5f5;
color: #0079fe;
border-right: 4px solid #0079fe;
}
/deep/ .el-tree-node:focus > .el-tree-node__content {
// background-color: #f5f5f5;
// color: #0079fe;
// border-right: 4px solid #0079fe;
}
/deep/.el-tree-node {
/deep/.el-tree-node {
white-space: pre-wrap;
}
}
/deep/ .is-current > .el-tree-node__content {
/deep/ .is-current > .el-tree-node__content {
// background-color: #f5f5f5;
// color: #0079fe;
// border-right: 4px solid #0079fe;
}
/deep/.el-collapse-item__header {
width: 100%;
cursor: pointer;
position: relative;
.el-collapse-item__arrow {
position: absolute;
top: 15px;
right: 0px;
}
align-items: center;
.text {
width: 100%;
height: 45px;
display: inline-block;
span {
margin-left: 60px;
padding-top: 10px;
display: inline-block;
line-height: 15px;
}
}
height: 45px;
display: inline-block;
line-height: 45px;
border: 1px solid rgb(228, 228, 228);
}
/deep/.el-collapse-item__content {
padding-bottom: 5px;
}
/deep/.sfqcontent {
white-space: wrap;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
width: 100%;
height: 100px;
word-break: break-word;
display: inline;
span {
font-size: 13px;
display: block;
line-height: 15px;
margin-left: 70px;
}
height: 45px;
border: 1px solid rgb(228, 228, 228);
border-right: 4px solid #f5f5f5;
}
.sfqcontent:hover {
background-color: #f5f5f5;
color: black;
}
.sfqcontent:focus {
background-color: #f5f5f5;
color: #0079fe;
border-right: 4px solid #0079fe;
}
}
</style>
......