|
|
@@ -0,0 +1,140 @@
|
|
|
+<template>
|
|
|
+ <div class="shop-list">
|
|
|
+ <x-crud @load="onLoad">
|
|
|
+ <template #slot-date-select>
|
|
|
+ <el-date-picker v-model="currentDateList" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" @change="getDate" value-format="yyyy-MM-dd"
|
|
|
+ end-placeholder="结束日期" :picker-options="pickerOptions" size="mini"> </el-date-picker>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #slot-order-debt="{scope}">
|
|
|
+ <el-radio-group v-model="debt" @change="changeDebt" style="margin-right:20px;padding-top:6px;margin-left:20px;">
|
|
|
+ <el-radio label="0">全部</el-radio>
|
|
|
+ <el-radio label="1">待结</el-radio>
|
|
|
+ <el-radio label="2">已结</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #slot-total-amount>
|
|
|
+ <span style="font-size:15px;font-weight:bold;">累计金额：{{ totalAmount }}</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </x-crud>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ crud: null,
|
|
|
+ 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]);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ currentDateList:'',
|
|
|
+ startTime:'',
|
|
|
+ endTime:'',
|
|
|
+ searchTime:'',
|
|
|
+ totalAmount:0,
|
|
|
+ debt:'0'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['shopInfo']),
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onLoad({ ctx, app }) {
|
|
|
+ this.app = app;
|
|
|
+ ctx.service({
|
|
|
+ page: () => {
|
|
|
+ return this.$service.purchaseOrder.dueList({searchTime:this.searchTime,startTime:this.startTime,endTime:this.endTime,debt:this.debt}).then((res) => {
|
|
|
+ this.totalAmount = res.totalAmount ? res.totalAmount : 0
|
|
|
+ return {
|
|
|
+ list: res.list
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .set('table', {
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ label: 'ID',
|
|
|
+ prop: 'id',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '名称',
|
|
|
+ prop: 'name',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '金额',
|
|
|
+ prop: 'amount',
|
|
|
+ align: 'center',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ op: {
|
|
|
+ visible: true,
|
|
|
+ props: {
|
|
|
+ width: 250,
|
|
|
+ align: 'center',
|
|
|
+ fixed: 'right',
|
|
|
+ label: '操作'
|
|
|
+ },
|
|
|
+ layout: []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .set('layout', [
|
|
|
+ [ 'slot-date-select',
|
|
|
+ 'slot-order-debt',
|
|
|
+ 'flex1',
|
|
|
+ 'refresh-btn',
|
|
|
+ ],
|
|
|
+ [ 'data-table' ],
|
|
|
+ ['slot-total-amount','flex1']
|
|
|
+ ])
|
|
|
+ .done();
|
|
|
+ app.refresh();
|
|
|
+ },
|
|
|
+ getDate(){
|
|
|
+ this.searchTime = 'custom'
|
|
|
+ this.startTime = this.currentDateList[0]
|
|
|
+ this.endTime = this.currentDateList[1]
|
|
|
+ this.app.refresh({searchTime:this.searchTime,startTime:this.startTime,endTime:this.endTime,debt:this.debt});
|
|
|
+ },
|
|
|
+ changeDebt(e){
|
|
|
+ this.debt = e
|
|
|
+ this.app.refresh({searchTime:this.searchTime,startTime:this.startTime,endTime:this.endTime,debt:this.debt})
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="stylus" scoped>
|
|
|
+.shop-list {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|
