<template> <div class="inStockManage"> <a-form layout="inline" class="search_form"> <a-form-item label="证件号码"> <!--v-price="{digit:4}"--> <a-input v-model="searchForm.idCar" placeholder="请输入证件号码" style="width: 250px"></a-input> </a-form-item> <a-form-item> <!-- <a-button class="search_btn" @click="restSearchForm">读卡识别</a-button>--> <a-button type="primary" class="search_btn" style="margin-left: 10px" @click="searchList">搜索</a-button> <a-button class="search_btn" style="margin-left: 10px" @click="restSearchForm">清空</a-button> </a-form-item> <a-button type="primary" class="search_btn" style="float: right" @click="toAdd">发放登记</a-button> <div style="clear: both"></div> </a-form> <div style="margin-top: 16px;margin-bottom: 10px"></div> <a-table :dataSource="tableData" :columns="columns" rowKey="id" :loading="loading" :pagination="false" > <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 type="link" 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 {isEmptyParams} from "../../utils/common"; import moment from 'moment' const columns = [ { title: '发放日期', dataIndex: 'provideDate', ellipsis: true }, { title: '姓名', dataIndex: 'residentId', ellipsis: true }, { title: '证件号码', width: '120px', dataIndex: 'residentId', ellipsis: true }, { title: '联系电话', dataIndex: 'residentId', ellipsis: true }, { title: '发放数量(瓶)', dataIndex: 'number', ellipsis: true }, /* { title: '发放时期', width: '120px', scopedSlots: {customRender: 'expireDateS'}, },*/ { title: '现住址', dataIndex: 'residentId', ellipsis: true }, { title: '登记人', dataIndex: 'provideDoctorId', ellipsis: true }, { title: '操作', align: 'center', scopedSlots: {customRender: 'action'}, }, ] export default { components: {}, data() { return { // 搜索框对象 searchForm: { idCar:undefined }, pagination: { pageIndex: 1, pageSize: 10, total: 0, pageSizeOptions: ['10', '20', '30', '40', '50'], }, columns, tableData: [], loading: false, } }, created() { this.getFolviteDistributionList() }, methods: { searchList() { this.pagination.pageIndex = 1 this.getFolviteDistributionList() }, getFolviteDistributionList() { this.loading = true let pars = isEmptyParams(this.searchForm) let par = { ...pars, pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize } this.$api.folviteDistributionManage.fetchFolviteDistributionList(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.getFolviteDistributionList() }, change(pageNum, pageSize) { this.pagination.pageIndex = pageNum; this.pagination.pageSize = pageSize; this.getFolviteDistributionList() }, restSearchForm() { this.searchForm = { idCar:undefined } this.searchList() }, toAdd() { this.$router.push({path:'/folviteDistribution/add'}) }, toDetail(record) { this.$router.push({path:'/folviteDistribution/detail', query: record}) } }, } </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: -16px; border: 1px solid rgba(255,77,128, .2); border-top: 0px; padding: 30px; }*/ </style>