index.vue

<template>
	<!-- 收费查询-账单查询 -->
	<div class="white_bg burt-container custom-info">
		<!-- form -->
		<a-form-model ref="form" layout="vertical" :model="form">
			<a-row :gutter="30">
				<a-col :xl="6" :lg="6" :sm="12">
					<a-form-model-item label="病历号">
						<a-input v-model="form.mrnNo" placeholder="请输入病历号" allow-clear />
					</a-form-model-item>
				</a-col>
				<a-col :xl="6" :lg="6" :sm="12">
					<a-form-model-item label="客户姓名">
						<a-input v-model="form.patientName" placeholder="请输入客户姓名" allow-clear />
					</a-form-model-item>
				</a-col>
				<a-col :xl="6" :lg="6" :sm="12">
					<a-form-model-item label="保险公司">
						<a-select v-model="form.payorIds" placeholder="请选择保险公司" allowClear show-search mode="multiple"
							:filterOption="filterCode" optionFilterProp="label">
							<a-select-option v-for="item in companyOptions" :key="item.corpCode" :value="item.id"
								:label="item.longName">
								{{ item.longName }}
							</a-select-option>
						</a-select>
					</a-form-model-item>
				</a-col>
				<a-col :xl="6" :lg="6" :sm="12">
					<a-form-model-item label="看诊医生">
						<a-select v-model="form.doctorCode" placeholder="请选择看诊医生" allowClear>
							<a-select-option v-for="item in doctorOptions" :key="item.doctorCode" :value="item.doctorCode">
								{{ item.doctorDesc }}
							</a-select-option>
						</a-select>
					</a-form-model-item>
				</a-col>
				<a-col :xl="6" :lg="6" :sm="12">
					<a-form-model-item label="收费时间">
						<a-range-picker format="YYYY-MM-DD" v-model="form.dateRange" :placeholder="['开始时间', '结束时间']"
							@change="onSelectVisitTime" />
					</a-form-model-item>
				</a-col>
				<a-col :xl="6" :lg="6" :sm="12">
					<a-form-model-item label="是否已关联寄送单">
						<a-select v-model="form.isSend" placeholder="请选择是否已关联寄送单" allowClear>
							<a-select-option value="Y" allow-clear>
								是
							</a-select-option>
							<a-select-option value="N" allow-clear>
								否
							</a-select-option>
						</a-select>
					</a-form-model-item>
				</a-col>
				<a-col :xl="6" :lg="6" :sm="12">
					<a-form-model-item label="是否已回款">
						<a-select v-model="form.isEobBack" placeholder="请选择是否已回款" allowClear>
							<a-select-option value="Y" allow-clear>
								是
							</a-select-option>
							<a-select-option value="N" allow-clear>
								否
							</a-select-option>
						</a-select>
					</a-form-model-item>
				</a-col>
				<a-col :xl="6" :lg="6" :sm="12">
					<a-form-model-item label="账单类型">
						<a-select v-model="form.receiptType" placeholder="请选择账单类型" allowClear>
							<a-select-option v-for="item in receiptTypeOptions" :key="item.value" :value="item.value">
								{{ item.name }}
							</a-select-option>
						</a-select>
					</a-form-model-item>
				</a-col>
				<a-col :xl="6" :lg="6" :sm="12">
					<a-form-model-item label="账单编号">
						<a-input v-model="form.receiptNo" placeholder="请输入账单编号" allow-clear />
					</a-form-model-item>
				</a-col>
				<a-col :xl="6" :lg="6" :sm="12">
					<a-form-model-item label="状态">
						<a-select v-model="form.status" placeholder="请选择状态" allowClear>
							<a-select-option v-for="item in statusOptions" :key="item.code" :value="item.code">
								{{ item.name }}
							</a-select-option>
						</a-select>
					</a-form-model-item>
				</a-col>
				<a-col :xl="6" :lg="3" :sm="3">
					<a-form-model-item :label="` 未清余额合计 `">
						<div>未清余额合计:{{ ciReceiptTotalVo.residueBackAmount || 0 }}(共计{{ ciReceiptTotalVo.totalNum || 0 }}条，其中：无效 <span style="color: red;">{{ ciReceiptTotalVo.invalidNum || 0 }}</span> 条)</div>
					</a-form-model-item>
					
				</a-col>
				<a-col :xl="6" :lg="3" :sm="3" class="none-label">
					<a-form-model-item label="button">
						<!-- <a-button>更新数据</a-button> -->
						<!-- <a-button class="mar-left10" type="primary" @click="addNewCharge">
              <Icon name="ssiadd" :size="14" />新建预授权</a-button> -->
						<a-button class="mar-left10" type="primary" @click="handlerReset">
							<Icon name="ssireset" :size="14" />重置
						</a-button>
						<a-button class="mar-left10" type="primary" @click="handlerSearch">
							<Icon name="ssisearch_active" :size="14" />查询
						</a-button>
						<a-button class="mar-left10" type="primary" @click="exportExcel">
							<Icon name="ssidaochu" :size="14" />导出
						</a-button>
					</a-form-model-item>
				</a-col>
			</a-row>
		</a-form-model>

		<!-- table -->
		<a-table :columns="columns" :data-source="dataList" :scroll="{ x: true }" :pagination="false">
			<template slot="index" slot-scope="text, record, index">
				{{ index + 1 }}
			</template>
			<template slot="operation" slot-scope="record">
				<!-- <a-button type="link" @click.stop="receiptEvt(record)">结算</a-button> -->
				<a-button type="link" class="success" @click.stop="detailEvt(record)">查看</a-button>
				<!-- <a-popconfirm title="你确定要关闭吗？" ok-text="确定" cancel-text="取消" @confirm="deleteData" >
          <a-button type="link" class="danger">删除</a-button>
        </a-popconfirm> -->
			</template>
			<template slot="isSend" slot-scope="text">
				{{ text == 'Y' ? '是' : text == 'N' ? '否' : '' }}
			</template>
			<template slot="isEob" slot-scope="text">
				{{ text == 'Y' ? '是' : text == 'N' ? '否' : '' }}
			</template>
			<template slot="isEobBack" slot-scope="text">
				{{ text == 'Y' ? '是' : text == 'N' ? '否' : '' }}
			</template>
			<template slot="status" slot-scope="text">
				<span :style="{ color: text == 2 ? 'red' : '' }">{{ text == 1 ? '有效' : text == 2 ? '无效' : '' }}</span>
			</template>
			<template slot="redText" slot-scope="text">
				<span style="color: red">{{ text }}</span>
			</template>
		</a-table>
		<!--分页-->
		<BurtPagination :pagination="pagination" @pageChange="_getChargeList" />
	</div>
</template>

<script>
import BurtPagination from '@/components/CUSTOMER/pagation';
import { mapState } from 'vuex';
import moment from 'moment';
import { receiptTypeOptions } from '@/utils/utilsdictOptions.js';
import { exportFile } from '@/utils/index';
export default {
	data() {
		const columns = [
			{
				title: '序号',
				dataIndex: 'index',
				key: 'index',
				align: 'center',
				width: 80,
				scopedSlots: { customRender: 'index' }
			},
			{ title: '收费时间', dataIndex: 'receiptDate', width: 180 },
			{ title: '账单编号', dataIndex: 'receiptNo', width: 180 },
			{ title: '账单类型', dataIndex: 'receiptTypeStr', width: 130 },
			{ title: '状态', dataIndex: 'status', width: 130, scopedSlots: { customRender: 'status' } },
			{ title: '病历号', dataIndex: 'mrnNo', width: 180 },
			{ title: '客户姓名', dataIndex: 'patientName', width: 120 },
			{ title: '保险公司', dataIndex: 'payorName', width: 200 },
			{ title: '保险卡', dataIndex: 'cardNo', width: 200 },
			{ title: '客户生日', dataIndex: 'birthday', width: 200 },
			{ title: '就诊医生', dataIndex: 'doctorName', width: 150 },
			{ title: '是否已关联寄送单', dataIndex: 'isSend', width: 180, scopedSlots: { customRender: 'isSend' } },
			{ title: '是否已回款', dataIndex: 'isEobBack', width: 180, scopedSlots: { customRender: 'isEobBack' } },
			{ title: '应收金额', dataIndex: 'chargeAmount', width: 180 },
			{ title: '折扣（%）', dataIndex: 'discountAmount', width: 180 },
			{ title: '减免金额', dataIndex: 'reduceAmount', width: 180 },
			{ title: '应付金额', dataIndex: 'payableAmount', width: 180 },
			{ title: '客户自付', dataIndex: 'selfpaidAmount', width: 180 },
			{ title: '理赔金额', dataIndex: 'actualAmount', width: 180 },
			{ title: '保险已支付', dataIndex: 'backAmount', width: 180 },
			{ title: '保险欠费', dataIndex: 'insuranceArrearsAmount', width: 180 },
			{ title: '个人欠费', dataIndex: 'arrearsAmount', width: 180, scopedSlots: { customRender: 'redText' } },
			{ title: '备注', dataIndex: 'remark', width: 200, scopedSlots: { customRender: 'redText' } },
			{ title: '未清余额', dataIndex: 'residueBackAmount', width: 180 },
			{ title: '账龄', dataIndex: 'diffDay', width: 180 },
			{
				title: '操作',
				key: 'operation',
				width: '175px',
				fixed: 'right',
				scopedSlots: { customRender: 'operation' },
				align: 'center'
			}
		];
		return {
			columns,
			receiptTypeOptions,
			form: {},
			pageForm: {
				doctorCode: '',
				patientName: '',
				mrnNo: '',
				paymentCode: '',
				payorIds: [],
				visitTimeEnd: '',
				visitTimeStart: '',
				receiptType: '',
				receiptNo: ''
			},
			patientTypeOptions: [
				{
					name: '商保',
					code: 1
				}
			], //客户类型
			companyOptions: [], //保险公司
			doctorOptions: [], //就诊医生
			paymentOptions: [
				{
					name: '商保',
					code: 1
				}
			], //支付方式
			dataList: [],
			pagination: {
				pageNum: 1,
				pageSize: 10,
				total: 0
			},
			receiptTypeDict: {
				1: '收费',
				2: '退费'
			},
			statusOptions: [
				{
					name: '无效',
					code: 2
				},
				{
					name: '有效',
					code: 1
				}
			],
			ciReceiptTotalVo: {}
		};
	},
	components: {
		BurtPagination
	},
	computed: {
		...mapState({
			userInfo: (state) => state.common.userInfo
		})
	},
	created() {
		this._getCompanyOptions();
		this._getDoctorListNoPage(); //获取医生下拉选项
	},
	methods: {
		moment,
		// 获取未清余额合计
		getReceiptCount() {
			this.$apis.receiptCount({
				...this.pageForm,
				...this.pagination
			}).then((res) => {
				if (res.returnCode == '0000') {
					console.log(res.content)
					this.ciReceiptTotalVo = res.content
				}
			});
		},
		// 选择框筛选
		filterCode(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		// 获取列表数据
		_getChargeList() {
			const data = {
				...this.pageForm,
				...this.pagination
			};
			this.$apis.GETCHARGELIST(data).then((res) => {
				let content = res.content || {};
				this.dataList =
					content.list.map((item) => {
						item.receiptTypeStr = this.receiptTypeDict[item.receiptType] || '';
						return item;
					}) || [];
				this.pagination.total = content.total || 0;
			});
		},
		// 获取保险公司下拉选项
		_getCompanyOptions() {
			this.$apis.GETCOMPANYOPTIONS().then((res) => {
				this.companyOptions = res.content || [];
			});
		},
		// 获取看诊医生下拉选项
		_getDoctorListNoPage() {
			this.$apis.GETDOCTORlISTNOPAGE({ providerId: this.userInfo.providerId }).then((res) => {
				if (res.returnCode === '0000') {
					this.doctorOptions = res.content || [];
				} else {
					this.$message.success(res.returnMsg);
				}
			});
		},
		// 选中就诊时间
		onSelectVisitTime(date, dateString) {
			this.form.visitTimeStart = dateString[0] + ' 00:00:00';
			this.form.visitTimeEnd = dateString[1] + ' 23:59:59';
			console.log(date, dateString);
		},
		// 重置
		handlerReset() {
			this.form = {};
		},
		//查看
		detailEvt(record) {
			localStorage.setItem('chargeQueryDetail', JSON.stringify(record));
			const { receiptNo } = record;
			this.$router.push({
				name: 'chargeQueryDetail',
				query: { receiptNo }
			});
		},
		//账单结算
		receiptEvt(record) {
			this.$modal.confirm({
				title: '结算',
				content: '确定结算该账单？',
				okText: '确定',
				cancelText: '取消',
				onOk: () => {
					this.$apis
						.RECEIPTSETTLEMENT({
							id: record.id
						})
						.then((res) => {
							if (res.returnCode === '0000') {
								this.$message.success('结算成功');
								this._getChargeList();
							} else {
								this.$message.error(res.returnMsg);
							}
						});
				}
			});
		},
		handlerSearch() {
			this.$refs.form.validate((valid) => {
				if (!valid) {
					return false;
				}
				this.pagination.pageNum = 1;
				this.pageForm = this.$lodash.cloneDeep({ ...this.form, dateRange: undefined });
				this._getChargeList();
				
				this.getReceiptCount()
			});
		},
		// 新建账单信息
		addNewCharge() {
			// this.$router.push("/customer/edit");
		},
		//导出报表
		exportExcel() {
			let filter = {
				...this.form
			};
			this.$apis.RceiptListReport(filter).then((res) => {
				exportFile(res, '账单报表.xls');
			});
		}
	}
};
</script>
<style lang="less" scoped>
.none-label {
	text-align: right;

	.ant-form-item-label {
		opacity: 0;
	}
}

.ant-btn .icon-class {
	.mg-r(10);
}
</style>