<template>
|
<!-- <div class="app-container">
|
<div class="grid-content bg-purple">
|
<el-form :inline="true" ref="form" :model="form" class="demo-form-inline" label-width="80px" :rules="rules">
|
<el-form-item label="姓名" prop="name">
|
<el-input v-model="form.name" placeholder="请输入姓名" />
|
</el-form-item>
|
<el-form-item label="联系电话" prop="phone">
|
<el-input v-model="form.phone" placeholder="请输入联系电话" />
|
</el-form-item>
|
<el-form-item label="体检项目" prop="tjPro">
|
<el-input ref="inputName" v-model="form.tjPro" placeholder="请输入体检项目" />
|
</el-form-item>
|
<el-form-item label="数量" prop="number">
|
<el-input ref="inputName" v-model="form.number" placeholder="请输入数量" style="width: 100px;" />
|
</el-form-item>
|
<el-form-item label="应收金额" prop="ys">
|
<el-input v-model="form.ys" placeholder="金额" :disabled="true" style="width: 100px;"></el-input>
|
</el-form-item>
|
<el-form-item label="优惠折扣" prop="zk">
|
<el-input-number v-model="form.zk" :precision="2" :step="0.1" :max="10" :min="1" @change="numberChange"
|
:disabled="isfalse"></el-input-number>
|
</el-form-item>
|
<el-form-item label="实收金额" prop="ss">
|
<el-input v-model="form.ss" placeholder="实付" style="width: 100px;">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="付款类型" prop="type">
|
<el-select style="width: 198px" v-model="form.type" placeholder="请选择付款类型">
|
<el-option v-for="dict in dict.type.dict_pay_type" :key="dict.value" :label="dict.label"
|
:value="dict.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button style="margin-left: 15px" type="primary" size="mini" :disabled="disabled == 1 ? true : false"
|
@click="SubmitEvent">收费</el-button>
|
<el-button style="margin-left: 10px" type="primary" size="mini" @click="resetQuery">重置</el-button>
|
<el-button v-bind:icon="iconData" size="mini" @click="handleToggleSearch"></el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<el-row :gutter="10" class="mb8" v-if="toggleSearchStatus == '1'">
|
<el-col :span="1.5">
|
<el-form :inline="true" ref="form" :model="queryParams" class="demo-form-inline" label-width="80px" :rules="rules">
|
<el-form-item label="姓名" prop="name">
|
<el-input v-model="queryParams.name" placeholder="请输入姓名" />
|
</el-form-item>
|
<el-form-item label="联系电话" prop="phone">
|
<el-input v-model="queryParams.phone" placeholder="请输入联系电话" />
|
</el-form-item>
|
</el-form>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleUpdate"
|
v-hasPermi="['hosp:org:edit']">查询</el-button>
|
</el-col>
|
</el-row>
|
<el-table v-loading="loading" :data="tableList" @selection-change="handleSelect" border>
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column label="姓名" align="center" prop="customer.cusName" width="110px" />
|
<el-table-column label="手机号" align="center" prop="customer.cusPhone" width="120px"
|
:show-overflow-tooltip="true"></el-table-column>
|
<el-table-column label="订单流水号" align="center" prop="waterId" width="210px" />
|
<el-table-column label="体检项目" align="center" prop="proname" />
|
<el-table-column label="应收金额" align="center" prop="copeWith" />
|
<el-table-column label="实收金额" align="center" prop="paidIn" />
|
<el-table-column label="付款类型" align="center" prop="payType" width="100px">
|
<template slot-scope="scope">
|
<dict-tag :options="dict.type.dict_pay_type" :value="scope.row.payType" />
|
</template>
|
</el-table-column>
|
<el-table-column label="收费员" align="center" prop="updateBy" />
|
<el-table-column fixed="right" label="操作" align="center" class-name="small-padding ">
|
<template slot-scope="scope">
|
<el-button size="mini" type="text" @click="handlerefund(scope.row)" v-hasPermi="['system:dept:edit']"
|
v-if="scope.row.payStasus == '1'">退费</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div> -->
|
<div class="app-container">
|
<el-row :gutter="20">
|
<!--部门数据-->
|
<el-col :span="8" :xs="24">
|
<el-form :inline="true" ref="form" :model="form" class="demo-form-inline" label-width="86px" :rules="rules">
|
<el-form-item label="姓名" prop="name" style="display: flex;">
|
<el-input v-model="form.name" placeholder="请输入姓名" />
|
</el-form-item>
|
<el-form-item label="联系电话" prop="phone" style="display: flex;">
|
<el-input v-model="form.phone" placeholder="请输入联系电话" />
|
</el-form-item>
|
<!-- @focus="hadeltjpro" -->
|
<el-form-item label="体检项目" prop="tjProName" style="display: flex;">
|
<el-input ref="inputName" v-model="form.tjProName" placeholder="请输入体检项目" />
|
</el-form-item>
|
<el-form-item label="数量" prop="number" style="display: flex;">
|
<el-input ref="inputName" v-model="form.number" placeholder="请输入数量" />
|
</el-form-item>
|
<el-form-item label="应收金额" prop="ys" style="display: flex;">
|
<el-input v-model="form.ys" placeholder="金额"></el-input>
|
</el-form-item>
|
<el-form-item label="优惠" prop="zk" style="display: flex;" label-width="103px
|
">
|
<el-input-number v-model="form.zk" style="width:98%" :precision="2" :step="0.1" :max="10" :min="1"
|
disabled></el-input-number>
|
</el-form-item>
|
<el-form-item label="实收金额" prop="ss" style="display: flex;">
|
<el-input v-model="form.ss" placeholder="实付" @input="numberChange">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="付款类型" prop="type" style="display: flex;" label-width="102px">
|
<el-select v-model="form.type" placeholder="请选择付款类型">
|
<el-option v-for="dict in dict.type.dict_pay_type" :key="dict.value" :label="dict.label"
|
:value="dict.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button style="margin-left: 15px" type="primary" size="mini"
|
:disabled="disabled == 1 ? true : false" @click="SubmitEvent">收费</el-button>
|
<el-button style="margin-left: 10px" type="primary" size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-col>
|
|
<!--用户数据-->
|
<el-col :span="15" :xs="24">
|
|
<el-form :inline="true" ref="form" :model="queryParams" class="demo-form-inline" label-width="90px">
|
<el-row>
|
<el-col :span="7">
|
<el-form-item label="姓名" prop="name" style="display: flex;">
|
<el-input v-model="queryParams.name" placeholder="请输入姓名" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="联系电话" prop="phone" style="display: flex;">
|
<el-input v-model="queryParams.phone" placeholder="请输入联系电话" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="3">
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="mini"
|
@click="handleUpdate">查询</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
</el-form>
|
|
|
|
<div style="margin-bottom: 10px;">
|
<el-radio-group v-model="queryParams.type" @input="handleUpdate" style="margin-left: 30px">
|
<el-radio-button label="1">收费记录</el-radio-button>
|
<!-- <el-radio-button label="2">退费记录</el-radio-button> -->
|
</el-radio-group>
|
</div>
|
|
|
<el-table v-loading="loading" :data="tableList" @selection-change="handleSelect" border max-height="720px"
|
:row-style="changRed" style="margin-left: 30px;">
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column label="姓名" align="center" prop="customer.cusName" width="90px" />
|
<el-table-column label="手机号" align="center" prop="customer.cusPhone" width="110px"></el-table-column>
|
<el-table-column label="订单流水号" align="center" prop="waterId" width="194px" />
|
<el-table-column label="体检项目" align="center" prop="tjProName" width="120px"
|
:show-overflow-tooltip="true" />
|
<el-table-column label="应收金额" align="center" prop="copeWith" width="90px" />
|
<el-table-column label="实收金额" align="center" prop="paidIn" width="80px" />
|
<el-table-column label="付款类型" align="center" prop="payType" width="80px">
|
<template slot-scope="scope">
|
<dict-tag :options="dict.type.dict_pay_type" :value="scope.row.payType" />
|
</template>
|
</el-table-column>
|
<el-table-column label="收费员" align="center" prop="updateBy" width="100px" />
|
<el-table-column label="收退时间" align="center" prop="updateTime" width="160px" />
|
<el-table-column fixed="right" label="操作" align="center" class-name="small-padding " width="80px"
|
v-if="queryParams.type == '1'">
|
<template slot-scope="scope">
|
<!-- <el-button size="mini" type="text" @click="handlerefund(scope.row)"
|
v-if="scope.row.remarks != '已退费'">退费</el-button> -->
|
<el-button size="mini" type="text" v-if="scope.row.remarks == '已退费'">{{ scope.row.remarks
|
}}</el-button>
|
<el-button size="mini" type="text" v-if="scope.row.remarks != '已退费'"
|
@click="receipt(scope.row)">补打</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-col>
|
|
</el-row>
|
<!-- 添加补录项目 -->
|
<el-dialog :title="title" :visible.sync="Projectopen1" width="980px" style="height: 860px" append-to-body>
|
<el-row type="flex" class="row-bg" justify="space-around">
|
<el-col :span="6">
|
<div class="tab3">
|
<div class="outside1">
|
<el-tree ref="tree" :data="Treedata" show-checkbox node-key="proId" check-strictly
|
:props="defaultProps" @check-change="handleCurrentChecked">
|
</el-tree>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-dialog>
|
<div style="
|
position: absolute;
|
bottom: 100px;
|
width: 360px;
|
display: none;
|
">
|
<div id="printBill" style="width: 280px;font-size: 1px;" ref="printContent">
|
<div style="font-size: 1px;">
|
<div style="text-align: center;">
|
<h3>{{ hospName }}小票</h3>
|
</div>
|
|
<div style="margin-top: 4px;">
|
<div>
|
姓名:{{ formIn.name }}
|
</div>
|
<div>
|
电话:{{ formIn.phone }}
|
</div>
|
<div>
|
体检项目:{{ formIn.tjPro }}
|
</div>
|
<div>
|
折扣:{{ formIn.zk + "%" }}
|
</div>
|
<div>
|
实收金额:{{ formIn.ss }}元
|
</div>
|
<div>
|
收费时间:{{ currentDate + " " + currentTime }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getTjPrice, addOrderAndDetail, tjRefund, getFlowingWaterList, getPrintSetUp } from "@/api/system/examcharge";
|
import { getInfo } from "@/api/login";
|
import { projectGetList } from "@/api/system/tijian";
|
import printJS from "print-js";
|
export default {
|
dicts: ["dict_pay_type"],
|
name: "Examcharge",
|
|
data() {
|
let checkPhoneNum = (rule, value, callback) => {
|
console.log( value)
|
let patter = new RegExp(/^1\s*[3456789]\s*(\d\s*){9}$/);
|
if (value == "" && value == undefined && !value) {
|
return callback('');
|
} else if(value != undefined && value != ""){
|
return callback();
|
}else if (!patter.test(value)) {
|
return callback('');
|
}
|
};
|
return {
|
tjNumbers: "",
|
// 遮罩层
|
loading: false,
|
Projectopen1: false,
|
// 弹出层标题
|
title: "",
|
disabled: "",
|
iconData: "el-icon-arrow-down",
|
DataList: [],
|
tableList: [],
|
list: [],
|
Treedata: [],
|
defaultProps: {
|
children: "tjProjectList",
|
label: "proName",
|
disabled: function (data, node) {
|
if (data.tjProjectList && data.tjProjectList.length > 0) {
|
|
return false
|
}
|
else {
|
return true
|
}
|
}
|
|
},
|
// 选中数组
|
ids: [],
|
getInfodis: "",
|
waterId: "",
|
toggleSearchStatus: "0",
|
queryParams: {
|
name: null,
|
phone: null,
|
type: "1"
|
},
|
formIn: {
|
name: null,
|
tjPro: null,
|
phone: null,
|
number: 1,
|
ys: "0",
|
ss: "0",
|
type: "0",
|
zk: 10,
|
|
},
|
hospName: "",
|
currentDate: "",
|
currentTime: "",
|
// 表单参数
|
form: {
|
name: null,
|
tjPro: null,
|
tjProName: "体检费",
|
phone: null,
|
number: 1,
|
ys: 0,
|
ss: 0,
|
type: "0",
|
zk: 10,
|
|
},
|
// 表单校验
|
rules: {
|
name: [{ required: true, validator: checkPhoneNum, trigger: "change" }],
|
tjPro: [
|
{ required: true, validator: checkPhoneNum, trigger: "change" },
|
],
|
type: [
|
{ required: true, validator: checkPhoneNum, trigger: "blur" },
|
],
|
},
|
};
|
},
|
created() {
|
this.getList();
|
this.handleUpdate();
|
this.getCurrentDateTime()
|
|
this.startTimer()
|
},
|
methods: {
|
getCurrentDateTime() {
|
|
const currentDate = new Date()
|
|
// 格式化日期：YYYY-MM-DD
|
|
const year = currentDate.getFullYear()
|
|
const month = String(currentDate.getMonth() + 1).padStart(2, '0')
|
|
const day = String(currentDate.getDate()).padStart(2, '0')
|
|
this.currentDate = `${year}-${month}-${day}`
|
|
// 格式化时间：HH:mm:ss
|
|
const hours = String(currentDate.getHours()).padStart(2, '0')
|
|
const minutes = String(currentDate.getMinutes()).padStart(2, '0')
|
|
const seconds = String(currentDate.getSeconds()).padStart(2, '0')
|
|
this.currentTime = `${hours}:${minutes}:${seconds}`
|
|
},
|
|
startTimer() {
|
|
this.timer = setInterval(() => {
|
|
this.getCurrentDateTime()
|
|
}, 1000) //每秒钟更新一次
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timer)
|
|
},//清除定时器，以避免内存泄露。
|
|
getList() {
|
getTjPrice().then(res => {
|
if (res.data) {
|
const r = /^\+?[0-9][0-9]*$/; //正整数（可以0打头）
|
if (r.test(res.data)) {
|
this.form.ys = res.data + ".00";
|
} else {
|
this.form.ys = res.data
|
}
|
|
this.form.ss = this.form.ys
|
}
|
})
|
getInfo(this.queryParams).then((response) => {
|
this.hospName = response.hospName;
|
});
|
|
},
|
changRed({ row }) {
|
if (row.remarks == '已退费') { // 变颜色的条件
|
return {
|
backgroundColor: "#9cdcfe" // 这个return的就是样式 可以是color 也可以是backgroundColor
|
}
|
}
|
},
|
handleToggleSearch() {
|
if (this.toggleSearchStatus == "0") {
|
this.toggleSearchStatus = "1"
|
this.iconData = "el-icon-arrow-up"
|
} else {
|
this.toggleSearchStatus = "0"
|
this.iconData = "el-icon-arrow-down"
|
}
|
|
},
|
//重置按钮
|
resetQuery() {
|
this.form = {
|
name: null,
|
tjPro: null,
|
phone: null,
|
tjProName: "体检费",
|
number: 1,
|
ys: 0.00,
|
ss: 0.00,
|
type: "0",
|
zk: 10,
|
};
|
this.resetForm("form");
|
},
|
|
// 表格单选
|
handleSelect(selection, val) {
|
this.DataList = this.$refs.multipleTable.selection;
|
},
|
handleUpdate() {
|
getFlowingWaterList(this.queryParams).then(res => {
|
this.tableList = res.data
|
|
})
|
},
|
hadeltjpro() {
|
|
/** 查询部门下拉树结构 */
|
projectGetList().then((response) => {
|
this.Treedata = response.data.list;
|
|
});
|
this.Projectopen1 = true;
|
this.title = "项目列表";
|
},
|
// 点击获取每个树节点
|
handleCurrentChecked(data, checked, checkedNodes) {
|
console.log(data, checked)
|
// this.form.tjPro = "",
|
// this.form.ys = 0
|
if (checked) {
|
// this.menuOptions.id = data.id
|
this.$refs.tree.setCheckedKeys([data.proId], true)
|
} else {
|
// this.menuOptions.id = null
|
}
|
if (checked == true) {
|
this.form.tjPro = data.proId
|
this.form.tjProName = data.proName
|
const r = /^\+?[0-9][0-9]*$/; //正整数（可以0打头）
|
if (r.test(data.proPrice)) {
|
this.form.ys = data.proPrice + ".00";
|
} else {
|
this.form.ys = data.proPrice
|
}
|
}
|
|
this.Projectopen1 = false;
|
},
|
|
// 折扣
|
numberChange() {
|
let price = (this.form.ss / this.form.ys) * 10
|
this.form.zk = price.toFixed(2)
|
},
|
receipt(row) {
|
getPrintSetUp().then(res => {
|
if (res.msg == "0") {
|
this.formIn = {
|
name: row.customer.cusName,
|
tjPro: row.tjProName,
|
phone: row.customer.cusPhone,
|
ys: row.copeWith,
|
ss: row.paidIn,
|
zk: row.discount,
|
}
|
this.$nextTick(() => {
|
const style =
|
"@media print { @page{margin:0 10mm,size:4mm 6mm;}};"; //打印时去掉眉页眉尾
|
printJS({
|
printable: "printBill", // 标签元素id
|
noPrint: ".noPrint",
|
type: 'html',
|
header: "",
|
targetStyles: ["*"],
|
maxWidth: "800",
|
scanStyles: true, //打印必须加上，不然页面上的css样式无效
|
style,
|
});
|
});
|
} else {
|
const tjnumber = row.tjNumber;
|
const viewNum = "809623418249637888";
|
const params = { viewNum, tjnumber };
|
this.$tab.openPage("个人发票", "/report/charge", params);
|
}
|
this.resetQuery()
|
this.handleUpdate()
|
this.getList()
|
})
|
|
},
|
|
// 收费
|
SubmitEvent() {
|
if (this.form.name) {
|
this.formIn = this.form
|
addOrderAndDetail(this.form).then(res => {
|
if (res.code == 200) {
|
this.tjNumbers = res.msg
|
this.$modal.msgSuccess("收费成功");
|
getPrintSetUp().then(res => {
|
if (res.msg == "0") {
|
this.$nextTick(() => {
|
const style =
|
"@media print { @page{margin:0 10mm,size:4mm 6mm;}};"; //打印时去掉眉页眉尾
|
printJS({
|
printable: "printBill", // 标签元素id
|
noPrint: ".noPrint",
|
type: 'html',
|
header: "",
|
targetStyles: ["*"],
|
maxWidth: "800",
|
scanStyles: true, //打印必须加上，不然页面上的css样式无效
|
style,
|
});
|
});
|
|
} else {
|
const tjnumber = this.tjNumbers;
|
const viewNum = "809623418249637888";
|
const params = { viewNum, tjnumber };
|
this.$tab.openPage("个人发票", "/report/charge", params);
|
}
|
this.resetQuery()
|
this.handleUpdate()
|
this.getList()
|
})
|
|
}
|
})
|
} else {
|
this.$modal.msgError("请填写姓名");
|
}
|
|
},
|
handlerefund(row) {
|
this.$confirm('您确定要退费吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
let data = {
|
waterId: row.waterId
|
}
|
tjRefund(data).then(res => {
|
if (res.code == 200) {
|
this.$modal.msgSuccess("退费成功");
|
this.handleUpdate()
|
}
|
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消退费'
|
});
|
});
|
|
|
}
|
},
|
};
|
</script>
|
|
<style>
|
#sig .el-table__header-wrapper .el-checkbox {
|
display: none;
|
}
|
</style>
|
