<template>
|
<div class="appointment">
|
<el-container>
|
<el-header>
|
<el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="add">新增预约</el-button>
|
</el-header>
|
<el-main>
|
<el-table :data="records" :max-height='534'>
|
<el-table-column type="index" width="50" label=" "></el-table-column>
|
<el-table-column
|
v-for="(item, index) in tableHeader"
|
:key="index"
|
:prop="item.prop"
|
:label="item.label"
|
:width="item.width"
|
:align="item.align || 'left'"
|
:fixed="item.fixed || false"
|
>
|
<div slot-scope="scope">
|
<div v-if="scope.row.status === 1 || scope.row.status === 2">
|
<p v-if="item.prop === 'actionItem'">
|
<el-button type="text" @click="toSave(scope.row, item.prop)">保存</el-button>
|
<el-button type="text" @click="delContractReservation(scope.row, item.prop)">删除</el-button>
|
</p>
|
<p v-else-if="item.prop === 'reservationdate' || item.prop === 'inputtime'">
|
<span
|
v-if="item.prop === 'inputuserName' || item.prop === 'inputtime'"
|
>{{scope.row[item.prop]}}</span>
|
<el-date-picker
|
@input="updateValue($event, scope.row, item.prop)"
|
:value="scope.row[item.prop]"
|
v-else
|
type="date"
|
placeholder="选择日期"
|
></el-date-picker>
|
</p>
|
<p v-else-if="item.prop === 'reservationtime'">
|
<el-time-picker
|
@input="updateValue($event, scope.row, item.prop)"
|
:value="scope.row[item.prop]"
|
type="date"
|
placeholder="选择时间"
|
value-format="HH:mm:ss"
|
></el-time-picker>
|
</p>
|
<p v-else>
|
<span
|
v-if="item.prop === 'inputuserName' || item.prop === 'inputtime'"
|
>{{scope.row[item.prop]}}</span>
|
<el-input
|
@input="updateValue($event, scope.row, item.prop)"
|
v-else
|
:value="scope.row[item.prop]"
|
:maxlength="item.maxLength || 100"
|
placeholder="请输入内容"
|
></el-input>
|
</p>
|
</div>
|
<div v-else>
|
<p v-if="item.prop === 'actionItem'">
|
<el-button type="text" @click="toEdit(scope.row, item.prop)">修改</el-button>
|
<el-button type="text" @click="delContractReservation(scope.row, item.prop)">删除</el-button>
|
</p>
|
<p v-else>{{ scope.row[item.prop] }}</p>
|
</div>
|
</div>
|
</el-table-column>
|
</el-table>
|
</el-main>
|
</el-container>
|
</div>
|
</template>
|
<script>
|
/**
|
* 预约
|
*/
|
import {
|
getAppointList,
|
saveContractReservationList,
|
delContractReservation
|
} from '@comprehensive/serve/public'
|
import { appointmentHeader } from '@comprehensive/utils/tableHeaders'
|
|
export default {
|
props: {
|
serialNo: {
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
records: [],
|
loading: false,
|
pageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
tableHeader: [...appointmentHeader],
|
requiredList: [
|
{ prop: 'reservationdate', label: '预约日期' },
|
{ prop: 'reservationtime', label: '预约时间' },
|
{ prop: 'reservationplace', label: '预约地点' },
|
{
|
prop: 'reservationrelativeman',
|
label: '预约相关人'
|
}
|
]
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
init() {
|
this.getAppointList()
|
},
|
|
async getAppointList() {
|
const { serialNo, pageInfo } = this
|
this.loading = true
|
const res = await getAppointList({
|
objectno: serialNo,
|
...pageInfo
|
})
|
this.loading = false
|
const { records, total } = res.result
|
this.pageInfo.total = total
|
this.records = records.reduce((pre, curr) => {
|
pre.push({
|
...curr,
|
buttons: ['修改', '删除']
|
})
|
return pre
|
}, [])
|
},
|
|
add() {
|
const { serialNo } = this
|
this.records.push({
|
inputtime: '',
|
objectno: serialNo,
|
reservationdate: '',
|
reservationplace: '',
|
reservationrelativeman: '',
|
reservationremark: '',
|
reservationtime: '',
|
status: 2,
|
tempId: Date.now()
|
})
|
},
|
|
updateValue(value, item, prop) {
|
const { records } = this
|
const { serialno, tempId = 1 } = item
|
const index = records.findIndex(
|
({ serialno: id, tempId: itemTempId }) =>
|
id === serialno || itemTempId === tempId
|
)
|
if (prop === 'reservationdate' || prop === 'inputtime') {
|
value = this.format(value)
|
}
|
this.$set(records, index, {
|
...records[index],
|
[prop]: value
|
})
|
},
|
|
toEdit(item) {
|
const { records } = this
|
const { serialno } = item
|
const index = records.findIndex(({ serialno: id }) => id === serialno)
|
|
this.$set(records, index, {
|
...records[index],
|
status: 1 // 0 显示，1 编辑 2新增
|
})
|
},
|
toSave(item, prop) {
|
const { records, requiredList } = this
|
const { serialno, tempId = 1 } = item
|
const curr = records.find(
|
({ serialno: id, tempId: itemTempId }) =>
|
id === serialno || itemTempId === tempId
|
)
|
|
const noRequired = requiredList.find(({ prop }) => {
|
return curr[prop] === ''
|
})
|
|
if (noRequired) {
|
this.$message(`${noRequired.label}不能为空！`)
|
} else {
|
this.saveContractReservationList(curr)
|
}
|
},
|
|
// 编辑及新增
|
async saveContractReservationList(info) {
|
const res = await saveContractReservationList([
|
{
|
...info
|
}
|
])
|
this.init()
|
},
|
|
// 删除
|
delContractReservation(row, prop) {
|
this.$confirm(`请确认是否删除${row.reservationdate}的预约记录！`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
this.sureDel(row, prop)
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
})
|
},
|
|
async sureDel(row, prop) {
|
const res = await delContractReservation({
|
...row
|
})
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
})
|
this.init()
|
},
|
|
// 格式化时间
|
format(str) {
|
return this.dayjs(str).format('YYYY/MM/DD')
|
}
|
},
|
watch: {
|
serialNo() {
|
this.init()
|
}
|
}
|
}
|
</script>
|
|
<style lang="postcss" scoped>
|
.appointment {
|
& >>> .el-header {
|
padding: 0;
|
}
|
& >>> .el-main {
|
padding: 0;
|
}
|
& >>> .el-table th {
|
background: #fafafa;
|
color: #222222;
|
padding: 15px 0;
|
border-color: #eee;
|
}
|
& >>> .el-table td {
|
color: #777777;
|
border-color: #eee;
|
padding: 0;
|
height: 48px;
|
& .el-button+.el-button {
|
margin-left: 20px;
|
}
|
& .el-input__inner,
|
& .el-input__icon {
|
height: 32px;
|
line-height: 32px;
|
}
|
}
|
& >>> .has-gutter th:nth-child(2) .cell::before {
|
content: '* ';
|
color: red;
|
}
|
& >>> .has-gutter th:nth-child(3) .cell::before {
|
content: '* ';
|
color: red;
|
}
|
& >>> .has-gutter th:nth-child(4) .cell::before {
|
content: '* ';
|
color: red;
|
}
|
& >>> .has-gutter th:nth-child(5) .cell::before {
|
content: '* ';
|
color: red;
|
}
|
& >>> .el-table__body-wrapper {
|
&::-webkit-scrollbar {
|
height: 10px;
|
width: 10px;
|
}
|
&::-webkit-scrollbar-track {
|
border-radius: 1em;
|
background-color: rgba(50, 50, 50, 0.1);
|
}
|
&::-webkit-scrollbar-thumb {
|
border-radius: 1em;
|
background-color: rgba(50, 50, 50, 0.2);
|
}
|
}
|
}
|
</style>
|
