Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
ae96d3ac by 田浩浩
Options

修改登记簿相关组件

1 parent 5091d01f
Inline Side-by-side
Showing 3 changed files with 433 additions and 0 deletions
......@@ -300,6 +300,7 @@ export default {
height: 40px;
padding: 4px;
font-size: 13px;
width: 140px;
}
> tr:nth-child(odd) td {
background: #f2f2f2;
......
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: "syqjssj",
// label: "使用权结束时间",
// },
// {
// prop: "tdsyqx",
// label: "土地使用期限",
// },
{
prop: "tdsyqx",
label: "土地使用期限",
},
{
prop: "qdjg",
label: "取得价格(万元)",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "bdcqzh",
label: "不动产权证号",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "fj",
label: "附记",
},
]
}
}
}
let datas = new data()
export {
datas
}
\ No newline at end of file
<template>
<div class="djxxTable">
<div class="tableBox">
<div class="title">
{{ title }}
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox label="临时"></el-checkbox>
<el-checkbox label="现势"></el-checkbox>
<el-checkbox label="历史"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="xxTableBox">
<table class="xxTable" :width="tableWidth">
<tr>
<th rowspan="3">业务类型</th>
</tr>
<!-- 第一行表头 -->
<tr class="one" id="">
<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>
{{ item.type }}
</th>
</tr>
<!-- 第二行表头 -->
<tr class="two">
<th v-for="(item, index) in ths" :key="index" :class="item.class">
<p>{{ item.qllxmc }}</p>
<p>{{ item.djlxmc }}</p>
</th>
</tr>
<!-- 数据 -->
<tr v-for="(item, index) in columns" :key="index">
<td>
{{ item.label }}
</td>
<td
v-for="(item1, index1) in showTableData"
:key="index1"
:class="[
item1.qszt == '2' ? 'lishi' : '',
item1.qszt == '0' ? 'linshi' : '',
]"
>
{{ item1[item.prop] }}
</td>
</tr>
</table>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { datas } from "./jsydsyqQlxx";
import { getJsydsyqList } from "@/api/zhcx.js";
export default {
name: "djxxTable",
props: {
showType: "",
},
data() {
return {
checkList: ["临时", "现势", "历史"],
tableWidth: 810,
type: datas.columns(),
tableData: [],
showTableData: [],
ths: [],
showThs: [],
columns: [],
title: "",
};
},
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",
});
}
});
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,
},
},
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;
},
},
};
</script>
<style lang="scss" scoped>
.djxxTable {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
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;
background: #e9e9e9;
height: 62px;
line-height: 62px;
position: relative;
margin: 1px 0;
.checkbox {
position: absolute;
right: 20px;
bottom: -16px;
height: 62px;
}
}
.xxTableBox {
width: 810px;
overflow-x: scroll;
}
// .xxTable > tr th:not(:first-child) {
// width: 223px;
// }
.xxTable > tr:first-child th {
width: 140px;
}
.xxTable {
border-spacing: 1px;
tr > th {
background: #464c5b;
color: #fff;
font-size: 16px;
}
th.linshi,
th.xianshi {
background: #464c5b;
}
th.lishi {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
th.linshi {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.linshiIcon {
position: relative;
}
.linshiIcon::after {
content: "";
display: block;
width: 0;
height: 0;
border-width: 0px 0px 45px 45px;
border-style: none solid solid;
border-color: transparent transparent #fe9400;
position: absolute;
top: 0px;
right: 3px;
transform: rotate(-90deg);
}
.icon {
position: absolute;
top: 8px;
right: 6px;
transform: rotate(45deg);
color: #fff;
font-size: 12px;
z-index: 10;
}
tr td {
text-align: center;
height: 40px;
padding: 4px;
font-size: 13px;
}
> tr:nth-child(odd) td {
background: #f2f2f2;
}
> tr:nth-child(even) td {
background: #f9f9f9;
}
td.linshi {
color: #fe9400;
}
tr > td.lishi {
color: #7f7f7f;
}
}
}
}
</style>