|
@@ -11,63 +11,28 @@
|
|
|
<!--状态和搜索-->
|
|
|
<div class="accountGroup-head flex">
|
|
|
<div class="status flex-wrap"></div>
|
|
|
- <Search
|
|
|
- @getSearchData="getSearchData"
|
|
|
- @clearSearchData="clearSearchData"
|
|
|
- />
|
|
|
+ <Search @getSearchData="getSearchData" @clearSearchData="clearSearchData" />
|
|
|
</div>
|
|
|
<!--账号树-->
|
|
|
<div class="accountGroup-content">
|
|
|
<!-- <OrgTree :dataList="dataList" :renderContent="renderContent" /> -->
|
|
|
- <el-row
|
|
|
- :gutter="24"
|
|
|
- class="bodyContent"
|
|
|
- >
|
|
|
- <el-col
|
|
|
- :span="6"
|
|
|
- class="bodyPart"
|
|
|
- >
|
|
|
+ <el-row :gutter="24" class="bodyContent">
|
|
|
+ <el-col :span="6" class="bodyPart">
|
|
|
<div class="grid-content">
|
|
|
<div class="title">{{ accountGroupType }}树</div>
|
|
|
<div class="contentTree">
|
|
|
- <el-tree
|
|
|
- ref="tree"
|
|
|
- :data="dataListTree"
|
|
|
- :props="defaultProps"
|
|
|
- node-key="GroupId"
|
|
|
- :filter-node-method="filterNode"
|
|
|
- highlight-current
|
|
|
- :default-expanded-keys="expandedKeys"
|
|
|
- :current-node-key="currentKey"
|
|
|
- @node-expand="handleExpand"
|
|
|
- @node-collapse="handleCollapse"
|
|
|
- @node-click="handleNodeClick"
|
|
|
- >
|
|
|
+ <el-tree ref="tree" :data="dataListTree" :props="defaultProps" node-key="GroupId" :filter-node-method="filterNode" highlight-current :default-expanded-keys="expandedKeys" :current-node-key="currentKey" @node-expand="handleExpand" @node-collapse="handleCollapse" @node-click="handleNodeClick">
|
|
|
</el-tree>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col
|
|
|
- :span="18"
|
|
|
- class="bodyPart"
|
|
|
- >
|
|
|
+ <el-col :span="18" class="bodyPart">
|
|
|
<div class="grid-contentTop">
|
|
|
- <div
|
|
|
- class="title"
|
|
|
- style="margin-bottom: 15px"
|
|
|
- >当前{{ accountGroupType }}</div>
|
|
|
+ <div class="title" style="margin-bottom: 15px">当前{{ accountGroupType }}</div>
|
|
|
<div class="content">
|
|
|
- <el-empty
|
|
|
- :image-size="100"
|
|
|
- style="padding: 0"
|
|
|
- v-if="currDataArr.length < 1"
|
|
|
- ></el-empty>
|
|
|
+ <el-empty :image-size="100" style="padding: 0" v-if="currDataArr.length < 1"></el-empty>
|
|
|
<el-row>
|
|
|
- <el-col
|
|
|
- :span="8"
|
|
|
- v-for="data in currDataArr"
|
|
|
- :key="data.GroupId"
|
|
|
- >
|
|
|
+ <el-col :span="8" v-for="data in currDataArr" :key="data.GroupId">
|
|
|
<div class="itemBox">
|
|
|
<el-row :gutter="24">
|
|
|
<el-col :span="12">
|
|
@@ -76,31 +41,12 @@
|
|
|
<el-col :span="12">
|
|
|
<div class="flex info">
|
|
|
<div class="icon">
|
|
|
- <el-tooltip
|
|
|
- v-is="['grouptree_btn_update_group']"
|
|
|
- effect="dark"
|
|
|
- :content="`编辑${accountGroupType}`"
|
|
|
- placement="bottom"
|
|
|
- >
|
|
|
- <span
|
|
|
- :title="`编辑${accountGroupType}`"
|
|
|
- class="cap cap-edit"
|
|
|
- @click="renderEdit(data)"
|
|
|
- v-if="data.GroupId != -1"
|
|
|
- ></span>
|
|
|
+ <el-tooltip v-is="['grouptree_btn_update_group']" effect="dark" :content="`编辑${accountGroupType}`" placement="bottom">
|
|
|
+ <span class="cap cap-edit" @click="renderEdit(data)" v-if="data.GroupId != -1"></span>
|
|
|
</el-tooltip>
|
|
|
|
|
|
- <el-tooltip
|
|
|
- v-is="['grouptree_btn_add_group']"
|
|
|
- effect="dark"
|
|
|
- :content="`新增${accountGroupType}`"
|
|
|
- placement="bottom"
|
|
|
- >
|
|
|
- <span
|
|
|
- :title="`新增${accountGroupType}`"
|
|
|
- class="cap cap-sub"
|
|
|
- @click="renderAdd(data)"
|
|
|
- ></span>
|
|
|
+ <el-tooltip v-is="['grouptree_btn_add_group']" effect="dark" :content="`新增${accountGroupType}`" placement="bottom">
|
|
|
+ <span class="cap cap-sub" @click="renderAdd(data)"></span>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -113,10 +59,7 @@
|
|
|
<span class="msg">职员:</span>
|
|
|
<span>{{ data.OfficerCount }}</span>
|
|
|
</el-col> -->
|
|
|
- <el-col
|
|
|
- :span="24"
|
|
|
- v-if="data.GroupId != -1"
|
|
|
- >
|
|
|
+ <el-col :span="24" v-if="data.GroupId != -1">
|
|
|
<el-row>
|
|
|
<el-col :span="12">
|
|
|
<span class="msg">账号数:</span>
|
|
@@ -128,30 +71,13 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
- <el-col
|
|
|
- :span="12"
|
|
|
- v-if="data.GroupId != -1"
|
|
|
- >
|
|
|
+ <el-col :span="12" v-if="data.GroupId != -1">
|
|
|
<span class="msg">状态:</span>
|
|
|
- <span
|
|
|
- class="use"
|
|
|
- v-if="data.Status == '1'"
|
|
|
- >启用</span>
|
|
|
- <span
|
|
|
- class="unUse"
|
|
|
- v-if="data.Status != '1'"
|
|
|
- >禁用</span>
|
|
|
+ <span class="use" v-if="data.Status == '1'">启用</span>
|
|
|
+ <span class="unUse" v-if="data.Status != '1'">禁用</span>
|
|
|
</el-col>
|
|
|
- <el-col
|
|
|
- v-is="['grouptree_btn_state_swatch']"
|
|
|
- :span="12"
|
|
|
- v-if="data.GroupId != -1"
|
|
|
- >
|
|
|
- <el-switch
|
|
|
- active-color="#6F81BC"
|
|
|
- v-model="data.flag"
|
|
|
- @change="renderChange(data)"
|
|
|
- ></el-switch>
|
|
|
+ <el-col v-is="['grouptree_btn_state_swatch']" :span="12" v-if="data.GroupId != -1">
|
|
|
+ <el-switch active-color="#6F81BC" v-model="data.flag" @change="renderChange(data)"></el-switch>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
@@ -162,27 +88,13 @@
|
|
|
<div class="grid-contentBottom">
|
|
|
<div class="title">下级{{ accountGroupType }}</div>
|
|
|
<div class="content">
|
|
|
- <el-empty
|
|
|
- :image-size="150"
|
|
|
- v-if="childrenData.length < 1"
|
|
|
- ></el-empty>
|
|
|
+ <el-empty :image-size="150" v-if="childrenData.length < 1"></el-empty>
|
|
|
<el-row :gutter="24">
|
|
|
- <el-col
|
|
|
- :span="6"
|
|
|
- v-for="(data, index) in childrenData"
|
|
|
- :key="data.GroupId"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-is="['grouptree_btn_del_group']"
|
|
|
- class="info-close"
|
|
|
- @click="onNodeClick(data, index)"
|
|
|
- >
|
|
|
+ <el-col :span="6" v-for="(data, index) in childrenData" :key="data.GroupId">
|
|
|
+ <div v-is="['grouptree_btn_del_group']" class="info-close" @click="onNodeClick(data, index)">
|
|
|
<i class="el-icon-close"></i>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="itemBox"
|
|
|
- @click.stop="childrenClick(data)"
|
|
|
- >
|
|
|
+ <div class="itemBox" @click.stop="childrenClick(data)">
|
|
|
<!-- <div class="status" v-if="data.OrganType == 1"></div>
|
|
|
<div class="status2" v-if="data.OrganType != 1"></div> -->
|
|
|
<el-row>
|
|
@@ -218,39 +130,17 @@
|
|
|
></span
|
|
|
></el-tooltip> -->
|
|
|
|
|
|
- <el-tooltip
|
|
|
- v-is="['grouptree_btn_update_group']"
|
|
|
- effect="dark"
|
|
|
- :content="`编辑${accountGroupType}`"
|
|
|
- placement="bottom"
|
|
|
- >
|
|
|
- <span
|
|
|
- :title="`编辑${accountGroupType}`"
|
|
|
- class="cap cap-edit"
|
|
|
- @click.stop="renderEdit(data)"
|
|
|
- v-if="data.GroupId != -1"
|
|
|
- ></span>
|
|
|
+ <el-tooltip v-is="['grouptree_btn_update_group']" effect="dark" :content="`编辑${accountGroupType}`" placement="bottom">
|
|
|
+ <span class="cap cap-edit" @click.stop="renderEdit(data)" v-if="data.GroupId != -1"></span>
|
|
|
</el-tooltip>
|
|
|
|
|
|
- <el-tooltip
|
|
|
- v-is="['grouptree_btn_add_group']"
|
|
|
- effect="dark"
|
|
|
- :content="`新增${accountGroupType}`"
|
|
|
- placement="bottom"
|
|
|
- >
|
|
|
- <span
|
|
|
- :title="`新增${accountGroupType}`"
|
|
|
- class="cap cap-sub"
|
|
|
- @click.stop="renderAdd(data)"
|
|
|
- ></span>
|
|
|
+ <el-tooltip v-is="['grouptree_btn_add_group']" effect="dark" :content="`新增${accountGroupType}`" placement="bottom">
|
|
|
+ <span class="cap cap-sub" @click.stop="renderAdd(data)"></span>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col
|
|
|
- :span="24"
|
|
|
- v-if="data.GroupId != -1"
|
|
|
- >
|
|
|
+ <el-col :span="24" v-if="data.GroupId != -1">
|
|
|
<el-row>
|
|
|
<el-col :span="12">
|
|
|
<span class="msg">账号数:</span>
|
|
@@ -262,31 +152,13 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
- <el-col
|
|
|
- :span="12"
|
|
|
- v-if="data.GroupId != -1"
|
|
|
- >
|
|
|
+ <el-col :span="12" v-if="data.GroupId != -1">
|
|
|
<span class="msg">状态:</span>
|
|
|
- <span
|
|
|
- class="use"
|
|
|
- v-if="data.Status == '1'"
|
|
|
- >启用</span>
|
|
|
- <span
|
|
|
- class="unUse"
|
|
|
- v-if="data.Status != '1'"
|
|
|
- >禁用</span>
|
|
|
+ <span class="use" v-if="data.Status == '1'">启用</span>
|
|
|
+ <span class="unUse" v-if="data.Status != '1'">禁用</span>
|
|
|
</el-col>
|
|
|
- <el-col
|
|
|
- v-is="['grouptree_btn_state_swatch']"
|
|
|
- :span="12"
|
|
|
- v-if="data.GroupId != -1"
|
|
|
- >
|
|
|
- <el-switch
|
|
|
- active-color="#6F81BC"
|
|
|
- v-model="data.flag"
|
|
|
- @click.stop.native
|
|
|
- @change="childrenRenderChange(data, index)"
|
|
|
- ></el-switch>
|
|
|
+ <el-col v-is="['grouptree_btn_state_swatch']" :span="12" v-if="data.GroupId != -1">
|
|
|
+ <el-switch active-color="#6F81BC" v-model="data.flag" @click.stop.native @change="childrenRenderChange(data, index)"></el-switch>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
@@ -303,16 +175,8 @@
|
|
|
<div class="title">删除{{ accountGroupType }}</div>
|
|
|
<div class="content">是否确认删除{{ title }}?</div>
|
|
|
<div class="foot right t30">
|
|
|
- <el-button
|
|
|
- size="medium"
|
|
|
- class="r24"
|
|
|
- @click="remove"
|
|
|
- type="danger"
|
|
|
- >删除</el-button>
|
|
|
- <el-button
|
|
|
- size="medium"
|
|
|
- @click="flag = false"
|
|
|
- >取消</el-button>
|
|
|
+ <el-button size="medium" class="r24" @click="remove" type="danger">删除</el-button>
|
|
|
+ <el-button size="medium" @click="flag = false">取消</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Dialog>
|
|
@@ -329,7 +193,7 @@ export default {
|
|
|
name: 'accountGroup',
|
|
|
components: { Search, Dialog },
|
|
|
mixins: [treeData],
|
|
|
- data() {
|
|
|
+ data () {
|
|
|
return {
|
|
|
dataIndex: 1,
|
|
|
dataNum: 0,
|
|
@@ -350,11 +214,15 @@ export default {
|
|
|
delIndex: 0
|
|
|
}
|
|
|
},
|
|
|
- created: function () {
|
|
|
+ created () {
|
|
|
let keyWords = ''
|
|
|
+ const treeEx = sessionStorage.getItem('accountTreeDatas');
|
|
|
if (this.$route.query.keyWords) {
|
|
|
keyWords = this.$route.query.keyWords
|
|
|
}
|
|
|
+ if (treeEx) {
|
|
|
+ this.expandedKeys = JSON.parse(treeEx);
|
|
|
+ }
|
|
|
this.getGroupTree(keyWords)
|
|
|
},
|
|
|
watch: {
|
|
@@ -366,7 +234,7 @@ export default {
|
|
|
deep: true
|
|
|
},
|
|
|
currentKey: {
|
|
|
- handler(val) {
|
|
|
+ handler (val) {
|
|
|
this.$nextTick(() => {
|
|
|
this.$refs.tree.setCurrentKey(val)
|
|
|
})
|
|
@@ -374,35 +242,35 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- filterNode(value, data) {
|
|
|
+ filterNode (value, data) {
|
|
|
if (!value) return true
|
|
|
return data.GroupName.indexOf(value) !== -1
|
|
|
},
|
|
|
// 添加组织
|
|
|
- renderAdd(data) {
|
|
|
+ renderAdd (data) {
|
|
|
this.$router.push({
|
|
|
path: '/accountGroup/Add',
|
|
|
query: { GroupUpId: data.GroupId }
|
|
|
})
|
|
|
},
|
|
|
// 修改组织
|
|
|
- renderEdit(data) {
|
|
|
+ renderEdit (data) {
|
|
|
this.$router.push({
|
|
|
path: '/accountGroup/Edit',
|
|
|
query: { GroupUpId: data.GroupUpid, GroupId: data.GroupId }
|
|
|
})
|
|
|
},
|
|
|
// 新增职员
|
|
|
- renderMember(data) {
|
|
|
+ renderMember (data) {
|
|
|
this.$message.warning('功能开发中')
|
|
|
},
|
|
|
// 切换状态
|
|
|
- renderChange(data) {
|
|
|
+ renderChange (data) {
|
|
|
const { GroupId, flag } = data
|
|
|
this.handleChange(GroupId, flag)
|
|
|
},
|
|
|
// 下级切换状态
|
|
|
- async childrenRenderChange(data, index) {
|
|
|
+ async childrenRenderChange (data, index) {
|
|
|
const { GroupId, flag } = data
|
|
|
const isChildren = true
|
|
|
this.handleChange(GroupId, flag, index, isChildren)
|
|
@@ -443,11 +311,11 @@ export default {
|
|
|
// }
|
|
|
},
|
|
|
// 删除组织
|
|
|
- remove() {
|
|
|
+ remove () {
|
|
|
this.deleteOrg(this.dataId)
|
|
|
},
|
|
|
// 查询
|
|
|
- getSearchData(val) {
|
|
|
+ getSearchData (val) {
|
|
|
if (val) {
|
|
|
this.$router.replace({ path: '/accountGroup', query: { keyWords: val } })
|
|
|
} else if (this.$route.query) {
|
|
@@ -456,19 +324,19 @@ export default {
|
|
|
this.$refs.tree.filter(val)
|
|
|
},
|
|
|
// 清除查询
|
|
|
- clearSearchData() {
|
|
|
+ clearSearchData () {
|
|
|
this.$router.replace('/accountGroup')
|
|
|
this.getGroupTree()
|
|
|
},
|
|
|
// 节点关闭按钮点击
|
|
|
- onNodeClick(data, index) {
|
|
|
+ onNodeClick (data, index) {
|
|
|
this.delIndex = index
|
|
|
this.flag = true
|
|
|
this.dataId = data.GroupId
|
|
|
this.title = data.GroupName
|
|
|
},
|
|
|
// 获取指定数据
|
|
|
- decompose(value, key, id) {
|
|
|
+ decompose (value, key, id) {
|
|
|
let data = _.cloneDeep(value)
|
|
|
let arr = []
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
@@ -479,7 +347,7 @@ export default {
|
|
|
return arr
|
|
|
},
|
|
|
// 更改下级状态
|
|
|
- setChildrenStatus(id, flag) {
|
|
|
+ setChildrenStatus (id, flag) {
|
|
|
this.dataArr.forEach(data => {
|
|
|
if (data.GroupUpid === id) {
|
|
|
data.Status = flag ? 1 : 0
|
|
@@ -490,7 +358,7 @@ export default {
|
|
|
},
|
|
|
// -----------获取数据------------
|
|
|
// 状态变更
|
|
|
- async handleChange(id, flag, index, isChildren = false) {
|
|
|
+ async handleChange (id, flag, index, isChildren = false) {
|
|
|
const Status = flag ? 1 : 0
|
|
|
try {
|
|
|
const res = await ChangeGroupStatus({
|
|
@@ -539,7 +407,7 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
// 删除
|
|
|
- async deleteOrg(id) {
|
|
|
+ async deleteOrg (id) {
|
|
|
try {
|
|
|
const res = await DeleteGroup({
|
|
|
GroupId: id
|
|
@@ -560,7 +428,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 树点击
|
|
|
- handleNodeClick(data) {
|
|
|
+ handleNodeClick (data) {
|
|
|
const dataNew = _.cloneDeep(data)
|
|
|
this.currentKey = dataNew.GroupId
|
|
|
this.currDataArr = []
|
|
@@ -569,7 +437,7 @@ export default {
|
|
|
this.childrenData = this.decompose(this.dataArr, 'GroupUpid', this.currentKey)
|
|
|
},
|
|
|
// 下级卡片点击
|
|
|
- childrenClick(data) {
|
|
|
+ childrenClick (data) {
|
|
|
const dataNew = _.cloneDeep(data)
|
|
|
this.currentKey = dataNew.GroupId
|
|
|
this.currDataArr = []
|
|
@@ -581,17 +449,19 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 节点展开
|
|
|
- handleExpand(obj) {
|
|
|
+ handleExpand (obj) {
|
|
|
this.expandedKeys.push(obj.GroupId)
|
|
|
+ sessionStorage.setItem('accountTreeDatas', JSON.stringify(this.expandedKeys))
|
|
|
},
|
|
|
// 节点收起
|
|
|
- handleCollapse(obj) {
|
|
|
+ handleCollapse (obj) {
|
|
|
const { GroupId, children } = obj
|
|
|
children.length && this.collapseChilren(children)
|
|
|
this.expandedKeys = this.expandedKeys.filter(key => key !== GroupId)
|
|
|
+ sessionStorage.setItem('accountTreeDatas', JSON.stringify(this.expandedKeys))
|
|
|
},
|
|
|
// 收起子节点
|
|
|
- collapseChilren(children) {
|
|
|
+ collapseChilren (children) {
|
|
|
children.forEach(child => {
|
|
|
const { GroupId, children } = child
|
|
|
children.length && this.collapseChilren(children)
|
|
@@ -807,33 +677,33 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.cap-plus {
|
|
|
- background-image: url('../../../assets/status/ic_plus.png');
|
|
|
+ background-image: url("../../../assets/status/ic_plus.png");
|
|
|
&:hover {
|
|
|
- background-image: url('../../../assets/status/ic_plus_hovar.png');
|
|
|
+ background-image: url("../../../assets/status/ic_plus_hovar.png");
|
|
|
}
|
|
|
}
|
|
|
.cap-edit {
|
|
|
- background-image: url('../../../assets/status/ic_edit.png');
|
|
|
+ background-image: url("../../../assets/status/ic_edit.png");
|
|
|
&:hover {
|
|
|
- background-image: url('../../../assets/status/ic_edit_hovar.png');
|
|
|
+ background-image: url("../../../assets/status/ic_edit_hovar.png");
|
|
|
}
|
|
|
}
|
|
|
.cap-sub {
|
|
|
- background-image: url('../../../assets/status/ic_subordinate.png');
|
|
|
+ background-image: url("../../../assets/status/ic_subordinate.png");
|
|
|
&:hover {
|
|
|
- background-image: url('../../../assets/status/ic_subordinate_hovar.png');
|
|
|
+ background-image: url("../../../assets/status/ic_subordinate_hovar.png");
|
|
|
}
|
|
|
}
|
|
|
.cap-job {
|
|
|
- background-image: url('../../../assets/status/ic_jobs.png');
|
|
|
+ background-image: url("../../../assets/status/ic_jobs.png");
|
|
|
&:hover {
|
|
|
- background-image: url('../../../assets/status/ic_jobs_hovar.png');
|
|
|
+ background-image: url("../../../assets/status/ic_jobs_hovar.png");
|
|
|
}
|
|
|
}
|
|
|
.cap-member {
|
|
|
- background-image: url('../../../assets/status/ic_member.png');
|
|
|
+ background-image: url("../../../assets/status/ic_member.png");
|
|
|
&:hover {
|
|
|
- background-image: url('../../../assets/status/ic_member_hovar.png');
|
|
|
+ background-image: url("../../../assets/status/ic_member_hovar.png");
|
|
|
}
|
|
|
}
|
|
|
}
|