Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
0ed6f130 by weimo934
Options

style(hb):修改合并表格样式

1 parent 2e2c3b13
Inline Side-by-side
Showing 2 changed files with 397 additions and 81 deletions
......@@ -62,7 +62,8 @@
type="primary"
class="changeBtn outMinus addMinus"
@click="delRow(index)"
>-</el-button
>-
</el-button
>
</td>
<td class="xzq">
......@@ -124,12 +125,15 @@
</td>
</tr>
<tr>
<td><el-button
<td>
<el-button
type="primary"
class="changeBtn outAdd addMinus"
@click="addRow"
>+</el-button
></td>
>+
</el-button
>
</td>
<td></td>
<td></td>
<td></td>
......@@ -250,7 +254,8 @@
type="primary"
class="changeBtn outMinus addMinus"
@click="delRow(index)"
>-</el-button
>-
</el-button
>
</td>
<td class="xzq">
......@@ -312,7 +317,14 @@
</td>
</tr>
<tr>
<td @click="addRow">+</td>
<td>
<el-button
type="primary"
class="changeBtn outAdd addMinus"
@click="addRow"
>+
</el-button>
</td>
<td></td>
<td></td>
<td></td>
......@@ -434,7 +446,8 @@
type="primary"
class="changeBtn outMinus addMinus"
@click="delRow(index)"
>-</el-button
>-
</el-button
>
</td>
<td class="xzq">
......@@ -496,7 +509,14 @@
</td>
</tr>
<tr>
<td @click="addRow">+</td>
<td>
<el-button
type="primary"
class="changeBtn outAdd addMinus"
@click="addRow"
>+
</el-button>
</td>
<td></td>
<td></td>
<td></td>
......@@ -558,19 +578,6 @@
</el-tab-pane>
</el-tabs>
</div>
<!-- <div class="lpb">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="编辑楼盘" name="edit">
<bjlp></bjlp>
</el-tab-pane>
<el-tab-pane label="预览楼盘" name="preview">
<yllp></yllp>
</el-tab-pane>
<el-tab-pane label="详细信息" name="detail">
<xxxx></xxxx>
</el-tab-pane>
</el-tabs>
</div> -->
</template>
<script>
......@@ -991,7 +998,7 @@
width: 100px;
}
.xzq, .djq, djzq {
.xzq, .djq, .djzq {
width: 150px;
}
</style>
......
......@@ -3,14 +3,9 @@
<el-tabs v-model="tabName" class="menu" @tab-click="handleClick">
<el-tab-pane label="宗地合并" name="zd">
<div class="hb-tabs">
<el-button type="primary" class="addBtn" @click="newAdd">新增</el-button>
<div class="header">
<span>合并后项目名称</span>
<el-input></el-input>
</div>
<div class="table">
<div class="hbq">
<span class="tips">合并前宗地信息</span>
<table border="1">
<tr>
<td class="xh">序号</td>
......@@ -28,12 +23,90 @@
</tr>
<tr v-else v-for="(item,index) in bgqData" :key="index">
<td class="xh">{{index+1}}</td>
<td class="zddm"><input type="text" class="formInput" v-model="item.zddm" readonly="readonly"/></td>
<td class="bdcdyh"><input type="text" class="formInput" v-model="item.bdcdyh" readonly="readonly"/></td>
<td class="xmmc"><input type="text" class="formInput" v-model="item.xmmc" readonly="readonly"/></td>
<td class="bdcqzh"><input type="text" class="formInput" v-model="item.bdcqzh" readonly="readonly"/></td>
<td class="qlr"><input type="text" class="formInput" v-model="item.qlr" readonly="readonly"/></td>
<td class="zl"><input type="text" class="formInput" v-model="item.zl" readonly="readonly"/></td>
<td class="zddm"><input type="text" class="formInput" v-model="item.zddm"
readonly="readonly"/></td>
<td class="bdcdyh"><input type="text" class="formInput" v-model="item.bdcdyh"
readonly="readonly"/></td>
<td class="xmmc"><input type="text" class="formInput" v-model="item.xmmc"
readonly="readonly"/></td>
<td class="bdcqzh"><input type="text" class="formInput" v-model="item.bdcqzh"
readonly="readonly"/></td>
<td class="qlr"><input type="text" class="formInput" v-model="item.qlr"
readonly="readonly"/></td>
<td class="zl"><input type="text" class="formInput" v-model="item.zl"
readonly="readonly"/></td>
</tr>
</table>
</div>
<div class="hbh">
<span class="tips">合并后宗地信息</span>
<table border="1">
<tr>
<th class="xzq">行政区</th>
<th class="djq">地籍区</th>
<th class="djzq">地籍子区</th>
<th class="syqlx">所有权类型</th>
<th class="tdtzm">土地特征码</th>
<th class="xmmc">项目名称</th>
<th class="zxx">幢信息</th>
</tr>
<tr>
<td class="xzq">
<el-select v-model="hbhData.xzqbsm" @change="changeXzq(hbhData.xzqbsm)">
<el-option
v-for="i in xzq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="djq">
<el-select v-model="hbhData.djqbsm" @change="changeDjq(hbhData.djqbsm)">
<el-option
v-for="i in djq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="syqlx">
<el-select v-model="hbhData.djzqbsm">
<el-option
v-for="i in djzq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="tdtzm">
<el-select v-model="hbhData.syqlxbsm">
<el-option
v-for="i in syq"
:key="i.value"
:label="i.label"
:value="i.value"
></el-option>
</el-select>
</td>
<td class="syqlx">
<el-select v-model="hbhData.zdtzmbsm">
<el-option
v-for="i in tdtzm"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="xmmc">
<input type="text" v-model="hbhData.xmmc" class="formInput"/>
</td>
<td class="zxx">
<span class="xz">选择</span>
</td>
</tr>
</table>
</div>
......@@ -48,11 +121,8 @@
<el-tab-pane label="多幢合并" name="dz">
<div class="hb-tabs">
<el-button type="primary" class="addBtn" @click="newAdd">新增</el-button>
<div class="header">
<span>合并后项目名称</span>
<el-input></el-input>
</div>
<div class="table">
<div class="hbq">
<span class="tips">合并前宗地信息</span>
<table border="1">
<tr>
<td class="xh">序号</td>
......@@ -70,12 +140,90 @@
</tr>
<tr v-else v-for="(item,index) in bgqData" :key="index">
<td class="xh">{{index+1}}</td>
<td class="zddm"><input type="text" class="formInput" v-model="item.zddm" readonly="readonly"/></td>
<td class="bdcdyh"><input type="text" class="formInput" v-model="item.bdcdyh" readonly="readonly"/></td>
<td class="xmmc"><input type="text" class="formInput" v-model="item.xmmc" readonly="readonly"/></td>
<td class="bdcqzh"><input type="text" class="formInput" v-model="item.bdcqzh" readonly="readonly"/></td>
<td class="qlr"><input type="text" class="formInput" v-model="item.qlr" readonly="readonly"/></td>
<td class="zl"><input type="text" class="formInput" v-model="item.zl" readonly="readonly"/></td>
<td class="zddm"><input type="text" class="formInput" v-model="item.zddm"
readonly="readonly"/></td>
<td class="bdcdyh"><input type="text" class="formInput" v-model="item.bdcdyh"
readonly="readonly"/></td>
<td class="xmmc"><input type="text" class="formInput" v-model="item.xmmc"
readonly="readonly"/></td>
<td class="bdcqzh"><input type="text" class="formInput" v-model="item.bdcqzh"
readonly="readonly"/></td>
<td class="qlr"><input type="text" class="formInput" v-model="item.qlr"
readonly="readonly"/></td>
<td class="zl"><input type="text" class="formInput" v-model="item.zl"
readonly="readonly"/></td>
</tr>
</table>
</div>
<div class="hbh">
<span class="tips">合并后宗地信息</span>
<table border="1">
<tr>
<th class="xzq">行政区</th>
<th class="djq">地籍区</th>
<th class="djzq">地籍子区</th>
<th class="syqlx">所有权类型</th>
<th class="tdtzm">土地特征码</th>
<th class="xmmc">项目名称</th>
<th class="zxx">幢信息</th>
</tr>
<tr>
<td class="xzq">
<el-select v-model="hbhData.xzqbsm" @change="changeXzq(hbhData.xzqbsm)">
<el-option
v-for="i in xzq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="djq">
<el-select v-model="hbhData.djqbsm" @change="changeDjq(hbhData.djqbsm)">
<el-option
v-for="i in djq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="syqlx">
<el-select v-model="hbhData.djzqbsm">
<el-option
v-for="i in djzq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="tdtzm">
<el-select v-model="hbhData.syqlxbsm">
<el-option
v-for="i in syq"
:key="i.value"
:label="i.label"
:value="i.value"
></el-option>
</el-select>
</td>
<td class="syqlx">
<el-select v-model="hbhData.zdtzmbsm">
<el-option
v-for="i in tdtzm"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="xmmc">
<input type="text" v-model="hbhData.xmmc" class="formInput"/>
</td>
<td class="zxx">
<span class="xz">选择</span>
</td>
</tr>
</table>
</div>
......@@ -89,11 +237,8 @@
<el-tab-pane label="户合并" name="h">
<div class="hb-tabs">
<el-button type="primary" class="addBtn" @click="newAdd">新增</el-button>
<div class="header">
<span>合并后项目名称</span>
<el-input></el-input>
</div>
<div class="table">
<div class="hbq">
<span class="tips">合并前宗地信息</span>
<table border="1">
<tr>
<td class="xh">序号</td>
......@@ -111,12 +256,90 @@
</tr>
<tr v-else v-for="(item,index) in bgqData" :key="index">
<td class="xh">{{index+1}}</td>
<td class="zddm"><input type="text" class="formInput" v-model="item.zddm" readonly="readonly"/></td>
<td class="bdcdyh"><input type="text" class="formInput" v-model="item.bdcdyh" readonly="readonly"/></td>
<td class="xmmc"><input type="text" class="formInput" v-model="item.xmmc" readonly="readonly"/></td>
<td class="bdcqzh"><input type="text" class="formInput" v-model="item.bdcqzh" readonly="readonly"/></td>
<td class="qlr"><input type="text" class="formInput" v-model="item.qlr" readonly="readonly"/></td>
<td class="zl"><input type="text" class="formInput" v-model="item.zl" readonly="readonly"/></td>
<td class="zddm"><input type="text" class="formInput" v-model="item.zddm"
readonly="readonly"/></td>
<td class="bdcdyh"><input type="text" class="formInput" v-model="item.bdcdyh"
readonly="readonly"/></td>
<td class="xmmc"><input type="text" class="formInput" v-model="item.xmmc"
readonly="readonly"/></td>
<td class="bdcqzh"><input type="text" class="formInput" v-model="item.bdcqzh"
readonly="readonly"/></td>
<td class="qlr"><input type="text" class="formInput" v-model="item.qlr"
readonly="readonly"/></td>
<td class="zl"><input type="text" class="formInput" v-model="item.zl"
readonly="readonly"/></td>
</tr>
</table>
</div>
<div class="hbh">
<span class="tips">合并后宗地信息</span>
<table border="1">
<tr>
<th class="xzq">行政区</th>
<th class="djq">地籍区</th>
<th class="djzq">地籍子区</th>
<th class="syqlx">所有权类型</th>
<th class="tdtzm">土地特征码</th>
<th class="xmmc">项目名称</th>
<th class="zxx">幢信息</th>
</tr>
<tr>
<td class="xzq">
<el-select v-model="hbhData.xzqbsm" @change="changeXzq(hbhData.xzqbsm)">
<el-option
v-for="i in xzq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="djq">
<el-select v-model="hbhData.djqbsm" @change="changeDjq(hbhData.djqbsm)">
<el-option
v-for="i in djq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="syqlx">
<el-select v-model="hbhData.djzqbsm">
<el-option
v-for="i in djzq"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="tdtzm">
<el-select v-model="hbhData.syqlxbsm">
<el-option
v-for="i in syq"
:key="i.value"
:label="i.label"
:value="i.value"
></el-option>
</el-select>
</td>
<td class="syqlx">
<el-select v-model="hbhData.zdtzmbsm">
<el-option
v-for="i in tdtzm"
:key="i.bsm"
:label="i.mc"
:value="i.bsm"
></el-option>
</el-select>
</td>
<td class="xmmc">
<input type="text" v-model="hbhData.xmmc" class="formInput"/>
</td>
<td class="zxx">
<span class="xz">选择</span>
</td>
</tr>
</table>
</div>
......@@ -132,6 +355,12 @@
</template>
<script>
import {
getAllList,
getListByXzqbsm,
getListByPbsm,
getDdicByMC
} from "./../../../../api/common";
import QueryData from './../../../../components/queryData/queryData'
export default {
......@@ -143,17 +372,84 @@
tabName: 'zd',
centerDialogVisible: false,
bgqData: [],
fgBoxWidth:0
hbhData: {},
fgBoxWidth: 0,
xzq: [],
djq: [],
djzq: [],
tdtzm: [],
syq: [
{
label: "国家所有",
value: "G",
},
{
label: "集体所有",
value: "J",
},
{
label: "土地所有权未确定或有争议",
value: "Z",
}
],
}
},
created() {
},
mounted() {
this.$nextTick(()=>{
this.getXzqList();
this.getzdtzm();
this.$nextTick(() => {
this.fgBoxWidth = this.$refs.hbBox.clientWidth;
})
},
methods: {
getzdtzm() {
getDdicByMC('宗地（宗海）特征码').then(res => {
this.tdtzm = res.result
})
},
getXzqList() {
getAllList()
.then((res) => {
this.xzq = res.result;
})
.catch((error) => {
});
},
changeXzq(id) {
this.djq = [];
this.djzq = [];
this.hbhData.djqbsm = ''
this.hbhData.djzqbsm = ''
getListByXzqbsm(id)
.then((res) => {
if (res.result == null) {
this.djq = null;
} else {
this.djq = res.result;
}
})
.catch((error) => {
});
},
changeDjq(item) {
this.djzq = [];
this.hbhData.djzqbsm = ''
if (item == null) {
} else {
getListByPbsm(item)
.then((res) => {
if (res.result == null) {
this.djzq = null;
} else {
this.djzq = res.result;
}
})
.catch((error) => {
});
}
},
handleClick(tab, event) {
console.log(tab, event);
},
......@@ -177,14 +473,14 @@
</script>
<style scoped lang="less">
.hb{
.menu{
/deep/.el-tabs__content{
.hb {
.menu {
/deep/ .el-tabs__content {
position: unset;
margin-top: 62px;
overflow: visible;
}
/deep/.el-tabs__header{
/deep/ .el-tabs__header {
position: -webkit-fixed;
position: fixed;
top: 120px;
......@@ -192,16 +488,16 @@
width: 100%;
margin-bottom: 0;
border: 0;
/deep/.el-tabs__nav-scroll{
/deep/ .el-tabs__nav-scroll {
height: 50px;
box-sizing: border-box;
padding-left: 20px;
.el-tabs__active-bar{
.el-tabs__active-bar {
display: none;
}
>.el-tabs__nav{
> .el-tabs__nav {
border: 0;
>.el-tabs__item{
> .el-tabs__item {
border: 1px solid #DEDEDE;
height: 36px;
line-height: 36px;
......@@ -209,24 +505,25 @@
margin: 9px 10px 9px 0;
background-color: #ffffff;
}
.is-active{
.is-active {
color: #006CFF;
border: 1px solid #006CFF;
}
}
}
/deep/.el-tabs__nav-wrap::after{
/deep/ .el-tabs__nav-wrap::after {
width: 0;
}
}
}
}
}
.hb-tabs {
height: auto;
width: 100%;
position: relative;
.addBtn{
.addBtn {
position: absolute;
right: 30px;
top: -46px;
......@@ -255,18 +552,14 @@
text-align: center;
background-color: #ffffff;
}
.table{
box-sizing: border-box;
padding: 0 18px;
}
table {
margin-top: 10px;
background-color: #fff;
font-size: 14px;
width: 100%;
tr:nth-of-type(odd){
tr:nth-of-type(odd) {
background: #FAFAFA;
th{
th {
height: 36px;
}
}
......@@ -280,7 +573,7 @@
text-align: center;
cursor: text;
}
tr:hover{
tr:hover {
background-color: #F5F7FA;
}
......@@ -299,18 +592,34 @@
.noData {
color: #b2b2b2;
}
.saveBtn{
.saveBtn {
background-color: #00CACD;
border-color: #00CACD;
padding: 10px 30px;
margin-top: 8px;
}
.saveBtn:hover{
.saveBtn:hover {
background-color: rgba(0, 202, 205, .8);
border-color: rgba(0, 202, 205, .8);
}
.xh{
.xh {
width: 100px;
}
.xzq, .djq, .djzq {
width: 150px;
}
.tips {
color: #9B9B9B;
}
.hbq {
margin-top: 12px;
box-sizing: border-box;
padding: 18px;
}
.hbh {
box-sizing: border-box;
padding: 0 18px;
margin-top: 10px;
}
}
</style>
......