Skip to content

H
haoban-3
Commit 8ade44ab by yugujie
Options

feat: groupList

parent a6f65d71
Showing with 598 additions and 3 deletions
src/api/actCode.js 0 → 100644
import { postRequest } from '@/api/api';
// 活码分组查询
export const findActCodeGroupListApi = params => postRequest('/hm/group/list', params);
// 新增活码分组
export const addActCodeGroup = params => postRequest('/hm/group/save', params);
src/views/salesleads/actCodeManage/staffActCode/index.vue
<template> <template>
<div>待开发</div> <section class="app-detail-wrap">
<div class="border-box">
<div class="list-body flex">
<div class="list-left border-box">
<group-list ref="groupListRef"></group-list>
</div>
<div class="list-right p-20 border-box">
<dm-sub-title text="配置标签" class="m-b-10">
<div class="title">
<span>员工活码</span>
<span class="info-content cur-po"><i class="el-icon-info info-icon"></i>指标说明</span>
</div>
</dm-sub-title>
<act-code-table></act-code-table>
</div>
</div>
</div>
</section>
</template> </template>
<script></script> <script>
<style></style> import GroupList from './views/group-list.vue';
import ActCodeTable from './views/act-code-table.vue';
export default {
name: 'staffActCode',
components: {
GroupList,
ActCodeTable
},
data() {
return {};
}
};
</script>
<style lang="scss" scoped>
.p-20 {
padding: 20px;
}
.mb-10 {
margin-bottom: 10px;
}
.app-detail-wrap {
height: 100%;
background: #fff;
.list-body {
position: relative;
width: 100%;
.list-left {
position: relative;
width: 219px;
min-width: 219px;
max-width: 219px;
}
.list-right {
position: relative;
height: 500px;
min-width: calc(100% - 300px);
min-height: calc(100vh - 94px);
border-left: 1px solid #e4e7ed;
}
}
}
.title {
width: 100%;
display: flex;
justify-content: space-between;
.info-content {
color: #2f54eb;
font-size: 14px;
}
.info-icon {
margin-right: 8px;
}
}
.cur-po {
cursor: pointer;
}
</style>
src/views/salesleads/actCodeManage/staffActCode/views/act-code-table.vue 0 → 100644
<template>
<section>
<el-form inline>
<el-form-item>
<el-input placeholder="请输入活码ID/名称、创建人、使用成员" style="width: 300px">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</el-form-item>
<el-form-item>
<el-select v-model="selectMemberType" style="width: 130px">
<el-option label="成员所属门店" :value="1"></el-option>
<el-option label="使用成员" :value="2"></el-option>
</el-select>
<el-select filterable remote :placeholder="`${selectMemberType == 1 ? '门店名称' : '成员姓名'} / code`" :remote-method="remoteMethod" :loading="selectLoading" style="margin-left: -4px">
<el-option v-for="item in memberOrShopList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="全部状态" clearable class="w160">
<el-option :key="0" label="正常" :value="0"> </el-option>
<el-option :key="1" label="待生效" :value="1"> </el-option>
<el-option :key="1" label="已废弃" :value="2"> </el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select placeholder="全部类型" clearable class="w160">
<el-option :key="0" label="单人活码" :value="0"> </el-option>
<el-option :key="1" label="多人活码" :value="1"> </el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker :picker-options="pickerOptions" :editable="false" :value-format="'yyyy-MM-dd'" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="创建开始日期" end-placeholder="创建结束日期"> </el-date-picker>
</el-form-item>
<el-form-item class="fr">
<el-button>批量分组</el-button>
<el-button class="ghost-btn ">批量创建活码</el-button>
<el-button type="primary">新增活码</el-button>
</el-form-item>
</el-form>
<el-table ref="actCodeTableRef" v-loading="loadingStatus" :data="actCodeList" tooltip-effect="dark" class="act-code-table" @sort-change="sortChange">
<el-table-column type="selection" width="35" fixed> </el-table-column>
<el-table-column width="60" class-name="table-select-cell" fixed>
<template #header>
<dm-table-select-page class="table-select" :type="selectPage.type" :data-ready="selectPage.dataReady" :table-vm="$refs.actCodeTableRef" :table-data="actCodeList" :total="totalCount" @change="t => (selectPage.type = t)" @selection-change="handleSelectionChange"></dm-table-select-page>
</template>
</el-table-column>
<el-table-column label="活码ID" fixed width="110" align="center">
<template slot-scope="{ row }">
<p>{{ row.actCodeId }}</p>
</template>
</el-table-column>
<el-table-column label="活码信息" width="100" align="center">
<template slot-scope="{ row }">
<p>{{ row.actCodeId }}</p>
</template>
</el-table-column>
<el-table-column label="活码状态" width="100" align="center">
<template slot-scope="{ row }">
<p>{{ row.actCodeId }}</p>
</template>
</el-table-column>
<el-table-column label="新增总人数" sortable="custom" width="150" align="center">
<template slot-scope="{ row }">
<p>{{ row.actCodeId }}</p>
</template>
</el-table-column>
<el-table-column label="今日新增人数" sortable="custom" width="150" align="center">
<template slot-scope="{ row }">
<p>{{ row.actCodeId }}</p>
</template>
</el-table-column>
<el-table-column label="使用成员" width="100" align="center">
<template slot-scope="{ row }">
<p>{{ row.actCodeId }}</p>
</template>
</el-table-column>
<el-table-column label="成员所属门店" width="100" align="center">
<template slot-scope="{ row }">
<p>{{ row.actCodeId }}</p>
</template>
</el-table-column>
<el-table-column label="所属分组" width="100" align="center">
<template slot-scope="{ row }">
<p>{{ row.actCodeId }}</p>
</template>
</el-table-column>
<el-table-column label="创建人" width="100" align="center">
<template slot-scope="{ row }">
<p>{{ row.actCodeId }}</p>
</template>
</el-table-column>
<el-table-column label="创建时间" sortable="custom" width="120">
<template slot-scope="{ row }">
<p>{{ row.actCodeId }}</p>
</template>
</el-table-column>
<el-table-column label="操作" width="300" fixed="right">
<template slot-scope="{ row }">
<dm-dropdown :scope-data="row" :configs="operateBtnArr" @command="onCommand" />
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right m-t-24" v-if="actCodeList.length != 0">
<dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </dm-pagination>
</div>
</section>
</template>
<script>
export default {
name: 'actCodeTable',
data() {
return {
tableData: [{}],
total: 1,
totalCount: 100,
selectPage: {
type: 0,
dataReady: false
},
actCodeList: [
{
actCodeId: 12313213
}
],
loadingStatus: false,
pickerOptions: {
disabledDate: time => {
const end = new Date();
return time.getTime() < end.getTime() - 3600 * 1000 * 24 * 365 || time.getTime() > end.getTime() - 3600 * 1000 * 24;
}
},
operateBtnArr: [
{
text: '数据',
visible: true,
handler: row => {
console.log(row);
}
},
{
text: '详情',
visible: true,
handler: row => {
console.log(row);
}
},
{
text: '下载活码',
visible: true,
handler: row => {
console.log(row);
}
},
{
text: '作废',
visible: true,
handler: row => {
console.log(row);
}
},
{
text: '编辑',
visible: true,
handler: row => {
console.log(row);
}
}
],
selectLoading: false,
memberOrShopList: [
{
value: 1,
label: '测试1'
},
{
value: 2,
label: '测试2'
}
],
selectMemberType: 1,
// 分页参数
pageSize: 20,
currentPage: 1
};
},
methods: {
handleSelectionChange(val) {
console.log(val);
},
// 当前页变化
handleCurrentChange(val) {
console.log(val);
},
// 页码
handleSizeChange(val) {
console.log(val);
},
remoteMethod(query) {
console.log(query);
},
// 排序
sortChange(column) {
console.log(column);
}
}
};
</script>
<style lang="less" scoped>
.w160 {
width: 160px;
}
.act-code-table {
width: 100%;
max-height: calc(100vh - 312px);
}
.act-code-table /deep/ .table-select-cell .cell {
padding: 0;
}
.act-code-table /deep/ .table-select-cell .cell .el-dropdown {
padding: 0;
}
.table-select {
display: block;
line-height: 1;
}
.act-code-table /deep/ td:not(.table-header__dropdown) .cell:empty::before {
content: '' !important;
}
</style>
src/views/salesleads/actCodeManage/staffActCode/views/group-list.vue 0 → 100644
<template>
<section>
<div class="mb-10 mt-20 pl-16 pr-15">
<el-input placeholder="请输入分组名称" maxlength="50" v-model="searchGroupInput" @keyup.native="value => searchGroup(value)">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<div class="lists-content-box infinite-list-wrapper">
<ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="scrollLoad" infinite-scroll-immediate="false" infinite-scroll-distance="1">
<li v-for="listItem in groupList" :key="listItem.groupId" :class="['list-item', 'member-list', { 'active-li': listItem.groupId == currentListItemUuid }]" @click="clickGroupListItem(listItem)">
<div class="wrap">
<span :title="listItem.groupName" class="listItemName overflow-ellipsis">{{ listItem.groupName }}</span>
<span>{{ `(${listItem.releationNum})` }}</span>
</div>
<el-popover placement="bottom" trigger="hover" v-if="isShowGroupListItemMore(listItem)">
<p class="more" @click="editGroupListItem(listItem)">编辑</p>
<p class="more" @click="delGroupListItem(listItem)">删除</p>
<i slot="reference" class="iconfont-hb3 icongengduo icon"></i>
</el-popover>
</li>
</ul>
</div>
<div class="add-category">
<el-button type="primary" class="ghost-btn add-group" @click="addGroup">新增分组</el-button>
</div>
<!-- 新增/编辑分组 -->
<el-dialog :title="title" :visible.sync="addOrEditGroupDialog" width="500px" top="30vh" :close-on-click-modal="false">
<el-form :model="groupListForm" :rules="groupListFormRules" ref="groupListForm">
<el-form-item label="分组名称" prop="groupName">
<el-input placeholder="请输入分组名称" v-model="groupListForm.groupName" :maxlength="10" show-word-limit clearable></el-input>
<p class="addGroupTip" v-show="!isEditGroup">分组名称不可重复，建议"创建人姓名-分组名称"</p>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addOrEditGroupDialog = false">取 消</el-button>
<el-button type="primary" @click="handleGroupListItem">确 定</el-button>
</span>
</el-dialog>
</section>
</template>
<script>
import { findActCodeGroupListApi, addActCodeGroup } from '@/api/actCode.js';
export default {
name: 'staffActCodeGroupList',
data() {
const groupList = [
{
groupName: '全部分组',
releationNum: 11,
groupId: 1
},
{
groupName: '默认分组',
releationNum: 10,
groupId: 2
}
];
let i = 3;
while (i <= 15) {
groupList.push({
groupName: '单人分组',
releationNum: i,
groupId: i
});
i++;
}
return {
currentListItemUuid: 1,
searchGroupInput: '',
groupList: groupList,
scrollLoad: false,
title: '新增分组',
addOrEditGroupDialog: false,
groupListForm: {
groupName: '',
groupId: ''
},
groupListFormRules: {
groupName: [{ required: true, message: '请输入分组名称', trigger: 'blur' }]
},
isEditGroup: false,
// 分页相关
pageNum: 1,
allPageNum: 1,
pageSize: 20
};
},
created() {
// this.searchGroup();
},
methods: {
load() {
// const length = this.groupList.length;
// if (length > 50) {
// return (this.scrollLoad = true);
// }
// for (let index = 0; index < 6; index++) {
// this.groupList.push({
// groupName: '单人分组',
// number: length + index,
// groupId: length + index
// });
// }
if (this.allPageNum > this.pageNum) {
this.pageNum++;
this.searchGroup();
} else {
this.scrollLoad = true;
}
},
clickGroupListItem(listItem) {
this.currentListItemUuid = listItem.groupId;
},
isShowGroupListItemMore(listItem) {
const hiddenListItemMore = [1, 2];
return !hiddenListItemMore.includes(listItem.groupId);
},
addGroup() {
this.isEditGroup = false;
this.$nextTick(() => {
this.$refs.groupListForm.clearValidate();
});
this.addOrEditGroupDialog = true;
},
editGroupListItem(listItem) {
this.isEditGroup = true;
this.$nextTick(() => {
this.$refs.groupListForm.clearValidate();
});
this.addOrEditGroupDialog = true;
this.groupListForm = { ...listItem };
},
delGroupListItem(listItem) {
this.$confirm('分组删除后，创建号活码时将无法选取到该分组，是否继续删除?', '删除提示', {
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
// 删除操作
const listItemIndex = this.groupList.findIndex(item => item.groupId === listItem.groupId);
if (listItemIndex < 0) return;
this.groupList.splice(listItemIndex, 1);
})
.catch(() => {});
},
handleGroupListItem() {
this.$refs.groupListForm.validate(valid => {
if (valid) {
let params = {
groupName: this.groupListForm.groupName
};
addActCodeGroup(params).then(res => {
if (res.errorCode == 0) {
this.$message({
type: 'success',
message: '新增成功',
duration: 1000
});
this.pageNum = 1;
this.searchGroup();
} else {
this.$message({
type: 'error',
message: res.message || '新增失败'
});
}
this.editDialog.visible = false;
});
}
});
},
searchGroup(val) {
if (this.pageNum == 1) {
this.groupList = [];
}
this.pageNum < this.allPageNum && this.pageNum++;
const params = {
pageNum: this.pageNum,
pageSize: this.pageSize
};
if (String(this.searchGroupInput)) {
params.groupName = this.searchGroupInput;
}
findActCodeGroupListApi(params).then(res => {
if (res.errorCode == 0) {
const { list, pageInfo } = res.result || {};
if (Array.isArray(list)) {
list.reduce((pre, cur) => pre.push(cur), this.groupList);
}
this.allPageNum = pageInfo.pages || 1;
}
});
}
}
};
</script>
<style lang="scss" scoped>
.mb-10 {
margin-bottom: 10px;
}
.mt-20 {
margin-top: 20px;
}
.pl-16 {
padding-left: 16px;
}
.pr-15 {
padding-right: 15px;
}
.add-category {
padding: 0px 20px 0 19px;
}
.member-list {
height: 40px;
font-size: 14px;
color: #303133;
cursor: pointer;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px 0 10px;
&:hover,
&.active-li {
color: #2f54eb;
background: #ebeffe;
}
}
.more {
line-height: 26px;
text-align: center;
cursor: pointer;
&:hover {
color: #2f54eb;
}
}
.add-group {
width: 100%;
margin-top: 12px;
}
.lists-content-box {
max-height: calc(100vh - 200px);
overflow: auto;
padding: 0 15px 0 16px;
.wrap {
display: flex;
flex: 1;
.listItemName {
max-width: 110px;
margin-right: 4px;
}
}
}
.addGroupTip {
font-size: 12px;
color: #909399;
}
</style>
static/css/index.less
...@@ -433,4 +433,24 @@ ...@@ -433,4 +433,24 @@
margin-top: 8px; margin-top: 8px;
border-radius: 100%; border-radius: 100%;
margin-right: 5px; margin-right: 5px;
}
.el-popover.el-popper {
min-width: 70px;
}
.ghost-btn {
background: #fff !important;
color: #2f54eb !important;
&:hover {
border-color: #597EF7;
color: #597EF7 !important;
}
&:active {
border-color: #1D39C4;
color: #1D39C4 !important;
}
}
.overflow-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment