share.vue 7.18 KB
<template>
    <layout-body>
        <layout-filter>
            <filter-item :label="filters.erpSkuId.label">
                <Input v-model.trim="filters.erpSkuId.model"
                       :placeholder="filters.erpSkuId.holder" :maxlength="9"></Input>
            </filter-item>
            <filter-item :label="filters.productSkn.label">
                <Input v-model.trim="filters.productSkn.model"
                       :placeholder="filters.productSkn.holder" :maxlength="9"></Input>
            </filter-item>
            <filter-item :label="filters.productName.label">
                <Input v-model.trim="filters.productName.model"
                       :placeholder="filters.productName.holder"></Input>
            </filter-item>
            <filter-item label="品牌">
                <select-brand v-model="filters.brand.model"></select-brand>
            </filter-item>
            <filter-item :label="filters.hasImage.label">
                <Select v-model.trim="filters.hasImage.model" clearable>
                    <Option v-for="option in filters.hasImage.options"
                            :value="option.value"
                            :key="option.value">{{option.label}}</Option>
                </Select>
            </filter-item>
            <filter-item :label="filters.createTime.label">
                <Date-picker type="datetimerange"
                             placeholder="选择日期和时间"
                             @on-change="createTimeChange"
                             v-model="filters.createTime.model">
                </Date-picker>
            </filter-item>
            <filter-item>
                <Button type="primary" @click="list">筛选</Button>
                <Button @click="clearFilters">清空条件</Button>
            </filter-item>
        </layout-filter>

        <layout-list>
            <Table border :columns="tableCols" :data="tableData" @on-selection-change="selectChange"></Table>
            <Page :total="pageData.total" :current="pageData.current"
                  @on-change="pageChange" show-total></Page>
        </layout-list>

    </layout-body>
</template>

<script>
    import _ from 'lodash';
    import moment from 'moment';
    import shareStore from './store';
    import ShareService from 'services/product/share-service';

    export default {
        data() {
            return shareStore.call(this);
        },
        created() {
            this.shareService = new ShareService();
        },
        mounted() {
            this.list();
        },
        methods: {
            clearFilters() {
                this.filters.erpSkuId.model = null;
                this.filters.productSkn.model = null;
                this.filters.productName.model = null;
                this.filters.hasImage.model = null;
                this.filters.brand.model = null;
                this.filters.createTime.model = '';
                this.filters.beginTime.model = '';
                this.filters.endTime.model = '';
                this.pageData.current = 1;

                this.list();
            },
            pageChange(page) {
                this.pageData.current = page;
                this.list();
            },
            filtersParams() {
                let params = {};
                let fts = this.filters;
                let erpSkuId = fts.erpSkuId.model,
                    productSkn = fts.productSkn.model,
                    productName = fts.productName.model,
                    hasImage = fts.hasImage.model,
                    brand_id = fts.brand.model === '' || fts.brand.model === null ?
                        null : fts.brand.model,
                    beginTime = fts.beginTime.model,
                    endTime = fts.endTime.model;

                let page = this.pageData.current;
                let size = this.pageData.size;

                if (this.filters.erpSkuId.model) {
                    if (this.isNumber(this.filters.erpSkuId.model)) {
                        params.erpSkuId = this.filters.erpSkuId.model;
                    } else {
                        return Promise.reject('sku必须是数字');
                    }
                }

                if (this.filters.productSkn.model) {
                    if (this.isNumber(this.filters.productSkn.model)) {
                        params.productSkn = this.filters.productSkn.model;
                    } else {
                        return Promise.reject('skn必须是数字');
                    }
                }

                params.size = this.pageData.size;
                params.page = this.pageData.current;

                return Promise.resolve({
                    params,
                    erpSkuId,
                    productSkn,
                    productName,
                    hasImage,
                    brand_id,
                    beginTime,
                    endTime,
                    page,
                    size
                });
            },
            list() {
                this.$Loading.start();

                return this.filtersParams().then((params) => {
                    function getLocalTime(ns) {
                        let date = new Date(ns * 1000),
                            Y = date.getFullYear() + '-',
                            M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-',
                            D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ',
                            h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':',
                            m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':',
                            s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();

                        return Y + M + D + h + m + s;
                    }

                    if (params) {
                        params.beginTime = params.beginTime ? getLocalTime(params.beginTime) : null;
                        params.endTime = params.endTime ? getLocalTime(params.endTime) : null;
                    }

                    return this.shareService.list(params);
                }).then((result) => {
                    if (result.code === 200) {
                        this.pageData.total = result.data.total;
                        this.pageData.current = result.data.page;
                        this.tableData = result.data.list;
                    }
                    this.$Loading.finish();
                }).catch((err) => {
                    this.$Loading.finish();
                    this.$Message.error(err);
                });
            },
            isNumber(numStr) {
                const isNumber = /^[0-9]+$/;

                return isNumber.test(numStr);
            },
            createTimeChange(time) {
                // 兼容: https://github.com/iview/iview/issues/973
                if (!_.isArray(time)) {
                    time = time.split(' - ');
                }
                if ((time[0] + '').length) {
                    this.filters.beginTime.model = +moment(time[0]).format('X');
                    this.filters.endTime.model = +moment(time[1]).format('X');
                }
            }
        }
    };
</script>