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

57
src/views/components/resiForm.vue

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

11
src/views/components/resiSearch.vue

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

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

@ -1,5 +1,5 @@
<template> <template>
<div v-if="pageLoading"> <div v-if="pageLoading" class="resi-container">
<resi-search <resi-search
v-if="searchList.length > 0" v-if="searchList.length > 0"
ref="resiSearch" ref="resiSearch"
@ -35,7 +35,7 @@
style="width: 100%" style="width: 100%"
class="resi-table" 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>
<el-table-column <el-table-column
v-for="item in tableHeader" v-for="item in tableHeader"
@ -43,7 +43,7 @@
:prop="item.columnName" :prop="item.columnName"
:label="item.label" :label="item.label"
align="center" align="center"
:width="item.itemType === 'radio' ? 80 : 180" :width="item.itemType === 'radio' ? computedWidth(item.label) : 180"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ handleFilterSpan(scope.row, item) }}</span> <span>{{ handleFilterSpan(scope.row, item) }}</span>
@ -66,31 +66,9 @@
class="btn-color-edit" class="btn-color-edit"
>编辑</el-button >编辑</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 <el-popconfirm
title="删除之后无法回复,确认删除?" title="删除之后无法回复,确认删除?"
@confirm="handleDel(scope.row)" @onConfirm="handleDel(scope.row)"
> >
<el-button <el-button
slot="reference" slot="reference"
@ -273,6 +251,10 @@ export default {
console.log('storeoooo----0000', this.$store) console.log('storeoooo----0000', this.$store)
}, },
methods: { methods: {
computedWidth(label) {
const wd = 20 * label.length
return wd > 80 ? wd : 80
},
filterEdit(id) { filterEdit(id) {
const { user } = this.$store.state const { user } = this.$store.state
return id === user.agencyId return id === user.agencyId
@ -428,7 +410,7 @@ export default {
}, },
async handleLook(row) { async handleLook(row) {
this.disabled = true this.disabled = true
await this.getFormList() await this.getFormList('edit')
this.getrowInfo(row.icResiUserId) this.getrowInfo(row.icResiUserId)
}, },
async handleEdit(row) { async handleEdit(row) {
@ -862,10 +844,31 @@ export default {
} }
.el-tabs__nav-next, .el-tabs__nav-next,
.el-tabs__nav-prev { .el-tabs__nav-prev {
// width: 12px;
// height: 12px;
color: rgba(30, 122, 254, 1);
line-height: 20px; 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 { .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 { .el-button--text {
text-decoration: underline; text-decoration: underline;
} }
@ -888,6 +891,16 @@ export default {
margin-bottom: 13px; margin-bottom: 13px;
.el-button { .el-button {
margin-left: 10px; 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 { .resi-other {

Loading…
Cancel
Save