完善功能
This commit is contained in:
wangxiaowei
@ -80,6 +80,10 @@ let UserApi = {
|
||||
/*修改用户等级*/
|
||||
editgrade(data, errorback) {
|
||||
return request._post('/shop/user.user/grade', data, errorback);
|
||||
},
|
||||
/*拉黑用户*/
|
||||
updateStatus(data, errorback) {
|
||||
return request._post('/shop/user.user/updateStatus', data, errorback);
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@ -85,7 +85,42 @@ let VenueApi = {
|
||||
/** 开关灯 */
|
||||
lightStatus(data, errorback) {
|
||||
return request._post('/shop/ground.groundRoom/lightStatus', data, errorback);
|
||||
}
|
||||
},
|
||||
|
||||
/** 场地列表不需要分页 */
|
||||
noPageGroundRoomList(data, errorback) {
|
||||
return request._post('/shop/ground.groundRoom/roomList', data, errorback);
|
||||
},
|
||||
|
||||
/** 灯光订单列表 */
|
||||
lightOrder(data, errorback) {
|
||||
return request._post('/shop/order.orderGround/orderGroundLightList', data, errorback);
|
||||
},
|
||||
|
||||
/** 添加场景 */
|
||||
addScene(data, errorback) {
|
||||
return request._post('/shop/order.orderGround/orderTimeSet', data, errorback);
|
||||
},
|
||||
|
||||
/** 场景列表 */
|
||||
sceneList(data, errorback) {
|
||||
return request._post('/shop/order.orderGround/orderTimeSetList', data, errorback);
|
||||
},
|
||||
|
||||
/** 编辑场景 */
|
||||
editScene(data, errorback) {
|
||||
return request._post('/shop/order.orderGround/editOrderTimeSet', data, errorback);
|
||||
},
|
||||
|
||||
/** 删除场景 */
|
||||
delScene(data, errorback) {
|
||||
return request._post('/shop/order.orderGround/delOrderTimeSet', data, errorback);
|
||||
},
|
||||
|
||||
/** 充卡汇总-用户余额 */
|
||||
userBalance(data, errorback) {
|
||||
return request._post('/shop/user.balance/userBalance', data, errorback);
|
||||
},
|
||||
}
|
||||
|
||||
export default VenueApi;
|
||||
|
||||
@ -10,7 +10,6 @@ import {delCookie,deleteSessionStorage} from '@/utils/base.js';
|
||||
|
||||
//axios.defaults.timeout = 5000; //响应时间
|
||||
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //配置请求头
|
||||
//axios.defaults.baseURL = 'http://www.jjj-shop.com/'; //配置接口地址
|
||||
axios.defaults.baseURL = '/index.php'; //配置接口地址
|
||||
axios.defaults.withCredentials = true;
|
||||
axios.defaults.responseType = 'json';
|
||||
|
||||
@ -20,6 +20,16 @@
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="充卡类型">
|
||||
<el-select v-model="searchForm.pay_type" placeholder="请选择">
|
||||
<el-option label="白银卡" value="1">白银卡</el-option>
|
||||
<el-option label="黄金卡" value="2">黄金卡</el-option>
|
||||
<el-option label="铂金卡" value="3">铂金卡</el-option>
|
||||
<el-option label="钻石卡" value="4">钻石卡</el-option>
|
||||
<el-option label="至尊卡" value="5">至尊卡</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item>
|
||||
<el-button size="small" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
|
||||
</el-form-item>
|
||||
@ -29,6 +39,13 @@
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- <div>
|
||||
<div>篮球馆金额：{{ bk_amount }}</div>
|
||||
<div>网球馆金额：{{ tennis_amount }}</div>
|
||||
<div>充值卡金额：{{ balance_amount }}</div>
|
||||
</div> -->
|
||||
|
||||
<!--内容-->
|
||||
<div class="product-content">
|
||||
<div class="table-wrap">
|
||||
@ -50,9 +67,9 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="create_time" label="创建时间"></el-table-column>
|
||||
<el-table-column prop="balance_before" label="充值前余额"></el-table-column>
|
||||
<el-table-column prop="money" label="充值金额"></el-table-column>
|
||||
<el-table-column prop="balance_after" label="账户剩余余额"></el-table-column>
|
||||
<el-table-column prop="balance_before" label="总金额"></el-table-column>
|
||||
<el-table-column prop="money" label="消费金额"></el-table-column>
|
||||
<el-table-column prop="balance_after" label="剩余余额"></el-table-column>
|
||||
|
||||
<!-- <el-table-column fixed="right" label="操作" width="130">
|
||||
<template slot-scope="scope">
|
||||
@ -105,7 +122,8 @@ export default {
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
nickName: '',
|
||||
value1:''
|
||||
value1:'',
|
||||
pay_type: '',
|
||||
},
|
||||
/*配送方式*/
|
||||
exStyle: [],
|
||||
|
||||
418
src/views/recharge/recharge/user.vue
Normal file
418
src/views/recharge/recharge/user.vue
Normal file
@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<div class="user">
|
||||
<!--搜索表单-->
|
||||
<div class="common-seach-wrap">
|
||||
<el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
|
||||
<el-form-item label="用户昵称">
|
||||
<el-input size="small" v-model="searchForm.search" placeholder="请输入用户昵称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="充卡类型">
|
||||
<el-select v-model="searchForm.pay_type" placeholder="请选择">
|
||||
<el-option label="白银卡" value="1">白银卡</el-option>
|
||||
<el-option label="黄金卡" value="2">黄金卡</el-option>
|
||||
<el-option label="铂金卡" value="3">铂金卡</el-option>
|
||||
<el-option label="钻石卡" value="4">钻石卡</el-option>
|
||||
<el-option label="至尊卡" value="5">至尊卡</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="订单号">
|
||||
<el-input size="small" v-model="searchForm.order_sn" placeholder="请输入订单号"></el-input>
|
||||
</el-form-item> -->
|
||||
|
||||
<!-- <el-form-item label="起始时间">
|
||||
<div class="block">
|
||||
<span class="demonstration"></span>
|
||||
<el-date-picker size="small" v-model="searchForm.value1" type="daterange"
|
||||
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"></el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
-->
|
||||
|
||||
<el-form-item>
|
||||
<el-button size="small" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item>
|
||||
<el-button size="small" type="success" @click="onExport"
|
||||
v-auth="'/order/operate/export'">导出</el-button>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
|
||||
<el-statistic title="总余额" :value="total_amount.total_amount" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
|
||||
<el-statistic title="白银卡汇总" :value="total_amount.total_balance1" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
|
||||
<el-statistic title="黄金卡汇总" :value="total_amount.total_balance2" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
|
||||
<el-statistic title="铂金卡汇总" :value="total_amount.total_balance3" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
|
||||
<el-statistic title="钻石卡汇总" :value="total_amount.total_balance4" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
|
||||
<el-statistic title="至尊卡汇总" :value="total_amount.total_balance5" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="width:100%;display:flex;justify-content:center;margin-top:24px;">
|
||||
<div id="barChart" style="width:100%;height:400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--内容-->
|
||||
<div class="product-content">
|
||||
<div class="table-wrap">
|
||||
<el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
|
||||
<el-table-column prop="userInfo" label="用户信息">
|
||||
<template slot-scope="scope">
|
||||
<div class="">用户昵称: {{ scope.row.nickName }}</div>
|
||||
<div class=""><img :src="scope.row.avatarUrl" width="30px" height="30px" /></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="balance1" label="白银卡"></el-table-column>
|
||||
<el-table-column prop="balance2" label="黄金卡"></el-table-column>
|
||||
<el-table-column prop="balance3" label="铂金卡"></el-table-column>
|
||||
<el-table-column prop="balance4" label="钻石卡"></el-table-column>
|
||||
<el-table-column prop="balance5" label="至尊卡"></el-table-column>
|
||||
<el-table-column prop="count" label="消费次数"></el-table-column>
|
||||
<!-- <el-table-column fixed="right" label="操作" width="130">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="addClick(scope.row)" type="text" size="small"
|
||||
v-auth="'/venue/order/detail'">详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
</div>
|
||||
<!--分页-->
|
||||
<div class="pagination">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
|
||||
:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
|
||||
:total="totalDataNumber"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import OrderApi from '@/api/order.js';
|
||||
import VenueApi from '@/api/venue.js';
|
||||
import * as echarts from 'echarts';
|
||||
import qs from 'qs';
|
||||
// import Cancel from './dialog/cancel.vue';
|
||||
export default {
|
||||
// components: {
|
||||
// Cancel
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
/*切换菜单*/
|
||||
activeName: 'all',
|
||||
/*是否加载完成*/
|
||||
loading: true,
|
||||
/*列表数据*/
|
||||
tableData: [],
|
||||
/*一页多少条*/
|
||||
pageSize: 20,
|
||||
/*一共多少条数据*/
|
||||
totalDataNumber: 0,
|
||||
/*当前是第几页*/
|
||||
curPage: 1,
|
||||
/*横向表单数据模型*/
|
||||
searchForm: {
|
||||
nickName: '',
|
||||
order_sn: '',
|
||||
search: '',
|
||||
create_time: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
nickName: '',
|
||||
value1: '',
|
||||
pay_type: '',
|
||||
},
|
||||
/*配送方式*/
|
||||
exStyle: [],
|
||||
/*门店列表*/
|
||||
shopList: [],
|
||||
/*时间*/
|
||||
create_time: '',
|
||||
/*统计*/
|
||||
order_count: {
|
||||
payment: 0,
|
||||
delivery: 0,
|
||||
received: 0
|
||||
},
|
||||
dialogBatchDelivery: false,
|
||||
/*是否打开编辑弹窗*/
|
||||
open_edit: false,
|
||||
/*当前编辑的对象*/
|
||||
order_no: 0,
|
||||
total_amount: {
|
||||
total_amount: 0,
|
||||
total_balance1: 0,
|
||||
total_balance2: 0,
|
||||
total_balance3: 0,
|
||||
total_balance4: 0,
|
||||
total_balance5: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
/*获取列表*/
|
||||
this.getData();
|
||||
},
|
||||
mounted() {
|
||||
this.initBarChart();
|
||||
},
|
||||
methods: {
|
||||
// 初始化ECharts柱状图
|
||||
initBarChart() {
|
||||
this.renderBarChart();
|
||||
},
|
||||
renderBarChart() {
|
||||
const chartDom = document.getElementById('barChart');
|
||||
if (!chartDom) return;
|
||||
const myChart = echarts.init(chartDom);
|
||||
const option = {
|
||||
title: {
|
||||
text: '余额统计',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['总余额', '白银卡', '黄金卡', '铂金卡', '钻石卡', '至尊卡']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '余额',
|
||||
type: 'bar',
|
||||
data: [
|
||||
this.total_amount.total_amount,
|
||||
this.total_amount.total_balance1,
|
||||
this.total_amount.total_balance2,
|
||||
this.total_amount.total_balance3,
|
||||
this.total_amount.total_balance4,
|
||||
this.total_amount.total_balance5
|
||||
],
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
barWidth: 30,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#333',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => { myChart.resize(); });
|
||||
},
|
||||
/*跨多列*/
|
||||
arraySpanMethod(row) {
|
||||
if (row.rowIndex % 2 == 0) {
|
||||
if (row.columnIndex === 0) {
|
||||
return [1, 8];
|
||||
}
|
||||
}
|
||||
},
|
||||
/*选择第几页*/
|
||||
handleCurrentChange(val) {
|
||||
let self = this;
|
||||
self.curPage = val;
|
||||
self.getData();
|
||||
},
|
||||
|
||||
/*每页多少条*/
|
||||
handleSizeChange(val) {
|
||||
this.curPage = 1;
|
||||
this.pageSize = val;
|
||||
this.getData();
|
||||
},
|
||||
|
||||
/*切换菜单*/
|
||||
handleClick(tab, event) {
|
||||
let self = this;
|
||||
self.curPage = 1;
|
||||
self.getData();
|
||||
},
|
||||
|
||||
/*获取列表*/
|
||||
getData() {
|
||||
let self = this;
|
||||
let Params = this.searchForm;
|
||||
Params.order_status = self.activeName == 'all' ? '' : self.activeName;
|
||||
Params.page = self.curPage;
|
||||
Params.list_rows = self.pageSize;
|
||||
self.loading = true;
|
||||
VenueApi.userBalance(Params, true)
|
||||
.then(res => {
|
||||
self.total_amount = res.data.total_amount;
|
||||
self.tableData = res.data.list.data;
|
||||
self.totalDataNumber = res.data.list.total;
|
||||
self.loading = false;
|
||||
|
||||
// 更新条形图
|
||||
self.$nextTick(() => {
|
||||
self.renderBarChart();
|
||||
});
|
||||
})
|
||||
.catch(error => { });
|
||||
},
|
||||
/*打开取消*/
|
||||
cancelClick(item) {
|
||||
this.order_no = item.order_no;
|
||||
this.open_edit = true;
|
||||
},
|
||||
/*关闭弹窗*/
|
||||
closeDialogFunc(e, f) {
|
||||
if (f == 'edit') {
|
||||
this.open_edit = e.openDialog;
|
||||
if (e.type == 'success') {
|
||||
this.getData();
|
||||
}
|
||||
}
|
||||
},
|
||||
/*打开添加*/
|
||||
addClick(row) {
|
||||
let self = this;
|
||||
let params = row.order_id;
|
||||
self.$router.push({
|
||||
path: '/order/order/Detail',
|
||||
query: {
|
||||
order_id: params
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/*搜索查询*/
|
||||
onSubmit() {
|
||||
if (this.searchForm.create_time && this.searchForm.create_time.length == 2) {
|
||||
this.searchForm.start_time = this.searchForm.create_time[0];
|
||||
this.searchForm.end_time = this.searchForm.create_time[1];
|
||||
} else {
|
||||
this.searchForm.start_time = '';
|
||||
this.searchForm.end_time = '';
|
||||
}
|
||||
|
||||
this.curPage = 1;
|
||||
this.tableData = [];
|
||||
this.getData();
|
||||
},
|
||||
onExport: function () {
|
||||
let baseUrl = window.location.protocol + '//' + window.location.host;
|
||||
window.location.href = baseUrl + '/index.php/shop/order.operate/orderGroundExport?' + qs.stringify(this.searchForm);
|
||||
},
|
||||
// 显示批量发货说明
|
||||
showBatchDelivery() {
|
||||
this.dialogBatchDelivery = true;
|
||||
},
|
||||
/*跳转物流公司*/
|
||||
gotoExpress() {
|
||||
let self = this;
|
||||
self.$router.push('/setting/express/index');
|
||||
},
|
||||
|
||||
/*选择图片之前*/
|
||||
onBeforeUploadImage(file) {
|
||||
var fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
|
||||
const isEXCEL = fileType === 'xlsx';
|
||||
const isLt10M = file.size / 1024 / 1024 < 10;
|
||||
if (!isEXCEL) {
|
||||
this.$message.error('上传文件只能是excel格式!');
|
||||
}
|
||||
if (!isLt10M) {
|
||||
this.$message.error('上传文件大小不能超过 10MB!');
|
||||
}
|
||||
return isEXCEL && isLt10M;
|
||||
},
|
||||
|
||||
/*上传图片*/
|
||||
UploadImage(param) {
|
||||
let self = this;
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '正在处理,请等待',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
const formData = new FormData();
|
||||
formData.append('iFile', param.file);
|
||||
OrderApi.batchDelivery(formData)
|
||||
.then(response => {
|
||||
loading.close();
|
||||
self.dialogBatchDelivery = false;
|
||||
self.$message({
|
||||
message: response.msg,
|
||||
type: 'warning'
|
||||
});
|
||||
})
|
||||
.catch(response => {
|
||||
loading.close();
|
||||
self.$message({
|
||||
message: '本次处理失败',
|
||||
type: 'warning'
|
||||
});
|
||||
param.onError();
|
||||
});
|
||||
},
|
||||
|
||||
// 查看详情
|
||||
detailClick(row) {
|
||||
this.$router.push({
|
||||
path: '/venue/order/detail',
|
||||
query: {
|
||||
order_id: row.order_id,
|
||||
scene: 'view'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.product-content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
.order-code .state-text {
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
background: #808080;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.order-code .state-text-red {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.table-wrap .product-info:first-of-type {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.table-wrap .el-table__body tbody .el-table__row:nth-child(odd) {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -52,10 +52,18 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="mobile" label="手机号"></el-table-column>
|
||||
<el-table-column prop="create_time" label="注册时间" width="140"></el-table-column>
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.status == 1 ? '正常' : '已拉黑' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="170">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="addClick(scope.row)" type="text" size="small"
|
||||
v-auth="'/user/user/rechargeCard'">查看</el-button>
|
||||
v-auth="'/user/user/rechargeCard'">查看</el-button>
|
||||
|
||||
<el-button @click="addBlack(scope.row)" type="text" size="small"
|
||||
v-auth="'/user/user/rechargeCard'">{{ scope.row.status == 1 ? '拉黑' : '恢复' }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -262,6 +270,47 @@ export default {
|
||||
.catch(() => {
|
||||
self.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/*拉黑用户*/
|
||||
addBlack(row) {
|
||||
let self = this;
|
||||
|
||||
let actionText = row.status == 1 ? '拉黑' : '恢复';
|
||||
self
|
||||
.$confirm(`是否${actionText}该用户?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
self.loading = true;
|
||||
UserApi.updateStatus(
|
||||
{
|
||||
user_id: row.user_id,
|
||||
status: row.status == 1 ? 2 : 1
|
||||
},
|
||||
true
|
||||
)
|
||||
.then(data => {
|
||||
self.loading = false;
|
||||
if (data.code == 1) {
|
||||
self.$message({
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
});
|
||||
self.getTableList();
|
||||
} else {
|
||||
self.loading = false;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
self.loading = false;
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
self.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -52,6 +52,10 @@
|
||||
<span v-if="order.pay_way == 1">余额支付-{{ cardType(order.pay_type) }}</span>
|
||||
<span v-if="order.pay_way == 2">微信支付</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="实际退款" v-if="order.order_status == 5">
|
||||
<span>{{ order.order_amount }}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="common-form">预定信息</div>
|
||||
|
||||
@ -12,9 +12,9 @@
|
||||
<el-input size="small" v-model="searchForm.nickName" placeholder="请输入用户昵称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="订单号">
|
||||
<!-- <el-form-item label="订单号">
|
||||
<el-input size="small" v-model="searchForm.order_sn" placeholder="请输入订单号"></el-input>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item label="起始时间">
|
||||
<div class="block">
|
||||
@ -26,7 +26,7 @@
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="订单状态">
|
||||
<el-select v-model="searchForm.order_status" placeholder="请选择">
|
||||
<el-select v-model="searchForm.order_status2" placeholder="请选择">
|
||||
<el-option label="待付款" value="0"></el-option>
|
||||
<el-option label="已预约" value="1"></el-option>
|
||||
<el-option label="进行中" value="2"></el-option>
|
||||
@ -34,7 +34,13 @@
|
||||
<el-option label="已取消" value="4"></el-option>
|
||||
<el-option label="退订/退款" value="5"></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item label="场地列表">
|
||||
<el-select v-model="searchForm.room_id" placeholder="请选择">
|
||||
<el-option :label="item.title" :value="item.id" v-for="item in venueList" :key="item.id">{{ item.title }}</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button size="small" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
|
||||
@ -45,6 +51,27 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :xs="24" :sm="12" :md="6" class="text-center mb-4">
|
||||
<el-statistic title="统计金额" :value="total_amount" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6" class="text-center mb-4">
|
||||
<el-statistic title="篮球馆金额" :value="bk_amount" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6" class="text-center mb-4">
|
||||
<el-statistic title="网球馆金额" :value="tennis_amount" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6" class="text-center mb-4">
|
||||
<el-statistic title="充值卡金额" :value="balance_amount" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="width:100%;display:flex;justify-content:center;margin-top:24px;">
|
||||
<div id="barChart" style="width:100%;height:350px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--内容-->
|
||||
<div class="product-content">
|
||||
<div class="table-wrap">
|
||||
@ -67,8 +94,17 @@
|
||||
<div class="" v-if="scope.row.user_id > 0"><img :src="scope.row.avatarUrl" width="30px" height="30px" /></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="order_sn" label="订单号"></el-table-column>
|
||||
<!-- <el-table-column prop="order_sn" label="订单号"></el-table-column> -->
|
||||
<el-table-column prop="name" label="场馆"></el-table-column>
|
||||
<el-table-column prop="trade" label="场地">
|
||||
<template slot-scope="scope">
|
||||
<div class="">
|
||||
<span v-for="item in scope.row.trade" :key="item.id">
|
||||
{{ item.room_name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="yuding_time" label="场馆预定日期"></el-table-column>
|
||||
<el-table-column prop="yuding_hour" label="预定小时">
|
||||
<template slot-scope="scope">
|
||||
@ -88,7 +124,19 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="order_amount" label="订单金额">
|
||||
<template slot-scope="scope">
|
||||
￥{{ scope.row.order_amount }}
|
||||
<!-- <div>
|
||||
灯光价：￥{{ scope.row.light_price }}
|
||||
</div>
|
||||
<div>
|
||||
场地价：￥{{ scope.row.room_price }}
|
||||
</div> -->
|
||||
<div>
|
||||
总价：￥{{ scope.row.order_amount }}
|
||||
</div>
|
||||
|
||||
<div v-if="scope.row.order_status == 5">
|
||||
实际退款：￥{{ scope.row.refund_price }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@ -121,6 +169,7 @@
|
||||
<script>
|
||||
import OrderApi from '@/api/order.js';
|
||||
import VenueApi from '@/api/venue.js';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import qs from 'qs';
|
||||
// import Cancel from './dialog/cancel.vue';
|
||||
@ -150,7 +199,8 @@ export default {
|
||||
create_time: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
nickName: ''
|
||||
nickName: '',
|
||||
room_id: ''
|
||||
},
|
||||
/*配送方式*/
|
||||
exStyle: [],
|
||||
@ -169,11 +219,21 @@ export default {
|
||||
open_edit: false,
|
||||
/*当前编辑的对象*/
|
||||
order_no: 0,
|
||||
venueList: [],
|
||||
total_amount: 0,
|
||||
tennis_amount: 0,
|
||||
bk_amount: 0,
|
||||
balance_amount: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
/*获取列表*/
|
||||
this.getData();
|
||||
this.getGroundList();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.renderBarChart();
|
||||
},
|
||||
methods: {
|
||||
/*跨多列*/
|
||||
@ -209,6 +269,8 @@ export default {
|
||||
getData() {
|
||||
let self = this;
|
||||
let Params = this.searchForm;
|
||||
console.log("🚀 ~ Paramsthis.searchForm:", this.searchForm)
|
||||
|
||||
Params.order_status = self.activeName == 'all' ? '' : self.activeName;
|
||||
Params.page = self.curPage;
|
||||
Params.list_rows = self.pageSize;
|
||||
@ -216,16 +278,29 @@ export default {
|
||||
VenueApi.orderGroundList(Params, true)
|
||||
.then(res => {
|
||||
console.log("🚀 ~ res:", res)
|
||||
self.tableData = res.data.data;
|
||||
self.totalDataNumber = res.data.total;
|
||||
self.tableData = res.data.list.data;
|
||||
self.totalDataNumber = res.data.list.total;
|
||||
self.loading = false;
|
||||
|
||||
// self.loading = false;
|
||||
// self.tableData = res.data.data;
|
||||
// self.totalDataNumber = res.data.total;
|
||||
self.total_amount = res.data.order_amount;
|
||||
self.tennis_amount = res.data.tennis_amount;
|
||||
self.bk_amount = res.data.bk_amount;
|
||||
self.balance_amount = res.data.balance_amount;
|
||||
// 更新条形图
|
||||
self.$nextTick(() => {
|
||||
self.renderBarChart();
|
||||
});
|
||||
})
|
||||
.catch(error => { });
|
||||
},
|
||||
|
||||
/*获取场地列表-不需要分页*/
|
||||
getGroundList() {
|
||||
VenueApi.noPageGroundRoomList()
|
||||
.then(res => {
|
||||
this.venueList = res.data
|
||||
}).catch(error => { });
|
||||
},
|
||||
|
||||
/*打开取消*/
|
||||
cancelClick(item) {
|
||||
this.order_no = item.order_no;
|
||||
@ -363,10 +438,57 @@ export default {
|
||||
message: '已取消'
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
renderBarChart() {
|
||||
const chartDom = document.getElementById('barChart');
|
||||
if (!chartDom) return;
|
||||
const myChart = echarts.init(chartDom);
|
||||
const option = {
|
||||
title: {
|
||||
text: '金额统计',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {},
|
||||
grid: { left: 60, right: 30, top: 60, bottom: 30 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['统计金额', '篮球馆金额', '网球馆金额', '充值卡金额']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '金额',
|
||||
type: 'bar',
|
||||
data: [
|
||||
this.total_amount || 0,
|
||||
this.bk_amount || 0,
|
||||
this.tennis_amount || 0,
|
||||
this.balance_amount || 0
|
||||
],
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
barWidth: 60,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#333',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => { myChart.resize(); });
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.product-info {
|
||||
padding: 10px 0;
|
||||
|
||||
435
src/views/venue/order/light.vue
Normal file
435
src/views/venue/order/light.vue
Normal file
@ -0,0 +1,435 @@
|
||||
<template>
|
||||
<!--
|
||||
作者：luoyiming
|
||||
时间：2019-10-25
|
||||
描述：订单列表
|
||||
-->
|
||||
<div class="user">
|
||||
<!--搜索表单-->
|
||||
<div class="common-seach-wrap">
|
||||
<el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
|
||||
|
||||
<el-form-item label="手机号">
|
||||
<el-input size="small" v-model="searchForm.mobile" placeholder="请输入手机号"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="起始时间">
|
||||
<div class="block">
|
||||
<span class="demonstration"></span>
|
||||
<el-date-picker size="small" v-model="searchForm.create_time" type="daterange"
|
||||
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"></el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button size="small" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item>
|
||||
<el-button size="small" type="success" @click="onExport"
|
||||
v-auth="'/order/operate/export'">导出</el-button>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-row :gutter="16">
|
||||
<el-col class="text-center mb-4">
|
||||
<el-statistic title="总金额" :value="total_amount" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="width:100%;display:flex;justify-content:center;margin-top:24px;">
|
||||
<div id="barChart" style="width:100%;height:350px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--内容-->
|
||||
<div class="product-content">
|
||||
<div class="table-wrap">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="全部订单" name="all"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
|
||||
<el-table-column prop="userInfo" label="用户信息">
|
||||
<template slot-scope="scope">
|
||||
<div class="">
|
||||
<span v-if="scope.row.user_id > 0">用户昵称: {{ scope.row.nickname }}</span>
|
||||
</div>
|
||||
<div class="" v-if="scope.row.user_id > 0"><img :src="scope.row.avatarUrl" width="30px" height="30px" /></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="order_sn" label="订单号"></el-table-column> -->
|
||||
<el-table-column prop="content" label="内容">
|
||||
<template slot-scope="scope">
|
||||
<div v-for="item in scope.row.content" style="margin-bottom: 10px;">
|
||||
<div>场地：{{ item.room_name }}</div>
|
||||
<div style="font-weight: 700;">时间：{{ item.arr }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="mobile" label="手机号"></el-table-column>
|
||||
<el-table-column prop="order_sn" label="订单号"></el-table-column>
|
||||
<el-table-column prop="dtime" label="订单创建时间"></el-table-column>
|
||||
<el-table-column prop="order_amount" label="订单金额">
|
||||
<template slot-scope="scope">
|
||||
<!-- <div>
|
||||
灯光价：￥{{ scope.row.light_price }}
|
||||
</div>
|
||||
<div>
|
||||
场地价：￥{{ scope.row.room_price }}
|
||||
</div> -->
|
||||
<div>
|
||||
总价：￥{{ scope.row.order_amount }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column fixed="right" label="操作" width="130">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="addClick(scope.row)" type="text" size="small"
|
||||
v-auth="'/venue/order/detail'">详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
</div>
|
||||
<!--分页-->
|
||||
<div class="pagination">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
|
||||
:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
|
||||
:total="totalDataNumber"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import OrderApi from '@/api/order.js';
|
||||
import VenueApi from '@/api/venue.js';
|
||||
import * as echarts from 'echarts';
|
||||
import qs from 'qs';
|
||||
// import Cancel from './dialog/cancel.vue';
|
||||
export default {
|
||||
// components: {
|
||||
// Cancel
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
/*切换菜单*/
|
||||
activeName: 'all',
|
||||
/*是否加载完成*/
|
||||
loading: true,
|
||||
/*列表数据*/
|
||||
tableData: [],
|
||||
/*一页多少条*/
|
||||
pageSize: 20,
|
||||
/*一共多少条数据*/
|
||||
totalDataNumber: 0,
|
||||
/*当前是第几页*/
|
||||
curPage: 1,
|
||||
/*横向表单数据模型*/
|
||||
searchForm: {
|
||||
mobile: '',
|
||||
create_time: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
},
|
||||
/*配送方式*/
|
||||
exStyle: [],
|
||||
/*门店列表*/
|
||||
shopList: [],
|
||||
/*时间*/
|
||||
create_time: '',
|
||||
/*统计*/
|
||||
order_count: {
|
||||
payment: 0,
|
||||
delivery: 0,
|
||||
received: 0
|
||||
},
|
||||
dialogBatchDelivery: false,
|
||||
/*是否打开编辑弹窗*/
|
||||
open_edit: false,
|
||||
/*当前编辑的对象*/
|
||||
order_no: 0,
|
||||
venueList: [],
|
||||
total_amount: 0
|
||||
};
|
||||
},
|
||||
created() {
|
||||
/*获取列表*/
|
||||
this.getData();
|
||||
this.getGroundList();
|
||||
},
|
||||
mounted() {
|
||||
this.renderBarChart();
|
||||
},
|
||||
methods: {
|
||||
/*跨多列*/
|
||||
arraySpanMethod(row) {
|
||||
if (row.rowIndex % 2 == 0) {
|
||||
if (row.columnIndex === 0) {
|
||||
return [1, 8];
|
||||
}
|
||||
}
|
||||
},
|
||||
/*选择第几页*/
|
||||
handleCurrentChange(val) {
|
||||
let self = this;
|
||||
self.curPage = val;
|
||||
self.getData();
|
||||
},
|
||||
|
||||
/*每页多少条*/
|
||||
handleSizeChange(val) {
|
||||
this.curPage = 1;
|
||||
this.pageSize = val;
|
||||
this.getData();
|
||||
},
|
||||
|
||||
/*切换菜单*/
|
||||
handleClick(tab, event) {
|
||||
let self = this;
|
||||
self.curPage = 1;
|
||||
self.getData();
|
||||
},
|
||||
|
||||
/*获取列表*/
|
||||
getData() {
|
||||
let self = this;
|
||||
let Params = this.searchForm;
|
||||
console.log("🚀 ~ Paramsthis.searchForm:", this.searchForm)
|
||||
|
||||
Params.page = self.curPage;
|
||||
Params.list_rows = self.pageSize;
|
||||
self.loading = true;
|
||||
VenueApi.lightOrder(Params, true)
|
||||
.then(res => {
|
||||
console.log("🚀 ~ res:", res)
|
||||
self.tableData = res.data.list.data;
|
||||
self.totalDataNumber = res.data.list.total;
|
||||
self.loading = false;
|
||||
self.total_amount = res.data.order_amount;
|
||||
|
||||
// 更新条形图
|
||||
self.$nextTick(() => {
|
||||
self.renderBarChart();
|
||||
});
|
||||
})
|
||||
.catch(error => { });
|
||||
},
|
||||
|
||||
/*获取场地列表-不需要分页*/
|
||||
getGroundList() {
|
||||
VenueApi.noPageGroundRoomList()
|
||||
.then(res => {
|
||||
this.venueList = res.data
|
||||
}).catch(error => { });
|
||||
},
|
||||
|
||||
/*打开取消*/
|
||||
cancelClick(item) {
|
||||
this.order_no = item.order_no;
|
||||
this.open_edit = true;
|
||||
},
|
||||
/*关闭弹窗*/
|
||||
closeDialogFunc(e, f) {
|
||||
if (f == 'edit') {
|
||||
this.open_edit = e.openDialog;
|
||||
if (e.type == 'success') {
|
||||
this.getData();
|
||||
}
|
||||
}
|
||||
},
|
||||
/*打开添加*/
|
||||
addClick(row) {
|
||||
let self = this;
|
||||
let params = row.order_id;
|
||||
self.$router.push({
|
||||
path: '/order/order/Detail',
|
||||
query: {
|
||||
order_id: params
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/*搜索查询*/
|
||||
onSubmit() {
|
||||
if (this.searchForm.create_time && this.searchForm.create_time.length == 2) {
|
||||
this.searchForm.start_time = this.searchForm.create_time[0];
|
||||
this.searchForm.end_time = this.searchForm.create_time[1];
|
||||
} else {
|
||||
this.searchForm.start_time = '';
|
||||
this.searchForm.end_time = '';
|
||||
}
|
||||
|
||||
this.curPage = 1;
|
||||
this.tableData = [];
|
||||
this.getData();
|
||||
},
|
||||
onExport: function () {
|
||||
let baseUrl = window.location.protocol + '//' + window.location.host;
|
||||
window.location.href = baseUrl + '/index.php/shop/order.operate/orderGroundExport?' + qs.stringify(this.searchForm);
|
||||
},
|
||||
// 显示批量发货说明
|
||||
showBatchDelivery() {
|
||||
this.dialogBatchDelivery = true;
|
||||
},
|
||||
/*跳转物流公司*/
|
||||
gotoExpress() {
|
||||
let self = this;
|
||||
self.$router.push('/setting/express/index');
|
||||
},
|
||||
|
||||
/*选择图片之前*/
|
||||
onBeforeUploadImage(file) {
|
||||
var fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
|
||||
const isEXCEL = fileType === 'xlsx';
|
||||
const isLt10M = file.size / 1024 / 1024 < 10;
|
||||
if (!isEXCEL) {
|
||||
this.$message.error('上传文件只能是excel格式!');
|
||||
}
|
||||
if (!isLt10M) {
|
||||
this.$message.error('上传文件大小不能超过 10MB!');
|
||||
}
|
||||
return isEXCEL && isLt10M;
|
||||
},
|
||||
|
||||
/*上传图片*/
|
||||
UploadImage(param) {
|
||||
let self = this;
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '正在处理,请等待',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
const formData = new FormData();
|
||||
formData.append('iFile', param.file);
|
||||
OrderApi.batchDelivery(formData)
|
||||
.then(response => {
|
||||
loading.close();
|
||||
self.dialogBatchDelivery = false;
|
||||
self.$message({
|
||||
message: response.msg,
|
||||
type: 'warning'
|
||||
});
|
||||
})
|
||||
.catch(response => {
|
||||
loading.close();
|
||||
self.$message({
|
||||
message: '本次处理失败',
|
||||
type: 'warning'
|
||||
});
|
||||
param.onError();
|
||||
});
|
||||
},
|
||||
|
||||
// 查看详情
|
||||
detailClick(row) {
|
||||
this.$router.push({
|
||||
path: '/venue/order/detail',
|
||||
query: {
|
||||
order_id: row.order_id,
|
||||
scene: 'view'
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
cancleClick(row) {
|
||||
this.$confirm('是否取消此订单?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
VenueApi.cancelAdminReserve({
|
||||
order_id: row.order_id,
|
||||
}, true).
|
||||
then(res => {
|
||||
console.log("🚀 ~ res:", res)
|
||||
if (res.code == 1) {
|
||||
this.$message({
|
||||
message: '取消成功',
|
||||
type: 'success'
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
location.reload()
|
||||
}, 500)
|
||||
}
|
||||
}).catch(error => {});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消'
|
||||
});
|
||||
});
|
||||
},
|
||||
renderBarChart() {
|
||||
const chartDom = document.getElementById('barChart');
|
||||
if (!chartDom) return;
|
||||
const myChart = echarts.init(chartDom);
|
||||
const option = {
|
||||
title: {
|
||||
text: '统计金额',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {},
|
||||
grid: { left: 60, right: 30, top: 60, bottom: 30 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['总金额']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '金额',
|
||||
type: 'bar',
|
||||
data: [
|
||||
this.total_amount || 0,
|
||||
],
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
barWidth: 60,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#333',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => { myChart.resize(); });
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.product-info {
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
.order-code .state-text {
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
background: #808080;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.order-code .state-text-red {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.table-wrap .product-info:first-of-type {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.table-wrap .el-table__body tbody .el-table__row:nth-child(odd) {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
@ -315,7 +315,7 @@ export default {
|
||||
VenueApi.editGroundRoom(params).then(data => {
|
||||
self.loading = false;
|
||||
self.$message({
|
||||
message: '添加成功',
|
||||
message: '编辑成功',
|
||||
type: 'success'
|
||||
});
|
||||
self.dialogFormVisible(true);
|
||||
|
||||
232
src/views/venue/scene/Add.vue
Normal file
232
src/views/venue/scene/Add.vue
Normal file
@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<el-dialog title="添加场景" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
|
||||
:close-on-press-escape="false">
|
||||
<el-form size="small" :model="form" :rules="formRules" ref="form">
|
||||
<el-form-item label="选择场地" prop="room_id" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.room_id" @change="changeGround">
|
||||
<el-option :value="item.id" :label="item.title" :key="item.id" v-for="item in veuneList"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="选择日期" prop="times" :label-width="formLabelWidth">
|
||||
<div class="block">
|
||||
<span class="demonstration"></span>
|
||||
<el-date-picker size="small" v-model="form.times" type="daterange"
|
||||
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"></el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="选择星期" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.week">
|
||||
<el-option :value="item.id" :label="item.title" :key="item.id" v-for="item in week_arr"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="时间段" prop="times_arr" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.times_arr" multiple placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible">取 消</el-button>
|
||||
<el-button type="primary" @click="addUser" :loading="loading">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PorductApi from '@/api/product.js';
|
||||
import Upload from '@/components/file/Upload';
|
||||
import Uediter from '@/components/UE.vue';
|
||||
import VenueApi from '@/api/venue.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Upload,
|
||||
Uediter,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/*富文本框配置*/
|
||||
ueditor: {
|
||||
text: '',
|
||||
config: {
|
||||
initialFrameWidth: 400,
|
||||
initialFrameHeight: 500
|
||||
},
|
||||
},
|
||||
selectGroundType: null,
|
||||
form: {
|
||||
room_id: '',
|
||||
times: '',
|
||||
week: '',
|
||||
times_arr:[
|
||||
'06:00-07:00',
|
||||
'07:00-08:00',
|
||||
'08:00-09:00',
|
||||
'09:00-10:00',
|
||||
'10:00-11:00',
|
||||
'11:00-12:00',
|
||||
'12:00-13:00',
|
||||
'13:00-14:00',
|
||||
'14:00-15:00',
|
||||
'15:00-16:00',
|
||||
'16:00-17:00',
|
||||
'17:00-18:00',
|
||||
'18:00-19:00',
|
||||
'19:00-20:00',
|
||||
'20:00-21:00',
|
||||
'21:00-22:00',
|
||||
],
|
||||
},
|
||||
formRules: {
|
||||
room_id: [{
|
||||
required: true,
|
||||
message: '请选择场地',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
times_arr: [{
|
||||
required: true,
|
||||
message: '请选择灯光使用时段',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
},
|
||||
options: [],
|
||||
/*左边长度*/
|
||||
formLabelWidth: '120px',
|
||||
/*是否显示*/
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
/*是否上传图片*/
|
||||
isupload: false,
|
||||
veuneList: [],
|
||||
week_arr: [
|
||||
{ id: '1', title: '周一' },
|
||||
{ id: '2', title: '周二' },
|
||||
{ id: '3', title: '周三' },
|
||||
{ id: '4', title: '周四' },
|
||||
{ id: '5', title: '周五' },
|
||||
{ id: '6', title: '周六' },
|
||||
{ id: '7', title: '周日' },
|
||||
],
|
||||
};
|
||||
},
|
||||
props: ['open_add', 'addform'],
|
||||
created() {
|
||||
this.dialogVisible = this.open_add;
|
||||
// 生成 6:00-22:00 的时间段，格式为 { value: '06:00-07:00', label: '06:00 - 07:00' }
|
||||
const start = 6, end = 22;
|
||||
this.options = [];
|
||||
for (let i = start; i < end; i++) {
|
||||
const h1 = i < 10 ? `0${i}` : `${i}`;
|
||||
const h2 = i + 1 < 10 ? `0${i + 1}` : `${i + 1}`;
|
||||
this.options.push({
|
||||
value: `${h1}:00-${h2}:00`,
|
||||
label: `${h1}:00 - ${h2}:00`
|
||||
});
|
||||
}
|
||||
this.getVeuneList()
|
||||
},
|
||||
methods: {
|
||||
// 获取场地列表-不需要分页
|
||||
getVeuneList() {
|
||||
let self = this;
|
||||
VenueApi.noPageGroundRoomList({ground_id: 1}, true)
|
||||
.then(res => {
|
||||
self.veuneList = res.data;
|
||||
})
|
||||
.catch(error => {
|
||||
self.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/*添加场景*/
|
||||
addUser() {
|
||||
let self = this;
|
||||
// 复制表单数据
|
||||
let params = { ...self.form };
|
||||
self.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
self.loading = true;
|
||||
|
||||
if (params.times) {
|
||||
params.times = params.times.join(',');
|
||||
}
|
||||
|
||||
if (!params.times && !params.week) {
|
||||
self.$message({
|
||||
message: '日期范围和星期需选择其一',
|
||||
type: 'warning'
|
||||
});
|
||||
self.loading = false;
|
||||
return
|
||||
}
|
||||
params.times_arr = params.times_arr.join(',');
|
||||
|
||||
VenueApi.addScene(params).then(data => {
|
||||
self.loading = false;
|
||||
self.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
});
|
||||
self.dialogFormVisible(true);
|
||||
}).catch(error => {
|
||||
self.loading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/*获取富文本内容*/
|
||||
contentChangeFunc(e){
|
||||
this.form.textarea1 = e;
|
||||
},
|
||||
|
||||
/*关闭弹窗*/
|
||||
dialogFormVisible(e) {
|
||||
if (e) {
|
||||
this.$emit('closeDialog', {
|
||||
type: 'success',
|
||||
openDialog: false
|
||||
})
|
||||
} else {
|
||||
this.$emit('closeDialog', {
|
||||
type: 'error',
|
||||
openDialog: false
|
||||
})
|
||||
}
|
||||
},
|
||||
/*上传*/
|
||||
openUpload(e) {
|
||||
this.type = e;
|
||||
this.isupload = true;
|
||||
},
|
||||
/*获取图片*/
|
||||
returnImgsFunc(e) {
|
||||
if (e != null && e.length > 0) {
|
||||
this.file_path = e[0].file_path;
|
||||
this.form.img = e[0].file_id;
|
||||
}
|
||||
this.isupload = false;
|
||||
},
|
||||
|
||||
changeGround(e) {
|
||||
this.selectGroundType = this.veuneList.find(item => item.id === e).type_id
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.img {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
127
src/views/venue/scene/Data.vue
Normal file
127
src/views/venue/scene/Data.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<el-dialog title="场地使用率" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
|
||||
:close-on-press-escape="false">
|
||||
|
||||
<div class="common-seach-wrap">
|
||||
<el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
|
||||
<el-form-item label="起始时间">
|
||||
<div class="block">
|
||||
<span class="demonstration"></span>
|
||||
<el-date-picker size="small" v-model="searchForm.create_time" type="daterange"
|
||||
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"></el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button size="small" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div style="">
|
||||
<div style="text-align: center;">场地使用率</div>
|
||||
<div style="margin-top: 20px;display: flex; justify-content: center;">
|
||||
<el-progress type="circle" :percentage="percentage"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<!-- <el-button @click="dialogFormVisible">取 消</el-button>
|
||||
<el-button type="primary" @click="addUser" :loading="loading">确 定</el-button> -->
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PorductApi from '@/api/product.js';
|
||||
import Upload from '@/components/file/Upload';
|
||||
import Uediter from '@/components/UE.vue';
|
||||
import VenueApi from '@/api/venue.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Upload,
|
||||
Uediter,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/*富文本框配置*/
|
||||
ueditor: {
|
||||
text: '',
|
||||
config: {
|
||||
initialFrameWidth: 400,
|
||||
initialFrameHeight: 500
|
||||
},
|
||||
},
|
||||
searchForm: {
|
||||
create_time: '',
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
},
|
||||
/*左边长度*/
|
||||
formLabelWidth: '120px',
|
||||
/*是否显示*/
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
/*是否上传图片*/
|
||||
isupload: false,
|
||||
model: {},
|
||||
percentage: 0
|
||||
};
|
||||
},
|
||||
props: ['open_data', 'dataform'],
|
||||
created() {
|
||||
this.model = this.dataform;
|
||||
this.dialogVisible = this.open_data;
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
const Params = this.searchForm
|
||||
Params.room_id = this.model.id
|
||||
|
||||
if (Params.start_time && Params.end_time) {
|
||||
Params.start_time = Params.start_time
|
||||
Params.end_time = Params.end_time
|
||||
}
|
||||
|
||||
VenueApi.groundRoomRate(Params, true).then(res => {
|
||||
console.log("🚀 ~ res:", res)
|
||||
this.percentage = res.data.rate
|
||||
}).catch(error => {
|
||||
console.log("🚀 ~ error:", error)
|
||||
})
|
||||
},
|
||||
|
||||
/*关闭弹窗*/
|
||||
dialogFormVisible(e) {
|
||||
if (e) {
|
||||
this.$emit('closeDialog', {
|
||||
type: 'success',
|
||||
openDialog: false
|
||||
})
|
||||
} else {
|
||||
this.$emit('closeDialog', {
|
||||
type: 'error',
|
||||
openDialog: false
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onSubmit() {
|
||||
let self = this;
|
||||
self.loading = true;
|
||||
self.searchForm.start_time = self.searchForm.create_time[0]
|
||||
self.searchForm.end_time = self.searchForm.create_time[1]
|
||||
self.getData();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.img {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
234
src/views/venue/scene/Edit.vue
Normal file
234
src/views/venue/scene/Edit.vue
Normal file
@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<el-dialog title="修改场景" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
|
||||
:close-on-press-escape="false">
|
||||
<el-form size="small" :model="form" :rules="formRules" ref="form">
|
||||
<el-form-item label="选择场地" prop="room_id" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.room_id">
|
||||
<el-option :value="Number(item.id)" :label="item.title" :key="item.id" v-for="item in veuneList"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="选择日期" prop="times" :label-width="formLabelWidth">
|
||||
<div class="block">
|
||||
<span class="demonstration"></span>
|
||||
<el-date-picker size="small" v-model="form.times" type="daterange"
|
||||
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"></el-date-picker>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="选择星期" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.week">
|
||||
<el-option :value="String(item.id)" :label="item.title" :key="item.id" v-for="item in week_arr"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="时间段" prop="times_arr" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.times_arr" multiple placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="status" :label-width="formLabelWidth">
|
||||
<el-select v-model="form.status" placeholder="请选择">
|
||||
<el-option label="禁用" :value="0"></el-option>
|
||||
<el-option label="启用" :value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible">取 消</el-button>
|
||||
<el-button type="primary" @click="addUser" :loading="loading">确 定</el-button>
|
||||
</div>
|
||||
<!--上传图片组件-->
|
||||
<Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PorductApi from '@/api/product.js';
|
||||
import Upload from '@/components/file/Upload';
|
||||
import Uediter from '@/components/UE.vue';
|
||||
import VenueApi from '@/api/venue.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Upload,
|
||||
Uediter,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/*富文本框配置*/
|
||||
ueditor: {
|
||||
text: '',
|
||||
config: {
|
||||
initialFrameWidth: 400,
|
||||
initialFrameHeight: 500
|
||||
},
|
||||
},
|
||||
selectGroundType: null,
|
||||
form: {
|
||||
room_id: '',
|
||||
times: '',
|
||||
week: '',
|
||||
times_arr: [],
|
||||
status: ''
|
||||
},
|
||||
formRules: {
|
||||
room_id: [{
|
||||
required: true,
|
||||
message: '请选择场地',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
times_arr: [{
|
||||
required: true,
|
||||
message: '请选择灯光使用时段',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
status: [{
|
||||
required: true,
|
||||
message: '请选择装填',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
},
|
||||
/*左边长度*/
|
||||
formLabelWidth: '120px',
|
||||
/*是否显示*/
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
/*是否上传图片*/
|
||||
isupload: false,
|
||||
veuneList: [],
|
||||
options: [],
|
||||
week_arr: [
|
||||
{ id: '1', title: '周一' },
|
||||
{ id: '2', title: '周二' },
|
||||
{ id: '3', title: '周三' },
|
||||
{ id: '4', title: '周四' },
|
||||
{ id: '5', title: '周五' },
|
||||
{ id: '6', title: '周六' },
|
||||
{ id: '7', title: '周日' },
|
||||
],
|
||||
};
|
||||
},
|
||||
props: ['open_edit', 'editform'],
|
||||
async created() {
|
||||
await this.getVeuneList()
|
||||
console.log("🚀 ~ self.veuneList:", this.veuneList)
|
||||
// 生成 6:00-22:00 的时间段，格式为 { value: '06:00-07:00', label: '06:00 - 07:00' }
|
||||
const start = 6, end = 22;
|
||||
this.options = [];
|
||||
for (let i = start; i < end; i++) {
|
||||
const h1 = i < 10 ? `0${i}` : `${i}`;
|
||||
const h2 = i + 1 < 10 ? `0${i + 1}` : `${i + 1}`;
|
||||
this.options.push({
|
||||
value: `${h1}:00-${h2}:00`,
|
||||
label: `${h1}:00 - ${h2}:00`
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
this.dialogVisible = this.open_edit;
|
||||
// this.selectGroundType = this.editform.ground_id;
|
||||
|
||||
this.form.id = this.editform.id;
|
||||
this.form.room_id = Number(this.editform.room_id);
|
||||
console.log("🚀 ~ this.editform:", this.editform)
|
||||
this.form.times = this.editform.times.split(',');
|
||||
this.form.week = this.editform.week;
|
||||
this.form.times_arr = this.editform.times_arr.split(',');
|
||||
this.form.status = this.editform.status;
|
||||
},
|
||||
methods: {
|
||||
// 获取场馆列表-不需要分页
|
||||
async getVeuneList() {
|
||||
let self = this;
|
||||
const res = await VenueApi.noPageGroundRoomList({ground_id: 1}, true)
|
||||
self.veuneList = res.data;
|
||||
},
|
||||
|
||||
/*添加场景*/
|
||||
addUser() {
|
||||
let self = this;
|
||||
let params = self.form;
|
||||
|
||||
// 处理节假日日期格式
|
||||
if (Array.isArray(params.holiday)) {
|
||||
params.holiday = params.holiday.map(date => {
|
||||
if (typeof date === 'string') return date;
|
||||
const d = new Date(date);
|
||||
const y = d.getFullYear();
|
||||
const m = (d.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = d.getDate().toString().padStart(2, '0');
|
||||
return `${y}-${m}-${day}`;
|
||||
});
|
||||
params.holiday = params.holiday.join(',');
|
||||
}
|
||||
|
||||
self.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
self.loading = true;
|
||||
params.times = params.times.join(',');
|
||||
params.times_arr = params.times_arr.join(',');
|
||||
VenueApi.editScene(params).then(data => {
|
||||
self.loading = false;
|
||||
self.$message({
|
||||
message: '编辑成功',
|
||||
type: 'success'
|
||||
});
|
||||
self.dialogFormVisible(true);
|
||||
}).catch(error => {
|
||||
self.loading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/*获取富文本内容*/
|
||||
contentChangeFunc(e){
|
||||
this.form.textarea1 = e;
|
||||
},
|
||||
|
||||
/*关闭弹窗*/
|
||||
dialogFormVisible(e) {
|
||||
if (e) {
|
||||
this.$emit('closeDialog', {
|
||||
type: 'success',
|
||||
openDialog: false
|
||||
})
|
||||
} else {
|
||||
this.$emit('closeDialog', {
|
||||
type: 'error',
|
||||
openDialog: false
|
||||
})
|
||||
}
|
||||
},
|
||||
/*上传*/
|
||||
openUpload(e) {
|
||||
this.type = e;
|
||||
this.isupload = true;
|
||||
},
|
||||
/*获取图片*/
|
||||
returnImgsFunc(e) {
|
||||
if (e != null && e.length > 0) {
|
||||
this.file_path = e[0].file_path;
|
||||
this.form.img = e[0].file_id;
|
||||
}
|
||||
this.isupload = false;
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.img {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
248
src/views/venue/scene/index.vue
Normal file
248
src/views/venue/scene/index.vue
Normal file
@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<div class="venue">
|
||||
<!--添加场景-->
|
||||
<div class="common-level-rail"><el-button size="small" type="primary" icon="el-icon-plus" @click="addClick" v-auth="'/venue/scene/add'">添加场景</el-button></div>
|
||||
|
||||
<!--内容-->
|
||||
<div class="product-content">
|
||||
<div class="table-wrap">
|
||||
<el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
|
||||
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
||||
<el-table-column prop="room_msg" label="场地名称">
|
||||
<template slot-scope="scope">
|
||||
<div>{{ scope.row.room_msg[0].title }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="times" label="日期">
|
||||
<template slot-scope="scope">
|
||||
<div>{{ scope.row.times.replace(',', ' 至 ') }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="week" label="星期"></el-table-column>
|
||||
<el-table-column prop="times_arr" label="时间段"></el-table-column>
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<div>{{ scope.row.status == 0 ? '已禁用' : '已启用' }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="editClick(scope.row)" type="text" size="small"
|
||||
v-auth="'/venue/room/edit'">编辑</el-button>
|
||||
<el-button @click="deleteClick(scope.row)" type="text" size="small"
|
||||
v-auth="'/venue/room/delete'">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!--分页-->
|
||||
<!-- <div class="pagination">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
|
||||
:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
|
||||
:total="totalDataNumber"></el-pagination>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!--添加-->
|
||||
<Add v-if="open_add" :open_add="open_add" @closeDialog="closeDialogFunc($event, 'add')"></Add>
|
||||
<!--修改-->
|
||||
<Edit v-if="open_edit" :open_edit="open_edit" :editform="venueModel" @closeDialog="closeDialogFunc($event, 'edit')"></Edit>
|
||||
<!-- 使用率 -->
|
||||
<Data v-if="open_data" :open_data="open_data" :dataform="venueModel" @closeDialog="closeDialogFunc($event, 'data')"></Data>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserApi from '@/api/user.js';
|
||||
import VenueApi from '@/api/venue.js';
|
||||
import Add from './Add.vue';
|
||||
import Edit from './Edit.vue';
|
||||
import Data from './Data.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
/*编辑组件*/
|
||||
Edit,
|
||||
Add,
|
||||
Data
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/*是否加载完成*/
|
||||
loading: true,
|
||||
/*列表数据*/
|
||||
tableData: [],
|
||||
/*一页多少条*/
|
||||
pageSize: 20,
|
||||
/*一共多少条数据*/
|
||||
totalDataNumber: 0,
|
||||
/*当前是第几页*/
|
||||
curPage: 1,
|
||||
/*横向表单数据模型*/
|
||||
formInline: {
|
||||
title: '',
|
||||
ground_id: '',
|
||||
status: ''
|
||||
},
|
||||
/*是否打开添加弹窗*/
|
||||
open_add: false,
|
||||
/*是否打开编辑弹窗*/
|
||||
open_edit: false,
|
||||
open_data: false,
|
||||
/*当前编辑的对象*/
|
||||
venueModel: {},
|
||||
veuneList: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
/*获取列表*/
|
||||
this.getTableList();
|
||||
this.getVeuneList()
|
||||
},
|
||||
methods: {
|
||||
// 获取场馆列表-不需要分页
|
||||
getVeuneList() {
|
||||
let self = this;
|
||||
VenueApi.gdLists({}, true)
|
||||
.then(res => {
|
||||
self.veuneList = res.data;
|
||||
})
|
||||
.catch(error => {
|
||||
self.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
/*选择第几页*/
|
||||
handleCurrentChange(val) {
|
||||
let self = this;
|
||||
self.curPage = val;
|
||||
self.loading = true;
|
||||
self.getTableList();
|
||||
},
|
||||
|
||||
/*每页多少条*/
|
||||
handleSizeChange(val) {
|
||||
this.curPage = 1;
|
||||
this.pageSize = val;
|
||||
this.getTableList();
|
||||
},
|
||||
|
||||
/*获取列表*/
|
||||
getTableList() {
|
||||
let self = this;
|
||||
let Params = self.formInline;
|
||||
Params.page = self.curPage;
|
||||
Params.size = self.pageSize;
|
||||
VenueApi.sceneList(Params, true)
|
||||
.then(res => {
|
||||
console.log("🚀 ~ res:", res)
|
||||
self.loading = false;
|
||||
self.tableData = res.data;
|
||||
// self.totalDataNumber = res.data.total;
|
||||
})
|
||||
.catch(error => {
|
||||
self.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/*搜索查询*/
|
||||
onSubmit() {
|
||||
let self = this;
|
||||
self.loading = true;
|
||||
self.curPage = 1;
|
||||
self.getTableList();
|
||||
},
|
||||
|
||||
/*重置*/
|
||||
onReset() {
|
||||
this.formInline = {
|
||||
title: '',
|
||||
ground_id: '',
|
||||
status: ''
|
||||
};
|
||||
this.onSubmit();
|
||||
},
|
||||
|
||||
/*打开添加*/
|
||||
addClick(item) {
|
||||
this.open_add = true;
|
||||
},
|
||||
|
||||
/*打开编辑*/
|
||||
editClick(item) {
|
||||
this.venueModel = item;
|
||||
this.open_edit = true;
|
||||
},
|
||||
|
||||
/*关闭弹窗*/
|
||||
closeDialogFunc(e, f) {
|
||||
console.log("🚀 ~ e, f:", e, f)
|
||||
if (f == 'add') {
|
||||
this.open_add = e.openDialog;
|
||||
if (e.type == 'success') {
|
||||
this.getTableList();
|
||||
}
|
||||
}
|
||||
if (f == 'edit') {
|
||||
this.open_edit = e.openDialog;
|
||||
if (e.type == 'success') {
|
||||
this.getTableList();
|
||||
}
|
||||
}
|
||||
if (f == 'tag') {
|
||||
this.open_tag = e.openDialog;
|
||||
if (e.type == 'success') {
|
||||
this.getTableList();
|
||||
}
|
||||
}
|
||||
if (f == 'data') {
|
||||
this.open_data = e.openDialog;
|
||||
if (e.type == 'success') {
|
||||
this.getTableList();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/*场景*/
|
||||
deleteClick(row) {
|
||||
let self = this;
|
||||
self
|
||||
.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
self.loading = true;
|
||||
VenueApi.delScene(
|
||||
{
|
||||
id: row.id
|
||||
},
|
||||
true
|
||||
)
|
||||
.then(data => {
|
||||
self.loading = false;
|
||||
if (data.code == 1) {
|
||||
self.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
});
|
||||
self.getTableList();
|
||||
} else {
|
||||
self.loading = false;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
self.loading = false;
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
self.loading = false;
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
@ -173,6 +173,15 @@ export default {
|
||||
} else {
|
||||
// 未选中则添加
|
||||
this.selectedTime[title].push(time);
|
||||
// 添加后进行升序排序
|
||||
this.selectedTime[title].sort((a, b) => {
|
||||
// 假设时间格式为 "HH:mm" 或 "HH:mm-HH:mm"
|
||||
// 只取开始时间进行比较
|
||||
const getStart = t => t.includes('-') ? t.split('-')[0] : t;
|
||||
const [ah, am] = getStart(a).split(":").map(Number);
|
||||
const [bh, bm] = getStart(b).split(":").map(Number);
|
||||
return ah !== bh ? ah - bh : am - bm;
|
||||
});
|
||||
}
|
||||
this.countSelectedTime = Object.values(this.selectedTime).reduce((acc, times) => acc + times.length, 0);
|
||||
|
||||
@ -228,6 +237,7 @@ export default {
|
||||
|
||||
nowReserve() {
|
||||
let self = this;
|
||||
|
||||
if (self.selectedReserveTime.length == 0) {
|
||||
self.$message.error('请选择预约时间');
|
||||
return;
|
||||
@ -246,12 +256,14 @@ export default {
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
const start = self.selectedReserveTime[0].day_time + ' ' + self.selectedReserveTime[0].end_time;
|
||||
const end = self.selectedReserveTime[self.selectedReserveTime.length -1].day_time + ' ' + self.selectedReserveTime[self.selectedReserveTime.length -1].end_time;
|
||||
// 转换为时间戳
|
||||
const startTimestamp = Math.floor(Date.parse(start.replace(/-/g, '/')) / 1000);;
|
||||
const endTimestamp = Math.floor(Date.parse(end.replace(/-/g, '/')) / 1000);;
|
||||
|
||||
|
||||
const start = self.selectedReserveTime[0].day_time + ' ' + self.selectedReserveTime[0].start_time;
|
||||
const startTimestamp = Math.floor(Date.parse(start.replace(/-/g, '/')) / 1000);
|
||||
|
||||
// const end = self.selectedReserveTime[self.selectedReserveTime.length -1].day_time + ' ' + self.selectedReserveTime[self.selectedReserveTime.length -1].end_time;
|
||||
// 转换为时间戳
|
||||
const endTimestamp = self.getMaxEndTime()
|
||||
|
||||
VenueApi.reserveGround({
|
||||
ground_id: self.ground_id,
|
||||
room_list: JSON.stringify(self.selectedReserveTime),
|
||||
@ -292,6 +304,26 @@ export default {
|
||||
loading.close();
|
||||
},
|
||||
|
||||
// 获取选中时间中的最大结束时间
|
||||
getMaxEndTime() {
|
||||
if (!this.selectedReserveTime || this.selectedReserveTime.length === 0) return '';
|
||||
let maxTimestamp = -1;
|
||||
let maxItem = null;
|
||||
this.selectedReserveTime.forEach(item => {
|
||||
// 支持endTime格式为"HH:mm"或"YYYY-MM-DD HH:mm"
|
||||
let endStr = item.end_time || '';
|
||||
let dayStr = item.day_time || '';
|
||||
let fullStr = endStr.length > 5 ? endStr : (dayStr ? dayStr + ' ' + endStr : endStr);
|
||||
let ts = Date.parse(fullStr.replace(/-/g, '/'));
|
||||
if (ts >= maxTimestamp) {
|
||||
maxTimestamp = ts;
|
||||
maxItem = item;
|
||||
}
|
||||
});
|
||||
return maxItem ? Math.floor(Date.parse((maxItem.day_time + ' ' + maxItem.end_time).replace(/-/g, '/')) / 1000) : '';
|
||||
},
|
||||
|
||||
|
||||
toCgOrder() {
|
||||
this.$router.push({
|
||||
path: '/venue/order/index',
|
||||
|
||||
Reference in New Issue
Block a user