You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
547 lines
14 KiB
547 lines
14 KiB
<template>
|
|
<div>
|
|
<div ref="lxHeader">
|
|
<lx-header
|
|
icon="md-apps"
|
|
style="margin-bottom: 10px; border: 0px; margin-top: 15px"
|
|
text="服务明细视图"
|
|
>
|
|
<div slot="content"></div>
|
|
<slot>
|
|
<div style="display: flex">
|
|
<el-select
|
|
filterable
|
|
size="small"
|
|
v-model="select.nurse_name"
|
|
placeholder="选择护理人姓名"
|
|
clearable
|
|
style="width: 160px;margin-right: 10px;"
|
|
>
|
|
<el-option
|
|
v-for="item in nurses"
|
|
:value="item.name"
|
|
:label="item.name"
|
|
:key="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
<el-select
|
|
filterable
|
|
size="small"
|
|
v-model="select.customer_name"
|
|
placeholder="选择被护理人"
|
|
clearable
|
|
style="width: 160px;margin-right: 10px;"
|
|
>
|
|
<el-option
|
|
v-for="item in customers"
|
|
:value="item.name"
|
|
:label="item.name"
|
|
:key="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
<el-date-picker v-model="pickedMonth" placeholder="选择月份" type="month" size="small" style="width: 160px;margin-right: 10px;" @change="pickMonth">
|
|
</el-date-picker>
|
|
<el-select
|
|
size="small"
|
|
v-model="select.status"
|
|
placeholder="选择状态"
|
|
clearable
|
|
style="width: 160px;margin-right: 10px;"
|
|
>
|
|
<el-option
|
|
v-for="item in [{value:0,label:'待护理'},{value:1,label:'护理中'},{value:2,label:'已护理'}]"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
:key="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
<!-- <Input-->
|
|
<!-- v-model="select.keyword"-->
|
|
<!-- placeholder="关键字搜索"-->
|
|
<!-- style="width: 180px; margin-right: 10px"-->
|
|
<!-- />-->
|
|
<Button
|
|
style="margin-right: 10px"
|
|
type="primary"
|
|
@click="total = 0,(select.page = 1), getList()"
|
|
>查询</Button
|
|
>
|
|
<xy-selectors @search="(select.page = 1), getList()" @reset="reset">
|
|
<template>
|
|
<div class="select-item">
|
|
<div class="select-item__label">地址</div>
|
|
<el-input size="small" v-model="select.address_name" placeholder="请输入地址" style="width: 200px;"></el-input>
|
|
</div>
|
|
|
|
<div class="select-item">
|
|
<div class="select-item__label">实际签到开始时间</div>
|
|
<el-date-picker
|
|
size="small"
|
|
v-model="select.start_sign_in"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd hh:mm:ss"
|
|
placeholder="选择实际签到开始时间"
|
|
style="width: 200px"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
|
|
<div class="select-item">
|
|
<div class="select-item__label">实际签到结束时间</div>
|
|
<el-date-picker
|
|
size="small"
|
|
v-model="select.end_sign_in"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd hh:mm:ss"
|
|
placeholder="选择实际签到结束时间"
|
|
style="width: 200px"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
|
|
<div class="select-item">
|
|
<div class="select-item__label">计划签到开始时间</div>
|
|
<el-date-picker
|
|
size="small"
|
|
v-model="select.start_start_time"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd hh:mm:ss"
|
|
placeholder="选择计划签到开始时间"
|
|
style="width: 200px"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
|
|
<div class="select-item">
|
|
<div class="select-item__label">计划签到结束时间</div>
|
|
<el-date-picker
|
|
size="small"
|
|
v-model="select.end_start_time"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd hh:mm:ss"
|
|
placeholder="选择计划签到结束时间"
|
|
style="width: 200px"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
</template>
|
|
</xy-selectors>
|
|
|
|
<Button
|
|
style="margin-right: 10px"
|
|
type="primary"
|
|
@click="exports"
|
|
>导出</Button
|
|
>
|
|
</div>
|
|
</slot>
|
|
</lx-header>
|
|
</div>
|
|
|
|
<xy-table
|
|
:row-style="tableRowStyle"
|
|
:default-expand-all="false"
|
|
:list="list"
|
|
:table-item="table"
|
|
:total="total"
|
|
@pageIndexChange="
|
|
(e) => {
|
|
select.page = e;
|
|
getList();
|
|
}
|
|
"
|
|
@pageSizeChange="
|
|
(e) => {
|
|
select.page = 1;
|
|
select.page_size = e;
|
|
getList();
|
|
}
|
|
"
|
|
>
|
|
<template v-slot:btns>
|
|
<el-table-column label="操作" fixed="right" align="center" width="130">
|
|
<template v-slot:default="scope">
|
|
<Poptip
|
|
transfer
|
|
confirm
|
|
title="确认要删除?"
|
|
@on-ok="destroy(scope.row)"
|
|
>
|
|
<Button size="small" type="error" ghost style="margin-right: 6px"
|
|
>删除</Button
|
|
>
|
|
</Poptip>
|
|
<Button
|
|
size="small"
|
|
ghost
|
|
type="primary"
|
|
style="margin-right: 6px"
|
|
@click="e => {
|
|
selectedRow = scope.row;
|
|
$refs['draw'].select.id = scope.row.id;
|
|
$refs['draw'].isShow = true;
|
|
}"
|
|
>查看</Button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
</xy-table>
|
|
|
|
<draw ref="draw" :type="2" @refresh="getList"></draw>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { scheduleDelete } from "@/api/schedule/index"
|
|
import { getList as customerIndex } from "@/api/customer"
|
|
import { scheduleList } from "@/api/schedule";
|
|
import { getList as nurseList} from "@/api/worker"
|
|
import { download } from "@/utils/downloadRequest"
|
|
|
|
import draw from "./component/serveDraw.vue"
|
|
export default {
|
|
components:{
|
|
draw
|
|
},
|
|
provide(){
|
|
return {
|
|
selectedRow:() => this.selectedRow
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
pickedMonth:new Date(),
|
|
selectedRow:{},
|
|
customers:[],
|
|
nurses:[],
|
|
select: {
|
|
page: 1,
|
|
page_size: 10,
|
|
nurse_name:"",
|
|
customer_name:"",
|
|
address_name:"",
|
|
start_sign_in:"",
|
|
end_sign_in:"",
|
|
start_start_time:"",
|
|
end_start_time:"",
|
|
status:"",
|
|
is_export:0
|
|
},
|
|
list: [],
|
|
table: [
|
|
{
|
|
type:'index',
|
|
label:'序号',
|
|
width:54,
|
|
fixed:'left'
|
|
},
|
|
{
|
|
prop:'customer.name',
|
|
label:'被护理人',
|
|
width:118,
|
|
fixed:'left'
|
|
},
|
|
{
|
|
prop:'nurse.name',
|
|
label:'护理人',
|
|
width:118,
|
|
fixed:'left'
|
|
},
|
|
{
|
|
prop:'status_text',
|
|
label:'状态',
|
|
width:120
|
|
},
|
|
{
|
|
label:'计划时间',
|
|
width:200,
|
|
customFn:row => {
|
|
return (
|
|
<div>{this.$moment(row.start_time).format('YYYY-MM-DD HH:mm')} ~ {this.$moment(row.end_time).format('HH:mm')}</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
prop:'sign_in',
|
|
label:'签到时间',
|
|
width:180
|
|
},
|
|
{
|
|
prop:'sign_out',
|
|
label:'签退时间',
|
|
width: 180
|
|
},
|
|
{
|
|
prop:'customer_address.name',
|
|
label:'上门地址',
|
|
minWidth:220,
|
|
align:'left'
|
|
},
|
|
{
|
|
width: 140,
|
|
label:'实际服务时间',
|
|
customFn:row => {
|
|
const getTime = () => {
|
|
if(row.sign_out && row.sign_in){
|
|
let seconds = this.$moment(row.sign_out).diff(row.sign_in,'seconds')
|
|
let point = seconds % 60
|
|
let min = parseInt(seconds / 60)
|
|
return `${min}分钟${point}秒`
|
|
}else{
|
|
return 0
|
|
}
|
|
}
|
|
return (
|
|
<span>{ getTime() }</span>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
label:'勾选的服务时长',
|
|
width: 140,
|
|
customFn:row => {
|
|
return (
|
|
<span>{ (() => {
|
|
let total = 0;
|
|
row.sku.forEach(item => {
|
|
total += Number(item.time) ?? 0
|
|
})
|
|
return total;
|
|
})() }</span>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
label:"勾选的服务明细",
|
|
minWidth: 200,
|
|
align: 'left',
|
|
customFn:row => {
|
|
return (
|
|
<div>
|
|
{ row.sku.map((item,index) => {
|
|
return (
|
|
<span>{ item.sku_info.name }{index === row.sku.length - 1 ? '' : ','}</span>
|
|
)
|
|
}) }
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
label:'已服务明细',
|
|
minWidth: 400,
|
|
customFn:row => {
|
|
return (
|
|
<div class="sku" style={
|
|
{
|
|
'display':'flex',
|
|
'flex-wrap':'wrap'
|
|
}
|
|
}>
|
|
{
|
|
(
|
|
() => {
|
|
let arr = [];
|
|
row?.sku?.forEach(item => {
|
|
if(item.time){
|
|
arr.push((
|
|
<div class="sku-item">
|
|
<div class="sku-item__name">
|
|
{ item.sku_info.name }
|
|
</div>
|
|
<div class="sku-item__time">
|
|
{ item.time || 0 }
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
})
|
|
return arr;
|
|
}
|
|
)()
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
prop:'product.name',
|
|
label:'产品',
|
|
width: 180
|
|
},
|
|
{
|
|
prop:'sign_in_address',
|
|
label:'签到地址',
|
|
minWidth: 220,
|
|
align:'left'
|
|
},
|
|
{
|
|
prop:'sign_out_address',
|
|
label:'签退地址',
|
|
minWidth: 220,
|
|
align:'left'
|
|
},
|
|
{
|
|
prop:'customer.area_detail.value',
|
|
label:'区',
|
|
width: 160
|
|
},
|
|
{
|
|
prop:'customer.street_detail.value',
|
|
label:'街道（镇）',
|
|
width: 160
|
|
},
|
|
{
|
|
prop:'created_at',
|
|
label:'创建日期',
|
|
width:180
|
|
},
|
|
{
|
|
prop:'admin.name',
|
|
label:'创建人',
|
|
width: 140
|
|
}
|
|
],
|
|
total: 0,
|
|
};
|
|
},
|
|
methods: {
|
|
tableRowStyle({row, rowIndex}){
|
|
let selectTime = row.sku.reduce((pre,cur) => {
|
|
return pre + Number(cur.time ?? 0)
|
|
},0)
|
|
let actTime = Math.round( this.$moment(row.sign_out).diff(row.sign_in,'seconds') / 60)
|
|
|
|
if(Math.abs(selectTime - actTime) <= 5){
|
|
return
|
|
}
|
|
if(Math.abs(selectTime - actTime) <= 10 && Math.abs(selectTime - actTime) > 5){
|
|
return {
|
|
'background':'rgb(255,227,150)'
|
|
}
|
|
}
|
|
if(Math.abs(selectTime - actTime) > 10){
|
|
return {
|
|
'background':'rgb(253,165,122)'
|
|
}
|
|
}
|
|
},
|
|
pickMonth(e){
|
|
if(e){
|
|
this.select.start_start_time = this.$moment(e).startOf('month').format('YYYY-MM-DD HH:mm:ss')
|
|
this.select.end_start_time = this.$moment(e).endOf('month').format('YYYY-MM-DD HH:mm:ss')
|
|
}else{
|
|
this.select.start_start_time = ''
|
|
this.select.end_start_time = ''
|
|
}
|
|
},
|
|
|
|
destroy(row){
|
|
scheduleDelete({id:row.id}).then(res => {
|
|
this.$message({
|
|
type:'success',
|
|
message:'删除成功'
|
|
})
|
|
this.getList()
|
|
})
|
|
},
|
|
async getCustomers(){
|
|
const res = await customerIndex({
|
|
page:1,
|
|
page_size:999
|
|
})
|
|
this.customers = res.data.data
|
|
},
|
|
async getNurses(){
|
|
const res = await nurseList({
|
|
page:1,
|
|
page_size:999
|
|
})
|
|
this.nurses = res.data
|
|
},
|
|
async getList() {
|
|
const res = await scheduleList(this.select)
|
|
this.list = res.list.data
|
|
this.total = res.list.total
|
|
},
|
|
|
|
exports(){
|
|
download('/api/admin/chart/schedule-list-log','get',{
|
|
page: 1,
|
|
page_size: 9999,
|
|
status:this.select.status,
|
|
nurse_name:this.select.nurse_name,
|
|
customer_name:this.select.customer_name,
|
|
address_name:this.select.address_name,
|
|
start_sign_in:this.select.start_sign_in,
|
|
end_sign_in:this.select.end_sign_in,
|
|
start_start_time:this.select.start_start_time,
|
|
end_start_time:this.select.end_start_time,
|
|
is_export:1
|
|
},`服务明细.xlsx`)
|
|
},
|
|
|
|
reset() {
|
|
this.select = {
|
|
page: 1,
|
|
page_size: 10,
|
|
nurse_name:"",
|
|
customer_name:"",
|
|
address_name:"",
|
|
start_sign_in:"",
|
|
end_sign_in:"",
|
|
start_start_time:"",
|
|
end_start_time:"",
|
|
status:"",
|
|
is_export:0
|
|
}
|
|
},
|
|
},
|
|
computed: {},
|
|
created() {
|
|
this.pickMonth(new Date())
|
|
this.getNurses()
|
|
this.getCustomers()
|
|
this.getList()
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.select-item{
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&__label{
|
|
width: 140px;
|
|
padding: 10px 10px;
|
|
}
|
|
}
|
|
|
|
.sku{
|
|
&-item{
|
|
border: 1px solid $primaryColor;
|
|
border-radius: 4px;
|
|
|
|
margin-bottom: 4px;
|
|
margin-right: 6px;
|
|
&__name{
|
|
background: $primaryColor;
|
|
color:#fff;
|
|
|
|
padding: 0 4px;
|
|
}
|
|
&__time{
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<style>
|
|
.has-time{
|
|
z-index:9998 !important;
|
|
}
|
|
</style>
|