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

<template>
    <div class="p-3">
        <div class="bg-fff flex1 ov-hd d-flex flex-cln">
            <div class="d-flex a-c pd-16 border-bottom">
                <div class="f-s-20 c-333 f-w-7 mr-10">会议详情</div>
                <el-button @click="router.go(-1)" type="primary" text>
                    <el-icon>
                        <Back />
                    </el-icon>
                    返回上一级
                </el-button>
            </div>
            <div class="flex1 over-auto">
                <div class="pd-16 ov-hd">
                    <el-descriptions :column="4">
                        <el-descriptions-item label="会议名称:">{{ form?.trainingName || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="培训时间:">{{ form?.trainingStart }}~{{ form?.trainingEnd }}</el-descriptions-item>
                        <el-descriptions-item label="培训方式:">{{ selectDictLabel(dm_training_join_type, form?.joinType) || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="培训地点:">{{ form?.trainingLocation || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="联系人:">{{ form?.contactName || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="联系电话:">{{ form?.tel || '-' }}</el-descriptions-item>
                        <el-descriptions-item label="创建人:">{{ form?.createByName || '-' }}</el-descriptions-item>
                        <el-descriptions-item 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">培训详情:</div>
                            <div>{{ form?.description || '-' }}</div>
                        </div>
                        <div class="flex1">
                            <div class="c-333 mb-10">与会须知:</div>
                            <div>{{ form?.notice || '-' }}</div>
                        </div>
                        <div v-if="form?.attachments" class="flex1">
                            <div class="c-333 mb-10">相关文件:</div>
                            <FileLook 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">封面图:</div>
                            <div>
                                <ImagePreview :src="form?.coverImgUrl" :width="100"></ImagePreview>
                            </div>
                        </div>
                        <div v-if="form?.attachments" class="flex1">
                            <div class="c-333 mb-10">会议图:</div>
                            <div class="d-flex flex-wrap">
                                <template v-for="(item, index) in form?.trainingImg" :key="index">
                                    <div class="mr-10 mb-10">
                                        <ImagePreview :src="item" :width="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="lm_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>
                    <el-divider />
                    <div class="d-flex mb-16">
                        <div class="info-title ">
                            <span>参会人员信息</span>
                            <span class="f-s-14 c-666">(报名:{{ form?.joinCount }}人 | 签到:{{ form?.signCount }}人 | 领取证书:{{ form?.certCount }}人)</span>
                        </div>
                    </div>
                    <div>
                        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto">
                            <el-form-item label="姓名：" prop="name">
                                <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable style="width: 180px" />
                            </el-form-item>
                            <el-form-item label="企业名称：" prop="company">
                                <el-input v-model="queryParams.company" placeholder="请输入企业名称" clearable style="width: 180px" />
                            </el-form-item>
                            <el-form-item label="参会状态：" prop="signupStatus">
                                <el-select v-model="queryParams.signupStatus" placeholder="请选择参会状态" clearable style="width: 180px">
                                    <el-option v-for="item in dm_training_signup_status_list" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <vxe-table :loading="loading" border :data="list" min-height="0">
                        <!-- 序号 -->
                        <vxe-column type="seq" width="60" title="序号" align="center" />
                        <vxe-column title="企业名称" field="company" min-width="100" :formatter="colNoData" />
                        <vxe-column title="姓名" field="name" min-width="100" :formatter="colNoData" />
                        <vxe-column title="职务" field="position" min-width="100" :formatter="colNoData" />
                        <vxe-column title="联系方式" field="contact" min-width="100" :formatter="colNoData" />
                        <vxe-column title="备注" field="remark" min-width="100" :formatter="colNoData" />
                        <vxe-column title="报名时间" align="center" field="createTime" min-width="100" :formatter="colNoData" />
                        <vxe-column title="参会状态" min-width="100" fixed="right">
                            <template #default="{ row }">
                                <DictTag :options="dm_training_signup_status_list" :value="row?.signupStatusForPc"></DictTag>
                            </template>
                        </vxe-column>
                    </vxe-table>
                    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="meeting-detail" lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { debounce } from 'lodash';
import router from '@/router';
import { trainingDetailById, trainingMembers } from '@/api/training';
import { FileLook } from '@/views/models';
import { colNoData } from '@/utils/noData';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { dm_training_join_type, yes_no, lm_training_cert, dm_training_status, dm_training_signup_status_list } = toRefs<any>(proxy?.useDict('dm_training_join_type', 'yes_no', 'lm_training_cert', 'dm_training_status', 'dm_training_signup_status_list'));
// 获取详情

const form = ref<any>(null);
const query = useRoute().query;
const getDetail = async () => {
    const res = await trainingDetailById(query?.id as string);
    if (res.code === 200) {
        form.value = res.data;
    } else {
        ElMessage.error(res.msg);
    }
};
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    trainingId: query?.id || ''
});
const loading = ref(false);
const total = ref(0);
const list = ref<any>([]);
const getList = async () => {
    loading.value = true;
    const res = await trainingMembers(queryParams.value);
    if (!res || res.code !== 200) return;
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
};
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};
const queryFormRef = ref<ElFormInstance>();
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};
onMounted(() => {
    getDetail();
    getList();
});
</script>