You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
415 lines
11 KiB
Vue
415 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<div class="head">
|
|
<el-row>
|
|
<el-form-item>
|
|
<el-tag class="ml-2" type="success" style="margin-right: 20px;">机构名称</el-tag>
|
|
<el-select filterable v-model="searchInfo.orgId" placeholder="请选择体检机构">
|
|
<el-option v-for="(item, index) in org_list" :key="index" :label="item.org_name" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-tag class="ml-2" type="success" style=" margin-left: 20px;margin-right: 20px;">时间段</el-tag>
|
|
<div>
|
|
<el-date-picker v-model="searchInfo.dateRange" value-format="YYYY-MM-DD" type="daterange"
|
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
|
|
</div>
|
|
</el-form-item>
|
|
</el-row>
|
|
<el-row>
|
|
<el-form-item>
|
|
<el-tag class="ml-2" type="success" style=" margin-right: 20px;">状态</el-tag>
|
|
<el-radio-group v-model="searchInfo.status">
|
|
<el-radio :label="99">全部</el-radio>
|
|
<el-radio :label="1">可用</el-radio>
|
|
<el-radio :label="0">停用</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-tag class="ml-2" type="success" style="margin-left: 20px; margin-right: 20px;">星期</el-tag>
|
|
<el-checkbox-group v-model="searchInfo.xingqi">
|
|
<el-checkbox v-for="(item, index) in xingqi" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
<el-button type="primary" style="margin-left: 20px;" @click="getList">搜索</el-button>
|
|
</el-form-item>
|
|
|
|
</el-row>
|
|
<el-row>
|
|
<el-button type="success" @click="add()">新建</el-button>
|
|
<el-button type="danger" @click="del()">删除</el-button>
|
|
<el-button type="primary" @click="changeClic('status')">修改状态</el-button>
|
|
<el-button type="primary" @click="changeClic('count')">修改数量</el-button>
|
|
</el-row>
|
|
</div>
|
|
|
|
<el-table :data="tableData" style="width: 100%;" row-key="id" v-loading="loading"
|
|
@selection-change="TableSelectionChange">
|
|
<el-table-column type="selection" width="55" />
|
|
<el-table-column prop="id" label="Id" width="50" />
|
|
<el-table-column prop="org_name" label="机构名称" />
|
|
<el-table-column prop="date" label="日期" width="120">
|
|
<template #default="scope">
|
|
{{ scope.row.date.substr(0, 10) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="uname" label="星期" width="100">
|
|
<template #default="scope">
|
|
星期{{ getDayOfWeek(scope.row.date) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="time" label="时段" width="150" />
|
|
<el-table-column prop="end_time" label="预约截止时间" />
|
|
<el-table-column prop="count" label="最大预约人数" width="120" />
|
|
<el-table-column prop="usedcount" label="已约人数" width="80" />
|
|
<el-table-column prop="status" label="余量" width="80">
|
|
<template #default="scope">
|
|
<span style="font-weight: 700;">{{ scope.row.count - scope.row.usedcount }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" label="状态" width="80">
|
|
<template #default="scope">
|
|
<el-tag v-if="scope.row.status == 1" class="ml-2" type="success">正常</el-tag>
|
|
<el-tag v-if="scope.row.status == 0" class="ml-2" type="danger">停用</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="created_at" label="创建时间" />
|
|
</el-table>
|
|
<div class="page">
|
|
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[14, 50, 100, 200]"
|
|
layout="total,sizes, prev, pager, next" :total="total" @size-change="PageSizeChange"
|
|
@current-change="PageCurrentChange" />
|
|
</div>
|
|
<el-dialog v-model="dialogVisible" title="日期" width="45%">
|
|
<el-form :rules="rules" ref="forminfo" :model="info" label-width="120px" v-loading="loading" class="form">
|
|
<el-form-item label="体检机构" prop="orgId">
|
|
<el-select v-model="info.orgId" placeholder="请选择体检机构">
|
|
<el-option v-for="(item, index) in org_list" :key="index" :label="item.org_name" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="星期" prop="xingqi">
|
|
<el-checkbox-group v-model="info.xingqi">
|
|
<el-checkbox v-for="(item, index) in xingqi" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<el-form-item label="日期" prop="dateRange">
|
|
<div style="width:300px ;">
|
|
<el-date-picker v-model="info.dateRange" value-format="YYYY-MM-DD" type="daterange"
|
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="时间段" prop="timeRange">
|
|
<div style="width:300px ;">
|
|
<el-time-picker v-model="info.timeRange" value-format='HH:mm' is-range range-separator="至"
|
|
start-placeholder="开始时间" end-placeholder="结束时间" />
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="预约截止时间" prop="endTime">
|
|
<el-time-picker v-model="info.endTime" value-format='HH:mm' placeholder="预约截止时间" />
|
|
</el-form-item>
|
|
<el-form-item label="最大预约人数" prop="count">
|
|
<el-input v-model="info.count" type="number" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="Save(forminfo)">
|
|
确定
|
|
</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
<el-dialog v-model="dialogVisible2" title="修改" width="30%">
|
|
<el-form-item v-if="changeInfo.type == 'status'" label="修改状态">
|
|
<el-radio-group v-model="changeInfo.status">
|
|
<el-radio :label="1">可用</el-radio>
|
|
<el-radio :label="0">停用</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item v-if="changeInfo.type == 'count'" label="修改数量">
|
|
<el-input v-model="changeInfo.count" type="number" />
|
|
</el-form-item>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="dialogVisible2 = false">取消</el-button>
|
|
<el-button type="primary" @click="SaveChange()">
|
|
确定
|
|
</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted
|
|
} from 'vue'
|
|
import {
|
|
ElMessage,
|
|
ElMessageBox
|
|
} from 'element-plus'
|
|
import {
|
|
GetHealthOrganizationEnableList,
|
|
CreateCalendar,
|
|
CalendarGetList,
|
|
CalendarDel,
|
|
CalendarChangeInfo
|
|
} from '@/api/api.js'
|
|
let loading = ref(false)
|
|
let forminfo = ref('');
|
|
let changeInfo = ref({
|
|
type: '',
|
|
count: '',
|
|
status: '',
|
|
list: [],
|
|
})
|
|
let searchInfo = ref({
|
|
dateRange: [],
|
|
orgId: '',
|
|
status: 99,
|
|
xingqi: []
|
|
})
|
|
let rules = ref({
|
|
orgId: [{
|
|
required: true,
|
|
message: '请选择体检机构',
|
|
trigger: 'change',
|
|
}],
|
|
xingqi: [{
|
|
type: 'array',
|
|
required: true,
|
|
message: '请勾选星期',
|
|
trigger: 'change',
|
|
}],
|
|
dateRange: [{
|
|
required: true,
|
|
message: '请选择日期范围',
|
|
trigger: 'change',
|
|
}],
|
|
timeRange: [{
|
|
required: true,
|
|
message: '预约时间段',
|
|
trigger: 'change',
|
|
}],
|
|
endTime: [{
|
|
required: true,
|
|
message: '请选择预约截止时间',
|
|
trigger: 'change',
|
|
}],
|
|
count: [{
|
|
required: true,
|
|
message: '请输入最多预约人数',
|
|
trigger: 'change',
|
|
}]
|
|
|
|
})
|
|
let xingqi = ref([{
|
|
label: '星期一',
|
|
value: 1
|
|
}, {
|
|
label: '星期二',
|
|
value: 2
|
|
}, {
|
|
label: '星期三',
|
|
value: 3
|
|
}, {
|
|
label: '星期四',
|
|
value: 4
|
|
}, {
|
|
label: '星期五',
|
|
value: 5
|
|
}, {
|
|
label: '星期六',
|
|
value: 6
|
|
}, {
|
|
label: '星期日',
|
|
value: 7
|
|
}])
|
|
let tableData = ref([])
|
|
let currentPage = ref(1) //当前页码
|
|
let pageSize = ref(14) //每页数量
|
|
let total = 0 //总数量
|
|
let dialogVisible = ref(false)
|
|
let dialogVisible2 = ref(false)
|
|
let tableSelectedValue = ref([]) //表格多选选中的数据
|
|
let info = ref({
|
|
orgId: '',
|
|
xingqi: [],
|
|
dateRange: '',
|
|
timeRange: '',
|
|
endTime: '',
|
|
count: ''
|
|
})
|
|
let org_list = ref([]) //机构列表
|
|
|
|
const add = () => {
|
|
dialogVisible.value = true
|
|
}
|
|
const PageSizeChange = (e) => { // 修改每页数量
|
|
pageSize.value = e
|
|
getList()
|
|
}
|
|
const PageCurrentChange = (e) => { //切换页码
|
|
currentPage.value = e
|
|
getList()
|
|
}
|
|
const TableSelectionChange = (rows) => { //表格多选
|
|
console.log(rows)
|
|
let list1 = []
|
|
if (rows) {
|
|
for (let selectedItem of rows) {
|
|
list1.push(selectedItem.id)
|
|
}
|
|
tableSelectedValue.value = list1
|
|
}
|
|
|
|
|
|
}
|
|
const del = () => {
|
|
if (!tableSelectedValue.value.length > 0) return false
|
|
ElMessageBox.confirm(
|
|
'确认删除所选日历吗?',
|
|
'提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'error',
|
|
}
|
|
)
|
|
.then(() => {
|
|
loading.value = true
|
|
CalendarDel({
|
|
list: tableSelectedValue.value
|
|
}).then(res => {
|
|
loading.value = false
|
|
if (res.status) {
|
|
getList()
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
|
|
})
|
|
})
|
|
|
|
|
|
}
|
|
const getHealthOrganizationEnableList = () => {
|
|
GetHealthOrganizationEnableList().then(res => {
|
|
if (res.status) {
|
|
org_list.value = res.data
|
|
if (res.data.length == 1) {
|
|
info.value.orgId = res.data[0].id
|
|
searchInfo.value.orgId = res.data[0].id
|
|
}
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
|
|
})
|
|
}
|
|
//创建体检日历
|
|
const Save = (forminfo) => {
|
|
forminfo.validate((v) => {
|
|
if (v) {
|
|
ElMessageBox.confirm(
|
|
'确认创建体检日历吗?',
|
|
'提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}
|
|
)
|
|
.then(() => {
|
|
CreateCalendar({
|
|
info: info.value
|
|
}).then(res => {
|
|
if (res.status) {
|
|
ElMessage({
|
|
message: res.msg,
|
|
type: 'success',
|
|
})
|
|
dialogVisible.value = false
|
|
getList()
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
//获取日历列表
|
|
const getList = () => {
|
|
loading.value = true
|
|
CalendarGetList({
|
|
page: currentPage.value,
|
|
pageSize: pageSize.value,
|
|
searchInfo: searchInfo.value,
|
|
}).then(res => {
|
|
loading.value = false
|
|
tableData.value = res.data.list
|
|
total = res.data.count
|
|
})
|
|
}
|
|
//判断是星期几
|
|
const getDayOfWeek = (dateString) => {
|
|
const days = ['日', '一', '二', '三', '四', '五', '六'];
|
|
const date = new Date(dateString);
|
|
const dayOfWeek = date.getDay();
|
|
return days[dayOfWeek];
|
|
}
|
|
const changeClic = (type) => {
|
|
if (!tableSelectedValue.value.length > 0) return false
|
|
dialogVisible2.value = true
|
|
changeInfo.value.count = ''
|
|
changeInfo.value.status = ''
|
|
changeInfo.value.type = type
|
|
changeInfo.value.list = tableSelectedValue.value
|
|
|
|
|
|
}
|
|
const SaveChange = () => {
|
|
CalendarChangeInfo({ changeInfo: changeInfo.value }).then(res => {
|
|
let msgtype = 'error'
|
|
if (res.status) {
|
|
msgtype = 'success'
|
|
dialogVisible2.value = false
|
|
getList()
|
|
}
|
|
ElMessage({
|
|
message: res.msg,
|
|
type: msgtype,
|
|
})
|
|
})
|
|
}
|
|
onMounted(() => {
|
|
getHealthOrganizationEnableList()
|
|
getList()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.form .el-input {
|
|
width: 300px;
|
|
}
|
|
|
|
.head {
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.head .el-row {
|
|
margin-top: -8px;
|
|
}
|
|
</style> |