Browse Source

修改UI

shibei_master
13176889840 4 years ago
parent
commit
d791b34f2e
  1. 18
      src/views/components/editResi.vue
  2. 57
      src/views/components/resiForm.vue
  3. 11
      src/views/components/resiSearch.vue
  4. 67
      src/views/modules/base/resi.vue

18
src/views/components/editResi.vue

@ -14,7 +14,7 @@
<el-row v-if="fixed" class="resi-row">
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
<el-col :span="6">
<el-form-item :prop="form.GRID_ID" label="所属网格">
<el-form-item :prop="form.GRID_ID" label="所属网格" required>
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
@ -33,7 +33,7 @@
</el-form-item>
</el-col>
<el-col :span="18">
<el-form-item :prop="form.VILLAGE_ID" label="所属小区">
<el-form-item :prop="form.VILLAGE_ID" label="所属小区" required>
<div class="resi-cell-value">
<el-select v-model.trim="form.VILLAGE_ID" :disabled="disabled" placeholder="请选择小区" size="small"
clearable class="resi-cell-select"
@ -46,7 +46,7 @@
</el-option>
</el-select>
<el-select v-model.trim="form.BUILD_ID" :disabled="disabled" placeholder="请选择楼号" size="small"
clearable class="resi-cell-select" @change="handleChangeB"
clearable class="resi-cell-select resi-cell-select-middle" @change="handleChangeB"
>
<el-option
v-for="item in optionsB"
@ -56,7 +56,7 @@
</el-option>
</el-select>
<el-select v-model.trim="form.UNIT_ID" :disabled="disabled" placeholder="请选择单元" size="small"
clearable class="resi-cell-select" @change="handleChangeD"
clearable class="resi-cell-select resi-cell-select-middle" @change="handleChangeD"
>
<el-option
v-for="item in optionsD"
@ -66,7 +66,7 @@
</el-option>
</el-select>
<el-select v-model.trim="form.HOME_ID" :disabled="disabled" placeholder="请选择房号" size="small"
clearable class="resi-cell-select"
clearable class="resi-cell-select resi-cell-select-middle"
>
<el-option
v-for="item in optionsH"
@ -115,7 +115,7 @@
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
<el-col v-for="n in item" :key="n.itemId" :span="item.length === 1 ? 24 : (24/columns)"
:style="n.itemType === 'divider' && 'display: none;'">
<el-form-item :prop="n.columnName" :label="n.label">
<el-form-item :prop="n.columnName" :label="n.label" :required="Boolean(n.required)">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
@ -175,7 +175,6 @@
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
<el-time-picker
@ -760,9 +759,9 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.resi-form {
.el-date-editor.el-input, .el-date-editor.el-input__inner {
:deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 100% !important;
}
}
@ -798,6 +797,7 @@ export default {
.resi-cell-value .resi-cell-textarea {
width: 300px;
}
.resi-cell-select {
width: 180px;
box-sizing: border-box;

57
src/views/components/resiForm.vue

@ -34,7 +34,7 @@
<el-col :span="18">
<el-form-item label="所属家庭" required>
<div class="resi-cell-value">
<el-col :span="4">
<div class="resi-cell-col">
<el-form-item prop="VILLAGE_ID">
<el-select v-model.trim="form.VILLAGE_ID" placeholder="请选择小区" size="small"
clearable class="resi-cell-select" @change="handleChangeV"
@ -47,11 +47,9 @@
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item prop="BUILD_ID">
<el-select v-model.trim="form.BUILD_ID" placeholder="请选择楼号" size="small"
clearable class="resi-cell-select" @change="handleChangeB"
clearable class="resi-cell-select resi-cell-select-middle" @change="handleChangeB"
>
<el-option
v-for="item in optionsB"
@ -61,11 +59,9 @@
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item prop="UNIT_ID">
<el-select v-model.trim="form.UNIT_ID" placeholder="请选择单元" size="small"
clearable class="resi-cell-select" @change="handleChangeD"
clearable class="resi-cell-select resi-cell-select-middle" @change="handleChangeD"
>
<el-option
v-for="item in optionsD"
@ -75,11 +71,9 @@
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item prop="HOME_ID">
<el-select v-model.trim="form.HOME_ID" placeholder="请选择房号" size="small"
clearable class="resi-cell-select"
clearable class="resi-cell-select resi-cell-select-middle"
>
<el-option
v-for="item in optionsH"
@ -89,7 +83,19 @@
</el-option>
</el-select>
</el-form-item>
</div>
<!-- <el-col :span="6">
</el-col>
<el-col :span="6">
</el-col>
<el-col :span="6">
</el-col>
<el-col :span="6">
</el-col> -->
</div>
</el-form-item>
</el-col>
@ -196,7 +202,6 @@
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
>
</el-date-picker>
<el-time-picker
@ -763,9 +768,9 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.resi-form {
.el-date-editor.el-input, .el-date-editor.el-input__inner {
:deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 100% !important;
}
}
@ -773,7 +778,7 @@ export default {
max-width: 180px;
}
.resi-cell-value {
.el-col {
:deep .el-col {
margin-right: 20px;
}
// .resi-cell-range {
@ -787,27 +792,16 @@ export default {
margin-bottom: 0;
}
// .resi-form .resi-cell {
// display: flex;
// align-items: center;
// .resi-cell-label {
// width: 70px;
// box-sizing: border-box;
// margin-right: 15px;
// text-align: right;
// }
// .resi-cell-value-radio {
// display: flex;
// align-items: center;
// min-height: 36px;
// }
// .resi-cell-value .resi-cell-input {
// width: 180px;
// }
.resi-cell-value .resi-cell-textarea {
width: 300px;
}
.resi-cell-col {
display: flex;
.el-form-item {
margin-right: 10px;
}
}
.resi-cell-select {
width: 180px;
box-sizing: border-box;
@ -822,5 +816,4 @@ export default {
.resi-cell-select:last-child {
margin-right: 0;
}
// }
</style>

11
src/views/components/resiSearch.vue

@ -138,7 +138,6 @@
size="small"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
>
</el-date-picker>
<el-date-picker
@ -543,7 +542,7 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scope>
.resi-container .resi-card {
position: relative;
overflow: visible;
@ -579,7 +578,7 @@ export default {
margin-bottom: 20px;
}
.resi-search {
padding-right: 140px;
padding-right: 20px;
.el-col {
text-align: right;
}
@ -601,13 +600,13 @@ export default {
min-height: 32px;
}
.resi-cell-input {
width: 180px;
width: 200px;
}
.resi-cell--daterange {
width: 100%;
width: 200px;
}
.resi-cell-select {
width: 180px;
width: 200px;
box-sizing: border-box;
margin-right: 10px;
&-middle {

67
src/views/modules/base/resi.vue

@ -1,5 +1,5 @@
<template>
<div v-if="pageLoading">
<div v-if="pageLoading" class="resi-container">
<resi-search
v-if="searchList.length > 0"
ref="resiSearch"
@ -35,7 +35,7 @@
style="width: 100%"
class="resi-table"
>
<el-table-column type="index" align="center" width="50">
<el-table-column label="序号" type="index" align="center" width="50">
</el-table-column>
<el-table-column
v-for="item in tableHeader"
@ -43,7 +43,7 @@
:prop="item.columnName"
:label="item.label"
align="center"
:width="item.itemType === 'radio' ? 80 : 180"
:width="item.itemType === 'radio' ? computedWidth(item.label) : 180"
>
<template slot-scope="scope">
<span>{{ handleFilterSpan(scope.row, item) }}</span>
@ -66,31 +66,9 @@
class="btn-color-edit"
>编辑</el-button
>
<!-- <el-popover placement="top" width="160" trigger="manual">
<p>删除之后无法回复确认删除</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="rowVisible = false"
>取消</el-button
>
<el-button
type="primary"
size="mini"
@click="handleDel(scope.row)"
>确定</el-button
>
</div>
<el-button
slot="reference"
type="text"
size="small"
class="btn-color-del"
@click="rowVisible = true"
>删除</el-button
>
</el-popover> -->
<el-popconfirm
title="删除之后无法回复,确认删除?"
@confirm="handleDel(scope.row)"
@onConfirm="handleDel(scope.row)"
>
<el-button
slot="reference"
@ -273,6 +251,10 @@ export default {
console.log('storeoooo----0000', this.$store)
},
methods: {
computedWidth(label) {
const wd = 20 * label.length
return wd > 80 ? wd : 80
},
filterEdit(id) {
const { user } = this.$store.state
return id === user.agencyId
@ -428,7 +410,7 @@ export default {
},
async handleLook(row) {
this.disabled = true
await this.getFormList()
await this.getFormList('edit')
this.getrowInfo(row.icResiUserId)
},
async handleEdit(row) {
@ -862,10 +844,31 @@ export default {
}
.el-tabs__nav-next,
.el-tabs__nav-prev {
// width: 12px;
// height: 12px;
color: rgba(30, 122, 254, 1);
line-height: 20px;
background: rgba(30, 122, 254, .2);
// border-radius: 50%;
}
.el-tabs__item.is-active {
color: #fff;
background: linear-gradient(90deg, #1A5AFD, #26C4FF);
}
}
.resi-container .resi-card-table {
.el-table th {
color: #fff;
background-color: rgba(33, 149, 254, 1);
border-right: 1px solid rgba(33, 149, 254, 1);;
}
}
.resi-table {
// .el-table__header-wrapper .el-table__header th {
// color: #fff;
// background-color: rgba(33, 149, 254, 1);
// border-right: 1px solid rgba(33, 149, 254, 1);;
// }
.el-button--text {
text-decoration: underline;
}
@ -888,6 +891,16 @@ export default {
margin-bottom: 13px;
.el-button {
margin-left: 10px;
border: 0;
}
.el-button--success {
background: rgba(34, 193, 195, 1);
}
.el-button--warning {
background: rgba(254, 179, 73, 1);
}
.el-button--danger {
background: rgba(254, 98, 82, 1);
}
}
.resi-other {

Loading…
Cancel
Save