Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
a1831b0f by 任超
Options

feat:楼盘表

1 parent b5b2b3f7
Inline Side-by-side
Showing 57 changed files with 12225 additions and 81 deletions
export default {
SERVERAPI: '/service-bdcdj9',
SERVERCAI: 'service-cai'
SERVERAPI: '/service-bdcdj-Tian',
SERVERCAI: '/service-bdcdj-Tian'
}
\ No newline at end of file
......
{
"exprotTextAttr": "[属性描述]\n格式版本号=1.0\n数据产生单位=国土资源信息中心\n数据产生日期=2013-06-06\n坐标系=80国家大地坐标系\n几度分带=3\n投影类型=高斯克吕格\n计量单位=米\n带号=36\n精度=0.01\n转换参数=0,0,0,0,0,0,0\n"
}
\ No newline at end of file
{
"pointSymbol": {
"bufferSymbol": {
"type": "simple-marker",
"style": "circle",
"color": "black",
"size": "8px",
"outline": {
"color": [ 255, 255, 0 ],
"width": 1
}
}
},
"lineSymbol": {
},
"fillSymbol": {
"defaultSymbol": {
"type": "simple-fill",
"color": [ 0,233, 245, 0.4 ],
"style": "solid",
"outline": {
"color": "#00e9f5",
"width": 1
}
},
"highlightSymbol": {
"type": "simple-fill",
"color": [ 245,3, 37, 0.4 ],
"style": "solid",
"outline": {
"color": "#f50325",
"width": 1
}
},
"importSymbol": {
"type": "simple-fill",
"color": [ 245,3, 37, 0.4 ],
"style": "none",
"outline": {
"color": "#006cff",
"width": 2
}
},
"bufferSymbol": {
"type": "simple-fill",
"color": [ 86,81, 81, 0.5 ],
"style": "solid",
"outline": {
"color": [45,44,44,1],
"width": 2
}
},
"bufferGeoSymbol": {
"type": "simple-fill",
"color": [ 86,81, 81, 0.5 ],
"style": "solid",
"outline": {
"color": [45,44,44,1],
"width": 0
}
}
}
}
\ No newline at end of file
[{
"label":"专题树",
"id":"1",
"type":"layerGroup",
"alpha":100,
"children":[
{
"label":"西安市阎良区",
"id":"1-1",
"type":"layerGroup",
"alpha":100,
"children":[{
"label":"行政区划",
"id":"1-1-1",
"type":"layerGroup",
"alpha":100,
"children":[
{
"label":"行政区界限",
"id":"1-1-1-1",
"type":"layer",
"layerId":20,
"children":null
},
{
"label":"行政区",
"id":"1-1-1-2",
"type":"layer",
"layerId":19,
"children":null
}
]
},
{
"label":"地籍分区",
"id":"1-1-2",
"type":"layerGroup",
"alpha":100,
"children":[
{
"label":"地籍区",
"id":"1-1-2-1",
"type":"layer",
"layerId":13,
"children":null
},
{
"label":"地籍子区",
"id":"1-1-2-2",
"type":"layer",
"layerId":14,
"children":null
}
]
},
{
"label":"不动产单元",
"id":"1-1-3",
"type":"layerGroup",
"alpha":100,
"children":[
{
"label":"线状定着物",
"id":"1-1-3-1",
"type":"layer",
"layerId":7,
"children":null
},
{
"label":"宗海",
"id":"1-1-3-2",
"type":"layer",
"layerId":9,
"children":null
},
{
"label":"宗地",
"id":"1-1-3-3",
"type":"layer",
"layerId":8,
"children":null
},
{
"label":"林权",
"id":"1-1-3-4",
"type":"layer",
"layerId":5,
"children":null
},
{
"label":"构筑物",
"id":"1-1-3-5",
"type":"layer",
"layerId":2,
"children":null
},
{
"label":"面状定着物",
"id":"1-1-3-6",
"type":"layer",
"layerId":6,
"children":null
},
{
"label":"界址线",
"id":"1-1-3-7",
"type":"layer",
"layerId":4,
"children":null
},
{
"label":"点状定着物",
"id":"1-1-3-8",
"type":"layer",
"layerId":1,
"children":null
},
{
"label":"自然幢",
"id":"1-1-3-9",
"type":"layer",
"layerId":10,
"children":null
},
{
"label":"界址点",
"id":"1-1-3-10",
"type":"layer",
"layerId":4,
"children":null
}
]
},
{
"label":"自然地理",
"id":"1-1-4",
"type":"layerGroup",
"alpha":100,
"children":[
{
"label":"辅助面",
"id":"1-1-4-1",
"type":"layer",
"layerId":15,
"children":null
},
{
"label":"植被",
"id":"1-1-4-2",
"type":"layer",
"layerId":17,
"children":null
},
{
"label":"水系",
"id":"1-1-4-3",
"type":"layer",
"layerId":16,
"children":null
}
]
}
]
}]
}]
\ No newline at end of file
[{
"layerName": "ZDJBXX",
"layerLabel": "宗地",
"layerUrl": "https://192.168.2.146:6443/arcgis/rest/services/qj/backupService/MapServer",
"id":8,
"fieldAliases": {
"BSM": "标识码",
"YSDM": "要素代码",
"ZDDM": "宗地代码",
"BDCDYH": "不动产单元号",
"ZDTZM": "宗地特征码",
"ZL": "坐落",
"ZDMJ": "宗地面积",
"MJDW": "面积单位",
"YT": "用途",
"DJ": "等级",
"JG": "价格",
"QLLX": "权利类型",
"QLXZ": "权利性质",
"QLSDFS": "权利设定方式",
"RJL": "容积率",
"JZMD": "建筑密度",
"JZXG": "建筑限高",
"ZDSZD": "宗地四至-东",
"ZDSZN": "宗地四至-南",
"ZDSZX": "宗地四至-西",
"ZDSZB": "宗地四至-北",
"TFH": "图幅号",
"DJH": "地籍号",
"DAH": "档案号",
"BZ": "备注",
"ZT": "状态",
"YWZT": "业务状态",
"XMMC": "项目名称",
"BGRQ": "变更日期",
"TDZH": "土地证号"
}
},
{
"layerName": "ZRZ",
"layerLabel": "自然幢",
"layerUrl": "https://192.168.2.146:6443/arcgis/rest/services/qj/backupService/MapServer",
"id": 10,
"fieldAliases": {
"YSDM": "要素代码",
"BDCDYH": "不动产单元号",
"ZDDM": "宗地代码",
"ZRZH": "自然幢号",
"XMMC": "项目名称",
"JZWMC": "建筑物名称",
"JGRQ": "竣工日期",
"JZWGD": "建筑物高度",
"ZZDMJ": "幢占地面积",
"ZYDMJ": "幢用地面积",
"YCJZMJ": "预测建筑面积",
"SCJZMJ": "实测建筑面积",
"ZCS": "总层数",
"DSCS": "地上层数",
"DXCS": "地下层数",
"DXSD": "地下深度",
"GHYT": "规划用途",
"FWJG": "房屋结构",
"ZTS": "总套数",
"JZWJBYT": "建筑物基本用途",
"DAH": "档案号",
"BZ": "备注",
"ZT": "状态",
"YWZT": "业务状态",
"BSM": "标识码"
}
},
{
"layerName": "DJQ",
"layerLabel": "地籍区",
"layerUrl": "https://192.168.2.146:6443/arcgis/rest/services/qj/backupService/MapServer",
"id": 13,
"fieldAliases": {
"BSM": "标识码",
"YSDM": "要素代码",
"DJQDM": "地籍区代码",
"DJQMC": "地籍区名称"
}
},
{
"layerName": "DJZQ",
"layerLabel": "地籍子区",
"layerUrl": "https://192.168.2.146:6443/arcgis/rest/services/qj/backupService/MapServer",
"id": 14,
"fieldAliases": {
"BSM": "标识码",
"YSDM": "要素代码",
"DJZQDM": "地籍子区代码",
"DJZQMC": "地籍子区名称"
}
},
{
"layerName": "XJZQ",
"layerLabel": "行政区",
"layerUrl": "https://192.168.2.146:6443/arcgis/rest/services/qj/backupService/MapServer",
"id": 19,
"fieldAliases": {
"BSM": "标识码",
"YSDM": "要素代码",
"XZQDM": "行政区代码",
"XZQMC": "行政区名称",
"XZQMJ": "行政区面积"
}
},
{
"layerName":"JZD",
"layerLabel":"界址点",
"layerUrl":"https://192.168.2.146:6443/arcgis/rest/services/qj/backupService/MapServer",
"id":3
},
{
"layerName":"JZX",
"layerLabel":"界址线",
"layerUrl":"https://192.168.2.146:6443/arcgis/rest/services/qj/backupService/MapServer",
"id":4
}
]
\ No newline at end of file
......@@ -8,7 +8,7 @@ import SERVER from './config'
// }
export function getMenuInfo () {
return request({
url: SERVER.SERVERCAI + '/rest/user/getUserAuthorizationMenus',
url: SERVER.SERVERAPI + '/rest/user/getUserAuthorizationMenus',
method: 'get',
})
}
\ No newline at end of file
......
......@@ -3,10 +3,11 @@ import SERVER from './config'
/*
业务办理-获取收藏业务集合
*/
export function getCollectBiz () {
export function getCollectBiz (headers) {
return request({
url: SERVER.SERVERAPI + '/rest/ywbl/BusinessApply/getCollectBiz',
method: 'post'
method: 'post',
headers
})
}
......@@ -16,16 +17,20 @@ export function getCollectBiz () {
export function getleftMenu () {
return request({
url: SERVER.SERVERAPI + '/rest/ywbl/BusinessApply/getleftMenu',
method: 'post'
method: 'post',
headers: {
showLoading: false
}
})
}
/*
业务办理-获取下个节点内容
*/
export function getNextNode (bsmSqyw) {
export function getNextNode (bsmSqyw, headers) {
return request({
url: SERVER.SERVERAPI + '/rest/ywbl/BusinessApply/getNextNode?parentid=' + bsmSqyw,
method: 'post',
headers
})
}
......@@ -36,8 +41,7 @@ export function selectScBdcdy (data) {
return request({
url: SERVER.SERVERAPI + '/rest/ywbl/ywsq/selectScBdcdy',
method: 'post',
data,
showLoading: true
data
})
}
......@@ -54,12 +58,12 @@ export function selectScBdcdy (data) {
// }
// 待办箱列表查询接口
export function searchTaskToDo (data) {
export function searchTaskToDo (data, headers) {
return request({
url: SERVER.SERVERAPI + '/rest/workBox/search/searchTaskToDo',
method: 'post',
data,
showLoading: true
headers
})
}
// 待办箱/不动产单元删除接口
......@@ -95,12 +99,12 @@ export function searchTaskDone (data) {
/*
业务办理-选择权利信息-根据条件进行列表查询
*/
export function selectQlxx (data) {
export function selectQlxx (data, headers) {
return request({
url: SERVER.SERVERAPI + '/rest/ywbl/ywsq/selectQlxx',
method: 'post',
data,
showLoading: true
headers
})
}
/*
......
<template>
<div class="temp">
<table class="tempTable" cellspacing="0" cellpadding="0" border="1">
<tr>
<template v-if="lq == ''">
<td colspan="2"><span class="table-title">权利人信息</span></td>
<td colspan="2">共有方式</td>
</template>
<template v-else>
<td colspan="2">共有方式</td>
</template>
<td :colspan="lq == '' ? 8 : 10">
<el-row>
<el-col :span="14" class="fl" style="line-height:32px">
<el-radio-group v-model="gyfs" @change="updateGyfs">
<el-radio :label="item.bsm" :disabled="+qszt !== 0 || item.disabled" :key="item.bsm"
v-for="item in gyfsList">{{ item.mc }}</el-radio>
</el-radio-group>
</el-col>
<el-col :span="10" class="fr">
<!-- <div v-show="qszt=='0'" class="fr" style="margin-right:20px">
<el-button class="qlrBtn" size="mini" @click="addRow">
<i class="iconfont iconxinzeng"></i> 新增
</el-button>
<el-button class="qlrBtn" size="mini" @click="changeRow">
<i class="iconfont iconbianji"></i> 编辑
</el-button>
<el-button class="qlrBtn" size="mini" @click="delRow">
<i class="iconfont iconshanchu"></i> 删除
</el-button>
</div>-->
<div v-show="+qszt === 0" class="fr" style="margin-right:20px">
<el-button class="qlrBtn" size="mini"
:disabled="+qszt !== 0 || (tableData.length > 0 && gyfs === 'PSHGSBDCQJDC000000000000DC340010')"
@click="addRow">
<i class="iconfont iconxinzeng" :disabled="+qszt !== 0"></i> 新增
</el-button>
<el-button class="qlrBtn" size="mini" :disabled="+qszt !== 0" @click="changeRow">
<i class="iconfont iconbianji"></i> 编辑
</el-button>
<el-button class="qlrBtn" size="mini" :disabled="+qszt !== 0" @click="delRow">
<i class="iconfont iconshanchu"></i> 删除
</el-button>
</div>
</el-col>
</el-row>
</td>
</tr>
</table>
<el-table class="qlrTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
@row-dblclick="rowDbclick" border>
<el-table-column type="selection" width="40" align="center">
</el-table-column>
<el-table-column prop="qlrmc" label="权利人名称" align="center">
</el-table-column>
<el-table-column prop="qlrlxbsm_dictText" label="权利人类型" align="center">
</el-table-column>
<el-table-column prop="zjzlbsm_dictText" label="证件种类" align="center">
</el-table-column>
<el-table-column prop="zjh" label="证件号" align="center">
</el-table-column>
<el-table-column prop="dz" label="通讯地址" align="center">
</el-table-column>
<el-table-column prop="dh" label="联系电话" align="center">
</el-table-column>
</el-table>
<el-dialog v-dialogDrag :close-on-click-modal="false" title="权利人信息" :visible.sync="dialogVisible"
custom-class="insetDialog" append-to-body width="50%">
<el-form :model="formData" class="qlrForm">
<table class="zdjbxxTable" cellspacing="0" cellpadding="0" border="1">
<tr>
<td colspan="4" class="tdright"><i class="requisite">*</i>权利人名称</td>
<td colspan="6">
<el-input v-model="formData.qlrmc" ref="qlrmc" @blur="inputBlur($event)"></el-input>
</td>
<td colspan="4" class="tdright"><i class="requisite">*</i>权利人类型</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.qlrlxbsm" ref="qlrlxbsm">
<el-option v-for="item in $store.state.qlrlxList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="4" class="tdright"><i class="requisite">*</i>证件类型</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.zjzlbsm" ref="zjzlbsm">
<el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright"><i class="requisite">*</i>证件号</td>
<td colspan="6">
<el-input maxlength="18" v-model="formData.zjh" ref="zjh" @blur="inputBlur($event)"></el-input>
</td>
</tr>
<tr>
<td colspan="4" class="tdright"><i class="requisite">*</i>电话</td>
<td colspan="6">
<!-- @blur="inputBlur($event)"-->
<el-input v-model="formData.dh" ref="dh" @blur="inputBlur($event)"></el-input>
</td>
<td colspan="4" class="tdright"><i class="requisite">*</i>地址</td>
<td colspan="6">
<el-input v-model="formData.dz" ref="dz" @blur="inputBlur($event)"></el-input>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">国家</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.gjbsm">
<el-option v-for="item in $store.state.gjList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright">户籍所在省市</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.hjszssbsm">
<el-option v-for="item in $store.state.ssList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">性别</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.xbbsm">
<el-option v-for="item in $store.state.xbList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright">邮编</td>
<td colspan="6">
<el-input v-model="formData.yb" />
</td>
</tr>
<tr>
<td colspan="4" class="tdright">所属行业</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.sshy">
<el-option v-for="item in $store.state.sshyList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright">电子邮件</td>
<td colspan="6">
<el-input v-model="formData.dzyj" />
</td>
</tr>
<tr>
<th colspan="20">法人信息</th>
</tr>
<tr>
<td colspan="4" class="tdright">法定代表人或负责人姓名</td>
<td colspan="6">
<el-input v-model="formData.fr.dlrfrmc" />
</td>
<td colspan="4" class="tdright">证件类型</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.fr.zjzlbsm">
<el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">证件号码</td>
<td colspan="6">
<el-input v-model="formData.fr.zjh" />
</td>
<td colspan="4" class="tdright">电话</td>
<td colspan="6">
<el-input v-model="formData.fr.dh" />
</td>
</tr>
<tr>
<th colspan="20">代理人信息</th>
</tr>
<template v-for="(item, index) in formData.dlrList">
<tr :key="item.index">
<td :rowspan="(formData.dlrList.length - 1) * 2 + 2" v-if="index == 0" class="btnCol">
<span :style="{ 'padding-top': (formData.dlrList.length - 1) * 36 + 20 + 'px' }">
<i v-show="index == 0" class="iconfont iconicon-test2" @click="handleClick(item, index, 'add')"></i>
</span>
<!-- <div class="line" v-show=" index != formData.dlrList.length-1"></div> -->
</td>
<td rowspan="2" class="minusBtnCol">
<span>
<i class="iconfont icon-" @click="handleClick(item, index, 'minus')"></i>
</span>
</td>
<td class="tdright" colspan="2">代理人姓名</td>
<td colspan="6">
<el-input v-model="item.dlrfrmc" />
</td>
<td colspan="4" class="tdright">证件类型</td>
<td colspan="6">
<el-select class="formSelect" v-model="item.zjzlbsm">
<el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<!-- <tr :key="item.dh">-->
<tr :key="'dh' + index">
<td class="tdright" colspan="2">证件号码</td>
<td colspan="6">
<el-input v-model="item.zjh" />
</td>
<td colspan="4" class="tdright">电话</td>
<td colspan="6">
<el-input v-model="item.dh" />
</td>
</tr>
</template>
<tr>
<th colspan="20">权利信息</th>
</tr>
<tr>
<td colspan="4" class="tdright">共有方式</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.gyfsbsm" disabled>
<el-option v-for="item in $store.state.gyfsList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright">权利比例(%)</td>
<td colspan="6">
<el-input v-model="formData.qlbl"></el-input>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">房产证号</td>
<td colspan="6">
<el-input v-model="formData.fczh"></el-input>
</td>
<td colspan="4" class="tdright">土地证号</td>
<td colspan="6">
<el-input v-model="formData.tdzh"></el-input>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">共有情况</td>
<td colspan="12">
<el-input v-model="formData.gyqk"></el-input>
</td>
</tr>
</table>
</el-form>
<div class="dialog-footer">
<el-button type="primary" @click="addNewQlrInfo">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
// import { getDdicByMC } from "@api/common";
// import { insertQlrDlrFr, getQlrInfoByGlbsm, updateQlrDlrFr, deleteQlrDlrFrByQlrbsm, updateGyGyQlrQk, getQlrByGlbsmAndType } from "@api/qlr";
export default {
props: {
qszt: {
type: String,
default: "0",
},
title: {
type: String,
default: "",
},
topHeight: {
type: String,
default: "15vh",
},
bsm: {
type: String,
default: "",
},
type: {
type: String,
default: "",
},
lq: {
type: String,
default: "",
}
},
data () {
return {
update: false,
gyfs: this.$store.state.gyfsList[0].bsm,
tableData: [],
gyfsList: [],
//表格选中项
multipleSelection: [],
dialogVisible: false,
formData: {
addQjDlrFrRequest: [],
dlrList: [
{
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
},
],
fr: {
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
},
bz: "",
dh: "",
dz: "",
dzyj: "",
fczh: "",
fzjg: "",
gjbsm: "PSHGSBDCQJDC000000000000DC350010", //默认中国
glbsm: "",
gyfsbsm: "",
gyqk: "",
gzdw: "",
hjszssbsm: "",
isdel: 0,
qlbl: "",
qlrlxbsm: "",
qlrmc: "",
sshy: "",
sxh: 0,
tdzh: "",
xbbsm: "",
yb: "",
zjh: "",
zjzlbsm: "",
lqqlrtype: ""
},
glbsm: '',
rules: [],
};
},
methods: {
inputBlur (e) {
if (e.target.value != '') {
e.target.style.border = ""
} else {
e.target.style.border = "1px solid red";
e.target.style.boxSizing = 'border-box';
}
},
//新增行数据
addRow () {
console.log(this.gyfs, '共有方式')
this.update = false;
let flag = false;
for (let i = 0; i < this.$store.state.gyfsList.length; i++) {
let item = this.$store.state.gyfsList[i];
if (item.mc === "单独所有" && item.bsm === this.gyfs) {
flag = true;
}
}
if (flag) {
if (this.tableData.length > 0) {
this.$message({
message: "当前方式不可再新增权利人",
type: "warning",
});
} else {
this.formData.gyfsbsm = this.gyfs;
this.dialogVisible = true;
}
} else {
this.formData.gyfsbsm = this.gyfs;
this.dialogVisible = true;
}
},
//确认权利人信息按钮；可以进行新增；可以进行更新；
addNewQlrInfo () {
this.rules = [
{
data: this.formData.qlrmc,
name: '权利人名称',
dom: this.$refs.qlrmc,
rule: /^\s*$/g, //非空
},
{
data: this.formData.qlrlxbsm,
name: '权利人类型',
dom: this.$refs.qlrlxbsm,
rule: /^\s*$/g, //非空
},
{
data: this.formData.zjzlbsm,
name: '证件类型',
dom: this.$refs.zjzlbsm,
rule: /^\s*$/g, //非空
},
{
data: this.formData.zjh,
name: '证件号',
dom: this.$refs.zjh,
rule: /^\s*$/g, //非空
},
{
data: this.formData.dh,
name: '电话',
dom: this.$refs.dh,
rule: /^\s*$/g, //非空
},
{
data: this.formData.dz,
name: '地址',
dom: this.$refs.dz,
rule: /^\s*$/g, //非空
},
]
let flag = true;
this.rules.forEach(item => {
if (item.rule.test(item.data) || item.data == null) {
if (item.dom.$el) {
item.dom.$el.style.border = '1px solid red';
item.dom.$el.style.boxSizing = 'border-box';
} else {
item.dom.style.border = '1px solid red';
item.dom.style.boxSizing = 'border-box';
}
flag = false;
return false
}
console.log(this.tableData, '权利人信息')
console.log(this.$store.state.gyfsList[0].bsm, '确定之后共有方式')
})
this.$nextTick(() => {
if (flag) {
//todo 权利人页面调整
this.formData.addQjDlrFrRequest = [];
this.formData.glbsm = this.bsm;
//将代理人，法人数据合在一起，名称为addQjDlrFrRequest；
//法人的type字段类型为0,
this.formData.fr.type = 0;
this.formData.addQjDlrFrRequest.push(this.formData.fr);
for (let k = 0; k < this.formData.dlrList.length; k++) {
//代理人的type字段类型为1,
this.formData.dlrList[k].type = 1;
this.formData.addQjDlrFrRequest.push(this.formData.dlrList[k]);
}
//林权权利人类型判断
this.formData.lqqlrtype = this.lq;
//如果是从更新按钮点击确定的则进行更新操作，如果不是，则进行添加操作
if (this.update) {
console.log(this.formData)
updateQlrDlrFr(this.formData).then((res) => {
if (res.code === 200) {
this.dialogVisible = false;
this.$message.success("修改完成！");
this.getQlrInfo(this.bsm);
this.update = false;
}
})
} else {
insertQlrDlrFr(this.formData).then((res) => {
if (res.code === 200) {
this.dialogVisible = false;
this.tableData.push(this.formData);
this.getQlrInfo(this.bsm);
Object.assign(this.$data, this.$options.data())
}
})
}
}
})
},
//修改行数据
changeRow () {
if (this.multipleSelection.length === 1) {
this.dialogVisible = true;
this.update = true;
this.formData = this.multipleSelection[0];
if (this.multipleSelection[0].frList.length > 0) {
this.formData.fr = this.multipleSelection[0].frList[0];
}
} else {
this.$message({
message: "请选择一条信息后继续操作",
type: "warning",
});
}
},
updateGyfs (val) {
console.log(val, this.type)
updateGyGyQlrQk(this.bsm, this.type, val).then((res) => {
if (res.code === 200) {
console.log("修改完成！")
//todo 修改该建筑物的所有权利人的相关共有方式
}
})
},
//父组件改变子组件的共有方式
changeGyfs (val) {
this.gyfs = val;
},
//行双击事件
rowDbclick (row) {
if (+this.qszt == 0) {
this.dialogVisible = true;
this.update = true;
this.formData = row;
if (row.frList.length > 0) {
this.formData.fr = row.frList[0];
}
}
},
// inputBlur(e){
// if(e.target.value!=''){
// console.log(e.target.value)
// console.log(!(/^1(3|4|5|6|7|8|9)d{9}$/.test(e.target.value)))
// if(!(/^1(3|4|5|6|7|8|9)d{9}$/.test(e.target.value))){
// e.target.style.border="1px solid red";
// e.target.style.boxSizing = 'border-box';
// }else {
// e.target.style.border=""
// }
// }else{
// e.target.style.border="1px solid red";
// e.target.style.boxSizing = 'border-box';
// }
// },
//删除行数据
delRow () {
if (this.multipleSelection.length > 0) {
let qlrbsms = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
qlrbsms.push(this.multipleSelection[i].qlrbsm)
}
console.log(qlrbsms)
deleteQlrDlrFrByQlrbsm(qlrbsms).then((res) => {
if (res.code === 200) {
this.$message.success("删除完成！")
this.getQlrInfo(this.bsm);
}
})
} else {
this.$message({
message: "请至少选择一条信息后继续操作",
type: "warning",
});
}
},
//选中表格某一项
handleSelectionChange (val) {
this.multipleSelection = val;
},
//供父组件调用来获取共有方式
getQlgyfsData () {
return this.gyfs;
},
//供父组件调用来获取权利人表格数据
getQlrxxData () {
return this.tableData;
},
//增删代理人
handleClick (obj, ind, type) {
if (type === "add") {
this.formData.dlrList.push({
id: Math.random(),
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
});
} else {
this.formData.dlrList.forEach((item, index) => {
if (index == ind && this.formData.dlrList.length > 1) {
this.formData.dlrList.splice(ind, 1);
}
});
}
},
getQlrInfo (bsm) {
if (this.lq == "") {
getQlrInfoByGlbsm(bsm).then((res) => {
if (res.code) {
if (res.result != null) {
this.tableData = res.result;
if (this.tableData.length === 0) {
this.gyfs = this.$store.state.gyfsList[0].bsm;
} else {
this.gyfs = res.result[0].gyfsbsm;
}
}
}
})
} else {
let params = {
bsm: bsm,
type: this.lq
}
getQlrByGlbsmAndType(params).then((res) => {
if (res.code) {
if (res.result != null) {
this.tableData = res.result;
if (this.tableData.length === 0) {
this.gyfs = this.$store.state.gyfsList[0].bsm;
} else {
this.gyfs = res.result[0].gyfsbsm;
}
}
}
})
}
}
},
created () {
this.gyfsList = this.$store.state.gyfsList;
},
mounted () {
this.getQlrInfo(this.bsm);
},
watch: {
tableData: {
handler: function (v) {
this.gyfsList[0].disabled = v.length > 1;
},
deep: true
},
dialogVisible (n) {
if (n === false) {
this.formData = {
addQjDlrFrRequest: [],
dlrList: [
{
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
},
],
fr: {
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
},
bz: "",
dh: "",
dz: "",
dzyj: "",
fczh: "",
fzjg: "",
gjbsm: "PSHGSBDCQJDC000000000000DC350010", //默认中国
glbsm: "",
gyfsbsm: "",
gyqk: "",
gzdw: "",
hjszssbsm: "",
isdel: 0,
qlbl: "",
qlrlxbsm: "",
qlrmc: "",
sshy: "",
sxh: 0,
tdzh: "",
xbbsm: "",
yb: "",
zjh: "",
zjzlbsm: "",
}
}
},
"formData.qlrlxbsm": function (val) {
if (val != '') {
this.$refs.qlrlxbsm.$el.style.border = '';
}
},
}
};
</script>
<style lang="scss">
.temp {
width: 100%;
table {
border-bottom: 0;
background-color: #fff;
font-size: 14px;
width: 100%;
table-layout: fixed;
.qlrBtn {
border: 0;
font-size: 14px;
}
.qlrBtn:hover {
background-color: none !important;
}
.iconfont {
font-size: 14px !important;
}
.span {
color: #409eff;
margin-right: 10px;
cursor: pointer;
}
.noEdit {
color: #606266;
margin-right: 10px;
cursor: not-allowed;
}
.el-radio {
margin-right: 20px !important;
}
td {
text-align: center;
padding: 8px 0;
}
}
.table-title {
font-weight: 700;
font-size: 15px;
}
.el-table th {
background-color: #fff !important;
}
el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
border-color: black;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: rgba(0, 0, 0, 0);
}
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
border-right: 1px solid#E6E6E6;
}
.el-table td,
.el-table th {
padding: 12px 0;
color: #333 !important;
font-weight: normal;
}
.el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid#E6E6E6;
border-color: #E6E6E6 !important;
}
.qlrTable {
border-color: #E6E6E6 !important;
border-bottom: 0;
border-right: 0;
position: relative;
top: -1px;
.el-input__inner {
height: 20px;
margin: 0;
line-height: 20px;
outline: none;
border: none;
color: #606764;
overflow: visible;
cursor: text;
text-align: center;
}
}
}
.insetDialog {
.qlrForm {
height: 500px;
overflow-y: scroll;
}
.zdjbxxTable {
margin: 10px 0;
background-color: #fff;
font-size: 14px;
width: 100%;
border-bottom: 1px solid #000;
.btnCol,
.minusBtnCol {
position: relative;
padding-right: 0;
span {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
padding-right: 10px;
padding-top: 20px;
}
.line {
width: 100%;
height: 2px;
background: #fff;
}
i {
color: #66b1ff;
font-size: 30px;
cursor: pointer;
z-index: 1;
}
}
.minusBtnCol {
i {
color: #FA6400;
}
}
th {
height: 36px;
line-height: 36px;
}
td {
text-align: right;
height: 36px;
}
/deep/.el-input__inner {
margin: 0;
height: 36px;
outline: none;
border: none;
color: #606764;
overflow: visible;
text-align: left;
cursor: text;
}
.percent68 {
width: 68% !important;
float: left;
position: relative;
top: 7px;
}
.percent30 {
width: 30% !important;
float: left;
}
.el-input__icon {
line-height: 37px;
}
.el-select {
width: 100%;
}
}
.dialog-footer {
width: 160px;
margin: 20px auto 0;
}
}
</style>
<template>
<div class="temp">
<div class="qlxzAdd fl">
<span>权利性质</span>
<i class="iconfont iconicon-test2" v-if="formData.qszt == '0'" @click="handleClick(0, 'add')"></i>
<i class="iconfont iconicon-test2" v-if="formData.qszt != '0'" style="cursor: not-allowed;"></i>
</div>
<el-row class="qlxzModule fl" v-for="(items, index) in countList" :key="items.id">
<template v-for="(childItem, childIndex) in items.list">
<el-col :span="1" class="btnCol " :key="childIndex + '1'" :class="childIndex > 0 ? 'childYT noTopBorder' : ''">
<i v-show="childIndex == 0 && formData.qszt == '0'"
:style="{ 'margin-top': (items.list.length - 1) * 57 - 18 + 'px' }" class="iconfont icon- qlxzMinus"
@click="handleClick(index, 'minus')"></i>
<i v-show="childIndex == 0 && formData.qszt != '0'"
:style="{ 'margin-top': (items.list.length - 1) * 57 - 18 + 'px' }" class="iconfont icon- qlxzMinus"
style="cursor: not-allowed;"></i>
<div :class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'" v-if="items.isInside"></div>
</el-col>
<el-col :span="2" class="btnCol tdytAdd" :key="childIndex + '17'"
:class="childIndex > 0 ? 'childYT noTopBorder' : ''">
<template>
<span v-show="childIndex == 0"
:style="{ 'margin-top': (items.list.length - 1) * 57 - 40 + 'px' }">土地用途</span>
<i class="iconfont iconicon-test1" v-show="childIndex == 0 && formData.qszt == '0'"
:style="{ 'margin-top': (items.list.length - 1) * 57 + 'px' }"
@click="handleInClick(index, childIndex, 'add')"></i>
<i class="iconfont iconicon-test1" v-show="childIndex == 0 && formData.qszt != '0'"
:style="{ 'margin-top': (items.list.length - 1) * 57 + 'px' }" style="cursor: not-allowed;"></i>
</template>
</el-col>
<el-col :span="1" class="btnCol tdytMinus pr10" :key="childIndex + '18'"
:class="childIndex > 0 ? 'childYT' : ''">
<i class="iconfont iconicon-test" v-if="formData.qszt == '0'"
@click="handleInClick(index, childIndex, 'minus')"></i>
<i class="iconfont iconicon-test" v-if="formData.qszt != '0'" style="cursor: not-allowed;"></i>
</el-col>
<template v-if="hasSyqx">
<el-col :span="3" :key="childIndex + '7'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li class="pr10"><i class="requisite">*</i>批准用途</li>
<li class="pr10"><i class="requisite">*</i>实际用途</li>
<li class="pr10"><i class="requisite">*</i>土地使用起始时间</li>
</ul>
</el-col>
<el-col :span="4" :key="childIndex + '6'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<el-select-tree class="formSelect percent30" v-if="show" :default-expand-all="defaultExpandAll"
ref="pzytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
:data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="childItem.pzytdm"></el-select-tree>
</li>
<li>
<el-select-tree class="formSelect percent30" v-if="show" :default-expand-all="defaultExpandAll"
ref="sjytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
:data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="childItem.sjytdm"></el-select-tree>
</li>
<li>
<el-date-picker :disabled="formData.qszt != '0'" v-model="childItem.tdsyqssj" type="date" ref="tdsyqssj"
:picker-options="childItem.pickerStart" value-format="yyyy-MM-dd" placeholder="选择日期"
@blur="inputBlur($event, true)" @input="startTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
<el-col :span="3" :key="childIndex + '5'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li class="pr10">地类编码</li>
<li class="pr10">地类编码</li>
<li class="pr10"><i class="requisite">*</i>年限</li>
</ul>
</el-col>
<el-col :span="3" :key="childIndex + '4'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<input type="text" style="top: -1px;" :disabled="formData.qszt != '0'" v-model="childItem.pzytdm"
class="formInput" />
</li>
<li>
<input type="text" :disabled="formData.qszt != '0'" v-model="childItem.sjytdm" class="formInput" />
</li>
<li>
<input type="text" ref="syqx" @blur="inputBlur($event, false)" maxlength="3"
onkeyup="value=value.replace(/[^\d]/g,'')"
@input="sumTime(index, childIndex, childItem.syqx, childItem.syqx)" :disabled="formData.qszt != '0'"
v-model="childItem.syqx" class="formInput" />
</li>
</ul>
</el-col>
<el-col class="pr10" :span="3" :key="childIndex + '2'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>等级</li>
<li>等级</li>
<li><i class="requisite">*</i>土地使用结束时间</li>
</ul>
</el-col>
<el-col :span="4" :key="childIndex + '3'" class="noRightBorder" :class="childIndex > 0 ? 'childYT ' : ''">
<ul>
<li>
<el-select :disabled="formData.qszt != '0'" class="formSelect percent30" v-model="childItem.pzdjbsm">
<el-option v-for="item in $store.state.tddjList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</li>
<li>
<el-select :disabled="formData.qszt != '0'" class="formSelect percent30" v-model="childItem.sjdjbsm">
<el-option v-for="item in $store.state.tddjList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</li>
<li>
<el-date-picker :disabled="formData.qszt != '0'" v-model="childItem.tdsyjssj" type="date" ref="tdsyjssj"
@blur="inputBlur($event, true)" :picker-options="childItem.pickerEnd"
@input="endTime(index, childIndex, $event)" value-format="yyyy-MM-dd" placeholder="选择日期">
</el-date-picker>
</li>
</ul>
</el-col>
</template>
<template v-if="!hasSyqx">
<el-col :span="5" :key="childIndex + '7'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li class="pr10"><i class="requisite">*</i>批准用途</li>
<li class="pr10"><i class="requisite">*</i>实际用途</li>
<li class="pr10"><i class="requisite">*</i>土地使用起始时间</li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '6'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<el-select-tree v-if="show" class="formSelect percent30" :default-expand-all="defaultExpandAll"
ref="pzytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
:data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="childItem.pzytdm"></el-select-tree>
</li>
<li>
<el-select-tree v-if="show" class="formSelect percent30" :default-expand-all="defaultExpandAll"
ref="sjytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
:data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="childItem.sjytdm"></el-select-tree>
</li>
<li>
<el-date-picker v-model="childItem.tdsyqssj" ref="tdsyqssj" :disabled="formData.qszt != '0'"
:picker-options="childItem.pickerStart" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
@blur="inputBlur($event, true)" @input="startTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '5'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li class="pr10">地类编码</li>
<li class="pr10">地类编码</li>
<li class="pr10"><i class="requisite">*</i>土地使用结束时间</li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '4'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<input type="text" style="top: -1px;" :disabled="formData.qszt != '0'" v-model="childItem.pzytdm"
class="formInput" />
</li>
<li>
<input type="text" :disabled="formData.qszt != '0'" v-model="childItem.sjytdm" class="formInput" />
</li>
<li>
<el-date-picker v-model="childItem.tdsyjssj" :disabled="formData.qszt != '0'" ref="tdsyjssj" type="date"
value-format="yyyy-MM-dd" :picker-options="childItem.pickerEnd" placeholder="选择日期"
@blur="inputBlur($event, true)" @input="endTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
</template>
</template>
<div class="title">
<el-select-tree v-if="show" class="formSelect" :disabled="formData.qszt != '0'"
:default-expand-all="defaultExpandAll" :multiple="multiple" :placeholder="placeholder"
:data="$store.state.qlxzList" :props="treeProps" :check-strictly="checkStrictly" :clearable="clearable"
ref="qlxzdm" v-model="items.qlxzdm"></el-select-tree>
</div>
</el-row>
</div>
</template>
<script>
// import { getDdicByMC } from "@api/common";
export default {
props: {
formData: {
type: Object,
default: () => {
return {};
},
},
hasSyqx: {
type: Boolean,
default: false
}
},
data () {
return {
//树型结构
show: true,
clearable: true,
defaultExpandAll: true,
multiple: false,
placeholder: "请选择",
disabled: false,
checkStrictly: true,
treeProps: {
value: "dm",
children: "children",
label: "mc",
},
countList: [
{
id: Math.random(),
isInside: false,
hasNotBorder: false,
bsm: "", //权利性质标识码
glbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
qlxzdm: "",
qlxzmc: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
sjytmj: 0,
syqx: "",
tdsyjssj: "",
pickerStart: {},
pickerEnd: {},
tdsyqssj: "",
tdzh: "",
},
],
},
],
outNum: 0,
rulesResult: true,//权利性质表单校验结果
};
},
created () { },
mounted () {
},
methods: {
startTime (index, childIndex) {
let startTime = this.countList[index].list[childIndex].tdsyqssj;
let endTime = this.countList[index].list[childIndex].tdsyjssj;
this.countList[index].list[childIndex].pickerEnd = {
disabledDate: (time) => {
if (Object.keys(startTime).length > 0) {
return new Date(startTime).getTime() > time.getTime();
} else {
return time.getTime() < Date.now();
}
}
}
if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
let startYear = new Date(startTime).getFullYear();
let endYear = new Date(endTime).getFullYear();
//年限暂时不算
// this.countList[index].list[childIndex].syqx=endYear-startYear;
}
},
sumTime (index, childIndex, syqx, e) {
this.$refs.syqx.forEach((item, index) => {
if (item.value == syqx) {
this.$refs.tdsyjssj[index].$el.style.border = ""
}
})
let startTime = this.countList[index].list[childIndex].tdsyqssj;
this.countList[index].list[childIndex].tdsyjssj = Number(startTime.substring(0, 4)) + Number(syqx) + startTime.slice(4, 10);
},
endTime (index, childIndex, e) {
let startTime = this.countList[index].list[childIndex].tdsyqssj;
let endTime = this.countList[index].list[childIndex].tdsyjssj;
this.countList[index].list[childIndex].pickerStart = {
disabledDate: (time) => {
if (Object.keys(endTime).length > 0) {
return new Date(endTime).getTime() < time.getTime();
} else {
return time.getTime() > Date.now();
}
}
}
if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
let startYear = new Date(startTime).getFullYear();
let endYear = new Date(endTime).getFullYear();
// this.countList[index].list[childIndex].syqx=endYear-startYear;
}
},
//外层操作
handleClick (ind, type) {
let outsideObj = {
id: Math.random(),
isInside: false,
hasNotBorder: false,
bsm: "", //权利性质标识码
glbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
qlxzdm: "",
qlxzmc: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
pickerStart: {},
pickerEnd: {},
sjytmc: "",
sjytmj: 0,
syqx: "",
tdsyjssj: "",
tdsyqssj: "",
tdzh: "",
},
],
};
if (type === "add") {
this.countList.push(outsideObj);
this.outNum++;
} else {
this.countList.forEach((item, index) => {
if (index == ind && this.countList.length > 1) {
this.countList.splice(index, 1);
}
});
this.outNum--;
}
},
reset () {
this.countList = [
{
id: Math.random(),
isInside: false,
hasNotBorder: false,
bsm: "", //权利性质标识码
glbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
qlxzdm: "",
qlxzmc: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
sjytmj: 0,
syqx: "",
tdsyjssj: "",
pickerStart: {},
pickerEnd: {},
tdsyqssj: "",
tdzh: "",
},
],
},
];
},
//内层操作
handleInClick (index, childIndex, type) {
let insideObj = {
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
sjytmj: 0,
pickerStart: {},
pickerEnd: {},
syqx: "",
tdsyjssj: "",
tdsyqssj: "",
tdzh: "",
};
if (type === "add") {
this.countList[index].list.splice(childIndex + 1, 0, insideObj);
} else {
this.countList[index].list.forEach((item, childInd) => {
if (childIndex == childInd && this.countList[index].list.length > 1) {
this.countList[index].list.splice(childIndex, 1);
}
});
}
this.hasBorderOrNot();
},
//判断是否显示边框
hasBorderOrNot () {
this.countList.forEach((item, index) => {
if (index == this.countList.length - 1) {
item.hasNotBorder = true;
} else {
item.hasNotBorder =
item.isInside && !this.countList[index + 1].isInside ? true : false;
}
});
},
getQlxzDataList () {
return this.countList;
},
getRules () {
let rules = [];
let temp = 0;
this.countList.forEach((item, index) => {
rules.push({
data: this.countList[index].qlxzdm,
name: '权利性质',
dom: this.$refs.qlxzdm[index],
rule: /^\s*$/g, //非空
})
item.list.forEach((j, ind) => {
rules.push(
{
data: item.list[ind].tdsyqssj,
name: '土地使用起始时间',
dom: this.$refs.tdsyqssj[temp + ind],
// val:this.$refs.tdsyqssj[temp+ind].value,
rule: /^\s*$/g, //非空
},
{
data: item.list[ind].tdsyjssj,
name: '土地使用结束时间',
dom: this.$refs.tdsyjssj[temp + ind],
// val:this.$refs.tdsyjssj[temp+ind].value,
rule: /^\s*$/g, //非空
},
{
data: item.list[ind].pzytdm,
name: '批准用途',
dom: this.$refs.pzytdm[temp + ind],
// val:this.$refs.tdsyjssj[temp+ind].value,
rule: /^\s*$/g, //非空
},
{
data: item.list[ind].sjytdm,
name: '实际用途',
dom: this.$refs.sjytdm[temp + ind],
// val:this.$refs.tdsyjssj[temp+ind].value,
rule: /^\s*$/g, //非空
},
)
if (this.hasSyqx) {
rules.push(
{
data: item.list[ind].syqx,
name: '使用期限',
dom: this.$refs.syqx[temp + ind],
// val:this.$refs.syqx[temp+ind].value,
rule: /^\s*$/g, //非空
}
)
}
if (ind == item.list.length - 1) {
temp += item.list.length;
}
})
})
this.rulesResult = true;
rules.forEach(item => {
if (item.rule.test(item.data) || item.data == null) {
if (item.dom.$el) {
item.dom.$el.style.border = '1px solid red';
item.dom.$el.style.boxSizing = 'border-box';
} else {
item.dom.style.border = '1px solid red';
item.dom.style.boxSizing = 'border-box';
}
// this.$message({
// // message: item.name+'不能为空',
// message: '不能为空',
// type: "warning",
// });
this.rulesResult = false;
return false
}
})
// console.log(rules,'rules');
},
getRulesResult () {
return this.rulesResult
},
inputBlur (e, flag) {
if (flag) {
if (e.value != '') {
e.$el.style.border = ""
} else {
e.$el.style.border = "1px solid red"
e.$el.style.boxSizing = 'border-box';
}
} else {
if (e.target.value != '') {
e.target.style.border = ""
} else {
e.target.style.border = "1px solid red"
e.target.style.boxSizing = 'border-box';
}
}
},
//后续考虑在点击加减号时操作校验规则
// addRules(){
// this.tempQssj.push()
// },
// minusRules(){
// },
},
watch: {
countList: {
handler: function (newVal, oldVal) {
newVal.forEach((i, ind) => {
if (i.qlxzdm != '' && i.qlxzdm != null) {
console.log(this.$refs.qlxzdm, 'this.$refs.qlxzdm[ind]');
i.qlxzmc = this.$refs.qlxzdm[ind].name;
this.$refs.qlxzdm[ind].$el.style.border = ""
}
i.list.forEach((item, index) => {
if (item.sjytdm != '' && item.sjytdm != null) {
this.$refs.sjytdm[ind].$el.style.border = ""
}
if (item.pzytdm != '' && item.pzytdm != null) {
this.$refs.pzytdm[ind].$el.style.border = ""
}
})
})
},
deep: true
},
}
};
</script>
<style lang="scss">
.temp {
width: 100%;
height: 100%;
.iconfont {
cursor: pointer;
}
.qlxzAdd {
width: 100px;
height: 100%;
border-right: 1px solid #E6E6E6;
position: relative;
span {
font-size: 14px;
height: 140px;
text-align: center;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
position: absolute;
top: 50%;
margin-top: -70px;
left: 30%;
}
i {
color: #66b1ff;
font-size: 30px;
position: absolute;
top: 50%;
margin-top: -18px;
left: 55%;
z-index: 1;
}
}
.qlxzModule {
width: calc(100% - 102px);
height: auto;
position: relative;
border-bottom: 1px solid #E6E6E6;
.pr10 {
padding-right: 10px !important;
}
.el-col {
// height: 100%;
border-right: 1px solid #E6E6E6;
position: relative;
text-align: right;
.qlxz {
line-height: 34px;
}
.qlxzMinus {
color: #FA6400;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
margin: -18px 0 0 -18px;
z-index: 1;
}
ul {
margin-top: 34px;
li {
height: 37px;
line-height: 37px;
text-decoration: none;
border-bottom: 1px solid #e6e6e6;
.el-select {
width: 100%;
}
.el-input {
width: 100%;
}
input {
position: relative;
top: -2px;
height: 35px;
width: calc(100% - 1px) !important;
}
.el-input__inner {
height: 34px;
}
}
li:last-child {
border-bottom: none;
}
}
.whiteItem {
background-color: #fff;
position: absolute;
width: 100%;
height: 2px;
bottom: -1px;
left: 0;
}
.itemShow {
bottom: 2px;
}
}
.childYT {
height: 114px;
border-top: 1px solid #E6E6E6;
ul {
margin-top: 0;
li {
.el-input__inner {
height: 29px;
}
}
}
.changeBtn {
margin-top: -48px;
}
.el-button+.el-button {
margin-top: 4px;
}
}
.noTopBorder {
border-top: 0;
}
.noRightBorder {
border-right: 0;
}
.el-col:nth-last-child(2) {
border-right: none;
}
.title {
width: 95.83333%;
height: 34px;
line-height: 34px;
background-color: #fff;
border-bottom: 1px solid #E6E6E6;
position: absolute;
right: 0;
top: 0;
.formSelect {
top: -1px;
width: 100%;
.el-input__inner {
height: 32px;
}
}
}
}
.btnCol {
position: relative;
height: 146px;
.changeBtn {
width: 46px;
height: 46px;
font-size: 30px;
padding: 4px 6px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -38px;
margin-left: -23px;
}
.el-button+.el-button {
margin-left: -23px;
margin-top: 16px;
}
}
.tdytAdd {
width: 100px;
}
.tdytAdd,
.tdytMinus {
span {
font-size: 14px;
height: 114px;
text-align: center;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
position: absolute;
top: 50%;
left: 30%;
}
i {
color: #66b1ff;
font-size: 30px;
position: absolute;
top: 50%;
margin-top: 0px;
left: 55%;
z-index: 1;
}
}
.tdytMinus {
i {
color: #FA6400;
left: 50%;
margin-left: -18px;
}
}
.childYT {
i {
top: 50%;
margin-top: -18px;
}
}
.el-row:nth-last-child(1) {
border-bottom: none;
}
/deep/.el-select-tree {
width: 100%;
.el-input__inner {
height: 34px !important;
position: relative;
top: -1px;
}
}
}
</style>
<template>
<div class="temp">
<el-row class="qlxzModule" v-for="(items, index) in countList" :key="items.id">
<template v-for="(childItem, childIndex) in items.list">
<el-col :span="2" class="btnCol" :key="childIndex + '1'" :class="childIndex > 0 ? 'childYT noTopBorder' : ''">
<el-button v-show="childIndex < 1" type="primary" class="changeBtn addMinus outAdd"
@click="handleClick(index, 'add')">+</el-button>
<el-button v-show="childIndex < 1" type="primary" class="changeBtn addMinus outMinus"
@click="handleClick(index, 'minus')">-</el-button>
<div :class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'" v-if="items.isInside"></div>
</el-col>
<el-col :span="2" class="btnCol" :key="childIndex + '8'" :class="childIndex > 0 ? 'childYT' : ''">
<!-- <template v-if="childIndex>0"> -->
<span class="qlxz" v-show="childIndex < 1">权利性质</span><br />
<el-button type="primary" class="changeBtn addMinus inAdd" @click="handleInClick(index, childIndex, 'add')">+
</el-button>
<el-button type="primary" class="changeBtn addMinus inMinus"
@click="handleInClick(index, childIndex, 'minus')">-</el-button>
<!-- </template> -->
</el-col>
<el-col :span="5" :key="childIndex + '7'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>批准用途</li>
<li>实际用途</li>
<li>土地使用起始时间<i class="requisite">*</i></li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '6'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<el-select-tree v-if="show" :default-expand-all="defaultExpandAll" :multiple="multiple"
:placeholder="placeholder" :disabled="disabled" :data="$store.state.tdytList" :props="treeProps"
:check-strictly="checkStrictly" :clearable="clearable" v-model="childItem.pzytdm"></el-select-tree>
</li>
<li>
<el-select-tree v-if="show" :default-expand-all="defaultExpandAll" :multiple="multiple"
:placeholder="placeholder" :disabled="disabled" :data="$store.state.tdytList" :props="treeProps"
:check-strictly="checkStrictly" :clearable="clearable" v-model="childItem.sjytdm"></el-select-tree>
</li>
<li>
<el-date-picker v-model="childItem.tdsyqssj" :picker-options="childItem.pickerStart" type="date"
value-format="yyyy-MM-dd" placeholder="选择日期" @input="startTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '5'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>地类编码</li>
<li>地类编码</li>
<li>土地使用结束时间<i class="requisite">*</i></li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '4'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<input type="text" style="top: -1px;" v-model="childItem.pzytdm" class="formInput" />
</li>
<li>
<input type="text" v-model="childItem.sjytdm" class="formInput" />
</li>
<li>
<el-date-picker v-model="childItem.tdsyjssj" type="date" value-format="yyyy-MM-dd"
:picker-options="childItem.pickerEnd" placeholder="选择日期" @input="endTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
</template>
<div class="title">
<el-select class="formSelect" v-model="items.qlxzdm">
<el-option v-for="item in $store.state.qlxzList" :key="item.dm" :label="item.mc" :value="item.dm">
</el-option>
</el-select>
</div>
</el-row>
</div>
</template>
<script>
// import { getDdicByMC } from "@api/common";
export default {
props: {
// widtd: {
// type: String,
default: "70%",
,
a () {
return {
//树型结构
how: true,
arable: true,
aultExpandAll: true,
tiple: false,
ceholder: "请选择",
abled: false,
ckStrictly: true,
eProps: {
lue: "dm",
ildren: "children",
bel: "mc",
ntList: [
id: Math.random(),
isInside: false,
hasNotBorder: false,
bsm: "", //权利性质标识码
lbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
lxzdm: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
jytmj: 0,
syqx: "",
tdsyjssj: "",
tdsyqssj: "",
pickerStart: {},
pickerEnd: {},
tdzh: "",
},
Num: 0,
ed () { },
hods: {
外层操作
ndleClick (ind, type) {
outsideObj = {
Math.random(),
Inside: false,
sNotBorder: false,
"", //权利性质标识码
bsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
xzdm: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
sjytmj: 0,
syqx: "",
tdsyjssj: "",
tdsyqssj: "",
tdzh: "",
};
(type === "add") {
is.countList.push(outsideObj);
is.outNum++;
lse {
.countList.forEach((item, index) => {
f (index == ind && this.countList.length > 1) {
this.countList.splice(index, 1);
}
});
this.outNum--;
Click (index, childIndex, type) {
eObj = {
",
,
"",
"",
: 0,
m: "",
m: "",
"",
: "",
: "",
: 0,
"",
jssj: "",
sj: "",
: "",
e === "add") {
ountList[index].list.splice(childIndex + 1, 0, insideObj);
ountList[index].list.forEach((item, childInd) => {
(childIndex == childInd && this.countList[index].list.length > 1) {
this.countList[index].list.splice(childIndex, 1);
}
});
s.hasBorderOrNot();
是否显示边框
orderOrNot () {
s.countList.forEach((item, index) => {
(index == this.countList.length - 1) {
m.hasNotBorder = true;
{
sNotBorder =
sInside && !this.countList[index + 1].isInside ? true : false;
aList () {
this.countList;
时间判断
tTime (index, childIndex) {
tartTime = this.countList[index].list[childIndex].tdsyqssj;
endTime = this.countList[index].list[childIndex].tdsyjssj;
s.countList[index].list[childIndex].pickerEnd = {
bledDate: (time) => {
f (Object.keys(startTime).length > 0) {
return new Date(startTime).getTime() > time.getTime();
lse {
rn time.getTime() < Date.now();
t.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
ear = new Date(startTime).getFullYear();
ear = new Date(endTime).getFullYear();
ime (index, childIndex, e) {
onsole.log(e, 'eeeeee');
let startTime = this.countList[index].list[childIndex].tdsyqssj;
let endTime = this.countList[index].list[childIndex].tdsyjssj;
this.countList[index].list[childIndex].pickerStart = {
disabledDate: (time) => {
if (Object.keys(endTime).length > 0) {
return new Date(endTime).getTime() < time.getTime();
} else {
return time.getTime() > Date.now();
}
}
}
if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
let startYear = new Date(startTime).getFullYear();
let endYear = new Date(endTime).getFullYear();
}
},
},
};
</script>
<style lang="scss">
.temp {
width: 100%;
.qlxzModule {
height: auto;
position: relative;
border-bottom: 1px solid #e6e6e6;
.el-col {
// height: 100%;
border-right: 1px solid #E6E6E6;
position: relative;
text-align: right;
padding-right: 10px;
.qlxz {
line-height: 34px;
}
ul {
margin-top: 34px;
li {
height: 37px;
line-height: 37px;
text-decoration: none;
border-bottom: 1px solid #e6e6e6;
.el-select {
width: 100%;
}
.el-input {
width: 100%;
}
.el-input__inner {
height: 34px;
}
input {
position: relative;
top: -2px;
height: 35px;
width: calc(100% - 1px) !important;
}
}
li:last-child {
border-bottom: none;
}
}
.whiteItem {
background-color: #fff;
position: absolute;
width: 100%;
height: 2px;
bottom: -1px;
left: 0;
}
.itemShow {
bottom: 2px;
}
}
.childYT {
height: 114px;
border-top: 1px solid #E6E6E6;
ul {
margin-top: 0;
li {
.el-input__inner {
height: 29px;
}
}
}
.changeBtn {
margin-top: -48px;
}
.el-button+.el-button {
margin-top: 4px;
}
}
.noTopBorder {
border-top: 0;
}
.noRightBorder {
border-right: 0;
}
.el-col:nth-last-child(2) {
border-right: none;
}
.title {
width: 83.33333%;
height: 34px;
line-height: 34px;
background-color: #fff;
border-bottom: 1px solid #E6E6E6;
position: absolute;
right: 0;
top: 0;
.formSelect {
top: -1px;
width: 100%;
.el-input__inner {
height: 32px;
}
}
}
}
.btnCol {
position: relative;
height: 146px;
.changeBtn {
width: 46px;
height: 46px;
font-size: 30px;
padding: 4px 6px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -38px;
margin-left: -23px;
}
.el-button+.el-button {
margin-left: -23px;
margin-top: 16px;
}
}
.el-row:nth-last-child(1) {
border-bottom: none;
}
/deep/.el-select-tree {
width: 100%;
.el-input__inner {
height: 30px !important;
}
}
}
</style>
<template>
<el-dialog v-dialogDrag :close-on-click-modal="false" title="户重新落宗" :visible.sync="isVisible" width="50%"
@close="close" :modal-append-to-body="false">
<div class="content">
<table>
<tr>
<td class="label">宗地:</td>
<td class="input">
<el-input placeholder="请选择宗地" v-model="zdxx" :disabled="true"></el-input>
</td>
<td>
<el-button type="primary" @click="xzzdVisible = true">选择宗地</el-button>
</td>
</tr>
<tr>
<td class="label">自然幢:</td>
<td class="input">
<el-select v-model="hcxlzData.zrzbsm" filterable placeholder="请选择" @change="zrzChange">
<el-option v-for="(item, index) in zrzList" :key="index" :label="item.label"
:value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td class="label">逻辑幢:</td>
<td class="input">
<el-select v-model="hcxlzData.ljzbsm" filterable placeholder="请选择" @change="ljzChange">
<el-option v-for="(item, index) in ljzList" :key="index" :label="item.ljzmc"
:value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td class="label">幢单元:</td>
<td class="input">
<el-select v-model="hcxlzData.zdybsm" filterable placeholder="请选择">
<el-option v-for="(item, index) in zdyList" :key="index" :label="item.zdymc"
:value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
</table>
</div>
<div class="footer">
<el-button type="primary" @click="save">保存</el-button>
<el-button type="primary" @click="close">取消</el-button>
</div>
<!-- <zd-query-data :isCxlz=true :centerDialogVisible="xzzdVisible" @close="xzzdClose" @getData="getZdxx"
:isZdClose="true"></zd-query-data> -->
</el-dialog>
</template>
<script>
// import zdQueryData from '@/components/zdQueryData/zdQueryData'
// import { zdXlcd, hzl } from '@api/zd'
import { Message } from 'element-ui'
export default {
name: "hCxlz",
components: { zdQueryData },
data () {
return {
zd: {},
zrz: {},
ljz: {},
zdy: {},
xzzdVisible: false,
isVisible: false,
zdxx: '', // 宗地信息
hcxlzData: {
bsms: [],
zrzbsm: '',
ljzbsm: '',
zdybsm: ''
},
total: 1,
zrzList: [],
ljzList: [],
zdyList: []
}
},
props: {
hCxlzVisble: {
type: Boolean,
default: false
},
bsms: {
type: Array
}
},
mounted () {
this.hcxlzData.bsms = this.bsms;
},
methods: {
ljzChange: function () {
const item = this.ljzList.find(i => i.bsm == this.hcxlzData.ljzbsm)
this.hcxlzData.zdybsm = ''
this.zdyList = item.list;
this.zdyList.push({
zdymc: '空',
bsm: ''
})
},
zrzChange: function () {
const item = this.zrzList.find(i => i.bsm === this.hcxlzData.zrzbsm);
this.hcxlzData.ljzbsm = '';
this.hcxlzData.zdybsm = '';
this.ljzList = item.ljzList;
this.ljzList.push({
ljzmc: '空',
bsm: ''
})
this.zdyList = item.zdyList;
this.zdyList.push({
zdymc: '空',
bsm: ''
})
},
getZrz: function (bsm) {
zdXlcd(bsm).then(res => {
if (res.success) {
this.zrzList = res.result;
this.xzzdClose();
} else {
Message.error(res.message)
}
})
},
getZdxx: function (val) {
this.zd = val
this.zdxx = val.xmmc + "(" + val.zddm + ")";
},
xzzdClose: function () {
this.xzzdVisible = false;
},
result: function () {
this.hcxlzData = {
zrzbsm: '',
ljzbsm: '',
zdybsm: ''
};
this.hcxlzData.bsms = this.bsms;
},
save () {
if (this.hcxlzData.zrzbsm === '') {
Message.error("请选择自然幢");
return;
}
hzl(this.hcxlzData).then(res => {
if (res.success) {
this.$router.push({
path: '/zrz',
query: {
bsm: this.hcxlzData.zrzbsm,
source: 2,
auth: '0,1,2'
}
})
} else {
Message.error(res.message)
}
});
},
close () {
this.$emit('close', false);
this.result();
},
},
watch: {
hCxlzVisble: function (val) {
this.isVisible = val
},
zd: function (val) {
this.hcxlzData.zrzbsm = '';
this.hcxlzData.zdybsm = '';
this.hcxlzData.ljzbsm = '';
this.getZrz(val.zdbsm)
}
}
}
</script>
<style scoped lang="scss">
.input-suffix {
input {
width: 210px;
height: 30px;
border-radius: 3px;
border-color: #BBB;
}
}
.content {
text-align: center;
}
table {
border-collapse: separate;
border-spacing: 10px;
display: inline-block;
text-align: center;
.label {
width: 60px;
font-size: 15px;
text-align: justify;
text-align-last: justify
}
.input {
width: 300px;
.el-select {
width: 300px;
}
}
}
.footer {
margin-top: 20px;
text-align: center;
}
</style>
<template>
<div class="tree_item_box">
<div class="column-start-start linkLine_default" v-for="(item, s_index) in list" :key="s_index" :class="{
linkLine_first: (s_index === 0) & (list.length > 1),
linkLine_half_top: s_index === 0 && list.length === 1,
linkLine_last: s_index === list.length - 1 && s_index !== 0,
third_layer: !item.children,
second_layer: item.children,
curNode: $route.query.bsm && $route.query.bsm == item.bsm,
zxxNode: item.qszt,
iszd: item.qszt && item.type == 'zd',
isdz: item.qszt && item.type == 'dz',
iszrz: item.qszt && item.type == 'zrz',
isgzw: item.qszt && item.type == 'gzw'
}">
<div class="row-flex-start basic_banner" @click="itemClick(item)" @dblclick="dbclick(item, item.zdbsm)" :class="{
active_color: item.expand,
}">
<div class="layer_text nowrap" @contextmenu.prevent="openMenu($event, item, list)" :class="{
active_color: item.expand
}" :ref="($route.query.bsm && $route.query.bsm == item.bsm) ? 'curZxx' : ''" :data-zdbsm="item.zdbsm"
:title=item.mc>
<i v-show="!islpb && !item.qszt && !item.type" class="iconfont iconguoyou" style="margin-right:6px"></i>
<template v-if="islpb && item.type == 'ljz' && item.children.length > 0">
<i v-if="!item.expand" class="iconfont iconxiala lpbTree-node"></i>
<i v-if="item.expand" class="iconfont iconxialazhankai lpbTree-node"></i>
</template>
<!-- <i v-show="islpb && item.expand && item.children.length > 0" class="iconfont iconxiala" style="margin-right:6px"></i>
<i v-show="islpb && !item.expand && item.children.length > 0" class="iconfont iconxialazhankai" style="margin-right:6px"></i> -->
<span class="qsztImg" v-if="item.bblx == 1 || (item.bhqkbsm != '' && item.bhqkbsm != null)">
<!-- <span class="qsztFont" style="color: #9e9b9b">变</span> -->
<i
:class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconbianing' : 'iconfont iconbian'"></i>
</span>
<template v-else>
<span class="qsztImg" v-if="item.qszt == '0'">
<!-- <span class="qsztFont" style="color: #2FA3FA; ">临</span> -->
<i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconlining' : 'iconfont iconlin'"
style="color: #F7B500;"></i>
</span>
<span class="qsztImg" v-if="item.qszt == '1'">
<!-- <span class="qsztFont" style="color: #1AD6E1; ">正</span> -->
<i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconzhenging' : 'iconfont iconzheng'"
style="color: #15D7E2;"></i>
</span>
<span class="qsztImg" v-if="item.qszt == '2'">
<!-- <span class="qsztFont" style="color: #45AEFD; ">现</span> -->
<i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconxianing' : 'iconfont iconxian'"
style="color: #2FA3FA;"></i>
</span>
</template>
<i class="iconfont iconziranchuang1 mr4" v-if="item.type == 'zrz'"></i>
<i class="iconfont iconduochuang1 mr4" v-if="item.type == 'dz'"></i>
<i class="iconfont icongouzhuwu mr4" v-if="item.type == 'gzw'"></i>
<span v-if="islpb">({{ item.type | bdcLxFilter }})</span>
<span>{{ item.mc }}</span>
</div>
<div v-if="item.children" class="reTree_icon" :style="{
height: 10 + 'px',
width: 10 + 'px',
}" :class="{
reTree_default_icon: item.children.length === 0,
reTree_collapse_icon: !islpb && item.expand && item.children.length > 0,
reTree_expand_icon: !islpb && !item.expand && item.children.length > 0,
}"></div>
<div v-if="item.children == null" class="reTree_icon" :class="{
reTree_default_icon: item.dm != 'G' && item.dm != 'J' && item.dm != 'Z',
reTree_expand_icon: item.dm == 'G' || item.dm == 'J' || item.dm == 'Z',
}" :style="{
height: 10 + 'px',
width: 10 + 'px',
}"></div>
</div>
<line-item :list="item.children" v-on="$listeners" :islpb="islpb" :size="size"
v-if="item.expand && item.children && item.children.length > 0"></line-item>
</div>
</div>
</template>
<script>
// import { getZdDetailList } from "@api/common"
export default {
name: "line-item",
props: {
list: {
ype: Array,
ault: () => {
turn [];
,
},
formatData: {
ype: Array,
ault: () => {
turn [];
: {
e: Number,
ault: 16,
ble: {
e: Boolean,
ault: false,
b: {
e: Boolean,
efault: false,
}
,
a () {
rn {
e: null,
reeXzqHeight: 0,
linshi: require("@/image/lpb/lin.png"),
zhengshi: require("@/image/lpb/zheng.png"),
ianshi: require("@/image/lpb/xian.png"),
}
,
nted () {
onsole.log(this.$refs.curZxx,'this.$refs.curZxx');
this.$refs.curZxx) {
onsole.log(this.$refs.curZxx[0].dataset.zdbsm);
his.$store.state.oldZdbsm = this.$refs.curZxx[0].dataset.zdbsm;
: {
Click (item) {
self = this;
开启延时器，300ms的间隔区分单击和双击，解决双击时执行两次单击事件
learTimeout(self.time);
elf.time = setTimeout(() => {
em.expand = item.expand == undefined ? true : !item.expand;
self.$emit("itemClick", item);
source = ''
itch (this.$route.path) {
ase '/add':
source = '1,2'
break;
case '/change':
source = '2'
break;
case '/panel':
source = '0,1,2'
break;
e '/modify':
source = '1'
break;
e '/search':
source = '0,1,2'
break;
default:
break;
目录树的所有权类型单击时加载子节点
(!item.children && !item.type) {
et data = {
xzqbsm: item.xzq,
djqbsm: item.djq,
djzqbsm: item.djzq,
syqlx: item.dm,
source: source
/ getZdDetailList(data).then((res) => {
// if (res.result.length > 0) {
/ res.result.forEach(i => {
// if (i.children.length > 0) {
/ i.expand = false;
}
/ })
// self.$emit("ownerMethod", item, res.result);
/ }
/ }).catch((error) => {
/ });
0);
键点击事件
enMenu (e, item, list) {
onsole.log(item, '右键list');
his.$emit("changeTop", e.pageY);
s.$emit("changeLeft", e.pageX);
s.$emit("changeZdData", item);
$emit("changeVisible", false);
所有权类型
e.log(item.dm,'item.dm ');
dm == 'G' || item.dm == 'J' ||item.dm == 'Z'){
mit("changeCreateVisible", true);
(item.type) {
zd':
$emit("changeIsZD", true);
mit("changeVisible", true);
;
dz':
$emit("changeDzVisible", true);
;
'zrz':
$emit("changeIsZD", false);
s.$emit("changeVisible", true);
;
zdy':
$emit("changeLpbVisible", true);
ljz':
s.$emit("changeLpbVisible", true);
reak;
case 'gzw':
this.$emit("changeGzwVisible", true);
break;
fault:
reak;
键双击事件
ick (item, bsm) {
Timeout(this.time);
tore.state.newZdbsm = bsm;
tem.type) {
':
tore.state.zdbsm = item.bsm;
:
tore.state.zrzbsm = item.bsm;
;
'dz':
his.$store.state.dzbsm = item.bsm;
reak;
'gzw':
his.$store.state.gzwbsm = item.bsm;
reak;
fault:
reak;
m.type == 'zd' || item.type == 'dz' || item.type == 'zrz' || item.type == 'gzw') {
= {
2,
.bsm,
his.$route.query.auth ? this.$route.query.auth : '0,1,2'
.$route.query.workitemInstanceId) {
workitemInstanceId = this.$route.query.workitemInstanceId;
(this.$route.query.ywbsm) {
data.ywbsm = this.$route.query.ywbsm;
}
this.$router.push({
path: '/' + item.type,
query: data
});
}
},
closeMenu () {
this.$emit("changeVisible", false);
},
},
watch: {
visible (value) {
if (value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
},
},
};
</script>
<style lang="scss">
.content {
height: 100%;
width: 100%;
}
.column-start-center {
display: flex;
display: -webkit-flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.row-flex-start {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// .active_color {
// color: #ffffff;
// }
.reTree_icon {
width: 17px;
height: 17px;
margin-right: 16px;
}
.no_icon {
width: 17px;
height: 17px;
}
.tree_item_box {
position: relative;
width: 100%;
cursor: pointer;
}
// .ofy_scroll{
// overflow-y: scroll;
// overflow-x: hidden;
// }
.basic_layer {
width: 100%;
position: relative;
color: #4a4a4a;
cursor: pointer;
.layer_text {
flex: 1;
line-height: 40px;
}
}
.first_vertical_line {
content: "";
position: absolute;
width: 1px;
left: 6px;
top: 17px;
background: #c3c5c8;
}
.basic_banner {
position: relative;
width: 279px;
height: 40px;
box-sizing: border-box;
padding-left: 20px;
}
.lpb_basic_banner {
padding-left: 42px;
}
.second_layer {
position: relative;
width: calc(100% - 20px);
cursor: pointer;
padding-left: 20px;
.basic_banner {
width: 100%;
}
}
.zxxNode {
width: 279px !important;
position: relative;
left: -80px;
text-indent: 80px;
}
.iszd {
.tree_item_box {
.zxxNode {
padding-left: 0;
left: 0;
}
}
}
.iszrz,
.isgzw {
left: 0px !important;
text-indent: 96px;
}
.isdz {
text-indent: 96px !important;
.iszrz {
left: 0 !important;
text-indent: 112px !important;
}
}
.third_layer {
position: relative;
width: calc(100% - 20px);
cursor: pointer;
padding-left: 20px;
}
.white_layer {
color: black !important;
}
.lpbTree-node {
position: absolute;
top: 1px;
left: 0;
}
// .second_layer::before {
// content: "";
// position: absolute;
// height: 1px;
// width: 16px;
// left: 8px;
// top: 8px;
// opacity: .5;
// background: url('../../assets/images/rowline1.png');
// background-position-y: center;
// }
// .third_layer::before {
// content: "";
// position: absolute;
// height: 1px;
// width: 16px;
// left: 8px;
// top: 8px;
// opacity: .5;
// background: url('../../assets/images/rowline1.png');
// background-position-y: center;
// }
// .linkLine_default::after {
// content: "";
// position: absolute;
// height: 100%;
// width: 1px;
// left: 7px;
// top: 0px;
// opacity: .5;
// background: url('../../assets/images/colline1.png');
// background-position-x: center;
// }
// .linkLine_first::after {
// content: "";
// position: absolute;
// /* 为了触顶 */
// top: -16px;
// height: calc(100% + 16px);
// width: 1px;
// left: 7px;
// opacity: .5;
// background: url('../../assets/images/colline1.png');
// background-position-x: center;
// }
// // 上半截
// .linkLine_half_top::after {
// content: "";
// position: absolute;
// height: 23px;
// top: -14px;
// width: 1px;
// left: 7px;
// opacity: .5;
// background: url('../../assets/images/colline1.png');
// background-position-x: center;
// }
// .linkLine_last::after {
// content: "";
// position: absolute;
// height: 9px;
// width: 1px;
// left: 7px;
// top: 0px;
// opacity: .5;
// background: url('../../assets/images/colline1.png');
// background-position-x: center;
// }
.reTree_default_icon {
// opacity: .5;
background-size: contain;
}
.reTree_collapse_icon {
// opacity: .5;
background: url("../../assets/images/arrow-down-bold.svg") no-repeat center center;
background-size: contain;
}
.reTree_expand_icon {
// opacity: .5;
background: url("../../assets/images/arrow-left-bold.svg") no-repeat center center;
background-size: contain;
}
.lpbTree_collapse_icon {
// opacity: .5;
background-size: contain;
}
.lpbTree_expand_icon {
// opacity: .5;
background: url("../../assets/images/arrow-left-bold.svg") no-repeat center center;
background-size: contain;
}
.reTree_focus_icon {
// opacity: .5;
background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
background-size: contain;
}
.qsztImg {
width: 16px;
margin-right: 6px;
// border-radius: 50%; height: 20px; width: 20px; display: inline-block;
}
.curNode {
>.basic_banner {
background: #E9F5FF;
box-shadow: inset 2px 0 0 0 #0C71FB;
color: #0C71FB;
}
}
.qsztFont {
text-align: center;
display: inline-block;
width: 16px;
height: 16px;
font-size: 12px;
line-height: 16px;
border: 1px solid;
border-radius: 8px;
}
.mr4 {
margin-right: 4px;
}
</style>
<template>
<div class="content column-start-center reTree_box"
:style="{ fontSize: (size || 16) + 'px', lineHeight: (size || 16) + 'px', width: (islpb ? '200' : '286') + 'px' }">
<div class="column-start-center basic_layer" :class="islpb ? 'white_layer' : ''" v-for="(item, index) in formatData"
:key="index">
<div class="row-flex-start basic_banner" :class="{
active_color: item.expand && item.children.length > 0,
}" @click="itemClick(item)">
<div class="layer_text nowrap" @contextmenu.prevent="openMenu($event, item)"><i class="iconfont iconguoyou"></i>
{{ item.mc }}</div>
<div class="reTree_icon" :style="{
height: 10 + 'px',
width: 10 + 'px',
}" :class="{
reTree_default_icon: item.children.length === 0,
reTree_collapse_icon: !islpb && item.expand && item.children.length > 0,
reTree_expand_icon: !islpb && !item.expand && item.children.length > 0,
lpbTree_collapse_icon: islpb && item.expand && item.children.length > 0,
lpbTree_expand_icon: islpb && !item.expand && item.children.length > 0,
}"></div>
</div>
<lineItem v-if="item.expand && item.children.length > 0" v-on="$listeners" @ownerMethod="ownerMethod(arguments)"
@changeTop="changeTop" @changeZdData="changeZdData" @changeLeft="changeLeft" @changeVisible="changeVisible"
@changeLpbVisible="changeLpbVisible" @changeIsZD="changeIsZD" @changeCreateVisible="changeCreateVisible"
@changeDzVisible="changeDzVisible" @changeGzwVisible="changeGzwVisible" :list="item.children"
:visible="zrzVisible" :size="size" :islpb="islpb" :formatData="formatData"></lineItem>
</div>
<ul v-show="zrzVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="postionToMap">定位</li>
<li @click="importGeo">导入图形</li>
<li>
导出图形
<ul class="contextmenu childUl">
<li @click="exportText">文本</li>
<li @click="exportCad">CAD</li>
<li @click="exportExcel">Excel</li>
<li @click="exportToShp">ESRI Shape</li>
</ul>
</li>
<li @click="drsx" :class="zdQszt == '0' ? '' : 'noEdit'">导入属性</li>
<li @click="dcsx">导出属性</li>
<li v-show="!isZD">导入楼盘</li>
<!-- <li>重叠分析</li> -->
<li v-show="isZD && (zdQszt == '1' || zdQszt == '2')" @click="openCreateDialog('dzw')">添加定着物</li>
<li v-show="isZD && (zdQszt != '1' && zdQszt != '2')" class="noEdit">添加定着物</li>
<li @click="deleteByBsm()">删除</li>
<li @click="deleteGeoByBsm()">删除图形</li>
</ul>
<ul v-show="dzVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="openCreateDialog('zrz')">新建自然幢</li>
<li @click="deleteByBsm()">删除</li>
</ul>
<ul v-show="createVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="openCreateDialog">新建宗地</li>
</ul>
<!-- 构筑物删除 -->
<ul v-show="gzwVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="deleteByBsm">删除</li>
</ul>
<ul v-show="lpbvisible" :style="{ left: lpbleft + 'px', top: lpbtop + 'px' }" class="contextmenu">
<li v-show="zdData.type == 'zrz'" @click="openLpbDialog('ljz')">添加逻辑幢</li>
<li v-show="zdData.type == 'zrz' || zdData.type == 'ljz'" @click="openLpbDialog('zdy')">添加幢单元</li>
<li v-show="zdData.type == 'zrz' || zdData.type == 'ljz' || zdData.type == 'zdy'" @click="openLpbDialog('ch')">
添加层户</li>
<li v-show="zdData.type == 'ljz'" @click="deleteLjz">删除</li>
<li v-show="zdData.type == 'zdy'" @click="deleteZdy">删除</li>
</ul>
<!--@close="closeImportDialog"-->
<el-dialog v-dialogDrag :close-on-click-modal="false" title="导入图形" :modal="false" custom-class="importDialog"
:visible.sync="improtDialog" width="30%" @close="closeImportDialog">
<import-geo :property-info="zdData" :timeLine="new Date().getTime()" :geo-info="currentClickZdGeo"
@closeImportDialog="closeImportDialog"></import-geo>
</el-dialog>
<!-- 添加定着物弹框 -->
<el-dialog v-dialogDrag :close-on-click-modal="false" title="新建" :modal="false" :visible.sync="dialogVisible"
width="48%">
<!-- <Create @closeDialog="closeDialog" :auth="true" :createZrz="createZrz" ></Create> -->
</el-dialog>
<!-- <sxdr :sxdr-visible="sxdrVisible" @close="sxdrClose" :dylx="zdData.type" :bsm="zdData.bsm"></sxdr> -->
</div>
</template>
<script>
import lineItem from "./lineItem.vue";
// import { deleteZdInfoByBsm, exportShp, exportExcel, delJzdByBsm, delJzxByBsm } from "@api/zd";
// import Create from "../../views/panel/create/index";
import ImportGeo from './tx/importGeo'
port geoUtils from "@/components/lineTree/tx/js/geoUtils";
rt featureUpdate from "@/libs/map/featureUpdate";
ort { deleteLjz, deleteZdy } from "@api/lpb"
exportTemJson from '@/api/json/exportTemplate.json'
mport sxdr from '@/components/sxdr/sxdr'
port default {
nheritAttrs: false,
ps: {
{
e: Array,
ault: () => {
turn [];
: {
e: Number,
ault: 16,
b: {
e: Boolean,
ault: false,
omponents: { lineItem, Create, ImportGeo, sxdr },
ixins: [geoUtils, featureUpdate],
a () {
rn {
rVisible: false,
electedDetail: {},
timer: {},
formatData: this.$store.state.treeData,
isible: false,
top: 0,
left: 0,
sZD: true,
ata: {},
rentClickZdGeo: "",
mprotDialog: false,
ialogVisible: false,
制自然幢右键菜单
Visible: false,
盘表
visible: false,
top: 0,
left: 0,
/控制新建宗地菜单
reateVisible: false,
幢
isible: false,
属状态
szt: null,
: "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]",
ateZrz: false,
/构筑物
zwVisible: false
ch: {
(n, o) {
s.formatData = this.preDealData(n);
isible (value) {
(value) {
ment.body.addEventListener("click", this.closeMenu);
lse {
cument.body.removeEventListener("click", this.closeMenu);
Visible (value) {
(value) {
cument.body.addEventListener("click", this.closeMenu);
lse {
cument.body.removeEventListener("click", this.closeMenu);
wVisible (value) {
f (value) {
document.body.addEventListener("click", this.closeMenu);
lse {
cument.body.removeEventListener("click", this.closeMenu);
}
zrzVisible (value) {
(value) {
ment.body.addEventListener("click", this.closeMenu);
lse {
document.body.removeEventListener("click", this.closeMenu);
reateVisible(value) {
(value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
}
ed () {
nextTick(() => {
eDealData(this.pd);
ndTreeItemById(["6b5af49d803f97baf06afb897de257f5"]);
{
.log(this.zdData, 'zdData')
ow.open(`api/tx/excelGeo/export?bsm=${this.zdData.bsm}&type=${this.zdData.type}`)
`api/tx/excelGeo/export?bsm=${this.zdData.bsm}&type=${this.zdData.type}`
mIF = document.createElement("iframe");
src = url;
style.display = "none";
t.body.appendChild(elemIF)
{
his.zdQszt != '0') {
drVisible = true;
e () {
sxdrVisible = false;
ading () {
his.$emit("loading")
eleteLjz () {
console.log("删除逻辑幢")
console.log(this.zdData, "zdData")
deleteLjz(this.zdData.bsm).then(res => {
if (res.success) {
this.loading()
else {
dy () {
log("删除幢单元")
e.log(this.zdData, "zdData")
teZdy(this.zdData.bsm).then(res => {
f (res.success) {
this.loading()
}
,
变菜单数据
Visible (data) {
s.zrzVisible = data;
s.lpbvisible = false;
dzVisible = false;
wVisible = false;
ta (data) {
= data;
zt = data.qszt;
(data) {
p = data;
lpbtop = data;
angeLeft (data) {
this.left = data;
this.lpbleft = data;
},
changeIsZD (data) {
this.isZD = data;
},
changeLpbVisible (data) {
this.lpbvisible = data;
this.zrzVisible = false;
this.dzVisible = false;
this.gzwVisible = false;
},
changeCreateVisible (data) {
this.createVisible = true;
},
//多幢
changeDzVisible (data) {
this.dzVisible = data;
this.zrzVisible = false;
this.lpbvisible = false;
this.gzwVisible = false;
},
//构筑物
changeGzwVisible (data) {
this.gzwVisible = data;
this.zrzVisible = false;
this.lpbvisible = false;
this.dzVisible = false;
},
//添加定着物
openCreateDialog (type) {
if (type == 'zrz') {
this.createZrz = true;
}
console.log(this.zdData, 'this.zdData');
this.dialogVisible = true;
this.$store.state.zdbsm = this.zdData.zdbsm;
if (this.zdData.type == 'dz') {
this.$store.state.dzbsm = this.zdData.bsm;
} else {
this.$store.state.dzbsm = '';
}
},
//关闭添加定着物弹框
closeDialog () {
this.dialogVisible = false;
this.createZrz = false;
},
preDealData (list) {
//楼盘表目录树没有expand属性
// if(list == null){
// return list
// }else{
list.forEach((x) => {
if (x.expand == undefined) this.$set(x, "expand", true);
if (x.children && x.children.length > 0) {
this.preDealData(x.children);
}
});
return list;
// }
},
// 根据id展开树的具体项
expandTreeItemById (idList) {
let _this = this;
function loopTree (list) {
list.forEach((x) => {
if (idList.includes(x.zdbsm)) {
_this.$set(x, "expand", true);
} else {
_this.$set(x, "expand", false);
}
if (x.children && x.children.length > 0) loopTree(x.children);
});
return list;
}
this.formatData = loopTree(this.pd);
console.log(this.formatData, "this.formatData");
},
itemClick (item) {
// item.expand = item.expand == undefined? true:!item.expand;
this.formatData.forEach(i => {
if (i.bsm != item.bsm) {
i.expand = false
} else {
// i.expand = !item.expand
}
})
item.expand = !item.expand;
// this.$emit("itemClick", item);
},
//给所有权类型添加子节点
ownerMethod (arr) {
let item = arr[0];
let list = arr[1]
this.formatData.forEach(i => {
if (i.bsm == item.xzq) {
i.children.forEach(j => {
if (j.bsm == item.djq) {
j.children.forEach(k => {
if (k.bsm == item.djzq) {
k.children.forEach(n => {
if (n.dm == item.dm) {
this.$nextTick(() => {
n.children = list;
})
}
})
}
})
}
})
}
});
this.$store.state.treeData = this.formatData;
},
//自然幢右键点击事件
openMenu (e, item) {
this.lpbleft = e.pageX;
this.lpbtop = e.pageY;
this.zdData = item;
this.changeLpbVisible(true);
},
//关闭右键菜单
closeMenu () {
this.zrzVisible = false;
this.lpbvisible = false;
this.dzVisible = false;
this.gzwVisible = false;
},
//楼盘表右键菜单项打开父组件弹框
openLpbDialog (type) {
this.$parent.openLpbDialog(this.zdData, type);
},
detailDoubleClick (data) {
clearTimeout(this.timer);
this.selectedDetail = data;
this.$emit("detailDoubleClick", data);
},
//右键菜单的删除
deleteByBsm () {
let name = '';
switch (this.zdData.type) {
case 'zd':
name = '宗地'
break;
case 'dz':
name = '多幢'
break;
case 'zrz':
name = '自然幢'
break;
case 'gzw':
name = '构筑物'
break;
default:
break;
}
this.$confirm('是否确定删除该' + name + '?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = { "bsm": this.zdData.bsm, "type": this.zdData.type };
deleteZdInfoByBsm(params)
.then((res) => {
console.log(res);
if (res.success) {
this.$message({
type: 'success',
message: '删除成功!'
});
this.$router.push("/panel");
} else {
this.$message({
message: res.message,
type: "warning",
});
}
})
.catch((error) => { });
}).catch(() => {
});
var self = this;
var BSM = "";
var type = this.zdData.type;
if (type == "zd") {
BSM = this.zdData.zdbsm;
} else {
BSM = this.zdData.bsm;
}
//删除图形相关信息
var type = this.zdData.type;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0) {
var layer = null;
if (type == 'zd') {
layer = self.getLayerByName("ZDJBXX");
} else {
layer = self.getLayerByName("ZRZ");
}
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
self.delGraphic(featureUrl, features[0], null);
}
});
},
//删除图形
deleteGeoByBsm () {
var self = this;
var BSM = "";
var type = this.zdData.type;
if (type == "zd") {
BSM = this.zdData.zdbsm;
} else {
BSM = this.zdData.bsm;
}
//删除图形相关信息
var type = this.zdData.type;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
var layer = null;
if (type == 'zd') {
layer = self.getLayerByName("ZDJBXX");
} else {
layer = self.getLayerByName("ZRZ");
}
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
features[0].geometry = null;
self.updateGraphic(featureUrl, features, function (res) {
if (!res.updateFeatureResults[0].error) {
self.$message.warning("删除成功!!!")
//清除图层
self.clearHighlightLayer("testMap");
//self.addGeoByBsm(BSM,type,"testMap");
//删除界址点 界址线
if (type == 'zd') {
self.delJzdAndJzx(BSM);
}
}
});
} else {
self.$message.warning("暂无图形信息!!!")
}
});
},
//删除宗地界址点 界址线
delJzdAndJzx (bsm) {
delJzdByBsm({ zdbsm: bsm }).then(res => {
if (res.success) {
console.log("删除界址点成功!!!");
}
});
delJzxByBsm({ zdbsm: bsm }).then(res => {
if (res.success) {
console.log("删除界址线成功!!!");
}
})
},
/*
* 导入图形
* */
importGeo () {
var self = this;
var BSM = "";
if (this.zdData.qszt != '0') {
this.$message.warning("不是临时数据，不能导入图形!!!");
return;
}
var type = this.zdData.type;
if (type == "zd") {
BSM = this.zdData.zdbsm;
} else {
BSM = this.zdData.bsm;
}
//当确定导入图形是 跳转到图形界面
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0) {
if (features[0].geometry && features[0].geometry.rings.length > 0) {
self.$confirm('该条数据有地块信息，是否继续导入?', '提示', {
confirmButtonText: '继续',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
self.postionToMap();
self.improtDialog = true;
self.currentClickZdGeo = features[0];
}).catch(() => {
self.$message({
type: 'info',
message: '已取消'
});
});
} else {
self.postionToMap();
self.currentClickZdGeo = features[0];
self.improtDialog = true;
}
} else {
self.postionToMap();
self.currentClickZdGeo = null;
self.improtDialog = true;
}
});
},
//导出文本文件
exportText () {
var self = this;
var type = this.zdData.type;
var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
var data = features[0];
var jzdInfo = self.craetJZPoint(data);
var textCotent = "";
textCotent += exportTemJson.exprotTextAttr;
textCotent += "[地块坐标]\n";
var dkMc = "", dkYt = "";
if (type == 'zd') {
dkMc = data.attributes.ZL;
dkYt = data.attributes.YT;
} else {
dkMc = data.attributes.XMMC + data.attributes.JZWMC;
dkYt = "建设用地";
}
textCotent += ",,," + dkMc + ",面,," + dkYt + ",,@\n";
for (var i = 0; i < jzdInfo.length; i++) {
textCotent += jzdInfo[i].jzdh + "," + jzdInfo[i].sxh + "," +
jzdInfo[i].x + "," + jzdInfo[i].y + "\n"
}
self.downloadTxt(textCotent, "outPut.txt");
}
}, { wkt: this.wkt });
},
//导出shp文件
exportToShp () {
var self = this;
var type = this.zdData.type;
var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
var data = JSON.stringify(features[0]);
window.location.href = "/api/tx/shpUtils/writeShp?strObj=" + encodeURI(data)
/* exportShp({
"strObj":encodeURI(data)
}).then(res => {
debugger
});*/
} else {
self.$message.warning("暂无空间信息!!!!");
}
}, { wkt: this.wkt });
},
//导出excel
exportExcel () {
var self = this;
var type = this.zdData.type;
var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
var data = features[0];
var jzdInfo = self.craetJZPoint(data);
var submitData = [];
for (var i = 0; i < jzdInfo.length; i++) {
var obj = {
jzdHao: jzdInfo[i].jzdh,
x: jzdInfo[i].x,
y: jzdInfo[i].y,
diKuaiQuanHao: jzdInfo.sxh
}
submitData.push(obj);
}
exportExcel(submitData).then((res) => {
if (res.code == 200) {
var path = res.result;
window.location.href = "/api/tx/excelGeo/download?filePath=" + encodeURI(path);
}
});
} else {
self.$message.warning("还没有空间信息!!!!")
}
}, { wkt: this.wkt })
},
//导出CAD
exportCad () {
//TODO
},
downloadTxt (text, fileName) {
let element = document.createElement('a')
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
element.setAttribute('download', fileName)
element.style.display = 'none'
element.click()
},
//图形定位
postionToMap () {
var type = this.zdData.type;
var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
if (this.$route.path == "/viewMap") {
//定位到当前空间位置
// TODO 这个方法只是为了支撑功能
this.postionToThisGeo(BSM, type);
return;
}
var curretRouterInfo = {
path: this.$route.path,
query: this.$route.query
}
sessionStorage.setItem("curretRouterInfo", JSON.stringify(curretRouterInfo));
this.$router.push({
path: "/viewMap",
query: {
bsm: BSM,
type: type
}
});
},
//关闭图形弹框
closeImportDialog () {
this.improtDialog = false;
this.clearOverLayer();
}
},
};
</script>
<style lang="scss" scoped>
.content {
height: 100%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.column-start-center {
display: flex;
display: -webkit-flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.row-flex-start {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reTree_icon {
width: 17px;
height: 17px;
margin-right: 16px;
}
.basic_layer {
width: 100%;
position: relative;
color: #4a4a4a;
cursor: pointer;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
.layer_text {
flex: 1;
}
}
.white_layer {
color: black !important;
}
.first_vertical_line {
content: "";
position: absolute;
width: 1px;
left: 6px;
top: 17px;
background: #c3c5c8;
}
.basic_banner {
position: relative;
width: 280px;
height: 40px;
}
.second_layer {
position: relative;
width: 100%;
cursor: pointer;
padding-left: 25px;
}
.second_layer::before {
content: "";
position: absolute;
height: 1px;
width: 16px;
left: 9px;
top: 9px;
background: #c3c5c8;
}
.linkLine_default::after {
content: "";
position: absolute;
height: 100%;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.linkLine_first::after {
content: "";
position: absolute;
/* 为了触顶 */
top: -16px;
height: calc(100% + 16px);
width: 1px;
left: 9px;
background: #c3c5c8;
}
// 上半截
.linkLine_half_top::after {
content: "";
position: absolute;
height: 23px;
top: -14px;
width: 1px;
left: 9px;
background: #c3c5c8;
}
.linkLine_last::after {
content: "";
position: absolute;
height: 9px;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.reTree_collapse_icon {
background: url("../../assets/images/arrow-down-bold.svg") no-repeat center center;
background-size: contain;
}
.reTree_default_icon {
background: url("../../assets/images/reTree_default_.svg") no-repeat center center;
background-size: contain;
}
.reTree_expand_icon {
background: url("../../assets/images/arrow-left-bold.svg") no-repeat center center;
background-size: contain;
}
.lpbTree_collapse_icon {
// opacity: .5;
background: url("../../assets/images/lpbTree_expand_.svg") no-repeat center center;
background-size: contain;
}
.lpbTree_expand_icon {
// opacity: .5;
background: url("../../assets/images/lpbTree_collapse_.svg") no-repeat center center;
background-size: contain;
}
.reTree_focus_icon {
background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
background-size: contain;
}
/* /deep/ .importDialog{
margin-top: 120px!important;
margin-left: 291px;
} */
</style>
<template>
<div>
<ul class="importDiv" v-if="!resultDialog && !txtResultDialog && !dealDialog">
<li>
<el-upload class="avatar-uploader" action="#" accept=".txt" :auto-upload="false" :show-file-list="false"
:on-change="txtFileChange">
<!-- <el-button size="small" type="primary">点击上传</el-button>-->
<i class="iconfont iconshangchuan"></i>
<div class="title">TXT文本格式</div>
<div class="templateDowload">
<a href="#" @click.stop="downloadFile('./fileTemplate/txttemplet.txt', 'txttemplet.txt')">TXT模板下载</a>
</div>
</el-upload>
</li>
<li>
<el-upload class="avatar-uploader" action="/api/tx/shpUtils/readShp" accept=".zip" :show-file-list="false"
:on-success="shpFileSuccess">
<!--<el-button size="small" type="primary">点击上传</el-button>-->
<i class="iconfont iconshangchuan"></i>
<div class="title">ESRI Shape文件格式</div>
</el-upload>
</li>
<li>
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" accept=".dwg,.dxf"
:show-file-list="false" :on-success="cadFileSuccess">
<!-- <el-button size="small" type="primary">点击上传</el-button>-->
<i class="iconfont iconshangchuan"></i>
<div class="title">CAD文件</div>
</el-upload>
</li>
<li>
<el-upload class="avatar-uploader" action="/api/tx/excelGeo/readExcel" accept=".xls,.xlsx"
:show-file-list="false" :on-success="excelFileSuccess">
<!--<el-button size="small" type="primary">点击上传</el-button>-->
<i class="iconfont iconshangchuan"></i>
<div class="title">Excel文件格式</div>
<div class="templateDowload">
<a href="#"
@click.stop="downloadFile('./fileTemplate/exceltemplet.xlsx', 'exceltemplet.xlsx')">Excel模板下载</a>
</div>
</el-upload>
</li>
</ul>
<div v-if="resultDialog">
<el-form :model="zdForm" ref="zdCheckForm" label-width="100px" size="small" @submit.native.prevent
class="demo-ruleForm">
<el-form-item label="宗地" prop="zdBsm" :rules="[
{ required: true, message: '请选择宗地', trigger: 'change' },
]">
<el-select v-model="zdForm.zdBsm" filterable placeholder="请选择" @change="zdChange">
<el-option v-for="item in resultData" :key="item.objectid" :label="item.XMMC" :value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('zdCheckForm')">导入</el-button>
<el-button @click="cancel('zdCheckForm')">取消</el-button>
</el-form-item>
</el-form>
</div>
<div v-if="txtResultDialog">
<el-form :model="txtZd" ref="txtZdForm" label-width="100px" size="small" @submit.native.prevent
class="demo-ruleForm">
<el-form-item label="地块名称" prop="name" :rules="[
{ required: true, message: '请选择地块', trigger: 'change' },
]">
<el-select v-model="txtZd.name" filterable placeholder="请选择" @change="txtChange">
<el-option v-for="(item, index) in txtResult" :key="index" :label="item.attributes.name"
:value="item.attributes.name">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitTxtForm('txtZdForm')">导入</el-button>
<el-button @click="cancelTxtForm('txtZdForm')">取消</el-button>
</el-form-item>
</el-form>
</div>
<div v-if="dealDialog">
<el-form :model="dealForm" ref="dealForm" label-width="100px" size="small" @submit.native.prevent
class="demo-ruleForm">
<el-form-item label="处理方法" prop="method" :rules="[
{ required: true, message: '请选择', trigger: 'change' },
]">
<el-select v-model="dealForm.method" filterable placeholder="请选择">
<el-option v-for="(item, index) in dealMethods" :key="index" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitDealForm('dealForm')">确定</el-button>
<el-button @click="cancelDealForm('dealForm')">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import geoUtils from "@components/lineTree/tx/js/geoUtils";
import featureUpdate from "@libs/map/featureUpdate";
// import { addjzd, addjzx } from "@/api/zd"
export default {
props: {
propertyInfo: {
type: Object,
default: null
},
geoInfo: {
type: Object,
default: null
},
timeLine: {
type: Number,
default: null
}
},
mixins: [geoUtils, featureUpdate],
data () {
return {
resultData: [],
resultDialog: false,
zdForm: {
zdBsm: ""
},
currentClickZd: null,
txtResult: [],
txtResultDialog: null,
txtZd: {
name: ""
},
overResults: [],//与导入宗地重叠的地块
currntDealGraphic: null,
dealMethods: [{
label: "不做处理",
value: "1"
}, {
label: "删除叠加部分",
value: "2"
}, {
label: "删除已重叠部分",
value: "3"
}, {
label: "删除原图形",
value: "4"
}],
dealDialog: false,
dealForm: {
method: ""
}
}
},
watch: {
timeLine (newValue, oldValue) {
this.resultDialog = false;
this.txtResultDialog = false;
this.dealDialog = false;
}
},
methods: {
txtFileChange (file, fileList) {
var self = this;
var fileReader = new FileReader();
fileReader.readAsText(file.raw);
fileReader.onload = function (res) {
var content = this.result;
if (!content || content.length == 0) {
self.$message.warning("文件内容为空!!!");
return;
}
self.analysisTextFile(content);
}
},
analysisTextFile (content) {
var index = content.indexOf("[地块坐标]"),
geoInfos = content.substr(index),
geoList = geoInfos.split("\n");
if (geoList.length < 1) {
this.$message.warning("文本内容格式有误，请效验文本内容格式!!!");
return;
}
//this.$emit("closeImportDialog");
var features = [], attributes = {}, points = [], j = 1;
for (var i = 1; i < geoList.length; i++) {
var rowData = geoList[i];
if ((rowData.indexOf("J") != -1 && rowData.indexOf("J") == 0) || (rowData.indexOf("j") != -1 && rowData.indexOf("j") == 0)) {
//解析坐标点信息
var pointInfo = rowData.split(",");
var point = [parseFloat(pointInfo[2]), parseFloat(pointInfo[3])];
points.push(point);
} else {
if (points.length > 0) {
var graphic = {
attributes: JSON.parse(JSON.stringify(attributes)),
geometry: {
rings: [points]
}
}
features.push(graphic);
}
//新建一个信息 坐标名称 类型
attributes = {};
points = []
var info = rowData.split(",");
if (info[3] || info[3] == 'null') {
attributes.name = '地块' + j;
j++
} else {
attributes.name = info[3];
}
}
}
if (points.length > 0) {
var graphic = {
attributes: JSON.parse(JSON.stringify(attributes)),
geometry: {
rings: [[points.concat()]]
}
}
features.push(graphic);
}
//新建一个信息 坐标名称 类型
attributes = {};
points = []
this.txtResult = features;
this.txtZd.name = "";
this.txtResultDialog = true;
},
shpFileSuccess (response, file, fileList) {
var self = this;
if (response.success) {
this.resultData = response.result;
this.resultDialog = true;
} else {
this.$message.warning(response.message);
}
},
cadFileSuccess (response, file, fileList) {
},
excelFileSuccess (response, file, fileList) {
var self = this;
if (response.success) {
var result = response.result;
var points = [];
for (var i = 0; i < result.length; i++) {
var point = [];
point[0] = parseFloat(result[i].x);
point[1] = parseFloat(result[i].y);
points.push(point);
}
var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
var geometry = {
rings: [points],
spatialReference: {
wkt: wkt
},
type: "polygon"
}
var graphic = {
attributes: null,
geometry: geometry
}
self.checkGeo(graphic);
} else {
this.$message.warning(response.message);
}
},
//文本文档导入
submitTxtForm (formName) {
var self = this;
this.$refs[formName].validate((valid) => {
if (valid) {
var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
var graphics = self.txtResult.filter(item => {
return item.attributes.name == self.txtZd.name;
})
var graphic = graphics[0];
graphic.geometry.type = "polygon";
graphic.geometry.spatialReference = {
wkt: wkt
}
self.checkGeo(graphic);
} else {
console.log('error submit!!');
return false;
}
})
},
txtChange (value) {
var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
var graphics = this.txtResult.filter(item => {
return item.attributes.name == value;
})
var graphic = graphics[0];
graphic.geometry.type = "polygon";
graphic.geometry.spatialReference = {
wkt: wkt
}
this.addOverLayer(graphic.geometry, []);
},
//校验空间完整性
checkGeo (graphic) {
var self = this;
//校验完整性 直接调用空间方法 提交空间表
self.geoJoint(graphic.geometry, function (isJoint, message) {
if (isJoint) {
self.$message.warning(message)
return;
} else {
var type = self.propertyInfo.type;
if (type == 'zd') {
//重叠分析
self.zdOverAnalys(self.propertyInfo.zdbsm, graphic, function (flag, results) {
if (flag) {
self.$message.warning("导入的宗地与其他宗地有重叠，请处理！！");
self.dealOverData(results, graphic);
} else {
self.saveZd(graphic);
}
});
} else {
self.zrzOverAnalys(self.propertyInfo.bsm, graphic, function (flag, mes) {
if (flag) {
self.$message.warning(mes);
return;
} else {
self.saveZRZ(graphic);
}
});
}
}
});
},
//选择处理方式
submitDealForm (formName) {
var self = this;
this.$refs[formName].validate((valid) => {
if (valid) {
//选择处理方式
var value = self.dealForm.method;
self.currntDealGraphic.attributes = {};
switch (value) {
case '1': self.currntDealGraphic.attributes.BGZT = 1; self.saveZd(self.currntDealGraphic); break;
case "2": self.getDifference(self.currntDealGraphic, self.overResults, self.delOverGeo); break;
case "3": self.getResultsDif(self.overResults, self.currntDealGraphic, self.delOtherGeo, true); break;
case "4": self.getResultsDif(self.overResults, self.currntDealGraphic, self.delOtherGeo, false); break;
}
} else {
console.log('error submit!!');
return false;
}
})
},
//裁剪自己在保存
delOverGeo (geometry) {
if (!this.currntDealGraphic.attributes) {
this.currntDealGraphic.attributes = {};
}
this.currntDealGraphic.attributes.BGZT = 2;
if (geometry == null) {
this.$message.warning("完全重叠，已删除图形信息!!!")
this.currntDealGraphic.geometry = geometry;
}
this.saveZd(this.currntDealGraphic);
},
//裁剪别的在保存
delOtherGeo (results) {
//执行编辑操作
var layer = this.getLayerByName("ZDJBXX");
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
this.updateGraphic(featureUrl, results);
this.saveZd(this.currntDealGraphic);
},
//下载文档模板
downloadFile (url, fileName) {
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
//导入
submitForm (formName) {
//校验完整性 直接调用空间方法 提交空间表
var self = this;
this.$refs[formName].validate((valid) => {
if (valid) {
var geometry = self.parseWktToArc(self.currentClickZd.wkt);
geometry.type = "polygon";
var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
geometry.spatialReference = {
wkt: wkt
}
var graphic = {
attributes: self.currentClickZd,
geometry: geometry
}
self.checkGeo(graphic);
} else {
console.log('error submit!!');
return false;
}
});
},
dealOverData (results, graphic) {
this.overResults = results;
this.currntDealGraphic = graphic;
this.resultDialog = false;
this.txtResultDialog = false;
this.dealDialog = true;
},
saveZd (graphic) {
var self = this;
var points = null, lines = null,
layer = self.getLayerByName("ZDJBXX");
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
if (self.geoInfo) {
//替换 生成图像 高亮
if (graphic.attributes && graphic.attributes.BGZT) {
self.geoInfo.attributes.BGZT = graphic.attributes.BGZT;
}
self.geoInfo.attributes.BSM = this.propertyInfo.zdbsm;
self.geoInfo.attributes.ZDDM = this.propertyInfo.zddm;
self.geoInfo.attributes.XMMC = this.propertyInfo.mc;
graphic.attributes = self.geoInfo.attributes;
self.updateGraphic(featureUrl, graphic, function (res) {
//保存成功之后生成界址点 界址线
//生成坐标点
//跳转至map界面updateResults
var updResult = res.updateFeatureResults[0];
if (updResult.objectId) {
var OBJECTID = updResult.objectId;
if (graphic.geometry) {
points = self.craetJZPoint(graphic);
self.savejzd(points)
//生成边框线
self.createJZLine(graphic, function (res) {
lines = res;
self.saveJzx(lines);
});
}
self.$message.success("保存成功!!!");
self.goMap();
}
});
} else {
//生成图像 保存
var attributes = {
BSM: this.propertyInfo.zdbsm,
ZDDM: this.propertyInfo.zddm,
XMMC: this.propertyInfo.mc
};
if (graphic.attributes && graphic.attributes.BGZT) {
attributes.BGZT = graphic.attributes.BGZT;
}
graphic.attributes = attributes;
self.addGraphic(featureUrl, graphic, function (res) {
var addRresult = res.addFeatureResults[0];
if (addRresult.objectId) {
var OBJECTID = addRresult.objectId;
if (graphic.geometry) {
points = self.craetJZPoint(graphic);
self.savejzd(points)
//生成边框线
self.createJZLine(graphic, function (res) {
lines = res;
self.saveJzx(lines);
});
}
self.$message.success("保存成功!!!");
self.goMap();
}
});
}
},
savejzd (points) {
var savePoints = []
for (var i = 0; i < points.length; i++) {
var obj = {
glbsm: this.propertyInfo.zdbsm,
jzdh: points[i].jzdh,
sxh: points[i].sxh,
xzbz: points[i].x,
yzbz: points[i].y,
jblx: "",
jzdlx: ""
}
savePoints.push(obj);
}
//保存矢量数据表
// addjzd(savePoints).then(res => {
// if (res.succcess) {
// console.log("界址点保存成成功！！！");
// }
// });
//保存空间数据
},
saveJzx (lines) {
var jzxLines = [];
for (var i = 0; i < lines.length; i++) {
var obj = {
glbsm: this.propertyInfo.zdbsm,
qsd: lines[i].startPoint,
zzd: lines[i].endPoint,
jzjj: lines[i].distance,
qdh: lines[i].qdh,
zdh: lines[i].zdh,
jzxlx: "",
jzxwz: "",
jxxz: "",
sm: ""
}
jzxLines.push(obj);
}
//保存矢量数据表
// addjzx(jzxLines).then(res => {
// if (res.success) {
// //触发查询界址线
// console.log("界址线保存成功!!!!!");
// }
// });
//保存空间数据表
},
saveZRZ (graphic) {
var self = this;
var layer = null;
layer = self.getLayerByName("ZRZ");
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
if (self.geoInfo) {
self.geoInfo.BSM = self.propertyInfo.bsm;
graphic.attributes = self.geoInfo.attributes;
//替换 生成图像 高亮
self.updateGraphic(featureUrl, graphic, function (res) {
var addRresult = res.updateFeatureResults[0];
if (addRresult.objectId) {
self.$message.success("保存成功!!!");
self.goMap();
}
});
} else {
var attributes = {
BSM: this.propertyInfo.bsm,
XMMC: this.propertyInfo.xmmc
}
graphic.attributes = attributes;
//生成图像 保存
self.addGraphic(featureUrl, graphic, function (res) {
var addRresult = res.addFeatureResults[0];
if (addRresult.objectId) {
self.$message.success("保存成功!!!");
self.goMap();
}
});
}
},
//操作成功不需要跳转地图 (直接定位新导入的图形)
goMap () {
var bsm = "", type = this.propertyInfo.type;
if (type == "zd") {
bsm = this.propertyInfo.zdbsm;
} else {
bsm = this.propertyInfo.bsm;
}
this.resultDialog = false;
this.txtResultDialog = false;
this.dealDialog = false;
this.$emit("closeImportDialog");
//TODO 定位当前新导入的图形
this.addGeoByBsm(bsm, type, "testMap");
},
//取消
cancel () {
this.zdForm.zdBsm = "";
this.currentClickZd = null;
this.resultDialog = false;
// 清空当前图层上显示的图形
this.clearOverLayer();
},
//取消文本选择的弹出框
cancelTxtForm () {
this.txtZd.name = "";
this.txtResultDialog = false;
// 清空当前图层上显示的图形
this.clearOverLayer();
},
//取消导入处理的结果
cancelDealForm () {
this.dealForm.method = "";
this.dealDialog = false;
this.overResults = [];
// 清空当前图层上显示的图形
this.clearOverLayer();
},
//宗地选择发生改变
zdChange (value) {
this.zdForm.zdBsm = value.XMMC;
this.currentClickZd = value;
var geometry = this.parseWktToArc(this.currentClickZd.wkt);
geometry.type = "polygon";
var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
geometry.spatialReference = {
wkt: wkt
}
this.addOverLayer(geometry, []);
}
}
}
</script>
<style scoped lang="scss">
.importDiv {
display: flex;
justify-content: center;
align-content: center;
li {
margin: 5px;
width: 50%;
.title {
line-height: 1;
margin-top: -57px;
font-size: 14px;
}
.templateDowload {
line-height: 1;
margin-top: 7px;
a {
color: #409eff;
}
}
}
}
/deep/ .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 100%;
height: 178px;
line-height: 178px;
}
/deep/ .avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
/deep/ .iconfont {
font-size: 20px;
color: #8c939d;
width: 100%;
text-align: center;
}
</style>
\ No newline at end of file

export default {
methods:{
downloadTxt(text, fileName){
let element = document.createElement('a')
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
element.setAttribute('download', fileName)
element.style.display = 'none'
element.click()
},
createTextContent(jzdInfo){
var textContent = "";
for(var i = 0;i < jzdInfo.length;i++){
textContent += jzdInfo[i].jzdh +","+jzdInfo[i].sxh+"," +
jzdInfo[i].x+","+jzdInfo[i].y+"\n"
}
return textContent;
},
}
}
\ No newline at end of file
/*
* 图形相关的操作 js
* */
import layers from '@/api/json/layers.json'
import queryUtils from "@/utils/map/queryUtils";
import identifyUtils from '@/utils/map/IdentifyUtils'
import { loadModules } from "esri-loader"
import featureUpdate from "@/utils/map/featureUpdate";
import arcgisParser from 'terraformer-arcgis-parser'
import wktParse from 'terraformer-wkt-parser'
import { maps } from '@/utils/map/mapUtils'
import graphicSymbol from '@/api/json/graphicSymbol.json'
export default {
data () {
return {
}
},
methods: {
getLayerByName (name) {
for (var i = 0; i < layers.length; i++) {
if (layers[i].layerName == name) {
return layers[i];
}
}
return null;
},
queryGeoByBsm (bsm, type, callBackFunction, outSpatialReference) {
var layer = null;
if (type == 'zd') {
layer = this.getLayerByName("ZDJBXX");
} else if (type == 'zrz') {
layer = this.getLayerByName("ZRZ");
} else {
console.log("未定义类型！！");
return;
}
if (!layer) {
console.log("没有找到图层，不能查询");
return;
}
queryUtils.methods.queryByWhere(layer.layerUrl + "/" + layer.id, { "BSM": bsm }, null, true, null, outSpatialReference, function (res) {
var features = res.features;
if (callBackFunction && typeof callBackFunction == 'function') {
callBackFunction(features);
}
});
},
//生成介质点
craetJZPoint (graphic) {
var geomtry = graphic.geometry, rings = geomtry.rings[0];
var pointInfos = [];
this.getPointByRings(rings, pointInfos);
return pointInfos;
},
getPointByRings (rings, pointInfos) {
for (var i = 0; i < rings.length; i++) {
var children = rings[i];
if (children.length == 2 && typeof children[0] == 'number') {
var obj = {};
obj.jzdh = "j" + pointInfos.length;
obj.sxh = pointInfos.length;
obj.x = children[0];
obj.y = children[1];
pointInfos.push(obj);
} else {
this.getPointByRings(children, pointInfos);
}
}
},
//生成介质线
createJZLine (graphic, callBackFunction) {
var self = this;
loadModules([
"esri/geometry/support/geodesicUtils",
"esri/geometry/Point",
"esri/geometry/Polyline"
]).then(([
geodesicUtils,
Point,
Polyline
]) => {
//取得各个坐标点 然后生成外围坐标线
var geometry = graphic.geometry,
rings = geometry.rings,
points = [];
if (rings.length > 0) {
for (var i = 0; i < rings.length; i++) {
var danPoints = [];
self.getPointByRings(rings[i], danPoints);
points.push(danPoints);
}
} else {
var danPoints = [];
self.getPointByRings(rings, danPoints);
points.push(danPoints);
}
var lines = [];
//meters
for (var i = 0; i < points.length; i++) {
for (var j = 0; j < points[i].length; j++) {
if (j < (points[i].length - 1)) {
const join = geodesicUtils.geodesicDistance(
new Point({ x: points[i][j].x, y: points[i][j].y }),
new Point({ x: points[i][j + 1].x, y: points[i][j + 1].y }),
"meters"
);
const { distance, azimuth } = join;
var obj = {
startPoint: points[i][j].x + "," + points[i][j].y,
endPoint: points[i][j + 1].x + "," + points[i][j + 1].y,
qdh: points[i][j].sxh,
zdh: points[i][j + 1].sxh,
distance: distance,
jzxlx: "",
jzxwz: "",
jzxxz: "",
remark: ""
}
lines.push(obj);
} else {
const join = geodesicUtils.geodesicDistance(
new Point({ x: points[i][j].x, y: points[i][j].y }),
new Point({ x: points[i][0].x, y: points[i][0].y }),
"meters"
);
const { distance, azimuth } = join;
var obj = {
startPoint: points[i][j].x + "," + points[i][j].y,
endPoint: points[i][0].x + "," + points[i][0].y,
qdh: points[i][j].sxh,
zdh: points[i][0].sxh,
distance: distance,
jzxlx: "",
jzxwz: "",
jzxxz: "",
remark: ""
}
lines.push(obj);
}
}
}
if (callBackFunction && typeof callBackFunction == "function") {
callBackFunction(lines);
}
}).catch(err => {
throw (err);
})
},
//wkt转换成arcgis
parseWktToArc (wkt) {
var primitive = wktParse.parse(wkt);
/*if(primitive.type == "MultiPolygon"){
primitive.type = "Polygon"
}*/
return arcgisParser.convert(primitive)
},
postionToThisGeo (bsm, type) {
var view = maps["testMap"];
var layer = view.map.findLayerById("highlightLayer");
if (layer) {
var graphics = layer.graphics;
if (graphics.length > 0 && graphics.items[0].attributes.BSM == bsm) {
// view.extent = graphics.items[0].geometry.extent;
view.center = graphics.items[0].geometry.extent.center;
view.zoom = 15;
}
} else {
this.$message.success("暂无图形信息！！！");
}
},
//导入空间图形是 先判断数据是否跨界
geoJoint (geometry, callBacFunction) {
var self = this;
loadModules([
"esri/geometry/geometryEngine",
"esri/geometry/Polygon"
]).then(([
geometryEngine,
Polygon
]) => {
var djqLayer = null, djzqLayer = null, xjzqLayer = null;
djqLayer = self.getLayerByName("DJQ");
djzqLayer = self.getLayerByName("DJZQ");
xjzqLayer = self.getLayerByName("XJZQ");
var layerIds = [];
layerIds.push(djqLayer.id);
layerIds.push(djzqLayer.id);
layerIds.push(xjzqLayer.id);
var polygon = new Polygon(geometry);
identifyUtils.methods.identify(djqLayer.layerUrl, layerIds, polygon, function (res) {
var results = res.results;
var isJoint = false, layerName = "", message = "";
if (!results || results.length == 0) {
callBacFunction(true, "不在行政区内，请检查空间位置信息!!!");
}
for (var i = 0; i < results.length; i++) {
var feature = results[i].feature;
var flag = geometryEngine.intersects(polygon, feature.geometry);
var withinFlag = geometryEngine.within(polygon, feature.geometry);
if (!withinFlag && flag) {
isJoint = true;
layerName = results[i].layerName;
switch (layerName) {
case 'DJQ': message = "地块跨越地籍区，数据不合法!!!"; break;
case 'DJZQ': message = "地块跨越地籍子区，数据不合法!!!"; break;
case 'XJZQ': message = "地块跨越行政区，数据不合法!!!"; break;
}
break
}
}
if (callBacFunction && typeof callBacFunction == "function") {
callBacFunction(isJoint, message);
}
}, true)
}).catch(err => {
console.log(err);
throw (err);
})
},
//保存或者编辑属性信息
updAttributes (bsm, type, attributes, callBackFunction, ydybsm) {
var layer = null;
if (type == 'zd') {
layer = this.getLayerByName("ZDJBXX");
} else {
layer = this.getLayerByName("ZRZ");
}
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
this.queryGeoByBsm(ydybsm ? ydybsm : bsm, type, function (features) {
if (features && features.length > 0) {
attributes.OBJECTID = features[0].attributes.OBJECTID;
features[0].attributes = attributes;
/* var wkt = "PROJCS[\"XADFZBX\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Transverse_Mercator\"],PARAMETER[\"False_Easting\",0.0],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",0.0],PARAMETER[\"Scale_Factor\",1.0],PARAMETER[\"Latitude_Of_Origin\",0.0],UNIT[\"Meter\",1.0]]";
features[0].geometry.spatialReference = {
wkt:wkt
}*/
if (ydybsm) {
features[0].attributes.BSM = ydybsm;
}
featureUpdate.methods.updateGraphic(featureUrl, features[0], callBackFunction);
} else {
var graphic = {
attributes: attributes
}
featureUpdate.methods.addGraphic(featureUrl, graphic, callBackFunction);
}
});
},
//叠加分析 同一个图层的叠加分析
zdOverAnalys (bsm, graphic, callBacFunction) {
var self = this;
loadModules([
"esri/geometry/Polygon"
]).then(([
Polygon
]) => {
var zdLayer = null;
zdLayer = self.getLayerByName("ZDJBXX");
var layerIds = [];
layerIds.push(zdLayer.id);
var polygon = new Polygon(graphic.geometry);
identifyUtils.methods.identify(zdLayer.layerUrl, layerIds, polygon, function (res) {
var results = res.results;
//判断数据是否与其他数据有重叠
var flag = false;
if (results && results.length > 0) {
flag = true;
//加载在图层上 原本的要导入的数据 和重叠数据
self.addOverLayer(polygon, results);
}
callBacFunction(flag, results);
}, true)
}).catch(err => {
console.log(err);
throw (err);
})
},
//添加添加元素和覆盖的元素到地图上
addOverLayer (geometry, results) {
var view = maps["testMap"];
loadModules([
"esri/Graphic",
"esri/geometry/Polygon",
"esri/layers/GraphicsLayer",
"esri/geometry/geometryEngineAsync",
"esri/geometry/Extent"
]).then(([
Graphic,
Polygon,
GraphicsLayer,
geometryEngineAsync,
Extent
]) => {
var graphic = new Graphic({
geometry: geometry
})
var layer = view.map.findLayerById("overLayer");
if (layer) {
layer.removeAll();
} else {
layer = new GraphicsLayer({
id: "overLayer"
})
view.map.add(layer);
}
var impotSymbol = graphicSymbol.fillSymbol.importSymbol,
defaultSymbol = graphicSymbol.fillSymbol.defaultSymbol;
for (var i = 0; i < results.length; i++) {
var feature = results[i].feature;
feature.symbol = defaultSymbol;
layer.add(feature);
var geo = geometryEngineAsync.intersect(feature.geometry, geometry);
geo.then(function (res) {
var interGra = new Graphic({
geometry: res,
symbol: graphicSymbol.fillSymbol.highlightSymbol
})
layer.add(interGra);
})
}
graphic.symbol = impotSymbol
layer.add(graphic);
var extent = new Extent(JSON.parse(JSON.stringify(graphic.geometry.extent)))
extent.spatialReference = view.spatialReference;
// view.extent = extent;
view.center = extent.center;
view.zoom = 15;
}).catch(err => {
console.log(err);
})
},
clearOverLayer () {
var view = maps["testMap"];
var layer = view.map.findLayerById("overLayer");
if (layer) {
layer.removeAll();
}
},
//自然幢叠加分析 不能跨宗地 图层本身的叠加分析
zrzOverAnalys (bsm, graphic, callBacFunction) {
var self = this;
loadModules([
"esri/geometry/Polygon",
"esri/geometry/geometryEngine"
]).then(([
Polygon,
geometryEngine
]) => {
var polygon = new Polygon(graphic.geometry);
var zdLayer = null,
zrzLayer = null;
zdLayer = self.getLayerByName("ZDJBXX");
zrzLayer = self.getLayerByName("ZRZ");
var layerIds = [];
layerIds.push(zdLayer.id);
layerIds.push(zrzLayer.id);
identifyUtils.methods.identify(zdLayer.layerUrl, layerIds, polygon, function (res) {
var results = res.results;
//判断数据是否与其他数据有重叠
var flag = false,
mesge = "";
if (results && results.length > 0) {
for (var i = 0; i < results.length; i++) {
var feature = results[i].feature,
layerName = results[i].layerName;
if (layerName == 'ZRZ') {
if (!feature.attributes['标识码'] || feature.attributes['标识码'] != bsm) {
var interFlag = geometryEngine.intersects(polygon, feature.geometry);
if (interFlag) {
flag = true;
mesge = "导入的自然幢与其他自然幢重叠，不能导入!!!";
break;
}
}
} else if (layerName == 'ZDJBXX') {
var interFlag = geometryEngine.intersects(polygon, feature.geometry);
var withinFlag = geometryEngine.within(polygon, feature.geometry);
if (!withinFlag && interFlag) {
flag = true;
mesge = "导入的自然幢与其跨宗地，不能导入!!!";
break;
}
}
}
}
callBacFunction(flag, mesge);
}, true)
}).catch(err => {
console.log(err);
})
},
//去除重叠部分
getDifference (inputGraphic, subGraphic, callBackFuncton) {
loadModules([
"esri/geometry/Polygon",
"esri/geometry/geometryEngine",
"esri/Graphic"
]).then(([
Polygon,
geometryEngine,
Graphic
]) => {
var inputGeometry = new Polygon(inputGraphic.geometry);
var outGeometry = null;
for (var i = 0; i < subGraphic.length; i++) {
var feature = subGraphic[i].feature;
outGeometry = geometryEngine.difference(inputGeometry, feature.geometry);
}
if (callBackFuncton && typeof callBackFuncton == 'function') {
callBackFuncton(outGeometry);
}
}).catch(err => {
console.log(err);
})
},
//业务处理 先用query方法 查询将所有属性查询 在做空间裁剪
getResultsDif (subGraphics, currntGraphic, callBackFunction, flag) {
var self = this;
loadModules([
"esri/geometry/geometryEngine",
"esri/geometry/Polygon"
]).then(([
geometryEngine,
Polygon
]) => {
var objectIds = [];
subGraphics.filter(item => {
objectIds.push(item.feature.attributes.OBJECTID);
})
var inputGeometry = new Polygon(currntGraphic.geometry);
var zdLayer = self.getLayerByName("ZDJBXX");
queryUtils.methods.queryByWhere(zdLayer.layerUrl + "/" + zdLayer.id, { OBJECTID: objectIds }, null, true, "", subGraphics[0].feature.geometry.spatialReference, function (result) {
var features = result.features;
if (flag) {
for (var i = 0; i < features.length; i++) {
features[i].geometry = geometryEngine.difference(features[i].geometry, inputGeometry);
features[i].attributes.BGZT = 3;
}
} else {
for (var i = 0; i < features.length; i++) {
features[i].geometry = null;
features[i].attributes.BGZT = 4;
}
}
if (callBackFunction && typeof callBackFunction == 'function') {
callBackFunction(features);
}
})
}).catch(err => {
console.log(err);
})
},
addGeoByBsm (bsm, type, viewId) {
var self = this;
var layer = null;
if (type == 'zd') {
layer = this.getLayerByName("ZDJBXX");
} else if (type == 'zrz') {
layer = this.getLayerByName("ZRZ");
} else {
console.log("未定义类型！！");
return;
}
if (!layer) {
console.log("没有找到图层，不能查询");
return;
}
queryUtils.methods.queryByWhere(layer.layerUrl + "/" + layer.id, { "BSM": bsm }, null, true, null, null, function (res) {
var features = res.features;
if (features && features.length > 0) {
if (!features[0].geometry || features[0].geometry.rings.length == 0) {
self.$message.success("暂无图形信息！！");
return;
}
loadModules([
"esri/layers/GraphicsLayer"
]).then(([
GraphicsLayer
]) => {
var view = maps[viewId];
var layer = view.map.findLayerById("highlightLayer");
if (layer) {
layer.removeAll();
} else {
layer = new GraphicsLayer({
id: "highlightLayer"
})
view.map.add(layer, 5);
}
var symbol = graphicSymbol.fillSymbol.highlightSymbol;
var graphic = features[0];
graphic.symbol = symbol;
layer.add(graphic);
// view.extent = graphic.geometry.extent;
view.center = graphic.geometry.extent.center;
view.zoom = 15;
}).catch(err => {
thow(err);
})
} else {
self.$message.success("暂无图形信息！！");
return;
}
});
},
//清空当前图层
clearHighlightLayer (viewId) {
var view = maps[viewId];
var layer = view.map.findLayerById("highlightLayer");
if (layer) {
layer.removeAll();
}
}
}
}
\ No newline at end of file
import service from './src/index';
export default {
install (Vue) {
Vue.prototype.$loading = service;
},
service
};
import Vue from 'vue';
import loadingVue from './loading.vue';
import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
import { PopupManager } from 'element-ui/src/utils/popup';
import afterLeave from 'element-ui/src/utils/after-leave';
import merge from 'element-ui/src/utils/merge';
const LoadingConstructor = Vue.extend(loadingVue);
const defaults = {
text: null,
fullscreen: true,
body: false,
lock: false,
customClass: ''
};
let fullscreenLoading;
LoadingConstructor.prototype.originalPosition = '';
LoadingConstructor.prototype.originalOverflow = '';
LoadingConstructor.prototype.close = function() {
if (this.fullscreen) {
fullscreenLoading = undefined;
}
afterLeave(this, _ => {
const target = this.fullscreen || this.body
? document.body
: this.target;
removeClass(target, 'el-loading-parent--relative');
removeClass(target, 'el-loading-parent--hidden');
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
this.$destroy();
}, 300);
this.visible = false;
};
const addStyle = (options, parent, instance) => {
let maskStyle = {};
if (options.fullscreen) {
instance.originalPosition = getStyle(document.body, 'position');
instance.originalOverflow = getStyle(document.body, 'overflow');
maskStyle.zIndex = PopupManager.nextZIndex();
} else if (options.body) {
instance.originalPosition = getStyle(document.body, 'position');
['top', 'left'].forEach(property => {
let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
maskStyle[property] = options.target.getBoundingClientRect()[property] +
document.body[scroll] +
document.documentElement[scroll] +
'px';
});
['height', 'width'].forEach(property => {
maskStyle[property] = options.target.getBoundingClientRect()[property] + 'px';
});
} else {
instance.originalPosition = getStyle(parent, 'position');
}
Object.keys(maskStyle).forEach(property => {
instance.$el.style[property] = maskStyle[property];
});
};
const Loading = (options = {}) => {
if (Vue.prototype.$isServer) return;
options = merge({}, defaults, options);
if (typeof options.target === 'string') {
options.target = document.querySelector(options.target);
}
options.target = options.target || document.body;
if (options.target !== document.body) {
options.fullscreen = false;
} else {
options.body = true;
}
if (options.fullscreen && fullscreenLoading) {
return fullscreenLoading;
}
let parent = options.body ? document.body : options.target;
let instance = new LoadingConstructor({
el: document.createElement('div'),
data: options
});
addStyle(options, parent, instance);
if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed' && instance.originalPosition !== 'sticky') {
addClass(parent, 'el-loading-parent--relative');
}
if (options.fullscreen && options.lock) {
addClass(parent, 'el-loading-parent--hidden');
}
parent.appendChild(instance.$el);
Vue.nextTick(() => {
instance.visible = true;
});
if (options.fullscreen) {
fullscreenLoading = instance;
}
return instance;
};
export default Loading;
<template>
<transition name="el-loading-fade" @after-leave="handleAfterLeave">
<div v-show="visible" class="el-loading-mask" :style="{ backgroundColor: background || '' }"
:class="[customClass, { 'is-fullscreen': fullscreen }]">
<div class="el-loading-spinner">
<!-- <svg v-if="!spinner" class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" />
</svg>
<i v-else :class="spinner"></i> -->
<img class="img" src="../../../image/progress.gif" alt="">
<p v-if="text" class="el-loading-text">{{ text }}</p>
</div>
</div>
</transition>
</template>
<script>
export default {
data () {
return {
text: null,
spinner: null,
background: null,
fullscreen: true,
visible: false,
customClass: ''
};
},
methods: {
handleAfterLeave () {
this.$emit('after-leave');
},
setText (text) {
this.text = text;
}
}
};
</script>
<style scoped lang="scss">
.el-loading-spinner {
margin-top: -100px !important;
.img {
width: 80px;
height: 80px;
}
}
</style>
\ No newline at end of file
<template>
<div>
<el-dialog v-dialogDrag :close-on-click-modal="false" title="移动户" :visible.sync="isVisible" width="50%"
@close="close" :modal-append-to-body="false">
<div>
<div class="bottom-radio">
<el-radio-group v-model="moveHdata.sxzylx">
<el-radio label="up">向上</el-radio>
<el-radio label="down">向下</el-radio>
<el-radio label="left">向左</el-radio>
<el-radio label="right">向右</el-radio>
</el-radio-group>
</div>
<div class="bottom-buttom">
<el-button type="primary" @click="save">确认</el-button>
<el-button type="primary" @click="cacel">取消</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
// import { moveH } from '@api/lpb'
import { Message } from 'element-ui'
export default {
name: "moveH",
data () {
return {
isVisible: false,
moveHdata: {
hbsm: "",
sxzylx: "",
type: ""
}
}
},
props: {
moveHvisible: {
type: Boolean,
default: false
},
hbsm: {
type: String
},
type: {
type: String
}
},
methods: {
loading: function () {
this.$emit('loading')
},
save () {
this.moveHdata.hbsm = this.hbsm
this.moveHdata.type = this.type
// moveH(this.moveHdata).then(res => {
// console.log(res)
// if (res.success) {
// this.loading();
// this.close();
// Message.success("移动成功")
// } else {
// Message.error(res.message)
// }
// })
},
cacel () {
this.close()
},
close () {
this.$emit('close');
}
},
watch: {
moveHvisible (val) {
this.isVisible = val
}
}
}
</script>
<style scoped lang="scss">
.bottom-radio {
text-align: center;
}
.el-radio {
padding: 20px;
}
.bottom-buttom {
margin-top: 20px;
text-align: center;
}
</style>
<template>
<div>
<el-dialog v-dialogDrag :close-on-click-modal="false" title="批量层" :visible.sync="isVisible" width="50%"
@close="close" :modal-append-to-body="false">
<div>
<table border="1">
<tr>
<td class="tdright">层建筑面积(㎡)</td>
<td>
<el-input v-model="qlcData.cjzmj"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
</td>
<td class="tdright">
层套内建筑面积(㎡)
</td>
<td>
<el-input v-model="qlcData.ctnjzmj"
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
</td>
</tr>
<tr>
<td class="tdright">层阳台面积(㎡)</td>
<td>
<el-input v-model="qlcData.cytmj" class=""
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
</td>
<td class="tdright">
层半墙面积(㎡)
</td>
<td>
<el-input v-model="qlcData.cbqmj" class=""
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
</td>
</tr>
<tr>
<td class="tdright">层共有建筑面积(㎡)</td>
<td>
<el-input v-model="qlcData.cgyjzmj" class=""
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"></el-input>
</td>
<td class="tdright">
层分摊建筑面积(㎡)
</td>
<td>
<el-input v-model="qlcData.cftjzmj" class=""
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null"
placeholder="层分摊建筑面积(㎡)"></el-input>
</td>
</tr>
<tr>
<td class="tdright">层高(m)</td>
<td>
<el-input v-model="qlcData.cg" class=""
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" placeholder="层高(m)">
</el-input>
</td>
<td class="tdright">
水平投影面积(㎡)
</td>
<td>
<el-input v-model="qlcData.sptymj" class=""
oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" placeholder="水平投影面积(㎡)">
</el-input>
</td>
</tr>
</table>
</div>
<div class="shop">
<el-button type="primary" @click="save">保存</el-button>
<el-button type="primary" @click="result" icon="el-icon-refresh">重置</el-button>
<el-button type="primary" @click="cancel">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
// import { updatePlc } from '@api/zrz'
export default {
name: "plC",
data () {
return {
isVisible: false,
qlcData: {
cbqmj: '', // 层半墙面积
cftjzmj: '', // 层分摊建筑面积
cg: '', // 层高
cgyjzmj: '', // 层共有建筑面积
cjzmj: '', // 层建筑面积
ctnjzmj: '', // 层套内建筑面积
cytmj: '', // 层阳台面积
sptymj: '' // 水平投影面积
}
}
},
props: {
bsms: {
type: Array,
},
plcVisible: {
type: Boolean,
default: function () {
return false
}
}
},
methods: {
lodding: function () {
this.$emit('lodding')
},
save: function () {
this.qlcData['bsms'] = this.bsms
// updatePlc(this.qlcData).then(res => {
// if (res.success) {
// Message.success("保存成功")
// this.lodding()
// this.close()
// } else {
// Message.error(res.message)
// }
// })
},
close: function () {
this.$emit('close')
this.isVisible = false
this.result()
},
cancel: function () {
this.$emit('close')
this.isVisible = false
},
result: function () {
this.qlcData = {
cbqmj: '', // 层半墙面积
cftjzmj: '', // 层分摊建筑面积
cg: '', // 层高
cgyjzmj: '', // 层共有建筑面积
cjzmj: '', // 层建筑面积
ctnjzmj: '', // 层套内建筑面积
cytmj: '', // 层阳台面积
sptymj: '' // 水平投影面积
}
}
},
watch: {
plcVisible (val) {
this.isVisible = val
}
}
}
</script>
<style scoped>
table {
margin-top: 10px;
background-color: #fff;
font-size: 14px;
width: 100%;
}
td {
text-align: center;
height: 36px;
min-width: 50px;
}
table:hover {
cursor: pointer;
}
.inputtitle {
line-height: 41px;
width: 95%;
border: none;
height: 98%;
outline: none;
}
.shop {
margin-top: 20px;
text-align: center;
}
</style>
<template>
<div>
<el-dialog v-dialogDrag :close-on-click-modal="false" title="批量户" :visible.sync="isVisible" width="72%"
@close="close" :modal-append-to-body="false">
<div>
<table border="1">
<tr>
<td colspan="2" class="tdright">建筑面积(㎡)</td>
<td colspan="4"><input type="text" v-model="form.jzmj" class="inputtitle" /></td>
<td colspan="2" class="tdright">套内建筑面积(㎡)</td>
<td colspan="4"><input type="text" v-model="form.tnjzmj" class="inputtitle" /></td>
</tr>
<tr>
<td colspan="2" class="tdright">分摊建筑面积(㎡)</td>
<td colspan="4"><input type="text" v-model="form.ftjzmj" class="inputtitle" /></td>
<td colspan="2" class="tdright">地下部分建筑面积(㎡)</td>
<td colspan="4"><input type="text" v-model="form.dxbfjzmj" class="inputtitle" /></td>
</tr>
<tr>
<td colspan="2" class="tdright">其他建筑面积(㎡)</td>
<td colspan="4"><input type="text" v-model="form.qtjzmj" class="inputtitle" /></td>
<td colspan="2" class="tdright">分摊系数</td>
<td colspan="4"><input type="number" @blur="inputBlur($event)" ref="ftxs" v-model="form.ftxs"
class="inputtitle" /></td>
</tr>
<tr>
<td colspan="2" class="tdright">户型</td>
<td colspan="4">
<el-select class="selectTitle" v-model="form.hxbsm">
<el-option v-for="i in $store.state.hxList" :key="i.bsm" :label="i.mc" :value="i.bsm">
</el-option>
</el-select>
</td>
<td colspan="2" class="tdright">户型结构</td>
<td colspan="4">
<el-select class="selectTitle" v-model="form.hxjgbsm">
<el-option v-for="i in $store.state.hxjgList" :key="i.bsm" :label="i.mc" :value="i.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="2" class="tdright">共有土地面积(㎡)</td>
<td colspan="4"><input type="text" class="inputtitle" v-model="form.gytdmj" /></td>
<td colspan="2" class="tdright">分摊土地面积(㎡)</td>
<td colspan="4"><input type="text" class="inputtitle" v-model="form.fttdmj" /></td>
</tr>
<tr>
<td colspan="2" class="tdright">独有土地面积(㎡)</td>
<td colspan="4"><input type="text" class="inputtitle" v-model="form.dytdmj" /></td>
<td colspan="2" class="tdright">房屋类型</td>
<td colspan="4">
<el-select class="selectTitle" v-model="form.fwlxbsm">
<el-option v-for="i in $store.state.fwlxList" :key="i.bsm" :label="i.mc" :value="i.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="2" class="tdright">产别</td>
<td colspan="4">
<el-select class="selectTitle" v-model="form.fwcbbsm">
<el-option v-for="i in $store.state.cbOptions" :key="i.bsm" :label="i.mc"
:value="i.bsm"></el-option>
</el-select>
</td>
<td colspan="2" class="tdright">产权来源</td>
<td colspan="4">
<el-select class="selectTitle" v-model="form.fwcqlybsm">
<el-option v-for="i in $store.state.cqlyOptions" :key="i.bsm" :label="i.mc"
:value="i.bsm"></el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="2" class="tdright">房屋性质</td>
<td colspan="4">
<el-select class="selectTitle" v-model="form.fwxzbsm">
<el-option v-for="i in $store.state.fwxzOptions" :key="i.bsm" :label="i.mc"
:value="i.bsm"></el-option>
</el-select>
</td>
<td colspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="2" class="tdright">东墙体归属</td>
<td colspan="4"><input type="text" class="inputtitle" v-model="form.dqtgs" /></td>
<td colspan="2" class="tdright">南墙体归属</td>
<td colspan="4"><input type="text" class="inputtitle" v-model="form.nqtgs" /></td>
</tr>
<tr>
<td colspan="2" class="tdright">西墙体归属</td>
<td colspan="4"><input type="text" class="inputtitle" v-model="form.xqtgs" /></td>
<td colspan="2" class="tdright">北墙体归属</td>
<td colspan="4"><input type="text" class="inputtitle" v-model="form.bqtgs" /></td>
</tr>
<tr height="30" v-for="(item1, index) in form.fwytList" :key="index">
<td v-if="index === 0" colspan="2" :rowspan="ytTitleRowspan" align="center" id="ytTitle"
class="tdright">
<i class="iconfont iconicon-test2" style="margin-right: 8px;color:#66b1ff;font-size:30px"
@click="addYtInfo"></i>
<span>房屋用途</span>
</td>
<td width="30" colspan="1" align="center" class="tdright">
<i class="iconfont iconicon-test" style="color:#FA6400;font-size:30px"
@click="deleteYtInfo(index)"></i>
规划用途
</td>
<td width="30" colspan="3" align="center">
<el-select-tree style="width:100%" v-if="show" :default-expand-all="defaultExpandAll"
:multiple="multiple" :placeholder="placeholder" :disabled="disabled"
:data="$store.state.fwytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="item1.fwytzdbsm"></el-select-tree>
</td>
<td width="30" colspan="2" align="center" class="tdright">用途</td>
<td width="30" colspan="4" align="center">
<el-select-tree style="width:100%" v-if="show" :default-expand-all="defaultExpandAll"
:multiple="multiple" :placeholder="placeholder" :disabled="disabled"
:data="$store.state.fwytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="item1.fwsjytbsm"></el-select-tree>
</td>
</tr>
<tr height="30" v-for="(item1, index) in form.fwjgList" :key="'jg' + index">
<td colspan="2" v-if="index === 0" :rowspan="fwjgTitleRowspan" align="center" class="tdright">
<i class="iconfont iconicon-test2" style="margin-right: 8px;color:#66b1ff;font-size:30px"
@click="addFwjgInfo"></i>
<span>房屋结构</span>
</td>
<td colspan="1" align="center">
<i class="iconfont iconicon-test" style="margin-right: 8px;color:#FA6400;font-size:30px"
@click="deleteFwjgInfo(index)"></i>
<span>房屋结构</span>
</td>
<td colspan="9">
<el-select style="width:100%" v-model="item1.fwjgzdbsm" placeholder="请选择">
<el-option v-for="item in $store.state.jgOptions" :key="item.bsm" :label="item.mc"
:value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="12" align="center">
<Qlxz ref="qlxzModule" :hasSyqx='false' :formData="form"></Qlxz>
</td>
</tr>
</table>
</div>
<div class="shop">
<el-button type="primary" @click="save">保存</el-button>
<el-button type="primary" @click="reset" icon="el-icon-refresh">重置</el-button>
<el-button type="primary" @click="cancel">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Qlxz from "@/components/formMenu/qlxz";
// import { batchUpdateQjH } from "@api/h";
export default {
name: "plH",
components: {
Qlxz
},
props: {
bsms: {
type: Array
},
plhVisible: {
type: Boolean,
default: false
}
},
data () {
return {
//树型结构
show: true,
clearable: true,
defaultExpandAll: true,
multiple: false,
placeholder: '请选择',
disabled: false,
checkStrictly: true,
treeProps: {
value: 'bsm',
children: 'children',
label: 'mc'
},
form: {
qszt: '0',
jzmj: '',
tnjzmj: '',
ftjzmj: '',
dxbfjzmj: '',
qtjzmj: '',
ftxs: '',
hxbsm: '',
hxjgbsm: '',
gytdmj: '',
fttdmj: '',
dytdmj: '',
fwlxbsm: '',
fwcbbsm: '',
fwcqlybsm: '',
fwxzbsm: '',
dqtgs: '',
nqtgs: '',
xqtgs: '',
bqtgs: '',
fwjgbsm: '',
fwytList: [{
glbsm: '', //关联标识码
fwytzdbsm: '', //房屋用途字典标识码
sx: '', //顺序
fwsjytbsm: '', //房屋实际用途字典标识码
}],
fwjgList: [{
fwjgzdbsm: '', //房屋结构字典标识码
glbsm: '', //关联标识码
sx: '', //顺序
}],
qlxzList: [{
qlxzdm: '', //权利性质代码
glbsm: '', //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
qlxzzdbsm: '', //权利性质字典表标识码
qlxzmc: '', //权利名称名称
zhqlxzlx: '', //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
addQjTdytRequestList: [{
}], //土地用途新增实体列表
}]
},
isVisible: false,
hx: [{
label: '一居室',
key: '1',
value: '一居室'
}, {
label: '二居室',
key: '2',
value: '二居室'
}, {
label: '三居室',
key: '3',
value: '三居室'
}
],
ytTitleRowspan: 1, //用途的单元格垂直合并数量
fwjgTitleRowspan: 1, //房屋结构的单元格垂直合并数量
}
},
methods: {
inputBlur (e) {
if (e.target.value !== '' && +e.target.value > 0 && +e.target.value < 10) {
e.target.style.border = ""
} else {
e.target.style.border = "1px solid red";
e.target.style.boxSizing = 'border-box';
}
},
lodding: function () {
this.$emit('lodding')
},
addYtInfo () {
this.form.fwytList.push({
glbsm: '',
fwytzdbsm: '',
fwsjytbsm: '',
sx: '',
});
this.ytTitleRowspan = this.form.fwytList.length;
},
deleteYtInfo (index) {
if (this.form.fwytList.length <= 1) {
this.$message({
message: '不能删除，最少含有一条用途信息',
type: 'warning'
});
} else {
this.form.fwytList.splice(index, 1);
this.ytTitleRowspan = this.form.fwytList.length;
}
},
addFwjgInfo () {
this.form.fwjgList.push({
fwjgzdbsm: '', //房屋结构字典标识码
glbsm: '', //关联标识码
sx: '', //顺序
});
this.fwjgTitleRowspan = this.form.fwjgList.length;
},
deleteFwjgInfo (index) {
if (this.form.fwjgList.length <= 1) {
this.$message({
message: '不能删除，最少含有一条房屋结构信息',
type: 'warning'
});
} else {
this.form.fwjgList.splice(index, 1);
this.fwjgTitleRowspan = this.form.fwjgList.length;
}
},
close: function () {
this.$emit('close')
this.isVisible = false
this.reset()
},
reset: function () {
this.form = {
qszt: '0',
jzmj: '',
tnjzmj: '',
ftjzmj: '',
dxbfjzmj: '',
qtjzmj: '',
ftxs: '',
hxbsm: '',
hxjgbsm: '',
gytdmj: '',
fttdmj: '',
dytdmj: '',
fwlxbsm: '',
fwcbbsm: '',
fwcqlybsm: '',
fwxzbsm: '',
dqtgs: '',
nqtgs: '',
xqtgs: '',
bqtgs: '',
fwjgbsm: '',
fwytList: [{
glbsm: '', //关联标识码
fwytzdbsm: '', //房屋用途字典标识码
sx: '', //顺序
fwsjytbsm: '', //房屋实际用途字典标识码
}],
fwjgList: [{
fwjgzdbsm: '', //房屋结构字典标识码
glbsm: '', //关联标识码
sx: '', //顺序
}],
qlxzList: [{
qlxzdm: '', //权利性质代码
glbsm: '', //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
qlxzzdbsm: '', //权利性质字典表标识码
qlxzmc: '', //权利名称名称
zhqlxzlx: '', //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
addQjTdytRequestList: [{
}], //土地用途新增实体列表
}]
};
this.$refs.qlxzModule.reset();
this.ytTitleRowspan = 1; //用途的单元格垂直合并数量
this.fwjgTitleRowspan = 1; //房屋结构的单元格垂直合并数量
},
save: function () {
this.rules = [
{
data: this.form.ftxs,
name: '分摊系数',
dom: this.$refs.ftxs,
rule: /^(?!0(\.0{1,2})?$)(\d(\.\d{1,2})?)$/, //大于0小于10的所有保留两位的数字
},
];
let flag = true;
this.rules.forEach(item => {
if (item.data !== "") {
if (!item.rule.test(+item.data) || item.data == null) {
if (item.dom.$el) {
item.dom.$el.style.border = '1px solid red';
item.dom.$el.style.boxSizing = 'border-box';
} else {
item.dom.style.border = '1px solid red';
item.dom.style.boxSizing = 'border-box';
}
flag = false;
return false
}
}
})
this.form['hbsms'] = this.bsms
this.form.qlxzList = this.$refs.qlxzModule.getQlxzDataList();
this.$nextTick(() => {
if (flag) {
for (let i = 0; i < this.form.fwjgList.length; i++) {
if (this.form.fwjgList[i].fwjgzdbsm === '') {
this.form.fwjgList.splice(i, 1);
}
}
for (let i = 0; i < this.form.fwytList.length; i++) {
if (this.form.fwytList[i].fwsjytbsm === '') {
this.form.fwytList.splice(i, 1);
}
}
for (let i = 0; i < this.form.qlxzList.length; i++) {
if (this.form.qlxzList[i].qlxzdm === '') {
this.form.qlxzList.splice(i, 1);
}
}
console.log("批量户信息")
// batchUpdateQjH(this.form).then((res) => {
// if (res.code === 200) {
// this.lodding()
// this.$message.success("保存成功！")
// this.$nextTick(() => {
// this.reset();
// })
// this.close();
// } else {
// this.$message.error(res.message)
// }
// })
} else {
this.$message({
// message: item.name+'不能为空',
message: '表单数据有误',
type: "warning",
});
}
})
},
cancel: function () {
this.close()
}
},
mounted () {
},
watch: {
plhVisible (val) {
this.isVisible = val
}
}
}
</script>
<style scoped>
table {
margin-top: 10px;
background-color: #fff;
font-size: 14px;
width: 100%;
table-layout: fixed;
}
td {
text-align: center;
height: 36px;
min-width: 60px;
}
table:hover {
cursor: pointer;
}
.inputtitle {
line-height: 40px;
width: 95%;
border: none;
outline: none;
height: 95%;
}
.selectTitle {
width: 100%;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
position: relative;
display: block;
}
.shop {
text-align: center;
margin-top: 20px;
}
/deep/.el-input__inner {
width: 100%;
border: 0;
}
</style>
<template>
<div class="">
<el-dialog v-dialogDrag :close-on-click-modal="false" title="批量室号" :visible.sync="isVisible" width="50%"
@close="close" :modal-append-to-body="false">
<div>
<table border="1">
<tr>
<th>室号前缀</th>
<th>幢单元号</th>
<th>分割符A</th>
<th>层号前自动补0</th>
<th>层号</th>
<th>分割符B</th>
<th>户号前自动补零</th>
<th>户号</th>
<th>室号后缀</th>
</tr>
<tr>
<td>
<el-input v-model="plshData.shqz"></el-input>
</td>
<td>
<el-checkbox v-model="plshData.selectDyh"></el-checkbox>
</td>
<td>
<el-input v-model="plshData.fgfA"></el-input>
</td>
<td>
<el-checkbox v-model="plshData.chqbl"></el-checkbox>
</td>
<td>
<el-select v-model="plshData.c">
<el-option v-for="i in cs" :key="i.key" :label="i.label" :value="i.value"></el-option>
</el-select>
</td>
<td>
<el-input v-model="plshData.fgfB"></el-input>
</td>
<td>
<el-checkbox v-model="plshData.hhqbl"></el-checkbox>
</td>
<td>
</td>
<td>
<el-input v-model="plshData.shhz"></el-input>
</td>
</tr>
</table>
<div class="gz">
<span>室号规则：{{ gz }}</span>
</div>
<div class="xlgz">
<span>
样例1：1011 <span>（1单元01层01室）</span>([单元号][层号]，勾选“层号自动补0”)
<br />
样例2：1131室<span>（1单元13层01室）</span>([单元号][层号][后缀],后缀填写'室')
<br />
样例3：101<span>(1层01室)</span>([层号],勾选“户号自动补0”)
<br />
样例4：1-011<span>(1单元-01层01室)</span>([单元号][分隔符A][层号]，勾选“层号自动补0”)
<br />
样例5：1-12-1<span>(1单元12层01室)</span>([单元号][分隔符A][层号][分隔符B])
<br />
样例6：1-12<span>(1层12室)</span>([层号][分隔符B])
</span>
</div>
</div>
<div class="shop">
<el-button type="primary" @click="save">保存</el-button>
<el-button type="primary" @click="result" icon="el-icon-refresh">重置</el-button>
<el-button type="primary" @click="cancel">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
// import { updateSh } from '@api/zrz'
import { Message } from 'element-ui'
export default {
name: "plSh",
props: {
plShVisible: {
type: Boolean,
default: false
},
bsms: {
type: Array
}
},
data () {
return {
isVisible: false,
plshData: {
shqz: '',
selectDyh: false,
fgfA: '',
chqbl: false,
c: '',
fgfB: '',
hhqbl: false,
shhz: ''
},
cs: [
{
key: '1',
label: '名义层',
value: '1'
}, {
key: '2',
label: '实际层',
value: '2'
}, {
key: '3',
label: '空',
value: '3'
}
]
}
},
methods: {
test: function () {
for (let key in this.plshData) {
if (key === 'chqbl') {
continue;
}
if (this.plshData[key] !== '' && this.plshData[key] !== '3' && this.plshData[key] !== false) {
return true;
}
}
return false;
},
lodding: function () {
this.$emit('lodding')
},
close: function () {
this.$emit("close")
this.isVisible = false
this.result();
},
result: function () {
this.plshData = {
shqz: '',
selectDyh: false,
fgfA: '',
chqbl: false,
hhqbl: false,
c: '',
fgfB: '',
shhz: ''
}
},
save: function () {
if (!this.test()) {
this.$message.info("请选择")
return;
}
this.plshData['bsms'] = this.bsms
// updateSh(this.plshData).then(res => {
// if (res.success) {
// this.lodding();
// this.close();
// } else {
// Message.error(res.message)
// }
// })
},
cancel: function () {
this.close()
}
},
computed: {
gz: function () {
let gz = "";
if (this.plshData.shqz !== "") {
gz += this.plshData.shqz
}
if (this.plshData.selectDyh) {
gz += "[单元号]"
}
if (this.plshData.fgfA !== "") {
gz += this.plshData.fgfA
}
if (+this.plshData.c === 1) {
gz += "[名义层]"
} else if (+this.plshData.c === 2) {
gz += "[实际层]"
}
if (this.plshData.fgfB !== "") {
gz += this.plshData.fgfB
}
gz += "[户号]";
if (this.plshData.shhz !== "") {
gz += this.plshData.shhz
}
return gz;
}
},
watch: {
plShVisible: function (val) {
this.isVisible = val
}
}
}
</script>
<style scoped lang="scss">
table {
margin-top: 10px;
background-color: #fff;
font-size: 14px;
width: 100%;
:hover {
cursor: pointer;
}
}
th {
height: 36px;
}
td {
text-align: center;
height: 36px;
min-width: 60px;
}
.xl {
color: blue;
float: right;
}
.xl:hover {
cursor: pointer;
}
.inputtitle {
line-height: 38px;
width: 90%;
border: none;
outline: none;
}
.shop {
text-align: center;
margin-top: 20px;
}
.gz {
color: #b2b2b2;
font-size: 14px;
margin-top: 40px;
}
.xlgz {
span {
font-size: 16px;
line-height: 22px;
span {
color: red;
}
}
}
</style>
<template>
<div>
<el-dialog v-dialogDrag :close-on-click-modal="false" title="批量坐落" :visible.sync="isVisible" width="60%"
@close="close" :modal-append-to-body="false">
<div>
<table border="1">
<tr>
<th>前缀</th>
<th>宗地</th>
<th>自然幢</th>
<th>逻辑幢</th>
<th>幢单元</th>
<th>层</th>
<th>户</th>
<th>后缀</th>
</tr>
<tr>
<td>
<el-input v-model="plzlData.qz"></el-input>
</td>
<td>
<el-select v-model="plzlData.zd">
<el-option v-for="i in zdgz" :key="i.label" :label="i.label" :value="i.value"
:disabled="i.disabled">
</el-option>
</el-select>
</td>
<td>
<el-select v-model="plzlData.zrz">
<el-option v-for="i in zrzgz" :key="i.label" :label="i.label" :value="i.value"
:disabled="i.disabled">
</el-option>
</el-select>
</td>
<td>
<el-select v-model="plzlData.ljz">
<el-option v-for="i in ljzgz" :key="i.label" :label="i.label" :value="i.value">
</el-option>
</el-select>
</td>
<td>
<el-select v-model="plzlData.zdy">
<el-option v-for="i in zdygz" :key="i.label" :label="i.label" :value="i.value">
</el-option>
</el-select>
</td>
<td>
<el-select v-model="plzlData.c">
<el-option v-for="i in cgz" :key="i.label" :label="i.label" :value="i.value">
</el-option>
</el-select>
</td>
<td>
<el-select v-model="plzlData.h">
<el-option v-for="i in hgz" :key="i.label" :label="i.label" :value="i.value">
</el-option>
</el-select>
</td>
<td>
<el-input v-model="plzlData.hz"></el-input>
</td>
</tr>
</table>
<div class="gz">
<span>户坐落规则：{{ gz }}</span>
</div>
</div>
<div class="shop">
<el-button type="primary" @click="save">保存</el-button>
<el-button type="primary" @click="result" icon="el-icon-refresh">重置</el-button>
<el-button type="primary" @click="close">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
// import { updateZl } from '@api/zrz'
import { Message } from 'element-ui'
export default {
name: "plZl",
props: {
plZlVisible: {
type: Boolean,
default: false
},
bsms: {
type: Array
}
},
data () {
return {
isVisible: false,
plzlData: {
qz: '',
zd: '3',
zrz: '3',
ljz: '3',
zdy: '3',
c: '3',
h: '3',
hz: ''
},
zdgz: [
{
label: '宗地坐落',
value: '1',
disabled: false
}, {
label: "宗地名称",
value: '2',
disabled: false
}, {
label: "空",
value: '3',
disabled: false
}
],
zrzgz: [
{
label: '自然幢坐落',
value: '1',
disabled: false
}, {
label: "自然幢名称",
value: '2',
disabled: false
}, {
label: "空",
value: '3'
}
],
ljzgz: [
{
label: '逻辑幢名称',
value: '1'
}, {
label: "逻辑幢号",
value: '2'
}, {
label: "空",
value: '3'
}
],
zdygz: [
{
label: '幢单元名称',
value: '1'
}, {
label: "幢单元号",
value: '2'
}, {
label: "空",
value: '3'
}
],
cgz: [
{
key: '1',
label: '名义层',
value: '1'
}, {
key: '2',
label: '实际层',
value: '2'
}, {
label: "空",
value: '3'
}
],
hgz: [
{
key: '1',
label: '室号',
value: '1'
}, {
key: '2',
label: '户号',
value: '2'
}, {
label: "空",
value: '3'
}
]
}
},
methods: {
lodding: function () {
this.$emit('lodding')
},
save: function () {
if (!this.test()) {
this.$message.info("请选择")
return;
}
this.plzlData['bsms'] = this.bsms;
// updateZl(this.plzlData).then(res => {
// if (res.success) {
// this.lodding()
// this.close();
// } else {
// Message.error(res.message)
// }
// })
},
test: function () {
for (let key in this.plzlData) {
if (this.plzlData[key] !== '' && this.plzlData[key] !== '3') {
return true;
}
}
return false;
},
cancel: function () {
this.close();
},
close: function () {
this.$emit("close")
this.isVisible = false
this.result();
},
result: function () {
this.plzlData = {
qz: '',
zd: '',
zrz: '',
ljz: '',
zdy: '',
c: '',
h: '',
hz: ''
}
}
},
computed: {
gz: function () {
// [前缀][宗地][自然幢][单元][室号][室号][后缀]
let gz = "";
if (this.plzlData.qz !== '') {
gz += this.plzlData.qz
}
if (+this.plzlData.zd === 1) {
gz += "[宗地坐落]";
} else if (+this.plzlData.zd === 2) {
gz += "[宗地名称]";
}
if (+this.plzlData.zrz === 1) {
gz += "[自然幢坐落]"
} else if (+this.plzlData.zrz === 2) {
gz += "[自然幢名称]";
}
if (+this.plzlData.ljz === 1) {
gz += "[逻辑幢名称]"
} else if (+this.plzlData.ljz === 2) {
gz += "[逻辑幢号]"
}
if (+this.plzlData.zdy === 1) {
gz += "[幢单元名称]";
} else if (+this.plzlData.zdy === 2) {
gz += "[幢单元号]"
}
if (+this.plzlData.c === 1) {
gz += "[名义层]"
} else if (+this.plzlData.c === 2) {
gz += "[实际层]"
}
if (+this.plzlData.h === 1) {
gz += "[室号]"
} else if (+this.plzlData.h === 2) {
gz += "[户号]"
}
if (this.plzlData.hz !== "") {
gz += this.plzlData.hz
}
if (gz === "") {
gz += "无"
}
return gz;
}
},
watch: {
plZlVisible: function (val) {
this.isVisible = val
},
plzlData: {
handler (val) {
this.zrzgz[0].disabled = +val.zd === 1;
this.zdgz[0].disabled = +val.zrz === 1;
},
deep: true
}
}
}
</script>
<style scoped lang="scss">
table {
margin-top: 10px;
background-color: #fff;
font-size: 14px;
width: 100%;
:hover {
cursor: pointer;
}
}
th {
height: 36px;
}
td {
text-align: center;
height: 36px;
min-width: 60px;
}
.xl {
color: blue;
float: right;
}
.xl:hover {
cursor: pointer;
}
.inputtitle {
line-height: 38px;
width: 90%;
border: none;
outline: none;
}
.shop {
text-align: center;
margin-top: 20px;
}
.gz {
color: #b2b2b2;
font-size: 12px;
margin-top: 40px;
}
.xlgz {
span {
font-size: 16px;
line-height: 22px;
span {
color: red;
}
}
}
</style>
......@@ -2,13 +2,13 @@ import Vue from 'vue'
import Popup from './index.vue'
const PopupBox = Vue.extend(Popup)
Popup.install = function (data) {
Popup.install = function (title, editItem, data) {
data.title = title
data.editItem = editItem
let instance = new PopupBox({
data
}).$mount()
document.body.appendChild(instance.$el)
Vue.nextTick(() => {
instance.isShow = true
})
......
<template>
<transition name="fade" mode="out-in" v-if="isShow">
<transition name="dialog-fade" mode="out-in" v-if="isShow">
<div class="ls-mask" v-loading="loading">
<div class="ls-mask-window" :style="{ 'width': width, 'height': height }">
<div class="ls-head">
......@@ -25,19 +25,19 @@ export default {
name: 'index',
data () {
return {
btnShow: false,
title: '标题',
editItem: "",
formData: undefined,//父组件传递的参数 负责传给子组件
btnShow: false,
cancel: function () { },
confirm: function () { },
cancelText: '取消',
confirmText: '确认',
isSync: false,
isShow: false,
cancel: function () { },
confirm: function () { },
editItem: "",
titleStyle: 'center',
width: "75%",
height: "auto",
formData: undefined,//父组件传递的参数 负责传给子组件
contentHeight: "",
iconClass: "",
key: 0
......@@ -95,6 +95,12 @@ export default {
r(require(`@/views/${view}.vue`))
);
}
},
destroyed () {
// if appendToBody is true, remove DOM node after destroy
if (this.appendToBody && this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
}
}
</script>
......
......@@ -2,10 +2,7 @@
1.在main.js中引入 import Popup from './components/tanchuang/index'
Vue.prototype.$popup = Popup.install
2.用法以及参数：
this.$popup({
title: '提示', // 弹窗标题
titleStyle:"", //标题存在的位置 center left
editItem: 'ywbl/dbx/aa', // 子组件的路径 相当于你平时img取的路径
this.$popup('提示','ywbl/dbx/aa',{
formData:this.formData, //父组件传给子组件的参数
cancel: function () {}, //取消事件的回调
confirm: function () {}, //确认事件的回调
......
import {loadModules} from 'esri-loader'
export default {
methods: {
identify(url,layerIds,geometry,callBackFunction,returnGeometry,layerOption,tolerance,mapExtent){
var self = this;
loadModules([
"esri/tasks/IdentifyTask",
"esri/tasks/support/IdentifyParameters"
]).then(([
IdentifyTask,
IdentifyParameters
]) => {
var identifyTask = new IdentifyTask({
url:url
}),
identifyParameters = new IdentifyParameters();
identifyParameters.geometry = geometry;
if(layerIds){
identifyParameters.layerIds = layerIds;
}
identifyParameters.layerOption = layerOption ? layerOption : "all";
identifyParameters.tolerance = tolerance ? tolerance : 3;
identifyParameters.mapExtent = mapExtent ? mapExtent : geometry.extent;
identifyParameters.returnGeometry = returnGeometry ? returnGeometry : false;
//identifyParameters.returnFieldName = true;
identifyParameters.spatialReference = geometry.spatialReference;
identifyTask.execute(identifyParameters).then(result => {
if(callBackFunction && typeof callBackFunction == 'function'){
callBackFunction(result);
}
});
}).catch(err => {
throw(err);
});
}
}
}
\ No newline at end of file
import {maps} from '@/libs/map/mapUtils'
import {loadModules} from 'esri-loader'
export default {
data() {
return {
drawAction:null,
graphicLayer:null,
creatEvent:null,
}
},
methods: {
initDraw(type,viewId,creationMode,callBackFunction){
var self = this;
loadModules([
"esri/widgets/Sketch",
"esri/layers/GraphicsLayer"
]).then(([
Sketch,
GraphicsLayer
]) => {
var view = maps[viewId];
if(!self.drawAction){
self.graphicLayer = new GraphicsLayer({
id:"_drawLayer"
})
self.drawAction = new Sketch({
view: view,
layer:self.graphicLayer,
creationMode: "single"
});
}else {
// this.drawAction.cancel();
if(creationMode){
self.drawAction.creationMode = creationMode;
}
// graphicLayer = view.map.findLayerById("_drawLayer");
}
self.drawAction.create(type);
if(self.creatEvent){
self.creatEvent.remove();
}
self.creatEvent = self.drawAction.on("create", function(event) {
if (event.state === "complete") {
self.graphicLayer.remove(event.graphic);
if(callBackFunction && typeof callBackFunction == 'function'){
callBackFunction(event.graphic.geometry);
}
}
})
}).catch(err=>{
throw(err);
});
},
destroyeDraw() {
if(this.drawAction){
this.drawAction.cancel();
}
}
}
}
\ No newline at end of file
/*
* 空间图层数据添加、修改、删除
* */
import {loadModules} from "esri-loader"
export default {
methods:{
addGraphic(url,graphic,callBackFunction){
loadModules([
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/geometry/Point",
"esri/geometry/Polygon",
"esri/geometry/Polyline"
]).then(([
FeatureLayer,
Graphic,
Point,
Polygon,
Polyline
])=>{
var featureLayer = new FeatureLayer({
url:url
})
var saveGraphics = [];
if(!Array.isArray(graphic)){
graphic = [graphic];
}
for(var i = 0;i < graphic.length;i++){
var geo = null;
if(!graphic[i].geometry){
geo = null;
}else if(graphic[i].geometry.type == 'point'){
geo = new Point(graphic[i].geometry);
}else if(graphic[i].geometry.type == 'polyline'){
geo = new Polyline(graphic[i].geometry);
}else if(graphic[i].geometry.type == 'polygon'){
geo = new Polygon(graphic[i].geometry);
}
var saveGraphic = new Graphic({
attributes:graphic[i].attributes,
geometry:geo
});
saveGraphics.push(saveGraphic);
}
console.log(saveGraphic)
featureLayer.applyEdits({
addFeatures:saveGraphics,
// updateFeatures
}).then(function (res){
if(callBackFunction && typeof callBackFunction == 'function'){
console.log(res);
callBackFunction(res);
}
})
}).catch( err => {
throw (err);
})
},
updateGraphic(url,graphic,callBackFunction){
loadModules([
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/geometry/Point",
"esri/geometry/Polygon",
"esri/geometry/Polyline"
]).then(([
FeatureLayer,
Graphic,
Point,
Polygon,
Polyline
])=>{
var featureLayer = new FeatureLayer({
url:url
})
var updGraphics = [];
if(!Array.isArray(graphic)){
graphic = [graphic];
}
for(var i = 0;i < graphic.length;i++){
var geo = null;
if(!graphic[i].geometry){
geo = new Polygon();
}else if(graphic[i].geometry.type == 'point'){
geo = new Point(graphic[i].geometry);
}else if(graphic[i].geometry.type == 'polyline'){
geo = new Polyline(graphic[i].geometry);
}else if(graphic[i].geometry.type == 'polygon'){
geo = new Polygon(graphic[i].geometry);
}
var updGraphic = new Graphic({
attributes:graphic[i].attributes,
geometry:geo
});
updGraphics.push(updGraphic);
}
featureLayer.applyEdits({
updateFeatures:updGraphics
}).then(function (res){
if(callBackFunction && typeof callBackFunction == 'function'){
callBackFunction(res);
}
})
}).catch( err => {
throw (err);
})
},
delGraphic(url,graphic,callBackFunction){
loadModules([
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/geometry/Point",
"esri/geometry/Polygon",
"esri/geometry/Polyline"
]).then(([
FeatureLayer,
Graphic,
Point,
Polygon,
Polyline
])=>{
var featureLayer = new FeatureLayer({
url:url
})
var delGraphics = [];
if(!Array.isArray(graphic)){
graphic = [graphic];
}
for(var i = 0;i < graphic.length;i++){
var geo = null;
if(!graphic[i].geometry){
geo = null;
}else if(graphic[i].geometry.type == 'point'){
geo = new Point(graphic[i].geometry);
}else if(graphic[i].geometry.type == 'polyline'){
geo = new Polyline(graphic[i].geometry);
}else if(graphic[i].geometry.type == 'polygon'){
geo = new Polygon(graphic[i].geometry);
}
var delGraphic = new Graphic({
attributes:graphic[i].attributes,
geometry:geo
});
delGraphics.push(delGraphic);
}
featureLayer.applyEdits({
deleteFeatures:delGraphics
}).then(function (res){
console.log(res);
if(callBackFunction && typeof callBackFunction == 'function'){
callBackFunction(res);
}
})
}).catch( err => {
throw (err);
})
}
}
}
\ No newline at end of file
import {loadModules} from 'esri-loader'
export default {
methods:{
findByPro(url,layerIds,searchFields,searchText,returnGeometry,callBackFunction){
loadModules([
"esri/tasks/FindTask",
"esri/tasks/support/FindParameters"
]).then(([
FindTask,
FindParameters
]) => {
var findTask = new FindTask({
url:url
}),
findParameters = new FindParameters();
findParameters.returnGeometry = returnGeometry ? returnGeometry : false;
findParameters.layerIds = layerIds;
findParameters.searchFields = searchFields;
findParameters.searchText = searchText;
findParameters.outSpatialReference = {wkid:3857};
findTask.execute(findParameters).then(function (result) {
if(callBackFunction){
callBackFunction(result);
}
});
}).catch(err => {
throw (err);
})
}
}
}
\ No newline at end of file
import {loadCss,loadScript} from "esri-loader"
export function init(){
// loadScript({url:"http://192.168.2.38/4.16/init.js"});
// loadCss("http://192.168.2.38/4.16/esri/themes/light/main.css");
loadScript({ url:"http://192.168.2.146/arcgis_js_api/library/4.17/init.js"});
loadCss("http://192.168.2.146/arcgis_js_api/library/esri/css/main.css");
}
init();
\ No newline at end of file
var maps = {}
export {maps};
\ No newline at end of file
import {loadModules} from 'esri-loader'
import {maps} from '@/libs/map/mapUtils'
export default{
data(){
return{
//activeWidget:null,
areaActive:null,
distanceActive:null
}
},
methods: {
measure(viewId,type){
var view = maps[viewId];
var self = this;
loadModules([
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/AreaMeasurement2D"
]).then(([
DistanceMeasurement2D,
AreaMeasurement2D
]) => {
switch (type) {
case "distance":
if(!self.distanceActive){
self.distanceActive = new DistanceMeasurement2D({
view: view
});
}
// skip the initial 'new measurement' button
self.distanceActive.viewModel.start();
break;
case "area":
if(!self.areaActive){
self.areaActive = new AreaMeasurement2D({
view: view
});
}
// skip the initial 'new measurement' button
self.areaActive.viewModel.start();
break;
case null:
if (self.distanceActive) {
self.distanceActive.viewModel.clear();
// self.distanceActive = null;
}
if (self.areaActive) {
self.areaActive.viewModel.clear();
// self.areaActive = null;
}
break;
}
}).catch(err => {
throw(err);
});
}
}
}
\ No newline at end of file
import {loadModules} from 'esri-loader'
export default{
methods: {
queryByWhere(url,queryWhere,geometry,returnGeometry,outFields ,outSpatialReference ,callBackFunction){
var self = this;
loadModules([
"esri/tasks/QueryTask",
"esri/tasks/support/Query"
]).then(([
QueryTask,
Query
]) => {
var queryTask = new QueryTask({
url: url
}),
query = new Query(),
where = "";
if (queryWhere){
var parames = self.parseObj2Arr(queryWhere);
//var isFrist = false;
for(var i = 0;i < parames.length; i++ ){
if(i == 0){
}else {
where += " and ";
}
if(Array.isArray(parames[i].value)){
where += parames[i].name + " in (" + parames[i].value.toString() + ")";
}else if(typeof parames[i].value == 'number'){
where += parames[i].name + " =" + parames[i].value ;
}else{
where += parames[i].name + " like " + "'%" + parames[i].value +"%'";
}
}
} else {
where = "1=1";
}
query.where = where;
if(geometry){
query.geometry = geometry;
}
query.outSpatialReference = outSpatialReference ? outSpatialReference : {wkid:3857}
query.returnGeometry = returnGeometry ? true : false;
query.outFields = outFields ? outFields : ["*"];
queryTask.execute(query).then(function(results){
if(callBackFunction && typeof callBackFunction == 'function'){
callBackFunction(results);
}
});
}).catch( err => {
throw(err);
})
},
parseObj2Arr(object){
var arr = [];
for(var key in object){
var obj = {};
obj.name = key;
obj.value = object[key];
arr.push(obj);
}
return arr;
}
},
}
import {open,openShp} from "shapefile"
export default{
methods: {
readShpByFile(file,callBackFunction){
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.οnlοad=function(){
var fileData = this.result ; //fileData就是读取到的文件的二进制数据
openShp(fileData).then(source => source.read()
.then(function log(result) {
if (result.done) return;
if(callBackFunction && typeof callBackFunction == 'function'){
callBackFunction(result.value);
}
return source.read().then(log);
}))
.catch(error => console.error(error.stack));
}
},
readShpByUrl(url,callBackFunction){
open(url).then(source => source.read()
.then(function log(result) {
if (result.done) return;
if(callBackFunction && typeof callBackFunction == 'function'){
callBackFunction(result.value);
}
return source.read().then(log);
}))
.catch(error => console.error(error.stack));
}
},
readShpByZip(zipUrl,callBackFunction){
}
}
\ No newline at end of file
......@@ -24,18 +24,19 @@ const service = axios.create({
// request interceptor
service.interceptors.request.use(
config => {
if (config.showLoading) {
startLoadingAddCount(config.loadingTarget);
if (config.headers.showLoading !== false) {
startLoadingAddCount(config.headers.loadingTarget ? config.headers.loadingTarget : '正在加载中...',
config.headers.target ? config.headers.target : 'body');
}
config.headers.Authorization =
// 'bearer AT-231-XqviE9StKRPLMwmnSoVBLP-YzTupyBI5'
'bearer AT-4-MxSrO29Coe7VTazx8uuixtqqgO-hvCB6'
config.headers.Accept = 'application/json'
return config
},
error => {
if (error.showLoading) {
endLoadingSubCount(config.loadingTarget);
if (error.headers.showLoading !== false) {
endLoadingSubCount(config.headers.loadingTarget ? config.headers.loadingTarget : '正在加载中...',
config.headers.target ? config.headers.target : 'body');
}
Message.error('请求超时!');
return Promise.reject(error)
......@@ -45,7 +46,7 @@ service.interceptors.request.use(
// response interceptor
service.interceptors.response.use(
response => {
if (response.config.showLoading) {
if (response.config.headers.showLoading !== false) {
endLoadingSubCount();
}
/**
......@@ -67,7 +68,7 @@ service.interceptors.response.use(
type: 'error',
duration: 5 * 1000
})
if (error.config.showLoading) {
if (error.config.headers.showLoading !== false) {
endLoadingSubCount();
}
return Promise.reject(error);
......@@ -103,6 +104,6 @@ function handleErrorData (errMes) {
}
}
}
export default service
......
import { Loading } from 'element-ui'
// import { Loading } from 'element-ui'
import Loading from '@/components/loading/index.js';
// 定义 loading
let loading
// loading开始 方法
function startLoading (LoadingText = '拼命加载中...') {
// element-ui loading 服务调用方式
function startLoading (LoadingText = '正在加载中...', target = "body") {
loading = Loading.service({
text: LoadingText,
spinner: 'el-icon-loading', // 自定义图标
background: 'rgba(0, 0, 0, 0.8)'
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.5)',
target: target
})
}
......@@ -23,9 +24,9 @@ let loadingCount = 0
* 调用一次startLoadingAddCount() 方法 开启Loading 并 loadingCount + 1
* 调用一次endLoadingSubCount() 方法 loadingCount - 1 直到为0 关闭loading
*/
export function startLoadingAddCount (LoadingText) {
export function startLoadingAddCount (LoadingText, target) {
if (loadingCount === 0) {
startLoading(LoadingText)
startLoading(LoadingText, target)
}
loadingCount++
}
......
<template>
<div class="h content-form">
<el-form ref="form" :model="form" label-width="160px">
<table border="1" width="100%" cellspacing="0" cellpadding="0" class="hTable">
<tbody>
<tr height="30">
<td colspan="12" align="center">
<font size="4">层基本信息</font>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">层号</td>
<td colspan="4">
<el-input v-model="form.ch"></el-input>
</td>
<td colspan="2" align="center" class="tdright">自然幢号</td>
<td colspan="4">
<el-input v-model="form.zrzh"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">实际层</td>
<td colspan="4">
<el-input v-model="form.sjc"></el-input>
</td>
<td colspan="2" align="center" class="tdright">名义层</td>
<td colspan="4">
<el-input v-model="form.myc"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">层建筑面积(㎡)</td>
<td colspan="4">
<el-input v-model="form.cjzmj"></el-input>
</td>
<td colspan="2" align="center" class="tdright">层套内建筑面积(㎡)</td>
<td colspan="4">
<el-input v-model="form.ctnjzmj"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">层阳台面积(㎡)</td>
<td colspan="4">
<el-input v-model="form.cytmj"></el-input>
</td>
<td colspan="2" align="center" class="tdright">层半墙面积(㎡)</td>
<td colspan="4">
<el-input v-model="form.cbqmj"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">层共有建筑面积(㎡)</td>
<td colspan="4">
<el-input v-model="form.cgyjzmj"></el-input>
</td>
<td colspan="2" align="center" class="tdright">层分摊建筑面积(㎡)</td>
<td colspan="4">
<el-input v-model="form.cftjzmj"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">层高</td>
<td colspan="4">
<el-input v-model="form.cg"></el-input>
</td>
<td colspan="2" align="center" class="tdright">水平投影面积</td>
<td colspan="4">
<el-input v-model="form.sptymj"></el-input>
</td>
</tr>
<tr height="30">
</tr>
</tbody>
</table>
</el-form>
</div>
</template>
<script>
// import { getQjCDetailById, updateQjC } from "@api/c";
export default {
name: 'c',
components: {},
props: {
cbsm: {
type: String,
default: '',
}
},
data () {
return {
form: {
zrzbsm: '',
ch: '', //层号
zrzh: '', //自然幢号
sjc: '', //实际层
myc: '', //名义层
cjzmj: '', //层建筑面积
ctnjzmj: '', //层套内建筑面积
cytmj: '', //层阳台面积
cbqmj: '', //层半墙面积
cgyjzmj: '', //层共有建筑面积
cftjzmj: '', //层分摊建筑面积
cg: '', //层高
sptymj: '', //水平投影面积
},
value: '',
}
},
methods: {
onSave () {
this.form.zrzbsm = this.$route.query.bsm;
//编辑层信息接口调用 TODO
// updateQjC(this.form).then((res) => {
// if (res.code === 200) {
// this.$message.success("保存成功")
// }
// })
},
getCinfo (bsm) {
this.reset();
//获取层信息接口调用 TODO
// getQjCDetailById(bsm).then((res) => {
// if (res.code === 200) {
// this.form = res.result;
// this.form.zrzh = this.$store.state.zrzh;
// }
// })
},
reset () {
this.form = {
zrzbsm: '',
ch: '', //层号
zrzh: '', //自然幢号
sjc: '', //实际层
myc: '', //名义层
cjzmj: '', //层建筑面积
ctnjzmj: '', //层套内建筑面积
cytmj: '', //层阳台面积
cbqmj: '', //层半墙面积
cgyjzmj: '', //层共有建筑面积
cftjzmj: '', //层分摊建筑面积
cg: '', //层高
sptymj: '', //水平投影面积
}
}
},
mounted () {
this.getCinfo(this.cbsm);
},
watch: {
cbsm: {
handler: function (item) {
console.log(item, "item")
console.log(this.$parent.$parent.menuType, "this.$parent.$parent.menuType")
if (item != '' && this.$parent.$parent.menuType == 'c') {
this.getCinfo(item)
}
},
immediate: true
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.h {
min-height: 200px;
width: 100%;
margin: 0 auto;
/deep/.el-input__inner {
width: 100%;
border: 0;
}
/deep/textarea {
width: 100%;
border: 0;
}
.el-form-item {
font-weight: bold;
font-size: xx-large
}
table {
background: #fff;
table-layout: fixed;
}
td {
//bgcolor:#F1F4FC;
bgcolor: #fff;
width: 8.33%
}
.el-select {
display: block;
}
}
table {
font-size: 14px;
}
.hTable {
margin-top: 10px;
}
</style>
\ No newline at end of file
<template>
<div class="addCh">
<el-table class="addChTable" :data="tableData" style="width: 100%" border>
<el-table-column prop="cz" width="60" align="center">
<template slot-scope="scope">
<span class="cp" @click="handleRowClick(scope.row, scope.$index)">
<i class="iconfont iconicon-test1" style="color:#FA6400;font-size:30px" @click="deleteYtInfo(index)"
v-if="scope.row.cz == '+'"></i>
<i class="iconfont iconicon-test" style="color:#FA6400;font-size:30px" @click="deleteYtInfo(index)"
v-if="scope.row.cz == '-'"></i>
</span>
</template>
</el-table-column>
<el-table-column prop="zrzmc" label="自然幢" align="center">
</el-table-column>
<el-table-column prop="ljzmc" label="逻辑幢" align="center">
</el-table-column>
<el-table-column prop="zdymc" label="幢单元" align="center">
</el-table-column>
<el-table-column prop="qsc" label="起始层" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.qsc" type="number"></el-input>
</template>
</el-table-column>
<el-table-column prop="jsc" label="结束层" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.jsc" type="number"></el-input>
</template>
</el-table-column>
<el-table-column prop="hs" label="每层户数" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.hs" type="number"></el-input>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
// import { insertChInfo } from "@api/lpb";
export default {
name: "",
components: {},
props: {
treeData: {},
dialogVisible: {
type: Boolean,
default: false,
},
scyclx: {
type: String,
default: "1",
},
},
data () {
return {
ljzBsm: null,
zdyBsm: null,
zrzBsm: null,
tableData: [],
formData: {
cz: "+",
ljzbsm: "",
ljzmc: "",
zdymc: "",
zdybsm: "",
zrzbsm: "",
scyclx: "1",
qsc: "",
jsc: "",
hs: "",
},
};
},
created () { },
mounted () {
console.log(this.treeData, "treeData");
},
methods: {
//行操作
handleRowClick (row, index) {
if (row.cz == "+") {
let temp = JSON.parse(JSON.stringify(this.formData));
temp.qsc = '';
temp.jsc = '';
temp.hs = '';
temp.cz = "-";
this.tableData.push(temp);
} else {
this.tableData.splice(index, 1);
}
},
onSave (bsm) {
console.log(this.tableData)
let totalHs = 0;
for (let k = 0; k < this.tableData.length; k++) {
if (this.tableData[k].qsc === "" || this.tableData[k].jsc === "" || this.tableData[k].hs === "") {
this.$message.warning("表单不完整，请填写完整")
return false
}
if (this.tableData[k].qsc - this.tableData[k].jsc > 0) {
this.$message.warning("存在结束层大于起始层，请重写填写")
return false
}
totalHs = totalHs + (this.tableData[k].jsc - this.tableData[k].qsc + 1) * this.tableData[k].hs;
}
if (totalHs >= 5000) {
this.$message.warning("单次添加户数累积超过5000户，请分次添加！")
return false
}
// insertChInfo(this.tableData).then((res) => {
// if (res.code === 200) {
// this.$message.success("保存成功");
// //更新树结构数据
// console.log(this);
// this.$parent.$parent.getLpbMenuTree(bsm);
// this.$parent.$parent.getlpbData();
// //关闭弹框
// this.$parent.$parent.closeDaialog();
// } else {
// this.$message({
// message: res.message,
// type: "warning",
// })
// }
// });
},
//重置数据
reset () {
this.tableData[0].qsc = "";
this.tableData[0].jsc = "";
this.tableData[0].hs = "";
},
},
computed: {},
watch: {
treeData: {
handler (n) {
this.formData = {
cz: "+",
ljzbsm: "",
zdybsm: "",
zrzbsm: "",
scyclx: this.scyclx,
qsc: "",
jsc: "",
hs: "",
};
//给自然幢，逻辑幢，幢单元的bsm和mc赋值
switch (n.type) {
case "zrz":
this.formData.zrzbsm = n.bsm;
this.formData.zrzmc = n.mc;
break;
case "ljz":
this.formData.zrzbsm = n.zrzbsm;
this.formData.ljzbsm = n.bsm;
this.formData.zrzmc = n.zrzmc;
this.formData.ljzmc = n.mc;
break;
case "zdy":
this.formData.zrzbsm = n.zrzbsm;
this.formData.ljzbsm = n.ljzbsm;
this.formData.zdybsm = n.bsm;
this.formData.zrzmc = n.zrzmc;
this.formData.ljzmc = n.ljzmc;
this.formData.zdymc = n.mc;
break;
default:
break;
}
this.tableData = [];
this.tableData.push(this.formData);
},
//深度监听，第一次接收到父组件传值就触发事件
immediate: true,
deep: true,
},
scyclx: {
handler (n) {
this.$nextTick(() => {
this.formData.scyclx = this.scyclx;
})
}
}
},
};
</script>
<style lang="scss">
.addCh {
.addChTable {
.el-input__inner {
height: 20px;
margin: 0;
line-height: 20px;
outline: none;
border: none;
color: #606764;
overflow: visible;
cursor: text;
text-align: center;
}
}
.cp {
cursor: pointer;
position: relative;
top: 4px;
}
.el-table .cell {
line-height: 34px;
}
.el-table .cell,
.el-table--border td:first-child .cell,
.el-table--border th:first-child .cell {
padding-left: 5px;
}
.el-table td,
.el-table th {
padding: 4px 0;
}
}
</style>
<template>
<div class="h content-form" ref="mainBox" :class="$route.path == '/h' ? 'hpage' : ''"
:style="{'height': $route.path == '/h' ? '100%' : formHeight+'px'}">
<el-form ref="form" :model="form" label-width="160px" class="form">
<Qlr ref="qlrxxModule" :bsm='bsm' :qszt="form.qszt" :type="lx"></Qlr>
<table border="1" width="100%" cellspacing="0" cellpadding="0" class="hTable">
<tbody>
<tr height="30">
<th colspan="12" align="center">
<font size="4">户基本信息</font>
</th>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">宗地代码<i class="requisite">*</i></td>
<td colspan="4">
<el-input v-model="form.zddm" disabled></el-input>
</td>
<td colspan="2" align="center" class="tdright">自然幢号<i class="requisite">*</i></td>
<td colspan="4">
<el-input v-model="form.zrzh" disabled></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">不动产单元号<i class="requisite">*</i></td>
<!-- todo 此处暂时存放的是不动产单元号标识码，而不是不动产单元号-->
<td colspan="4" class="psr">
<el-input v-model="form.bdcdyh" class="percent80" :disabled="disableFlag" ref="bdcdyh">
</el-input>
<el-button @click.prevent="generatorCode" size="mini" class="createBtn" type="warning"
:disabled="disableFlag">生成</el-button>
</td>
<!-- <td colspan="2" align="center" >原不动产单元</td>-->
<!-- <td colspan="4" >-->
<!-- <el-input v-model="form.ydybsm" disabled></el-input>-->
<!-- </td>-->
<td colspan="2" align="center" class="tdright">逻辑幢号</td>
<td colspan="4">
<el-input v-model="form.ljzh" disabled></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">房屋性质<i class="requisite">*</i></td>
<td colspan="4">
<el-select v-model="form.fwxzbsm" placeholder="请选择" :disabled="disableFlag" ref="fwxzbsm">
<el-option v-for="item in $store.state.fwxzOptions" :key="item.bsm" :label="item.mc"
:value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="2" align="center" class="tdright">所在单元</td>
<td colspan="4">
<el-input v-model="form.zdymc" disabled></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">层号</td>
<td colspan="4">
<el-input v-model="form.ch" :disabled="disableFlag"></el-input>
</td>
<td colspan="2" align="center" class="tdright">实际层</td>
<td colspan="4">
<el-input v-model="form.sjc" disabled></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">房屋编号</td>
<td colspan="4">
<el-input v-model="form.fwbh" :disabled="disableFlag"></el-input>
</td>
<td colspan="2" align="center" class="tdright">实际层数</td>
<td colspan="4">
<el-input v-model="form.sjcs" disabled></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">室号</td>
<td colspan="4">
<el-input v-model="form.shbw" :disabled="disableFlag"></el-input>
</td>
<td colspan="2" align="center" class="tdright">户号</td>
<td colspan="4">
<el-input v-model="form.hh" disabled></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">房屋类型<i class="requisite">*</i></td>
<td colspan="4">
<el-select v-model="form.fwlxbsm" placeholder="请选择" :disabled="disableFlag" ref="fwlxbsm">
<el-option v-for="item in $store.state.fwlxList" :key="item.bsm" :label="item.mc"
:value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="2" align="center" class="tdright">名义层</td>
<td colspan="4">
<el-input v-model="form.myc" disabled></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">户型</td>
<td colspan="4">
<el-select v-model="form.hxbsm" placeholder="请选择" :disabled="disableFlag">
<el-option v-for="item in $store.state.hxList" :key="item.bsm" :label="item.mc"
:value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="2" align="center" class="tdright">户型结构</td>
<td colspan="4">
<el-select v-model="form.hxjgbsm" placeholder="请选择" :disabled="disableFlag">
<el-option v-for="item in $store.state.hxjgList" :key="item.bsm" :label="item.mc"
:value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">产别<i class="requisite">*</i></td>
<td colspan="4">
<el-select v-model="form.fwcbbsm" placeholder="请选择" :disabled="disableFlag" ref="fwcbbsm">
<el-option v-for="item in $store.state.cbOptions" :key="item.bsm" :label="item.mc"
:value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="2" align="center" class="tdright">产权来源<i class="requisite">*</i></td>
<td colspan="4">
<el-select v-model="form.fwcqlybsm" placeholder="请选择" :disabled="disableFlag"
ref="fwcqlybsm">
<el-option v-for="item in $store.state.cqlyOptions" :key="item.bsm" :label="item.mc"
:value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr height="30">
<td colspan="2" rowspan="6" align="center" class="tdright">预测</td>
<td colspan="2" align="center" class="tdright">建筑面积(㎡)</td>
<td colspan="2" align="center">
<el-input v-model="form.ycjzmj" type="number"
:disabled="form.scyclx === '1' || disableFlag">
</el-input>
</td>
<td colspan="2" rowspan="6" align="center" class="tdright">实测</td>
<td colspan="2" align="center" class="tdright">建筑面积(㎡)</td>
<td colspan="2" align="center">
<el-input v-model="form.scjzmj" type="number"
:disabled="form.scyclx === '0' || disableFlag">
</el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">套内建筑面积(㎡)</td>
<td colspan="2" align="center">
<el-input v-model="form.yctnjzmj" type="number"
:disabled="form.scyclx === '1' || disableFlag">
</el-input>
</td>
<td colspan="2" align="center" class="tdright">套内建筑面积(㎡)</td>
<td colspan="2" align="center">
<el-input v-model="form.sctnjzmj" type="number"
:disabled="form.scyclx === '0' || disableFlag">
</el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">分摊建筑面积(㎡)</td>
<td colspan="2" align="center">
<el-input v-model="form.ycftjzmj" type="number"
:disabled="form.scyclx === '1' || disableFlag">
</el-input>
</td>
<td colspan="2" align="center" class="tdright">分摊建筑面积(㎡)</td>
<td colspan="2" align="center">
<el-input v-model="form.scftjzmj" type="number"
:disabled="form.scyclx === '0' || disableFlag">
</el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">地下部分建筑面积(㎡)</td>
<td colspan="2" align="center">
<el-input v-model="form.ycdxbfjzmj" type="number"
:disabled="form.scyclx === '1' || disableFlag"></el-input>
</td>
<td colspan="2" align="center" class="tdright">地下部分建筑面积(㎡)</td>
<td colspan="2" align="center">
<el-input v-model="form.scdxbfjzmj" type="number"
:disabled="form.scyclx === '0' || disableFlag"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">其它建筑面积(㎡)</td>
<td colspan="2" align="center">
<el-input v-model="form.ycqtjzmj" type="number"
:disabled="form.scyclx === '1' || disableFlag">
</el-input>
</td>
<td colspan="2" align="center" class="tdright">其它建筑面积(㎡)</td>
<td colspan="2" align="center">
<el-input v-model="form.scqtjzmj" type="number"
:disabled="form.scyclx === '0' || disableFlag">
</el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">分摊系数</td>
<td colspan="2" align="center">
<input class="formInput" v-model="form.ycftxs" type="number"
:disabled="form.scyclx === '1' || disableFlag" @blur="inputFtxsBlur($event)"
ref="ycftxs" />
</td>
<td colspan="2" align="center" class="tdright">分摊系数</td>
<td colspan="2" align="center">
<input class="formInput" v-model="form.scftxs" type="number"
:disabled="form.scyclx === '0' || disableFlag" @blur="inputFtxsBlur($event)"
ref="scftxs" />
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">共有土地面积(㎡)</td>
<td colspan="2">
<el-input v-model="form.gytdmj" type="number" :disabled="disableFlag"></el-input>
</td>
<td colspan="2" align="center" class="tdright">分摊土地面积(㎡)</td>
<td colspan="2">
<el-input v-model="form.fttdmj" type="number" :disabled="disableFlag"></el-input>
</td>
<td colspan="2" align="center" class="tdright">多幢独用土地面积(㎡)</td>
<td colspan="2">
<el-input v-model="form.dytdmj" type="number" :disabled="disableFlag"></el-input>
</td>
</tr>
<tr>
<td colspan="2" align="center" class="tdright">
<span>坐落<i class="requisite">*</i></span>
</td>
<td colspan="10">
<input class="formInput" v-model="form.zl" ref="zl" @blur="inputBlur($event)"
:disabled="disableFlag" />
</td>
</tr>
<tr height="30" v-for="(item1, index) in form.fwytList" :key="index">
<td v-if="index === 0" colspan="2" :rowspan="ytTitleRowspan" align="center" class="tdright"
id="ytTitle">
<el-button type="primary" style="margin-right: 10px" class="changeBtn addMinus inAdd"
@click="addYtInfo">+</el-button>
<span>房屋用途<i class="requisite">*</i></span>
</td>
<td width="30" colspan="2" align="center" class="tdright">
<el-button type="primary" class="changeBtn addMinus inMinus" @click="deleteYtInfo(index)">-
</el-button>
规划用途
</td>
<td width="30" colspan="2" align="center">
<el-select-tree ref="ghyt" v-if="show" :default-expand-all="defaultExpandAll"
@change="updateSjfyyt(item1)" :multiple="multiple" :placeholder="placeholder"
:disabled="disableFlag" :data="$store.state.fwytList" :props="treeProps"
:check-strictly="checkStrictly" :clearable="clearable" v-model="item1.fwytzdbsm">
</el-select-tree>
</td>
<td width="30" colspan="2" align="center" class="tdright">用途</td>
<td width="30" colspan="4" align="center">
<el-select-tree ref="yt" v-if="show" :default-expand-all="defaultExpandAll"
:multiple="multiple" :placeholder="placeholder" :disabled="disableFlag"
:data="$store.state.fwytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="item1.fwsjytbsm"></el-select-tree>
</td>
</tr>
<tr height="30" v-for="(item1, index) in form.fwjgList" :key="'jg' + index">
<td colspan="2" v-if="index === 0" :rowspan="fwjgTitleRowspan" align="center" class="tdright">
<!-- <el-button type="primary" size="mini" style="margin-right: 10px" @click="addFwjgInfo">添加</el-button> -->
<el-button type="primary" style="margin-right: 10px" class="changeBtn addMinus inAdd"
@click="addFwjgInfo">+</el-button>
<span>房屋结构<i class="requisite">*</i></span>
</td>
<td colspan="2" align="center" class="tdright">
<el-button type="primary" style="margin-right: 5px" class="changeBtn addMinus inMinus"
@click="deleteFwjgInfo(index)">-</el-button>
<span @click="deleteFwjgInfo(index)">房屋结构</span>
</td>
<td colspan="8">
<el-select v-model="item1.fwjgzdbsm" ref="fwjg" placeholder="请选择" :disabled="disableFlag">
<el-option v-for="item in $store.state.jgOptions" :key="item.bsm" :label="item.mc"
:value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="12" rowspan="4" align="center">
<Qlxz ref="qlxzModule" :hasSyqx='false' :formData="form"></Qlxz>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">东墙体归属</td>
<td colspan="4">
<el-input v-model="form.dqtgs" :disabled="disableFlag"></el-input>
</td>
<td colspan="2" align="center" class="tdright">南墙体归属</td>
<td colspan="4">
<el-input v-model="form.nqtgs" :disabled="disableFlag"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">西墙体归属</td>
<td colspan="4">
<el-input v-model="form.xqtgs" :disabled="disableFlag"></el-input>
</td>
<td colspan="2" align="center" class="tdright">北墙体归属</td>
<td colspan="4">
<el-input v-model="form.bqtgs" :disabled="disableFlag"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" rowspan="2" align="center" class="tdright">
<span>附加说明</span>
</td>
<td colspan="10" rowspan="2">
<el-input v-model="form.bz" type="textarea" :disabled="disableFlag"></el-input>
</td>
</tr>
<tr height="30">
</tr>
<tr height="30">
<td colspan="2" rowspan="2" align="center" class="tdright">
<span>调查意见</span>
</td>
<td colspan="10">
<el-input v-model="form.name" :disabled="disableFlag"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="4" rowspan="2" align="right" class="tdright"
style="width:8.33%;padding-right:10px">
<span>审查员</span>
</td>
<td colspan="2">
<el-input v-model="form.name" :disabled="disableFlag"></el-input>
</td>
<td colspan="2" rowspan="2" align="right" class="tdright"
style="width:8.33%;padding-right:10px">
<span>审查日期</span>
</td>
<td colspan="2">
<el-date-picker v-model="form.date" type="date" placeholder="选择日期">
</el-date-picker>
</td>
</tr>
</tbody>
</table>
</el-form>
<div class="header-button" :style="{ width: mainBoxWidth + 'px' }">
<el-button type="primary" class="saveBtn" @click="onSave" :disabled="disableFlag">保存</el-button>
<el-button type="primary" @click="onSubmit" :disabled="disableFlag">提交</el-button>
<!-- <el-button type="primary" @click="registerCall">登记调用</el-button> -->
</div>
</div>
</template>
<script>
import Qlr from "@/components/formMenu/qlr";
import Qlxz from "@/components/formMenu/qlxz";
// import { getQjHDetailByBsm, updateQjH } from "@api/h";
// import { getBdcdyh } from "@api/zrz";
// import { submit, registerCall } from "@api/common"
export default {
name: 'zrz',
components: {
Qlr,
Qlxz,
},
inject: ['getTreeByBsm'],
props: {
bsm: String, //户标识码
scyclx: {
type: String,
default: "1",
}
},
data () {
return {
disableFlag: false,
//树型结构
show: true,
clearable: true,
defaultExpandAll: true,
multiple: false,
placeholder: '请选择',
disabled: false,
checkStrictly: true,
treeProps: {
value: 'bsm',
children: 'children',
label: 'mc'
},
lx: 'h',
hbsm: '',
form: {
bsm: '',//户标识码
zrzbsm: '', //自然幢标识码
ljzbsm: '', //逻辑幢标识码
ljzh: '', //逻辑幢号
zdybsm: '', //幢单元标识码
cbsm: '', //层标识码
ch: '', //层号
zdbsm: '', //宗地标识码
bdcdyh: '', //不动产单元号标识码
ydybsm: '', //原单元标识码
zrzh: '', //自然幢号
mjdwbsm: '', //面积单位编号
sjcs: '', //实际层数
hh: '', //户号
hxbsm: '', //户型标识码
hxjgbsm: '', //户型结构标识码
dltdmj: '', //独立使用土地面积
fttdmj: '', //分摊土地使用面积
gytdmj: '', //共有土地面积
fwlxbsm: '', //房屋类型标识码
fwxzbsm: '', //房屋性质标识码
sjc: '', //实际层
dqtgs: '', //东墙体归属
nqtgs: '', //南墙体归属
xqtgs: '', //西墙体归属
bqtgs: '', //北墙体归属
fwbh: '', //房屋编号
fjsm: '', //附加说明
fwcbbsm: '', //房屋产别标识码
sjhs: '', //实际户数
shbw: '', //室号部位
fwcqlybsm: '', //房屋产权来源标识码
myc: '', //名义层
qszt: '', //权属状态
//预测数据
ycjzmj: '', //建筑面积
yctnjzmj: '', //套内建筑面积
ycftjzmj: '', //分摊建筑面积
ycdxbfjzmj: '', //地下部分建筑面积
ycqtjzmj: '', //其它建筑面积
ycftxs: '', //分摊系数
//实测数据
scjzmj: '', //建筑面积
sctnjzmj: '', //套内建筑面积
scftjzmj: '', //分摊建筑面积
scdxbfjzmj: '', //地下部分建筑面积
scqtjzmj: '', //其它建筑面积
scftxs: '', //分摊系数
scyclx: '0', //实预测类型(0:预测，1:实测;),区别户是实测还是预测数据
scycglbsm: '', //实测预测关联标识码
bz: '', //备注
name: '',
date: '',
fwytList: [{
glbsm: '', //关联标识码
fwytzdbsm: '', //房屋用途字典标识码
sx: '', //顺序
fwsjytbsm: '', //房屋实际用途字典标识码
}],
fwjgList: [{
fwjgzdbsm: '', //房屋结构字典标识码
glbsm: '', //关联标识码
sx: '', //顺序
}],
qlxzList: [{
qlxzdm: '', //权利性质代码
glbsm: '', //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
qlxzzdbsm: '', //权利性质字典表标识码
qlxzmc: '', //权利名称名称
zhqlxzlx: '', //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
addQjTdytRequestList: [{
}], //土地用途新增实体列表
}]
},
value: '',
ytTitleRowspan: 1, //用途的单元格垂直合并数量
fwjgTitleRowspan: 1, //房屋结构的单元格垂直合并数量
formHeight: 0,
mainBoxWidth: 0,
rules: [],
ftxsrules: [],
}
},
created () {
if (this.bsm) {
// this.getHInfo(this.bsm);
}
this.$nextTick(() => {
this.mainBoxWidth = this.$refs.mainBox.clientWidth;
this.formHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 260
})
},
methods: {
inputFtxsBlur (e) {
if (e.target.value !== '' && +e.target.value > 0 && +e.target.value < 10) {
e.target.style.border = ""
} else {
e.target.style.border = "1px solid red";
e.target.style.boxSizing = 'border-box';
}
},
inputBlur (e) {
if (e.target.value != '') {
e.target.style.border = ""
} else {
e.target.style.border = "1px solid red";
e.target.style.boxSizing = 'border-box';
}
},
// registerCall () {
// let data = {
// type: 'h',
// bsm: this.bsm
// }
// registerCall(data).then(res => {
// if (res.success) {
// this.$message.success("登记成功")
// // if(this.lpbParent === 'isLpb'){
// lpbContent.loadingData(this.form.zrzbsm, this.form.scyclx);
// // }
// this.getTreeByBsm(this.$store.state.zdbsm, 'h', '0,1,2')
// }
// })
// },
updateSjfyyt (data) {
data.fwsjytbsm = data.fwytzdbsm;
},
addYtInfo () {
this.form.fwytList.push({
glbsm: '',
fwytzdbsm: '',
fwsjytbsm: '',
sx: '',
});
this.ytTitleRowspan = this.form.fwytList.length;
},
deleteYtInfo (index) {
if (this.form.fwytList.length <= 1) {
this.$message({
message: '不能删除，最少含有一条用途信息',
type: 'warning'
});
} else {
this.form.fwytList.splice(index, 1);
this.ytTitleRowspan = this.form.fwytList.length;
}
},
addFwjgInfo () {
this.form.fwjgList.push({
fwjgzdbsm: '', //房屋结构字典标识码
glbsm: '', //关联标识码
sx: '', //顺序
});
this.fwjgTitleRowspan = this.form.fwjgList.length;
},
deleteFwjgInfo (index) {
if (this.form.fwjgList.length <= 1) {
this.$message({
message: '不能删除，最少含有一条房屋结构信息',
type: 'warning'
});
} else {
this.form.fwjgList.splice(index, 1);
this.fwjgTitleRowspan = this.form.fwjgList.length;
}
},
//根据户bsm查询户信息
getHInfo (hbsm) {
//this.bsm = hbsm;
// getQjHDetailByBsm(hbsm).then((res) => {
// if (res.code === 200) {
// this.form = res.result;
// this.hbsm = res.result.bsm;
// if (res.result.gygyqlrqk != null) {
// this.$refs.qlrxxModule.changeGyfs(res.result.gygyqlrqk);
// }
// this.$refs.qlrxxModule.getQlrInfo(hbsm);
// if (this.form.bblx === 0 && this.form.qszt === '0' && this.form.bhqkbsm == null) {
// this.disableFlag = false
// } else {
// this.disableFlag = true
// }
// if (this.form.scyclx === '0') {
// this.$set(this.form, "ycjzmj", this.form.jzmj)
// this.$set(this.form, "yctnjzmj", this.form.tnjzmj)
// this.$set(this.form, "ycftjzmj", this.form.ftjzmj)
// this.$set(this.form, "ycdxbfjzmj", this.form.dxbfjzmj)
// this.$set(this.form, "ycqtjzmj", this.form.qtjzmj)
// this.$set(this.form, "ycftxs", this.form.ftxs)
// this.$set(this.form, "scjzmj", this.form.gljzmj)
// this.$set(this.form, "sctnjzmj", this.form.gltnjzmj)
// this.$set(this.form, "scftjzmj", this.form.glftjzmj)
// this.$set(this.form, "scdxbfjzmj", this.form.gldxbfjzmj)
// this.$set(this.form, "scqtjzmj", this.form.glqtjzmj)
// this.$set(this.form, "scftxs", this.form.glftxs)
// } else if (this.form.scyclx === '1') {
// this.$set(this.form, "scjzmj", this.form.jzmj)
// this.$set(this.form, "sctnjzmj", this.form.tnjzmj)
// this.$set(this.form, "scftjzmj", this.form.ftjzmj)
// this.$set(this.form, "scdxbfjzmj", this.form.dxbfjzmj)
// this.$set(this.form, "scqtjzmj", this.form.qtjzmj)
// this.$set(this.form, "scftxs", this.form.ftxs)
// this.$set(this.form, "ycjzmj", this.form.gljzmj)
// this.$set(this.form, "yctnjzmj", this.form.gltnjzmj)
// this.$set(this.form, "ycftjzmj", this.form.glftjzmj)
// this.$set(this.form, "ycdxbfjzmj", this.form.gldxbfjzmj)
// this.$set(this.form, "ycqtjzmj", this.form.glqtjzmj)
// this.$set(this.form, "ycftxs", this.form.glftxs)
// }
// if (res.result.fwytList.length === 0) {
// this.form.fwytList.push({
// glbsm: '', //关联标识码
// fwytzdbsm: '', //房屋用途字典标识码
// sx: '', //顺序
// fwsjytbsm: '', //房屋实际用途字典标识码
// })
// }
// if (res.result.fwjgList.length === 0) {
// this.form.fwjgList.push({
// fwjgzdbsm: '', //房屋结构字典标识码
// glbsm: '', //关联标识码
// sx: '', //顺序
// })
// }
// this.fwjgTitleRowspan = this.form.fwjgList.length;
// this.ytTitleRowspan = this.form.fwytList.length;
// if (res.result.qjQlxzListVOS.length > 0) {
// if (res.result.qjQlxzListVOS[0].list.length < 1) {
// res.result.qjQlxzListVOS[0].list.push({
// "pzdjbsm": "",
// "pzdjmc": "",
// "pzytdm": "",
// "pzytmc": "",
// "pzytmj": 0,
// "qlxzbsm": "",
// "sjdjbsm": "",
// "sjdjmc": "",
// "sjytdm": "",
// "sjytmc": "",
// "sjytmj": 0,
// "syqx": "",
// "tdsyjssj": "",
// "tdsyqssj": "",
// "tdzh": ""
// })
// }
// //权利性质数据传给子组件
// this.$refs.qlxzModule.countList = res.result.qjQlxzListVOS
// } else {
// this.$refs.qlxzModule.countList = [
// {
// id: Math.random(),
// isInside: false,
// hasNotBorder: false,
// "bsm": "",//权利性质标识码
// "glbsm": "",//宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
// "qlxzdm": "",
// "zhqlxzlx": "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
// list: [
// {
// "pzdjbsm": "",
// "pzdjmc": "",
// "pzytdm": "",
// "pzytmc": "",
// "pzytmj": 0,
// "qlxzbsm": "",
// "sjdjbsm": "",
// "sjdjmc": "",
// "sjytdm": "",
// "sjytmc": "",
// "sjytmj": 0,
// "syqx": "",
// "tdsyjssj": "",
// "tdsyqssj": "",
// "tdzh": ""
// }
// ]
// },
// ]
// }
// }
// })
},
//保存户信息
onSave () {
if (this.form.scyclx === '0') {
this.ftxsrules = [
{
data: this.form.ycftxs,
name: '不动产单元号',
dom: this.$refs.ycftxs,
rule: /^(?!0(\.0{1,2})?$)(\d(\.\d{1,2})?)$/, //大于0小于10的所有保留两位的数字
},
]
} else {
this.ftxsrules = [
{
data: this.form.scftxs,
name: '不动产单元号',
dom: this.$refs.scftxs,
rule: /^(?!0(\.0{1,2})?$)(\d(\.\d{1,2})?)$/, //大于0小于10的所有保留两位的数字
},
]
}
this.rules = [
{
data: this.form.bdcdyh,
name: '不动产单元号',
dom: this.$refs.bdcdyh,
rule: /^\s*$/g, //非空
},
{
data: this.form.fwlxbsm,
name: '房屋类型',
dom: this.$refs.fwlxbsm,
rule: /^\s*$/g, //非空
},
{
data: this.form.fwxzbsm,
name: '房屋性质',
dom: this.$refs.fwxzbsm,
rule: /^\s*$/g, //非空
},
{
data: this.form.fwcbbsm,
name: '产别',
dom: this.$refs.fwcbbsm,
rule: /^\s*$/g, //非空
},
{
data: this.form.fwcqlybsm,
name: '产权来源',
dom: this.$refs.fwcqlybsm,
rule: /^\s*$/g, //非空
},
{
data: this.form.zl,
name: '坐落',
dom: this.$refs.zl,
rule: /^\s*$/g, //非空
},
]
this.form.fwytList.forEach((item, index) => {
this.rules.push(
{
data: item.fwytzdbsm,
name: '规划用途',
dom: this.$refs.ghyt[index],
rule: /^\s*$/g, //非空
},
{
data: item.fwytzdbsm,
name: '用途',
dom: this.$refs.yt[index],
rule: /^\s*$/g, //非空
},
)
})
this.form.fwjgList.forEach((item, index) => {
this.rules.push(
{
data: item.fwjgzdbsm,
name: '房屋结构',
dom: this.$refs.fwjg[index],
rule: /^\s*$/g, //非空
},
)
})
this.form.qlxzList = this.$refs.qlxzModule.getQlxzDataList();
this.$refs.qlxzModule.getRules();
let flag = true;
this.rules.forEach(item => {
if (item.rule.test(item.data) || item.data == null) {
if (item.dom.$el) {
item.dom.$el.style.border = '1px solid red';
item.dom.$el.style.boxSizing = 'border-box';
} else {
item.dom.style.border = '1px solid red';
item.dom.style.boxSizing = 'border-box';
}
flag = false;
return false
}
})
let ftxsflag = true;
this.ftxsrules.forEach(item => {
console.log(item.data + ":item.data")
console.log(item.data !== "" + ":item.data !==")
if (item.data !== "" && item.data !== null) {
if (!item.rule.test(+item.data) || item.data == null) {
if (item.dom.$el) {
item.dom.$el.style.border = '1px solid red';
item.dom.$el.style.boxSizing = 'border-box';
} else {
item.dom.style.border = '1px solid red';
item.dom.style.boxSizing = 'border-box';
}
ftxsflag = false;
return false
}
}
})
this.$nextTick(() => {
if (flag && ftxsflag && this.$refs.qlxzModule.getRulesResult()) {
if (this.form.scyclx === '0') {
this.form.jzmj = this.form.ycjzmj;
this.form.tnjzmj = this.form.yctnjzmj;
this.form.ftjzmj = this.form.ycftjzmj;
this.form.dxbfjzmj = this.form.ycdxbfjzmj;
this.form.qtjzmj = this.form.ycqtjzmj;
this.form.ftxs = this.form.ycftxs;
} else if (this.form.scyclx === '1') {
this.form.jzmj = this.form.scjzmj;
this.form.tnjzmj = this.form.sctnjzmj;
this.form.ftjzmj = this.form.scftjzmj;
this.form.dxbfjzmj = this.form.scdxbfjzmj;
this.form.qtjzmj = this.form.scqtjzmj;
this.form.ftxs = this.form.scftxs;
}
vm.loadingShow('请求发送中');
// updateQjH(this.form).then((res) => {
// vm.loadingHide();
// if (res.code === 200) {
// this.$message.success("保存成功！")
// console.log(this, "this")
// } else {
// this.$message.warning(res.message)
// }
// })
// .catch((error) => {
// vm.loadingHide();
// console.log(error);
// });
} else {
this.$message({
// message: item.name+'不能为空',
message: '表单数据有误',
type: "warning",
});
}
})
},
onSubmit () {
let data = {
glbsm: this.bsm,
status: 1,
type: "h"
}
// submit(data).then((res) => {
// if (res.code === 200) {
// this.$message.success("提交完成！");
// // if(this.lpbParent === 'isLpb'){
// lpbContent.loadingData(this.form.zrzbsm, this.form.scyclx);
// // }
// } else {
// this.$message.warning(res.message)
// }
// })
},
onReset () {
this.form.bdcdyh = '', //不动产单元号
this.form.mjdwbsm = '', //面积单位编号
this.form.hxbsm = '', //户型标识码
this.form.hxjgbsm = '', //户型结构标识码
this.form.dltdmj = '', //独立使用土地面积
this.form.fttdmj = '', //分摊土地使用面积
this.form.gytdmj = '', //共有土地面积
this.form.fwlxbsm = '', //房屋类型标识码
this.form.fwxzbsm = '', //房屋性质标识码
this.form.sjc = '', //实际层
this.form.dqtgs = '', //东墙体归属
this.form.nqtgs = '', //南墙体归属
this.form.xqtgs = '', //西墙体归属
this.form.bqtgs = '', //北墙体归属
this.form.fwbh = '', //房屋编号
this.form.fjsm = '', //附加说明
this.form.fwcbbsm = '', //房屋产别标识码
this.form.sjhs = '', //实际户数
this.form.shbw = '', //室号部位
this.form.fwcqlybsm = '', //房屋产权来源标识码
//预测数据
this.form.ycjzmj = '', //建筑面积
this.form.yctnjzmj = '', //套内建筑面积
this.form.ycftjzmj = '', //分摊建筑面积
this.form.ycdxbfjzmj = '', //地下部分建筑面积
this.form.ycqtjzmj = '', //其它建筑面积
this.form.ycftxs = '', //分摊系数
//实测数据
this.form.scjzmj = '', //建筑面积
this.form.sctnjzmj = '', //套内建筑面积
this.form.scftjzmj = '', //分摊建筑面积
this.form.scdxbfjzmj = '', //地下部分建筑面积
this.form.scqtjzmj = '', //其它建筑面积
this.form.scftxs = '', //分摊系数
this.form.scyclx = '0', //实预测类型(0:预测，1:实测;),区别户是实测还是预测数据
this.form.scycglbsm = '', //实测预测关联标识码
this.form.bz = '', //备注
this.form.name = '',
this.form.date = '',
this.form.fwytList = [{
glbsm: '', //关联标识码
fwytzdbsm: '', //房屋用途字典标识码
sx: '', //顺序
fwsjytbsm: '', //房屋实际用途字典标识码
}],
this.form.fwjgList = [{
fwjgzdbsm: '', //房屋结构字典标识码
glbsm: '', //关联标识码
sx: '', //顺序
}],
this.form.qlxzList = [{
qlxzdm: '', //权利性质代码
glbsm: '', //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
qlxzzdbsm: '', //权利性质字典表标识码
qlxzmc: '', //权利名称名称
zhqlxzlx: '', //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
addQjTdytRequestList: [{
}], //土地用途新增实体列表
}]
console.log("----------------------------------")
console.log(this.form)
},
//不动产单元号再次生成提示框
open () {
this.$confirm('已经存在不动产单元号或者自然幢号, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// getBdcdyh(this.form.zrzh, "h")
// .then((res) => {
// this.form.zrzh = res.result.substring(0, 24);
// this.form.bdcdyh = res.result;
// })
this.$message({
type: 'success',
message: '生成成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
},
generatorCode () {
if (this.form.bdcdyh != null && this.form.bdcdyh !== '') {
this.open();
return;
}
// getBdcdyh(this.form.zrzh, "h")
// .then((res) => {
// this.form.zrzh = res.result.substring(0, 24);
// this.form.bdcdyh = res.result;
// })
},
},
watch: {
scyclx: {
handler (n) {
this.$nextTick(() => {
this.form.scyclx = this.scyclx;
})
}
},
"form.bdcdyh": function (val) {
if (val != '') {
this.$refs.bdcdyh.$el.style.border = '';
}
},
"form.fwlxbsm": {
handler: function (val) {
if (val != '') {
this.$refs.fwlxbsm.$el.style.border = '';
}
},
immediate: false
},
"form.fwxzbsm": {
handler: function (val) {
if (val != '') {
this.$refs.fwxzbsm.$el.style.border = '';
}
},
immediate: false
},
"form.fwcqlybsm": {
handler: function (val) {
if (val != '') {
this.$refs.fwcqlybsm.$el.style.border = '';
}
},
immediate: false
},
"form.fwcbbsm": {
handler: function (val) {
if (val != '') {
this.$refs.fwcbbsm.$el.style.border = '';
}
},
immediate: false
},
"form.fwytList": {
handler: function (newVal, oldVal) {
newVal.forEach((item, ind) => {
if (item.fwytzdbsm != '') {
this.$refs.ghyt[ind].$el.style.border = ""
this.$refs.yt[ind].$el.style.border = ""
}
})
},
deep: true
},
"form.fwjgList": {
handler: function (newVal, oldVal) {
newVal.forEach((item, ind) => {
if (item.fwjgzdbsm != '') {
this.$refs.fwjg[ind].$el.style.border = ""
}
})
},
deep: true
},
"$store.state.sxdrType": {
handler (n) {
this.$nextTick(() => {
if (n === 'h') {
this.getHInfo(this.$store.state.hbsm)
}
})
},
immediate: false,
deep: true,
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.h {
height: 100%;
width: 100%;
margin-top: 10px;
overflow-y: scroll;
overflow-x: hidden;
/deep/.el-input__inner {
width: 100%;
border: 0;
}
/deep/textarea {
width: 100%;
border: 0;
}
.el-form-item {
font-weight: bold;
font-size: xx-large
}
table {
background: #fff;
table-layout: fixed;
}
td {
//bgcolor:#F1F4FC;
width: 8.33%;
height: 36px;
text-align: right;
}
.el-select {
display: block;
}
.form {
overflow-y: scroll;
overflow-x: hidden;
margin-bottom: 30px;
}
}
.hpage {
box-sizing: border-box;
padding: 8px 6px 18px 18px;
}
table {
font-size: 14px;
}
.hTable {
margin-top: 10px;
}
/deep/.el-select-tree {
width: 100%;
.el-input__inner {
height: 30px !important;
}
}
.header-button {
z-index: 3;
height: 50px;
position: absolute;
bottom: 0;
right: 6px;
text-align: center;
background-color: #ffffff;
.el-button {
padding: 10px 30px;
margin-top: 8px;
}
.saveBtn {
background-color: #00CACD;
border-color: #00CACD;
}
.saveBtn:hover {
background-color: rgba(0, 202, 205, .8);
border-color: rgba(0, 202, 205, .8);
}
}
</style>
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="户基本信息表" name="hjbxx">
<hbj ref="hbj" :bsm="hbsm"></hbj>
</el-tab-pane>
<el-tab-pane label="登记簿" name="djb">
<!-- <djb v-if="djbVisible" :style="{ 'height': formHeight + 'px' }"></djb> -->
</el-tab-pane>
<el-tab-pane label="附件材料" name="fjcl">
<!-- <fjcl v-if="fjclVisible" ref="fjcl" :lpbParent="true" :style="{ 'height': formHeight + 'px' }"
:is-disabled="isDisabled"></fjcl> -->
</el-tab-pane>
</el-tabs>
</template>
<script>
import hbj from "../index"
// import djb from "../../../../../zd/djb/index";
// import fjcl from "../../../../../zd/fjcl/fjcl"
// import { queryStatus } from "@api/search"
export default {
name: "index",
components: {
hbj, djb, fjcl
},
props: {
bsm: String, //户标识码
},
data () {
return {
isDisabled: false,
hbsm: this.$store.state.hbsm,
activeName: "hjbxx",
djbVisible: false,
fjclVisible: false,
formHeight: 0,
}
},
mounted () {
this.formHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 260
},
methods: {
loadingStatus () {
let bsm = this.$store.state.hbsm;
// queryStatus(bsm).then(res => {
// if (res.success) {
// let qszt = res.result.qszt;
// this.isDisabled = +qszt !== 0;
// }
// })
},
handleClick (tab, event) {
this.loadingStatus()
// console.log(tab, event);
switch (tab.name) {
case 'djb':
this.djbVisible = true;
break;
case 'fjcl':
this.fjclVisible = true;
break;
default:
break;
}
},
},
watch: {}
}
</script>
<style scoped lang="scss">
.el-tabs {
/deep/.el-tabs__nav-scroll {
margin-left: -35px;
}
}
</style>
<template>
<div class="edit">
<!-- <div class="tab-header">
<el-row class="searchContent">
<el-col :span="24" style="margin:0 0 10px 18px;">
<el-radio-group v-model="scyclx" @change="scyclxChange">
<el-radio-button label="0">预测</el-radio-button>
<el-radio-button label="1">实测</el-radio-button>
</el-radio-group>
<el-input maxlength="28" v-model="bdcdyh" :style="{ width: inputWidth + 'px' }" class="searchInput"
placeholder="输入不动产单元号或室号"><i slot="suffix" class="el-input__icon el-icon-search" @click="inputChange"></i>
</el-input>
</el-col>
</el-row>
<el-row class="searchContent">
<el-col :span="24">
<div class="fl">
<el-button class="radioBtn" label="1" border @click="create"><i
class="iconfont iconchuangjianloupan"></i>创建楼盘</el-button>
<el-button class="radioBtn" v-show='this.scyclx == "0"' label="2" border @click="plScYcChange"><i
class="iconfont iconshiyucezhuanhuan"></i>预测转实测</el-button>
<el-button class="radioBtn" v-show='this.scyclx == "1"' label="2" border @click="plScYcChange"><i
class="iconfont iconshiyucezhuanhuan"></i>实测转预测</el-button>
<el-button class="radioBtn" label="3" border @click="openPl('h')"><i class="iconfont iconpilianghu"></i> 批量户
</el-button>
<el-button class="radioBtn" label="4" border @click="openPlC"><i class="iconfont iconpiliangceng"></i>批量层
</el-button>
<el-button class="radioBtn" label="5" border @click="openPl('sh')"><i
class="iconfont iconpiliangshihao"></i>批量室号</el-button>
<el-button class="radioBtn" label="6" border @click="openPl('zl')"><i
class="iconfont iconpiliangzuola"></i>批量坐落</el-button>
<el-button class="radioBtn" label="7" border @click="addBdcdyh"><i
class="iconfont iconpiliangdanyuanhao"></i>批量单元号</el-button>
<el-button class="radioBtn" label="7" border @click="batchCommit"><i
class="iconfont iconhuzhongxinlazong"></i>批量提交</el-button>
<el-button class="radioBtn" label="7" border @click="batchDelete"><i class="iconfont iconshanchu"></i>批量删除
</el-button>
<el-button class="radioBtn" label="7" border @click="batchUpload"><i
class="iconfont iconshangchuan"></i>批量上传</el-button>
<el-button class="radioBtn" label="7" border @click="batchCancelChoosed"><i
class="iconfont iconquxiaoxuanze"></i>取消选中</el-button>
</div>
</el-col>
</el-row>
<div class="change">
<i class="iconfont iconloupanbiaoxinxi" v-show="bjztFlag" @click="bjztChange" title="详细信息"></i>
<i class="iconfont iconloupanbiaobianji" v-show="!bjztFlag" @click="bjztChange" title="编辑楼盘"></i>
</div>
</div> -->
<div class="tab-content" ref="tabContent" :style="{ height: lpbContentHight + 'px' }" v-loading="lpbloading"
v-show="bjztFlag">
<!-- 左侧树结构 -->
<!-- <div class="lp-tree" :class="createFlag ? 'w260' : 'w0'">
<LineTree :pd="pd" class="treeData" :islpb="islpb" @loading="loading"></LineTree>
<p @click="createFlag = false" style="width:20px;float:left;margin-top: 12px;margin-left:10px;cursor:pointer;">
X
</p>
</div> -->
<!-- 楼盘表主体 -->
<div class="lp-overview" :style="{ width: lpbContentwidth + 'px' }">
<lpbContent ref="lpbContent" :zrzbsm="$route.query.bsm" :key="time"></lpbContent>
</div>
<!-- 右侧图例 -->
<div class="lp-legend">
<div class="handleCol">
<div class="btn" @click="legendToggle">
<i v-show="!legendToggleFlag" class="el-icon-d-arrow-left"></i>
<i v-show="legendToggleFlag" class="el-icon-d-arrow-right"></i>
</div>
<div :class="selectedZt == 'dyzt' ? 'dyzt selectedZt' : 'dyzt'" @click="selectedZt = 'dyzt'">
<span>单元状态</span>
</div>
<div :class="selectedZt == 'fwxz' ? 'fwxz selectedZt' : 'fwxz'" @click="selectedZt = 'fwxz'">
<span>房屋性质</span>
</div>
<div :class="selectedZt == 'fwyt' ? 'fwyt selectedZt' : 'fwyt'" @click="selectedZt = 'fwyt'">
<span>房屋用途</span>
</div>
<div :class="selectedZt == 'qsx' ? 'qsx selectedZt' : 'qsx'" @click="selectedZt = 'qsx'">
<span>缺失项</span>
</div>
</div>
<div class="legendTable-wrap" :style="{ width: legendToggleFlag ? '204px' : '0' }">
<table class="legendTable" v-show="selectedZt == 'dyzt'" cellspacing="1" cellpadding="1" border="1">
<tr>
<th>状态</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr v-for="(item, index) in dyztList" :key="index" class="cp"
@click="handleChoosedH(item.bsms, item.color)">
<td>
<i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
</tr>
</table>
<table class="legendTable" v-show="selectedZt == 'fwxz'" cellspacing="1" cellpadding="1" border="1">
<tr>
<th>性质</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr v-for="(item, index) in fwxzList" :key="index" class="cp"
@click="handleChoosedH(item.bsms, item.color)">
<td>
<i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
</tr>
<tr v-show="fwxzList.length < 1">
<td colspan="3" class="tac">暂无数据</td>
</tr>
</table>
<table class="legendTable" v-show="selectedZt == 'fwyt'" cellspacing="1" cellpadding="1" border="1">
<tr>
<th>用途</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr v-for="(item, index) in fwytList" :key="index" class="cp"
@click="handleChoosedH(item.bsms, item.color)">
<td>
<i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>{{ item.mj }}</td>
</tr>
<tr v-show="fwytList.length < 1">
<td colspan="3" class="tac">暂无数据</td>
</tr>
</table>
<table class="legendTable" v-show="selectedZt == 'qsx'" cellspacing="1" cellpadding="1" border="1">
<tr>
<th>数据缺失项</th>
<th>套数</th>
<th>面积</th>
</tr>
<tr v-for="(item, index) in qsxList" :key="index" class="cp" @click="handleChoosedH(item.bsms, item.color)">
<td>
<i class="fa fa-circle" :style="{ color: item.color }"></i>{{ item.name }}
</td>
<td>{{ item.ts }}</td>
<td>0</td>
</tr>
<tr v-show="qsxList.length < 1">
<td colspan="3" class="tac">暂无数据</td>
</tr>
</table>
</div>
</div>
</div>
<!-- 详细信息 -->
<!-- <xxxx v-show="!bjztFlag"></xxxx> -->
<!-- 右键菜单弹出框 根据菜单类型（menuType）和右键点击的楼盘类型（treeData.type）来区分弹框内容 -->
<!-- <el-dialog v-dialogDrag :close-on-click-modal="false" :title="taskTitle" :visible.sync="dialogVisible" width="50%">
<div class="addCh" v-if="menuType == 'ljz'">
<addLjz ref="ljz" :ljzbsm="curBsm"></addLjz>
</div>
<div class="addCh" v-if="menuType == 'zdy'">
<addZdy ref="zdy" :zdybsm="curBsm"></addZdy>
</div>
<div class="addCh" v-if="menuType == 'c'">
<editCinfo ref="c" :cbsm="curBsm"></editCinfo>
</div>
<div class="addCh" v-if="menuType == 'ch'">
<addCh ref="ch" :scyclx="scyclx" :dialogVisible="dialogVisible" :treeData="treeData"></addCh>
</div>
<div class="btnGroup">
<el-button type="primary" @click="saveInfo">保存</el-button>
<el-button type="primary" @click="resetInfo" icon="el-icon-refresh">重置</el-button>
<el-button type="primary" @click="dialogVisible = false">取消</el-button>
</div>
</el-dialog>
批量操作弹出框
<pl-h :plh-visible="plhVisible" :bsms="bsms" @close="plhClose" @lodding="lodding"></pl-h>
<pl-zl :pl-zl-visible="plzlVisible" :bsms="bsms" @close="plZlClose" @lodding="lodding"></pl-zl>
<pl-c :plc-visible="plcVisible" :bsms="cbsmList" @close="plcClose" @lodding="lodding"></pl-c>
<pl-sh :plShVisible="plShVisible" :bsms="bsms" @close="plshClose" @lodding="lodding"></pl-sh>
<el-dialog v-dialogDrag :close-on-click-modal="false" title="批量上传" :visible.sync="uploadVisible" width="30%">
<div class="wrap">
<div class="main-button">
<el-upload class="upload-demo" action="/api/file/uploadListByGlbsm" :data="fileData"
:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
:before-upload="uploadProgress" :on-success="uploadSuccess" :on-error="uploadError" :show-file-list="false"
multiple :limit="1" :on-exceed="handleExceed">
<el-button type="primary" icon="iconfont iconshangchuan">上传附件</el-button>
</el-upload>
</div>
<el-button type="primary" class="download" @click="uploadVisible = false">取消</el-button>
</div>
<span slot="footer" class="dialog-footer">
</span>
</el-dialog> -->
</div>
</template>
<script>
import { Message } from "element-ui"
import PlC from "@/components/plc/plC";
import PlSh from "@/components/plsh/plSh";
import PlH from "@/components/plh/plH";
import PlZl from "@/components/plzl/plZl";
// import LineTree from "@/components/lineTree/lineTree";
import addLjz from "./ljz/index";
import addZdy from "./zdy/index";
import addCh from "./ch/index";
import editCinfo from "./c/index";
import lpbContent from "./lpbContent/index";
// import { getLpbMenuTree, batchScYcChange, getLpbTj, batchGeneratorBdcdyh, getLpbFwytAndQlxz, batchCommit, batchDelete, getLpbQsxtj } from "@api/lpb";
// import xxxx from '../xxxx/index'
export default {
name: "",
components: {
// LineTree,
addLjz,
addZdy,
addCh,
lpbContent,
PlC,
PlSh,
PlH,
PlZl,
// xxxx,
editCinfo
},
data () {
return {
bsms: [],
dialogVisible: false,
plcVisible: false,
plhVisible: false,
plShVisible: false,
plzlVisible: false,
scyclx: "0", //1是实测 0是预测
radio1: "",
radio2: "",
createFlag: false,
bdcdyh: "",
islpb: true,
pd: [], //创建楼盘的树结构数据
menuType: "",
treeData: {},
inputWidth: 200,
selectedZt: "dyzt", //图例选中项，默认选中单元状态
dyztList: [
{
name: "未确权",
color: "#83AAFE",
ts: "12",
mj: "1633",
},
{
name: "已确权",
color: "#6EDEE1",
ts: "22",
mj: "3109",
},
{
name: "已备案",
color: "#8ADC88",
ts: "3",
mj: "409",
},
{
name: "预抵押",
color: "#F2AD67",
ts: "11",
mj: "1466",
},
{
name: "在建抵押",
color: "#F191C8",
ts: "13",
mj: "1792",
},
{
name: "抵押",
color: "#FF8282",
ts: "14",
mj: "13",
},
{
name: "查封",
color: "#D7CECF",
ts: "9",
mj: "1436",
},
{
name: "异议",
color: "#D4A3EB",
ts: "34",
mj: "4342",
},
{
name: "限制",
color: "#A5A3FB",
ts: "2",
mj: "285",
},
],
fwxzList: [],
fwytList: [],
qsxList: [],
legendToggleFlag: false,
lpbContentHight: "",
lpbContentwidth: "",
time: "",
dyztBsmList: {}, //单元状态bsmList
cbsmList: [], // 层bsmlist
lpbloading: true,
bjztFlag: true,
taskTitle: '添加',
curBsm: '',
qsztList: [],
uploadVisible: false, //批量上传弹框
fileData: {
glbsmList: [],
dylx: 'h'
}
};
},
created () {
window.addEventListener("resize", this.getHeight);
// this.getHeight();
},
mounted () {
//获取楼盘表树结构
// this.getLpbMenuTree(this.$store.state.zrzbsm);
//获取各项单元状态的户bsm
// this.getDyztBsmList();
//获取房屋用途统计数据
// this.getLpbFwytAndQlxz();
// 楼盘表绘制区域宽度计算：楼盘表区域宽度-图例宽度34-滚动条宽度6
setTimeout(() => {
this.lpbContentwidth = this.$store.state.contentWidth - 34 - 6;
}, 100);
},
methods: {
//批量提交
batchCommit () {
if (this.bsms.length <= 0) {
Message.warning("请选择操作户")
return
} else {
if (this.qsztList.indexOf('1') > -1) {
Message.warning("已提交的户无法继续操作")
} else {
batchCommit(this.bsms).then(res => {
if (res.code === 200) {
Message.success("提交成功");
this.getlpbData();
} else {
this.$message.error(res.message);
}
})
}
}
},
//批量删除
batchDelete () {
if (this.bsms.length <= 0) {
Message.warning("请选择操作户")
return
} else {
if (this.qsztList.indexOf('1') > -1) {
Message.warning("已提交的户无法继续操作")
} else {
batchDelete(this.bsms).then(res => {
if (res.code === 200) {
Message.success("删除成功");
this.getlpbData();
} else {
this.$message.error(res.message);
}
})
}
}
},
//批量上传 start
batchUpload () {
if (this.bsms.length < 1) {
Message.warning("请选择操作户")
return
} else {
this.uploadVisible = true
}
},
//取消选中
batchCancelChoosed () {
this.cbsmList = [];
this.bsms = [];
this.qsztList = [];
this.$refs.lpbContent.hbsmList = [];
this.$refs.lpbContent.cbsmList = [];
this.$refs.lpbContent.choosedList = [];
this.$refs.lpbContent.$refs.hBsm.forEach((item) => {
item.style.border = '';
item.className = "";
});
this.$refs.lpbContent.$refs.cBsm.forEach((item) => {
item.style.border = '';
item.className = "";
});
},
uploadError (err, file, fileList) {
Message.error("上传文件失败")
console.log("上传文件失败", err)
},
uploadProgress () {
vm.loadingShow('正在上传中')
},
uploadSuccess (res, file, fileList) {
vm.loadingHide();
Message.success("上传成功")
this.uploadVisible = false;
},
handleRemove (file, fileList) {
console.log(file, fileList);
},
handlePreview (file) {
console.log(file);
},
handleExceed (files, fileList) {
console.log(fileList)
// this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
this.$message.warning("上传失败")
},
beforeRemove (file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
//批量上传 end
loading () {
this.getLpbMenuTree(this.$store.state.zrzbsm);
},
openPlC () {
if (this.cbsmList.length <= 0) {
Message.warning("请选择层")
return
}
this.plcVisible = true
},
openPl (val) {
if (this.bsms.length <= 0) {
Message.warning("请选择操作户")
return
} else {
if (this.qsztList.indexOf('1') > -1) {
Message.warning("已提交的户无法继续操作")
} else {
switch (val) {
case 'h':
this.plhVisible = true;
break;
case 'zl':
this.plzlVisible = true;
break;
case 'sh':
this.plShVisible = true;
break;
default:
break;
}
}
}
},
lodding () {
this.getlpbData();
},
plZlClose () {
this.plzlVisible = false;
},
plcClose () {
this.plcVisible = false;
},
plhClose () {
this.plhVisible = false;
},
plshClose () {
this.plShVisible = false;
},
//改变编辑或详细信息状态
bjztChange () {
this.bjztFlag = !this.bjztFlag;
},
//改变实预测数据类型
scyclxChange (val) {
//清空已选中层户
this.cbsmList = [];
this.bsms = [];
this.qsztList = [];
this.$refs.lpbContent.hbsmList = [];
this.$nextTick(() => {
//户
if (this.$refs.lpbContent.$refs.hBsm) {
this.$refs.lpbContent.$refs.hBsm.forEach(item => {
item.style.borderColor = 'rgb(230, 230, 230)';
if (item.className == "tdSelect") {
item.className = "";
}
});
}
//层
if (this.$refs.lpbContent.$refs.cBsm) {
this.$refs.lpbContent.$refs.cBsm.forEach(item => {
console.log(item.className, 'item.className');
item.className = "floor";
});
}
})
//获取图例数据
this.getDyztBsmList();
this.getLpbFwytAndQlxz();
//重新渲染楼盘表
this.$refs.lpbContent.dataChange();
},
//获取高度计算lpb内容区高度
getHeight () {
this.lpbContentHight = window.innerHeight - 285;
},
//创建楼盘
create () {
this.createFlag = true;
},
//获取自然幢树结构数据
getLpbMenuTree (zrzbsm) {
getLpbMenuTree(zrzbsm)
.then((res) => {
this.pd = res.result;
})
.catch((error) => { });
},
//打开新建楼盘树结构右键菜单唤起的弹框
openLpbDialog (data, type) {
this.treeData = data;
this.menuType = type;
this.$nextTick(() => {
this.resetInfo();
});
this.dialogVisible = true;
this.taskTitle = '添加';
this.curBsm = '';
},
//弹框中的保存按钮，根据不同菜单点击类型调用不同子组件的保存方法
saveInfo () {
switch (this.menuType) {
case "ljz":
this.$refs.ljz.onSave(this.$refs.ljz.form, this.treeData.bsm);
break;
case "zdy":
this.$refs.zdy.submitForm("form", this.pd[0].bsm, this.treeData.bsm);
break;
case "ch":
this.$refs.ch.onSave(this.pd[0].bsm);
break;
case "c":
this.$refs.c.onSave(this.pd[0].bsm);
break;
default:
break;
}
},
//弹框中的重置按钮
resetInfo () {
switch (this.menuType) {
case "ljz":
this.$refs.ljz.reset();
break;
case "zdy":
this.$refs.zdy.reset();
break;
case "ch":
this.$refs.ch.reset();
break;
case "c":
this.$refs.c.reset();
break;
default:
break;
}
},
//关闭弹框
closeDaialog () {
this.dialogVisible = false;
},
//图例的展开收起
legendToggle () {
this.legendToggleFlag = !this.legendToggleFlag;
},
//获取选中户bsm
getHbsm (data, type) {
if (type) {
// 双击
} else {
//单击 TO DO
this.bsms = data;
}
},
//获取选中户信息
getQsztList (data, type) {
if (type) {
// 双击
} else {
//单击 TO DO
this.qsztList = data;
}
},
//获取选中层bsmlist
getCbsm (data) {
this.cbsmList = data;
},
inputChange () {
console.log(this.bdcdyh, 'this.bdcdyh');
if (this.bdcdyh != "") {
// console.log("查询" + this.bdcdyh);
this.$refs.lpbContent.lpbDataMap(this.bdcdyh);
} else {
this.$message({
message: "请输入内容后查询",
type: "warning",
});
}
},
//调用楼盘表信息查询和图例统计接口
getlpbData () {
this.$refs.lpbContent.loadingData(this.$store.state.zrzbsm, this.scyclx);
this.getDyztBsmList();
this.getLpbFwytAndQlxz();
//改变楼盘表子组件的key值，重新渲染
// this.time = new Date().getTime();
},
//实预测装换
plScYcChange () {
let data = {
zrzbsm: this.$store.state.zrzbsm,
scyclx: this.scyclx,
};
batchScYcChange(data).then((res) => {
if (res.code === 200) {
this.$message.success("实预测转换成功");
this.$refs.lpbContent.loadingData(this.$store.state.zrzbsm, '1');
this.$refs.lpbContent.loadingData(this.$store.state.zrzbsm, '0');
} else if (res.code === 500) {
this.$message.warning(res.message);
}
});
},
//切换房屋状态
handleChoosedH (bsms, color) {
//每次切换房屋状态，将之前高亮的户边框颜色重置为默认
this.$refs.lpbContent.choosedList = [];
this.$refs.lpbContent.$refs.hBsm.forEach((item) => {
item.style.border = '';
item.className = '';
});
this.bsms = bsms;
//清除选中户
this.$nextTick(() => {
//给hBsmList传值
// console.log(bsms,'bsms');
this.$refs.lpbContent.choosedList = bsms;
this.$refs.lpbContent.borderColor = color;
})
},
//批量添加不动产单元号
addBdcdyh () {
if (this.qsztList.indexOf('1') > -1) {
Message.warning("已提交的户无法继续操作")
} else {
batchGeneratorBdcdyh(this.$store.state.zrzh, this.pd[0].bsm, 0).then(
(res) => {
if (res.code === 200) {
this.$message.success("生成完成！");
} else if (res.code === 206) {
let hasGenerateCount = res.result.hasGenerateCount;
let unGenerateCount = res.result.unGenerateCount;
if (+unGenerateCount === 0) {
this.$message.warning("不存在未生成不动产单元号的户，无需生成不动产单元号！")
return
}
this.open(hasGenerateCount, unGenerateCount);
} else {
this.$message.warning(res.message)
}
}
);
}
},
open (hasGenerateCount, unGenerateCount) {
this.$confirm('未生成单元号有' + unGenerateCount + '户,已经生成单元号有' + hasGenerateCount + '户,是否覆盖全部重新生成？', '确认信息', {
distinguishCancelAndClose: true,
confirmButtonText: '覆盖全部生成',
cancelButtonText: '跳过已生成单元号户'
})
.then(() => {
batchGeneratorBdcdyh(this.$store.state.zrzh, this.pd[0].bsm, 2).then(
(res) => {
if (res.code === 200) {
this.$message.success("生成完成！");
}
});
})
.catch(action => {
if (action === 'cancel') {
batchGeneratorBdcdyh(this.$store.state.zrzh, this.pd[0].bsm, 1).then(
(res) => {
if (res.code === 200) {
this.$message.success("生成完成！");
}
});
}
});
},
//获取各项单元状态统计数据
getDyztBsmList () {
let data = {
zrzbsm: this.$store.state.zrzbsm,
scyclx: this.scyclx,
};
getLpbTj(data).then((res) => {
if (res.code === 200) {
this.dyztList = res.result;
this.dyztList.splice(1, 0, this.dyztList[8]);
this.dyztList.pop();
this.dyztList.forEach(item => {
item.ts = item.bsms.length;
switch (item.name) {
case 'Qqzt':
item.color = "#6EDEE1";
item.name = "已确权"
break;
case 'Wqqzt':
item.color = "#83AAFE";
item.name = "未确权"
break;
case 'Bazt':
item.color = "#8ADC88";
item.name = "已备案"
break;
case 'Ydyzt':
item.color = "#F2AD67";
item.name = "预抵押"
break;
case 'Zjgcdyzt':
item.color = "#F191C8";
item.name = "在建抵押"
break;
case 'Dyzt':
item.color = "#FF8282";
item.name = "抵押"
break;
case 'Cfzt':
item.color = "#D7CECF";
item.name = "查封"
break;
case 'Yyzt':
item.color = "#D4A3EB";
item.name = "异议"
break;
case 'Xzzt':
item.color = "#A5A3FB";
item.name = "限制"
break;
default:
break;
}
})
}
});
},
// 获取房屋用途和房屋性质及缺失项统计数据
getLpbFwytAndQlxz () {
let data = {
zrzbsm: this.$store.state.zrzbsm,
scyclx: this.scyclx,
};
getLpbFwytAndQlxz(data).then((res) => {
if (res.code === 200) {
// this.fwytList = res.result
this.fwytList = res.result.fwyt;
this.fwxzList = res.result.qlxz;
if (this.fwytList.length > 0) {
this.fwytList.forEach(item => {
item.color = "#2591FD";
item.ts = item.bsms.length
})
}
if (this.fwxzList.length > 0) {
this.fwxzList.forEach(item => {
item.color = "#2591FD";
item.ts = item.bsms.length
})
}
}
});
getLpbQsxtj(data).then((res) => {
if (res.code === 200) {
this.qsxList = [
{
name: '坐落',
bsms: res.result.zl.bsms,
color: '#2591FD',
ts: res.result.zl.bsms.length
},
{
name: '分层分户图',
bsms: res.result.fcfht.bsms,
color: '#2591FD',
ts: res.result.fcfht.bsms.length
},
{
name: '室号',
bsms: res.result.shbw.bsms,
color: '#2591FD',
ts: res.result.shbw.bsms.length
}
]
}
});
}
},
computed: {},
destroyed () {
window.removeEventListener("resize", this.getHeight);
},
watch: {
//树结构和图例伸缩时修改楼盘表主要内容区宽度
legendToggleFlag (n) {
if (n) {
this.lpbContentwidth -= 204;
} else {
this.lpbContentwidth += 204;
}
},
createFlag (n) {
if (n) {
this.lpbContentwidth -= 260;
} else {
this.lpbContentwidth += 260;
}
},
selectedZt (n) {
this.legendToggleFlag = true;
},
bsms (n) {
this.fileData.glbsmList = n;
console.log(this.fileData, 'filedata');
}
},
};
</script>
<style scoped lang="scss">
.edit {
height: 100%;
background-color: #F4F9FF;
.tab-header {
border: 1px solid #dedede;
box-sizing: border-box;
padding: 20px 0;
background-color: #ffffff;
margin-bottom: 10px;
position: relative;
.searchContent {
margin-left: 62px;
box-sizing: border-box;
padding: 0 20px;
.searchInput {
transition: 0.5s;
margin-left: 20px;
display: inline-block;
}
}
.change {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 80px;
border-right: 1px solid #dedede;
i {
cursor: pointer;
color: #0090FF;
font-size: 36px;
display: inherit;
text-align: center;
line-height: 128px;
}
}
.radioBtn {
margin-left: 10px;
padding: 12px 10px;
border: 0;
i {
font-size: 13px;
padding-right: 4px;
}
/deep/.el-radio-button__inner {
border: 1px solid #dcdfe6;
border-radius: 4px;
box-shadow: 0 0 0 0 #409eff !important;
}
}
}
.tab-content {
border: 1px solid #dedede;
background-color: #ffffff;
display: flex;
.lp-tree {
height: 100%;
overflow: hidden;
transition: 0.5s;
.treeData {
margin-top: 20px;
margin-left: 26px;
float: left;
}
}
.w0 {
width: 0;
}
.w260 {
width: 260px;
}
.lp-overview {
transition: 0.5s;
flex: 1;
border: 1px solid rgb(236, 236, 236);
border-top: 0;
border-bottom: 0;
margin-right: 10px;
box-sizing: border-box;
}
.lp-legend {
transition: 0.5s;
height: 100%;
font-size: 14px;
.handleCol {
width: 34px;
float: right;
height: 100%;
.btn {
cursor: pointer;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #0091ff;
color: #fff;
border-bottom: 1px solid #e6e6e6;
}
.dyzt,
.fwxz,
.fwyt,
.qsx {
height: 122px;
}
.dyzt,
.fwxz,
.fwyt,
.qsx {
cursor: pointer;
border-bottom: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
span {
text-align: center;
height: 100%;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
line-height: 34px;
letter-spacing: 2px;
}
}
.selectedZt {
background-color: #0091ff;
color: #fff;
}
}
.legendTable-wrap {
transition: 0.5s;
float: right;
overflow: hidden;
.legendTable {
margin-top: -1px;
tr {
height: 40px;
line-height: 40px;
th:first-child {
width: 80px;
}
th {
width: 60px;
height: 40px;
white-space: nowrap;
}
td {
height: 40px;
text-align: center;
white-space: nowrap;
}
td:first-child {
text-align: left;
text-indent: 2px;
}
}
}
}
}
}
.tab-content::-webkit-scrollbar {
width: 1px;
}
.btnGroup {
margin: 20px auto 0;
width: 260px;
}
.hbjDialog {
/deep/ .el-dialog {
margin-top: 10vh !important;
}
}
.fa {
padding-right: 4px;
}
.wrap {
width: 100%;
height: 30px;
position: relative;
.main-button {
display: -webkit-flex;
display: flex;
flex-direction: column-reverse;
flex-wrap: nowrap;
position: absolute;
left: 165px;
top: 18px;
}
.download {
position: absolute;
left: 312px;
top: 19px;
}
}
}
</style>
<template>
<div class="h content-form">
<el-form ref="form" :model="form" label-width="160px">
<table border="1" width="100%" cellspacing="0" cellpadding="0" class="hTable">
<tbody>
<tr height="30">
<td colspan="12" align="center">
<font size="4">逻辑幢基本信息</font>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright"><i class="requisite">*</i>逻辑幢号</td>
<td colspan="4">
<input class="formInput" ref="ljzh" @blur="inputBlur($event)" v-model="form.ljzh" />
</td>
<td colspan="2" align="center" class="tdright">自然幢号</td>
<td colspan="4">
<el-input v-model="form.zrzh" maxlength="24" disabled></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright"><i class="requisite">*</i>逻辑幢名称</td>
<td colspan="4">
<input class="formInput" ref="ljzmc" @blur="inputBlur($event)" v-model="form.ljzmc" />
</td>
<td colspan="2" align="center" class="tdright">建筑物状态</td>
<td colspan="4">
<el-input v-model="form.jzwzt"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">门牌号</td>
<td colspan="4">
<el-input v-model="form.mph"></el-input>
</td>
<td colspan="2" align="center" class="tdright">竣工日期</td>
<td colspan="4">
<el-date-picker v-model="form.jgrq" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
</el-date-picker>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">预测建筑面积(㎡)</td>
<td colspan="4">
<el-input v-model="form.ycjzmj" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null">
</el-input>
</td>
<td colspan="2" align="center" class="tdright">实测建筑面积(㎡)</td>
<td colspan="4">
<el-input v-model="form.scjzmj" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null">
</el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">预测地下面积(㎡)</td>
<td colspan="4">
<el-input v-model="form.ycdxmj" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null">
</el-input>
</td>
<td colspan="2" align="center" class="tdright">实测地下面积(㎡)</td>
<td colspan="4">
<el-input v-model="form.scdxmj" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null">
</el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">预测其他面积(㎡)</td>
<td colspan="4">
<el-input v-model="form.ycqtmj" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null">
</el-input>
</td>
<td colspan="2" align="center" class="tdright">实测其他面积(㎡)</td>
<td colspan="4">
<el-input v-model="form.scqymj" oninput="value = (value.match(/^\d{0,9}(\.?\d{0,3})/g)[0]) || null">
</el-input>
</td>
</tr>
<tr height="30" v-for="(item1, index) in form.ytList" :key="'yt' + index">
<td colspan="2" v-if="index === 0" :rowspan="ytTitleRowspan" align="center" class="tdright">
<i class="iconfont iconicon-test1" style="margin-right: 8px;color:#66b1ff;font-size:30px"
@click="addYtInfo"></i>
<span style="position:relative;top:-6px"><i class="requisite">*</i>房屋用途</span>
</td>
<td colspan="1" align="center">
<i class="iconfont iconicon-test" style="color:#FA6400;font-size:30px" @click="deleteYtInfo(index)"></i>
</td>
<td colspan="9">
<el-select-tree style="width:100%" ref="yt" v-if="show" :default-expand-all="defaultExpandAll"
:multiple="multiple" :placeholder="placeholder" :data="$store.state.fwytList" :props="treeProps"
:check-strictly="checkStrictly" :clearable="clearable" v-model="item1.fwytzdbsm"></el-select-tree>
</td>
</tr>
<tr height="30" v-for="(item1, index) in form.fwjgList" :key="'jg' + index">
<td colspan="2" v-if="index === 0" :rowspan="fwjgTitleRowspan" align="center" class="tdright">
<i class="iconfont iconicon-test1" style="margin-right: 8px;color:#66b1ff;font-size:30px"
@click="addFwjgInfo"></i>
<span style="position:relative;top:-6px"><i class="requisite">*</i>房屋结构</span>
</td>
<td colspan="1" align="center">
<i class="iconfont iconicon-test" style="color:#FA6400;font-size:30px" @click="deleteFwjgInfo(index)"></i>
</td>
<td colspan="9">
<el-select-tree style="width:100%" ref="fwjg" v-if="show" :default-expand-all="defaultExpandAll"
:multiple="multiple" :placeholder="placeholder" :data="$store.state.jgOptions" :props="treeProps"
:check-strictly="checkStrictly" :clearable="clearable" v-model="item1.fwjgzdbsm"></el-select-tree>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">地下层数</td>
<td colspan="4">
<el-input v-model="form.dxcs"></el-input>
</td>
<td colspan="2" align="center" class="tdright">地上层数</td>
<td colspan="4">
<el-input v-model="form.dscs"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">总层数</td>
<td colspan="10">
<el-input v-model="form.zcs"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" rowspan="2" class="tdright">
<span>备注</span>
</td>
<td colspan="10" rowspan="2">
<el-input v-model="form.bz" type="textarea"></el-input>
</td>
</tr>
<tr height="30"></tr>
</tbody>
</table>
</el-form>
</div>
</template>
<script>
// import { insertLjzInfo } from "@api/lpb";
// import { getQjLjzDetailById, updateQjLjz } from "@api/ljz";
// import { formdate } from "@libs/function";
export default {
name: "ljz",
components: {},
props: {
ljzbsm: {
type: String,
default: '',
}
},
data () {
return {
//树型结构
show: true,
clearable: true,
defaultExpandAll: true,
multiple: false,
placeholder: '请选择',
disabled: false,
checkStrictly: true,
treeProps: {
value: 'bsm',
children: 'children',
label: 'mc'
},
rules: [],
form: {
zrzbsm: "",
ljzh: "", //逻辑幢号
zrzh: "", //自然幢号
ljzmc: "", //逻辑幢顺序号
bdcdyh: "", //不动产单元号
mph: "", //门牌号
jgrq: "", //竣工日期
ycjzmj: "", //预测建筑面积
scjzmj: "", //实测建筑面积
ycdxmj: "", //预测地下面积
scdxmj: "", //实测地下面积
ycqtmj: "", //预测其他面积
scqymj: "", //实测其他面积
ytList: [
{
glbsm: "", //关联标识码
fwytzdbsm: "", //房屋用途字典标识码
sx: "", //顺序
},
],
fwjgList: [
{
fwjgzdbsm: "", //房屋结构字典标识码
glbsm: "", //关联标识码
sx: "", //顺序
},
],
dxcs: "", //地下层数
dscs: "", //地上层数
zcs: "", //总层数
jzwzt: "", //建筑物状态
},
value: "",
ytTitleRowspan: 1, //用途的单元格垂直合并数量
fwjgTitleRowspan: 1, //房屋结构的单元格垂直合并数量
};
},
methods: {
inputBlur (e) {
if (e.target.value != '') {
e.target.style.border = ""
} else {
e.target.style.border = "1px solid red";
e.target.style.boxSizing = 'border-box';
}
},
addYtInfo () {
this.form.ytList.push({
glbsm: "",
fwytzdbsm: "",
sx: "",
});
this.ytTitleRowspan = this.form.ytList.length;
},
deleteYtInfo (index) {
if (this.form.ytList.length <= 1) {
this.$message({
message: "不能删除，最少含有一条房屋用途信息",
type: "warning",
});
} else {
this.form.ytList.splice(index, 1);
this.ytTitleRowspan = this.form.ytList.length;
}
},
addFwjgInfo () {
this.form.fwjgList.push({
fwjgzdbsm: "", //房屋结构字典标识码
glbsm: "", //关联标识码
sx: "", //顺序
});
this.fwjgTitleRowspan = this.form.fwjgList.length;
},
//重置数据
reset () {
this.form = {
// zrzbsm: "",
ljzh: "", //逻辑幢号
zrzh: this.$store.state.zrzh, //自然幢号
ljzmc: "", //逻辑幢顺序号
bdcdyh: "", //不动产单元号
mph: "", //门牌号
jgrq: "", //竣工日期
ycjzmj: "", //预测建筑面积
scjzmj: "", //实测建筑面积
ycdxmj: "", //预测地下面积
scdxmj: "", //实测地下面积
ycqtmj: "", //预测其他面积
scqymj: "", //实测其他面积
ytList: [
{
glbsm: "", //关联标识码
fwytzdbsm: "", //房屋用途字典标识码
sx: "", //顺序
},
],
fwjgList: [
{
fwjgzdbsm: "", //房屋结构字典标识码
glbsm: "", //关联标识码
sx: "", //顺序
},
],
dxcs: "", //地下层数
dscs: "", //地上层数
zcs: "", //总层数
jzwzt: "", //建筑物状态
};
this.ytTitleRowspan = 1; //用途的单元格垂直合并数量
this.fwjgTitleRowspan = 1; //用途的单元格垂直合并数量
},
deleteFwjgInfo (index) {
if (this.form.fwjgList.length <= 1) {
this.$message({
message: "不能删除，最少含有一条房屋结构信息",
type: "warning",
});
} else {
this.form.fwjgList.splice(index, 1);
this.fwjgTitleRowspan = this.form.fwjgList.length;
}
},
onSave (data, bsm) {
this.rules = [
{
data: this.form.ljzh,
name: '自然幢号',
dom: this.$refs.ljzh,
rule: /^\s*$/g, //非空
},
{
data: this.form.ljzmc,
name: '不动产单元号',
dom: this.$refs.ljzmc,
rule: /^\s*$/g, //非空
},
];
this.form.ytList.forEach((item, index) => {
this.rules.push(
{
data: item.fwytzdbsm,
name: '用途',
dom: this.$refs.yt[index],
rule: /^\s*$/g, //非空
},
)
});
this.form.fwjgList.forEach((item, index) => {
this.rules.push(
{
data: item.fwjgzdbsm,
name: '房屋结构',
dom: this.$refs.fwjg[index],
rule: /^\s*$/g, //非空
},
)
});
//自然幢标识码
this.form.zrzbsm = bsm;
let flag = true;
this.rules.forEach(item => {
if (item.rule.test(item.data) || item.data == null) {
if (item.dom.$el) {
item.dom.$el.style.border = '1px solid red';
item.dom.$el.style.boxSizing = 'border-box';
} else {
item.dom.style.border = '1px solid red';
item.dom.style.boxSizing = 'border-box';
}
flag = false;
return false
}
})
this.$nextTick(() => {
if (flag) {
if (this.ljzbsm == '') {
// insertLjzInfo(this.form).then((res) => {
// if (res.code === 200) {
// this.$message.success("保存成功");
// //更新树结构数据
// console.log(this);
// this.$parent.$parent.getLpbMenuTree(bsm);
// //关闭弹框
// this.$parent.$parent.closeDaialog();
// } else {
// this.$message.error(res.message);
// }
// });
} else {
//逻辑幢更新接口调用 TODO
console.log('保存');
updateQjLjz(this.form).then((res) => {
if (res.code === 200) {
this.$message.success("修改成功")
}
})
}
}
})
},
onSubmit () {
// console.log(this.form);
},
//根据逻辑幢bsm查询逻辑幢信息
getLjzInfo (bsm) {
//逻辑幢信息查询接口调用 bsm为逻辑幢bsm
getQjLjzDetailById(bsm).then((res) => {
if (res.code === 200) {
this.form = res.result;
this.form.zrzh = this.$store.state.zrzh;
this.form.fwjgList = [
{
fwjgzdbsm: "", //房屋结构字典标识码
glbsm: "", //关联标识码
sx: "", //顺序
},
];
this.form.ytList = [
{
glbsm: "", //关联标识码
fwytzdbsm: "", //房屋用途字典标识码
sx: "", //顺序
},
];
if (this.form.qjfwjg.length > 0) {
this.form.fwjgList = [];
for (let i = 0; i < this.form.qjfwjg.length; i++) {
this.form.fwjgList.push({
fwjgzdbsm: this.form.qjfwjg[i].fwjgzdbsm, //房屋结构字典标识码
glbsm: this.form.qjfwjg[i].glbsm, //关联标识码
sx: this.form.qjfwjg[i].sx, //顺序
})
}
}
if (this.form.qjfwyt.length > 0) {
this.form.ytList = [];
for (let i = 0; i < this.form.qjfwyt.length; i++) {
this.form.ytList.push({
fwytzdbsm: this.form.qjfwyt[i].fwytzdbsm, //房屋结构字典标识码
glbsm: this.form.qjfwyt[i].glbsm, //关联标识码
sx: this.form.qjfwyt[i].sx, //顺序
})
}
}
console.log(JSON.stringify(this.form) + ":this.form")
}
})
this.$forceUpdate();
}
},
created () {
},
mounted () {
this.form.zrzh = this.$store.state.zrzh;
},
watch: {
"form.ljzh": function (val) {
if (val != '') {
this.$refs.ljzh.style.border = '';
}
},
"form.ljzmc": function (val) {
if (val != '') {
this.$refs.ljzmc.style.border = '';
}
},
"form.ytList": {
handler: function (newVal, oldVal) {
newVal.forEach((item, ind) => {
if (item.fwytzdbsm != '') {
this.$refs.yt[ind].$el.style.border = ""
}
})
},
deep: true
},
"form.fwjgList": {
handler: function (newVal, oldVal) {
newVal.forEach((item, ind) => {
if (item.fwjgzdbsm != '') {
this.$refs.fwjg[ind].$el.style.border = ""
}
})
},
deep: true
},
ljzbsm: {
handler: function (item) {
console.log(item, 'item');
if (item != '' && this.$parent.$parent.menuType == 'ljz') {
this.getLjzInfo(this.ljzbsm)
}
},
immediate: true
},
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.h {
min-height: 200px;
width: 100%;
margin: 0 auto;
/deep/.el-input__inner {
width: 100%;
border: 0;
}
/deep/textarea {
width: 100%;
border: 0;
}
.el-form-item {
font-weight: bold;
font-size: xx-large;
}
table {
background: #fff;
table-layout: fixed;
}
td {
//bgcolor:#F1F4FC;
background-color: #fff;
width: 8.33%;
height: 36px
}
.el-select {
display: block;
}
}
table {
font-size: 14px;
}
.hTable {
margin-top: 10px;
}
</style>
<template>
<div class="lpbContent-wrap" ref="lpbContentWrap">
<div class="lpbContent" ref="lpbContent">
<div :class="
lpbData.cs.length == 0 && lpbData.zdys.length == 0
? 'bottom40 ljz-wrap'
: 'ljz-wrap'
" :style="{ 'width': ljzWidth + 'px' }" v-show="lpbData.ljzs.length > 0">
<!-- 循环逻辑幢数据 -->
<div class="ljz" ref="ljz" v-for="(ljzs, ljzIndex) in lpbData.ljzs" :key="ljzIndex"
:class="[{ 'mt30': ljzIndex == 0 }, { 'mt60': ljzIndex == 1 || lpbData.ljzs.length == 1 }]">
<!-- :style="{'marginTop':ljzs.zdys.length>0?'0':'30px'}" -->
<!-- 循环逻辑幢下的幢单元 -->
<div class="ljz-zdy-wrap">
<div class="ljz-zdy column-reverse"
:style="{ 'min-height': ljzzdyHeight + 'px', 'marginRight': zdyIndex < (ljzs.zdys.length - 1) || ljzs.cs.length > 1 ? '20px' : '0' }"
ref="ljzzdy" v-show="ljzs.zdys.length > 0" v-for="(zdys, zdyIndex) in ljzs.zdys" :key="zdyIndex">
<!-- 幢单元名称 -->
<div class="zdy-name name">
<p class="cp" @dblclick="openZxx(zdys.bsm, 'zdy')">
<!-- {{ zdys.zdymc }} -->
<el-checkbox @change='zdySelectAll($event, zdys.cs)'>{{ zdys.zdymc }}</el-checkbox>
</p>
</div>
<!-- 循环幢单元下的层户 -->
<!-- <div class="chTable-wrap"> -->
<table class="chTable psr" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length > 0">
<tr v-for="(cs, csIndex) in zdys.cs" :key="csIndex">
<!-- 显示层数 -->
<td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
@click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
{{ cs.sjc }}层
</td>
<!-- 显示户 -->
<td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
:data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
:class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
@click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
@contextmenu.prevent="openMenu($event, hs, 'h')">
{{ hs.shbw }}
<span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
<span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
<span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
<ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
<li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
<li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
<li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
<li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
<li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
<li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
</ul>
</td>
</tr>
</table>
<!-- </div> -->
</div>
</div>
<!-- 循环逻辑幢下的层户 -->
<div class="ljz-ch" ref="ljzDlch"
:style="{ height: 'auto', marginTop: (ljzs.zdys.length > 0 ? '39' : 0) + 'px' }" v-if="ljzs.cs.length > 0">
<table class="chTable prs" :style="{
top:
ljzzdyHeight + 40 - ljzs.cs.length * 65 < 0
? 0
: ljzzdyHeight + 40 - ljzs.cs.length * 65 + 'px',
}" border="1" cellspacing="0" cellpadding="0">
<tr v-for="cs in ljzs.cs" :key="cs.bsm">
<!-- 显示层数 -->
<td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
@click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
{{ cs.sjc }}层
</td>
<!-- 显示户 -->
<td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
:data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
:class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
@click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
@contextmenu.prevent="openMenu($event, hs, 'h')">
{{ hs.shbw }}
<span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
<span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
<span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
<ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
<li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
<li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
<li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
<li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
<li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
<li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
</ul>
</td>
</tr>
</table>
</div>
<!-- </div> -->
<!-- 逻辑幢名称 -->
<div class="ljz-name name">
<p class="cp" @dblclick="openZxx(ljzs.bsm, 'ljz')">
{{ ljzs.ljzmc }}
</p>
</div>
</div>
</div>
<div class="zdy-wrap"
:style="{ width: zdyWidth + 'px', marginTop: (lpbData.zdys.length > 0 || lpbData.cs.length > 0) ? '30px' : '0' }">
<!-- 循环自然幢下的幢单元 -->
<div class="zdy column-reverse" ref="zdy" v-for="(zdys, zdyIndex) in lpbData.zdys" :key="zdyIndex"
:style="{ 'min-height': zdyHeight + 'px' }">
<!-- 幢单元名称 -->
<div class="zdy-name name">
<p class="cp" @dblclick="openZxx(zdys.bsm, 'zdy')">
<el-checkbox @change='zdySelectAll($event, zdys.cs)'>{{ zdys.zdymc }}</el-checkbox>
</p>
</div>
<!-- 循环幢单元下的层户 -->
<table class="chTable" border="1" cellspacing="0" cellpadding="0" v-show="zdys.cs.length > 0">
<tr v-for="(cs, csIndex) in zdys.cs" :key="csIndex">
<!-- 显示层数 -->
<td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
@click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
{{ cs.sjc }}层
</td>
<!-- 显示户 -->
<td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
:data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
:class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
@click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
@contextmenu.prevent="openMenu($event, hs, 'h')">
{{ hs.shbw }}
<span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
<span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
<span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
<ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
<li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
<li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
<li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
<li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
<li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
<li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
</ul>
</td>
</tr>
</table>
</div>
<!-- 循环自然幢下的独立层户 -->
<!-- <template > -->
<div class="zdy column-reverse" ref="zrzDlch" :style="{ 'min-height': cHeight + 'px' }">
<table class="chTable" ref="ch" border="1" cellspacing="0" cellpadding="0"
v-show="lpbData.cs != null && lpbData.cs.length > 0">
<tr v-for="(cs, csIndex) in lpbData.cs" :key="csIndex">
<!-- 显示层数 -->
<td class="floor" ref="cBsm" @contextmenu.prevent="openMenu($event, cs, 'c')"
@click="handleClickC($event, cs)" @dblclick="openZxx(cs.bsm, 'c')">
{{ cs.sjc }}层
</td>
<!-- 显示户 -->
<td v-for="(hs, hsIndex) in cs.hs" :rowspan="hs.sjcs" :colspan="hs.sjhs" :data-bsm="hs.bsm"
:data-qszt="hs.qszt" ref="hBsm" :key="hsIndex"
:class="searchNum == hs.shbw || searchNum == hs.bdcdyh ? 'tdSelect' : ''"
@click="handleTdClick($event.target, hs.bsm, hs)" @dblclick="dbclick(hs.bsm)"
@contextmenu.prevent="openMenu($event, hs, 'h')">
{{ hs.shbw }}
<span @click.stop="dyztIconClick" class="hqszt lin" v-show="hs.qszt == '0'">临</span>
<span @click.stop="dyztIconClick" class="hqszt zheng" v-show="hs.qszt == '1'">正</span>
<span @click.stop="dyztIconClick" class="hqszt xian" v-show="hs.qszt == '2'">现</span>
<ul class="dyzt" @click.stop="hDyztClick($event, hs.bsm, hs)">
<li style="background-color:#6EDEE1" v-show="hs.qqzt == '1'" @click.stop="dyztIconClick">确</li>
<li style="background-color:#8ADC88" v-show="hs.bazt == '1'" @click.stop="dyztIconClick">备</li>
<li style="background-color:#FF8282" v-show="hs.dyzt == '1'" @click.stop="dyztIconClick">抵</li>
<li style="background-color:#D7CECF" v-show="hs.cfzt == '1'" @click.stop="dyztIconClick">查</li>
<li style="background-color:#D4A3EB" v-show="hs.yyzt == '1'" @click.stop="dyztIconClick">异</li>
<li style="background-color:#A5A3FB" v-show="hs.xzzt == '1'" @click.stop="dyztIconClick">限</li>
</ul>
</td>
</tr>
</table>
</div>
<!-- </template> -->
</div>
<!-- <div class="ch-wrap">层户</div> -->
<div class="zrz" :style="{ width: lpbContentWidth + 'px' }">
<el-checkbox v-model="zrzChecked" @change='lpbSelectAll'>{{ lpbData.xmmc }}</el-checkbox>
</div>
</div>
<ul v-show="lpbChVisible" :style="{ left: lpbChLeft + 'px', top: lpbChTop + 'px' }" class="contextmenu">
<li v-show="rightClickFlag == 'h'" @click="handleAddH">添加</li>
<li v-show="rightClickFlag == 'h'" @click="handleMoveH">移动</li>
<!-- <li v-show="rightClickFlag == 'h'" @click="handleDeleteH">删除</li> -->
<li v-show="rightClickFlag == 'h'" @click="handleSyczh">实预测转换</li>
<li v-show="rightClickFlag == 'c'" @click="handleAddC('up')">
向上添加层
</li>
<li v-show="rightClickFlag == 'c'" @click="handleAddC('down')">
向下添加层
</li>
<li v-show="rightClickFlag == 'c'" @click="handleDeleteC">删除层</li>
<!-- 合并 -->
<li v-show="rightClickFlag == 'hb'" :class="canHb != 'zyhb' ? 'cantHb' : ''" @click="handleHb('zyhb')">左右合并</li>
<li v-show="rightClickFlag == 'hb'" :class="canHb != 'sxhb' ? 'cantHb' : ''" @click="handleHb('sxhb')">上下合并</li>
<!-- 分割 -->
<li v-show="rightClickFlag == 'fg'" @click="handleFg">户分割</li>
<!-- 范围属性变更 -->
<li v-show="rightClickFlag == 'fwsxbg'" @click="handleFwsxbg">变更信息</li>
<!-- 重新落宗 -->
<li v-show="rightClickFlag == 'cxlz'" @click="handleCxlz">重新落宗</li>
</ul>
<!-- 层操作弹框 -->
<el-dialog v-dialogDrag :close-on-click-modal="false" :title="addCData.title" :visible.sync="addCVisible"
width="50%">
<el-form :model="addCData">
<el-form-item label="层号" :label-width="formLabelWidth">
<el-input disabled v-model="addCData.sjc" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="实际层" :label-width="formLabelWidth">
<el-input disabled v-model="addCData.sjc" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="添加的户数" :label-width="formLabelWidth">
<el-input v-model="addCData.hcount" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div class="btnGroup">
<el-button type="primary" @click="saveAddC">保存</el-button>
<el-button type="primary" @click="addCVisible = false">取消</el-button>
</div>
</el-dialog>
<!-- 户分割弹框 -->
<el-dialog v-dialogDrag :close-on-click-modal="false" title="户分割" :visible.sync="hfgDialogVisible" width="800px">
<el-form :model="fgData">
<el-form-item label="分割户数" required="" :label-width="formLabelWidth">
<el-input :disabled="fgData.fgfx != 0" v-model="fgData.fghs" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div class="btnGroup">
<el-button type="primary" @click="savefgData">保存</el-button>
<el-button type="primary" @click="hfgDialogVisible = false">取消</el-button>
</div>
</el-dialog>
<move-h :hbsm="chData.bsm" @close="moveHClose" :move-hvisible="moveHvisible" :type="scyclx"
@loading="loadingData($store.state.zrzbsm, $parent.scyclx)"></move-h>
<!-- 双击户的弹出框 -->
<el-dialog v-dialogDrag :close-on-click-modal="false" title="户编辑" class="hbjDialog" :visible.sync="hbjVisible"
width="80%">
<hbj ref="hbj" :bsm="hbsm" :scyclx="scyclx" :lpbParent="lpbParent"></hbj>
</el-dialog>
<!-- 户重新落宗 -->
<h-cxlz :h-cxlz-visble="hcxlzVisible" :bsms="hbsmList" @close="hcxlzVisible = false"></h-cxlz>
</div>
</template>
<script>
import moveH from "@/components/moveH/moveH";
import HCxlz from "@/components/hCxlz/hCxlz";
// import { getLpb, insertUpDownC, deleteCByBsm } from "@api/lpb";
// import { hhb, hfg } from "@api/h";
import { Message } from 'element-ui';
// import { fwsxbgbl } from "@api/common";
import hbj from "../hbj/lpb-hbj/index";
export default {
name: "",
components: { moveH, hbj, HCxlz, },
props: {
zrzbsm: {
type: String,
default: ''
},
lpbParent: {
type: String,
default: 'isLpb'
},
isHb: {
type: Boolean,
default: true
},
},
data () {
return {
moveHvisible: false,
lpbData: {
ljzs: [],
cs: [],
zdys: [],
},
hbjVisible: false,
hcxlzVisible: false,
lpbContentWidth: 0,
ljzWidth: 10000,
zdyWidth: 1000,
cHeight: 0, //独立层户的div高度
zdyHeight: 0, //独立幢单元的div高度
ljzcHeight: 0, //逻辑幢下层户的div高度
ljzzdyHeight: 0, //逻辑幢下幢单元的div高度
loading: true,
hbsm: '',
hbsmList: [],
hqsztList: [],
cbsmList: [],
time: null, //区分单双击事件的定时器
searchNum: Math.random(),
//接收父组件传入的根据单元状态/房屋性质/房屋用途筛选的户bsmList
choosedList: [],
borderColor: "#E6E6E6",
lpbChVisible: false, //层户右键菜单显隐
lpbChLeft: 100,
lpbChTop: 100,
//右键层户数据
chData: "",
rightClickFlag: "",
//层操作数据
addCVisible: false,
addCData: {
title: "",
cbsm: "", //层标识码
hcount: "", //添加户数
scyclx: "", //实测预测类型
sjc: "", //当前的层的SJC +1
},
formLabelWidth: "120px",
yclpbData: {},
sclpbData: {},
fghbChoosedList: [],
canHb: '',//判断合并类型
hfgDialogVisible: false, //户分割弹框
fgData: {
fghs: "",
oldbsm: '',
fgfx: 0
},
zrzChecked: false, //自然幢全选
};
},
created () { },
mounted () {
// this.getLpb(this.zrzbsm, "0");
// this.getLpb(this.zrzbsm, "1");
setTimeout(() => {
//让滚动条滚动至最下面 -6是横向滚动条的高度
this.$refs.lpbContent.scrollTop =
this.$refs.lpbContent.scrollHeight -
this.$refs.lpbContent.clientHeight -
6;
}, 200);
window.lpbContent = this;
},
methods: {
loadingData (zrzbsm, scyclx) {
this.getLpb(zrzbsm, scyclx, true);
},
//获取楼盘表数据
getLpb (zrzbsm, scyclx, actual) {
getLpb(zrzbsm, scyclx).then((res) => {
if (res.code == 200) {
this.$parent.lpbloading = false;
res.result.ljzs = res.result.ljzs
.sort(this.compare("place"))
.reverse();
// this.lpbData = res.result == null ? this.lpbData : res.result;
//给实预测楼盘表对象赋值，默认加载预测楼盘表数据
if (scyclx == 0) {
this.yclpbData = res.result == null ? this.yclpbData : res.result;
this.lpbData = this.yclpbData;
} else {
this.sclpbData = res.result == null ? this.sclpbData : res.result;
}
if (actual) {
this.lpbData = res.result == null ? this.yclpbData : res.result;
}
if (this.lpbParent == 'isFwsxbg') {
this.lpbData = this.$parent.scyclx == '0' ? this.yclpbData : this.sclpbData;
}
this.$nextTick(() => {
//渲染楼盘表
this.dataChange();
});
} else {
this.$message({
message: res.message,
type: "warning",
});
}
});
},
compare (property) {
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
};
},
//按照bdcdyh或shbw筛选户
lpbDataMap (sh) {
this.searchNum = sh;
if (this.hbsmList.length > 0) {
//清除之前选中户
this.clearChoosedH();
}
// console.log("查询searchNum" + searchNum);
},
//接收范围属性变更传入的hbsm
getFwsxbgHbsm (bsm) {
this.hbsmList.push(bsm);
},
//自然幢下元素高度宽度计算
dataChange () {
//计算逻辑幢宽度 20为marginRight值
this.ljzWidth = 0;
if (this.$refs.ljzzdy != undefined) {
this.$refs.ljzzdy.forEach((item) => {
this.ljzWidth += item.offsetWidth + 20;
});
if (this.$refs.ljzDlch != undefined) {
this.$refs.ljzDlch.forEach((item) => {
this.ljzWidth += item.offsetWidth;
});
}
} else {
if (this.$refs.ljzDlch != undefined) {
this.$refs.ljzDlch.forEach((item) => {
this.ljzWidth += item.offsetWidth + 20;
});
}
}
//计算独立幢单元和独立层户宽度
//考虑this.$refs.zdy的length为0的情况，即自然幢下没有独立幢单元
if (this.$refs.zdy != undefined && this.$refs.zdy.length > 0) {
//判断自然幢下有没有比层户高的幢单元
let higher = true;
//记录最高的幢单元高度 默认为第一个幢单元高度
let highest = this.$refs.zdy[0].offsetHeight;
this.zdyWidth = 20;
this.$refs.zdy.forEach((item) => {
this.zdyWidth += item.offsetWidth + 21;
this.cHeight =
item.offsetHeight > this.cHeight ? item.offsetHeight : this.cHeight;
highest = highest > item.offsetHeight ? highest : item.offsetHeight;
});
//判断有无独立层户
if (this.$refs.ch != undefined) {
//计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
higher = highest > this.$refs.ch.offsetHeight ? true : false;
this.zdyHeight = higher ? highest : this.$refs.ch.offsetHeight;
highest = 0;
this.zdyWidth += this.$refs.ch.offsetWidth;
} else {
this.zdyHeight = highest;
highest = 0;
}
} else {
//有且仅有独立层户
if (this.$refs.zrzDlch != undefined) {
this.zdyWidth = this.$refs.zrzDlch.offsetWidth + 20;
}
}
//计算逻辑幢下的幢单元和层户的高度
this.ljzzdyHeight = 0;
if (this.$refs.ljzzdy != undefined && this.$refs.ljzzdy.length > 0) {
//判断自然幢下有没有比层户高的幢单元
let higher = true;
let zrzhighest = 0;
//记录最高的幢单元高度 默认为第一个幢单元高度
zrzhighest = this.$refs.ljzzdy[0].offsetHeight;
this.$refs.ljzzdy.forEach((item) => {
this.ljzcHeight = item.offsetHeight > this.ljzcHeight ? item.offsetHeight : this.ljzcHeight;
zrzhighest = zrzhighest > item.offsetHeight ? zrzhighest : item.offsetHeight;
});
//判断有无独立层户
if (this.$refs.ljzch != undefined) {
//计算自然幢下的幢单元高度，如果有比层户高的幢单元，则幢单元高度设为最高的幢单元高度，如果没有，则设为层户高度
higher = zrzhighest > this.$refs.ljzch.offsetHeight ? true : false;
this.$nextTick(() => {
this.ljzzdyHeight = higher ? zrzhighest : this.$refs.ljzch.offsetHeight;
zrzhighest = 0;
});
} else {
this.$nextTick(() => {
this.ljzzdyHeight = zrzhighest;
zrzhighest = 0;
});
}
} else {
}
this.$nextTick(() => {
this.lpbContentWidth = this.zdyWidth > this.ljzWidth ? this.zdyWidth - 20 : this.ljzWidth - 20;
if (this.lpbContentWidth == 0) {
//his.lpbContentWidth = this.$refs.lpbContent.offsetWidth
}
})
},
//户单击事件
handleTdClick (e, bsm, hs) {
let self = this;
// 开启延时器，200ms的间隔区分单击和双击，解决双击时执行两次单击事件
clearTimeout(self.time);
self.time = setTimeout(() => {
this.closeMenu()
//判断点击的户是否选中
if (e.className.indexOf("tdSelect") == -1) {
//未选中→选中
e.className = "tdSelect"; //加边框
this.hbsmList.push(bsm); // 将户bsm放进hbsmList
this.hqsztList.push(hs.qszt); // 将户qszt放进hqsztList
switch (this.lpbParent) {
case 'isHbfg':
self.fghbChoosedList.push(hs);
break;
case 'isFwsxbg':
break;
case 'isCxlz':
break;
case 'isLpb':
this.$parent.getHbsm(this.hbsmList, false);
this.$parent.getQsztList(this.hqsztList, false);
break;
default:
break;
}
} else {
//选中→未选中
e.className = "";
this.hbsmList = this.hbsmList.filter(i => i != bsm);
this.hqsztList = this.hqsztList.filter(i => i != hs.qszt);
switch (this.lpbParent) {
case 'isHbfg':
self.fghbChoosedList = self.fghbChoosedList.filter(i => i != hs)
break;
case 'isFwsxbg':
break;
case 'isCxlz':
break;
case 'isLpb':
this.hbsmList = this.hbsmList.filter(i => i != bsm);
this.hqsztList = this.hqsztList.filter(i => i != hs.qszt);
this.$parent.getHbsm(this.hbsmList, false);
this.$parent.getQsztList(this.hqsztList, false);
break;
default:
break;
}
}
}, 200);
},
//户双击事件
dbclick (bsm) {
clearTimeout(this.time);
this.hbsm = bsm;
this.$store.state.hbsm = bsm;
this.hbjVisible = true;
this.$nextTick(function () {
this.$refs.hbj.$refs.hbj.getHInfo(this.hbsm);
});
// if (this.isHbfg) {
// }else{
// this.hbsmList.push(bsm); // 将户bsm放进hbsmList
// this.$parent.getHbsm(bsm, true);
// }
},
//删除多重数组中的某一项
deleteArrOption (arr, item) {
for (var i = arr.length; i > 0; i--) {
if (arr[i - 1] == item) {
arr.splice(i - 1, 1);
}
}
},
//清除选中户
clearChoosedH () {
// this.$nextTick(() => {
//将每个选中的户的选中状态清除
this.$refs.hBsm.forEach((item) => {
if (item.className == "tdSelect") {
item.className = "";
}
});
// 清空hbsmList
this.hbsmList = [];
this.hqsztList = [];
// });
},
//户右键点击事件
openMenu (e, item, type) {
this.lpbChLeft = e.pageX;
this.lpbChTop = e.pageY;
this.chData = item;
switch (this.lpbParent) {
case 'isHbfg':
this.rightClickFlag = this.isHb ? 'hb' : 'fg';
if (this.fghbChoosedList.length > 1) {
//合并
this.lpbChVisible = this.hbsmList.indexOf(this.chData.bsm) > -1 ? true : false;
//判断选中户可以执行的合并类型
let chIsSame = this.fghbChoosedList.every((item) => {
return item.ch == this.fghbChoosedList[0].ch;
});
let hhIsSame = this.fghbChoosedList.every((item) => {
return item.hh == this.fghbChoosedList[0].hh;
});
this.$nextTick(() => {
if (chIsSame) {
this.canHb = 'zyhb'
} else if (hhIsSame) {
this.canHb = 'sxhb'
} else {
this.canHb = ''
}
})
} else {
//分割
this.lpbChVisible = this.hbsmList.indexOf(this.chData.bsm) > -1 ? true : false;
this.fgData.oldbsm = item.bsm;
console.log(item, 'item');
//判断户的实际sjcs为1，只能水平分割
this.fgData.fgfx = item.sjcs == 1 ? 0 : 1;
if (item.sjcs == 1) {
//判断户的实际sjcs为1，只能水平分割
this.fgData.fgfx = 0;
this.fgData.fghs = '';
} else {
this.fgData.fgfx = 1;
//判断户的实际sjhs不为1，分割户数为sjhs的值
this.fgData.fghs = item.sjcs;
}
}
break;
case 'isFwsxbg':
if (this.hbsmList[0] == item.bsm) {
this.rightClickFlag = 'fwsxbg';
this.lpbChVisible = true;
} else {
this.lpbChVisible = false;
}
break;
case 'isCxlz':
this.rightClickFlag = 'cxlz';
this.lpbChVisible = this.hbsmList.indexOf(this.chData.bsm) > -1 ? true : false;
break;
case 'isLpb':
this.rightClickFlag = type;
this.lpbChVisible = true;
break;
default:
break;
}
},
// 户单元状态点击事件
hDyztClick (e, bsm, hs) {
this.handleTdClick(e.target.parentNode, bsm, hs);
},
dyztIconClick () {
},
// 层选中事件
handleClickC (e, item) {
if (this.lpbParent == 'isLpb') {
//判断点击的层是否选中
if (e.target.className.indexOf("tdSelect") == -1) {
//未选中→选中
e.target.className += " tdSelect"; //加边框
this.cbsmList.push(item.bsm);
} else {
//选中→未选中
e.target.className = "floor";
this.deleteArrOption(this.cbsmList, item.bsm);
}
this.$parent.getCbsm(this.cbsmList);
} else {
}
},
//关闭右键菜单
closeMenu () {
this.lpbChVisible = false;
},
//户右键菜单 start
handleAddH () { },
handleMoveH () {
// 移动户
console.log(this.chData, "chData");
console.log(this.$parent.scyclx, "实预测类型");
this.moveHvisible = true;
},
moveHClose () {
this.moveHvisible = false;
},
handleDeleteH () { },
handleSyczh () { },
//end
// 层右键菜单 start
//添加
handleAddC (type) {
this.addCData.title = type == "up" ? "向上添加层" : "向下添加层";
this.addCVisible = true;
this.addCData.sjc =
type == "up"
? Number(this.chData.sjc) + 1
: Number(this.chData.sjc) - 1;
this.addCData.cbsm = this.chData.bsm;
this.addCData.scyclx = this.$parent.scyclx;
},
//删除
handleDeleteC () {
let params = {
cbsm: this.chData.bsm,
scyclx: this.$parent.scyclx,
};
this.$confirm("是否确认删除该层?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deleteCByBsm(params).then((res) => {
if (res.code == 200) {
this.$message({
message: "删除成功",
type: "success",
});
this.getLpb(this.$store.state.zrzbsm, this.$parent.scyclx);
} else {
this.$message({
message: res.message,
type: "warning",
});
}
});
})
.catch(() => { });
},
//确认添加
saveAddC () {
insertUpDownC(this.addCData).then((res) => {
if (res.code == 200) {
this.$message({
message: "添加成功",
type: "success",
});
this.getLpb(this.$store.state.zrzbsm, this.$parent.scyclx);
this.addCVisible = false;
} else {
this.$message({
message: res.message,
type: "warning",
});
}
});
},
//户合并
handleHb (type) {
let olbBsms = '';
console.log(this.fghbChoosedList, 'fghbChoosedList');
this.hbsmList.forEach((item, index) => {
olbBsms += index < this.hbsmList.length - 1 ? item + ',' : item
})
if (type == this.canHb) {
this.$confirm("是否确认合并选中户?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
//确定合并 调用合并接口 this.hbsmList为选中户bsm数组 TO DO
let params = {
"newuserbsm": "",
"oldBsms": olbBsms,
"scyclx": this.$parent.scyclx,
"ljzbsm": this.fghbChoosedList[0].ljzbsm,
"zdybsm": this.fghbChoosedList[0].zdybsm,
"zrzbsm": this.fghbChoosedList[0].zrzbsm
}
vm.loadingShow('请求发送中');
// hhb(params).then((res) => {
// vm.loadingHide();
// if (res.code == 200) {
// Message.success('合并成功');
// // 清除选中户
// this.clearChoosedH();
// this.fghbChoosedList = [];
// // 更新楼盘表
// this.getLpb(this.zrzbsm, this.$parent.scyclx);
// } else {
// Message.error(res.message);
// }
// })
// .catch((error) => {
// vm.loadingHide();
// console.log(error);
// });
})
.catch(() => { });
} else {
}
},
//户分割
handleFg () {
this.hfgDialogVisible = true;
},
//户分割保存
savefgData () {
vm.loadingShow('请求发送中');
// hfg(this.fgData).then((res) => {
// vm.loadingHide();
// if (res.code == 200) {
// Message.success('分割成功');
// // 清除选中户
// this.hfgDialogVisible = false
// this.clearChoosedH();
// this.fghbChoosedList = [];
// // 更新楼盘表
// this.getLpb(this.zrzbsm, this.$parent.scyclx);
// } else {
// Message.error(res.message);
// }
// })
// .catch((error) => {
// vm.loadingHide();
// console.log(error);
// });
},
//范围属性变更
handleFwsxbg () {
let params = { bsm: this.chData.bsm, type: 'h' };
this.$confirm('是否确定范围属性变更?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// fwsxbgbl(params)
// .then((res) => {
// if (res.code == 200) {
// this.$message({
// message: '变更成功',
// type: "success",
// });
// this.getLpb(this.zrzbsm, this.scyclx);
// } else {
// this.$message({
// message: res.message,
// type: "warning",
// })
// }
// }).catch((error) => {
// });
}).catch(() => {
});
},
//户重新落宗
handleCxlz () {
if (this.hbsmList.indexOf(this.chData.bsm) == -1) {
this.hbsmList.push(this.chData.bsm);
}
this.hcxlzVisible = true
},
//楼盘表户全选
lpbSelectAll (val) {
if (val) {
this.$refs.hBsm.forEach((item) => {
item.className = "tdSelect";
this.hbsmList.push(item.dataset.bsm); // 将户bsm放进hbsmList
this.hqsztList.push(item.dataset.qszt)
});
} else {
this.$refs.hBsm.forEach((item) => {
item.className = "";
this.hbsmList = [];
this.hqsztList = [];
});
}
this.$nextTick(() => {
this.$parent.getHbsm(this.hbsmList, false);
this.$parent.getQsztList(this.hqsztList, false);
})
},
//幢单元全选
zdySelectAll (val, cs) {
let zdyHbsmList = [];
let zdyHqsztList = [];
cs.forEach(i => {
i.hs.forEach(j => {
zdyHbsmList.push(j.bsm)
zdyHqsztList.push(j.qszt)
})
});
if (val) {
this.$nextTick(() => {
this.$refs.hBsm.forEach((item) => {
if (zdyHbsmList.indexOf(item.dataset.bsm) > -1) {
item.className = "tdSelect";
}
});
this.hbsmList = this.hbsmList.concat(zdyHbsmList);
this.hqsztList = this.hqsztList.concat(zdyHqsztList);
})
} else {
this.$refs.hBsm.forEach((item) => {
console.log(item.dataset.bsm);
if (zdyHbsmList.indexOf(item.dataset.bsm) > -1) {
item.className = "";
}
zdyHbsmList.forEach(j => {
if (item.dataset.bsm == j) {
this.hbsmList = this.hbsmList.filter(i => i != j)
}
})
zdyHqsztList.forEach(j => {
if (item.dataset.qszt == j) {
this.hqsztList = this.hqsztList.filter(i => i != j)
}
})
});
}
this.$nextTick(() => {
this.$parent.getHbsm(this.hbsmList, false);
this.$parent.getQsztList(this.hqsztList, false);
})
},
//逻辑幢、幢单元、层双击
openZxx (bsm, type) {
if (this.lpbParent == 'isLpb') {
this.$parent.taskTitle = '编辑';
this.$parent.dialogVisible = true;
this.$parent.curBsm = bsm;
this.$parent.menuType = type;
}
}
},
computed: {
createFlagChange () {
return this.$parent.createFlag;
},
legendToggleFlagChange () {
return this.$parent.legendToggleFlag;
},
scyclx () {
return this.$parent.scyclx;
},
},
watch: {
scyclx (n) {
this.hqsztList = [];
// this.getLpb(this.$store.state.zrzbsm, n);
if (n == '0') {
this.lpbData = this.yclpbData;
} else {
this.lpbData = this.sclpbData;
}
},
//监听有无通过输入框查询选择到的户,如果有，将其bsm放入hbsmList
searchNum (n) {
// 渲染查询到的户
this.$nextTick(() => {
this.$refs.hBsm.forEach((item) => {
if (item.className == "tdSelect") {
// console.log(item.offsetLeft,'offsetLeft');
// console.log(item.offsetTop,'offsetHeight');
//定位到最后一个户所在位置
this.$refs.lpbContent.scrollTop = item.offsetTop;
this.$refs.lpbContent.scrollLeft = item.offsetLeft;
console.log(item.dataset.bsm, "item.dataset.bsm");
// 判断hbsmList中是否已经存在
if (this.hbsmList.indexOf(item.dataset.bsm) == -1) {
this.hbsmList.push(item.dataset.bsm);
this.hqsztList.push(item.dataset.qszt);
}
}
});
});
},
//父组件中选择单元状态改变选中户的边框颜色
choosedList (n) {
if (n.length > 0) {
this.$refs.hBsm.forEach((item) => {
this.choosedList.forEach((i, ind) => {
if (item.dataset.bsm == i) {
if (ind == 0) {
//定位到第一个户所在位置
this.$refs.lpbContent.scrollTop = item.offsetTop;
this.$refs.lpbContent.scrollLeft = item.offsetLeft;
}
item.style.border = '1px solid ' + this.borderColor;
item.className = "tdSelect"
}
});
});
}
},
lpbChVisible (value) {
if (value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
},
},
};
</script>
<style scoped lang="scss">
.lpbContent-wrap {
width: 100%;
height: 100%;
overflow: hidden;
.lpbContent {
width: 100%;
height: 100%;
position: relative;
overflow: scroll;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.ljz-wrap {
height: auto;
overflow: hidden;
.ljz {
// margin-bottom: 20px;
display: table;
margin-top: 30px;
// position: relative;
.ljz-zdy-wrap {
width: auto;
display: table;
float: left;
.ljz-zdy {
height: auto;
float: left;
position: relative;
table {
bottom: 40px;
}
.zdy-name {
width: 100%;
bottom: 0;
position: absolute;
height: 40px;
// background-color: rosybrown;
// border:1px solid #E6E6E6
}
// .chTable-wrap{
// position: absolute;
// bottom: 40px;
// }
}
}
div:last-child {
margin-right: 0;
}
.ljz-ch {
float: left;
}
.ljz-zdy:last-child {
margin-right: 0;
}
.column-reverse {
display: flex;
flex-direction: column-reverse;
}
// }
.ljz-name {
width: calc(100% - 32px);
height: 40px;
// background-color: darkorange;
}
}
.mt30 {
margin-top: 30px;
}
.mt60 {
margin-top: 60px;
}
div:last-child {
margin-right: 0;
}
}
.zdy-wrap {
height: auto;
overflow: hidden;
// margin-top: 30px;
.zdy {
float: left;
margin-right: 20px;
.zdy-zdy-wrap {
.zdy-zdy {
height: auto;
margin-right: 20px;
display: inline-table;
.zdy-name {
bottom: 0;
// background-color: blanchedalmond;
// border:1px solid #E6E6E6
}
}
.zdy-zdy:last-child {
margin-right: 0;
}
}
.zdy-name {
width: calc;
height: 40px;
// background-color: rosybrown;
border: 1px solid #E6E6E6
}
}
.column-reverse {
display: flex;
flex-direction: column-reverse;
}
}
// 公共部分样式 start
.chTable {
// position: relative;
tr {
.floor {
background-color: #fff;
}
td {
min-width: 138px;
height: 72px;
line-height: 72px;
text-align: center;
cursor: pointer;
position: relative;
.hqszt {
display: inline-block;
width: 16px;
height: 16px;
font-size: 12px;
line-height: 16px;
position: absolute;
left: 6px;
top: 6px;
border: 1px solid;
border-radius: 8px;
}
.lin {
color: #F7B500;
border-color: #F7B500;
}
.zheng {
color: #1AD6E1;
border-color: #1AD6E1;
}
.xian {
color: #45AEFD;
border-color: #45AEFD;
}
.dyzt {
user-select: none;
width: 138px;
height: 18px;
position: absolute;
// background: orange;
bottom: 32px;
box-sizing: border-box;
padding: 0 6px;
li {
display: inline-block;
width: 18px;
height: 18px;
font-size: 12px;
line-height: 18px;
color: #ffffff;
border: 1px solid;
border-radius: 9px;
}
}
}
.tdSelect {
border: 1px solid #006cff !important;
background-image: url("./images/tdSelect.png");
background-repeat: no-repeat;
background-position: right top;
background-size: 30px;
}
.hasBorder {
border-width: 1px;
border-style: solid;
}
}
}
.name {
line-height: 40px;
text-align: center;
display: table-footer-group;
p {
width: calc(100% - 2px);
height: 100%;
border: 1px solid #E6E6E6;
}
}
// end
}
.column-reverse {
display: flex;
flex-direction: column-reverse;
}
.zrz {
height: 60px;
line-height: 60px;
background-color: #ffffff;
border: 1px solid #E6E6E6;
// position: relative;
// bottom: 66px;
text-align: center;
transition: 0.5s;
}
.cantHb {
opacity: .5;
cursor: not-allowed;
}
.btnGroup {
margin: 20px auto 0;
width: 150px;
}
.el-checkbox {
font-size: 16px;
/deep/.el-checkbox__label {
font-size: 16px;
}
/deep/ .el-checkbox__inner {
width: 16px;
height: 16px;
}
/deep/ .el-checkbox__inner::after {
height: 9px;
left: 4px;
top: 0px;
width: 5px;
}
/deep/ .el-checkbox__input {
top: 1px;
}
}
.hbjDialog {
/deep/.el-dialog {
margin-top: 10vh !important;
}
}
}
</style>
<template>
<div class="zdy-content">
<el-form :model="form" :rules="rules" ref="form" label-width="110px" size="small">
<table border="1" width="100%" cellspacing="0" cellpadding="0" class="hTable">
<tbody>
<tr height="30">
<td colspan="12" align="center">
<font size="4">幢单元基本信息</font>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">幢单元号</td>
<td colspan="4">
<el-input v-model="form.zdyh"></el-input>
</td>
<td colspan="2" align="center" class="tdright"><i class="requisite">*</i>幢单元名称</td>
<td colspan="4">
<el-input v-model="form.zdymc" ref="zdymc"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">地上层数</td>
<td colspan="4">
<el-input v-model="form.dscs"></el-input>
</td>
<td colspan="2" align="center" class="tdright">地下层数</td>
<td colspan="4">
<el-input v-model="form.dxcs"></el-input>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" class="tdright">总层数</td>
<td colspan="4">
<el-input v-model="form.zcs"></el-input>
</td>
<td colspan="2" align="center" class="tdright">备注</td>
<td colspan="4">
<el-input v-model="form.bz"></el-input>
</td>
</tr>
</tbody>
</table>
</el-form>
</div>
</template>
<script>
// import { insertZdyInfo } from "@api/lpb"
// import { getQjZdyDetailById, updateQjZdy } from "@api/zdy"
export default {
name: "index",
components: {},
props: {
zdybsm: {
type: String,
default: '',
}
},
data () {
return {
form: {
zdyh: '',
zdymc: '',
dscs: '',
dxcs: '',
zcs: '',
bz: '',
},
rules: {
zdyh: [
{ required: true, message: '幢单元号不能为空', trigger: 'blur' },
{ min: 5, max: 50, message: '长度最少 5 个字符', trigger: 'blur' }
],
zdymc: [
{ required: true, message: '名称不能为空', trigger: 'change' }
],
dscs: [
{ required: true, message: '地上层数不能为空', trigger: 'blur' },
{ type: 'number', message: '必须是数字', trigger: 'blur' }
],
dxcs: [
{ required: true, message: '地下层数不能为空', trigger: 'blur' },
{ type: 'number', message: '必须是数字' }
],
zcs: [
{ required: true, message: '名称不能为空', trigger: 'change' }
]
}
}
},
methods: {
//在自然幢节点上添加幢单元只需传zrzbsm，ljzbsm为'';在逻辑幢上添加幢单元时需要同时传入zrzbsm和ljzbsm
submitForm (formName, zrzbsm, ljzbsm) {
this.form.zrzbsm = zrzbsm;
this.form.ljzbsm = zrzbsm == ljzbsm ? '' : ljzbsm;
if (this.form.zdymc == '') {
this.$message.warning("请完善表单后再继续操作");
this.$refs.zdymc.$el.style.border = '1px solid red';
} else {
//判断zdybsm是否为空，不为空的时候是编辑，为空的时候是新增
if (this.zdybsm == '') {
this.$refs[formName].validate((valid) => {
if (valid) {
// insertZdyInfo(this.form).then((res) => {
// if (res.code === 200) {
// this.$message.success("保存成功!")
// //更新树结构数据
// this.$parent.$parent.getLpbMenuTree(zrzbsm);
// //关闭弹框
// this.$parent.$parent.closeDaialog()
// }
// return true;
// })
} else {
console.log('error submit!!');
return false;
}
});
} else {
//编辑幢单元接口
updateQjZdy(this.form).then((res) => {
if (res.code === 200) {
this.$message.success("保存成功")
}
})
}
}
},
getZdyInfo (bsm) {
//查询幢单元信息接口
getQjZdyDetailById(bsm).then((res) => {
if (res.code === 200) {
this.form = res.result;
}
})
},
reset () {
this.form = {
zdyh: '',
zdymc: '',
dscs: '',
dxcs: '',
zcs: '',
bz: '',
}
}
},
watch: {
zdybsm: {
handler: function (item) {
if (item != '' && this.$parent.$parent.menuType == 'zdy') {
this.getZdyInfo(item)
}
},
immediate: true
},
"form.zdymc": {
handler: function (item) {
if (item != '') {
this.$refs.zdymc.$el.style.border = '';
}
},
immediate: true
},
}
}
</script>
<style scoped lang="scss">
/deep/.el-input__inner {
width: 100%;
border: 0;
}
table {
background: #fff;
table-layout: fixed;
}
</style>
\ No newline at end of file
......@@ -116,7 +116,7 @@ export default {
processZoomOut (zoomStep = 0.1) {
const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100
if (newZoom < 0.2) {
throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
throw new Error('[Process Designer Warn ]: The zoom ratio cannot be scss than 0.2')
}
this.defaultZoom = newZoom
this.bpmnViewer.get('canvas').zoom(this.defaultZoom)
......
......@@ -21,7 +21,7 @@
<div class="containerFrame">
<!-- 左侧菜单栏 -->
<div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }">
<div class="title" @click="unitClick(-1)" v-if="showBatch">{{batchButtonName}}</div>
<div class="title" @click="unitClick(-1)" v-if="showBatch">{{ batchButtonName }}</div>
<div v-if="this.isShowdrawer">
<div class="title">
申请单元列表({{ unitData.length }})
......@@ -162,7 +162,7 @@ export default {
.then(() => {
var formdata = new FormData();
formdata.append("bsmSldyList", item.bsmSldy.split(","));
formdata.append("bsmSlsq",this.bsmSlsq);
formdata.append("bsmSlsq", this.bsmSlsq);
deleteFlow(formdata).then((res) => {
if (res.code == 200) {
this.$message.success("删除成功");
......@@ -235,10 +235,7 @@ export default {
case "B1":
getWorkFlowImage(this.bsmSlsq, this.$route.query.bestepid).then(res => {
let { result } = res
this.$popup({
title: "流程图",
height: '500px',
editItem: "workflow/components/processViewer",
this.$popup("流程图", "workflow/components/processViewer", {
formData: {
xml: result.xml,
finishedInfo: {
......@@ -384,15 +381,15 @@ export default {
}).then(function () {
record(formdata).then((res) => {
if (res.code === 200) {
if(res.result.length===1){
res.result[0].state? that.$alert("登簿成功！"): that.$alert(res.result[0].msg);;
if (res.result.length === 1) {
res.result[0].state ? that.$alert("登簿成功！") : that.$alert(res.result[0].msg);;
}
else{
that.$alert('<div>'+res.result[0].ywh+','+res.result[0].msg+'</div>', '登簿明细', {
else {
that.$alert('<div>' + res.result[0].ywh + ',' + res.result[0].msg + '</div>', '登簿明细', {
dangerouslyUseHTMLString: true
});
}
}else{
} else {
that.$alert(res.message);
}
});
......@@ -407,14 +404,14 @@ export default {
formdata.append("bestepid", this.bestepid);
leftMenu(formdata).then((res) => {
if (res.code === 200) {
if(res.result){
if (res.result) {
this.unitData = res.result;
this.currentSelectProps = res.result[0];
this.judgeBatchShow();
if(this.showBatch){
if (this.showBatch) {
//满足批量查封/批量抵押按钮出现 即先展示批量表单
this.unitClick(-1);
}else{
} else {
//默认选择单元列表第一个
this.unitClick(0);
}
......@@ -425,10 +422,10 @@ export default {
//申请单元点击事件
unitClick (index) {
if(index >= 0){
if (index >= 0) {
this.currentSelectProps = this.unitData[index];
this.currentSelectProps.batchOperation = false;
}else{
} else {
this.currentSelectProps.batchOperation = true;
}
getStepFormInfo(this.currentSelectProps).then((res) => {
......@@ -455,11 +452,11 @@ export default {
// }
},
//批量按钮判断
judgeBatchShow() {
judgeBatchShow () {
this.showBatch = false;
let qllx = this.$route.query.sqywbm.substring(0,3);
if(this.unitData.length > 1){
switch(qllx){
let qllx = this.$route.query.sqywbm.substring(0, 3);
if (this.unitData.length > 1) {
switch (qllx) {
case 'B39':
this.showBatch = true;
this.batchButtonName = '批量查封';
......@@ -516,7 +513,7 @@ export default {
window.close();
this.$emit("input", false);
}, 1000);
}else{
} else {
instance.confirmButtonLoading = false;
instance.confirmButtonText = "确定";
this.$message.error(res.message);
......
......@@ -6,8 +6,7 @@
<el-row>
<el-col :span="5">
<el-form-item label="业务来源">
<el-select v-model="queryForm.ywly" class="width100" @change="queryClick()" filterable clearable
placeholder="请选择业务来源">
<el-select v-model="queryForm.ywly" class="width100" filterable clearable placeholder="请选择业务来源">
<el-option v-for="item in dictData['ywly']" :key="item.dcode" :label="item.dname" :value="item.dcode">
</el-option>
</el-select>
......@@ -15,8 +14,7 @@
</el-col>
<el-col :span="5">
<el-form-item label="权利类型">
<el-select v-model="queryForm.qllx" class="width100" @change="queryClick()" filterable clearable
placeholder="请选择权利类型">
<el-select v-model="queryForm.qllx" class="width100" filterable clearable placeholder="请选择权利类型">
<el-option v-for="item in dictData['A8']" :key="item.dcode" :label="item.dname" :value="item.dcode">
</el-option>
</el-select>
......@@ -24,8 +22,7 @@
</el-col>
<el-col :span="5">
<el-form-item label="登记类型">
<el-select v-model="queryForm.djlx" class="width100" @change="queryClick()" filterable clearable
placeholder="请选择登记类型">
<el-select v-model="queryForm.djlx" class="width100" filterable clearable placeholder="请选择登记类型">
<el-option v-for="item in dictData['A21']" :key="item.dcode" :label="item.dname" :value="item.dcode">
</el-option>
</el-select>
......@@ -33,15 +30,15 @@
</el-col>
<el-col :span="5">
<el-form-item label="业务号">
<el-input placeholder="请输入业务号" v-model="queryForm.ywh" @clear="queryClick()" clearable class="width100">
<el-input placeholder="请输入业务号" v-model="queryForm.ywh" @clear="queryClick" clearable class="width100">
</el-input>
</el-form-item>
</el-col>
<el-col :span="4" class="btnColRight">
<el-form-item>
<el-button type="primary" native-type="submit" @click="queryClick()">查询</el-button>
<el-button @click="moreQueryClick()">高级查询</el-button>
<el-button type="primary" native-type="submit" @click="queryClick">查询</el-button>
<el-button @click="moreQueryClick">高级查询</el-button>
</el-form-item>
</el-col>
</el-row>
......@@ -58,7 +55,7 @@
</el-row>
</el-form>
</div>
<div class="from-clues-content">
<div class="from-clues-content" id="dbx">
<lb-table :page-size="pageData.size" border @sort-change="handleSort" :current-page.sync="pageData.currentPage"
:heightNum="300" :total="tableData.total" @size-change="handleSizeChange"
@p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
......@@ -117,7 +114,7 @@ export default {
},
// 列表渲染接口
fetchData () {
searchTaskToDo({ ...this.queryForm, ...this.pageData }).then(res => {
searchTaskToDo({ ...this.queryForm, ...this.pageData }, { 'target': '#dbx' }).then(res => {
if (res.code === 200) {
let { total, records } = res.result
records.forEach(item => {
......@@ -136,7 +133,6 @@ export default {
queryClick () {
this.fetchData()
},
handelItem (index) {
console.log(index);
this.searchList.splice(index, 1)
......
<template>
<div class="from-clues">
<div class="from-clues" id="bdcql">
<!-- 表单部分 -->
<div class="from-clues-header">
<el-form :model="queryForm" ref="queryForm" label-width="100px">
......@@ -87,7 +87,7 @@ export default {
},
fetchData () {
this.queryForm.sqywbm = this.djywbm;
selectQlxx({ ...this.queryForm, ...this.pageData })
selectQlxx({ ...this.queryForm, ...this.pageData }, { 'target': '#bdcql' })
.then((res) => {
if (res.code === 200) {
let { total, records } = res.result;
......
<template>
<div class="ywsq">
<div class="ywsq" id="ywsq">
<div class="ywsq-left">
<p v-for="(item, index) in leftList" @click="handleleftTitle(index)" :key="index"
:class="{ 'active': n == index }">{{ item }}</p>
......@@ -98,7 +98,7 @@ export default {
},
methods: {
getDataList () {
getCollectBiz().then(res => {
getCollectBiz({ 'target': '#ywsq' }).then(res => {
let { result } = res
this.ywList = result
this.ywList.forEach(item => {
......@@ -145,7 +145,7 @@ export default {
},
// 获取下个节点类型
getNextNode (bsmSqyw, type) {
getNextNode(bsmSqyw).then(res => {
getNextNode(bsmSqyw, { 'target': '#ywsq' }).then(res => {
if (res.result.djqx) this.djqxList = res.result.djqx
if (res.result.djlx) this.djlxList = res.result.djlx
if (type) {
......
......@@ -82,7 +82,7 @@ module.exports = {
}
])
// when there are many pages, it will cause too many meaningless requests
// when there are many pages, it will cause too many meaningscss requests
config.plugins.delete('prefetch')
config.module
.rule('svg')
......