2023-11-28

2 years ago · 10b7cf2a1d
4 changed files with 665 additions and 89 deletions
--- a/src/api/order/order.js
+++ b/src/api/order/order.js
@ -0,0 +1,38 @@
+import request from '@/utils/request'
+
+export default {
+
+	// 获取订单列表
+	orderList: function(data) {
+		return request({
+			url: '/lpksreservoorder/orderList',
+			method: 'post',
+			data: data
+		});
+	},
+
+	// 获取所有门店
+	getAllStore: function(data) {
+		return request({
+			url: '/lpkstore/getAllStore',
+			method: 'delete',
+			data: data
+		});
+	},
+
+	// 导出报表
+	exportExcel: function(data) {
+		return request({
+			url: '/lpksreservoorder/exportExcel',
+			method: 'post',
+			responseType: 'blob', // 表明返回服务器返回的数据类型
+			data: data,
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+	},
+
+
+
+}
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -9,46 +9,48 @@
 * @returns {string | null}
 */
 export function parseTime(time, cFormat) {
-  if (arguments.length === 0 || !time) {
-    return null
-  }
-  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
-  let date
-  if (typeof time === 'object') {
-    date = time
-  } else {
-    if ((typeof time === 'string')) {
-      if ((/^[0-9]+$/.test(time))) {
-        // support "1548221490638"
-        time = parseInt(time)
-      } else {
-        // support safari
-        // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
-        time = time.replace(new RegExp(/-/gm), '/')
-      }
-    }
+	if (arguments.length === 0 || !time) {
+		return null
+	}
+	const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+	let date
+	if (typeof time === 'object') {
+		date = time
+	} else {
+		if ((typeof time === 'string')) {
+			if ((/^[0-9]+$/.test(time))) {
+				// support "1548221490638"
+				time = parseInt(time)
+			} else {
+				// support safari
+				// https://stackoverflow.com/questions/4310953/invalid-date-in-safari
+				time = time.replace(new RegExp(/-/gm), '/')
+			}
+		}

-    if ((typeof time === 'number') && (time.toString().length === 10)) {
-      time = time * 1000
-    }
-    date = new Date(time)
-  }
-  const formatObj = {
-    y: date.getFullYear(),
-    m: date.getMonth() + 1,
-    d: date.getDate(),
-    h: date.getHours(),
-    i: date.getMinutes(),
-    s: date.getSeconds(),
-    a: date.getDay()
-  }
-  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
-    const value = formatObj[key]
-    // Note: getDay() returns 0 on Sunday
-    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
-    return value.toString().padStart(2, '0')
-  })
-  return time_str
+		if ((typeof time === 'number') && (time.toString().length === 10)) {
+			time = time * 1000
+		}
+		date = new Date(time)
+	}
+	const formatObj = {
+		y: date.getFullYear(),
+		m: date.getMonth() + 1,
+		d: date.getDate(),
+		h: date.getHours(),
+		i: date.getMinutes(),
+		s: date.getSeconds(),
+		a: date.getDay()
+	}
+	const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+		const value = formatObj[key]
+		// Note: getDay() returns 0 on Sunday
+		if (key === 'a') {
+			return ['日', '一', '二', '三', '四', '五', '六'][value]
+		}
+		return value.toString().padStart(2, '0')
+	})
+	return time_str
 }

 /**
@ -57,41 +59,41 @@ export function parseTime(time, cFormat) {
 * @returns {string}
 */
 export function formatTime(time, option) {
-  if (('' + time).length === 10) {
-    time = parseInt(time) * 1000
-  } else {
-    time = +time
-  }
-  const d = new Date(time)
-  const now = Date.now()
+	if (('' + time).length === 10) {
+		time = parseInt(time) * 1000
+	} else {
+		time = +time
+	}
+	const d = new Date(time)
+	const now = Date.now()

-  const diff = (now - d) / 1000
+	const diff = (now - d) / 1000

-  if (diff < 30) {
-    return '刚刚'
-  } else if (diff < 3600) {
-    // less 1 hour
-    return Math.ceil(diff / 60) + '分钟前'
-  } else if (diff < 3600 * 24) {
-    return Math.ceil(diff / 3600) + '小时前'
-  } else if (diff < 3600 * 24 * 2) {
-    return '1天前'
-  }
-  if (option) {
-    return parseTime(time, option)
-  } else {
-    return (
-      d.getMonth() +
-      1 +
-      '月' +
-      d.getDate() +
-      '日' +
-      d.getHours() +
-      '时' +
-      d.getMinutes() +
-      '分'
-    )
-  }
+	if (diff < 30) {
+		return '刚刚'
+	} else if (diff < 3600) {
+		// less 1 hour
+		return Math.ceil(diff / 60) + '分钟前'
+	} else if (diff < 3600 * 24) {
+		return Math.ceil(diff / 3600) + '小时前'
+	} else if (diff < 3600 * 24 * 2) {
+		return '1天前'
+	}
+	if (option) {
+		return parseTime(time, option)
+	} else {
+		return (
+			d.getMonth() +
+			1 +
+			'月' +
+			d.getDate() +
+			'日' +
+			d.getHours() +
+			'时' +
+			d.getMinutes() +
+			'分'
+		)
+	}
 }

 /**
@ -99,19 +101,105 @@ export function formatTime(time, option) {
 * @returns {Object}
 */
 export function param2Obj(url) {
-  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
-  if (!search) {
-    return {}
-  }
-  const obj = {}
-  const searchArr = search.split('&')
-  searchArr.forEach(v => {
-    const index = v.indexOf('=')
-    if (index !== -1) {
-      const name = v.substring(0, index)
-      const val = v.substring(index + 1, v.length)
-      obj[name] = val
-    }
-  })
-  return obj
+	const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
+	if (!search) {
+		return {}
+	}
+	const obj = {}
+	const searchArr = search.split('&')
+	searchArr.forEach(v => {
+		const index = v.indexOf('=')
+		if (index !== -1) {
+			const name = v.substring(0, index)
+			const val = v.substring(index + 1, v.length)
+			obj[name] = val
+		}
+	})
+	return obj
 }
+
+
+export function getDateRang(val) {
+	const now = new Date(); // 当前日期
+	const nowDayOfWeek = now.getDay(); // 今天本周的第几天
+	const nowDay = now.getDate(); // 当前日
+	const nowMonth = now.getMonth(); // 当前月
+	const nowYear = now.getFullYear(); // 当前年
+	const jd = Math.ceil((nowMonth + 1) / 3);
+	let startTime;
+	let endTime;
+	let customTime = [];
+	switch (val) {
+		case 'yesterday': // 昨日
+			startTime = new Date(nowYear, nowMonth, nowDay - 1);
+			endTime = new Date(nowYear, nowMonth, nowDay - 1);
+			break;
+		case 'week': // 本周
+			startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
+			endTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek);
+			break;
+		case 'pastWeek': // 近 7 日
+			startTime = new Date(nowYear, nowMonth, nowDay - 6);
+			endTime = new Date(nowYear, nowMonth, nowDay);
+			break;
+		case 'month': // 本月
+			startTime = new Date(nowYear, nowMonth, 1);
+			endTime = new Date(nowYear, nowMonth + 1, 0);
+			break;
+		case 'pastMonth': // 近 31 日
+			startTime = new Date(nowYear, nowMonth, nowDay - 30);
+			endTime = new Date(nowYear, nowMonth, nowDay);
+			break;
+		case 'quarter': // 本季度
+			startTime = new Date(nowYear, (jd - 1) * 3, 1);
+			endTime = new Date(nowYear, jd * 3, 0);
+			break;
+		case 'year': // 今年
+			startTime = new Date(nowYear, 0, 1);
+			endTime = new Date(nowYear, 11, 31);
+			break;
+		default: // 自定义时间
+			customTime = val.split(' - ');
+			break;
+	}
+	return customTime.length ? customTime : [formatDate(startTime), formatDate(endTime)];
+	// return formatDate(startTime)
+}
+
+export function formatDate(date) {
+	const y = date.getFullYear();
+	let m = date.getMonth() + 1;
+	m = m < 10 ? `0${m}` : m;
+	let d = date.getDate();
+	d = d < 10 ? `0${d}` : d;
+	return `${y}-${m}-${d}`;
+}
+
+// 获取当前日期前后多少天的日期，多少天前传正数，多少天后传负数，今天传0，
+// num为传入的数字， time为传入的指定日期，如果time不传，则默认为当前时间
+export function getBeforeDate(num, time) {
+	let n = num;
+	let d = '';
+	if (time) {
+		d = new Date(time);
+	} else {
+		d = new Date();
+	}
+	let year = d.getFullYear();
+	let mon = d.getMonth() + 1;
+	let day = d.getDate();
+	if (day <= n) {
+		if (mon > 1) {
+			mon = mon - 1;
+		} else {
+			year = year - 1;
+			mon = 12;
+		}
+	}
+	d.setDate(d.getDate() - n);
+	year = d.getFullYear();
+	mon = d.getMonth() + 1;
+	day = d.getDate();
+	let s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
+	return s;
+}
--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@ -1,8 +1,264 @@
 <template>
+	<div class="app-container">
+		<div v-show="viewState == 1">
+			<button-bar ref="btnbar" view-title="订单列表" :btndisabled="btndisabled" @btnhandle="btnHandle" />
+			<div class="main-content">
+				<div class="searchcon">
+					<el-button size="small" class="searchbtn" @click="clicksearchShow">
+						{{ searchxianshitit }}
+					</el-button>
+					<div v-show="isSearchShow" class="search">
+						<el-form :inline="true" class="tab-header">
+							<el-form-item label="预约日期">
+								<el-date-picker v-model="page.params.startDate" @change="selectTime1" type="date"
+									placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
+									style="width: 200px;">
+								</el-date-picker>
+
+							</el-form-item>
+
+							<el-form-item label="提货门店">
+								<el-select v-model="page.params.store" filterable class="item_input" clearable
+									placeholder="请选择" style="width:100%" @change="giftPackSelect">
+									<el-option v-for="item in giftPackList" :key="item.text" :label="item.text"
+										:value="item.text">
+									</el-option>
+								</el-select>
+							</el-form-item>
+
+						</el-form>
+						<div class="btn" style="text-align: center;">
+							<el-button type="primary" size="small" icon="el-icon-search"
+								@click="dosearch">查询</el-button>
+							<el-button type="primary" size="small" icon="el-icon-refresh"
+								@click="resetQuery">重置</el-button>
+						</div>
+					</div>
+				</div>
+				<!-- Start 项目列表头部 -->
+				<div class="listtop">
+					<div class="tit">订单列表</div>
+				</div>
+				<!-- End 项目列表头部 -->
+				<!-- Start 项目列表 -->
+				<div class="">
+					<el-table v-loading="tableLoading" :data="dataList" border style="width: 100%">
+						<!-- <el-table-column fixed width="50" type="selection" align="center" /> -->
+						<el-table-column fixed width="60" label="序号" type="index" :index="indexMethod" align="center" />
+						<el-table-column label="操作" align="center" width="120">
+							<template slot-scope="scope">
+								<el-button type="primary" size="mini" @click="toRelevancy(scope.row)">明细</el-button>
+							</template>
+						</el-table-column>
+						<el-table-column prop="code" label="提货卡号" align="center" />
+						<el-table-column prop="bagName" label="礼包类型" align="center" />
+						<el-table-column prop="reserveDate" label="预约时间" align="center" />
+						<el-table-column prop="store" label="提货门店" align="center" />
+						<el-table-column prop="userName" label="用户名称" align="center" />
+						<el-table-column prop="userPhone" label="联系电话" align="center" />
+					</el-table>
+				</div>
+				<!-- End 项目列表 -->
+				<div class="pages">
+					<div class="tit" />
+					<!--  翻页  -->
+					<pagination v-show="dataList.length > 0" :total="page.total" :page.sync="page.current"
+						:limit.sync="page.size" class="pagination" @pagination="loadList" />
+				</div>
+			</div>
+		</div>
+		<!-- End 查询和其列表部分 -->
+		<!-- 新增修改部分组件 -->
+		<divAdd v-show="viewState == 2 || viewState == 3" ref="divadd" @doback="resetState" @reloadlist="loadList" />
+	</div>
 </template>

 <script>
-</script>
+	import req from '@/api/order/order.js'
+	import ButtonBar from '@/components/ButtonBar'
+	import Pagination from '@/components/pagination'
+	import pageye from '@/components/pagination/pageye'
+	import divAdd from './indexInfo.vue'
+	import {
+		getBeforeDate
+	} from '@/utils/index'
+	export default {
+		name: 'SupplierBankInfoIndex',
+		components: {
+			ButtonBar,
+			Pagination,
+			pageye,
+			divAdd,
+		},
+		data() {
+			return {
+				btndisabled: false,
+				viewState: 1, // 1、列表 2、添加 3、修改 4、查看
+				isSearchShow: false,
+				searchxianshitit: '显示查询条件',
+				tableLoading: false,
+				dataList: [],
+				btnList: [{
+						type: 'success',
+						size: 'small',
+						icon: 'export',
+						btnKey: 'build',
+						btnLabel: '导出'
+					},
+					{
+						type: 'info',
+						size: 'small',
+						icon: 'cross',
+						btnKey: 'doClose',
+						btnLabel: '关闭'
+					}
+				],
+				page: {
+					total: 0, // 默认数据总数
+					current: 1, // 默认开始页面
+					size: 10, // 每页的数据条数
+					params: {
+						startDate:getBeforeDate(-2),
+						store: ""
+					},
+				},
+				giftPackList: []
+			}
+		},
+		mounted() {
+			this.$refs['btnbar'].setButtonList(this.btnList)
+		},
+		created() {
+			this.getAllStore()
+			this.loadList()
+		},
+		methods: {
+			// 搜索条件效果
+			clicksearchShow() {
+				this.isSearchShow = !this.isSearchShow
+				if (this.isSearchShow) {
+					this.searchxianshitit = '隐藏查询条件'
+				} else {
+					this.searchxianshitit = '显示查询条件'
+				}
+			},
+			btnHandle(btnKey) {
+				switch (btnKey) {
+					case 'build': // 导出
+						this.doBuild()
+						break
+					case 'doClose':
+						this.doClose()
+						break
+					default:
+						break
+				}
+			},
+			selectTime1(val) {
+
+				console.log('selectTime1:', val)
+				this.page.params.startDate = val
+
+			},
+
+			giftPackSelect(val) {
+				console.log('>>>>>>>>>giftPackSelect', val)
+				this.page.params.store = val
+			},
+
+			getAllStore() {
+				req.getAllStore().then((resp) => {
+					if (resp.success) {
+						this.giftPackList = resp.data
+					}
+				}).catch(() => {})
+			},

-<style>
+			loadList() {
+				this.tableLoading = true
+				req.orderList(this.page).then((resp) => {
+					this.tableLoading = false
+					if (resp.success) {
+						const data = resp.data
+						this.page.total = data.total
+						this.dataList = data.records
+					} else {
+						// 根据resp.code进行异常情况处理
+						this.dataList = []
+						this.page.total = 0
+					}
+				}).catch(() => {
+					this.tableLoading = false
+				})
+			},
+
+			// 序号
+			indexMethod(index) {
+				var pagestart = (this.page.current - 1) * this.page.size
+				var pageindex = index + 1 + pagestart
+				return pageindex
+			},
+			dosearch() {
+				this.page.current = 1
+				this.loadList()
+			},
+			resetQuery() {
+				this.page = {
+					current: 1,
+					size: 10,
+					total: 0,
+					params: {
+						startDate: etBeforeDate(-2),
+						store: ""
+					},
+				}
+				this.loadList()
+			},
+
+			toRelevancy(row) {
+				this.viewState = 3
+				this.$refs['divadd'].showEdit(row)
+			},
+			resetState() {
+				this.viewState = 1
+			},
+			doClose() {
+				this.$store.dispatch('tagsView/delView', this.$route)
+				this.$router.go(-1)
+			},
+
+			// 导出
+			doBuild() {
+				const loading = this.$loading({
+					lock: true,
+					text: 'Loading',
+					spinner: 'el-icon-loading',
+					background: 'rgba(0, 0, 0, 0.7)'
+				})
+
+
+					req.exportExcel(this.page).then((resp) => {
+						loading.close()
+						const blob = new Blob([resp], {
+							type: 'application/vnd.ms-excel'
+						})
+						const fileName = '订单明细_' + this.page.params.startDate + '.xls'
+						const elink = document.createElement('a')
+						elink.download = fileName
+						elink.style.display = 'nonde'
+						elink.href = URL.createObjectURL(blob)
+						document.body.appendChild(elink)
+						elink.click()
+						URL.revokeObjectURL(elink.href)
+						document.body.removeChild(elink)
+					}).catch(() => {
+						loading.close()
+					})
+			},
+
+
+		}
+	}
+</script>
+<style scoped>
 </style>
--- a/src/views/order/indexInfo.vue
+++ b/src/views/order/indexInfo.vue
@ -0,0 +1,194 @@
+<template>
+	<div>
+
+		<div class="tab-header webtop">
+			<!-- 标题 -->
+			<div>预约明细</div>
+			<!-- start 添加修改按钮 -->
+			<div>
+				<!-- <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button> -->
+				<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+			</div>
+			<!-- end 添加修改按钮 -->
+			<!-- end 详情按钮 -->
+		</div>
+
+		<div class="listconadd">
+
+			<el-form ref="dataForm" :model="formobj" label-position="top" label-width="190px" class="formadd">
+				<div class="title" style="display: flex;align-items: center;justify-content: space-between;height:40px">
+					<div>主体信息</div>
+				</div>
+				<el-row>
+					<el-col :span="4" class="trightb">
+						<el-form-item class="trightb_item">
+							<span slot="label">提货卡号</span>
+						</el-form-item>
+					</el-col>
+					<el-col :span="8">
+						<el-form-item class="trightb_item">
+							<span slot="label">{{formobj.code}}</span>
+						</el-form-item>
+					</el-col>
+					<el-col :span="4" class="trightb">
+						<el-form-item class="trightb_item">
+							<span slot="label">礼包类型</span>
+						</el-form-item>
+					</el-col>
+					<el-col :span="8">
+						<el-form-item class="trightb_item">
+							<span slot="label">{{formobj.bagName}}</span>
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="4" class="trightb">
+						<el-form-item class="trightb_item">
+							<span slot="label">预约时间</span>
+						</el-form-item>
+					</el-col>
+					<el-col :span="8">
+						<el-form-item class="trightb_item">
+							<span slot="label">{{formobj.reserveDate}}</span>
+						</el-form-item>
+					</el-col>
+					<el-col :span="4" class="trightb">
+						<el-form-item class="trightb_item">
+							<span slot="label">提货门店</span>
+						</el-form-item>
+					</el-col>
+					<el-col :span="8">
+						<el-form-item class="trightb_item">
+							<span slot="label">{{formobj.store}}</span>
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="4" class="trightb">
+						<el-form-item class="trightb_item">
+							<span slot="label">用户名称</span>
+						</el-form-item>
+					</el-col>
+					<el-col :span="8">
+						<el-form-item class="trightb_item">
+							<span slot="label">{{formobj.userName}}</span>
+						</el-form-item>
+					</el-col>
+					<el-col :span="4" class="trightb">
+						<el-form-item class="trightb_item">
+							<span slot="label">联系电话</span>
+						</el-form-item>
+					</el-col>
+					<el-col :span="8">
+						<el-form-item class="trightb_item">
+								<span slot="label">{{formobj.userPhone}}</span>
+						</el-form-item>
+					</el-col>
+				</el-row>
+
+				<el-collapse v-model="activeNames" style="margin-top: 20px;">
+					<el-collapse-item name="1" title="商品列表">
+						<!-- <template slot="title">
+							商品列表<span class="span" @click.stop="add()">添加</span>
+						</template> -->
+						<el-table v-loading="listLoading" :data="formobj.goodsVo" border style="width: 100%;"
+							:row-style="{height: '40px'}">
+							<el-table-column label="序号" type="index" width="80" :index="indexMethod" align="center" />
+							<!-- <el-table-column label="操作" wid align="center" width="150">
+								<template slot-scope="scope">
+									<el-button type="primary" size="mini"
+										@click="doGoodsDel(scope.row.goodsSid)">删除</el-button>
+								</template>
+							</el-table-column> -->
+							<el-table-column label="商品名称" prop="goodName" align="center" />
+							<el-table-column label="商品数量" prop="num" align="center" />
+						</el-table>
+
+					</el-collapse-item>
+				</el-collapse>
+
+
+			</el-form>
+
+		</div>
+	</div>
+</template>
+
+<script>
+		import req from '@/api/order/order.js'
+	export default {
+		data() {
+			return {
+				listLoading: false,
+				activeNames: ['1'],
+				submitdisabled: false,
+				formobj: {
+					sid: "",
+					code: '',
+					bagName: '',
+					reserveDate: '',
+					store: "",
+					userName: "",
+					userPhone: "",
+					goodsVo: []
+				},
+			}
+		},
+		methods: {
+
+			handleReturn(isreload) {
+				if (isreload === 'true') this.$emit('reloadlist')
+				this.formobj = {
+					sid: "",
+					code: '',
+					bagName: '',
+					reserveDate: '',
+					store: "",
+					userName: "",
+					userPhone: "",
+					goodsVo: []
+				}
+				this.$emit('doback')
+			},
+			indexMethod(index) {
+				return index + 1
+			},
+			showEdit(row) {
+					console.log("showAdd》》》》", row)
+						this.formobj = row
+			},
+		}
+	}
+</script>
+<style scoped>
+	.trightb {
+		display: flex;
+		align-items: center;
+		text-align: center;
+		justify-content: center;
+	}
+
+	.trightb_item {
+		padding-top: 5px;
+	}
+
+	.span {
+		margin-left: 50px;
+		font-size: 15px;
+		font-weight: 400;
+	}
+
+	/deep/.el-collapse-item__header {
+		height: 40px;
+		padding: 10px;
+		font-weight: bold;
+		font-size: 20px;
+		text-align: left;
+		color: #ffffff;
+		background-color: #0294d7;
+	}
+
+	/deep/.el-collapse-item__content {
+		padding-bottom: 0;
+	}
+</style>