添加：提货点管理(提货点添加、编辑、查看)
This commit is contained in:
parent
d9bbe18e46
commit
551655c351
|
|
@ -742,10 +742,18 @@ export function exchangeIntegralList(apiName = 'list',data) {
|
|||
// list=持有信息列表，record_list=变更记录列表
|
||||
return request.get(`user/exchange_quota/integral_${apiName}`,data)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 提货点 - 提交编辑信息
|
||||
export function pickupPointEdit(data) {
|
||||
return request.get(`user/exchange_quota/pickup_point_edit`,data)
|
||||
}
|
||||
// 提货点 - 列表获取&提货记录
|
||||
export function pickupPointList(apiName = 'list', data) {
|
||||
// list=提货点列表，record=提货记录列表
|
||||
return request.get(`user/exchange_quota/pickup_point_${apiName}`,data)
|
||||
}
|
||||
// 提货点 - 单条信息获取
|
||||
export function pickupPointInfo(id) {
|
||||
return request.get(`user/exchange_quota/pickup_point_info/${id}`)
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -475,6 +475,15 @@ const marketingRouter =
|
|||
},
|
||||
component: () => import('@/views/marketing/exchange/integral/index')
|
||||
},
|
||||
{
|
||||
path: 'pickupPoint',
|
||||
name: `exchangePickupPoint`,
|
||||
meta: {
|
||||
title: '取货点',
|
||||
noCache: true
|
||||
},
|
||||
component: () => import('@/views/marketing/exchange/pickupPoint/index')
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,516 @@
|
|||
<template>
|
||||
<div class="divBox">
|
||||
<el-card class="box-card">
|
||||
<!--顶部搜索栏-->
|
||||
<div slot="header" class="clearfix">
|
||||
<div class="container">
|
||||
<el-form inline size="small" label-width="80px">
|
||||
<el-form-item label="搜索：">
|
||||
<el-input v-model="tableFrom.uid" placeholder="请输入用户ID" class="selWidth" clearable />
|
||||
<el-input v-model="tableFrom.address" placeholder="请输入地址" class="selWidth" clearable>
|
||||
<el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="width100">
|
||||
<el-button size="small" type="primary" @click="addPickupPoint(0)">添加取货点</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<!--表格信息-->
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="提货点管理" name="list">
|
||||
<el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini">
|
||||
<el-table-column prop="id" label="ID" min-width="100" align="center"/>
|
||||
<el-table-column label="地址" prop="address" align="center"/>
|
||||
<el-table-column label="状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="scope.row.is_show == 1" effect="dark">正常</el-tag>
|
||||
<el-tag type="danger" v-else effect="dark">暂停使用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="负责人数" align="center" min-width="200" >
|
||||
<template slot-scope="scope">
|
||||
<div class="staff">
|
||||
<div class="block" v-for="(item,index) in Object.values(scope.row.user_list)" :key="index">
|
||||
<img class="avatar" :src="item.avatar || moren" />
|
||||
<div class="info">
|
||||
<div class="name">{{ item.nickname || item.real_name }}</div>
|
||||
<div class="uid">UID：{{ item.uid }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="添加时间" prop="create_time" min-width="150" align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" @click="addPickupPoint(scope.row.id)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="提货记录" name="record">
|
||||
|
||||
|
||||
|
||||
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!--分页-->
|
||||
<div class="block">
|
||||
<el-pagination
|
||||
:page-sizes="[20, 40, 60, 80]"
|
||||
:page-size="tableFrom.limit"
|
||||
:current-page="tableFrom.page"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
<!--编辑弹框-->
|
||||
<el-drawer :with-header="false" :size="1000" :visible.sync="drawer_show" direction="rtl" :before-close="handleClose">
|
||||
<el-form ref="editInfoField" size="small" :rules="ruleValidate" :model="editInfo" label-width="130px" @submit.native.prevent>
|
||||
<el-tabs type="border-card">
|
||||
<div class="section">
|
||||
<div class="title">取货点信息</div>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="地址：" prop="address">
|
||||
<el-input v-model="editInfo.address" placeholder="请填写取货点详细地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态：" prop="is_show">
|
||||
<el-switch v-model="editInfo.is_show" :active-value="1" :inactive-value="0" :width="55" active-text="开启" inactive-text="关闭" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="title">
|
||||
负责人
|
||||
<el-button size="small" type="primary" @click="addStaff">添加负责人</el-button>
|
||||
</div>
|
||||
<div class="staff-list">
|
||||
<div class="staff-box" v-for="(item,index) in Object.values(editInfo.user_list)" :key="index">
|
||||
<img class="staff-avatar" :src="item.avatar || moren" />
|
||||
<div class="staff-info">
|
||||
<div class="staff-name">{{ item.nickname || item.real_name }}</div>
|
||||
<div class="staff-uid">UID：{{ item.uid }}</div>
|
||||
</div>
|
||||
<el-button type="danger" icon="el-icon-delete" circle @click="closeStaffConfirm(item.uid)"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-button size="small" type="success" @click="submitEditInfo">提交</el-button>
|
||||
</div>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
<!--用户选择-->
|
||||
<el-dialog title="负责人选择" :visible.sync="userSelectVisible" width="80%" :before-close="closeStaff">
|
||||
<el-card class="box-card">
|
||||
<!--顶部搜索栏-->
|
||||
<div slot="header" class="clearfix">
|
||||
<div class="container">
|
||||
<el-form inline size="small" label-width="80px">
|
||||
<el-form-item label="">
|
||||
<el-input v-model="userTableFrom.nickname" placeholder="请输入用户昵称" class="selWidth" clearable />
|
||||
<el-input v-model="userTableFrom.phone" placeholder="请输入用户手机号" class="selWidth" clearable />
|
||||
<el-input v-model="userTableFrom.uid" placeholder="请输入用户ID" class="selWidth" clearable>
|
||||
<el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getUserList(1)" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<!--表格信息-->
|
||||
<el-table v-loading="userListLoading" :data="userTableData.data" :key="Object.values(editInfo.uid_list).toString()" style="width: 100%" size="mini">
|
||||
<el-table-column label="用户信息" prop="nickname" min-width="300" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div class="user-content">
|
||||
<div class="user-avatar">
|
||||
<img :src="scope.row.avatar || moren" />
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="nickname">{{ scope.row.nickname }}</div>
|
||||
<div class="user-id">ID：{{ scope.row.uid }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="联系电话" prop="phone" min-width="150" align="center"/>
|
||||
<el-table-column label="是否为当前取货点负责人" min-width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" v-if="Object.values(editInfo.uid_list).includes(String(scope.row.uid))" effect="dark">是</el-tag>
|
||||
<el-tag type="info" v-else effect="dark">不是</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="可用额度" min-width="150" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="danger" v-if="Object.values(editInfo.uid_list).includes(String(scope.row.uid))" effect="dark" @click="closeStaffConfirm(scope.row.uid)">取消</el-button>
|
||||
<el-button type="success" v-else effect="dark" @click="addStaffConfirm(scope.row)">添加</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页-->
|
||||
<div class="block">
|
||||
<el-pagination
|
||||
:page-sizes="[20, 40, 60, 80]"
|
||||
:page-size="userTableFrom.limit"
|
||||
:current-page="userTableFrom.page"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="userTableData.total"
|
||||
@size-change="handleUserSizeChange"
|
||||
@current-change="pageUserChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="userSelectVisible = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {pickupPointList, pickupPointEdit, pickupPointInfo} from '@/api/marketing'
|
||||
import {userLstApi} from "@/api/user";
|
||||
export default {
|
||||
name: "preSaleProductList",
|
||||
components: { },
|
||||
data() {
|
||||
return {
|
||||
moren: require("@/assets/images/f.png"),
|
||||
// 编辑弹框
|
||||
drawer_show: false,
|
||||
editInfo: {
|
||||
address: '',
|
||||
is_show: 1,
|
||||
uid_list: [],
|
||||
user_list: {},
|
||||
},
|
||||
activeName: 'list',
|
||||
ruleValidate: {
|
||||
address: [{ required: true, message: '请填写取货点详细地址', trigger: 'blur' }],
|
||||
},
|
||||
// 用户选择弹框
|
||||
userSelectVisible: false,
|
||||
userListLoading: true,
|
||||
userTableFrom: {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
nickname: '',
|
||||
phone: '',
|
||||
uid: ''
|
||||
},
|
||||
userTableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
},
|
||||
// 列表相关
|
||||
listLoading: true,
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
},
|
||||
tableFrom: {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
uid: '',
|
||||
address: ''
|
||||
},
|
||||
loading: false,
|
||||
cardLists: [],
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
mounted() {
|
||||
this.getList('');
|
||||
},
|
||||
methods: {
|
||||
// 编辑取货点 - 弹出表单
|
||||
addPickupPoint(id){
|
||||
if (Number(id) > 0) {
|
||||
// 编辑
|
||||
let _this = this;
|
||||
pickupPointInfo(id)
|
||||
.then((res) => {
|
||||
_this.editInfo = res.data;
|
||||
_this.drawer_show = true;
|
||||
})
|
||||
.catch((res) => {
|
||||
this.$message.error(res.message);
|
||||
});
|
||||
} else {
|
||||
// 添加
|
||||
this.editInfo = this.$options.data().editInfo;
|
||||
this.drawer_show = true;
|
||||
}
|
||||
},
|
||||
// 编辑取货点 - 关闭表单
|
||||
handleClose() {
|
||||
this.drawer_show = false;
|
||||
},
|
||||
// 编辑取货点 - 添加负责人弹框显示
|
||||
addStaff(){
|
||||
this.getUserList(1);
|
||||
this.userSelectVisible = true;
|
||||
},
|
||||
// 编辑取货点 - 添加负责人弹框关闭
|
||||
closeStaff() {
|
||||
this.userSelectVisible = false;
|
||||
},
|
||||
// 编辑取货点 - 获取用户列表及分页相关
|
||||
getUserList(num) {
|
||||
let _this = this;
|
||||
this.userListLoading = true;
|
||||
this.userTableFrom.page = num ? num : this.userTableFrom.page;
|
||||
userLstApi(this.userTableFrom)
|
||||
.then((res) => {
|
||||
this.userTableData.data = res.data.list;
|
||||
this.userTableData.total = res.data.count;
|
||||
this.userListLoading = false;
|
||||
})
|
||||
.catch((res) => {
|
||||
this.userListLoading = false;
|
||||
this.$message.error(res.message);
|
||||
});
|
||||
},
|
||||
pageUserChange(page) {
|
||||
this.userTableFrom.page = page;
|
||||
this.getUserList('');
|
||||
},
|
||||
handleUserSizeChange(val) {
|
||||
this.userTableFrom.limit = val;
|
||||
this.getUserList('');
|
||||
},
|
||||
// 编辑取货点 - 添加负责人
|
||||
addStaffConfirm(item){
|
||||
this.editInfo.uid_list[String(item.uid)] = String(item.uid);
|
||||
this.editInfo.user_list[String(item.uid)] = item;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 编辑取货点 - 删除负责人
|
||||
closeStaffConfirm(uid){
|
||||
delete this.editInfo.uid_list[String(uid)];
|
||||
delete this.editInfo.user_list[String(uid)];
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 编辑取货点 - 提交信息
|
||||
submitEditInfo(){
|
||||
let _this = this;
|
||||
let editInfo = Object.assign({},_this.editInfo);
|
||||
editInfo.uid_list = Object.values(editInfo.uid_list);
|
||||
delete editInfo.user_list
|
||||
this.$refs['editInfoField'].validate(valid => {
|
||||
if (valid) {
|
||||
pickupPointEdit(editInfo).then((res) => {
|
||||
if(res.status == 200){
|
||||
_this.$message.success('操作成功');
|
||||
_this.handleClose();
|
||||
_this.getList(1);
|
||||
_this.$forceUpdate();
|
||||
}
|
||||
}).catch((res) => {
|
||||
_this.$message.error(res.message)
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取列表
|
||||
getList(num) {
|
||||
let _this = this;
|
||||
_this.listLoading = true;
|
||||
_this.tableFrom.page = num ? num : _this.tableFrom.page;
|
||||
pickupPointList(_this.activeName, _this.tableFrom)
|
||||
.then((res) => {
|
||||
_this.tableData.data = res.data.list;
|
||||
_this.tableData.total = res.data.count;
|
||||
_this.listLoading = false;
|
||||
})
|
||||
.catch((res) => {
|
||||
_this.listLoading = false;
|
||||
_this.$message.error(res.message);
|
||||
});
|
||||
},
|
||||
pageChange(page) {
|
||||
this.tableFrom.page = page;
|
||||
this.getList('');
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.tableFrom.limit = val;
|
||||
this.getList('');
|
||||
},
|
||||
// 切换选项卡
|
||||
handleClick(tab, event){
|
||||
this.tableData = this.$options.data().tableData;
|
||||
this.tableFrom = this.$options.data().tableFrom;
|
||||
|
||||
this.getList(1);
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.selWidth {
|
||||
width: 350px !important;
|
||||
}
|
||||
.seachTiele {
|
||||
line-height: 35px;
|
||||
}
|
||||
.title{
|
||||
margin-bottom: 16px;
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.scollhide::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
.user-content{
|
||||
--user-content-height-: 80px;
|
||||
|
||||
height: var(--user-content-height-);
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.user-avatar{
|
||||
height: var(--user-content-height-);
|
||||
width: var(--user-content-height-);
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img{
|
||||
height: 80%!important;
|
||||
width: 80%!important;
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
}
|
||||
.user-info{
|
||||
width: calc(100% - var(--user-content-height-));
|
||||
height: var(--user-content-height-);
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
.nickname{
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
line-height: calc(var(--user-content-height- * 65%));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.user-id{
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
line-height: calc(var(--user-content-height- * 35%));
|
||||
}
|
||||
}
|
||||
}
|
||||
.marginTop10{
|
||||
margin-top: 10px!important;
|
||||
}
|
||||
.staff{
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.block{
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
padding-bottom: 5px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
border-bottom: 1px solid #CCCCCC;
|
||||
width: calc((100% - 15px) / 2);
|
||||
align-items: center;
|
||||
.avatar{
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.info{
|
||||
width: calc(100% - 35px);
|
||||
padding-left: 10px;
|
||||
.name{
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.uid{
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.block:nth-child(2n){
|
||||
margin-right: 0!important;
|
||||
}
|
||||
}
|
||||
.staff-list{
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
.staff-box{
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: calc((100% - 20px)/ 3);
|
||||
border: 1px solid #CCCCCC;
|
||||
box-shadow: 0 0 5px 0px #F6F6F6;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
.staff-avatar{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.staff-info{
|
||||
width: calc(100% - (60px + 36px));
|
||||
padding-left: 10px;
|
||||
.staff-name{
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.staff-uid{
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.staff-box:nth-child(3n){
|
||||
margin-right: 0px!important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue