<template> <div class="inStockManage"> <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="入库日期"> <dateRangePicker :date.sync="searchForm.date"></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: #E6F7FF;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" :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', ellipsis: true }, { title: '品牌', dataIndex: 'brandName', 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 }, { title: '操作', fixed: "right", align: 'center', 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: {} } }, created() { this.routerParams = this.$route.query if (this.routerParams.menuId) { window.sessionStorage.setItem('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 = {} 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 = {} 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 } 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 } 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() { this.$router.push({path: '/inStock/add', query: {}}) }, toAdd() { this.$router.push({path: '/inStock/addMaterialDistribution', query: {selected: this.selectedRowKeys}}) }, toDetail(record) { this.$router.push({path: '/inStock/inStockManageDetail', query: {id: record.id}}) } }, } </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>