NurseStationUI/src/views/system/order/index.vue
2023-02-23 11:52:33 +08:00

952 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="100px"
>
<el-form-item label="所属护理站" prop="nurseStationName">
<el-select
v-model="queryParams.nurseStationId"
placeholder="请选择护理站"
@change="handleQuery"
>
<el-option
v-for="item in handstationlist"
:key="item.id"
:label="item.nurseStationName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="订单编号" prop="orderNo">
<el-input
v-model="queryParams.orderNo"
placeholder="请输入订单编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="订单状态" prop="orderStatus">
<el-select
v-model="queryParams.orderStatus"
placeholder="请选择订单状态"
>
<el-option
v-for="item in orderStatuslist"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="会员名称" prop="patientName">
<el-input
v-model="queryParams.patientName"
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-table
v-loading="loading"
:data="OrderDetailsList"
@selection-change="handleSelectionChange"
>
<el-table-column
label="所属护理站"
align="center"
prop="nurseStationName"
/>
<el-table-column label="订单编号" align="center" prop="orderNo" />
<el-table-column
label="护理项目名称"
align="center"
prop="nurseItemName"
/>
<el-table-column label="订单总金额" align="center" prop="totalPrice" />
<el-table-column label="订单状态" align="center" prop="orderStatus">
<template slot-scope="scope">
<el-button v-if="scope.row.orderStatus == 'WAIT_PAY'"
>待付款</el-button
>
<el-button type="primary" v-if="scope.row.orderStatus == 'PAY'"
>已付款</el-button
>
<el-button
type="primary"
v-if="scope.row.orderStatus == 'WAIT_DISPATCH'"
>待派单</el-button
>
<el-button type="primary" v-if="scope.row.orderStatus == 'NOT_FINISH'"
>未完成</el-button
>
<el-button type="primary" v-if="scope.row.orderStatus == 'COMPLETE'"
>待评价</el-button
>
<el-button type="success" v-if="scope.row.orderStatus == 'EVALUATED'"
>服务完成</el-button
>
<el-button
type="warning"
v-if="scope.row.orderStatus == 'WAIT_REFUND'"
>退款中</el-button
>
<el-button type="warning" v-if="scope.row.orderStatus == 'REFUNDED'"
>退款成功</el-button
>
<el-button type="danger" v-if="scope.row.orderStatus == 'CANCEL'"
>已取消</el-button
>
</template>
</el-table-column>
<el-table-column label="下单时间" align="center" prop="createTime" />
<el-table-column label="会员名称" align="center" prop="patientName" />
<el-table-column label="护理员" align="center" prop="nursePersonName" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-zoom-in"
@click="seeLook(scope.row)"
v-hasPermi="['system:appointmentOrder:query']"
>查看</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-s-promotion"
@click="dispatch(scope.row)"
v-hasPermi="['system:appointmentOrder:dispatch']"
v-if="scope.row.orderStatus == 'WAIT_DISPATCH'"
>派单</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-error"
v-if="scope.row.orderStatus == 'WAIT_REFUND'"
@click="cencel(scope.row)"
v-hasPermi="['system:appointmentOrder:confirmCancel']"
>取消预约</el-button
>
<!-- <el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:nurseType:remove']"
>删除</el-button
> -->
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 查看弹框 -->
<el-dialog
title="查看预约订单信息"
:visible.sync="innerVisible4"
append-to-body
width="1280px"
>
<el-form
:inline="true"
ref="form"
:model="query"
:rules="rules"
label-width="130px"
>
<el-form-item label="订单编号" prop="orderNo">
<el-input v-model="query.orderNo" disabled style="width: 250px" />
</el-form-item>
<el-form-item label="订单状态" prop="orderStatus">
<el-input
:value="switchOrderStatus(query.orderStatus)"
style="width: 250px"
disabled
>
</el-input>
</el-form-item>
<el-form-item label="订单总金额" prop="totalPrice">
<el-input v-model="query.totalPrice" disabled style="width: 250px" />
</el-form-item>
<el-form-item label="订单数量" prop="orderCount">
<el-input v-model="query.orderCount" disabled style="width: 250px" />
</el-form-item>
<el-form-item label="护理项目名称" prop="nurseItemName">
<el-input
v-model="query.nurseItemName"
disabled
style="width: 250px"
/>
</el-form-item>
<el-form-item label="服务时间" prop="time">
<el-input v-model="query.time" disabled style="width: 250px" />
</el-form-item>
<el-form-item label="护理项目时长" prop="itemServeDurationUnit">
<el-input
v-model="query.itemServeDurationUnit"
disabled
style="width: 250px"
/>
</el-form-item>
<el-form-item label="护理站名称" prop="nurseStationName">
<el-input
v-model="query.nurseStationName"
disabled
style="width: 250px"
/>
</el-form-item>
<el-form-item label="服务地址" prop="serviceAddress">
<el-input
v-model="query.serviceAddress"
disabled
style="width: 250px"
/>
</el-form-item>
<el-form-item
label="服务到岗照片"
prop="onDutyPictureUrl"
v-if="
query.orderStatus == 'COMPLETE' || query.orderStatus == 'EVALUATED'
"
>
<img class="img" :src="baseurl + query.onDutyPictureUrl" alt="" />
</el-form-item>
<el-form-item
label="服务结束照片"
prop="serviceEndPictureUrl"
v-if="
query.orderStatus == 'COMPLETE' || query.orderStatus == 'EVALUATED'
"
>
<img class="img" :src="baseurl + query.serviceEndPictureUrl" alt="" />
</el-form-item>
<el-form-item
label="用户确认签名"
prop="userSignaturePictureUrl"
v-if="
query.orderStatus == 'COMPLETE' || query.orderStatus == 'EVALUATED'
"
>
<img
class="img"
:src="baseurl + query.userSignaturePictureUrl"
alt=""
/>
</el-form-item>
<el-form-item
label="评价满意度"
prop="evaluateSatisfaction"
v-if="query.orderStatus == 'EVALUATED'"
>
<el-input
v-model="query.evaluateSatisfaction"
disabled
style="width: 250px"
/>
</el-form-item>
<el-table
:data="query.appointmentOrderConsumableList"
align="center"
style="margin: 10px 0 20px 0; padding-bottom: 20px"
>
<el-table-column
prop="orderConsumableName"
label="耗材包名称"
align="center"
>
</el-table-column>
<el-table-column
prop="orderConsumableCount"
label="耗材包数量"
align="center"
>
</el-table-column>
<el-table-column
prop="orderConsumablePrice"
label="耗材包价格"
align="center"
>
</el-table-column>
</el-table>
<el-form-item
label="预约服务位置"
v-if="
query.orderStatus == 'COMPLETE' || query.orderStatus == 'EVALUATED'
"
>
<el-input
v-model="query.serviceLocationName"
disabled
style="width: 250px"
/>
</el-form-item>
</el-form>
<div
id="container"
v-if="
this.query.orderStatus == 'COMPLETE' ||
this.query.orderStatus == 'EVALUATED'
"
></div>
</el-dialog>
<!-- 派单弹框 -->
<el-dialog
title="派单"
:visible.sync="innerdispatch"
append-to-body
width="500px"
height="100px"
>
<el-form ref="form" :model="form" :rules="rules" label-width="130px">
<el-form-item label="护理员姓名" prop="nursePersonName">
<el-button
type=""
v-if="nurseName == '请选择护理员'"
style="width: 300px; text-align: left; height: 36px; color: #c0c4cc"
@click="clicknursePersonName()"
>{{ nurseName }}</el-button
>
<el-button
type=""
@click="clicknursePersonName()"
v-else
style="
width: 300px;
text-align: left;
height: 36px;
padding-left: -10px;
"
>{{ nurseName }}</el-button
>
</el-form-item>
<!-- <el-button
type=""
@click="departclick(item, index)"
v-else
style="
width: 200px;
text-align: left;
height: 36px;
padding-left: -10px;
"
>{{ item.departmentName }}</el-button
> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<!-- <el-button @click="cancel">取 消</el-button> -->
</div>
</el-dialog>
<!-- 取消预约弹框 -->
<el-dialog
title="取消预约"
:visible.sync="innerrefund"
append-to-body
width="500px"
>
<el-form :inline="true" :rules="rules" label-width="120px">
<el-form-item label="订单编号" prop="orderNo">
<el-input
style="width: 260px"
v-model="query.orderNo"
clearable
:disabled="true"
/>
</el-form-item>
<el-form-item label="服务项目" prop="nurseItemName">
<el-input
v-model="query.nurseItemName"
style="width: 260px"
clearable
:disabled="true"
/>
</el-form-item>
<el-form-item label="会员姓名" prop="patientName">
<el-input
v-model="query.patientName"
style="width: 260px"
clearable
:disabled="true"
/>
</el-form-item>
<el-form-item label="退款原因" prop="cancelAppointmentReason">
<el-input
style="width: 260px"
v-model="query.cancelAppointmentReason"
placeholder=""
clearable
type="textarea"
:rows="5"
disabled
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cencelbtn">取 消</el-button>
<el-button type="primary" @click="ordercacenl">确 定</el-button>
</div>
</el-dialog>
<!-- 姓名弹框 -->
<el-dialog
:visible.sync="nursePersonNameinfo"
width="1000px"
append-to-body
>
<el-form
ref="queryForm"
:model="querynursePersonname"
:rules="rules"
label-width="80px"
:inline="true"
>
<el-form-item label="姓名" prop="nursePersonName" label-width="120">
<el-input
v-model="querynursePersonname.nursePersonName"
placeholder="请输入姓名"
clearable
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery2"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery2"
>重置</el-button
>
</el-form-item>
</el-form>
<el-table :data="dispatchlist" @cell-dblclick="nursePersonclick">
<el-table-column label="请选择" width="70" align="center">
<template slot-scope="scope">
<el-button
type="primary"
style="width: 15px; height: 15px; overflow: hidden"
v-if="nursePersonid == scope.row.nurseStationPersonId"
circle
@click="nursePersonclick(scope.row)"
></el-button>
<el-button
v-else
style="width: 15px; height: 15px; overflow: hidden"
circle
@click="nursePersonclick(scope.row)"
></el-button>
</template>
</el-table-column>
<el-table-column
property="nursePersonCode"
label="护理员编号"
width="150"
align="center"
>
</el-table-column>
<el-table-column
property="nursePersonName"
label="护理站人员姓名"
width="150"
align="center"
>
</el-table-column>
<el-table-column
property="nursePersonType"
label="护理站人员类型"
width="150"
align="center"
>
<template slot-scope="scope">
{{ scope.row.nursePersonType == "NURSE" ? "护士" : "" }}
{{ scope.row.nursePersonType == "NURSE_TEACHER" ? "护理师" : "" }}
</template>
</el-table-column>
<el-table-column
property="phone"
label="手机号"
width="150"
align="center"
>
</el-table-column>
<el-table-column label="性别" align="center" prop="sex">
<template slot-scope="scope">
{{ scope.row.sex == "MALE" ? "" : "" }}
{{ scope.row.sex == "FEMALE" ? "" : "" }}
</template>
</el-table-column>
</el-table>
<pagination
v-show="total2 > 0"
:total="total2"
:page.sync="querynursePersonname.pageNum"
:limit.sync="querynursePersonname.pageSize"
@pagination="handleQuery2"
/>
</el-dialog>
</div>
</template>
<script>
import {
appointmentOrderDetailsList,
Detailed,
deldetailed,
getPerson,
dispatchsubmit,
xylWeChatRefundNotify,
appointmentOrderDetails,
} from "@/api/system/order";
import { getListByUser } from "@/api/system/userlist.js";
import baseurl from "@/api/baseurl.js";
export default {
name: "order",
data() {
return {
map: null,
baseurl: null,
orderStatuslist: [
{
value: "WAIT_PAY",
label: "待付款",
},
{
value: "PAY",
label: "已付款",
},
{
value: "WAIT_DISPATCH",
label: "待派单",
},
{
value: "NOT_FINISH",
label: "未完成",
},
{
value: "COMPLETE",
label: "待评价",
},
{
value: "EVALUATED",
label: "服务完成",
},
{
value: "WAIT_REFUND",
label: "退款中",
},
{
value: "REFUNDED",
label: "退款成功",
},
{
value: "CANCEL",
label: "已取消",
},
],
value: "",
// 遮罩层
loading: true,
innerVisible4: false,
innerrefund: false,
// 派单弹框
innerdispatch: false,
// 姓名弹框
nursePersonNameinfo: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
input: "",
// 总条数
total: 0,
// 护理类型信息表格数据
OrderDetailsList: [],
handstationlist: [], //页面搜索list
dispatchlist: [],
nurseName: "请选择护理员",
nursePersonid: "",
// querynursecencel:{
// appointmentOrderId:"",
// },
appointmentOrderId: "",
nurseStationPersonId: "",
total2: 0,
nurseStationlist: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
open2: false,
// 查询参数
queryParams: {
patientName: null,
orderNo: null,
nurseStationId: null,
// orderStatus: null,
orderStatus: "",
pageNum: 1,
pageSize: 10,
},
querynursePersonname: {
orderNo: "",
nursePersonName: null,
nursePersonType: null,
departmentName: null,
pageNum: 1,
pageSize: 10,
},
query: [],
// 表单参数
form: {},
// 表单校验
rules: {},
};
},
created() {
this.baseurl = baseurl;
this.info();
this.infos();
},
methods: {
init(query) {
this.map = new AMap.Map("container", {
resizeEnable: true, //设置地图可缩放
zoom: 18, //设置地图的层级
center: [query.serveLocationLongitude, query.serveLocationLatitude], //设置地图中心点 更多配置项参照高德官网的配置
});
var layer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
// 开启标注避让默认为开启v1.4.15 新增属性
collision: true,
// 开启标注淡入动画默认为开启v1.4.15 新增属性
animation: true,
});
this.map.add(layer);
var labelMarker = new AMap.LabelMarker({
name: "",
position: [query.serveLocationLongitude, query.serveLocationLatitude],
icon: {
type: "image",
image: "https://a.amap.com/jsapi_demos/static/images/poi-marker.png",
clipOrigin: [280, 8],
clipSize: [50, 68],
size: [25, 34],
anchor: "bottom-center",
angel: 0,
retina: true,
},
text: {
content: query.serviceLocationName,
direction: "top",
offset: [0, 0],
style: {
fontSize: 13,
fontWeight: "normal",
fillColor: "#fff",
padding: "2, 5",
backgroundColor: "#22884f",
},
},
});
layer.add(labelMarker);
},
//取消预约确定按钮
ordercacenl() {
var obj = {
orderNo: this.query.orderNo,
refundPrice: this.query.totalPrice,
refundReason: this.query.cancelAppointmentReason,
};
xylWeChatRefundNotify(obj).then((res) => {
if (res.code == 200) {
this.$modal.msgSuccess("退款有延迟,请耐心等待");
}
this.getList();
this.innerrefund = false;
console.log(res);
});
},
// 取消按钮
cencelbtn() {
this.innerrefund = false;
},
switchOrderStatus(orderStatus) {
switch (orderStatus) {
case "WAIT_PAY":
return "待付款";
case "PAY":
return "已付款";
case "WAIT_DISPATCH":
return "待派单";
case "NOT_FINISH":
return "未完成";
case "COMPLETE":
return "待评价";
case "EVALUATED":
return "服务完成";
case "WAIT_REFUND":
return "退款中";
case "REFUNDED":
return "退款成功";
case "CANCEL":
return "已取消";
default:
break;
}
},
// 查看
seeLook(row) {
this.loading = true;
const id = row.orderNo;
this.map = null;
appointmentOrderDetails(id).then((res) => {
res.data.forEach((e) => {
if (e.serviceDate) {
e.time =
e.serviceDate + "-" + e.serviceStartTime + "-" + e.serviceEndTime;
}
});
this.query = res.data[0];
if (row.orderStatus == "EVALUATED") {
if (res.data) {
if (res.data[0].evaluateSatisfaction == "COMMONLY") {
this.query.evaluateSatisfaction = "一般";
} else if (res.data[0].evaluateSatisfaction == "SATISFIED") {
this.query.evaluateSatisfaction = "满意";
} else if (res.data[0].evaluateSatisfaction == "DISSATISFIED") {
this.query.evaluateSatisfaction = "不满意";
}
this.loading = false;
this.innerVisible4 = true;
setTimeout(() => {
this.init(this.query);
}, 500);
} else {
this.loading = false;
this.innerVisible4 = true;
setTimeout(() => {
this.init(this.query);
}, 500);
}
} else if (row.orderStatus == "COMPLETE") {
this.loading = false;
this.innerVisible4 = true;
setTimeout(() => {
this.init(this.query);
}, 500);
} else {
this.loading = false;
this.innerVisible4 = true;
}
});
},
// 派单
dispatch(row) {
this.querynursePersonname.orderNo = row.orderNo;
this.nurseName = "请选择护理员";
this.innerdispatch = true;
this.nursePersonid = "";
},
// 姓名弹框
clicknursePersonName() {
getPerson(this.querynursePersonname).then((res) => {
this.dispatchlist = res.rows;
this.total2 = res.total;
console.log(this.dispatchlist);
this.nursePersonNameinfo = true;
});
},
// 姓名弹框确定按钮
submitForm() {
let params = {
nurseStationPersonId: this.nursePersonid,
orderNo: this.querynursePersonname.orderNo,
};
dispatchsubmit(params).then((res) => {
if (res.code == 200) {
this.$modal.msgSuccess("派单成功");
}
this.innerdispatch = false;
this.getList();
this.nurseName = "请选择护理员";
});
},
// 选择姓名按钮
nursePersonclick(row) {
this.nursePersonid = row.nurseStationPersonId;
this.nurseName = row.nursePersonName;
this.nursePersonNameinfo = false;
console.log(row);
},
// 确认取消预约
cencel(row) {
Detailed(row.orderNo).then((res) => {
this.query = res.data;
this.innerrefund = true;
});
},
/** 查询护理类型信息列表 */
getList() {
this.loading = true;
appointmentOrderDetailsList(this.queryParams).then((response) => {
this.OrderDetailsList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
patientName: "",
orderNo: "",
orderStatus: "",
createTime: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
handleQuery2() {
getPerson(this.querynursePersonname).then((res) => {
this.dispatchlist = res.rows;
console.log(this.querynursePersonname);
// this.innerdispatch = true;
});
},
/** 重置按钮操作 */
resetQuery() {
if (this.nurseStationlist[0]) {
this.queryParams.pageNum = 1;
this.queryParams.pageSize = 10;
this.queryParams.patientName = null;
this.queryParams.orderNo = null;
this.queryParams.orderStatus = null;
}
// this.queryParams = {
// pageNum: 1,
// pageSize: 10,
// // nurseStationId:null,
// patientName:null,
// orderNo:null,
// orderStatus:null,
// };
this.handleQuery();
},
//权限列表
info() {
getListByUser(this.queryParams).then((res) => {
this.total = res.total;
this.nurseStationlist = res.rows;
this.queryParams.nurseStationId = res.rows[0].id;
this.getList();
// this.handleQuery();
});
},
infos() {
var queryFor = {
pageNum: 1,
pageSize: 9999,
};
getListByUser(queryFor).then((res) => {
console.log(res);
this.handstationlist = res.rows;
});
},
resetQuery2() {
this.resetForm("queryForm");
this.handleQuery2();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 删除按钮操作 */
handleDelete(row) {
// console.log('row :>> ', row);
this.$confirm("是否确认删除订单信息的数据项?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deldetailed(row.appointmentOrderId).then((res) => {
this.$message.success("删除成功");
this.getList();
});
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/nurseType/export",
{
...this.queryParams,
},
`nurseType_${new Date().getTime()}.xlsx`
);
},
},
};
</script>
<style scoped>
.img {
width: 250px;
height: 250px;
}
#container {
width: 100%;
height: 600px;
}
</style>