• 罗成兵's avatar
    1 · 6d01face
    罗成兵 authored
    6d01face
distributionWarehousing.vue 8.94 KB
<!--分配入库-->
<template>
    <div class="distributionWarehousing">
        <a-form layout="inline" class="search_form">
            <a-form-item label="入库状态">
                <a-select v-model="searchForm.status" placeholder="请选择" style="width: 250px">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option v-for="item in statusList" :key="item.enumValue" :value="item.enumValue">
                        {{item.enumName}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="入库日期">
                <date-range-picker :date.sync="searchForm.date"></date-range-picker>
            </a-form-item>
            <a-button type="primary" class="search_btn" icon="search" @click="searchList">搜索</a-button>
            <a-button class="search_btn ant-table-btn" style="margin-left: 10px" icon="sync" @click="restSearchForm">清空</a-button>
<!--            <a-button type="primary" class="search_btn" icon="download" style="float: right" @click="downloadExcel">-->
<!--                导出Excel-->
<!--            </a-button>-->

            <div style="clear: both"></div>
        </a-form>

        <div style="clear: both"></div>
        <a-table :dataSource="tableData"
                 :columns="columns"
                 rowKey="id"
                 :loading="loading"
                 :pagination="false"
                 :scroll="{ x: 1}"
        >
            <template slot="expireDateS" slot-scope="record">
                {{record.expireDate | formatDate}}
            </template>
            <template slot="action" slot-scope="record">
                <a-button class="ant-table-btn" size="small" @click="toDetail(record)">查看</a-button>
                <a-button class="ant-table-btn" style="margin-left: 5px" :disabled="record.status==2"  size="small" @click="toAdd(record)">入库</a-button>
            </template>
            <template slot="statusNameInfo" slot-scope="record">
                <a-badge status="success" v-if="record.status == 2" />
                <a-badge status="warning" v-if="record.status == 1"/>
                <span>{{record.statusName}}</span>
            </template>

        </a-table>
        <myPagination v-model="pagination" :pagination="pagination" @getList="getReceiveRecord"></myPagination>
    </div>
</template>
<script>
    import {getEnumByFlag, isEmptyParams} from "../../utils/common";
    import moment from 'moment'
    import myPagination from "../../components/myPagination";
    import dateRangePicker from "../../components/dateRangePicker";

    const columns = [
        {
            title: '发放单位',
            width:'200px',
            dataIndex: 'sendUnitName',
            ellipsis: true
        },
        // {
        //     title: '供应商名称',
        //     dataIndex: 'supplierName',
        //     ellipsis: true
        // },
        {
            title: '品牌',
            dataIndex: 'brandName',
            ellipsis: true,
            width:'200px'
        },
        {
            title: '批次号',
            dataIndex: 'batchNumber',
            ellipsis: true,
            width:'200px'
        },
        {
            title: '生产日期',
            dataIndex: 'produceDate',
            ellipsis: true,
            width:'140px'
        },
        {
            title: '有效期',
            width:'140px',
            scopedSlots: {customRender: 'expireDateS'},
        },
        {
            title: '单价(元)',
            dataIndex: 'unitPrice',
            ellipsis: true,
            width:'90px'
        },
        {
            title: '规格',
            dataIndex: 'specs',
            ellipsis: true,
            width:'70px'
        },
        {
            title: '分配数量',
            dataIndex: 'sendNum',
            ellipsis: true,
            width:'110px'
        },
        {
            title: '入库状态',
            // dataIndex: 'statusName',
            // ellipsis: true,
            width:'110px',
            scopedSlots: {customRender: 'statusNameInfo'},
        },
        {
            title: '入库日期',
            dataIndex: 'receiveDate',
            ellipsis: true,
            width:'140px'
        },
        {
            title: '操作',
            align: 'center',
            fixed: 'right',
            width:'170px',
            scopedSlots: {customRender: 'action'},
        },
    ]
    export default {
        components: {myPagination, dateRangePicker},
        data() {
            return {
                // 搜索框对象
                searchForm: {
                    status: '',
                    date: []
                },
                statusList: [],
                pagination: {
                    pageIndex: 1,
                    pageSize: 10,
                    total: 0,
                    pageSizeOptions: ['10', '20', '30', '40', '50'],
                },
                columns,
                tableData: [],
                loading: false,
                allSupplyInfo: [],
                routerParams:{},
                menuId: undefined
            }
        },
        created() {
            this.routerParams = this.$route.query
            if (this.routerParams.menuId) {
                window.sessionStorage.setItem('menuId', this.routerParams.menuId)
                this.menuId = this.routerParams.menuId
            }
            this.getEnumListInfo()
            this.getReceiveRecord()
        },
        methods: {
            getEnumListInfo() {
                if (window.sessionStorage.getItem('allEnum')) {
                    this.statusList = getEnumByFlag("folacin_stock_record_status");
                } else {
                    let par = {
                        menuId: this.menuId
                    }
                    this.$api.fyManage.fetchFYLoginUser(par).then(({data}) => {
                        window.sessionStorage.setItem('allEnum', JSON.stringify(data.enumValueList))
                        window.sessionStorage.setItem('userInfo', JSON.stringify(data.userInfo));
                        this.statusList = getEnumByFlag("folacin_stock_record_status");
                    })
                }
            },
            searchList() {
                this.pagination.pageIndex = 1
                this.getReceiveRecord()
            },
            getReceiveRecord() {
                this.loading = true
                let pars = isEmptyParams(this.searchForm)
                let par = {
                    ...pars,
                    startDate: this.searchForm.date[0],
                    endDate: this.searchForm.date[1],
                    pageIndex: this.pagination.pageIndex,
                    pageSize: this.pagination.pageSize,
                    menuId: this.menuId
                }
                this.$api.stockManage.fetchReceiveRecordList(par).then(({data = {}}) => {
                    const {dataList = [], total = 0} = data
                    this.tableData = dataList
                    this.pagination.total = total
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            restSearchForm() {
                this.searchForm = {
                    status: '',
                    date: []
                }
                this.searchList()
            },
            downloadExcel() {

            },
            toDetail(record) {
                let now_location = escape(process.env.VUE_APP_LOCATION+`distributionWarehousing/add?id=${record.id}&menuId=${this.menuId}&menuCode=${this.routerParams.menuName}`)
                window.top.postMessage({messageType:'THIRD_PAGEADD',title:`查看详情`,url:now_location}, '*')
                // let par = {
                //     ...record,
                //     menuId: this.menuId
                // }
                // this.$router.push({path: '/distributionWarehousing/detail', query: par})
            },
            toAdd(record) {
                let now_location = escape(process.env.VUE_APP_LOCATION+`distributionWarehousing/add?id=${record.id}&menuId=${this.menuId}&menuCode=${this.routerParams.menuName}`)
                window.top.postMessage({messageType:'THIRD_PAGEADD',title:`分配入库`,url:now_location}, '*')
                let par = {
                    ...record,
                    menuId: this.menuId
                }
                this.$router.push({path: '/distributionWarehousing/add', query: par})
            }
        },
    }
</script>
<style lang="less" scoped>
    // 文件上传样式
    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 6px;
        color: #666;
    }

    .btn_space {
        margin-right: 5px;
    }
    /*.search_form {
        margin-top: -17px;
        border: 1px solid rgba(255,77,128, .2);
        border-top: 0px;
        padding: 30px;
    }*/
</style>