digital-medicine-front/src/views/training/models/meeting-special-list.vue

<template>
    <div class="pd-16" style="overflow: auto;">
        <div class="d-flex f-s-26">配置后按配置金额收费</div>
        <div class="d-flex j-st pt-20">
            <!-- <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="phone">
                    <el-input v-model="queryParams.phone" placeholder="请输入手机号" clearable style="width: 180px" />
                </el-form-item>
                <el-form-item label="姓名：" prop="name">
                    <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable style="width: 180px" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery" class="mr-10">重置</el-button>
                    <el-upload class="upload-demo" :action="uploadFileUrl" multiple :limit="1" :on-success="handleSuccess" :headers="headers" :show-file-list="false" accept=".xls,.xlsx">
                        <el-button class="pl-10 mr-10">导入特殊清单</el-button>
                    </el-upload>
                    <el-button @click="dialogVisible = true">清空特殊清单</el-button>
                </el-form-item>
            </el-form>
        </div>
        <vxe-table v-if="form" :loading="loading" border :data="list" min-height="0">
            <!-- 序号 -->
            <vxe-column type="seq" width="60" title="序号" align="center" />
            <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="joinFee" min-width="100" :formatter="colNoData" v-if="form?.meetingCharge?.hasFee =='1'">
                <template #default="{ row }">
                    <div class="f-w-5">{{ row?.joinFee }}</div>
                </template>
            </vxe-column>
        </vxe-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
        <el-dialog v-model="dialogVisible" title="清空所有数据" width="500">
            <span>确定清空所有数据吗？</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="clearData()">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup name="MeetingDetailInfo" lang="ts">
import {trainingfee,importFeeList,clearFeeList} from '@/api/training';
import { colNoData } from '@/utils/noData';
import { searchTabs } from '@/views/models';
import { debounce } from 'lodash';
import { onMounted, reactive, ref ,ComponentPublicInstance} from 'vue';
import registrationInfo from './registration-info.vue';
import { AreaCascader } from '@/views/components';
import { globalHeaders } from '@/utils/request';
import { isWindow } from 'element-plus/es/utils';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { cpy_res_status, lm_signup_status_app_show, dm_check_join_type,temp_join_type,dm_pay_status,lm_signup_status_app_query} = toRefs<any>(proxy?.useDict('cpy_res_status', 'lm_signup_status_app_show', 'dm_check_join_type','temp_join_type','dm_pay_status',"lm_signup_status_app_query"));
// 获取详情
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 headers = ref(globalHeaders());
const fromvalue = ref<any>({
    targetId: '',
    msg: ''
})

const query = useRoute().query;

const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    trainId: query?.id || '',
    phone:'',
});
const loading = ref(false);
const total = ref(0);
const list = ref<any>([]);
const tabs = ref([]);
const formRef = ref()
const dialogVisible = ref(false)
const getList = async () => {
    loading.value = true;
    const res = await trainingfee(queryParams.value);
    if (!res || res.code !== 200) return;
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
};

const clearData = async()=>{
    await clearFeeList(props.form.id)
    dialogVisible.value = false
    getList();
}
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};
const queryFormRef = ref<ElFormInstance>();
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

const handleSuccess = async(res,uploadFile)=>{
    await importFeeList({
        trainingId:props.form.id,
        xlsUrl:res.data.url
    })
    getList();
}
onMounted(() => {
    getList();
});
</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;
}
.orange-radio :deep(.el-radio__label) {
    color: orange;
}
.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;
}
.orange-button{
    border:1px solid #d7d7d7;
    height: 100px;
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 36px;
    margin-right: 40px;
    margin-bottom: 40px;
    font-weight: 600;
}
.orange-button:hover{
    color: white;
    background-color: orange;
    border: 1px solid orange;
    opacity: 0.5;
}
.green-button:hover{
    color: white;
    background-color: green;
    border: 1px solid green;
    opacity: 0.5;
}
.green-button{
    border:1px solid #d7d7d7;
    height: 100px;
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 36px;
    margin-right: 40px;
    margin-bottom: 40px;
    font-weight: 600;
}

.orange-active{
    color: white;
    background-color: orange;
    border: 1px solid orange;
}
.green-active{
    color: white;
    background-color: green;
    border: 1px solid green;
}
.titleClass{
    font-size: 30px !important;
}
</style>