jiangyy
4 years ago
4 changed files with 611 additions and 554 deletions
@ -0,0 +1,202 @@ |
|||
<template> |
|||
<div> |
|||
<div class="div_tip"> |
|||
全部类别 |
|||
</div> |
|||
|
|||
<div class="div_list div_all_list"> |
|||
<el-scrollbar style="height:100%"> |
|||
<div class="div_room"> |
|||
|
|||
<div v-for="(item,index) in defaultList" |
|||
:key="index" |
|||
class="item" |
|||
@click="handelSelCategory(index)"> |
|||
<div v-if="item.selected" |
|||
class="icon_circle icon_sel"> |
|||
<!-- <icon name="el-icon-check" |
|||
scale="20"></icon> --> |
|||
<i class="el-icon-check" |
|||
style="font-size: 17px; color: #5d5d5d ;margin-left:1px;margin-top:2px" /> |
|||
</div> |
|||
<div v-if="!item.selected" |
|||
class="icon_circle"></div> |
|||
|
|||
<div class="item_category"> |
|||
<img :src="item.managementIcon" |
|||
alt /> |
|||
<span>{{item.label}}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</el-scrollbar> |
|||
|
|||
</div> |
|||
<div class="div_btn"> |
|||
<el-button type="warning" |
|||
@click="handleCancle">取消</el-button> |
|||
<el-button type="primary" |
|||
class="btn_right" |
|||
@click="handleConfirm">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from "vuex"; |
|||
import { Loading } from 'element-ui'; //引入Loading服务 |
|||
import { requestPost } from "@/js/dai/request"; |
|||
|
|||
|
|||
let loading;//加载动画 |
|||
|
|||
export default { |
|||
|
|||
data () { |
|||
return { |
|||
defaultList: [], |
|||
addList: [] |
|||
|
|||
} |
|||
}, |
|||
async mounted () { |
|||
|
|||
|
|||
}, |
|||
methods: { |
|||
async initData () { |
|||
await this.getDefaultCategoryList() |
|||
|
|||
this.addList = [...this.categoryList] |
|||
this.addList.pop() |
|||
}, |
|||
//获取默认分类信息 |
|||
async getDefaultCategoryList () { |
|||
const url = "/oper/customize/icindividualcategorymanage/individualcategoryalllist" |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/oper/customize/icindividualcategorymanage/individualcategoryalllist" |
|||
|
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
// this.defaultList = [] |
|||
this.defaultList = [...data] |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
handelSelCategory (index) { |
|||
let obj = JSON.parse(JSON.stringify(this.defaultList[index])) |
|||
|
|||
if (!obj.selected) {//原状态不是选中状态，在数组最后添加 |
|||
this.addList.push(obj) |
|||
} else {//原状态是选中状态，从数组里找到并去除 |
|||
for (let itemIndex in this.addList) { |
|||
// debugger |
|||
let tempObj = this.addList[itemIndex] |
|||
if (obj.columnName === tempObj.columnName) { |
|||
this.addList.splice(itemIndex, 1); |
|||
break |
|||
|
|||
} |
|||
} |
|||
|
|||
this.addList.forEach(element => { |
|||
console.log(element.label) |
|||
}); |
|||
|
|||
} |
|||
|
|||
obj.selected = !obj.selected |
|||
this.$set(this.defaultList, index, obj) |
|||
|
|||
}, |
|||
|
|||
async handleConfirm () { |
|||
this.addList.forEach((element, index) => { |
|||
element.sort = index |
|||
element.columnId = element.id |
|||
}); |
|||
|
|||
const url = "/oper/customize/icindividualcategorymanage/editindividualcategory" |
|||
|
|||
|
|||
const { data, code, msg } = await requestPost(url, this.addList) |
|||
|
|||
if (code === 0) { |
|||
this.$emit('handleConfirm') |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
handleCancle () { |
|||
this.$emit('handleCancle') |
|||
}, |
|||
|
|||
|
|||
|
|||
//开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, //是否锁定 |
|||
text: '正在加载……', //加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' //背景颜色 |
|||
}); |
|||
|
|||
}, |
|||
|
|||
//结束加载动画 |
|||
endLoading () { |
|||
//clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close(); |
|||
} |
|||
}, |
|||
}, |
|||
props: { |
|||
categoryList: { |
|||
type: Array, |
|||
default () { |
|||
return [] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
// selectWidth () { |
|||
// let width = this.selHouseName.length * 200 |
|||
// console.log(width) |
|||
// return width + 'px'; |
|||
// }, |
|||
|
|||
mapHeight () { |
|||
|
|||
return this.clientHeight - 120; |
|||
|
|||
}, |
|||
|
|||
...mapGetters(["clientHeight"]) |
|||
|
|||
}, |
|||
components: {}, |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/modules/management/categoryMain.scss" |
|||
scoped |
|||
></style> |
|||
|
|||
<style lang=scss > |
|||
.el-scrollbar__wrap { |
|||
overflow-x: hidden !important; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue