elink-star
/
ShibeiWorkPlatform_Frontend
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

UI 调整

shibei_master
jiangyy 4 years ago
parent
f1863fbf91
commit
2517667cba
1 changed files with 125 additions and 122 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 227
      src/views/modules/workSys/demandCate.vue

227
src/views/modules/workSys/demandCate.vue
View File

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

Write Preview
Loading…
Cancel
Save