|
|
<template>
|
|
|
<div v-if="detail">
|
|
|
<xy-dialog
|
|
|
ref="dialog"
|
|
|
:form="form"
|
|
|
:rules="rules"
|
|
|
:is-show.sync="isShow"
|
|
|
:width='84'
|
|
|
title="排班"
|
|
|
type="form"
|
|
|
@submit="submit"
|
|
|
@reset="pickType = 1,dateStartPick = '',dateEndPick = ''">
|
|
|
<template v-slot:extraFormTop>
|
|
|
<div :style="{
|
|
|
'display':'flex',
|
|
|
'align-items':'center',
|
|
|
'flex-wrap':'wrap',
|
|
|
'min-width':'380px'
|
|
|
}">
|
|
|
<el-form-item>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
性别：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="detail.sex" readonly style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
年龄：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input :value="ageComputed" readonly style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
身份证号：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input :value="detail.idcard" readonly style="width: 300px;"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
失能等级：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select v-model="detail.level_id" disabled placeholder="请选择失能等级" style="width: 300px">
|
|
|
<el-option v-for="item in levels" :key="item.id" :label="item.value" :value="item.id"></el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
备注：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input v-model="detail.remark" :autosize="{minRows:2}" placeholder="请输入备注" readonly
|
|
|
style="width: 300px;"
|
|
|
type="textarea"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:customer_id>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
客户：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select v-model="form.customer_id" disabled placeholder="请选择客户" style="width: 300px">
|
|
|
<el-option v-for="item in customers" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:product_id>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
产品：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select v-model="form.product_id" placeholder="请选择产品" style="width: 300px">
|
|
|
<el-option v-for="item in products" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:order_id>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
订单：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select v-model="form.order_id" placeholder="请选择订单" style="width: 300px">
|
|
|
<el-option v-for="item in orders" :key="item.id" :label="item.no" :value="item.id"></el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:extraFormBottom>
|
|
|
<el-calendar>
|
|
|
<template v-slot:dateCell="{date, data}">
|
|
|
|
|
|
<el-popover
|
|
|
:ref="`popover-${data.day}`"
|
|
|
placement="top"
|
|
|
trigger="click"
|
|
|
width="280">
|
|
|
<div
|
|
|
slot="reference"
|
|
|
:style="
|
|
|
{
|
|
|
'padding':'8px',
|
|
|
}"
|
|
|
:class="{
|
|
|
'date-select':isInDate(data.day)
|
|
|
}"
|
|
|
style="width: 100%;height: 100%"
|
|
|
@click="datePicked(data,date)">
|
|
|
{{ data.day.split('-').slice(1).join('-') }} {{ isInDate(data.day) ? '✔️' : '' }}
|
|
|
</div>
|
|
|
|
|
|
<template>
|
|
|
<div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
|
|
|
<template v-if="pickType === 1">
|
|
|
<el-time-select
|
|
|
style="width: 200px;margin-bottom: 10px"
|
|
|
v-model="form.start_time"
|
|
|
:picker-options="{
|
|
|
start: '00:00',
|
|
|
step: '00:5',
|
|
|
end: '23:59'
|
|
|
}"
|
|
|
placeholder="开始时间">
|
|
|
</el-time-select>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<el-time-select
|
|
|
style="width: 200px;margin-bottom: 10px"
|
|
|
v-model="form.end_time"
|
|
|
:picker-options="{
|
|
|
start: '00:00',
|
|
|
step: '00:5',
|
|
|
end: '23:59',
|
|
|
minTime: form.start_time
|
|
|
}"
|
|
|
placeholder="结束时间">
|
|
|
</el-time-select>
|
|
|
</template>
|
|
|
<el-select placeholder="请选择护工" v-model="form.nurse_id" style="width: 200px;margin-bottom: 10px">
|
|
|
<el-option
|
|
|
v-for="item in nurses"
|
|
|
:key="item.id"
|
|
|
:value="item.id"
|
|
|
:label="item.name"></el-option>
|
|
|
</el-select>
|
|
|
<div style="width: 200px;display: flex;justify-content: space-between;">
|
|
|
<Button ghost type="primary" @click="$refs[`popover-${data.day}`].doClose()">取消</Button>
|
|
|
<Button type="primary" @click="dateConfirm(data)">确认</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
</template>
|
|
|
</el-calendar>
|
|
|
</template>
|
|
|
</xy-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {customerDetail,scheduleSave} from '@/api/schedule'
|
|
|
|
|
|
export default {
|
|
|
props: {
|
|
|
customers: {
|
|
|
type: Array,
|
|
|
default: () => []
|
|
|
},
|
|
|
products: {
|
|
|
type: Array,
|
|
|
default: () => []
|
|
|
},
|
|
|
nurses: {
|
|
|
type: Array,
|
|
|
default: () => []
|
|
|
},
|
|
|
levels: {
|
|
|
type: Array,
|
|
|
default: () => []
|
|
|
},
|
|
|
orders:{
|
|
|
type: Array,
|
|
|
default: () => []
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
productId: '',
|
|
|
customerId: '',
|
|
|
isShow: false,
|
|
|
|
|
|
detail: {},
|
|
|
dateStartPick:'',
|
|
|
dateEndPick:'',
|
|
|
pickType:1,
|
|
|
form: {
|
|
|
customer_id: '',
|
|
|
product_id: '',
|
|
|
order_id: '',
|
|
|
start_time: '',
|
|
|
end_time: '',
|
|
|
nurse_id: '',
|
|
|
},
|
|
|
rules:{
|
|
|
product_id:[
|
|
|
{required:true,message:'请选择产品'}
|
|
|
],
|
|
|
order_id:[
|
|
|
{required:true,message:'请选择订单'}
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
async getCustomer() {
|
|
|
const res = await customerDetail({
|
|
|
product_id: this.form.product_id,
|
|
|
id: this.form.customer_id,
|
|
|
})
|
|
|
console.log(res)
|
|
|
this.detail = res.detail
|
|
|
},
|
|
|
|
|
|
dateConfirm(data){
|
|
|
if(this.pickType === 1){
|
|
|
this.pickType = 2
|
|
|
return
|
|
|
}
|
|
|
this.$refs[`popover-${data.day}`].doClose()
|
|
|
},
|
|
|
datePicked(data,date){
|
|
|
if(this.pickType === 1){
|
|
|
this.dateStartPick = data.day
|
|
|
}
|
|
|
if(this.pickType === 2){
|
|
|
this.dateEndPick = data.day
|
|
|
}
|
|
|
},
|
|
|
submit() {
|
|
|
this.form.start_time = `${this.dateStartPick} ${this.form.start_time}`
|
|
|
this.form.end_time = `${this.dateEndPick || this.dateStartPick} ${this.form.end_time}`
|
|
|
|
|
|
scheduleSave(this.form).then(res => {
|
|
|
this.$successMessage('排班','')
|
|
|
this.isShow = false
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
ageComputed() {
|
|
|
return new Date().getFullYear() - new Date(this.detail.birthday).getFullYear()
|
|
|
},
|
|
|
isInDate(){
|
|
|
return function (day){
|
|
|
let startTimer = new Date(this.dateStartPick).getTime()
|
|
|
let endTimer = new Date(this.dateEndPick).getTime()
|
|
|
let dayTimer = new Date(day).getTime()
|
|
|
return dayTimer >= startTimer && dayTimer <= endTimer
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
isShow(val) {
|
|
|
if (val) {
|
|
|
//this.getCustomer()
|
|
|
} else {
|
|
|
this.pickType = 1
|
|
|
this.dateEndPick = ''
|
|
|
this.dateStartPick = ''
|
|
|
this.$refs['dialog'].reset()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@import "../../../styles/index";
|
|
|
.date-select{
|
|
|
background: $primaryColor;
|
|
|
color: #fff;
|
|
|
}
|
|
|
::v-deep .el-calendar-day{
|
|
|
padding: 0 !important;
|
|
|
}
|
|
|
</style>
|
