inStockManage.vue

<template>
    <div class="inStockManage">
        <a-form layout="inline" class="search_form">
            <a-form-item label="供应商名称">
                <a-select v-model="searchForm.supplierId" placeholder="请选择" style="width: 200px">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option v-for="item in allSupplyInfo" :key="item.id" :value="item.id">
                        {{item.supplierName}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="品牌">
                <a-select v-model="searchForm.brandId" placeholder="请选择" style="width: 200px">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option v-for="item in brandList" :key="item.enumValue" :value="item.enumValue">
                        {{item.enumName}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="入库日期">
                <dateRangePicker :date.sync="searchForm.date" style="width: 240px"></dateRangePicker>
            </a-form-item>
                <a-button type="primary" icon="search" class="search_btn" @click="searchList">搜索</a-button>
                <a-button class="search_btn ant-table-btn" icon="sync" style="margin-left: 10px" @click="restSearchForm">清空</a-button>
            <!-- <div>
                 <a-button type="primary" icon="plus" class="search_btn btn_space" @click="openModal">库存录入</a-button>
                 <a-button type="primary" icon="gift" class="search_btn btn_space"
                           :disabled="selectedRowKeys.length <= 0"
                           @click="toAdd">调拨分配
                 </a-button>
                 <a-button type="primary" icon="download" class="search_btn btn_space" @click="downLoadExcel">导出Excel
                 </a-button>
             </div>-->
        </a-form>
         <div style="display: flex;justify-content: space-between;align-items: center">
        <div style="margin-bottom: 10px">
            <a-button type="primary" class="search_btn btn_space " @click="openModal" v-if="unitInfo.level==3">
                库存录入
            </a-button>
            <a-button type="primary" class="search_btn btn_space" :disabled="selectedRowKeys.length <= 0"
                      v-if="unitInfo.level==3||unitInfo.level==4"
                      @click="toAdd">调拨分配
            </a-button>
           <!-- <a-button type="primary" class="search_btn btn_space">导出Excel</a-button>-->
            <div style="display: inline-block;line-height: 32px;background-color: #FFF1F0;cursor: pointer"
                 @click="showSelectedMedical"
                 v-if="selectedRowKeys.length > 0"
            >
                <a-popover v-model="selectedVisible" trigger="click" placement="bottomRight" style="background: #FFF1F0">
                    <div slot="content" style="min-width: 300px">
                        <div>
                            <span style="padding: 5px 16px;color: #FF4D80">已选择叶酸({{selectedRowKeys.length}})</span>
                        </div>
                        <div style="margin-top: 10px">
                            <a-list
                                    item-layout="horizontal"
                                    :data-source="selectedRowList"
                                    class="des_list"
                            >
                                <a-list-item slot="renderItem" slot-scope="item, index">
                                    <a slot="actions" @click="delSelectedKey(index)">删除</a>
                                    <a-list-item-meta
                                            :description="item.brandName"
                                    >
                                    </a-list-item-meta>
                                </a-list-item>
                            </a-list>
                        </div>
                    </div>
                    <span style="padding: 5px 16px;color: #FF4D80">已选择叶酸{{selectedRowKeys.length}}条<a-icon type="down"
                                                                                                           style="margin-left:10px;font-size: 10px"/> </span>
                </a-popover>
            </div>
        </div>
        </div>
        <div style="clear: both"></div>
        <a-table :dataSource="tableData"
                 :columns="columns"
                 rowKey="id"
                 :loading="loading"
                 :pagination="false"
                 :scroll="{ x: 1}"
                 :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >
            <template slot="produceDateS" slot-scope="record">
                {{record.produceDate | formatDate}}
            </template>
            <template slot="expireDateS" slot-scope="record">
                {{record.expireDate | formatDate}}
            </template>
            <template slot="action" slot-scope="record">
                <!--<a-button type="link" size="small" @click="openChildModal(record)">人工发放</a-button>-->
                <a-button class="ant-table-btn" size="small" @click="toDetail(record)">查看</a-button>
            </template>
        </a-table>
        <a-pagination
                v-if="pagination.total > 0"
                :total="pagination.total"
                show-size-changer
                show-quick-jumper
                v-model="pagination.pageIndex"
                :page-size="pagination.pageSize"
                :page-size-options="pagination.pageSizeOptions"
                @showSizeChange="showSizeChange"
                @change="change"
                :showTotal="() => `共 ${pagination.total} 条`"
        />
    </div>

</template>
<script>
    import {isNotBlank, isEmptyParams, getEnumByFlag} from "../../utils/common";
    import dateRangePicker from '../../components/dateRangePicker'
    import moment from 'moment'

    const columns = [
        {
            title: '供应商名称',
            dataIndex: 'supplierName',
            width: '200px',
        },
        {
            title: '品牌',
            dataIndex: 'brandName',
            width: '140px',
        },
        {
            title: '批次号',
            width: '140px',
            dataIndex: 'batchNumber',
            ellipsis: true
        },
        {
            title: '生产日期',
            // dataIndex: 'produceDate',
            width:'120px',
            scopedSlots: {customRender: 'produceDateS'},
        },
        {
            title: '有效期',
            width: '120px',
            scopedSlots: {customRender: 'expireDateS'},
        },
        {
            title: '单价(元)',
            dataIndex: 'unitPrice',
            width:'120px'
        },
        // {
        //     title: '规格',
        //     dataIndex: 'specs',
        //     ellipsis: true
        // },
        {
            title: '库存总数',
            dataIndex: 'number',
            width:'100px'
        },
        {
            title: '入库日期',
            dataIndex: 'enterDate',
            width:'120px'
        },
        {
            title: '操作',
            fixed: "right",
            align: 'center',
            width:'100px',
            scopedSlots: {customRender: 'action'},
        },
    ]
    export default {
        components: {dateRangePicker},
        data() {
            return {
                // 搜索框对象
                searchForm: {
                    brandName: '',
                    supplierId: '',
                    brandId: '',
                    date: []
                },
                pagination: {
                    pageIndex: 1,
                    pageSize: 10,
                    total: 0,
                    pageSizeOptions: ['10', '20', '30', '40', '50'],
                },
                columns,
                tableData: [],
                loading: false,
                allSupplyInfo: [],
                brandList: [],
                selectedRowKeys: [],
                selectedVisible: false,
                selectedRowList: [],
                routerParams: {},
                unitInfo: {},
                menuId: undefined
            }
        },
        created() {
            this.unitInfo = JSON.parse(sessionStorage.getItem("unitInfo"));
            this.routerParams = this.$route.query
            if (this.routerParams.menuId) {
                window.sessionStorage.setItem('menuId', this.routerParams.menuId)
                this.menuId = this.routerParams.menuId
            }
            this.getInStockList();
            this.getAllSupply();
            this.getEnumListInfo()
        },
        methods: {
            getEnumListInfo() {
                if (window.sessionStorage.getItem('allEnum')) {
                    this.brandList = getEnumByFlag("folacin_stock_record_brand_id");
                    this.unitInfo = JSON.parse(sessionStorage.getItem("unitInfo"));
                } else {
                    let par = {
                        menuId: this.menuId
                    }
                    this.$api.fyManage.fetchFYLoginUser(par).then(({data}) => {
                        window.sessionStorage.setItem('unitInfo', JSON.stringify(data.unitInfo));
                        window.sessionStorage.setItem('allEnum', JSON.stringify(data.enumValueList))
                        window.sessionStorage.setItem('userInfo', JSON.stringify(data.userInfo));
                        this.unitInfo = data.unitInfo
                        this.brandList = getEnumByFlag("folacin_stock_record_brand_id");
                    })
                }
            },
            getAllSupply() {
                let par = {
                    menuId: this.menuId
                }
                this.$api.common.fetchAllSupply(par).then(({data = []}) => {
                    this.allSupplyInfo = data
                })
            },
            searchList() {
                this.pagination.pageIndex = 1
                this.getInStockList()
            },
            getQueryParam() {
                let pars = isEmptyParams(this.searchForm);
                if (isNotBlank(this.searchForm.date)) {
                    pars.startDate = this.searchForm.date[0];
                    pars.endDate = this.searchForm.date[1];
                }
                let par = {
                    ...pars,
                    pageIndex: this.pagination.pageIndex,
                    pageSize: this.pagination.pageSize
                }
                par.menuId = this.menuId
                return par;
            },
            getInStockList() {
                this.loading = true;
                let pars = this.getQueryParam();
                this.$api.stockManage.fetchInStockList(pars).then(({data = {}}) => {
                    const {dataList = [], total = 0} = data
                    this.tableData = dataList
                    this.pagination.total = total
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            // 分页
            showSizeChange(pageNum, pageSize) {
                this.pagination.pageIndex = 1;
                this.pagination.pageSize = pageSize;
                this.getInStockList()
            },
            change(pageNum, pageSize) {
                this.pagination.pageIndex = pageNum;
                this.pagination.pageSize = pageSize;
                this.getInStockList()
            },
            showSelectedMedical() {//显示选中的药具
                let par = {
                    idList: this.selectedRowKeys,
                    menuId: this.menuId
                }
                this.$api.stockManage.fetchMedicalListByIds(par).then(({data = []}) => {
                    this.selectedRowList = data
                })
            },
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
                if (this.selectedRowKeys.length == 0) {
                    this.selectedVisible = false
                }
            },
            delSelectedKey(index) {
                this.selectedRowKeys.splice(index, 1)
                this.selectedRowList.splice(index, 1)
                if (this.selectedRowKeys.length == 0) {
                    this.selectedVisible = false
                }
            },
            restSearchForm() {
                this.searchForm = {
                    brandName: '',
                    supplierId: '',
                    date: []
                }
                this.searchList()
            },
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
            },
            downLoadExcel() {
                let pars = this.getQueryParam();
                this.$api.download.stockRecord(pars);
            },
            // 库存录入按钮
            openModal() {
                let par = {menuId: this.menuId}
                this.$router.push({path: '/inStock/add', query: par})
            },
            toAdd() {
                this.$router.push({path: '/inStock/addMaterialDistribution', query: {selected: this.selectedRowKeys, menuId: this.menuId}})
            },
            toDetail(record) {
                this.$router.push({path: '/inStock/inStockManageDetail', query: {id: record.id, menuId: this.menuId}})
            }
        },
    }
</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>

<style lang="less">
    .des_list {
        .ant-list-item-meta-description {
            color: rgba(0,0,0,.7);
        }
    }
</style>