|
|
@@ -2,51 +2,70 @@
|
|
|
<div class="appointment-page" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
|
|
|
<el-row>
|
|
|
<el-col :span="24" class="padding20">
|
|
|
- <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
|
|
|
- <el-form-item label="预约时间">
|
|
|
+ <el-form :inline="true" :model="searchForm" class="flex-form" size="small">
|
|
|
+ <el-form-item label="联系人姓名">
|
|
|
+ <el-input v-model="searchForm.name" placeholder="请输入姓名(不是昵称)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="预约申请时间">
|
|
|
<el-date-picker
|
|
|
- v-model="date"
|
|
|
+ v-model="appointmentTime"
|
|
|
type="daterange"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期">
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="预约姓名">
|
|
|
- <el-input v-model="searchForm.name" placeholder="请输入预约姓名"></el-input>
|
|
|
- </el-form-item>
|
|
|
+
|
|
|
<el-form-item label="状态">
|
|
|
+ <!-- 状态 状态 【1.申请预约 2.撤销预约 3.业务人员撤销预约 4.预约报道成功 5.预约超时 】 -->
|
|
|
<el-select v-model="searchForm.status" placeholder="请选择">
|
|
|
- <el-option label="等待服务" value="1"></el-option>
|
|
|
- <el-option label="已取消" value="0"></el-option>
|
|
|
- <el-option label="已完成" value="2"></el-option>
|
|
|
+ <el-option label="请选择" value=""></el-option>
|
|
|
+ <el-option label="申请预约" value="1"></el-option>
|
|
|
+ <el-option label="撤销预约" value="2"></el-option>
|
|
|
+ <el-option label="业务人员撤销预约" value="3"></el-option>
|
|
|
+ <el-option label="预约报道成功" value="4"></el-option>
|
|
|
+ <el-option label="预约超时" value="5"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="省/市/区">
|
|
|
+ <el-cascader style="width:230px;"
|
|
|
+ :options="options"
|
|
|
+ v-model="selectedOptions"
|
|
|
+ @change="handleChange">
|
|
|
+ </el-cascader>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button type="primary">查询</el-button>
|
|
|
- <el-button>重置</el-button>
|
|
|
+ <el-button type="primary" @click="handleQuery">查询</el-button>
|
|
|
+ <el-button @click="handleReset">重置</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
- <el-col :span="24" class="padding20">
|
|
|
- <el-button type="primary" size="small" style="width: 100px">导出</el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24" class="padding20">
|
|
|
+ <el-col :span="24" class="padding20 no-padding-top">
|
|
|
<el-table :data="tableData" border stripe style="width: 100%" size="small" max-height="700">
|
|
|
- <el-table-column prop="name" label="账户昵称"></el-table-column>
|
|
|
- <el-table-column prop="phone" label="用户手机号"></el-table-column>
|
|
|
- <el-table-column prop="time" label="检测人姓名"></el-table-column>
|
|
|
- <el-table-column prop="times" label="预约时间"></el-table-column>
|
|
|
- <el-table-column prop="count" label="状态"></el-table-column>
|
|
|
- <el-table-column label="操作">
|
|
|
+ <el-table-column type="index" align="center" label="序号"></el-table-column>
|
|
|
+ <el-table-column prop="appointmentId" label="预约记录ID" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="contactName" label="联系人名称" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="contactPhone" label="联系方式" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="nickname" label="预约用户昵称" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="appointmentTime" label="预约时间" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="appointmentDuration" label="时间区间段" align="center"></el-table-column>
|
|
|
+ <el-table-column label="状态" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
- <!-- 若产生报告 则显示已完成 -->
|
|
|
- <el-button type="text" size="small">已完成</el-button>
|
|
|
- <el-button type="text" size="small" @click="handleCancelAppoint(scope.row)">取消预约</el-button>
|
|
|
+ <!-- 状态 状态 【1.申请预约 2.撤销预约 3.业务人员撤销预约 4.预约报道成功 5.预约超时 】 -->
|
|
|
+ <span v-if="scope.row.status == 1">申请预约</span>
|
|
|
+ <span v-if="scope.row.status == 2">撤销预约</span>
|
|
|
+ <span v-if="scope.row.status == 3">业务人员撤销预约</span>
|
|
|
+ <span v-if="scope.row.status == 4">预约报道成功</span>
|
|
|
+ <span v-if="scope.row.status == 5">预约超时</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="addTime" label="预约申请时间" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="" label="操作" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" size="mini" :disabled="scope.row.status !== 1" @click="handleCancelAppoint(scope.row)">取消预约</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -55,13 +74,11 @@
|
|
|
<el-row>
|
|
|
<el-col :span="24" class="padding20 flexend" >
|
|
|
<el-pagination
|
|
|
- @size-change="handleSizeChange"
|
|
|
@current-change="handleCurrentChange"
|
|
|
:current-page="currentPage"
|
|
|
- :page-sizes="[100, 200, 300, 400]"
|
|
|
- :page-size="100"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="400"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="total"
|
|
|
size="small"
|
|
|
>
|
|
|
</el-pagination>
|
|
|
@@ -71,43 +88,98 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { getAppointmentList, cancelAppointment } from '@/request/request'
|
|
|
+import { regionData, CodeToText } from 'element-china-area-data'
|
|
|
export default {
|
|
|
name: 'appointment',
|
|
|
data() {
|
|
|
return {
|
|
|
loading: false,
|
|
|
- date: '',
|
|
|
+ appointmentTime: '',
|
|
|
searchForm: {
|
|
|
name: '',
|
|
|
- status: ''
|
|
|
+ start: '',
|
|
|
+ end: '',
|
|
|
+ status: '',
|
|
|
+ province: '浙江省',
|
|
|
+ city: '杭州市',
|
|
|
+ county: '上城区'
|
|
|
},
|
|
|
- tableData: [
|
|
|
- {
|
|
|
- name: '范一岚',
|
|
|
- phone: '18626576880',
|
|
|
- time: '1995-12-27',
|
|
|
- times: 100,
|
|
|
- count: 227,
|
|
|
- admin: '是'
|
|
|
- }
|
|
|
- ],
|
|
|
- currentPage: 1
|
|
|
+ tableData: [],
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ total: 0,
|
|
|
+ options: regionData,
|
|
|
+ selectedOptions: ['330000', '330100', '330102']
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- console.log('appointment mounted');
|
|
|
+ this.handleQuery()
|
|
|
},
|
|
|
methods: {
|
|
|
- handleSizeChange () {
|
|
|
-
|
|
|
+ handleReset () {
|
|
|
+ this.selectedOptions = ['330000', '330100', '330102']
|
|
|
+ this.searchForm.status = ''
|
|
|
+ this.appointmentTime = ''
|
|
|
+ this.searchForm.name = ''
|
|
|
+ },
|
|
|
+ handleQuery () {
|
|
|
+ if (this.appointmentTime) {
|
|
|
+ this.searchForm.start = this.appointmentTime[0]
|
|
|
+ this.searchForm.end = this.appointmentTime[1]
|
|
|
+ } else {
|
|
|
+ this.searchForm.start = ''
|
|
|
+ this.searchForm.end = ''
|
|
|
+ }
|
|
|
+ this.currentPage = 1
|
|
|
+ this.getAppointmentListFn()
|
|
|
},
|
|
|
- handleCurrentChange () {
|
|
|
-
|
|
|
+ getAppointmentListFn () {
|
|
|
+ let data = {
|
|
|
+ currentPage: this.currentPage,
|
|
|
+ ...this.searchForm
|
|
|
+ }
|
|
|
+ this.loading = true
|
|
|
+ getAppointmentList(data).then(res => {
|
|
|
+ this.loading = false
|
|
|
+ this.total = res.data.total
|
|
|
+ this.pageSize = res.data.pageSize
|
|
|
+ this.tableData = res.data.vos || []
|
|
|
+ }).catch(e => {
|
|
|
+ this.loading = false
|
|
|
+ console.log(e);
|
|
|
+ })
|
|
|
},
|
|
|
- handleCancelAppoint () {
|
|
|
+ handleCurrentChange (currentPage) {
|
|
|
+ this.currentPage = currentPage
|
|
|
+ this.getAppointmentListFn()
|
|
|
+ },
|
|
|
+ handleCancelAppoint (row) {
|
|
|
this.$confirm('确定取消预约吗？').then( _=> {
|
|
|
- console.log('ok');
|
|
|
+ this.cancelAppointmentFn(row.appointmentId)
|
|
|
}).catch(_ => {});
|
|
|
+ },
|
|
|
+ cancelAppointmentFn (appointmentId) {
|
|
|
+ let data = {
|
|
|
+ appointmentId: appointmentId
|
|
|
+ }
|
|
|
+ this.loading = true
|
|
|
+ cancelAppointment(data).then(res => {
|
|
|
+ this.loading = false
|
|
|
+ this.$message({
|
|
|
+ message: '取消成功',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.getAppointmentListFn()
|
|
|
+ }).catch(e => {
|
|
|
+ this.loading = false
|
|
|
+ console.log(e);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleChange (value) {
|
|
|
+ this.searchForm.province = CodeToText[value[0]]
|
|
|
+ this.searchForm.city = CodeToText[value[1]]
|
|
|
+ this.searchForm.county = CodeToText[value[2]]
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -120,6 +192,9 @@ export default {
|
|
|
.padding20 {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
+ .no-padding-top {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
.flexend {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
wangyuan