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 @@ ...@@ -223,8 +223,7 @@
223 223
224 }, 224 },
225 cancel: function () { 225 cancel: function () {
226 this.$emit('close') 226 this.close()
227 this.isVisible = false
228 } 227 }
229 }, 228 },
230 mounted() { 229 mounted() {
......
1 <template>
2 <div class="main">
3 <el-dialog
4 title="新增"
5 :visible.sync="isVisible"
6 width="70%"
7 @close="close"
8 :modal-append-to-body="false"
9 center>
10 <div>
11 <el-checkbox>层号自动补0</el-checkbox>
12 <el-checkbox>层号之前增加分割符</el-checkbox>
13 <el-checkbox>室号之前增加分割符</el-checkbox>
14 <span class="xl" @click="xl">祥例</span>
15 <table border="1">
16 <tr>
17 <td rowspan="2" @click="addRow">+</td>
18 <td rowspan="2">序号</td>
19 <td rowspan="2">单元名称</td>
20 <td rowspan="2">起始层</td>
21 <td rowspan="2">结束层</td>
22 <td rowspan="2">每层户数</td>
23 <td colspan="6" class="gz">
24 室号规则：[单元号][分割符A][层号][分割符A][室号前缀][室号][室号后缀]
25 </td>
26 </tr>
27 <tr>
28 <td>单元号</td>
29 <td>层号</td>
30 <td>室号前缀</td>
31 <td>分割符</td>
32 <td>起始室号</td>
33 <td>室号后缀</td>
34 </tr>
35 <tr v-for="item in 10" :key="item">
36 <td @click="delRow(item)">-</td>
37 <td>{{item}}</td>
38 <td>
39 <el-select>
40 <el-option
41 v-for="i in cs"
42 :key="i"
43 :label="i"
44 :value="i"
45 ></el-option>
46 </el-select>
47 </td>
48 <td>
49 <el-select>
50 <el-option
51 v-for="i in cs"
52 :key="i"
53 :label="i"
54 :value="i"
55 ></el-option>
56 </el-select>
57 </td>
58 <td>
59 <el-select>
60 <el-option
61 v-for="i in cs"
62 :key="i"
63 :label="i"
64 :value="i"
65 ></el-option>
66 </el-select>
67 </td>
68 <td>
69 <input type="text" class="inputtitle"/>
70 </td>
71 <td>
72 <input type="text" class="inputtitle"/>
73 </td>
74 <td>
75 <input type="text" class="inputtitle"/>
76 </td>
77 <td>
78 <input type="text" class="inputtitle"/>
79 </td>
80 <td>
81 <input type="text" class="inputtitle"/>
82 </td>
83 <td>
84 <input type="text" class="inputtitle"/>
85 </td>
86 <td>
87 <input type="text" class="inputtitle"/>
88 </td>
89 </tr>
90 </table>
91 </div>
92 <div>
93 <el-dialog
94 title="祥例"
95 :visible.sync="xlVisible"
96 width="50%"
97 :modal-append-to-body="false"
98 >
99 <div class="xlgz">
100 <span>
101 样例1：10101 <span>（1单元01层01室）</span>([单元号][层号]，勾选“层号自动补0”)
102 <br/>
103 样例2：11301室<span>（1单元13层01室）</span>([单元号][层号][室号后缀])
104 <br/>
105 样例3：101<span>(1层01室)</span>([层号])
106 <br/>
107 样例4：1-101<span>(1单元-01层01室)</span>([单元号][层号][分隔符]，勾选“层号之前增加分隔符”)
108 <br/>
109 样例5：1-13-01<span>(1单元13层01室)</span>([单元号][层号][分隔符])
110 <br/>
111 样例6：1-01<span>(1单元13层01室)</span>([层号][分隔符]，勾选“室号之前增加分隔符”)
112 </span>
113 </div>
114 </el-dialog>
115 </div>
116 <div class="shop">
117 <el-button type="primary" @click="save">保存</el-button>
118 <el-button type="primary" @click="result">重置</el-button>
119 <el-button type="primary" @click="cancel">取消</el-button>
120 </div>
121 </el-dialog>
122 </div>
123 </template>
124
125 <script>
126 export default {
127 name: "plSh",
128 props: {
129 plShVisible: {
130 type: Boolean,
131 default: false
132 },
133 // 单元名称下拉框数据
134 dys: {
135 type: Array
136 },
137 // 层数
138 cs: {
139 type: Number
140 }
141 },
142 data() {
143 return {
144 isVisible: false,
145 xlVisible: false
146 }
147 },
148 methods: {
149 xl: function () {
150 this.xlVisible = true;
151 },
152 addRow: function () {
153
154 },
155 delRow: function (index) {
156 console.log(index)
157 },
158 close: function () {
159 this.$emit("close")
160 this.isVisible = false
161 },
162 result: function () {
163
164 },
165 save: function () {
166
167 },
168 cancel: function () {
169 this.close()
170 }
171 },
172 watch: {
173 plShVisible: function (val) {
174 this.isVisible = val
175 }
176 }
177 }
178 </script>
179
180 <style scoped lang="less">
181 table {
182 margin-top: 10px;
183 background-color: #fff;
184 font-size: 14px;
185 width: 100%;
186 :hover {
187 cursor: pointer;
188 }
189 }
190
191 td {
192 text-align: center;
193 height: 36px;
194 min-width: 60px;
195 }
196
197 .xl {
198 color: blue;
199 float: right;
200 :hover {
201 cursor: pointer;
202 }
203 }
204
205 .inputtitle {
206 line-height: 38px;
207 width: 90%;
208 border: none;
209 outline: none;
210 }
211
212 .shop {
213 text-align: center;
214 margin-top: 20px;
215 }
216
217 .gz {
218 color: #b2b2b2;
219 font-size: 12px;
220 }
221 .xlgz{
222 span{
223 font-size: 16px;
224 line-height: 22px;
225 span{
226 color: red;
227 }
228 }
229 }
230 </style>