parent
83168f823f
commit
cdf984c4a8
@ -0,0 +1,34 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export function getList(params,isLoading=true){
|
||||
return request({
|
||||
method:'get',
|
||||
url:'/api/admin/admin-area/get-list',
|
||||
params,
|
||||
isLoading
|
||||
})
|
||||
}
|
||||
|
||||
export function getForm(id,params){
|
||||
return request({
|
||||
method:'get',
|
||||
url:`/api/admin/admin-area/get-form/${id}`,
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function save(data){
|
||||
return request({
|
||||
method:'post',
|
||||
url:'/api/admin/admin-area/save',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function destroy(id,data){
|
||||
return request({
|
||||
method:'post',
|
||||
url:`/api/admin/admin-area/delete/${id}`,
|
||||
data
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export function getList(params,isLoading=true){
|
||||
return request({
|
||||
method:'get',
|
||||
url:'/api/admin/admin-product-type/get-list',
|
||||
params,
|
||||
isLoading
|
||||
})
|
||||
}
|
||||
|
||||
export function getForm(id,params){
|
||||
return request({
|
||||
method:'get',
|
||||
url:`/api/admin/admin-product-type/get-form/${id}`,
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function save(data){
|
||||
return request({
|
||||
method:'post',
|
||||
url:'/api/admin/admin-product-type/save',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function destroy(id,data){
|
||||
return request({
|
||||
method:'post',
|
||||
url:`/api/admin/admin-product-type/delete/${id}`,
|
||||
data
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 查询配置 -->
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<LxHeader icon="md-apps" text="数据权限" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
</slot>
|
||||
</LxHeader>
|
||||
</div>
|
||||
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="3">
|
||||
<Card class="box-card">
|
||||
<div slot="title" class="clearfix" style="height: 32px;line-height: 32px;">
|
||||
<span>用户列表</span>
|
||||
</div>
|
||||
<div style="overflow: auto;" :style="{height:height+'px'}">
|
||||
<el-scrollbar style="flex: 1">
|
||||
<el-tabs tab-position="left" v-model="activeUser" @tab-click="getAdminAreas(),getAdminTypes()">
|
||||
<el-tab-pane v-for="item in users" :label="item.name" :name="String(item.id)"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</Card>
|
||||
</el-col>
|
||||
<el-col :span="21">
|
||||
<Card class="box-card">
|
||||
<div slot="title" class="clearfix" style="height: 32px;line-height: 32px;">
|
||||
<span>权限列表</span>
|
||||
<Button style="float: right;" type="primary" @click="submit">保存</Button>
|
||||
</div>
|
||||
|
||||
<div style="overflow: auto;" :style="{height:height+'px'}">
|
||||
<el-scrollbar style="flex: 1">
|
||||
<div>
|
||||
<h4 style="padding: 10px 0;">板块权限</h4>
|
||||
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAll">全选</el-checkbox>
|
||||
<el-checkbox-group style="margin: 10px 0 0 10px;" v-model="checkedTypes" @change="handleChecked">
|
||||
<el-checkbox v-for="item in productTypes" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 style="padding: 16px 0;">区域权限</h4>
|
||||
|
||||
<el-tree
|
||||
ref="elTree"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:data="cities"
|
||||
:props="{label:'value',children:'children'}"
|
||||
show-checkbox>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</Card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listuser } from "@/api/system/user"
|
||||
import { getList as getProductTypes } from "@/api/productType"
|
||||
import { getparameter } from "@/api/system/dictionary"
|
||||
import { getList as getAdminType,save as saveType,destroy as destroyType } from "@/api/system/adminProductType"
|
||||
import { getList as getAdminArea,save as saveArea,destroy as destroyArea } from "@/api/system/adminArea"
|
||||
|
||||
import LxHeader from "@/components/LxHeader/index.vue";
|
||||
export default {
|
||||
components: {
|
||||
LxHeader
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 0,
|
||||
users:[],
|
||||
productTypes:[],
|
||||
cities:[],
|
||||
activeUser:'',
|
||||
checkAll: false,
|
||||
checkedTypes:[],
|
||||
isIndeterminate: true,
|
||||
|
||||
originalArea:[],
|
||||
originalType:[],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getAdminTypes(){
|
||||
const res = await getAdminType({
|
||||
admin_id:Number(this.activeUser)
|
||||
})
|
||||
console.log('type',res)
|
||||
this.originalType = res
|
||||
this.checkedTypes = res.map(item => item.product_type_id)
|
||||
},
|
||||
async getAdminAreas(){
|
||||
const res = await getAdminArea({
|
||||
admin_id:Number(this.activeUser)
|
||||
})
|
||||
console.log('area',res)
|
||||
this.originalArea = res
|
||||
this.$refs['elTree'].setCheckedKeys(res.map(item => item.area_id))
|
||||
},
|
||||
|
||||
|
||||
handleCheckAll(val) {
|
||||
this.checkedTypes = val ? this.productTypes.map(item => item.id) : [];
|
||||
this.isIndeterminate = false;
|
||||
},
|
||||
handleChecked(value) {
|
||||
let checkedCount = value.length;
|
||||
this.checkAll = checkedCount === this.productTypes.length;
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.productTypes.length;
|
||||
},
|
||||
initLoad() {
|
||||
var that = this;
|
||||
var clientHeight = document.documentElement.clientHeight
|
||||
var lxHeader_height = 67; //查询 头部
|
||||
var card_Height = 109; //分页的高度
|
||||
var topHeight = 50; //页面 头部
|
||||
let height = clientHeight - lxHeader_height - topHeight - card_Height;
|
||||
that.height = height;
|
||||
},
|
||||
|
||||
async getUsers(){
|
||||
const res = await listuser()
|
||||
this.users = res.data
|
||||
this.activeUser = String(this.users[0].id)
|
||||
|
||||
await this.getAdminTypes()
|
||||
await this.getAdminAreas()
|
||||
},
|
||||
async getProductTypes(){
|
||||
const res = await getProductTypes({
|
||||
page:1,
|
||||
page_size:999
|
||||
})
|
||||
this.productTypes = res.data
|
||||
},
|
||||
async getCity() {
|
||||
let city = await getparameter(
|
||||
{
|
||||
number: "city",
|
||||
},
|
||||
false
|
||||
);
|
||||
for (let i = 0; i < city.detail.length; i++) {
|
||||
let area = await getparameter(
|
||||
{
|
||||
pid: city.detail[i].id,
|
||||
},
|
||||
false
|
||||
);
|
||||
city.detail[i].children = area.detail;
|
||||
}
|
||||
this.cities = city.detail;
|
||||
},
|
||||
|
||||
getArrDifference(arr1, arr2){
|
||||
return arr1.concat(arr2).filter((v, i, arr) => {
|
||||
return arr.indexOf(v) === arr.lastIndexOf(v);
|
||||
})
|
||||
},
|
||||
submit(){
|
||||
let areaIds = this.$refs['elTree'].getCheckedNodes().map(item => item.id)
|
||||
let oriAreaIds = this.originalArea.map(item => item.area_id)
|
||||
let areaPromiseAll = [];
|
||||
let areaDifArr = this.getArrDifference(areaIds,oriAreaIds)
|
||||
areaDifArr.forEach(item => {
|
||||
if(oriAreaIds.indexOf(item) === -1){
|
||||
areaPromiseAll.push(saveArea({
|
||||
area_id:item,
|
||||
admin_id:Number(this.activeUser)
|
||||
}))
|
||||
}
|
||||
if(areaIds.indexOf(item) === -1){
|
||||
areaPromiseAll.push(destroyArea(this.originalArea[oriAreaIds.indexOf(item)]?.id))
|
||||
}
|
||||
})
|
||||
let oriTypeIds = this.originalType.map(item => item.product_type_id)
|
||||
let typePromiseAll = [];
|
||||
let typeDifArr = this.getArrDifference(oriTypeIds,this.checkedTypes)
|
||||
typeDifArr.forEach(item => {
|
||||
if(oriTypeIds.indexOf(item) === -1){
|
||||
typePromiseAll.push(saveType({
|
||||
product_type_id:item,
|
||||
admin_id:Number(this.activeUser)
|
||||
}))
|
||||
}
|
||||
if(this.checkedTypes.indexOf(item) === -1){
|
||||
typePromiseAll.push(destroyType(this.originalType[oriTypeIds.indexOf(item)]?.id))
|
||||
}
|
||||
})
|
||||
|
||||
Promise.all([...areaPromiseAll,...typePromiseAll]).then(res => {
|
||||
this.getAdminTypes()
|
||||
this.getAdminAreas()
|
||||
|
||||
this.$message({
|
||||
type:'success',
|
||||
message:'保存成功'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.initLoad()
|
||||
this.getCity()
|
||||
this.getUsers()
|
||||
this.getProductTypes()
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.t-tree {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
background: #eee;
|
||||
/* padding: 100px; */
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #f9f8f8;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #eee;
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
padding: 0 15px;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-container {
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
margin-left: 15px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.role-list {
|
||||
width: 200px;
|
||||
border: 1px solid #eee;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.actived {
|
||||
color: #409efe !important;
|
||||
background-color: #f3f7f9;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.roleitem {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.action-item>label {
|
||||
width: 55px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.action-container>>>.el-tree-node {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.action-container>>>.el-checkbox__label {
|
||||
padding-left: 5px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue