465 lines
12 KiB
Vue
465 lines
12 KiB
Vue
<template>
|
|
<img class="meeting-cover" :src="meeting.meetingPic" alt="" />
|
|
<h3 class="meeting-title">{{ meeting.meetingName }}</h3>
|
|
<p class="meeting-time">
|
|
<span class="title">会议时间</span>
|
|
<span class="time">{{ meeting.startTime }}</span>
|
|
</p>
|
|
<div class="form-container" v-if="appointStatus === `pending`">
|
|
<el-form
|
|
:model="appointForm"
|
|
ref="appointRef"
|
|
:rules="appointRules"
|
|
label-position="left"
|
|
>
|
|
<div class="joinuser-wrap" style="display: flex; flex-wrap: wrap">
|
|
<div class="joinuser-item" v-if="fieldConfig.icCard">
|
|
<el-form-item label="IC卡号" prop="icCard">
|
|
<el-input v-model="appointForm.icCard" placeholder="请输入IC卡号" />
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.nickname">
|
|
<el-form-item label="姓名" prop="nickname">
|
|
<el-input v-model="appointForm.nickname" placeholder="请输入姓名" />
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.phone">
|
|
<el-form-item label="手机号" prop="phone">
|
|
<el-input v-model="appointForm.phone" placeholder="请输入手机号" />
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.unit">
|
|
<el-form-item label="单位" prop="unit">
|
|
<el-input v-model="appointForm.unit" placeholder="请输入单位" />
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.address">
|
|
<el-form-item label="地址" prop="address">
|
|
<el-input
|
|
v-model="appointForm.address"
|
|
:rows="3"
|
|
placeholder="请输入地址"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.age">
|
|
<el-form-item label="年龄" prop="age">
|
|
<el-input
|
|
v-model="appointForm.age"
|
|
:rows="3"
|
|
placeholder="请输入年龄"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.department">
|
|
<el-form-item label="部门" prop="department">
|
|
<el-input
|
|
v-model="appointForm.department"
|
|
placeholder="请输入部门"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.email">
|
|
<el-form-item label="邮箱" prop="email">
|
|
<el-input v-model="appointForm.email" placeholder="请输入邮箱" />
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<div class="joinuser-item" v-if="fieldConfig.groupName">
|
|
<el-form-item label="组名" prop="groupName">
|
|
<el-input
|
|
v-model="appointForm.groupName"
|
|
placeholder="请输入组名"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.hospitalLevel">
|
|
<el-form-item label="医院等级" prop="hospitalLevel">
|
|
<el-input
|
|
v-model="appointForm.hospitalLevel"
|
|
placeholder="请输入医院等级"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<div class="joinuser-item" v-if="fieldConfig.idCard">
|
|
<el-form-item label="身份证" prop="idCard">
|
|
<el-input v-model="appointForm.idCard" placeholder="请输入身份证" />
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.mailingAddress">
|
|
<el-form-item label="邮寄地址" prop="mailingAddress">
|
|
<el-input
|
|
v-model="appointForm.mailingAddress"
|
|
placeholder="请输入邮寄地址"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<div class="joinuser-item" v-if="fieldConfig.major">
|
|
<el-form-item label="专业" prop="major">
|
|
<el-input v-model="appointForm.major" placeholder="请输入专业" />
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.qualification">
|
|
<el-form-item label="学历" prop="qualification">
|
|
<el-input
|
|
v-model="appointForm.qualification"
|
|
placeholder="请输入学历"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<div class="joinuser-item" v-if="fieldConfig.region">
|
|
<el-form-item label="地区" prop="region">
|
|
<el-input v-model="appointForm.region" placeholder="请输入地区" />
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.technicalOffice">
|
|
<el-form-item label="科室" prop="technicalOffice">
|
|
<el-input
|
|
v-model="appointForm.technicalOffice"
|
|
placeholder="请输入科室"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.title">
|
|
<el-form-item label="职称" prop="title">
|
|
<el-input v-model="appointForm.title" placeholder="请输入职称" />
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.gender">
|
|
<el-form-item label="性别" prop="gender">
|
|
<el-radio-group v-model="appointForm.gender">
|
|
<el-radio label="1">男</el-radio>
|
|
<el-radio label="2">女</el-radio>
|
|
<el-radio label="3">其他</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.needScoreFlag">
|
|
<el-form-item
|
|
label="是否需要学分"
|
|
label-width="180"
|
|
prop="needScoreFlag"
|
|
>
|
|
<el-radio-group v-model="appointForm.needScoreFlag">
|
|
<el-radio :label="0">不需要</el-radio>
|
|
<el-radio :label="1">需要</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<div class="joinuser-item" v-if="fieldConfig.affiliateWestFlag">
|
|
<el-form-item label="隶属西部" prop="affiliateWestFlag">
|
|
<el-checkbox
|
|
v-model="appointForm.affiliateWestFlag"
|
|
true-label="1"
|
|
false-label="0"
|
|
></el-checkbox>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.basicLevelUnitFlag">
|
|
<el-form-item label="属于基层单位" prop="basicLevelUnitFlag">
|
|
<el-checkbox
|
|
v-model="appointForm.basicLevelUnitFlag"
|
|
true-label="1"
|
|
false-label="0"
|
|
></el-checkbox>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="joinuser-item" v-if="fieldConfig.countryDoctorFlag">
|
|
<el-form-item label="是否乡村医生" prop="countryDoctorFlag">
|
|
<el-checkbox
|
|
v-model="appointForm.countryDoctorFlag"
|
|
true-label="1"
|
|
false-label="0"
|
|
></el-checkbox>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
|
|
<el-row type="flex" justify="center"> </el-row>
|
|
</el-form>
|
|
<div style="display: flex; justify-content: center">
|
|
<el-button type="primary" @click="submitAppointment(appointRef)"
|
|
>预约</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<el-row v-if="appointStatus !== `pending`" type="flex" justify="center">
|
|
<el-col :sm="12" :lg="6">
|
|
<el-result
|
|
:icon="appointStatus === 'success' ? `success` : `error`"
|
|
:title="appointStatus === 'success' ? '预约成功' : `预约失败`"
|
|
:sub-title="appointMessage"
|
|
>
|
|
<!-- <template #extra>
|
|
<el-button type="primary">返回</el-button>
|
|
</template> -->
|
|
</el-result>
|
|
</el-col></el-row
|
|
>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, toRefs } from "vue";
|
|
import { getMeetingDetailById, newAppointment } from "@/api/meeting";
|
|
import { ElMessage } from "element-plus";
|
|
import { useRoute } from "vue-router";
|
|
import _ from "lodash";
|
|
const route = useRoute();
|
|
const data = reactive({
|
|
appointForm: {
|
|
status: "0",
|
|
},
|
|
fieldConfig: {
|
|
icCard: true,
|
|
},
|
|
meeting: {},
|
|
appointRules: {
|
|
address: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
affiliateWestFlag: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
age: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
basicLevelUnitFlag: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
countryDoctorFlag: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
department: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
email: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
gender: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
groupName: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
hospitalLevel: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
icCard: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
idCard: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
mailingAddress: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
major: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
needScoreFlag: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
nickname: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
phone: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
{
|
|
pattern: /^1[3-9]\d{9}$/,
|
|
trigger: "blur",
|
|
message: "手机号格式不正确",
|
|
},
|
|
],
|
|
qualification: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
region: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
technicalOffice: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
title: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
unit: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: "必填",
|
|
},
|
|
],
|
|
},
|
|
appointStatus: "pending",
|
|
appointMessage: "",
|
|
});
|
|
const {
|
|
appointForm,
|
|
fieldConfig,
|
|
appointRules,
|
|
appointStatus,
|
|
meeting,
|
|
appointMessage,
|
|
} = toRefs(data);
|
|
|
|
const meetingId = ref(0);
|
|
|
|
meetingId.value = route.params.meetingId;
|
|
|
|
// 根据会议id获取详情
|
|
const loadMeetingDetail = async (meetingId) => {
|
|
const { data } = await getMeetingDetailById(meetingId);
|
|
meeting.value = data;
|
|
if (data.fieldConfig) {
|
|
fieldConfig.value = JSON.parse(data.fieldConfig);
|
|
}
|
|
setJoinUserDefaultValue();
|
|
};
|
|
// 设置默认值
|
|
const setJoinUserDefaultValue = () => {
|
|
console.log(Object.keys(fieldConfig.value));
|
|
[
|
|
{ name: "gender", default: "1" },
|
|
{ name: "basicLevelUnitFlag", default: "0" },
|
|
{ name: "countryDoctorFlag", default: "0" },
|
|
{ name: "affiliateWestFlag", default: "0" },
|
|
].forEach((item) => {
|
|
if (
|
|
Object.keys(fieldConfig.value).includes(item.name) &&
|
|
fieldConfig.value[item.name]
|
|
) {
|
|
appointForm.value[item.name] = item.default;
|
|
} else {
|
|
appointForm.value = _.omit(appointForm.value, item.name);
|
|
}
|
|
});
|
|
appointForm.value.meetingId = meetingId.value;
|
|
};
|
|
|
|
// 提交表单
|
|
const appointRef = ref(null);
|
|
const submitAppointment = async (appointRef) => {
|
|
await appointRef.validate();
|
|
try {
|
|
const resp = await newAppointment(appointForm.value);
|
|
appointStatus.value = "success";
|
|
appointMessage.value = resp.msg;
|
|
} catch (error) {
|
|
console.log(error);
|
|
appointStatus.value = "failed";
|
|
appointMessage.value = error.message;
|
|
}
|
|
return;
|
|
};
|
|
|
|
loadMeetingDetail(meetingId.value);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/style/appoint-mobile.scss";
|
|
@import "@/style/appoint-desktop.scss";
|
|
|
|
.meeting-cover {
|
|
// width: 100%;
|
|
height: 50vh;
|
|
}
|
|
.meeting-title {
|
|
text-align: center;
|
|
}
|
|
.meeting-time {
|
|
text-align: center;
|
|
}
|
|
.form-item-container {
|
|
display: flex;
|
|
}
|
|
</style>
|