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

<template>
    <div class="pd-16" style="overflow: auto;">
        <div class="d-flex mb-16 flex-cln">
            <div class="info-title">可参会单位类型</div>
            <div class="bg-#fafafa pd-20">
                <template v-for="item, index in form?.conditions?.typeCheck" :key="index">
                    <span class="pr-5" v-if="item.check == '1'">
                        {{ selectDictLabel(dm_check_join_type, item?.vipLevel)}}
                    </span>
                </template>
            </div>
            <div class="info-title">报名限制条件</div>
            <div class="bg-#fafafa pd-20" v-if="form?.conditions?.totalCheck == '0' || !form?.conditions?.totalCheck">无</div>
            <div class="bg-#fafafa pd-20 d-flex flex-cln" v-else>
                <div class="pd-5 pb-15" v-if="form?.conditions?.total">报名总人数 ： {{ form?.conditions?.total }}人</div>
                <div class="d-flex">
                    <div>
                        <template v-for="(item, index) in form?.conditions?.levelCheck" :key="index">
                            <div class="d-flex a-c pd-5" v-if="+item.check">
                                <span>
                                    所有
                                    <span class="f-w-6">
                                        {{ selectDictLabels(dm_check_join_type, item.vipLevel, ',') }}
                                    </span>
                                    参会人数 ≤{{ item.total }}
                                </span>
                            </div>
                        </template>
                    </div>
                    <div>
                        <template v-for="(item, index) in form?.conditions?.cpyCheck" :key="index">
                            <div class="d-flex a-c pd-5" v-if="+item.check">
                                <span>
                                    <span class="f-w-6">{{ selectDictLabels(dm_check_join_type, item.vipLevel, ',') }}</span>
                                    限制每家单位人数≤{{ item.total }}
                                </span>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex mb-16 ">
            <div class="info-title">
                <span>参会人员信息</span>
                <span class="f-s-14 c-666">(提交报名:{{ form?.submitCount || 0 }}人 | 审核通过:{{ form?.joinCount || 0 }}人 | 签到:{{ form?.signCount || 0 }}人 | 领取证书:{{ form?.certCount || 0 }}人)</span>
            </div>
        </div>
        <div class="d-flex j-sb">
            <div>
                <searchTabs v-if="form?.conditions?.totalCheck == '1'" v-model="queryParams.res" @change="handleQuery" :list="tabs" key-label="name" key-count="num" key-value="type"></searchTabs>
            </div>
            <span style="width: 1px;"></span>
            <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 lm_signup_status_app_show" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="报名方式：" prop="tempJoin">
                    <el-select v-model="queryParams.tempJoin" placeholder="请选择报名方式" clearable style="width: 180px">
                        <el-option v-for="item in temp_join_type" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所在地区" label-width="70" prop="adcode">
                    <AreaCascader v-model="queryParams.adcode" :zlevel="2" checkStrictly @change="handleQuery"></AreaCascader>
                </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-button icon="Download" @click="exportSearch">导出参会人员信息</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="adcodeName" min-width="100" :formatter="colNoData" />
            <vxe-column title="单位类型" field="vipLevel" min-width="100" :formatter="colNoData" align="center">
                <template #default="{ row }">
                    <div class="d-flex a-c j-c">
                        <DictTag :options="dm_check_join_type" :value="row?.vipLevel"></DictTag>
                    </div>
                </template>
            </vxe-column>
            <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="参会费用" field="joinFee" min-width="100" :formatter="colNoData" />
            <vxe-column title="报名信息" min-width="80" fixed="right">
                <template #default="{ row }">
                    <div class="c-s-p"><u @click="checkRegostrationInfo(row)">查看报名信息</u></div>
                </template>
            </vxe-column>
            <vxe-column title="报名时间" align="center" field="createTime" min-width="100" :formatter="colNoData" />
            <vxe-column title="参会状态" min-width="100" fixed="right">
                <template #default="{ row }">
                    <DictTag v-if="row?.signupStatusForPc" :options="lm_signup_status_app_show" :value="row?.signupStatusForPc"></DictTag>
                    <div v-else>-</div>
                </template>
            </vxe-column>
            <vxe-column title="支付方式" field="payType" min-width="100" :formatter="colNoData">
                <template #default="{ row }">
                    <div v-if="row.payType === '1'">微信支付</div>
                    <div v-if="row.payType === '2'">对公转账</div>
                </template>
            </vxe-column>
            <vxe-column title="支付状态" field="outTradeNo" min-width="100" :formatter="colNoData">
                <template #default="{ row }">
                    {{ selectDictLabel(dm_pay_status, row?.payStatus)}}
                    <el-tooltip :content="`系统单号${row?.outTradeNo}`" placement="top" effect="light">
                        <el-icon v-if="row.payStatus == '1'"><QuestionFilled /></el-icon>
                    </el-tooltip>
                </template>
            </vxe-column>
            <vxe-column title="开票信息" field="remark" min-width="100" :formatter="colNoData">
                <template #default="{ row }">
                    <div v-if="row.payStatus == '1'&& !+row?.invoiceStatus" @click="checkInvoiceData(row.invoiceInfo)" class="pointer">查看</div>
                    <div v-if="row.payStatus == '1' && +row?.invoiceStatus" @click="checkInvoiceData(row.invoiceInfo)" class="pointer">已开票，点击查看</div>
                </template>
            </vxe-column>
            <vxe-column title="特殊说明" min-width="100" fixed="right">
                <template #default="{ row }">
                    {{ +row?.tempJoin?'通过临时报名通道报名':'-' }}
                </template>
            </vxe-column>
            <vxe-column v-if="form?.conditions?.totalCheck == '1'" title="审核状态" min-width="100" fixed="right">
                <template #default="{ row }">
                    <div class="d-flex a-c ">
                        <DictTag :class="{ 'c-red': row?.res === '0' }" :options="cpy_res_status" :value="row?.res" />
                        <el-tooltip class="box-item" effect="dark" :content="row?.msg" placement="top">
                            <el-icon v-show="row?.res == '2'">
                                <QuestionFilled />
                            </el-icon>
                        </el-tooltip>
                    </div>
                </template>
            </vxe-column>
            <vxe-column v-if="form?.conditions?.totalCheck == '1' || form?.meetingCharge?.hasFee == '1'" title="操作" width="250" align="center" fixed="right">
                <template #default="{ row }">
                    <el-button type="danger" size="small" v-if="row?.res !== '0' && row?.signInFlag !=='1' && form?.conditions?.totalCheck == '1'&& row?.payStatus == '1' && form?.meetingCharge?.hasFee !== '1'" @click="openDialog(row)" style="color: white">重审</el-button>
                    <el-button size="small" color="#33aeeb" @click="openDialog(row)" style="color: white" v-if="row?.res == '0' && form?.conditions?.totalCheck == '1'&& row?.payStatus == '1' &&form?.trainingStatus !== '2'">审核</el-button>
                    <el-button v-if="row.payStatus !== '1'" size="small" color="#e99d42" style="color: white" @click="openModification(row)">修改费用金额</el-button>
                    <el-button v-if="row.payType === '2'&& row.payStatus !== '1'" size="small" color="#81b337" style="color: white" @click="openTransfer(row)">确认收到转账</el-button>
                    <div v-if="row.payStatus == '1' && row?.res == '0'&& form?.trainingStatus == '2'">用户报名未成功，请至微信商户号进行退款</div>
                    <div v-if="row.payType === '10'">该报名已退款</div>
                    <el-upload v-if="form?.trainingStatus == '2' && row.payStatus == '1' && +row?.hasInvoice && !+row?.invoiceStatus && row.payType !== '10'" class="upload-demo" :action="uploadFileUrl" multiple :limit="1" :on-success="handleSuccess" :headers="headers" :show-file-list="false" accept=".pdf,.PDF">
                        <el-button size="small" color="#33aeeb" style="color: white" @click=" invoiceId = row.id">上传发票</el-button>
                    </el-upload>
                    <el-upload v-if="form?.trainingStatus == '2' && row.payStatus == '1' && +row?.hasInvoice && +row?.invoiceStatus && row.payType !== '10'" class="upload-demo" :action="uploadFileUrl" multiple :limit="1" :on-success="handleSuccess" :headers="headers" :show-file-list="false" accept=".pdf,.PDF">
                        <el-button type="primary">重新上传</el-button>
                    </el-upload>
                </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>

    <el-dialog v-model="dialogVisible" title="审核信息" width="500" center>
        <el-form ref="formRef" :model="fromvalue" :rules="rules" label-width="80px">
            <el-form-item label="审核结果" prop="res">
                <el-radio-group v-model="fromvalue.res">
                    <el-radio value="1" border>通过</el-radio>
                    <el-radio value="2" border :class="{ 'reject-radio': fromvalue.res === '2' }">不通过</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="理由" prop="msg" :rules="fromvalue.res === '2' ? rules.msgRequired : rules.msgOptional">
                <el-input v-model="fromvalue.msg" type="textarea" :rows="4" placeholder="请填写不通过的理由" maxlength="50" show-word-limit />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="signupApprovals()">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="modiFication" title="修改费用金额" width="300" center>
        <div class="d-flex a-c">
            <span class="flex1" style="white-space: nowrap;">参会费用：</span>
            <el-input v-model.number="participationFee" placeholder="请填写费用金额" />
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="modiFication = false">我再看看</el-button>
                <el-button type="primary" @click="changeEditPrice">确认修改</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="showTransfer" title="系统提示" width="360" center>
        <div class="d-flex a-c">
            <span>确认收款后将直接改为已支付状态，并进入报名审核流程，操作无法撤回请慎重操作。是否确认收款?</span>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="modiFication = false">我再看看</el-button>
                <el-button type="primary" @click="confirmTransfer">确认收到转账</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="invoicingInformation" title="开票信息" width="600" center>
        <div class="d-flex a-c j-sb pt-10 pb-10 f-s-16">
            <div>名称:</div>
            <div>{{ invoiceData?.headTitle || '-' }}</div>
        </div>
        <div class="d-flex a-c j-sb pt-10 pb-10 f-s-16">
            <div>税号:</div>
            <div>{{ invoiceData?.taxSn || '-'}}</div>
        </div>
        <div class="d-flex a-c j-sb pt-10 pb-10 f-s-16">
            <div>单位地址:</div>
            <div>{{ invoiceData?.address || '-'}}</div>
        </div>
        <div class="d-flex a-c j-sb pt-10 pb-10 f-s-16">
            <div>电话号码:</div>
            <div>{{ invoiceData?.contactPhone || '-'}}</div>
        </div>
        <div class="d-flex a-c j-sb pt-10 pb-10 f-s-16">
            <div>开户银行:</div>
            <div>{{ invoiceData?.bankName || '-'}}</div>
        </div>
        <div class="d-flex a-c j-sb pt-10 pb-10 f-s-16">
            <div>银行账户:</div>
            <div>{{ invoiceData?.bankAccount || '-'}}</div>
        </div>
    </el-dialog>
    <registrationInfo v-if="showTemporary" v-model:show="showTemporary" :info="temporaryRegistration"></registrationInfo>
</template>
<script setup name="MeetingDetailInfo" lang="ts">
import { exportTrainingMembers, signupApproval, signupCount, trainingMembers,editPrice,confirmSigPublicPay,uploadInvoice} from '@/api/training';
import { colNoData } from '@/utils/noData';
import { searchTabs } from '@/views/models';
import { debounce } from 'lodash';
import { onMounted, reactive, ref } from 'vue';
import registrationInfo from './registration-info.vue';
import { AreaCascader } from '@/views/components';
import { globalHeaders } from '@/utils/request';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { cpy_res_status, lm_signup_status_app_show, dm_check_join_type,temp_join_type,dm_pay_status } = toRefs<any>(proxy?.useDict('cpy_res_status', 'lm_signup_status_app_show', 'dm_check_join_type','temp_join_type','dm_pay_status'));
// 获取详情
const props = defineProps({
    form: {
        type: Object,
        default: () => ({})
    }
});
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
const rules = reactive({
    res: [
        { required: true, message: '请选择审核结果', trigger: 'blur' }
    ],
    msgRequired: [ // For "不通过" (value="2")
        { required: true, message: '请填写不通过的理由', trigger: 'blur' }
    ],
    msgOptional: [ // For "通过" (value="1")
        { required: false, trigger: 'blur' }
    ]
})
const showTemporary = ref(false);
const dialogVisible = ref(false);
const temporaryRegistration = ref();
const modiFication=ref<any>(false)
const showTransfer = ref(false)
const participationFee = ref()
const editPricedata = ref()
const invoicingInformation = ref(false)
const invoiceData = ref()
const invoiceId = ref()
const headers = ref(globalHeaders());
const fromvalue = ref({
    targetId: '',
    msg: ''
})
const checkInvoiceData = (row)=>{
    invoicingInformation.value = true
    invoiceData.value = row
}
const checkRegostrationInfo = (row) => {
    temporaryRegistration.value = row;
    showTemporary.value = true;
};
const openDialog = (row) => {
    fromvalue.value.targetId = row.id; // 保存当前行数据
    fromvalue.value.msg = ''
    dialogVisible.value = true;
};
const query = useRoute().query;

const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    trainingId: query?.id || '',
});
const loading = ref(false);
const total = ref(0);
const list = ref<any>([]);
const tabs = ref([]);
const formRef = ref()
const getExpertPersonCount = async () => {
    const res = await signupCount(query?.id);
    if (res?.code === 200) {
        tabs.value = res.data;
    }
};
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 signupApprovals = async () => {
    await formRef.value.validate()
    const res = await signupApproval(fromvalue.value);
    dialogVisible.value = false;
    handleQuery();
};
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
    getExpertPersonCount()
};
const queryFormRef = ref<ElFormInstance>();
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};
const exportSearch = debounce(() => {
    const params = {
        ...queryParams.value
    };
    delete params.pageNum;
    delete params.pageSize;
    exportTrainingMembers(params);
}, 500);
// 打开修改金额的按钮
const openModification = (row)=>{
    modiFication.value = true;
    participationFee.value = row.joinFee
    editPricedata.value = row
}
const openTransfer = (row)=>{
    showTransfer.value = true
    editPricedata.value = row
}
const confirmTransfer = async()=>{
    await confirmSigPublicPay(editPricedata.value?.id)
    showTransfer.value = false
     getList();
}
const changeEditPrice = async ()=>{
    await editPrice({
        id:editPricedata.value?.id,
        price:participationFee.value
    });
    modiFication.value = false
    getList();
}
const handleSuccess = async(res,uploadFile)=>{
    await uploadInvoice({
        id:invoiceId.value,
        invoiceUrl:{
            fileName:res.data.fileName,
            url:res.data.fileName,
            fileSize:uploadFile.raw.size
        }
    })
    getList();
}
onMounted(() => {
    getList();
    getExpertPersonCount();
});
</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;
}

.reject-radio :deep(.el-radio__label) {
    color: #F56C6C;
}

.reject-radio :deep(.el-radio__inner) {
    border-color: #F56C6C;
    background: #F56C6C;
}

.reject-radio :deep(.el-radio__border) {
    border-color: #F56C6C;
}

:deep(.reject-radio.el-radio.is-bordered.is-checked) {
    border-color: #F56C6C !important;
}
.single{
    position: absolute;
    top: -20px;
    right: 30px;
    width: 200px;
    left: 70px;
}
</style>