476 lines
23 KiB
Vue
476 lines
23 KiB
Vue
<template>
|
|
<section class="content">
|
|
<div class="box box-primary">
|
|
<div class="box-body">
|
|
<!-- Content Header (Page header) -->
|
|
<section class="content-header">
|
|
<h1 id="itemTitle"></h1>
|
|
</section>
|
|
<div id="toolbar">
|
|
<div class="col-sm-12">
|
|
<label for="groupSelector" class="col-sm-1 control-label">选择团队:</label>
|
|
<div class="col-sm-3">
|
|
<select name="query-teamSelector" id="groupSelector"
|
|
onchange="initTeamSelector(this.options[this.selectedIndex].value, this.name, false)"
|
|
class="form-control group-selector" data-btn-class="btn-warning">
|
|
</select>
|
|
</div>
|
|
<label for="query-teamSelector" class="col-sm-1 control-label">选择小组:</label>
|
|
<div class="col-sm-3">
|
|
<select name="teamSelector" id="query-teamSelector" class="form-control"
|
|
data-btn-class="btn-warning">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<label for="memberName" class="col-sm-1 control-label">姓名:</label>
|
|
<div class="col-sm-3"><input type="text" class="form-control" name="memberName" id="memberName"
|
|
placeholder="输入成员姓名"></div>
|
|
<label for="memberPhone" class="col-sm-1 control-label">手机号:</label>
|
|
<div class="col-sm-3"><input type="text" class="form-control" name="memberPhone" id="memberPhone"
|
|
placeholder="输入成员手机号"></div>
|
|
<label for="inviteCode" class="col-sm-1 control-label">邀请码:</label>
|
|
<div class="col-sm-3"><input type="text" class="form-control" name="inviteCode" id="inviteCode"
|
|
placeholder="输入邀请码"></div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<button id="btnSearch" class="btn btn-default">
|
|
<i class="glyphicon glyphicon-search"></i>查询
|
|
</button>
|
|
<button id="addBtn" class="btn btn-default">
|
|
<i class="glyphicon glyphicon-plus"></i>新增成员
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- .content -->
|
|
<div id="table"></div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<div class="modal fade" id="addClanModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
|
aria-hidden="true">×</span>
|
|
</button>
|
|
<h4 class="modal-title" id="modalLabel">添加</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="form-horizontal" id="addForm">
|
|
<input type="hidden" name="editMemberId" id="editMemberId" />
|
|
<div class="form-group">
|
|
<label for="editMemberName" class="col-sm-3 control-label">姓名</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control validate[required]" name="editMemberName"
|
|
id="editMemberName">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="editMemberPhone" class="col-sm-3 control-label">电话</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" name="editMemberPhone" id="editMemberPhone">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="teamRoleSelector" class="col-sm-3 control-label">职务</label>
|
|
<div class="col-sm-9">
|
|
<select name="teamRoleSelector" id="teamRoleSelector">
|
|
<option value="1">组员</option>
|
|
<option value="2">组长</option>
|
|
<option value="3">团长</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="modal-groupSelector" class="col-sm-3 control-label">所属团队</label>
|
|
<div class="col-sm-9">
|
|
<select name="modal-teamSelector" id="modal-groupSelector"
|
|
onchange="initTeamSelector(this.options[this.selectedIndex].value, this.name, false)">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="modal-teamSelector" class="col-sm-3 control-label">所属小组</label>
|
|
<div class="col-sm-9">
|
|
<select name="modal-teamSelector" id="modal-teamSelector">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="editInviteCodes" class="col-sm-3 control-label">邀请码</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="input-sm form-control datetime" name="editInviteCodes"
|
|
id="editInviteCodes" placeholder="用,隔开填多个">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
|
<button type="button" class="btn btn-primary" id="save">确定</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TableHelper from '@/utils/bootstrap-table-helper';
|
|
|
|
const TEAM_ROLE = {
|
|
"1": '组员',
|
|
"2": '组长',
|
|
"3": '团长',
|
|
};
|
|
let flowTeams;
|
|
let flowTeamsMap = {};
|
|
|
|
let flowGroups = [];
|
|
let flowGroupsMap = {};
|
|
let memberList = [];
|
|
let editMemberInfo;
|
|
export default {
|
|
name: "FlowTeamMemberAdminView",
|
|
setup() {
|
|
|
|
// 初始化小组选择器
|
|
function initTeamSelector(groupId, childrenSelectId, isEdit) {
|
|
const options = [];
|
|
$.ajax({
|
|
type: "get",
|
|
url: "/admin/flowTeam/listTeamByGroupId",
|
|
data: {
|
|
groupId: groupId
|
|
},
|
|
dataType: "json",
|
|
success: function (json) {
|
|
if (json.success) {
|
|
for (let i = 0; i < json.data.length; i++) {
|
|
const flowTeam = json.data[i];
|
|
//拼接成多个<option><option/>
|
|
options.push('<option value="' + flowTeam.teamId + '">' + flowTeam.teamName + '</option>')
|
|
}
|
|
if (options.length == 0) {
|
|
options.push('<option value="">暂无数据</option>')
|
|
}
|
|
$('#' + `${childrenSelectId}`).html(options.join(' '));
|
|
if (isEdit) {
|
|
initEditModalData();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
window.initTeamSelector = initTeamSelector;
|
|
return {
|
|
initTeamSelector
|
|
};
|
|
},
|
|
created() {
|
|
this.$nextTick(function () {
|
|
this.initData();
|
|
});
|
|
},
|
|
methods: {
|
|
initData() {
|
|
|
|
$(function () {
|
|
// 加载流量团队配置
|
|
$.ajax({
|
|
type: "get",
|
|
url: "/admin/flowTeam/listTeam",
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (json) {
|
|
if (json.success) {
|
|
if (json.data) {
|
|
flowTeams = json.data;
|
|
for (let i = 0; i < flowTeams.length; i++) {
|
|
const flowTeam = flowTeams[i];
|
|
flowTeamsMap[flowTeam.teamId] = flowTeam;
|
|
}
|
|
} else {
|
|
flowTeams = [];
|
|
flowTeamsMap = {};
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 加载流量团队配置
|
|
$.ajax({
|
|
type: "get",
|
|
url: "/admin/flowteam/group/listGroupByPage",
|
|
data: {
|
|
page: 1,
|
|
pageSize: 2147483647,
|
|
groupName: ''
|
|
},
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (json) {
|
|
console.log("init group success", json);
|
|
flowGroups = json.rows;
|
|
if (flowGroups.length > 0) {
|
|
for (let i = 0; i < flowGroups.length; i++) {
|
|
const flowGroup = flowGroups[i];
|
|
flowGroupsMap[flowGroup.groupId] = flowGroup;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 初始化团队选择器
|
|
function initGroupSelector() {
|
|
const options = [];
|
|
options.push('<option value="">选择团队</option>')
|
|
$.get('/admin/flowteam/group/listGroupByPage',
|
|
{
|
|
page: 1,
|
|
pageSize: 2147483647,
|
|
groupName: ''
|
|
}, function (res) {
|
|
if (res) {
|
|
for (let i = 0; i < res.rows.length; i++) {
|
|
var item = res.rows[i];
|
|
//拼接成多个<option><option/>
|
|
options.push('<option value="' + item.groupId + '">' + item.groupName + '</option>')
|
|
}
|
|
$("#groupSelector").html(options.join(' '));
|
|
$("#modal-groupSelector").html(options.join(' '));
|
|
}
|
|
});
|
|
}
|
|
initGroupSelector();
|
|
|
|
|
|
// 查询刷新
|
|
$('#btnSearch').on('click', function () {
|
|
$('#table').bootstrapTable('destroy');
|
|
$('#table').bootstrapTable({
|
|
columns: [
|
|
{ field: 'memberName', title: '姓名', align: 'center', width: '5%' },
|
|
{ field: 'memberPhone', title: '电话', align: 'center', width: '5%' },
|
|
{
|
|
field: 'groupId', title: '所属团队', align: 'center', width: '5%',
|
|
formatter: function (val) {
|
|
const group = flowGroupsMap[val];
|
|
if (group) {
|
|
return group.groupName;
|
|
} else {
|
|
return '-'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
field: 'teamId', title: '所属小组', align: 'center', width: '5%',
|
|
formatter: function (val, row, index) {
|
|
const team = flowTeamsMap[val];
|
|
if (team) {
|
|
return team.teamName;
|
|
} else {
|
|
return '-'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
field: 'teamRole', title: '职务', align: 'center', width: '5%',
|
|
formatter: function (val, row, index) {
|
|
const teamRole = TEAM_ROLE[val];
|
|
if (teamRole) {
|
|
return teamRole;
|
|
} else {
|
|
return '-'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
field: 'memberStatus', title: '当前状态', align: 'center', width: '5%',
|
|
formatter: function (val, row, index) {
|
|
if (val == 1) {
|
|
return `<span class="text-success">生效</span>`;
|
|
} else {
|
|
return `<span style="color: grey">无效</span>`;
|
|
}
|
|
}
|
|
},
|
|
{ field: 'inviteCodes', title: '邀请码', align: 'center', width: '5%' },
|
|
{
|
|
field: 'memberId',
|
|
title: '操作',
|
|
align: 'center',
|
|
width: '10%',
|
|
formatter: function (val, row, index) {
|
|
let statusChangeBtn = '<button class="btn btn-sm btn-success opt-change-status" data-idx=' + index + ' data-new-status=' + 1 + '>设为生效</button>';
|
|
if (row.memberStatus == 1) {
|
|
statusChangeBtn = '<button class="btn btn-sm btn-primary opt-change-status" data-idx=' + index + ' data-new-status=' + 0 + '>设为无效</button>';
|
|
}
|
|
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-edit" data-idx=' + index + '>' +
|
|
'<i class="glyphicon glyphicon-edit"></i> 编辑</button>' +
|
|
statusChangeBtn;
|
|
//statusChangeBtn +
|
|
//'<button class="btn btn-sm btn-danger opt-change-status" data-idx=' + index + ' data-new-status="-1"><i class="glyphicon glyphicon-remove"></i>删除</button>';
|
|
}
|
|
}
|
|
],
|
|
undefinedText: 0,
|
|
cache: false,
|
|
striped: true,
|
|
showRefresh: false,
|
|
pageSize: 20,
|
|
pagination: true,
|
|
pageList: [20, 50, 100, 200, 300, 500],
|
|
search: false,
|
|
sidePagination: "server", //表示服务端请求
|
|
queryParamsType: "undefined",
|
|
queryParams: function queryParams(params) { //设置查询参数
|
|
var param = {
|
|
pageNumber: params.pageNumber,
|
|
pageSize: params.pageSize,
|
|
memberName: $('#memberName').val(),
|
|
memberPhone: $('#memberPhone').val(),
|
|
inviteCode: $('#inviteCode').val(),
|
|
teamId: $('#query-teamSelector').val(),
|
|
groupId: $('#groupSelector').val()
|
|
};
|
|
return param;
|
|
},
|
|
toolbar: '#toolbar',
|
|
url: '/admin/flowTeam/listFlowMembersByPage',
|
|
onLoadSuccess: function (data) { //加载成功时执行
|
|
console.log("load success", data);
|
|
memberList = data.rows;
|
|
},
|
|
onLoadError: function () { //加载失败时执行
|
|
console.log("load fail");
|
|
}
|
|
});
|
|
});
|
|
|
|
//新建标签
|
|
$("#addBtn").click(function () {
|
|
$('#modal-groupSelector').attr('disabled', false);
|
|
$('#modal-groupSelector').val('');
|
|
let teamSelector = document.getElementById("modal-teamSelector");
|
|
$('#modal-teamSelector').attr('disabled', false);
|
|
teamSelector.options.length = 0;
|
|
$('#editMemberId').val('');
|
|
$('#editMemberName').val('');
|
|
$('#editMemberPhone').val('');
|
|
$('#teamRoleSelector').val('1');
|
|
$('#editInviteCodes').val('');
|
|
$("#addClanModal").modal('show');
|
|
});
|
|
|
|
//编辑成员信息
|
|
$('#table').on('click', '.opt-edit', function () {
|
|
const idx = $(this).attr('data-idx');
|
|
editMemberInfo = memberList[idx];
|
|
console.log("memberInfo=======", editMemberInfo)
|
|
window.initTeamSelector(editMemberInfo.groupId, "modal-teamSelector", true)
|
|
});
|
|
|
|
// 新增
|
|
$("#save").click(function () {
|
|
if ($("#addForm").validationEngine('validate')) {
|
|
const requestParam = {
|
|
memberId: $('#editMemberId').val(),
|
|
groupId: $('#modal-groupSelector').val(),
|
|
teamId: $('#modal-teamSelector').val(),
|
|
memberName: $('#editMemberName').val(),
|
|
memberPhone: $('#editMemberPhone').val(),
|
|
teamRole: $('#teamRoleSelector').val(),
|
|
inviteCodes: $('#editInviteCodes').val(),
|
|
}
|
|
|
|
console.debug('------requestParam', requestParam);
|
|
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/admin/flowTeam/saveMember",
|
|
data: JSON.stringify(requestParam),
|
|
dataType: "json",
|
|
contentType: 'application/json',
|
|
success: function (json) {
|
|
if (json.success) {
|
|
$("#tipMsg").text("保存成功");
|
|
$("#tipModal").modal('show');
|
|
TableHelper.doRefresh("#table");
|
|
$("#addClanModal").modal('hide');
|
|
} else {
|
|
$("#tipMsg").text("保存失败." + json.message);
|
|
$("#tipModal").modal('show');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
$('#table').on('click', '.opt-change-status', function () {
|
|
const idx = $(this).attr('data-idx');
|
|
const memberInfo = memberList[idx];
|
|
console.debug('=======memberInfo', memberInfo);
|
|
const memberId = memberInfo.memberId;
|
|
const newStatus = $(this).attr('data-new-status');
|
|
let action = ""
|
|
if (newStatus == 0) {
|
|
action = `确定将“${memberInfo.memberName}”设为无效?`
|
|
} else if (newStatus == 1) {
|
|
action = `确定将“${memberInfo.memberName}”设为有效?`
|
|
} else if (newStatus == -1) {
|
|
action = `确定删除“${memberInfo.memberName}”?`
|
|
}
|
|
if (confirm(action)) {
|
|
const requestParam = {
|
|
memberId: memberId,
|
|
memberStatus: newStatus,
|
|
}
|
|
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/admin/flowTeam/changeMemberStatus",
|
|
data: JSON.stringify(requestParam),
|
|
dataType: "json",
|
|
contentType: 'application/json',
|
|
success: function (json) {
|
|
if (json.success) {
|
|
$("#tipMsg").text("修改成功");
|
|
$("#tipModal").modal('show');
|
|
TableHelper.doRefresh("#table");
|
|
} else {
|
|
$("#tipMsg").text("修改失败." + json.message);
|
|
$("#tipModal").modal('show');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
},
|
|
|
|
};
|
|
|
|
|
|
// 初始化编辑弹窗
|
|
function initEditModalData() {
|
|
$('#editMemberId').val(editMemberInfo.memberId),
|
|
$('#modal-groupSelector').val(editMemberInfo.groupId),
|
|
$('#modal-groupSelector').attr('disabled', true),
|
|
$('#editMemberName').val(editMemberInfo.memberName),
|
|
$('#editMemberPhone').val(editMemberInfo.memberPhone),
|
|
$('#teamRoleSelector').val(editMemberInfo.teamRole),
|
|
$('#modal-teamSelector').val(editMemberInfo.teamId),
|
|
$('#modal-teamSelector').attr('disabled', true),
|
|
$('#editInviteCodes').val(editMemberInfo.inviteCodes),
|
|
$("#addClanModal").modal('show');
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style> |