<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>