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