Commit a5f85f5f051a59ab0d018820ab622f6d24d514c8
1 parent
27cc2c15
v1.9 修复修改业主,修改门禁钥匙出现多个的bug
Showing
2 changed files
with
100 additions
and
12 deletions
src/components/owner/editOwner.vue
| ... | ... | @@ -81,22 +81,39 @@ |
| 81 | 81 | <el-row :gutter="20" v-if="index % 2 === 0"> |
| 82 | 82 | <el-col :span="12"> |
| 83 | 83 | <el-form-item :label="item.specName"> |
| 84 | - <el-input v-if="item.specType === '2233'" v-model="item.value" :placeholder="item.specHoldplace" /> | |
| 85 | - <el-select v-else-if="item.specType === '3344'" v-model="item.value" style="width:100%"> | |
| 86 | - <el-option v-for="val in item.values" :key="val.value" :label="val.valueName" :value="val.value" /> | |
| 87 | - </el-select> | |
| 84 | + <input v-if="item.specType === '2233'" | |
| 85 | + v-model="item.value" | |
| 86 | + :placeholder="item.specHoldplace" | |
| 87 | + class="custom-input" /> | |
| 88 | + <select v-else-if="item.specType === '3344'" | |
| 89 | + v-model="item.value" | |
| 90 | + class="custom-select"> | |
| 91 | + <option v-for="val in item.values" | |
| 92 | + :key="val.value" | |
| 93 | + :label="val.valueName" | |
| 94 | + :value="val.value"> | |
| 95 | + {{ val.valueName }} | |
| 96 | + </option> | |
| 97 | + </select> | |
| 88 | 98 | </el-form-item> |
| 89 | 99 | </el-col> |
| 90 | 100 | |
| 91 | 101 | <el-col :span="12" v-if="index < attrs.length - 1"> |
| 92 | 102 | <el-form-item :label="attrs[index + 1].specName"> |
| 93 | - <el-input v-if="attrs[index + 1].specType === '2233'" v-model="attrs[index + 1].value" | |
| 94 | - :placeholder="attrs[index + 1].specHoldplace" /> | |
| 95 | - <el-select v-else-if="attrs[index + 1].specType === '3344'" v-model="attrs[index + 1].value" | |
| 96 | - style="width:100%"> | |
| 97 | - <el-option v-for="val in attrs[index + 1].values" :key="val.value" :label="val.valueName" | |
| 98 | - :value="val.value" /> | |
| 99 | - </el-select> | |
| 103 | + <input v-if="attrs[index + 1].specType === '2233'" | |
| 104 | + v-model="attrs[index + 1].value" | |
| 105 | + :placeholder="attrs[index + 1].specHoldplace" | |
| 106 | + class="custom-input" /> | |
| 107 | + <select v-else-if="attrs[index + 1].specType === '3344'" | |
| 108 | + v-model="attrs[index + 1].value" | |
| 109 | + class="custom-select"> | |
| 110 | + <option v-for="val in attrs[index + 1].values" | |
| 111 | + :key="val.value" | |
| 112 | + :label="val.valueName" | |
| 113 | + :value="val.value"> | |
| 114 | + {{ val.valueName }} | |
| 115 | + </option> | |
| 116 | + </select> | |
| 100 | 117 | </el-form-item> |
| 101 | 118 | </el-col> |
| 102 | 119 | </el-row> |
| ... | ... | @@ -196,6 +213,7 @@ export default { |
| 196 | 213 | if (this.form.ownerAttrDtos) { |
| 197 | 214 | const attrDto = this.form.ownerAttrDtos.find(dto => dto.specCd === attr.specCd) |
| 198 | 215 | attr.value = attrDto ? attrDto.value : '' |
| 216 | + attr.attrId = attrDto ? attrDto.attrId : '' | |
| 199 | 217 | } |
| 200 | 218 | } |
| 201 | 219 | } catch (error) { |
| ... | ... | @@ -235,6 +253,7 @@ export default { |
| 235 | 253 | const params = { |
| 236 | 254 | ...this.form, |
| 237 | 255 | attrs: this.attrs.map(attr => ({ |
| 256 | + attrId: attr.attrId, | |
| 238 | 257 | specCd: attr.specCd, |
| 239 | 258 | value: attr.value |
| 240 | 259 | })) |
| ... | ... | @@ -281,4 +300,73 @@ export default { |
| 281 | 300 | .mt-10 { |
| 282 | 301 | margin-top: 10px; |
| 283 | 302 | } |
| 303 | + | |
| 304 | +/* 自定义输入框样式,模拟 el-input */ | |
| 305 | +.custom-input { | |
| 306 | + width: 100%; | |
| 307 | + height: 32px; | |
| 308 | + line-height: 32px; | |
| 309 | + padding: 0 12px; | |
| 310 | + border: 1px solid #dcdfe6; | |
| 311 | + border-radius: 4px; | |
| 312 | + font-size: 14px; | |
| 313 | + color: #606266; | |
| 314 | + background-color: #fff; | |
| 315 | + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); | |
| 316 | + box-sizing: border-box; | |
| 317 | +} | |
| 318 | + | |
| 319 | +.custom-input:focus { | |
| 320 | + outline: none; | |
| 321 | + border-color: #409eff; | |
| 322 | +} | |
| 323 | + | |
| 324 | +.custom-input:hover { | |
| 325 | + border-color: #c0c4cc; | |
| 326 | +} | |
| 327 | + | |
| 328 | +.custom-input::placeholder { | |
| 329 | + color: #c0c4cc; | |
| 330 | +} | |
| 331 | + | |
| 332 | +/* 自定义选择框样式,模拟 el-select */ | |
| 333 | +.custom-select { | |
| 334 | + width: 100%; | |
| 335 | + height: 32px; | |
| 336 | + line-height: 32px; | |
| 337 | + padding: 0 12px; | |
| 338 | + border: 1px solid #dcdfe6; | |
| 339 | + border-radius: 4px; | |
| 340 | + font-size: 14px; | |
| 341 | + color: #606266; | |
| 342 | + background-color: #fff; | |
| 343 | + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); | |
| 344 | + box-sizing: border-box; | |
| 345 | + cursor: pointer; | |
| 346 | + appearance: none; | |
| 347 | + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); | |
| 348 | + background-position: right 8px center; | |
| 349 | + background-repeat: no-repeat; | |
| 350 | + background-size: 16px; | |
| 351 | + padding-right: 32px; | |
| 352 | +} | |
| 353 | + | |
| 354 | +.custom-select:focus { | |
| 355 | + outline: none; | |
| 356 | + border-color: #409eff; | |
| 357 | +} | |
| 358 | + | |
| 359 | +.custom-select:hover { | |
| 360 | + border-color: #c0c4cc; | |
| 361 | +} | |
| 362 | + | |
| 363 | +.custom-select option { | |
| 364 | + padding: 8px 12px; | |
| 365 | + background-color: #fff; | |
| 366 | + color: #606266; | |
| 367 | +} | |
| 368 | + | |
| 369 | +.custom-select option:hover { | |
| 370 | + background-color: #f5f7fa; | |
| 371 | +} | |
| 284 | 372 | </style> |
| 285 | 373 | \ No newline at end of file | ... | ... |
src/views/owner/listOwner.vue