<template>
|
<div class='page_clap'>
|
<h1 class="h1">微团队</h1>
|
|
<Statistics :list="list"></Statistics>
|
|
<div class="header">
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item label="关键词搜索" style="" >
|
<el-input style="width:385px" size="small" v-model="bar.keyword" placeholder="请输入团队名称、团队成员、联系电话进行查找"></el-input>
|
</el-form-item>
|
<el-form-item label="性别">
|
<el-select v-model="bar.gender" placeholder="请选择">
|
<el-option
|
v-for="item in genderList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="onSearch">查询</el-button>
|
<el-button @click="Reset" size="small">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 操作按钮 -->
|
<div class="operation-btn">
|
<span class="erro-text" @click="dowErr" v-if="errUrl">下载错误表格</span>
|
<el-upload
|
name="file"
|
accept=".xls, .xlsx"
|
:headers={Authorization:Authorization}
|
class="upload-demo"
|
style="display:inline-block"
|
:show-file-list="false"
|
:action="importDataurl"
|
:on-success="success"
|
:on-error="error"
|
:before-upload="beforeUpload"
|
multiple>
|
<el-button type="primary">导入</el-button>
|
</el-upload>
|
<el-button size="small" type="primary" @click="addModel()">添加团队成员</el-button>
|
<el-button size="small" @click="dow" >下载模板</el-button>
|
<el-button @click="exports" size="small" type="primary" plain >导出</el-button>
|
</div>
|
|
<div class="flex-content">
|
<!-- -->
|
<div class="admin-content">
|
<!-- <el-collapse accordion>
|
<el-collapse-item> -->
|
<div class="collapseBox">
|
<div class="titile">
|
<span class="name">团队类型</span>
|
<span class="btns">
|
<span class="fc-1" @click="addTeam()"> + 添加</span>
|
</span>
|
</div>
|
<div class="flex-s chilren-lie" v-for="(type,index) in teamTypeData" :key="index">
|
<span :class="chooseindex == type.id ? 'active' : ''" @click="getTeamName(type.id,index)">{{type.name}}</span>
|
<span class="btns pointer">
|
<span class="fc-2 " @click="editTeam(type)">编辑</span><span class="fc-3" @click="deletesTeam(type.id)">删除</span>
|
</span>
|
</div>
|
</div>
|
<!-- </el-collapse-item>
|
</el-collapse> -->
|
</div>
|
<div class="admin-content">
|
<!-- <el-collapse accordion>
|
<el-collapse-item> -->
|
<div class="collapseBox">
|
<div class="titile">
|
<span class="name">团队</span>
|
<span class="btns">
|
<span class="fc-1" @click="addTeamModel()">添加</span>
|
</span>
|
</div>
|
<div class="flex-s chilren-lie custom2" v-for="(teamName,i) in teamPeopleData" :key="i">
|
<span :class="choosename == teamName.id ? 'active' : ''" @click="getTeamTable(teamName,i)">{{teamName.name}}</span>
|
<span class="btns pointer">
|
<span class="fc-2 " @click="editNameTeam(teamName)">编辑</span><span class="fc-3" @click="deletesNameTeam(teamName.id)">删除</span>
|
</span>
|
</div>
|
</div>
|
<!-- </div>
|
</el-collapse-item>
|
</el-collapse> -->
|
</div>
|
<!-- 表单 -->
|
<div class="tab">
|
<v-table
|
:trs="trs"
|
:tds="tds"
|
ref="table"
|
>
|
<template v-slot:btn="{scope}">
|
<div class="table_flex">
|
<el-button type="text" class="col_primary" @click="editModel(scope)">编辑</el-button>
|
</div>
|
<div class="table_flex">
|
<el-button type="text" class="col_primary" @click="deletes(scope)">删除</el-button>
|
</div>
|
</template>
|
<template v-slot:gender="{scope}">
|
{{genderListSex[scope.gender]}}
|
</template>
|
</v-table>
|
<v-tool-page
|
:item="paged"
|
@on-page="onPage"
|
></v-tool-page>
|
</div>
|
</div>
|
<!-- 弹框子组件 -->
|
<addModel v-model="isShow" @change="isShow = false" :editteamData="editteamData" @success="onSuccess"></addModel>
|
<addPeopleModel v-model="isPeopleShow" @change="isPeopleShow = false" :editPeopleData="editPeopleData" @success="onpeopleSuccess"></addPeopleModel>
|
<addTypeModel v-model="isTypeShow" :editData="editData" @change="isTypeShow = false" @success="ontypeSuccess"></addTypeModel>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
import addModel from "./teamComponents/addteam.vue"; //添加团队
|
import addPeopleModel from "./teamComponents/addPeople.vue"; //添加团队人员
|
import addTypeModel from "./teamComponents/addType.vue"; //添加团队类型
|
export default {
|
props: {},
|
components: {addModel,addPeopleModel,addTypeModel},
|
data() {
|
return {
|
bar:{
|
keyword:"",
|
gender:"",
|
},
|
genderListSex:['','男','女','未知'],
|
statusList:[
|
{
|
label:"已完成",
|
value:0,
|
},
|
{
|
label:"待核实",
|
value:2,
|
},
|
{
|
label:"进行中",
|
value:4,
|
},
|
{
|
label:"待评价",
|
value:4,
|
},
|
{
|
label:"未通过",
|
value:4,
|
},
|
],
|
trs: [
|
{ text: "序号", val: "index", width: "100px" },
|
{ text: "团队类型", val: "teamTypeName"},
|
{ text: "团队名称", val: "teamName"},
|
{ text: "团队成员", val: "name"},
|
{ text: "性别", val: "btn",slot:"gender"},
|
{ text: "年龄", val: "age"},
|
{ text: "联系电话", val: "phone"},
|
{ text: "操作", val: "btn",width:"100px", fixed:'right' },
|
],
|
list: [
|
{
|
key: "teamCount",
|
name: "团队数量",
|
num: 0,
|
Company: "",
|
},
|
{
|
key: "memberCount",
|
name: "团队成员",
|
num: 0,
|
Company: "",
|
},
|
],
|
tds: [],
|
genderList:[
|
{
|
label:'未知',
|
value:3,
|
},
|
{
|
label:'男',
|
value:1,
|
},
|
{
|
label:'女',
|
value:2,
|
}
|
|
],
|
paged: { page: 0, total: 0, r: 0, limit: 10},
|
importDataurl:this.$js.api.http + "fms/teamMember/import", //导入地址
|
loading:{},
|
errUrl:'',
|
Authorization: "",
|
isShow:false,
|
isPeopleShow:false,
|
isTypeShow:false,
|
teamTypeData:[],
|
teamPeopleData:[],
|
editData:{},
|
editPeopleData:{},
|
editteamData:{},
|
chooseindex:'',
|
choosename:''
|
};
|
},
|
|
computed: {
|
...mapState({ vuex_page: "pageReset" }),
|
},
|
|
watch: {
|
vuex_page: {
|
handler(n) {
|
if (n.page === this.$route.path) {
|
// this.paged.page = 1;
|
this.init();
|
this.getStatistics();
|
|
}
|
},
|
deep: true,
|
},
|
},
|
created() {
|
this.Authorization = "Bearer " + demo.$session.get("token") || "";
|
},
|
mounted() {
|
this.getTeamtypeList()
|
this.getStatistics();
|
},
|
|
methods: {
|
/** 弹窗确认后 初始化数据 */
|
// onSuccess() {
|
// this.init();
|
// },
|
/**添加团队 */
|
addTeamModel() {
|
this.isShow = true;
|
this.editteamData = {};
|
},
|
onSuccess(d) {
|
this.getTeamtypeList()
|
this.isShow = false;
|
this.choosename = ''
|
// this.getTeamName(d.id);
|
this.getStatistics();
|
},
|
//查询团队名称
|
getTeamName(id,index) {
|
console.log(id)
|
this.chooseindex = id;
|
this.$api.get("fms/team/list", {teamTypeId:id}, e => {
|
if(e.length) {
|
this.teamPeopleData = e;
|
this.choosename=e[0].id;
|
this.init(e[0])
|
} else {
|
let kong = {
|
teamType: id,
|
teamId:''
|
}
|
this.teamPeopleData = [];
|
this.init(kong)
|
}
|
|
|
});
|
},
|
editNameTeam(d) {
|
this.isShow = true;
|
this.editteamData = d;
|
this.getTeamName(this.chooseindex);
|
},
|
deletesNameTeam(id) {
|
this.$confirm('确定要删除该团队吗？温馨提示：删除后无法恢复', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$api.del(`fms/team/delete?teamId=${id}`, {teamId:id}, e => {
|
this.getTeamtypeList()
|
demo.toast("删除成功")
|
});
|
})
|
},
|
init(d) {
|
let params = {
|
keyword: "",
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
teamId: d.id,
|
teamType: d.teamType
|
}
|
this.$api.post("fms/teamMember/page", params, e => {
|
this.paged.total = e.total;
|
this.paged.r++;
|
this.tds = e.records || [];
|
e.records.map((item,index) => {
|
item.index = (this.paged.page-1) * this.paged.limit + index + 1
|
})
|
});
|
},
|
//分页查询团队成员
|
getTeamTable(d,index) {
|
this.choosename =d.id ;
|
let params = {
|
gender: this.bar.gender,
|
keyword: this.bar.keyword,
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
teamId: d.id,
|
teamType: d.teamType
|
}
|
this.$api.post("fms/teamMember/page", params, e => {
|
this.paged.total = e.total;
|
this.paged.r++;
|
this.tds = e.records || [];
|
e.records.map((item,index) => {
|
item.index = (this.paged.page-1) * this.paged.limit + index + 1
|
})
|
});
|
},
|
/** end */
|
|
/**添加团队类型 编辑团队类型 */
|
addTeam() {
|
this.isTypeShow = true;
|
this.editData = {}
|
},
|
ontypeSuccess() {
|
this.getTeamtypeList();
|
this.isTypeShow = false;
|
this.getStatistics();
|
},
|
//查询团队类型
|
getTeamtypeList() {
|
this.$api.get("fms/teamType/list", {}, e => {
|
this.teamTypeData = e;
|
this.getTeamName(e[0].id);
|
this.chooseindex = e[0].id;
|
});
|
},
|
editTeam(d) {
|
this.isTypeShow = true;
|
this.editData = d;
|
this.getTeamtypeList();
|
},
|
deletesTeam(id) {
|
this.$confirm('确定要删除该团队类型吗？温馨提示：删除后无法恢复', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$api.del(`fms/teamType/delete?teamTypeId=${id}`, {teamTypeId:id}, e => {
|
this.getTeamtypeList();
|
demo.toast("删除成功")
|
});
|
})
|
},
|
/** end */
|
|
/** 添加团队成员 */
|
addModel() {
|
this.isPeopleShow = true;
|
this.editPeopleData = {};
|
},
|
editModel(d) {
|
this.isPeopleShow = true;
|
this.editPeopleData = d;
|
},
|
onpeopleSuccess() {
|
this.isPeopleShow = false;
|
this.getTeamtypeList();
|
this.getStatistics();
|
},
|
/** end */
|
|
Reset() {
|
this.bar.keyword = '';
|
this.bar.gender = '';
|
this.getTeamtypeList();
|
},
|
|
onSearch() {
|
// console.log('团队类型',this.chooseindex)
|
// console.log('团队名称',this.choosename)
|
let d = {
|
pageNum: 1,
|
teamType: this.chooseindex,
|
id:this.choosename,
|
}
|
|
this.getTeamTable(d);
|
},
|
|
deletes(d) {
|
let params = {
|
id:d.id,
|
teamId:this.choosename
|
}
|
this.$api.post('/fms/teamMember/delete',params,e=>{
|
demo.toast("删除成功") ;
|
let d = {
|
pageNum: 1,
|
teamType: this.chooseindex,
|
id:this.choosename,
|
}
|
this.getTeamTable(d)
|
})
|
},
|
|
// 分页点击
|
onPage(v) {
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
let d = {
|
pageNum: 1,
|
teamType: this.chooseindex,
|
id:this.choosename,
|
}
|
this.getTeamTable(d);
|
},
|
|
//统计详情
|
getStatistics() {
|
this.$api.get("fms/teamMember/statistics", {}, (e) => {
|
for(let key in e){
|
this.list.map(item=>{
|
if(key ===item.key){
|
item.num = e[key]
|
}
|
if(key ===item.keyTwo) {
|
item.day = e[key]
|
}
|
})
|
}
|
});
|
},
|
|
dow(){
|
//下载模板
|
this.$api.get('fms/teamMember/template','',e=>{
|
location.href = e
|
})
|
},
|
|
//导入前
|
beforeUpload(){
|
this.errUrl = '';
|
this.loading = this.$loading({
|
lock: true,
|
text: '导入中,请勿退出系统和关闭网络',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
});
|
},
|
|
//导入
|
success(e) {
|
if(e.code===200){
|
this.errUrl = '';
|
demo.toast('导入成功');
|
this.getTeamtypeList();
|
this.loading.close();
|
}else{
|
this.errUrl = e.msg;
|
this.loading.close();
|
demo.toast("导入失败");
|
}
|
this.init();
|
},
|
|
error(err) {
|
this.loading.close();
|
demo.toast('模板错误，请下载最新模板');
|
},
|
dowErr() {
|
//下载错误i
|
let data = {
|
key: this.errUrl,
|
};
|
this.$api.post(
|
"/fms/download/import/error/?key=" + this.errUrl,
|
"",
|
(e) => {
|
window.location.href = e;
|
this.errUrl = "";
|
}
|
);
|
},
|
|
exports(){
|
//导出
|
let params ={
|
gender: this.bar.gender,
|
keyword: this.bar.keyword,
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
teamId: this.choosename,
|
teamType: this.chooseindex
|
}
|
this.$api.post('fms/teamMember/export',params,res=>{
|
location.href = res
|
})
|
},
|
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.h1 {
|
font-size: 18px;
|
height: 40px;
|
line-height: 40px;
|
}
|
.erro-text {
|
font-size: 13px;
|
color: #f56c6c;
|
cursor: pointer;
|
}
|
.item{
|
width: 200px;
|
display: flex;
|
align-items: center;
|
.label{
|
|
}
|
}
|
.operation-btn {
|
margin-bottom: 10px;
|
}
|
.page_clap {
|
overflow-y: auto;
|
.tab {
|
margin-bottom: 10px;
|
width:60%;
|
}
|
.header {
|
padding-top: 25px;
|
}
|
}
|
.flex-content {
|
display: flex;
|
width: 100%;
|
}
|
.admin-content{
|
width: 20%;
|
height: 650px;
|
overflow: auto;
|
margin-right: 8px;
|
border-bottom: 1px #eaeaeb solid;
|
.name {
|
width: 70%;
|
}
|
.pointer {
|
span {
|
cursor: pointer;
|
}
|
}
|
.btns {
|
margin-left: 10px;
|
span {
|
margin-right: 10px;
|
cursor: pointer;
|
}
|
.fc-1 {
|
color: #F56C6C;
|
}
|
.fc-2{
|
color: #E6A23C;
|
}
|
.fc-3{
|
color: #67C23A;
|
}
|
}
|
}
|
.chilren-lie{
|
cursor: pointer;
|
height: 30px;
|
line-height: 30px;
|
display: flex;
|
justify-content: space-between;
|
}
|
.chilren-lie {
|
.active {
|
color: #409EFF;
|
}
|
}
|
.chilren-lie:hover {
|
color: #409EFF;
|
}
|
.collapseBox {
|
border-top: 1px #eaeaeb solid;
|
.titile {
|
height: 40px;
|
line-height: 40px;
|
display: flex;
|
justify-content: space-between;
|
}
|
}
|
</style>
|
