digital-medicine-front/src/views/dgtmedicine/check/index.vue

<template>
    <div class="p-3">
        <div class="bg-fff flex1 ov-hd d-flex flex-cln">
            <div class="pd-16 border-bottom">
                <div class="f-s-20 c-333 f-w-7 mb-10">会员入会审核</div>
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto">
                    <el-form-item label="企业名称" prop="cpyName">
                        <el-input v-model="queryParams.cpyName" placeholder="搜企业名称关键字" clearable style="width: 180px"
                            @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="申请时间段" prop="dateRange">
                        <div class="d-flex" style="width: 180px">
                            <DateRange v-model="queryParams.dateRange" v-model:start-date="queryParams.startDate"
                                v-model:end-date="queryParams.endDate"></DateRange>
                        </div>
                    </el-form-item>
                    <el-form-item label="缴费状态" prop="paymentStatus">
                        <el-select style="width: 140px" v-model="queryParams.paymentStatus" clearable
                            placeholder="搜有效期状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已缴费" value="1"></el-option>
                            <el-option label="未缴费" value="0"></el-option>
                        </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>
            <div class="d-flex flex1 ov-hd flex-cln pd-16">
                <searchTabs :list="memberLevelCountList" v-model="queryParams.reviewStatus" keyLabel="name"
                    @change="handleQuery" keyCount="num" keyValue="type"></searchTabs>
                <div class="pd-8"></div>
                <div class="flex1 ov-hd">
                    <vxe-table :loading="loading" border :data="memberList" min-height="0" max-height="100%">
                        <vxe-column title="企业名称" align="center" field="cpyName" width="220" :formatter="colNoData" />

                        <vxe-column title="单位负责人" align="center" field="contact" width="100" :formatter="colNoData" />
                        <vxe-column title="负责人联系电话" align="center" field="contactTel" wmin-width="100"
                            :formatter="colNoData" />
                        <vxe-column title="会员级别" align="center" field="vipLevel" width="120">
                            <template #default="scope">
                                <dict-tag :value="scope.row.vipLevel" :options="vip_level" />
                            </template>
                        </vxe-column>
                        <vxe-column title="缴费金额" align="center" min-width="100" :formatter="colNoData">
                            <template #default="{ row }">{{ row.paymentAmount || '-' }}元</template>
                        </vxe-column>
                        <vxe-column title="缴费状态" align="center" min-width="100" :formatter="colNoData">
                            <template #default="{ row }">
                                {{ +row.paymentStatus ? '已缴费' : '未缴费' }}
                            </template>
                        </vxe-column>
                        <vxe-column title="申请时间" align="center" field="createTime" min-width="100"
                            :formatter="colNoData" />
                        <vxe-column title="审核详情" align="center" width="200">
                            <template #default="{ row }">
                                <div v-for="(item, index) in row.approvalLogList">

                                </div>
                            </template>
                        </vxe-column>
                        <vxe-column title="审核状态" align="center" width="100">
                            <template #default="{ row }">
                                <!-- <dict-tag :value="scope.row.reviewStatus" :options="cpy_res_status" /> -->
                                <span :class="{ ['c-res-' + row?.reviewStatus]: true }">{{
                                    selectDictLabel(cpy_res_status, row?.reviewStatus) }}</span>
                            </template>
                        </vxe-column>
                        <vxe-column title="操作" align="center" width="100" fixed="right"
                            class-name="small-padding fixed-width">
                            <template #default="{ row }">
                                <el-button v-if="!+row?.reviewStatus" text type="primary"
                                    @click="routeDetail(row)">审核</el-button>
                                <el-button v-else text style="color: #41C06D;" @click="routeDetail(row)">查看</el-button>
                            </template>
                        </vxe-column>
                    </vxe-table>
                </div>
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getList" />
            </div>
        </div>
    </div>
</template>

<script setup name="Member" lang="ts">
import { listMember, delMember, queryMemberApprovalCount, listMemberApproval } from '@/api/dgtmedicine/member/index';
import { MemberVO, MemberLevelCountVO } from '@/api/dgtmedicine/member/types';
import { colNoData } from '@/utils/noData';
import { DateRange, searchTabs } from '@/views/models/index';
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { cpy_res_status, vip_level } = toRefs<any>(proxy?.useDict('cpy_res_status', 'vip_level'));
const memberList = ref<MemberVO[]>([]);
const memberLevelCountList = ref<MemberLevelCountVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();

const data = reactive<any>({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        reviewStatus: '0',
        paymentStatus: ''
    },
    rules: {}
});

const { queryParams } = toRefs(data);
/** 查询会员信息列表 */
const getList = async () => {
    loading.value = true;
    const res = await listMemberApproval(queryParams.value);
    memberList.value = res.rows;
    total.value = res.total;
    loading.value = false;
};

/** 查询会员信息列表 */
const getMemberLevelList = async () => {
    loading.value = true;
    const res = await queryMemberApprovalCount();
    memberLevelCountList.value = res.data;
    loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    queryParams.value.startDate = '';
    queryParams.value.endDate = '';
    handleQuery();
};

const routeDetail = (row: any) => {
    router.push({ path: `/lmszyy/lmcheckdetail`, query: { id: row.id } });
};
const deleteItem = async (row: any) => {
    ElMessageBox({
        title: '删除提示',
        cancelButtonText: '取消',
        confirmButtonText: '确认删除',
        showCancelButton: true,
        confirmButtonClass: 'el-button--danger',
        message: h('p', null, [h('div', null, `确认要删除企业：${row.cpyName} 吗？`), h('div', null, [h('span', null, '注意：'), h('span', { style: 'color: #F56C6C' }, '删除后，该企业将不再是协会的会员单位，请谨慎操作！')])]),
        callback: async (action: string) => {
            if (action === 'confirm') {
                const res = await delMember(row.id);
                if (res) {
                    ElMessage.success('删除成功');
                    getList();
                }
            }
        }
    });
};
onMounted(() => {
    getList();
    getMemberLevelList();
});
</script>