权利性质组件表单样式修改

@@ -5,20 +5,25 @@
 			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':''">
+			<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"
+						v-show="childIndex < 1"
 						type="primary"
 						class="changeBtn"
-						@click="handleClick( index, 'add')"
+						@click="handleClick(index, 'add')"
 						>+</el-button
 					>
 					<el-button
-						v-show="childIndex<1"
+						v-show="childIndex < 1"
 						type="primary"
 						class="changeBtn"
-						@click="handleClick( index, 'minus')"
+						@click="handleClick(index, 'minus')"
 						>-</el-button
 					>
 					<div
@@ -26,60 +31,73 @@
 						v-if="items.isInside"
 					></div>
 				</el-col>
-				<el-col :span="2" class="btnCol" :key="childIndex+'8'" :class="childIndex>0 ? 'childYT':''">
+				<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"
-							@click="handleInClick(index, childIndex, 'add')"
-							>+</el-button
-						>
-						<el-button
-							type="primary"
-							class="changeBtn"
-							@click="handleInClick(index, childIndex, 'minus')"
-							>-</el-button
-						>
-					 <!-- </template> -->
+					<span class="qlxz" v-show="childIndex < 1">权利性质</span><br />
+					<el-button
+						type="primary"
+						class="changeBtn"
+						@click="handleInClick(index, childIndex, 'add')"
+						>+</el-button
+					>
+					<el-button
+						type="primary"
+						class="changeBtn"
+						@click="handleInClick(index, childIndex, 'minus')"
+						>-</el-button
+					>
+					<!-- </template> -->
 				</el-col>
-				<el-col :span="3" :key="childIndex+'7'" :class="childIndex>0 ? 'childYT':''">
+				<el-col
+					:span="3"
+					:key="childIndex + '7'"
+					:class="childIndex > 0 ? 'childYT' : ''"
+				>
 					<ul>
 						<li>批准用途</li>
 						<li>实际用途</li>
 						<li>土地使用起始时间<i class="requisite">*</i></li>
 					</ul>
 				</el-col>
-				<el-col :span="4" :key="childIndex+'6'" :class="childIndex>0 ? 'childYT':''">
+				<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"
-									:multiple="multiple"
-									:placeholder="placeholder"
-									:disabled="disabled"
-									:data="$store.state.tdytList"
-									:props="treeProps"
-									:check-strictly="checkStrictly"
-									:clearable="clearable"
-									v-model="childItem.pzytdm"
+								class="formSelect percent30"
+								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
-									class="formSelect percent30"
-									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"
+								class="formSelect percent30"
+								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>
@@ -93,37 +111,72 @@
 						</li>
 					</ul>
 				</el-col>
-				<el-col :span="3" :key="childIndex+'5'" :class="childIndex>0 ? 'childYT':''">
+				<el-col
+					:span="3"
+					:key="childIndex + '5'"
+					:class="childIndex > 0 ? 'childYT' : ''"
+				>
 					<ul>
 						<li>地类编码</li>
 						<li>地类编码</li>
 						<li>年限<i class="requisite">*</i></li>
 					</ul>
 				</el-col>
-				<el-col :span="3" :key="childIndex+'4'" :class="childIndex>0 ? 'childYT':''">
+				<el-col
+					:span="3"
+					:key="childIndex + '4'"
+					:class="childIndex > 0 ? 'childYT' : ''"
+				>
 					<ul>
 						<li>
-							<input type="text" placeholder="请输入" v-model="childItem.pzytdm" class="formInput" />
+							<input
+								type="text"
+								placeholder="请输入"
+								v-model="childItem.pzytdm"
+								class="formInput"
+							/>
 						</li>
 						<li>
-							<input type="text" placeholder="请输入" v-model="childItem.sjytdm" class="formInput" />
+							<input
+								type="text"
+								placeholder="请输入"
+								v-model="childItem.sjytdm"
+								class="formInput"
+							/>
 						</li>
 						<li>
-							<input type="text" placeholder="请输入" v-model="childItem.syqx " class="formInput" />
+							<input
+								type="text"
+								placeholder="请输入"
+								v-model="childItem.syqx"
+								class="formInput"
+							/>
 						</li>
 					</ul>
 				</el-col>
-				<el-col :span="3" :key="childIndex+'2'" :class="childIndex>0 ? 'childYT':''">
+				<el-col
+					: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 ':''">
+				<el-col
+					:span="4"
+					:key="childIndex + '3'"
+					class="noRightBorder"
+					:class="childIndex > 0 ? 'childYT ' : ''"
+				>
 					<ul>
 						<li>
-							<el-select class="formSelect percent30" v-model="childItem.pzdjbsm">
+							<el-select
+								class="formSelect percent30"
+								v-model="childItem.pzdjbsm"
+							>
 								<el-option
 									v-for="item in $store.state.tddjList"
 									:key="item.bsm"
@@ -134,7 +187,10 @@
 							</el-select>
 						</li>
 						<li>
-							<el-select class="formSelect percent30" v-model="childItem.sjdjbsm">
+							<el-select
+								class="formSelect percent30"
+								v-model="childItem.sjdjbsm"
+							>
 								<el-option
 									v-for="item in $store.state.tddjList"
 									:key="item.bsm"
@@ -156,19 +212,19 @@
 					</ul>
 				</el-col>
 			</template>
-			
+
 			<div class="title">
 				<el-select-tree
-						v-if="show"
-						:default-expand-all="defaultExpandAll"
-						:multiple="multiple"
-						:placeholder="placeholder"
-						:disabled="disabled"
-						:data="$store.state.qlxzList"
-						:props="treeProps"
-						:check-strictly="checkStrictly"
-						:clearable="clearable"
-						v-model="items.qlxzdm"
+					v-if="show"
+					:default-expand-all="defaultExpandAll"
+					:multiple="multiple"
+					:placeholder="placeholder"
+					:disabled="disabled"
+					:data="$store.state.qlxzList"
+					:props="treeProps"
+					:check-strictly="checkStrictly"
+					:clearable="clearable"
+					v-model="items.qlxzdm"
 				></el-select-tree>
 			</div>
 		</el-row>
@@ -187,17 +243,17 @@ export default {
 	data() {
 		return {
 			//树型结构
-			show:true,
+			show: true,
 			clearable: true,
 			defaultExpandAll: true,
 			multiple: false,
-			placeholder: '请选择',
+			placeholder: "请选择",
 			disabled: false,
 			checkStrictly: true,
 			treeProps: {
-				value: 'dm',
-				children: 'children',
-				label: 'mc'
+				value: "dm",
+				children: "children",
+				label: "mc",
 			},
 
 			countList: [
@@ -205,97 +261,96 @@ export default {
 					id: Math.random(),
 					isInside: false,
 					hasNotBorder: false,
-					"bsm": "",//权利性质标识码 
-					"glbsm": "",//宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM 
-					"qlxzdm": "",
-					"zhqlxzlx": "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
-					list:[
+					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": ""
-						}
-					]
+							pzdjbsm: "",
+							pzdjmc: "",
+							pzytdm: "",
+							pzytmc: "",
+							pzytmj: 0,
+							qlxzbsm: "",
+							sjdjbsm: "",
+							sjdjmc: "",
+							sjytdm: "",
+							sjytmc: "",
+							sjytmj: 0,
+							syqx: "",
+							tdsyjssj: "",
+							tdsyqssj: "",
+							tdzh: "",
+						},
+					],
 				},
 			],
-			outNum:0
+			outNum: 0,
 		};
 	},
-	created(){
-	},
+	created() {},
 	methods: {
 		//外层操作
-		handleClick( ind, type) {
+		handleClick(ind, type) {
 			let outsideObj = {
 				id: Math.random(),
 				isInside: false,
 				hasNotBorder: false,
-				"bsm": "",//权利性质标识码 
-				"glbsm": "",//宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM 
-				"qlxzdm": "",
-				"zhqlxzlx": "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
-				list:[
+				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": ""
-					}
-				]
+						pzdjbsm: "",
+						pzdjmc: "",
+						pzytdm: "",
+						pzytmc: "",
+						pzytmj: 0,
+						qlxzbsm: "",
+						sjdjbsm: "",
+						sjdjmc: "",
+						sjytdm: "",
+						sjytmc: "",
+						sjytmj: 0,
+						syqx: "",
+						tdsyjssj: "",
+						tdsyqssj: "",
+						tdzh: "",
+					},
+				],
 			};
 			if (type === "add") {
 				this.countList.push(outsideObj);
-				this.outNum++
+				this.outNum++;
 			} else {
 				this.countList.forEach((item, index) => {
 					if (index == ind && this.countList.length > 1) {
 						this.countList.splice(index, 1);
 					}
 				});
-				this.outNum--
+				this.outNum--;
 			}
 		},
 		//内层操作
 		handleInClick(index, childIndex, type) {
 			let insideObj = {
-							"pzdjbsm": "",
-							"pzdjmc": "",
-							"pzytdm": "",
-							"pzytmc": "",
-							"pzytmj": 0,
-							"qlxzbsm": "",
-							"sjdjbsm": "",
-							"sjdjmc": "",
-							"sjytdm": "",
-							"sjytmc": "",
-							"sjytmj": 0,
-							"syqx": "",
-							"tdsyjssj": "",
-							"tdsyqssj": "",
-							"tdzh": ""
+				pzdjbsm: "",
+				pzdjmc: "",
+				pzytdm: "",
+				pzytmc: "",
+				pzytmj: 0,
+				qlxzbsm: "",
+				sjdjbsm: "",
+				sjdjmc: "",
+				sjytdm: "",
+				sjytmc: "",
+				sjytmj: 0,
+				syqx: "",
+				tdsyjssj: "",
+				tdsyqssj: "",
+				tdzh: "",
 			};
 			if (type === "add") {
 				this.countList[index].list.splice(childIndex + 1, 0, insideObj);
@@ -314,7 +369,8 @@ export default {
 				if (index == this.countList.length - 1) {
 					item.hasNotBorder = true;
 				} else {
-					item.hasNotBorder = item.isInside && !this.countList[index + 1].isInside ? true : false;
+					item.hasNotBorder =
+						item.isInside && !this.countList[index + 1].isInside ? true : false;
 				}
 			});
 		},
@@ -344,13 +400,17 @@ export default {
 					height: 37px;
 					line-height: 37px;
 					text-decoration: none;
-					border-bottom: 1px solid #E6E6E6;
-					.el-select{
+					border-bottom: 1px solid #e6e6e6;
+					.el-select {
 						width: 100%;
 					}
-					.el-input{
+					.el-input {
 						width: 100%;
 					}
+					input {
+						position: relative;
+						top: -2px;
+					}
 					.el-input__inner {
 						height: 34px;
 					}
@@ -371,12 +431,12 @@ export default {
 				bottom: 2px;
 			}
 		}
-		.childYT{
+		.childYT {
 			height: 114px;
 			border-top: 1px solid grey;
 			ul {
 				margin-top: 0;
-				li{
+				li {
 					.el-input__inner {
 						height: 29px;
 					}
@@ -389,10 +449,10 @@ export default {
 				margin-top: 4px;
 			}
 		}
-		.noTopBorder{
+		.noTopBorder {
 			border-top: 0;
 		}
-		.noRightBorder{
+		.noRightBorder {
 			border-right: 0;
 		}
 		.el-col:nth-last-child(2) {
@@ -438,5 +498,11 @@ export default {
 	.el-row:nth-last-child(1) {
 		border-bottom: none;
 	}
+	/deep/.el-select-tree{
+		width: 100%;
+		.el-input__inner{
+			height: 30px !important;
+		}
+	}
 }
 </style>