Files
meeting-client/src/views/appointment.vue
2022-05-18 17:25:43 +08:00

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>