Browse Source

UI 调整

shibei_master
jiangyy 4 years ago
parent
commit
2517667cba
  1. 247
      src/views/modules/workSys/demandCate.vue

247
src/views/modules/workSys/demandCate.vue

@ -1,123 +1,130 @@
<template>
<div v-if="pageLoading" class="resi-container">
<el-card ref="searchCard" class="search-card">
<div v-if="pageLoading"
class="resi-container">
<el-card ref="searchCard"
class="search-card">
<div>
<el-form :inline="true" :model="form" class="demo-form-inline">
<el-form :inline="true"
:model="form"
class="demo-form-inline">
<el-form-item label="需求分类">
<el-select v-model="form.firstCategoryCode" filterable placeholder="请选择" clearable>
<el-option
v-for="item in demandOptions"
:key="item.value"
:label="item.label"
:value="item.value">
<el-select size="small"
v-model="form.firstCategoryCode"
filterable
placeholder="请选择"
clearable>
<el-option v-for="item in demandOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button class="diy-button--search" size="small" @click="handleSearch">查询</el-button>
<el-button class="diy-button--search"
size="small"
@click="handleSearch">查询</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="resi-card-table">
<div class="resi-row-btn">
<el-button class="diy-button--add" size="small" @click="handleAdd('1', 'add')">新增分类</el-button>
<el-button class="diy-button--add"
size="small"
@click="handleAdd('1', 'add')">新增分类</el-button>
</div>
<el-table
:data="tableData"
row-key="categoryId"
v-loading="tableLoading"
border
:height="tableHeight"
style="width: 100%"
class="resi-table"
>
<el-table-column label="序号" type="index" align="center" width="50">
<el-table :data="tableData"
row-key="categoryId"
v-loading="tableLoading"
border
:height="tableHeight"
style="width: 100%"
class="resi-table">
<el-table-column label="序号"
type="index"
align="center"
width="50">
<template slot-scope="scope">{{ scope.row.index }}</template>
</el-table-column>
<el-table-column
v-for="item in tableHeader"
:key="item.columnName"
:prop="item.columnName"
:label="item.label"
:align="item.align"
>
<el-table-column v-for="item in tableHeader"
:key="item.columnName"
:prop="item.columnName"
:label="item.label"
:align="item.align">
<template slot-scope="scope">
<span>{{ handleFilterSpan(scope.row, item) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="200">
<el-table-column label="操作"
align="center"
width="200">
<template slot-scope="scope">
<el-button
v-if="scope.row.hasBtn"
@click="handleLook(scope.row)"
type="text"
size="small"
class="div-table-button--detail"
>{{(scope.row.usableFlag&&'禁用') || '启用'}}</el-button
>
<el-button
v-if="scope.row.level == 1"
@click="handleAdd('2', 'add', scope.row)"
type="text"
size="small"
class="div-table-button--delete"
>添加二级分类</el-button
>
<el-button
@click="handleEdit(scope.row, 'edit')"
type="text"
size="small"
class="div-table-button--edit"
>编辑</el-button
>
<el-button v-if="scope.row.hasBtn"
@click="handleLook(scope.row)"
type="text"
size="small"
class="div-table-button--detail">{{(scope.row.usableFlag&&'禁用') || '启用'}}</el-button>
<el-button v-if="scope.row.level == 1"
@click="handleAdd('2', 'add', scope.row)"
type="text"
size="small"
class="div-table-button--delete">添加二级分类</el-button>
<el-button @click="handleEdit(scope.row, 'edit')"
type="text"
size="small"
class="div-table-button--edit">编辑</el-button>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[20, 50, 100, 200]"
:page-size="pageSize"
layout="sizes, prev, pager, next, total"
:total="total"
>
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[20, 50, 100, 200]"
:page-size="pageSize"
layout="sizes, prev, pager, next, total"
:total="total">
</el-pagination>
</div>
</el-card>
<el-dialog
title="居民需求分类"
:visible.sync="dialogVisible"
width="40%"
append-to-body
:close-on-click-modal="false"
:before-close="handlerCancle"
>
<el-form label-width="100px" :model="form" :rules="rules" ref="ruleForm">
<el-form-item label="分类名称" prop="categoryName">
<el-input v-model="form.categoryName" size="small" style="width: 180px;"></el-input>
<el-dialog title="居民需求分类"
:visible.sync="dialogVisible"
width="40%"
append-to-body
:close-on-click-modal="false"
:before-close="handlerCancle">
<el-form label-width="100px"
:model="form"
:rules="rules"
ref="ruleForm">
<el-form-item label="分类名称"
prop="categoryName">
<el-input v-model="form.categoryName"
size="small"
style="width: 180px;"></el-input>
</el-form-item>
<!-- <el-form-item label="状态">
<el-switch v-model="form.usableFlag"></el-switch>
</el-form-item> -->
<el-form-item v-if="addLevel == '2'" label="奖励积分">
<el-input-number v-model="form.awardPoint" :min="0" size="small" label="描述文字"></el-input-number>
<el-form-item v-if="addLevel == '2'"
label="奖励积分">
<el-input-number v-model="form.awardPoint"
:min="0"
size="small"
label="描述文字"></el-input-number>
</el-form-item>
</el-form>
<div class="resi-btns">
<el-button size="small" @click="handlerCancle">取消</el-button>
<el-button
type="primary"
size="small"
:loading="btnLoading"
@click="handleSUbmit"
>提交</el-button
>
<el-button size="small"
@click="handlerCancle">取消</el-button>
<el-button type="primary"
size="small"
:loading="btnLoading"
@click="handleSUbmit">提交</el-button>
</div>
</el-dialog>
@ -126,7 +133,7 @@
<script>
export default {
data() {
data () {
return {
tableLoading: false,
btnLoading: false,
@ -145,7 +152,7 @@ export default {
{
label: '是',
value: 1
},{
}, {
label: '否',
value: 2
}
@ -181,30 +188,30 @@ export default {
}
}
},
async created() {
async created () {
this.customerId = localStorage.getItem('customerId')
this.getTableData()
this.getOptions()
this.pageLoading = true
},
mounted() {
mounted () {
this.$nextTick(() => {
this.tableHeight = document.documentElement.clientHeight - this.$refs.searchCard.$el.offsetHeight - 280 + 'px'
console.log('tableHeight', this.tableHeight)
})
},
methods: {
handleSizeChange(val) {
handleSizeChange (val) {
console.log(`每页 ${val}`)
this.pageSize = val
this.getTableData()
},
handleCurrentChange(val) {
handleCurrentChange (val) {
console.log(`当前页: ${val}`)
this.currentPage = val
this.getTableData()
},
handleFilterSpan(row, item) {
handleFilterSpan (row, item) {
let _val = ''
if (item.options && item.options.length > 0) {
item.options.forEach((n) => {
@ -213,21 +220,21 @@ export default {
}
return _val || row[item.columnName]
},
handleSearch(val) {
handleSearch (val) {
console.log('searchhh--', val)
this.currentPage = 1
this.getTableData()
},
handleAdd(type, addType, row) {
handleAdd (type, addType, row) {
this.addLevel = type
this.addType = addType
if (type == '2') this.form = { ...row, categoryName: '' }
this.dialogVisible = true
},
handlerCancle() {
handlerCancle () {
this.dialogVisible = false
},
async handleLook(row) {
async handleLook (row) {
const params = {
categoryId: row.categoryId,
usableFlag: !row.usableFlag
@ -245,14 +252,14 @@ export default {
return this.$message.error('网络错误')
})
},
async handleEdit(row, addType) {
async handleEdit (row, addType) {
this.form = { ...row }
this.addLevel = row.level
this.addType = addType
this.dialogVisible = true
},
async addLevelFirst() {
async addLevelFirst () {
const _form = {
customerId: localStorage.getItem('customerId'),
categoryName: this.form.categoryName
@ -265,12 +272,12 @@ export default {
} else {
this.dialogVisible = false
this.getTableData()
}
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.btnLoading = false
this.btnLoading = false
},
async addLevelChild () {
const _form = {
@ -287,14 +294,14 @@ export default {
} else {
this.dialogVisible = false
this.getTableData()
}
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.btnLoading = false
this.btnLoading = false
},
async editCate() {
async editCate () {
const _form = {
customerId: localStorage.getItem('customerId'),
categoryName: this.form.categoryName,
@ -310,14 +317,14 @@ export default {
} else {
this.dialogVisible = false
this.getTableData()
}
}
})
.catch(() => {
return this.$message.error('网络错误')
})
this.btnLoading = false
this.btnLoading = false
},
handleSUbmit() {
handleSUbmit () {
this.$refs.ruleForm.validate(async (valid) => {
if (valid) {
this.btnLoading = true
@ -325,15 +332,15 @@ export default {
if (this.addLevel == '1') this.addLevelFirst()
else this.addLevelChild()
} else this.editCate()
} else {
console.log('error submit!!');
return false;
}
});
},
handleDel(row) {
handleDel (row) {
let params = {
formCode: 'resi_base_info',
icResiUserId: row.icResiUserId
@ -356,8 +363,8 @@ export default {
return this.$message.error('网络错误')
})
},
sortData() {
const _data = this.tableData.map((item, index)=> {
sortData () {
const _data = this.tableData.map((item, index) => {
return {
id: item.id,
sort: index
@ -377,7 +384,7 @@ export default {
return this.$message.error('网络错误')
})
},
async getOptions() {
async getOptions () {
const params = {
parentCategoryCode: 0
}
@ -394,7 +401,7 @@ export default {
return this.$message.error('网络错误')
})
},
async getTableData() {
async getTableData () {
this.tableLoading = true
let params = {
// formCode: 'resi_base_info',
@ -430,7 +437,7 @@ export default {
})
this.tableLoading = false
}
}
}
</script>
@ -438,13 +445,12 @@ export default {
<style lang="scss" scoped>
.resi-container .resi-card-table {
::v-deep .el-table {
th {
th {
color: #fff;
background-color: rgba(33, 149, 254, 1);
}
.cell {
span:nth-of-type(3) {
display: inline-block;
width: 90%;
@ -483,14 +489,13 @@ export default {
}
}
.avatar-uploader {
::v-deep
.el-upload {
::v-deep .el-upload {
cursor: pointer;
position: relative;
overflow: hidden;
}
.el-upload:hover {
border-color: #409EFF;
border-color: #409eff;
}
.avatar {
width: 70px;
@ -508,8 +513,6 @@ export default {
text-align: center;
}
}
.resi-btns {
margin-top: 20px;

Loading…
Cancel
Save