Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
6bf209c4 by 蔡俊立
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web

2 parents 0a41b548 371ab015
Inline Side-by-side
Showing 7 changed files with 459 additions and 323 deletions
......@@ -114,3 +114,11 @@ export function saveSpyj (data) {
data
})
}
// 登簿接口
export function record (data) {
return request({
url: '/business/workFlow/record',
method: 'post',
data
})
}
......
<template>
<div class="model">
<div class="mask">123</div>
<div class="model-dialog">
<div class="model-header">
<span>提示</span>
<a href="javascript:;" class="icon-close"></a>
</div>
<div class="model-body">
<div class="body">这是条消息</div>
</div>
<div class="model-footer">
<button class="btn">确认</button>
</div>
</div>
</div>
</template>
<style scoped lang='scss'>
//css部分
.mask {
position: fixed; //这里用固定定位，后面设置动画时才不受影响
top: 0;
height: 100%;
width: 100%;
background-color: rgba(167, 165, 165, 0.486);
opacity: 0.5;
z-index: 9;
}
.model-dialog {
position: absolute;
//让弹框居中显示
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 12px;
width: 600px;
height: 300px;
border: 1px solid #f5f5f5;
overflow: hidden;
z-index: 10; //这里注意层级要比mask大，覆盖它
}
.model-header {
position: relative;
height: 50px;
padding-left: 10px;
padding-top: 10px;
font-size: 20px;
line-height: 50px;
background-color: #f5f5f5;
border-bottom: 1px solid rgb(177, 176, 176);
}
.model-body {
height: 150px;
line-height: 150px;
font-size: 28px;
text-align: center;
background-color: #fff;
}
.model-footer {
background-color: #f5f5f5;
height: 100px;
text-align: center;
line-height: 100px;
}
.btn {
width: 180px;
height: 40px;
border-radius: 8px;
background-color: rgb(180, 103, 103);
color: #fff;
font-size: 18px;
border: none;
}
.icon-close {
position: absolute; //如果不加绝对布局，图表显示不出来
background-color: pink;
right: 15px;
top: 16px;
width: 30px;
height: 30px;
z-index: 10;
//background: url("../assets/icon-close.png") no-repeat;
background-size: contain;
}
</style>
\ No newline at end of file
import filter from '@/utils/filter.js'
class data extends filter {
constructor() {
super()
}
columns () {
return {
title: "建设用地使用权、宅基地使用权登记信息",
columns: [
{
prop: "ssywh",
label: "上手业务号"
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "qlrlx",
label: "权利人类型",
},
{
prop: "qlrmc",
label: "权利人",
},
{
prop: "qlrzjzl",
label: "证件种类",
},
{
prop: "qlrzjhm",
label: "证件号",
},
{
prop: "gyfs",
label: "共有情况",
},
{
prop: "mj",
label: "使用权面积(m²)",
},
{
prop: "qlxz",
label: "权利性质",
},
{
prop: "ytmc",
label: "土地用途",
},
{
prop: "syqqzsj",
label: "使用权起止时间",
},
{
prop: "tdsyqx",
label: "土地使用期限",
},
{
prop: "qdjg",
label: "取得价格(万元)",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "bdcqzh",
label: "不动产权证号",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "fj",
label: "附记",
},
]
}
return [
{
prop: "ssywh",
label: "上手业务号",
width: "120"
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "qlrlx",
label: "权利人类型",
},
{
prop: "qlrmc",
label: "权利人",
},
{
prop: "qlrzjzl",
label: "证件种类",
},
{
prop: "qlrzjhm",
label: "证件号",
},
{
prop: "gyfs",
label: "共有情况",
},
{
prop: "mj",
label: "使用权面积(m²)",
},
{
prop: "qlxz",
label: "权利性质",
},
{
prop: "ytmc",
label: "土地用途",
},
{
prop: "syqqzsj",
label: "使用权起止时间",
},
{
prop: "tdsyqx",
label: "土地使用期限",
},
{
prop: "qdjg",
label: "取得价格(万元)",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "bdcqzh",
label: "不动产权证号",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "fj",
label: "附记",
},
]
}
}
......
......@@ -12,14 +12,14 @@
</div>
</div>
<div class="xxTableBox">
<table class="xxTable" :width="tableWidth">
<table class="xxTable">
<tr>
<th rowspan="3">业务类型</th>
</tr>
<!-- 第一行表头 -->
<tr class="one" id="">
<tr class="one">
<th v-for="(item, index) in ths" :key="index" :class="[item.class, item.type == '临时' ? 'linshiIcon' : '']">
<div class="icon" v-if="item.type == '临时'">{{ item.type }}</div>
<div class="icon" v-if="item.type == '临时'">正在办理</div>
{{ item.type }}
</th>
</tr>
......@@ -49,138 +49,96 @@
</template>
<script>
import { mapGetters } from "vuex";
import { datas } from "./jsydsyq";
import { getJsydsyqList } from "@/api/zhcx.js";
export default {
name: "djxxTable",
props: {
showType: "",
},
name: "jsydsyq",
data () {
return {
checkList: ["临时", "现势", "历史"],
tableWidth: 810,
type: datas.columns(),
tableData: [],
showTableData: [],
ths: [],
showThs: [],
columns: [],
title: "",
title: "建设用地使用权、宅基地使用权登记信息",
emptyData: {
ssywh: '',
dah: '',
ywh: '',
bdcdyh: "",
zl: "",
qlrlx: '',
qlrmc: "",
qlrzjzl: "",
qlrzjhm: "",
gyfs: "",
mj: null,
qlxz: '',
ytmc: "",
syqqzsj: null,
tdsyqx: null,
qdjg: null,
djyy: '',
bdcqzh: null,
djsj: '',
dbr: '',
fj: "",
qllxmc: "",
djlxmc: '',
qszt: "",
}
};
},
computed: {
...mapGetters(["djbxx"]),
},
watch: {
showType: {
handler (newVlue) {
// 清空值
this.tableData = [];
this.ths = [];
this.columns = this.type[newVlue].columns;
this.title = this.type[newVlue].title;
this.checkList = ["临时", "现势", "历史"];
this.tableWidth = 810;
let detail;
if (newVlue === "JSYDSYQ") {
getJsydsyqList({
bdcdyid: "2b33851f4edfd468ceef4d68c370bd41",
qllx: "A03",
qszt: ["1"]
}).then((res) => {
if (res.code === 200) {
detail = res.result;
}
});
} else {
detail = this.djbxx.detail.qlxxs[newVlue];
}
detail.forEach((item) => {
this.tableData.push(item);
if (item.qszt == "0") {
this.ths.push({
type: "临时",
qllxmc: item.qllxmc,
djlxmc: item.djlxmc,
prop: "linshi",
class: "linshi",
});
} else if (item.qszt == "1") {
this.ths.push({
type: "现势",
qllxmc: item.qllxmc,
djlxmc: item.djlxmc,
prop: "xianshi",
class: "xianshi",
});
} else if (item.qszt == "2") {
this.ths.push({
type: "历史",
qllxmc: item.qllxmc,
djlxmc: item.djlxmc,
prop: "lishi",
class: "lishi",
});
}
async created () {
// 清空值
this.tableData = [];
this.ths = [];
this.columns = datas.columns();
let res = await getJsydsyqList({
bdcdyid: "2b33851f4edfd468ceef4d68c370bd41",
qllx: "A03",
qszt: ["1"]
})
let resList = res.result.result ? res.result.result : []
if (resList.length < 3) {
let num = 3 - resList.length
for (let i = 0; i < num; i++) {
resList.push(this.emptyData)
}
}
let detail = resList
detail.length > 0 && detail.forEach((item) => {
this.tableData.push(item);
if (item.qszt == "0") {
this.ths.push({
type: "临时",
qllxmc: item.qllxmc,
djlxmc: item.djlxmc,
prop: "linshi",
class: "linshi",
});
this.showTableData = this.tableData;
this.showThs = this.ths;
let width = (this.tableData.length - 3) * 223 + this.tableWidth;
this.tableWidth = this.tableData.length > 3 ? width : 810;
},
immediate: true,
},
} else if (item.qszt == "1") {
this.ths.push({
type: "现势",
qllxmc: item.qllxmc,
djlxmc: item.djlxmc,
prop: "xianshi",
class: "xianshi",
});
} else if (item.qszt == "2") {
this.ths.push({
type: "历史",
qllxmc: item.qllxmc,
djlxmc: item.djlxmc,
prop: "lishi",
class: "lishi",
});
}
});
this.showTableData = this.tableData;
},
methods: {
checkChange () {
var checkKey = [];
this.ths = [];
this.tableWidth = 810;
this.checkList.forEach((item) => {
if (item == "临时") {
checkKey.push("0");
}
if (item == "现势") {
checkKey.push("1");
}
if (item == "历史") {
checkKey.push("2");
}
});
this.showTableData = this.tableData.filter((item) =>
checkKey.includes(item.qszt)
);
this.showTableData.forEach((item) => {
if (item.qszt == "0") {
this.ths.push({
type: "临时",
qllxmc: item.qllxmc,
djlxmc: item.djlxmc,
prop: "linshi",
class: "linshi",
});
} else if (item.qszt == "1") {
this.ths.push({
type: "现势",
qllxmc: item.qllxmc,
djlxmc: item.djlxmc,
prop: "xianshi",
class: "xianshi",
});
} else if (item.qszt == "2") {
this.ths.push({
type: "历史",
qllxmc: item.qllxmc,
djlxmc: item.djlxmc,
prop: "lishi",
class: "lishi",
});
}
});
let width = (this.showTableData.length - 3) * 223 + this.tableWidth;
this.tableWidth = this.showTableData.length > 3 ? width : 810;
},
},
};
......@@ -195,14 +153,12 @@ export default {
color: #333;
.tableBox {
width: 810px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
.title {
width: 100%;
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-size: 16px;
text-align: center;
......@@ -221,21 +177,28 @@ export default {
}
.xxTableBox {
width: 810px;
overflow-x: scroll;
width: 100%;
}
.xxTable>tr:first-child th {
width: 140px;
}
tr td {
border: 1px solid #ccc;
}
.xxTable {
// border-spacing: 0;
border-spacing: 1px;
width: 100%;
tr>th {
background: #464c5b;
color: #fff;
font-size: 16px;
height: 60px;
}
th.linshi,
......@@ -273,19 +236,19 @@ export default {
display: block;
width: 0;
height: 0;
border-width: 0px 0px 45px 45px;
border-width: 0px 0px 55px 55px;
border-style: none solid solid;
border-color: transparent transparent #fe9400;
position: absolute;
top: 0px;
right: 3px;
top: 0;
right: 0;
transform: rotate(-90deg);
}
.icon {
position: absolute;
top: 8px;
right: 6px;
top: 13px;
right: -4px;
transform: rotate(45deg);
color: #fff;
font-size: 12px;
......@@ -297,6 +260,7 @@ export default {
height: 40px;
padding: 4px;
font-size: 13px;
width: 140px;
}
>tr:nth-child(odd) td {
......
......@@ -215,6 +215,7 @@ export default {
},
methods: {
list (bsmSldy) {
debugger;
var formdata = new FormData();
formdata.append("bsmSldy", bsmSldy);
Init(formdata).then((res) => {
......
......@@ -175,11 +175,11 @@ export default {
.spyj {
margin-left: 5px;
.spyj_title {
.spyj_title {
text-align: center;
font-size: 24px;
font-size: 18px;
display: block;
margin-bottom: 10px;
margin: 5px;
}
/deep/.el-form-item {
......
<template>
<div class='fqsq'>
<div class="fqsq">
<div class="fqsq-header">
<ul>
<li @click="operation(index, item)" v-for="(item, index) in headerleftList" :key="index">
<li
@click="operation(index, item)"
v-for="(item, index) in headerleftList"
:key="index"
>
<svg-icon :icon-class="item.icon" />
<span class="iconName">{{ item.name }}</span>
</li>
</ul>
<ul>
<li @click="operation(index, item)" v-for="(item, index) in headerRightList" :key="index">
<li
@click="operation(index, item)"
v-for="(item, index) in headerRightList"
:key="index"
>
<svg-icon class="icon" :icon-class="item.icon" />
<span class="iconName">{{ item.name }}</span>
</li>
......@@ -16,20 +24,30 @@
</div>
<div class="tabsList">
<div class="tabsList-left">
<div class="map-drawer-click" v-if='!isShowdrawer' @click="() => {
this.isShowdrawer = !this.isShowdrawer;
}">
</div>
<div class="map-drawer-expand" v-else @click="() => {
this.isShowdrawer = !this.isShowdrawer;
}">
</div>
<ul v-if='this.isShowdrawer'>
<p class="title">受理单元列表({{unitData.length}})</p>
<div v-for='(item,index) in unitData' :key='index'>
<li @click='unitClick(item)'>
<p>{{item.bdcdyh}}</p>
<p>{{item.zl}}</p>
<div
class="map-drawer-click"
v-if="!isShowdrawer"
@click="
() => {
this.isShowdrawer = !this.isShowdrawer;
}
"
></div>
<div
class="map-drawer-expand"
v-else
@click="
() => {
this.isShowdrawer = !this.isShowdrawer;
}
"
></div>
<ul v-if="this.isShowdrawer">
<p class="title">申请单元列表({{ unitData.length }})</p>
<div v-for="(item, index) in unitData" :key="index">
<li @click="unitClick(item)">
<p>{{ item.bdcdyh }}</p>
<p>{{ item.zl }}</p>
</li>
<div class="xian"></div>
</div>
......@@ -40,32 +58,50 @@
<p class="splitScreen tabsList-title">材料信息</p>
<div class="splitScreen"></div>
</div>
<el-tabs v-model="activeName" @tab-click='activeClick'>
<el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in tabList" :key="index">
<div class="splitScreen-con">
<component ref='slxx' v-if='item.value == "slxx"' :is="editItem" :flag="flag" :key="key" />
<component ref='clxx' :is="editItem" v-else-if='item.value == "clxx"' :key="key" />
<component ref='spyj' :is="editItem" v-else-if='item.value == "spyj"' :key="key" :bsmBusiness="bsmBusiness" :bestepid="queryForm.bestepid"/>
<component :is="editItem" v-else :key="key" />
</div>
</el-tab-pane>
</el-tabs>
<div style="width: 100%">
<el-tabs v-model="activeName" @tab-click="activeClick">
<el-tab-pane
:label="item.name"
:name="item.value"
v-for="(item, index) in tabList"
:key="index"
>
</el-tab-pane>
</el-tabs>
<div class="splitScreen-con">
<component
ref="slxx"
v-if="activeName == 'slsq'"
:is="editItem"
:flag="flag"
:key="key"
/>
<component :is="editItem" :key="key" />
</div>
</div>
</div>
</div>
<zc ref="zcDialogRef" v-model="zcDialog" :queryForm='queryForm' />
<thDialog ref='thdialogRef' v-model="thflag" :taskId='taskId' :bsmBusiness='bsmBusiness' :queryForm='queryForm' />
<zsylDialog v-model='zsylFlag' />
<zc ref="zcDialogRef" v-model="zcDialog" :queryForm="queryForm" />
<thDialog
ref="thdialogRef"
v-model="thflag"
:taskId="taskId"
:bsmBusiness="bsmBusiness"
:queryForm="queryForm"
/>
<zsylDialog v-model="zsylFlag" />
</div>
</template>
<script>
import { leftMenu, stepExpandInfo } from "@/api/fqsq.js"
import zc from "./components/zc.vue"
import thDialog from "./components/th.vue"
import zsylDialog from './components/zsyl'
import { leftMenu, stepExpandInfo, record } from "@/api/fqsq.js";
import comMsg from "@/views/components/comMsg.vue";
import zc from "./components/zc.vue";
import thDialog from "./components/th.vue";
import zsylDialog from "./components/zsyl";
export default {
/**注册组件*/
components: { zc, thDialog, zsylDialog },
data () {
components: { zc, thDialog, zsylDialog, comMsg },
data() {
return {
zsylFlag: false,
zcDialog: false,
......@@ -79,10 +115,10 @@ export default {
flag: false,
headerleftList: [],
headerRightList: [],
activeName: 'slxx',
activeName: "slxx",
tabList1: [],
tabList: [],
editItem: '',
editItem: "",
issplitScreen: false,
unitData: [],
taskId: "",
......@@ -92,56 +128,60 @@ export default {
},
watch: {
activeName: {
handler (newName, oldName) {
this.editItem = this.loadView(newName)
handler(newName, oldName) {
if (newName === "qlxx") {
this.editItem = this.loadViewSlsq();
} else {
this.editItem = this.loadView(newName);
}
},
immediate: true
}
immediate: true,
},
},
mounted () {
mounted() {
if (this.$route.query.bsmSlsq) {
this.expandInfo(this.$route.query.bsmSlsq, this.$route.query.bestepid);
this.list(this.$route.query.bsmSlsq)
this.queryForm.bsmSlsq = this.$route.query.bsmSlsq
this.queryForm.bestepid = this.$route.query.bestepid
this.list(this.$route.query.bsmSlsq);
this.queryForm.bsmSlsq = this.$route.query.bsmSlsq;
this.queryForm.bestepid = this.$route.query.bestepid;
}
},
methods: {
// 获取左侧列表
list (id) {
let that = this
that.id = id
list(id) {
let that = this;
that.id = id;
var formdata = new FormData();
formdata.append("bsmSlsq", id);
leftMenu(formdata).then(res => {
leftMenu(formdata).then((res) => {
if (res.code === 200) {
this.unitData = res.result ? res.result : []
this.unitData = res.result ? res.result : [];
setTimeout(() => {
that.$refs?.slxx[0].list(that.unitData && that.unitData[0].bsmSldy)
this.taskId = that.unitData[0].taskId
this.bsmBusiness = that.unitData[0].bsmBusiness
that.$refs.slxx?.[0].list(that.unitData?.[0]?.bsmSldy);
this.taskId = that.unitData?.[0]?.taskId;
this.bsmBusiness = that.unitData?.[0]?.bsmBusiness;
}, 300);
}
})
});
},
//获取环节扩展信息
expandInfo (bsmSlsq, bestepid) {
let that = this
expandInfo(bsmSlsq, bestepid) {
let that = this;
var formdata = new FormData();
formdata.append("bsmSlsq", bsmSlsq);
formdata.append("bestepid", bestepid);
stepExpandInfo(formdata).then(res => {
stepExpandInfo(formdata).then((res) => {
if (res.code === 200) {
this.tabList1 = [...res.result.form]
this.tabList = res.result.form
this.tabList1 = [...res.result.form];
this.tabList = res.result.form;
this.headerleftList = res.result.button;
this.headerRightList = res.result.operation;
}
})
});
},
activeClick (tab, event) {
if (tab.name == 'slxx') {
this.list(this.id)
activeClick(tab, event) {
if (tab.name == "slxx") {
this.list(this.id);
}
},
// 左侧列表点击调用接口
......@@ -161,37 +201,76 @@ export default {
})
}
},
operation (index, item) {
if (item.value == 'zsyl') {
this.zsylFlag = true
operation(index, item) {
switch (item.value) {
case "zsyl":
this.zsylFlag = true;
break;
case "clfp":
this.key++;
this.issplitScreen = !this.issplitScreen;
this.flag = !this.flag;
if (this.issplitScreen) {
this.tabList.splice(1, 1);
} else {
this.tabList = [...this.tabList1];
}
break;
case "th":
this.thflag = true;
this.$nextTick(() => {
this.$refs.thdialogRef.tablelistFn();
});
break;
case "zc":
this.zcDialog = true;
this.$refs.zcDialogRef.tablelistFn();
break;
case "tc":
window.close();
break;
case "db":
var formdata = new FormData();
formdata.append("bsmSlsq", this.$route.query.bsmSlsq);
formdata.append("bestepid", this.$route.query.bestepid);
// comMsg;
this.$confirm("请确认是否登簿", "提示", {
iconClass: "el-icon-question", //自定义图标样式
confirmButtonText: "确认", //确认按钮文字更换
cancelButtonText: "取消", //取消按钮文字更换
showClose: true, //是否显示右上角关闭按钮
type: "warning", //提示类型 success/info/warning/error
})
.then(function () {
record(formdata).then((res) => {
debugger;
if (res.code === 200 || res.code === 2002) {
this.$alert(res.message);
}
});
})
.then((data) => {
this.$alert("res.Message");
})
.catch(function (err) {
//捕获异常
});
} else if (item.value == 'clfp') {
this.key++
this.issplitScreen = !this.issplitScreen
this.flag = !this.flag
if (this.issplitScreen) {
this.tabList.splice(1, 1)
} else {
this.tabList = [...this.tabList1]
}
} else if (item.value == 'th') {
this.thflag = true
this.$nextTick(() => {
this.$refs.thdialogRef.tablelistFn()
})
}
else if (item.value == 'zc') {
this.zcDialog = true
this.$refs.zcDialogRef.tablelistFn()
} else if (item.value === 'tc') {
window.close()
break;
}
},
loadView (view) {
return r => require.ensure([], () => r(require(`./components/${view}.vue`)))
loadView(view) {
return (r) =>
require.ensure([], () => r(require(`./components/${view}.vue`)));
},
loadViewSlsq() {
return (r) =>
require.ensure([], () =>
r(require("../../components/jsydsyq/jsydsyq.vue"))
);
},
},
}
};
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
......@@ -214,13 +293,14 @@ export default {
font-size: 12px;
}
/deep/.el-tabs__content {
height: calc(100vh - 135px) !important;
/deep/.el-tabs__header {
margin: 0 !important;
}
.splitScreen-con {
padding: 0 15px;
box-sizing: border-box;
height: calc(100% - 350px);
}
.fqsq {
......@@ -231,7 +311,6 @@ export default {
background-color: #ffffff;
overflow: hidden;
.splitScreen {
min-width: 50%;
}
......@@ -240,7 +319,7 @@ export default {
@include flex;
width: 100%;
height: 80px;
background-color: #3498DB;
background-color: #3498db;
color: #ffffff;
justify-content: space-between;
padding-left: 15px;
......@@ -266,7 +345,6 @@ export default {
border-radius: 5px;
//color: $light-blue ;
.svg-icon {
//color: $light-blue ;
}
......@@ -277,7 +355,7 @@ export default {
.map-drawer-expand {
width: 20px;
height: 77px;
background: url('../../../image/right.png');
background: url("../../../image/right.png");
background-size: cover;
position: absolute;
right: 0%;
......@@ -289,7 +367,7 @@ export default {
.map-drawer-click {
width: 20px;
height: 77px;
background: url('../../../image/left.png');
background: url("../../../image/left.png");
background-size: cover;
position: absolute;
left: 0%;
......@@ -311,16 +389,15 @@ export default {
@include flex;
.tabsList-left {
border-right: 1px solid #EBEEF5;
border-right: 1px solid #ebeef5;
position: relative;
width: 250px;
box-sizing: border-box;
ul {
position: relative;
.xian {
background: #F2F2F2;
background: #f2f2f2;
padding: 2px;
}
......@@ -337,8 +414,8 @@ export default {
}
li:hover {
color: #0F93F6;
cursor: pointer
color: #0f93f6;
cursor: pointer;
}
}
}
......@@ -346,7 +423,7 @@ export default {
.tabsList-right {
.fenpin {
min-width: 50%;
border-right: 1px solid #EBEEF5;
border-right: 1px solid #ebeef5;
}
background-color: #ffffff;
......