库存管理

ghs/src/views/order/components/stock-detail.vue

@@ -1,8 +1,23 @@
 <template>
 	<div>
-		<el-drawer :visible.sync="showArea" size="55vw" :before-close="closeFn" custom-class="drawer-class" direction="ltr">
+		<el-drawer :visible.sync="showArea" size="55vw" :before-close="closeFn" @close="closeTrigger" custom-class="drawer-class" direction="ltr">
 			<div>
-				<div style="margin-left:2px;font-weight:bold;">【{{ itemData.name?itemData.name:'' }}】库存明细</div>
+				<div style="margin-left:2px;font-weight:bold;">
+					<el-date-picker v-model="currentDateList" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" @change="getSearchDate" value-format="yyyy-MM-dd"
+							end-placeholder="结束日期" :picker-options="pickerOptions" size="mini" style="margin-right:10px;">
+					</el-date-picker>
+
+					<el-select v-model="typeValue" placeholder="请选择" size="mini" style="width:150px" :clearable="true" @change="changeType" @clear="clearType">
+						<el-option
+						v-for="item in options"
+						:key="item.value"
+						:label="item.label"
+						:value="item.value">
+						</el-option>
+					</el-select>
+
+					【{{ itemData.name?itemData.name:'' }}】库存明细
+				</div>
                 <x-crud @load="onLoad">
 					<template #table-column-bigNumOrder="{scope}">
 						{{ scope.row.io == 1 ? '+' : '-' }}<span>{{ scope.row.bigNumOrder }}</span>
@@ -23,10 +38,68 @@ export default {
 	},
 	data() {
 		return {
-			showArea: false
+			options: [],
+			typeValue:'',
+			currentDateList:[],
+			showArea: false,
+			pickerOptions: {
+				shortcuts: [{
+					text: '最近一周',
+					onClick(picker) {
+					const end = new Date();
+					const start = new Date();
+					start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+					picker.$emit('pick', [start, end]);
+					}
+				}, {
+					text: '最近一个月',
+					onClick(picker) {
+					const end = new Date();
+					const start = new Date();
+					start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+					picker.$emit('pick', [start, end]);
+					}
+				}, {
+					text: '最近三个月',
+					onClick(picker) {
+					const end = new Date();
+					const start = new Date();
+					start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+					picker.$emit('pick', [start, end]);
+					}
+				}]
+      		},
+			startTime:'',
+			endTime:'',
+			searchTime:'',
 		};
 	},
 	methods: {
+		clearType(){
+			this.typeValue = ''
+			this.goRefresh()
+		},
+		changeType(e){
+			this.goRefresh()
+		},
+		goRefresh(){
+			this.app.refresh({id:this.itemData.id,searchTime:this.searchTime,startTime:this.startTime,endTime:this.endTime,recordType:this.typeValue})
+		},
+		closeTrigger(){
+			this.$emit('searchFocus')
+		},
+		getSearchDate(){
+			if (this.$util.isEmpty(this.currentDateList)) {
+				this.searchTime = ''
+				this.startTime = ''
+				this.endTime = ''
+			}else{
+				this.searchTime = 'custom'
+				this.startTime = this.currentDateList[0]
+				this.endTime = this.currentDateList[1]
+			}
+			this.app.refresh({id:this.itemData.id,searchTime:this.searchTime,startTime:this.startTime,endTime:this.endTime,recordType:this.typeValue})
+		},
 		init() {
 			this.showArea = true
 			if(this.app){
@@ -82,8 +155,12 @@ export default {
 				[ 'data-table' ],
 				['flex1', 'pagination']
 			])
+			.on('refresh', async (params, { next }) => {
+				let res = await next(params)
+				this.options = res.typeList
+			})
 			.done()
-			app.refresh({id:this.itemData.id})
+			app.refresh({id:this.itemData.id,searchTime:this.searchTime,startTime:this.startTime,endTime:this.endTime,recordType:this.typeValue})
 		}
 	}
 };