<template> <div class="inStockManage"> <!--:getContainer="() => window.parent.document.body"--> <a-modal title="选择要发放的叶酸种类" v-if="visible" :visible="visible" @cancel="visible = false" @ok="getChecked" :maskClosable="false" width="1200px" > <a-form layout="inline" class="search_form"> <a-form-item label="供应商名称"> <a-select v-model="searchForm.supplierId" placeholder="请选择" style="width: 250px"> <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: 250px"> <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="入库日期"> <a-date-picker v-model="searchForm.enterDate" format="YYYY-MM-DD" style="width: 250px"/> </a-form-item> <a-button type="primary" class="search_btn" @click="searchList">搜索</a-button> <a-button class="search_btn" style="margin-left: 10px" @click="restSearchForm">清空</a-button> <div style="float: right;line-height: 32px;background-color: #FFF1F0;margin-top: 16px;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" > <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> </a-form> <div style="clear: both"></div> <a-table :dataSource="tableData" :columns="columns" rowKey="id" :loading="loading" :pagination="false" :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> </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 style="clear: both"></div> </a-modal> </div> </template> <script> import {isNotBlank, isEmptyParams} from "../../../utils/common"; import moment from 'moment' const columns = [ { title: '品牌', dataIndex: 'brandName', ellipsis: true }, { title: '供应商名称', dataIndex: 'supplierName', ellipsis: true }, { title: '批次号', width: '120px', dataIndex: 'batchNumber', ellipsis: true }, { title: '生产日期', // dataIndex: 'produceDate', scopedSlots: {customRender: 'produceDateS'}, }, { title: '有效期', width: '120px', scopedSlots: {customRender: 'expireDateS'}, }, { title: '单价(元)', dataIndex: 'unitPrice', ellipsis: true }, { title: '规格', dataIndex: 'specs', ellipsis: true }, { title: '库存总数', dataIndex: 'number', ellipsis: true }, { title: '入库日期', dataIndex: 'enterDate', ellipsis: true }, ] export default { props: { menuId: { type: String } }, components: {}, data() { return { // 搜索框对象 searchForm: { brandName: '', supplierId: '', brandId:'', enterDate: undefined }, pagination: { pageIndex: 1, pageSize: 10, total: 0, pageSizeOptions: ['10', '20', '30', '40', '50'], }, columns, tableData: [], loading: false, allSupplyInfo: [], brandList: [], selectedRowKeys: [], selectedVisible: false, selectedRowList: [], visible: false } }, created() { this.getInStockList(); this.getAllSupply(); this.brandList = JSON.parse(sessionStorage.getItem("allEnum"))["folacin_stock_record_brand_id"]; }, methods: { getAllSupply() { let par = { menuId: this.menuId } this.$api.common.fetchAllSupply(par).then(({data = []}) => { this.allSupplyInfo = data }) }, searchList() { this.pagination.pageIndex = 1 this.getInStockList() }, getInStockList() { this.loading = true let pars = isEmptyParams(this.searchForm); if (isNotBlank( pars.enterDate)){ pars.enterDate = moment(pars.enterDate).format('YYYY-MM-DD') } let par = { ...pars, pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize, menuId: this.menuId } this.$api.stockManage.fetchInStockNoZeroList(par).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: '', enterDate: undefined } this.searchList() }, onSelectChange(selectedRowKeys) { this.selectedRowKeys = selectedRowKeys; }, // getContainer() { // return window.parent.document.body; // }, getChecked() { this.$emit('selectedIdList', this.selectedRowKeys) } }, } </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>