New file |
| | |
| | | <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="24"> |
| | | <!--部门数据--> |
| | | <el-col :span="4" :xs="24"> |
| | | <el-form :inline="true" ref="form" :model="form" class="demo-form-inline" label-width="78px" :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="请输入数量" /> |
| | | </el-form-item> |
| | | <el-form-item label="应收金额" prop="ys"> |
| | | <el-input v-model="form.ys" placeholder="金额" :disabled="true"></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="实付"> |
| | | </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-form-item> |
| | | </el-form> |
| | | </el-col> |
| | | |
| | | <!--用户数据--> |
| | | <el-col :span="17" :xs="24" style="padding: 0 10px;"> |
| | | <el-row :gutter="10" class="mb8"> |
| | | <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> |
| | | <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="740px" |
| | | :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="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" width="90px" /> |
| | | <el-table-column label="实收金额" align="center" prop="paidIn" width="90px" /> |
| | | <el-table-column label="付款类型" align="center" prop="payType" width="90px"> |
| | | <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="110px" /> |
| | | <el-table-column label="收退时间" align="center" prop="updateTime" /> |
| | | <el-table-column fixed="right" label="操作" align="center" class-name="small-padding " width="120px" |
| | | v-if="queryParams.type == '1'"> |
| | | <template slot-scope="scope"> |
| | | <el-button size="mini" type="text" @click="handlerefund(scope.row)" |
| | | v-hasPermi="['system:dept:edit']" v-if="scope.row.remarks != '已退费'">退费</el-button> |
| | | <el-button size="mini" type="text" v-hasPermi="['system:dept:edit']" |
| | | v-if="scope.row.remarks == '已退费'">{{ scope.row.remarks }}</el-button> |
| | | <el-button size="mini" type="text" v-hasPermi="['system:dept:edit']" |
| | | v-if="scope.row.remarks != '已退费'" @click="receipt(scope.row)">补打小票</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-col> |
| | | |
| | | </el-row> |
| | | <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 } from "@/api/system/examcharge"; |
| | | import { getInfo } from "@/api/login"; |
| | | import printJS from "print-js"; |
| | | export default { |
| | | dicts: ["dict_pay_type"], |
| | | name: "Examcharge", |
| | | |
| | | data() { |
| | | return { |
| | | |
| | | // 遮罩层 |
| | | loading: false, |
| | | disabled: "", |
| | | iconData: "el-icon-arrow-down", |
| | | DataList: [], |
| | | tableList: [], |
| | | list: [], |
| | | // 选中数组 |
| | | ids: [], |
| | | getInfodis: "", |
| | | waterId: "", |
| | | isfalse: false, |
| | | toggleSearchStatus: "0", |
| | | queryParams: { |
| | | name: "", |
| | | phone: "", |
| | | type: "1" |
| | | }, |
| | | formIn: { |
| | | name: "", |
| | | tjPro: "体检费", |
| | | phone: "", |
| | | number: 1, |
| | | ys: "0", |
| | | ss: "0", |
| | | type: "0", |
| | | zk: 10, |
| | | |
| | | }, |
| | | hospName:"", |
| | | currentDate: "", |
| | | currentTime: "", |
| | | // 表单参数 |
| | | form: { |
| | | name: "", |
| | | tjPro: "体检费", |
| | | phone: "", |
| | | number: 1, |
| | | ys: "0", |
| | | ss: "0", |
| | | type: "0", |
| | | zk: 10, |
| | | |
| | | }, |
| | | // 表单校验 |
| | | rules: { |
| | | name: [{ required: true, message: "姓名不能为空", trigger: "change" }], |
| | | tjPro: [ |
| | | { required: true, message: "体检项目不能为空", trigger: "change" }, |
| | | ], |
| | | type: [ |
| | | { required: true, message: "付款类型不能为空", 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: "体检费", |
| | | phone: null, |
| | | number: 1, |
| | | ys: "0", |
| | | ss: "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 |
| | | this.tableList.forEach(element => { |
| | | element.proname = "体检费" |
| | | }); |
| | | }) |
| | | }, |
| | | |
| | | // 折扣 |
| | | numberChange(currentValue, oldValue) { |
| | | this.form.zk = currentValue; |
| | | this.form.ss = ( |
| | | this.form.ys * |
| | | (this.form.zk / 10) |
| | | ).toFixed(2); |
| | | const r = /^\+?[0-9][0-9]*$/; //正整数(可以以打头) |
| | | //const r=/^\+?[1-9][0-9]*$/;//正整数 |
| | | if (r.test(this.form.ss)) { |
| | | this.form.ss = this.form.ss + ".00"; |
| | | } |
| | | }, |
| | | receipt(row) { |
| | | this.formIn = { |
| | | name: row.customer.cusName, |
| | | tjPro: "体检费", |
| | | 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, |
| | | }); |
| | | }); |
| | | }, |
| | | |
| | | // 收费 |
| | | SubmitEvent() { |
| | | if (this.form.name) { |
| | | this.formIn = this.form |
| | | addOrderAndDetail(this.form).then(res => { |
| | | if (res.code == 200) { |
| | | this.$modal.msgSuccess("收费成功"); |
| | | |
| | | this.receipt() |
| | | 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> |