<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
<el-form-item label="姓名" prop="name">
|
<el-input style="width: 130px" v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery"/>
|
</el-form-item>
|
<el-form-item label="手机号" prop="phoe">
|
<el-input style="width: 130px" v-model="queryParams.phoe" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery"/>
|
</el-form-item>
|
<el-form-item label="预约时间" prop="reservationTime">
|
<el-date-picker style="width: 130px" v-model="queryParams.reservationTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="单位名称" prop="company">
|
<el-select
|
:remote-method="getRemoteData"
|
v-model="queryParams.company"
|
value-key="drugManufacturerId"
|
remote
|
filterable
|
placeholder="请选择单位名称"
|
clearable
|
@change="searchSelect"
|
>
|
<el-option
|
v-for="dict in CompanyList"
|
:key="dict.drugManufacturerId"
|
:label="dict.cnName"
|
:value="dict.cnName"
|
/>
|
</el-select>
|
<!-- <el-input v-model="queryParams.company" placeholder="请输入单位名字" clearable @keyup.enter.native="handleQuery"/> -->
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
<!-- <el-col :span="1.5">
|
<el-button
|
type="primary"
|
plain
|
icon="el-icon-plus"
|
size="mini"
|
@click="handleAdd"
|
v-hasPermi="['hosp:order:add']"
|
>新增</el-button>
|
</el-col> -->
|
<!-- <el-col :span="1.5">
|
<el-button
|
type="success"
|
plain
|
icon="el-icon-edit"
|
size="mini"
|
:disabled="single"
|
@click="handleUpdate"
|
v-hasPermi="['hosp:order:edit']"
|
>订单流水</el-button>
|
</el-col> -->
|
<!-- <el-col :span="1.5">
|
<el-button
|
type="danger"
|
plain
|
icon="el-icon-delete"
|
size="mini"
|
:disabled="multiple"
|
@click="handleDelete"
|
v-hasPermi="['hosp:order:remove']"
|
>体检记录详情</el-button>
|
</el-col> -->
|
<el-col :span="1.5">
|
<!-- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
|
v-hasPermi="['hosp:order:export']">导出</el-button> -->
|
<!-- <el-button type="warning" plain icon="el-icon-refresh-left" size="mini" @click="handleDelete"
|
v-hasPermi="['hosp:order:export']">撤销预约</el-button> -->
|
</el-col>
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" style="margin-right:20px"></right-toolbar>
|
</el-row>
|
|
<template>
|
<el-table border style="margin: 14px; width: 98%" v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="40px" align="center" fixed="left"/>
|
<!-- <el-table-column label="主键id" align="center" prop="orderId" /> -->
|
<!-- <el-table-column label="用户id" align="center" prop="userId" /> -->
|
<el-table-column label="序号" align="center" prop="newID" width="50px" fixed="left" height="10px"/>
|
<el-table-column label="姓名" align="center" prop="name" height="10px" width="110px" :show-overflow-tooltip="true" fixed="left"/>
|
<el-table-column label="性别" align="center" prop="sex" width="55px" height="10px" :show-overflow-tooltip="true">
|
<template slot-scope="scope">
|
<span v-if="scope.row.sex == '0'">男</span>
|
<span v-if="scope.row.sex == '1'">女</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="年龄" align="center" prop="age" height="10px" :show-overflow-tooltip="true" width="55px"/>
|
<el-table-column label="电话" align="center" prop="phoe" height="10px" width="120px" :show-overflow-tooltip="true"/>
|
|
<el-table-column label="体检类型" align="center" prop="tjType" height="10px" width="80px" :show-overflow-tooltip="true">
|
<template slot-scope="scope">
|
<span v-if="scope.row.tjType == '1'">团队</span>
|
<span v-if="scope.row.tjType == '2'">个人</span>
|
</template>
|
<!-- <template slot-scope="scope">
|
<span v-if="scope.row.tjType == '1'">个人</span>
|
<span v-if="scope.row.tjType == '2'">团队</span>
|
</template> -->
|
</el-table-column>
|
<el-table-column label="单位名称" align="center" prop="company" height="10px" width="190px" :show-overflow-tooltip="true"/>
|
<!-- <el-table-column label="体检号" align="center" prop="tjNumber" :show-overflow-tooltip="true" height="10px" /> -->
|
<!-- <el-table-column label="流水号" align="center" prop="tjSerialNumber" /> -->
|
<!-- <el-table-column label="所选套餐" align="center" prop="pacName" height="10px" :show-overflow-tooltip="true" /> -->
|
<el-table-column label="创建时间" align="center" prop="createTime" width="160px" height="10px" :show-overflow-tooltip="true">
|
<!-- <template slot-scope="scope">
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
</template> -->
|
</el-table-column>
|
<el-table-column label="预约时间" align="center" prop="reservationTime" width="100px" height="10px" :show-overflow-tooltip="true">
|
<!-- <template slot-scope="scope">
|
<span>{{ parseTime(scope.row.reservationTime) }}</span>
|
</template> -->
|
</el-table-column>
|
<el-table-column label="撤销时间" align="center" prop="updateTime" width="160px" height="10px" :show-overflow-tooltip="true">
|
<!-- <template slot-scope="scope">
|
<span>{{ parseTime(scope.row.reservationTime) }}</span>
|
</template> -->
|
</el-table-column>
|
<el-table-column label="撤销人员" align="center" prop="name" width="100px" height="10px" :show-overflow-tooltip="true">
|
<!-- <template slot-scope="scope">
|
<span>{{ parseTime(scope.row.reservationTime) }}</span>
|
</template> -->
|
</el-table-column>
|
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
|
<!-- <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
|
</template>
|
</el-table-column> -->
|
<!-- <el-table-column label="报告时间" align="center" prop="reportTime" width="155px" height="10px">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.reportTime) }}</span>
|
</template>
|
</el-table-column> -->
|
<!-- <el-table-column label="创建人" align="center" prop="createBy" /> -->
|
<!-- <el-table-column label="更新人" align="center" prop="updateBy" /> -->
|
<!-- <el-table-column label="单位名称" align="center" prop="dictCompName" :show-overflow-tooltip="true" height="10px" /> -->
|
<!-- <el-table-column label="部门名" align="center" prop="department" /> -->
|
<!-- <el-table-column label="在单位工号" align="center" prop="firmWorkId" height="10px" /> -->
|
<!-- <el-table-column label="客户照片" align="center" prop="photo" /> -->
|
<!-- <el-table-column prop="checkStatus" label="审核状态" width="180">
|
<template slot-scope="scope">
|
<span>{{
|
scope.row.checkStatus == "1" ? "已审核" : "待审核"
|
}}</span>
|
</template>
|
</el-table-column> -->
|
<!-- <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" height="10px"
|
width="134px">
|
<template slot-scope="scope">
|
<el-button size="mini" type="text" icon="el-icon-document" @click="handleUpdate(scope.row)"
|
v-hasPermi="['hosp:order:edit']" title="详情" style="margin-right: 15px"></el-button>
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleProject(scope.row)"
|
v-hasPermi="['hosp:order:edit']" title="编辑" style="margin-right: 15px"></el-button>
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
v-hasPermi="['hosp:customer:remove']" title="撤销预约"></el-button>
|
</template>
|
</el-table-column> -->
|
</el-table>
|
</template>
|
|
<div class="pag">
|
<div class="pag1">
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
|
</div>
|
</div>
|
|
<!-- 订单流水对话框 -->
|
<!-- <el-dialog title="提示" :visible.sync="dialogVisible" width="1500px " >
|
<el-table :data="tableData" style="width: 100%">
|
<el-table-column prop="date" label="日期" width="180">
|
</el-table-column>
|
<el-table-column prop="name" label="姓名" width="180">
|
</el-table-column>
|
<el-table-column prop="address" label="地址">
|
</el-table-column>
|
</el-table>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
</span>
|
</el-dialog> -->
|
|
<el-dialog
|
title="PDF 预览"
|
:visible.sync="dialogVisible"
|
:close-on-click-modal="false"
|
>
|
<div class="main">
|
<iframe
|
id="printIframe"
|
:src="url"
|
frameborder="0"
|
style="width: 100%; height: 100%"
|
></iframe>
|
</div>
|
</el-dialog>
|
|
<el-dialog
|
title="导诊单"
|
:visible.sync="daoZhenDan"
|
:close-on-click-modal="false"
|
>
|
<div class="main">
|
<iframe
|
id="printIframe"
|
:src="url"
|
frameborder="0"
|
style="width: 100%; height: 100%"
|
></iframe>
|
</div>
|
</el-dialog>
|
|
<!-- 添加或修改体检记录对话框 -->
|
<el-dialog
|
:title="title"
|
:visible.sync="Projectopen"
|
width="950px"
|
append-to-body
|
>
|
<el-row type="flex" class="row-bg" justify="space-around">
|
<el-col :span="7">
|
<div style="text-align: center; margin-bottom: 10px">项目列表</div>
|
<div class="tab3">
|
<div class="tab2">
|
<el-tree
|
:data="Treedata"
|
show-checkbox
|
node-key="proId"
|
:props="defaultProps"
|
@check-change="handleCurrentChecked"
|
>
|
</el-tree>
|
</div>
|
</div>
|
</el-col>
|
|
<el-col :span="16">
|
<div class="grid-content bg-purple">
|
<template>
|
<el-form :model="form">
|
<el-form-item label="体检类型" prop="tjType">
|
<el-radio-group v-model="form.tjType">
|
<el-radio :label="2">团队</el-radio>
|
<el-radio :label="1">个人</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
</template>
|
|
<div class="tab1">
|
<el-form :inline="true" class="tab1">
|
<el-form-item label="原价">
|
<el-input
|
placeholder="原价"
|
:value="TotalPrice1"
|
disabled
|
style="width: 100px"
|
></el-input>
|
</el-form-item>
|
<el-form>
|
<el-form-item label="折扣设定">
|
<el-input
|
style="width: 100px"
|
type="number"
|
v-model="discount"
|
:value="discount"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<el-form-item label="应付金额">
|
<el-input
|
placeholder="应付金额"
|
:value="TotalPrice1 * (discount / 100)"
|
style="width: 100px"
|
></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
@click="submitPrice"
|
:disabled="confirm"
|
>收费</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div style="text-align: center; margin-bottom: 10px">
|
已选项目列表
|
</div>
|
<div
|
style="
|
padding: 0px 6px;
|
border: 1px solid #e6ebf5;
|
max-height: 420px;
|
overflow: auto;
|
"
|
>
|
<el-collapse v-model="activeName" accordion>
|
<div v-for="(item, index) in DataList" :key="index">
|
<el-collapse-item>
|
<template slot="title">
|
{{ item.proName + "(" + "原价" + item.proPrice + ")" }}
|
</template>
|
<el-table
|
:data="item.tjProjectList"
|
border
|
style="width: 100%"
|
height="250"
|
>
|
<el-table-column prop="proName" label="项目" width="180">
|
</el-table-column>
|
<el-table-column prop="proPrice" label="原价">
|
</el-table-column>
|
</el-table>
|
</el-collapse-item>
|
</div>
|
</el-collapse>
|
<el-collapse v-model="activeName" accordion v-if="list1">
|
<div>
|
<el-collapse-item title="请选择项目">
|
<el-table :data="DataList" border style="width: 100%">
|
<el-table-column prop="proName" label="项目" width="180">
|
</el-table-column>
|
<el-table-column prop="ordPrice" label="原价">
|
</el-table-column>
|
</el-table>
|
</el-collapse-item>
|
</div>
|
</el-collapse>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-dialog>
|
|
<!-- 添加或修改体检记录对话框 -->
|
<el-dialog :title="title" :visible.sync="open" width="950px" append-to-body>
|
<el-table :data="numberList" style="width: 100%">
|
<el-table-column prop="proName" label="项目/耗材" width="300">
|
</el-table-column>
|
<el-table-column prop="price" label="单价" width="300">
|
</el-table-column>
|
<el-table-column prop="count" label="数量" width="300">
|
</el-table-column>
|
</el-table>
|
<el-table :data="bill" style="width: 100%">
|
<el-table-column prop="copeWith" label="应付" width="180">
|
</el-table-column>
|
<el-table-column prop="discount" label="折扣" width="180">
|
</el-table-column>
|
<el-table-column prop="paidIn" label="实付" width="180">
|
</el-table-column>
|
<el-table-column prop="payType" label="付款方式" width="180">
|
<template slot-scope="scope">
|
<span v-if="scope.row.payType == '0'">现金支付</span>
|
<span v-if="scope.row.payType == '1'">刷卡支付</span>
|
<span v-if="scope.row.payType == '2'">支付宝支付</span>
|
<span v-if="scope.row.payType == '3'">微信支付</span>
|
<span v-if="scope.row.payType == '4'">云闪付支付</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="payStasus" label="付款状态" width="180">
|
<template slot-scope="scope">
|
<span>{{ scope.row.payStasus == "1" ? "已付" : "未付" }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="cancel">取 消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { getNumber } from "@/api/hosp/order";
|
import { getselectTj } from "@/api/system/register";
|
import { getCompany, queryCompany } from "@/api/team/tuanti";
|
import ViewPdf from "@/components/ViewPdf";
|
import user from "@/store/modules/user";
|
import { projectGetList, getOrder } from "@/api/system/tijian";
|
export default {
|
components: {
|
ViewPdf,
|
},
|
name: "Order",
|
data() {
|
return {
|
CompanyList: [],
|
value: "",
|
ids: [],
|
dialogVisible: false,
|
daoZhenDan: false,
|
Projectopen: false,
|
src: "",
|
url: "",
|
flag: true,
|
bill: null,
|
Treedata: [],
|
defaultProps: {
|
children: "tjProjectList",
|
label: "proName",
|
},
|
discount: 100,
|
DataList: [],
|
// 套餐提交按钮
|
confirm: false,
|
list1: true,
|
activeName: "1",
|
proIds: [],
|
TotalPrice1: 0,
|
numberList: [],
|
tjOrderList: [],
|
dialogVisible: false,
|
// 遮罩层
|
loading: true,
|
// 选中数组
|
ids: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
// 显示搜索条件
|
showSearch: true,
|
userId: "",
|
// 总条数
|
total: 0,
|
// 体检记录表格数据
|
orderList: [],
|
// 弹出层标题
|
title: "",
|
// 是否显示弹出层
|
open: false,
|
// 日期范围
|
datetimerange: [],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
name: null,
|
company: null,
|
reservationTime: null,
|
phoe: null,
|
},
|
// 表单参数
|
form: {
|
tjType: 2,
|
},
|
// 表单校验
|
rules: {},
|
pickerOptions: {
|
disabledDate(time) {
|
return time.getTime() > Date.now();
|
},
|
shortcuts: [
|
{
|
text: "今天",
|
onClick(picker) {
|
picker.$emit("pick", new Date());
|
},
|
},
|
{
|
text: "昨天",
|
onClick(picker) {
|
const date = new Date();
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
picker.$emit("pick", date);
|
},
|
},
|
{
|
text: "一周前",
|
onClick(picker) {
|
const date = new Date();
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
picker.$emit("pick", date);
|
},
|
},
|
],
|
},
|
};
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
/** 查询体检记录列表 */
|
getList() {
|
this.loading = true;
|
let token = user.state.token;
|
getselectTj(token).then((response) => {
|
this.orderList = response.rows;
|
response.rows.forEach((item, index) => {
|
item.newID =
|
(this.queryParams.pageNum - 1) * this.queryParams.pageSize +
|
index +
|
1;
|
});
|
this.total = response.total;
|
this.loading = false;
|
});
|
// 获取单位信息集合
|
getCompany(this.queryParam).then((response) => {
|
this.CompanyList = response.data;
|
});
|
},
|
// 取消按钮
|
cancel() {
|
this.open = false;
|
this.reset();
|
},
|
// 表单重置
|
reset() {
|
this.form = {
|
name: null,
|
company: null,
|
reservationTime: null,
|
phoe: null,
|
};
|
this.resetForm("form");
|
},
|
// 选框数据
|
searchSelect(val) {
|
this.CheckBox = val;
|
},
|
// 体检公司拼音搜索
|
getRemoteData(query) {
|
if (query) {
|
let compName = query;
|
queryCompany(compName).then((response) => {
|
this.CompanyList = response.data;
|
});
|
}
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
getselectTj(this.queryParams).then((response) => {
|
this.orderList = response.rows;
|
response.rows.forEach((item, index) => {
|
item.newID =
|
(this.queryParams.pageNum - 1) * this.queryParams.pageSize +
|
index +
|
1;
|
});
|
this.total = response.total;
|
this.loading = false;
|
});
|
},
|
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.resetForm("queryForm");
|
this.handleQuery();
|
},
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
this.ids = selection.map((item) => item.id);
|
this.single = selection.length !== 1;
|
this.multiple = !selection.length;
|
},
|
|
/** 订单流水按钮 */
|
handleUpdate(row) {
|
const tjNumber = row.tjNumber;
|
this.open = true;
|
getNumber(tjNumber).then((response) => {
|
// this.form = response.data;
|
this.numberList = response.data.charging;
|
this.bill = response.data.water;
|
this.title = "订单详情";
|
});
|
},
|
|
// 补录项目
|
handleProject(row) {
|
this.userId = row.userId;
|
if (row.tjType) {
|
this.form.tjType = parseInt(row.tjType);
|
} else {
|
this.form.tjType = 0;
|
}
|
/** 查询部门下拉树结构 */
|
projectGetList().then((response) => {
|
this.Treedata = response.data.list;
|
});
|
this.Projectopen = true;
|
},
|
// 点击获取每个树节点
|
handleCurrentChecked(data, checked, checkedNodes) {
|
if (!data.tjProjectList) {
|
return;
|
}
|
if (checked === true) {
|
this.DataList.push(data);
|
} else {
|
this.DataList.pop(data);
|
this.list1 = true;
|
}
|
|
this.TotalPrice1 = 0;
|
if (this.DataList.length != 0) {
|
this.list1 = false;
|
this.DataList.forEach((item) => {
|
this.TotalPrice1 = item.proPrice + this.TotalPrice1;
|
});
|
}
|
},
|
|
// 收费按钮
|
submitPrice() {
|
let userId = this.userId;
|
let tjType = this.form.tjType;
|
this.DataList.forEach((item) => {
|
item.tjProjectList.forEach((item1) => {
|
this.tjOrderList.push({
|
proName: item1.proName,
|
proPrice: item1.proPrice,
|
proId: item1.proId,
|
});
|
});
|
});
|
let copeWith = this.TotalPrice1;
|
let paidIn = copeWith * (this.discount / 100);
|
let discount = this.discount;
|
this.tjFlowingWater = { copeWith, paidIn, discount };
|
let data = {
|
tjOrderList: this.tjOrderList,
|
tjFlowingWater: this.tjFlowingWater,
|
userId,
|
tjType,
|
};
|
getOrder(data).then((res) => {
|
this.$modal.msgSuccess("提交成功");
|
this.Projectopen = false;
|
});
|
},
|
/** 导出按钮操作 */
|
handleExport() {
|
this.download(
|
"hosp/order/export",
|
{
|
...this.queryParams,
|
},
|
`order_${new Date().getTime()}.xlsx`
|
);
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
.pag {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
}
|
|
.pag1 {
|
width: 30%;
|
}
|
|
.main {
|
height: 700px;
|
overflow: hidden;
|
}
|
|
#printIframe::-webkit-scrollbar {
|
width: 6px;
|
}
|
|
/* 修改 滚动条的 下面 的 样式 */
|
#printIframe::-webkit-scrollbar-track {
|
background-color: white;
|
-webkit-border-radius: 2em;
|
-moz-border-radius: 2em;
|
border-radius: 2em;
|
}
|
|
/* 修改 滑块 */
|
#printIframe::-webkit-scrollbar-thumb {
|
background-color: #dcdfe6;
|
-webkit-border-radius: 2em;
|
-moz-border-radius: 2em;
|
border-radius: 2em;
|
}
|
|
// .el-dialog {
|
// width: 1000px;
|
// min-height: 800px;
|
// }
|
|
// .el-dialog__header {
|
// display: flex;
|
// justify-content: space-between;
|
// align-items: center;
|
// }
|
|
// .el-dialog__body {
|
// padding: 0;
|
// }
|
|
.tab1 {
|
width: 700px;
|
display: flex;
|
margin-top: 8px;
|
}
|
</style>
|
|
