提交 b77071fc 编写于 作者: kai.wang's avatar kai.wang

新增区域选择ui

上级 ea2c6114
......@@ -2,6 +2,7 @@
<div class="member-management" id="screenSet">
<el-row type="flex" justify="space-around" class="mm-nav" align="middle">
<el-col :span="20">
<el-button :type="areabtn" round class="margin-l" @click="checkTab(0)" v-show='isAraeEdit' >可访问本圈的地区</el-button>
<el-button :type="orgbtn" round class="margin-l" @click="checkTab(1)">可访问本圈的机构 ({{orgTotal}})</el-button>
<el-button :type="plebtn" round class="margin-l" @click="checkTab(2)">可访问本圈的人员 ({{pleTotal}})</el-button>
<span class="text inlin" @click="goBalck">黑名单</span>
......@@ -26,6 +27,11 @@
@setPleTotal="setPleTotal"
ref='renyaun'
></renyaun>
<region
v-show="tab == 0"
:circleId='circleId'
:roleType='roleType'
></region>
</div>
</div>
</template>
......@@ -34,6 +40,7 @@
import * as commonUtil from "@/utils/utils";
import org from '@/components/yqrange/member-management/org'
import renyaun from '@/components/yqrange/member-management/renyuan'
import region from '@/components/yqrange/member-management/region'
import { getCircleRole } from '@/utils/yqrange/rangeApi'
export default {
props: {
......@@ -51,20 +58,34 @@ export default {
},
data() {
return {
tab: 1,
orgbtn: 'primary',
tab: 0,
areabtn: 'primary',
plebtn: '',
orgbtn:'',
orgTotal: 0,
pleTotal: 0,
role: 0
role: 0,
isAraeEdit:false,//是否显示可访问本圈的地区
}
},
components: {
org,
renyaun
renyaun,
region
},
created() {
this.getRole()
this.roleType = 1
if(this.roleType == 1){
//内部可以访问本圈的地区
this.isAraeEdit = true
this.tab = 0
this.areabtn = 'primary'
}else{
this.isAraeEdit = false
this.tab = 1
this.orgbtn = 'primary'
}
},
// 挂载到Dom完成时
mounted: function() {
......@@ -87,9 +108,15 @@ export default {
if (v == 1) {
this.orgbtn = 'primary'
this.plebtn = ''
} else {
this.areabtn = ''
}else if (v ==2) {
this.orgbtn = ''
this.plebtn = 'primary'
this.areabtn = ''
} else {
this.areabtn = 'primary'
this.orgbtn = ''
this.plebtn = ''
}
},
setOrgTotal(n) {
......
<template>
<div class="organization">
<el-row :gutter="20">
<el-col class="rim" :span="12">
<el-tree
default-expand-all
:data="treeData"
show-checkbox
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
@check="onChecked"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button
v-if="node.level < 5"
type="text"
icon="el-icon-caret-bottom"
size="small"
@click="() => append(data,node)"
></el-button>
</span>
</span>
</el-tree>
</el-col>
<el-col :span="11" v-show = 'false'>
<p class="area-p">项目范围包含下列区域所有机构和人员({{ tagsRegion.length }})</p>
<el-tag
v-for="tag in tagsRegion"
:key="tag.name"
closable
:type="tag.type"
@close="handleCloseTree(tag)"
>{{tag.name}}</el-tag>
</el-col>
</el-row>
<div style="margin-top: 60px;margin-left: 250px;">
<el-button type="primary" size="small" @click="save">保存</el-button>
</div>
</div>
</template>
<script>
import { openLoading, closeLoading } from "@/utils/utils";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import * as operationData from "@/utils/operation";
import { moRelSearch, morDeleteOrg } from '@/utils/yqrange/memberApi';
import { getOrgProvincesReq } from '@/utils/yqrange/rangeApi';
let vm = null;
export default {
props: {
circleId: {
type: Number | String,
default: 1
},
roleType: {
type: Number | String,
default: 1
},
},
data() {
return {
allSelectedKeys: [],
updatedTree: false,
organizationRegion: [],
defaultProps: {
children: "children",
label: "label",
isLeaf: "isLeaf"
},
treeData: [],
tagsRegion: []
}
},
created() {
vm = this;
//Idtype:1,内部 2.外部
vm.idType = localStorage.getItem("storageIdType");
if(vm.idType == 1){
}
else {
}
this.getAdministrative();
},
mounted() {
},
methods: {
//通过key设置tree
setCheckedKeys(tagsRegion) {
let treeKeyList = [];
for (let index = 0; index < tagsRegion.length; index++) {
treeKeyList[index] = tagsRegion[index].key;
}
this.$refs.tree.setCheckedKeys(treeKeyList);
},
//获取勾选树
getCheckedTree() {
if (this.idType != 2) {
let allTree = JSON.parse(JSON.stringify(this.treeData[0].children));
let changedTags = JSON.parse(JSON.stringify(this.tagsRegion));
let organizationArea = operationData.treeHandler(allTree, changedTags);
debugger
console.log("多级树:", organizationArea);
this.organizationRegion = organizationArea;
}
},
//初始化范围树
setTreeData(administrative) {
let treeIdList = [];
let checkList = [];
for (let i = 0; i < administrative.length; i++) {
treeIdList.push(administrative[i].id);
checkList[i] = {};
checkList[i].name = administrative[i].label;
checkList[i].key = administrative[i].id;
}
debugger
console.log(treeIdList);
this.$refs.tree.setCheckedKeys(treeIdList);
this.tagsRegion = checkList;
},
//查询行政范围(树)
getAdministrative() {
let req = {
projectId: 87//826,874,832
};
openLoading(vm);
vm.GET("portal/scope/v1/administrative", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
let administrativeAll = res.data.administrativeAll;
let administrative = res.data.administrative;
this.treeData = [];
this.treeData[0] = administrativeAll;
this.setTreeData(administrative);
this.getCheckedTree();
}
});
},
onChecked(node, data) {
debugger
vm.checkUpdate(node, data);
//重构归并树
let checkedTree = operationData.getSimpleCheckedNodes(
this.$refs.tree.store
);
let halfCheckedTree = this.$refs.tree.getHalfCheckedKeys();
let allSelectedKeys = operationData.setSelectedKeys(
checkedTree,
halfCheckedTree
);
//重构内容
this.allSelectedKeys = allSelectedKeys;
this.initCheckList(allSelectedKeys);
//改变行政范围后,更新设定机构和设定人员
this.updateOrganizationAndPerson(allSelectedKeys);
this.updatedTree = true;
},
//列举选中地区 右侧显示数据
initCheckList(allSelectedKeys) {
this.tagsRegion = [];
debugger
let nodeData = this.$refs.tree.getCheckedNodes();
for (let i = 0; i < nodeData.length; i++) {
for (let j = 0; j < allSelectedKeys.length; j++) {
if (
allSelectedKeys[j].type == 1 &&
nodeData[i].id == allSelectedKeys[j].key
) {
let tagObj = {};
tagObj.name = nodeData[i].label;
tagObj.key = nodeData[i].id;
this.tagsRegion.push(tagObj);
}
}
}
},
checkUpdate(node, data) {
let flag = -1;
flag = data.checkedKeys.indexOf(node.id);
if (vm.status4Flag == 1 && flag >= 0) {
console.log(node, data, flag, vm.status4Flag);
vm.nowCheck = node;
vm.warnType = 0;
vm.dialogWarn = true;
// this.$refs.tree.setChecked(data,false)
}
},
}
}
</script>
<style >
/*.organization .el-dialog {*/
/*max-height: 90%;*/
/*overflow: scroll;*/
/*}*/
</style>
<style lang="scss" scoped>
.organization {
.add-organization {
margin-left: 36px;
line-height: 20px;
width: 120px;
cursor: pointer;
padding-top: 10px;
i {
font-size: 18px;
margin-right: 2px;
}
}
}
</style>
......@@ -54,7 +54,7 @@ service.interceptors.request.use(config => {
}
if( process.env.BUILD_ENV == "development" ){ // 本地开发环境qgit
// console.log('环境变量>>>> ', process.env.BUILD_ENV);
config.headers['token'] = 'C5172D7D7825463CA46752A894236AC2';
config.headers['token'] = '1F2F3D4E36644D95A5CBE0A0A7556302';
// config.headers['token'] = localStorage.getItem('storageToken')
}else{
config.headers['token'] = localStorage.getItem('storageToken')
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册