moliparty/peko-java
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后台-推广后台-团队成员管理样式

Browse Source
This commit is contained in:
khalil
2023-07-01 19:16:07 +08:00
parent 7f9bb723a8
commit 6b80358916
1 changed files with 85 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
accompany-admin/accompany-admin-web/src/main/resources/static/html/flowteam/flow_team_member_admin.html
View File

@@ -1,43 +1,41 @@
<section className="content">
<div className="box box-primary">
<div className="box-body">
<section class="content">
<div class="box box-primary">
<div class="box-body">
<!-- Content Header (Page header) -->
<section className="content-header">
<section class="content-header">
<h1 id="itemTitle"></h1>
</section>
<div id="toolbar">
<div className="col-sm-12">
<label htmlFor="groupSelector" className="col-sm-1 control-label">选择团队:</label>
<div className="col-sm-3">
<select name="query-teamSelector" id="groupSelector"
onChange="initTeamSelector(this.options[this.selectedIndex].value, this.name, false)"
className="form-control group-selector" data-btn-class="btn-warning">
<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 htmlFor="query-teamSelector" className="col-sm-1 control-label">选择小组:</label>
<div className="col-sm-3">
<select name="teamSelector" id="query-teamSelector" className="form-control"
data-btn-class="btn-warning">
<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 className="col-sm-12">
<label htmlFor="memberName" className="col-sm-1 control-label">姓名:</label>
<div className="col-sm-3"><input type="text" className="form-control" name="memberName"
id="memberName" placeholder="输入成员姓名"></div>
<label htmlFor="memberPhone" className="col-sm-1 control-label">手机号:</label>
<div className="col-sm-3"><input type="text" className="form-control" name="memberPhone"
id="memberPhone" placeholder="输入成员手机号"></div>
<label htmlFor="inviteCode" className="col-sm-1 control-label">邀请码:</label>
<div className="col-sm-3"><input type="text" className="form-control" name="inviteCode"
id="inviteCode" placeholder="输入邀请码"></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 className="col-sm-12">
<button id="btnSearch" className="btn btn-default">
<i className="glyphicon glyphicon-search"></i>查询
<div class="col-sm-12">
<button id="btnSearch" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>查询
</button>
<button id="addBtn" className="btn btn-default">
<i className="glyphicon glyphicon-plus"></i>新增成员
<button id="addBtn" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>新增成员
</button>
</div>
</div>
@@ -49,34 +47,32 @@
</div>
</section>
<div className="modal fade" id="addClanModal" tabIndex="-1" role="dialog" aria-labelledby="modalLabel">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">&times;</span>
<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">&times;</span>
</button>
<h4 className="modal-title" id="modalLabel">添加</h4>
<h4 class="modal-title" id="modalLabel">添加</h4>
</div>
<div className="modal-body">
<form className="form-horizontal" id="addForm">
<div class="modal-body">
<form class="form-horizontal" id="addForm">
<input type="hidden" name="editMemberId" id="editMemberId"/>
<div className="form-group">
<label htmlFor="editMemberName" className="col-sm-3 control-label">姓名</label>
<div className="col-sm-9">
<input type="text" className="form-control validate[required]" name="editMemberName"
id="editMemberName">
<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 className="form-group">
<label htmlFor="editMemberPhone" className="col-sm-3 control-label">电话</label>
<div className="col-sm-9">
<input type="text" className="form-control" name="editMemberPhone" id="editMemberPhone">
<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 className="form-group">
<label htmlFor="teamRoleSelector" className="col-sm-3 control-label">职务</label>
<div className="col-sm-9">
<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>
@@ -84,33 +80,31 @@
</select>
</div>
</div>
<div className="form-group">
<label htmlFor="modal-groupSelector" className="col-sm-3 control-label">所属团队</label>
<div className="col-sm-9">
<select name="modal-teamSelector" id="modal-groupSelector"
onChange="initTeamSelector(this.options[this.selectedIndex].value, this.name, false)">
<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 className="form-group">
<label htmlFor="modal-teamSelector" className="col-sm-3 control-label">所属小组</label>
<div className="col-sm-9">
<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 className="form-group">
<label htmlFor="editInviteCodes" className="col-sm-3 control-label">邀请码</label>
<div className="col-sm-9">
<input type="text" className="input-sm form-control datetime" name="editInviteCodes"
id="editInviteCodes" placeholder="用,隔开填多个">
<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 className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" className="btn btn-primary" id="save">确定</button>
<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>
@@ -127,16 +121,16 @@
$.ajax({
type: "get",
url: "/admin/flowTeam/listTeamByGroupId.action",
data: {
groupId: groupId
data : {
groupId : groupId
},
dataType: "json",
success: function (json) {
if (json.success) {
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>')
options.push('<option value="'+flowTeam.teamId+'">'+flowTeam.teamName+'</option>')
}
if (options.length == 0) {
options.push('<option value="">暂无数据</option>')
@@ -149,7 +143,6 @@
}
});
}
// 初始化编辑弹窗
function initEditModalData() {
$('#editMemberId').val(editMemberInfo.memberId),
@@ -172,21 +165,20 @@
$.get('/admin/flowteam/group/listGroupByPage',
{
page: 1,
pageSize: 2147483647,
groupName: ''
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>')
options.push('<option value="'+item.groupId+'">'+item.groupName+'</option>')
}
$("#groupSelector").html(options.join(' '));
$("#modal-groupSelector").html(options.join(' '));
}
});
}
initGroupSelector();
@@ -197,8 +189,7 @@
columns: [
{field: 'memberName', title: '姓名', align: 'center', width: '5%'},
{field: 'memberPhone', title: '电话', align: 'center', width: '5%'},
{
field: 'groupId', title: '所属团队', align: 'center', width: '5%',
{field: 'groupId', title: '所属团队', align: 'center', width: '5%',
formatter: function (val) {
const group = flowGroupsMap[val];
if (group) {
@@ -206,10 +197,8 @@
} else {
return '-'
}
}
},
{
field: 'teamId', title: '所属小组', align: 'center', width: '5%',
}},
{field: 'teamId', title: '所属小组', align: 'center', width: '5%',
formatter: function (val, row, index) {
const team = flowTeamsMap[val];
if (team) {
@@ -217,10 +206,8 @@
} else {
return '-'
}
}
},
{
field: 'teamRole', title: '职务', align: 'center', width: '5%',
}},
{field: 'teamRole', title: '职务', align: 'center', width: '5%',
formatter: function (val, row, index) {
const teamRole = TEAM_ROLE[val];
if (teamRole) {
@@ -228,18 +215,15 @@
} else {
return '-'
}
}
},
{
field: 'memberStatus', title: '当前状态', align: 'center', width: '5%',
}},
{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',
@@ -247,12 +231,12 @@
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>';
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>';
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>' +
'<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>';
@@ -276,8 +260,8 @@
memberName: $('#memberName').val(),
memberPhone: $('#memberPhone').val(),
inviteCode: $('#inviteCode').val(),
teamId: $('#query-teamSelector').val(),
groupId: $('#groupSelector').val()
teamId : $('#query-teamSelector').val(),
groupId : $('#groupSelector').val()
};
return param;
},
@@ -309,7 +293,7 @@
});
//编辑成员信息
$('#table').on('click', '.opt-edit', function () {
$('#table').on('click','.opt-edit', function () {
const idx = $(this).attr('data-idx');
editMemberInfo = memberList[idx];
console.log("memberInfo=======", editMemberInfo)
@@ -321,7 +305,7 @@
if ($("#addForm").validationEngine('validate')) {
const requestParam = {
memberId: $('#editMemberId').val(),
groupId: $('#modal-groupSelector').val(),
groupId : $('#modal-groupSelector').val(),
teamId: $('#modal-teamSelector').val(),
memberName: $('#editMemberName').val(),
memberPhone: $('#editMemberPhone').val(),
@@ -353,7 +337,7 @@
});
$('#table').on('click', '.opt-change-status', function () {
$('#table').on('click','.opt-change-status', function () {
const idx = $(this).attr('data-idx');
const memberInfo = memberList[idx];
console.debug('=======memberInfo', memberInfo);