<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;margin-left: 25px;">
|
<h3>收费记录</h3>
|
|
<!-- <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.0,
|
ss: 0.0,
|
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>
|
