digital-medicine-front/src/views/training/models/meeting-detail-info.vue

<template>
    <div class="flex1 over-auto">
        <div class="pd-16 ov-hd">
            <div class="info-title f-s-18 c-333 f-w-7 pb-10">会议基本信息</div>
            <el-descriptions :column="4">
                <el-descriptions-item min-width="100px" label="会议名称:">{{ form?.trainingName || '-' }}</el-descriptions-item>
                <el-descriptions-item min-width="100px" label="会议时间:">{{ form?.trainingStart }}~{{ form?.trainingEnd}}</el-descriptions-item>
                <el-descriptions-item min-width="100px" label="报名时间:">{{ form?.signupStart }}~{{ form?.signupEnd }}</el-descriptions-item>
                <el-descriptions-item min-width="100px" label="会议方式:">
                    {{ selectDictLabel(dm_training_join_type, form?.joinType) || '-'}}
                </el-descriptions-item>
                <el-descriptions-item min-width="100px" label="会议地点:">{{ form?.trainingLocation || '-' }}</el-descriptions-item>
                <el-descriptions-item min-width="100px" label="联系人:">{{ form?.contactName || '-' }}</el-descriptions-item>
                <el-descriptions-item min-width="100px" label="联系电话:">{{ form?.tel || '-' }}</el-descriptions-item>
                <el-descriptions-item min-width="100px" label="可参会单位类型:">
                    <template v-for="item,index in form.conditions.typeCheck" :key="index">
                        <span class="pr-5" v-if="item.check =='1'">{{ selectDictLabel(lm_check_join_type, item?.vipLevel) || '-'}}</span>
                    </template>
                </el-descriptions-item>
                <el-descriptions-item min-width="100px" label="报名人数:" v-if="form?.conditions.totalCheck == '1'">
                    限制{{form?.conditions.total }}
                </el-descriptions-item>
                <el-descriptions-item min-width="100px" label="报名人数:" v-else>不限制</el-descriptions-item>
                <el-descriptions-item min-width="100px" label="限制条件:" v-if="form?.conditions">
                    {{ form?.conditions?.levelTotalCheck == '1'?'按单位类型限制' : '' }}
                    {{form.conditions.cpyTotalCheck == '1'? '按每家企业人数限制' : '' }}
                    <span v-if="form?.conditions?.levelTotalCheck !== '1' && form.conditions.cpyTotalCheck !== '1'">{{ '-' }}</span>
                </el-descriptions-item>
                <el-descriptions-item min-width="100px" label="是否电子手签:">{{ form?.eleSignature == '1' ? "是" : '否' }}</el-descriptions-item>
                <el-descriptions-item min-width="100px" label="是否发放积分:">{{ form?.pointsFlag == '1' ? "是" : '否' }}</el-descriptions-item>
                <el-descriptions-item min-width="100px" label="每成功参会（签到成功）1人发放积分数:" v-if="form?.pointsFlag == '1'">{{ form?.points || '-' }}</el-descriptions-item>
                <el-descriptions-item min-width="100px" label="创建人:">{{ form?.createByName || '-' }}</el-descriptions-item>
                <el-descriptions-item min-width="100px" label="创建时间:">{{ form?.createTime || '-' }}</el-descriptions-item>
            </el-descriptions>
            <div class="d-flex f-s-14 c-666 mb-10">
                <div class="flex1">
                    <div class="c-333 mb-10">
                        会议详情:
                        <span v-if="!form?.description">-</span>
                    </div>
                    <div v-if="form?.description">{{ form?.description || '-' }}</div>
                </div>
                <div v-if="form?.attachments" class="flex1">
                    <div class="c-333 mb-10">
                        与会须知:
                        <span v-if="!form?.notice">-</span>
                    </div>
                    <div v-if="form?.notice">{{ form?.notice || '-' }}</div>
                </div>
            </div>
            <div class="d-flex f-s-14 c-666 mb-10">
                <div class="flex1">
                    <div class="c-333 mb-10">
                        会议备注:
                        <span v-if="!form?.remark">-</span>
                    </div>
                    <div v-if="form?.remark">{{ form?.remark || '-' }}</div>
                </div>
                <div v-if="form?.attachments" class="flex1">
                    <div class="c-333 mb-10">
                        相关文件:
                        <span v-if="form?.attachments.length==0">-</span>
                    </div>
                    <FileLook v-if="form?.attachments.length!==0" v-model="form.attachments" :span="12"></FileLook>
                </div>
            </div>
            <div class="d-flex f-s-14 c-666">
                <div class="flex1">
                    <div class="c-333 mb-10">
                        微信群聊二维码:
                        <span v-if="!form?.wechatQrCodeUrl">-</span>
                    </div>
                    <div class="d-flex flex-wrap" v-if="form?.wechatQrCodeUrl ">
                        <ImagePreview :src="form?.wechatQrCodeUrl " :width="100" :height="100"></ImagePreview>
                    </div>
                </div>
                <div class="flex1">
                    <div class="c-333 mb-10">
                        封面图:
                        <span v-if="!form?.coverImgUrl">-</span>
                    </div>
                    <div v-if="form?.coverImgUrl">
                        <ImagePreview :src="form?.coverImgUrl" :width="100" :height="100"></ImagePreview>
                    </div>
                </div>
                <div class="flex1">
                    <div class="c-333 mb-10">
                        会议图:
                        <span v-if="form?.trainingImg.length == 0">-</span>
                    </div>
                    <div class="d-flex flex-wrap" v-if="form?.trainingImg.length !== 0">
                        <template v-for="(item, index) in form?.trainingImg" :key="index">
                            <div class="mr-10 mb-10">
                                <ImagePreview :src="item" :width="100" :height="100"></ImagePreview>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            <div class="f-s-14">
                <div class="c-333 mb-10">是否颁发证书: {{ +form?.certFlag ? '是' : '否' }}</div>
                <vxe-table v-if="+form?.certFlag" border :data="form?.certificateInfo" min-height="0">
                    <!-- 序号 -->
                    <vxe-column type="seq" width="60" title="序号" align="center" />
                    <vxe-column title="证书名称" min-width="100">
                        <template #default="{ row }">
                            <DictTag :options="dm_training_cert" :value="row?.certType"></DictTag>
                        </template>
                    </vxe-column>
                    <vxe-column title="证书模板">
                        <template #default="{ row }">
                            <ImagePreview :src="row?.certImgUrl" :width="100"></ImagePreview>
                        </template>
                    </vxe-column>
                </vxe-table>
            </div>
            <div class="f-s-14">
                <div class="c-333 mb-10">报名信息:</div>
                <div class="w-400 h-700 border over-auto">
                    <div class="pd-10 border bg-#fafafa">
                        <div class="pt-10  f-s-20 f-w-6 d-flex j-c a-c flex-cln ">报名信息</div>
                        <div class="f-s-12 f-w-4 d-flex j-start c-red">此页面为意向人报名时所见页面：</div>
                    </div>
                    <template v-for="(item, index) in fixedField" :key="index">
                        <div class="pd-15 border1 c-#D7D7D7 d-flex j-sb">
                            <span class="c-#606266 f-s-16 f-w-6">{{ item.label }}</span>
                            <span class="f-s-14">请输入</span>
                        </div>
                    </template>
                    <template v-for="(field, index) in fields" :key="index">
                        <div class="meeting-custom-wrapper">
                            <meetingCustomPreview :field="field" style="pointer-events: none" v-if="field" />
                        </div>
                    </template>
                    <div class="pd-15 border1 c-#D7D7D7 d-flex j-sb">
                        <span class="c-#606266 f-s-16 f-w-6">备注</span>
                        <span>请输入</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="MeetingDetailInfo" lang="ts">
import { ref, onMounted } from 'vue';
import { FileLook } from '@/views/models';
import { FieldDefinition } from './type'
import meetingCustomPreview from './meeting-custom-preview.vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { dm_training_join_type, lm_check_join_type, dm_training_cert, lm_training_status, dm_training_signup_status_list } = toRefs<any>(proxy?.useDict('dm_training_join_type', 'lm_check_join_type', 'dm_training_cert', 'lm_training_status', 'dm_training_signup_status_list'));
const props = defineProps({
    form: {
        type: Object,
        default: () => ({})
    },
});
const fields = ref<FieldDefinition[]>([])
const fixedField = ref<FieldDefinition[]>([{
    name: `ent-${generateSecureRandomString()}`,
    label: '企业名称', type: '1',
    required: '1', readonly: '0',
}, {
    name: `name-${generateSecureRandomString()}`,
    label: '姓名', type: '1', readonly: '0',
    required: '1'
}, {
    name: `pos-${generateSecureRandomString()}`,
    label: '职务', type: '1', readonly: '0',
    required: '1'
}, {
    name: `Con-${generateSecureRandomString()}`,
    label: '联系方式', type: '1', readonly: '0',
    required: '1',pattern:'/^\d{11}$/'
}])
function generateSecureRandomString(length = 8) {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
    const randomValues = new Uint32Array(length);
    window.crypto.getRandomValues(randomValues);
    let result = '';
    randomValues.forEach((value) => {
        result += chars[value % chars.length];
    });
    return result;
}
onMounted(() => {
    fields.value = props.form.questions
});
</script>
<style scoped lang="scss">
.tabs-item {
    margin-right: 20px;
    padding: 8px 20px;
    font-size: 14px;
    border-color: #d7d7d7;
    border-style: solid;
    border-width: 1px 1px 0 1px;
    cursor: pointer;
    user-select: none;

    &.checked {
        color: #fff;
        border-color: var(--el-color-primary);
        background-color: var(--el-color-primary);
    }
}

.border-botttom {
    border-bottom: 1px solid #d7d7d7;
}

.border {
    border: 1px solid #dcdfe6;
}
</style>