NurseStationUI/src/views/system/order/index.vue
2023-04-06 17:22:54 +08:00

801 lines
26 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">
<div class="text">{{query.orderNo}}</div>
</el-form-item>
<el-form-item label="订单状态" prop="orderStatus">
<div class="text">{{switchOrderStatus(query.orderStatus)}}</div>
</el-form-item>
<el-form-item label="订单总金额" prop="totalPrice">
<div class="text">{{query.totalPrice}}</div>
</el-form-item>
<el-form-item label="订单数量" prop="orderCount">
<div class="text">{{query.orderCount}}</div>
</el-form-item>
<el-form-item label="护理项目名称" prop="nurseItemName">
<div class="text">{{query.nurseItemName}}</div>
</el-form-item>
<!-- <el-form-item label="护理员名称" prop="nursePersonName">
<div class="text">{{query.nursePersonName}}</div>
</el-form-item> -->
<el-form-item label="评价星级" prop="compositeScore">
<div class="text">{{query.compositeScore}}</div>
</el-form-item>
<el-form-item label="服务时间" prop="time">
<div class="text">{{query.time}}</div>
</el-form-item>
<el-form-item label="护理项目时长" prop="itemServeDurationUnit">
<div class="text">{{query.itemServeDurationUnit}}</div>
</el-form-item>
<el-form-item label="护理站名称" prop="nurseStationName">
<div class="text">{{query.nurseStationName}}</div>
</el-form-item>
<el-form-item label="服务地址" prop="serviceAddress">
<div
class="text"
style="height:100px;line-height:26px;overflow: scroll"
>{{query.serviceAddress}}</div>
</el-form-item>
<el-form-item label="是否失能" prop="disablingCondition">
<div class="text">{{query.disablingCondition}}</div>
</el-form-item>
<el-form-item label="失能情况" prop="disablingReason">
<div class="text">{{query.disablingReason}}</div>
</el-form-item>
<el-form-item label="健康状况" prop="diseaseName">
<div class="text">{{query.diseaseName}}</div>
</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.time = res.data.serviceDate + "-" + res.data.serviceStartTime;
this.query = res.data;
res.data.disablingCondition == "DISABLED"
? (res.data.disablingCondition = "失能")
: "";
res.data.disablingCondition == "NOT_DISABLED"
? (res.data.disablingCondition = "未失能")
: "";
if (row.orderStatus == "EVALUATED") {
if (res.data) {
if (res.data.evaluateSatisfaction == "COMMONLY") {
this.query.evaluateSatisfaction = "一般";
} else if (res.data.evaluateSatisfaction == "SATISFIED") {
this.query.evaluateSatisfaction = "满意";
} else if (res.data.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;
}
.text {
width: 250px;
height: 36px;
line-height: 36px;
padding-left: 15px;
font-size: 14px;
border-radius: 4px;
padding: 0 15px;
border: 1px solid #e6ebf5;
}
</style>