Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
522aac94 by weimo934
Options

feat(plsh):批量室号组件

1 parent 76de1151
Inline Side-by-side
Showing 2 changed files with 231 additions and 2 deletions
......@@ -223,8 +223,7 @@
},
cancel: function () {
this.$emit('close')
this.isVisible = false
this.close()
}
},
mounted() {
......
<template>
<div class="main">
<el-dialog
title="新增"
:visible.sync="isVisible"
width="70%"
@close="close"
:modal-append-to-body="false"
center>
<div>
<el-checkbox>层号自动补0</el-checkbox>
<el-checkbox>层号之前增加分割符</el-checkbox>
<el-checkbox>室号之前增加分割符</el-checkbox>
<span class="xl" @click="xl">祥例</span>
<table border="1">
<tr>
<td rowspan="2" @click="addRow">+</td>
<td rowspan="2">序号</td>
<td rowspan="2">单元名称</td>
<td rowspan="2">起始层</td>
<td rowspan="2">结束层</td>
<td rowspan="2">每层户数</td>
<td colspan="6" class="gz">
室号规则：[单元号][分割符A][层号][分割符A][室号前缀][室号][室号后缀]
</td>
</tr>
<tr>
<td>单元号</td>
<td>层号</td>
<td>室号前缀</td>
<td>分割符</td>
<td>起始室号</td>
<td>室号后缀</td>
</tr>
<tr v-for="item in 10" :key="item">
<td @click="delRow(item)">-</td>
<td>{{item}}</td>
<td>
<el-select>
<el-option
v-for="i in cs"
:key="i"
:label="i"
:value="i"
></el-option>
</el-select>
</td>
<td>
<el-select>
<el-option
v-for="i in cs"
:key="i"
:label="i"
:value="i"
></el-option>
</el-select>
</td>
<td>
<el-select>
<el-option
v-for="i in cs"
:key="i"
:label="i"
:value="i"
></el-option>
</el-select>
</td>
<td>
<input type="text" class="inputtitle"/>
</td>
<td>
<input type="text" class="inputtitle"/>
</td>
<td>
<input type="text" class="inputtitle"/>
</td>
<td>
<input type="text" class="inputtitle"/>
</td>
<td>
<input type="text" class="inputtitle"/>
</td>
<td>
<input type="text" class="inputtitle"/>
</td>
<td>
<input type="text" class="inputtitle"/>
</td>
</tr>
</table>
</div>
<div>
<el-dialog
title="祥例"
:visible.sync="xlVisible"
width="50%"
:modal-append-to-body="false"
>
<div class="xlgz">
<span>
样例1：10101 <span>（1单元01层01室）</span>([单元号][层号]，勾选“层号自动补0”)
<br/>
样例2：11301室<span>（1单元13层01室）</span>([单元号][层号][室号后缀])
<br/>
样例3：101<span>(1层01室)</span>([层号])
<br/>
样例4：1-101<span>(1单元-01层01室)</span>([单元号][层号][分隔符]，勾选“层号之前增加分隔符”)
<br/>
样例5：1-13-01<span>(1单元13层01室)</span>([单元号][层号][分隔符])
<br/>
样例6：1-01<span>(1单元13层01室)</span>([层号][分隔符]，勾选“室号之前增加分隔符”)
</span>
</div>
</el-dialog>
</div>
<div class="shop">
<el-button type="primary" @click="save">保存</el-button>
<el-button type="primary" @click="result">重置</el-button>
<el-button type="primary" @click="cancel">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "plSh",
props: {
plShVisible: {
type: Boolean,
default: false
},
// 单元名称下拉框数据
dys: {
type: Array
},
// 层数
cs: {
type: Number
}
},
data() {
return {
isVisible: false,
xlVisible: false
}
},
methods: {
xl: function () {
this.xlVisible = true;
},
addRow: function () {
},
delRow: function (index) {
console.log(index)
},
close: function () {
this.$emit("close")
this.isVisible = false
},
result: function () {
},
save: function () {
},
cancel: function () {
this.close()
}
},
watch: {
plShVisible: function (val) {
this.isVisible = val
}
}
}
</script>
<style scoped lang="less">
table {
margin-top: 10px;
background-color: #fff;
font-size: 14px;
width: 100%;
:hover {
cursor: pointer;
}
}
td {
text-align: center;
height: 36px;
min-width: 60px;
}
.xl {
color: blue;
float: right;
: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;
}
.xlgz{
span{
font-size: 16px;
line-height: 22px;
span{
color: red;
}
}
}
</style>