206 lines
8.4 KiB
Vue
206 lines
8.4 KiB
Vue
<template>
|
||
<div class="layout-content-wrap background-color-fff border-radius-8">
|
||
<div class="border-b-solid-lighter-1 p-h-24">
|
||
<div class="flex-row justify-content-between height-56 align-items-center">
|
||
<div class="color-text-primary f22">团队管理</div>
|
||
<div class="flex-row color-text-regular f14">
|
||
<div class="mr-24">
|
||
<el-input
|
||
placeholder="请输入团队名称"
|
||
suffix-icon="el-icon-search"
|
||
v-model.trim="queryData.name"
|
||
size="small"
|
||
clearable
|
||
@change="handleSearch"
|
||
@keydown.enter.native="handleSearch"
|
||
>
|
||
</el-input>
|
||
</div>
|
||
<el-button type="primary" @click="handleAddForm" size="small">新增团队</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layout-tabs-content-box">
|
||
<!-- table -->
|
||
<div class="">
|
||
<el-table ref="monthlyPlanTable"
|
||
:data="tableData"
|
||
:header-cell-style="{background:'#F5F7FA'}"
|
||
row-key="id"
|
||
lazy
|
||
:load="load"
|
||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||
>
|
||
<el-table-column prop="name" label="团队名称" width="250"></el-table-column>
|
||
<el-table-column label="团队负责人">
|
||
<template slot-scope="scope">
|
||
<div class="flex-row">
|
||
{{ListToString(scope.row.masterName)}}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="团队负责人手机号">
|
||
<template slot-scope="scope">
|
||
<div class="flex-row">
|
||
{{ListToString(scope.row.masterPhone)}}
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="count" label="团队人数" width="120"></el-table-column>
|
||
<el-table-column prop="remark" label="团队描述" width="350"></el-table-column>
|
||
<el-table-column label="操作" width="190">
|
||
<template slot-scope="scope">
|
||
<div class="flex-row">
|
||
<div class="f14 color-1960F4 cursor-pointer mr-8" v-if="scope.row.pid == 0" @click="handleAddDeptForm(scope,1)">添加团队</div>
|
||
<div class="f14 color-1960F4 cursor-pointer mr-8" v-if="scope.row.pid == 0" @click="handleAddForm(scope)">编辑</div>
|
||
<div class="f14 color-1960F4 cursor-pointer mr-8" v-else @click="handleAddDeptForm(scope,0)">编辑</div>
|
||
<div class="f14 color-1960F4 cursor-pointer" @click="handleDelete(scope)">删除</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="text-center p-v-24">
|
||
<el-pagination
|
||
@size-change="getDeptList"
|
||
@current-change="getDeptList"
|
||
:current-page="queryData.current"
|
||
:page-size="queryData.size"
|
||
layout="total, prev, pager, next, jumper"
|
||
:total="total">
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 新增-编辑 -->
|
||
<addOrEditAreaDialog v-if="addOrEditAreaConfig" :addOrEditAreaConfig.sync="addOrEditAreaConfig" />
|
||
<addOrEditDeptDialog v-if="addOrEditDeptConfig" :addOrEditDeptConfig.sync="addOrEditDeptConfig" />
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import systemManageApi from "@/services/systemManage";
|
||
export default {
|
||
components: {
|
||
addOrEditDeptDialog: () => import('./components/addOrEditDeptDialog.vue'),
|
||
addOrEditAreaDialog: () => import('./components/addOrEditAreaDialog.vue'),
|
||
},
|
||
data() {
|
||
return {
|
||
tableData:[],
|
||
queryData: {
|
||
pid:0,
|
||
name:'',
|
||
current: 1,
|
||
size: 10,
|
||
companyId:this.$store.state.userinfo.companyId,//机构id 平台管理默认为0
|
||
},
|
||
total: 0,
|
||
addOrEditDeptConfig:null,//新增弹窗
|
||
addOrEditAreaConfig:null,//新增弹窗
|
||
map: new Map(),
|
||
};
|
||
},
|
||
created() {
|
||
this.getDeptList(1)
|
||
},
|
||
methods: {
|
||
// 新增
|
||
handleAddForm(scope){
|
||
let title = scope.row?'编辑团队':'新增团队'
|
||
let data = scope.row?scope.row:''
|
||
this.addOrEditAreaConfig={
|
||
title:title,
|
||
data: data
|
||
}
|
||
},
|
||
// 新增
|
||
handleAddDeptForm(scope,type){
|
||
let title = type == 0?'编辑团队':'新增团队'
|
||
let data = scope.row
|
||
this.addOrEditDeptConfig={
|
||
title:title,
|
||
data: data
|
||
}
|
||
},
|
||
// 搜索
|
||
handleSearch(){
|
||
this.queryData.current = 1;
|
||
this.queryData.size = 10;
|
||
this.getDeptList()
|
||
},
|
||
getDeptList(val,parentId = 0){
|
||
console.log(parentId,'parentId')
|
||
if(parentId == 0)
|
||
{
|
||
if(val!=undefined){this.queryData.current = val}
|
||
systemManageApi.getDeptList(this.queryData).then(res => {
|
||
if (!res.code) {
|
||
this.tableData = res.records;
|
||
this.tableData.forEach(item =>{
|
||
item.hasChildren = true
|
||
})
|
||
|
||
this.total = res.total;
|
||
}
|
||
})
|
||
}
|
||
else
|
||
{
|
||
this.refresh(parentId)
|
||
}
|
||
|
||
},
|
||
// 删除
|
||
handleDelete(scope){
|
||
this.$confirm("此操作将永久删除该区域, 是否继续?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
}).then(() => {
|
||
if(!this.$clickThrottle()) { return }//防止重复点击
|
||
systemManageApi.deleteDeptById({ id: scope.row.id }).then((res) => {
|
||
this.$message.success("成功");
|
||
this.getDeptList(1,scope.row.pid)
|
||
});
|
||
}).catch((e) => {});
|
||
},
|
||
ListToString(letlist){
|
||
let letString=''
|
||
if(letlist){
|
||
letlist.forEach((element,index) => {
|
||
if(index==0){letString=element}else{letString+=','+element}
|
||
});
|
||
}
|
||
return letString;
|
||
},
|
||
load(tree, treeNode, resolve) {
|
||
// console.log(tree,treeNode,resolve)
|
||
systemManageApi.getDeptList({pid:tree.id,name:"",current:1,size:50,companyId:this.$store.state.userinfo.companyId}).then(res => {
|
||
if (!res.code) {
|
||
// 在节点展示加载数据时记录treeNode节点
|
||
this.map.set(tree.id, {tree,treeNode,resolve});
|
||
resolve(res.records)
|
||
}
|
||
})
|
||
},
|
||
// 在新增、编辑、删除子节点时，通过父级id找到对应的treeNode，重新加载子节点列表，完成数据刷新
|
||
refresh(parentId) {
|
||
if(this.map.get(parentId)) {
|
||
const {tree,treeNode,resolve} = this.map.get(parentId);
|
||
if(tree) {
|
||
this.load(tree, treeNode, resolve);
|
||
}
|
||
}
|
||
},
|
||
}
|
||
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.el-table--fit {
|
||
border:1px solid $border-color-lighter !important;
|
||
border-bottom: 0!important;
|
||
}
|
||
|
||
</style> |