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

<template>
    <div class="p-3">
        <div class="bg-fff flex1 ov-hd d-flex flex-cln" v-show="showSearch">
            <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="contact">
                        <el-input v-model="queryParams.contact" placeholder="搜单位负责人" clearable style="width: 180px" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="负责人电话" prop="contactTel">
                        <el-input v-model="queryParams.contactTel" 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.payStartDate" v-model:end-date="queryParams.payEndDate"></DateRange>
                        </div>
                    </el-form-item>
                    <el-form-item label="有效期状态" prop="vipEnable">
                        <el-select style="width: 140px" v-model="queryParams.vipEnable" clearable placeholder="搜有效期状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="有效" value="1"></el-option>
                            <el-option label="过期" value="3"></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.vipLevel" 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="vipLevel" width="120">
                            <template #default="scope">
                                <dict-tag :value="scope.row.vipLevel" :options="vip_level" />
                            </template>
                        </vxe-column>
                        <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="企业地址" wmin-width="100">
                            <template #default="{ row }">
                                {{ (row.adcdCodeName || '') + (row.address || '') || '-' }}
                            </template>
                        </vxe-column>
                        <vxe-column title="有效期状态" width="100" :formatter="colNoData">
                            <template #default="{ row }">
                                {{ +row?.vipEnable == 1? '有效' : '过期' }}
                            </template>
                        </vxe-column>
                        <vxe-column title="有效期至" align="center" field="endDate" width="140" :formatter="colNoData" />
                        <vxe-column title="入会时间" align="center" field="startDate" wmin-width="100" :formatter="colNoData" />
                        <vxe-column title="操作" width="330" align="center" fixed="right" class-name="small-padding fixed-width">
                            <template #default="{ row }">
                                <el-button text type="primary" @click="memberDetail(row)">详情</el-button>
                                <span></span>
                                <el-button text style="color: #0079fe" @click="editRowEndDate(row)">修改有效期</el-button>
                                <span></span>
                                <el-button text style="color: #0079fe" @click="editRowlevel(row)">修改级别</el-button>
                                <span></span>
                                <el-button text type="danger" @click="deleteItem(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>
    <EditVipLevel v-if="showViplevel" v-model:show="showViplevel" :info="rowInfo" :dict="{ vip_level }" @success="getList"></EditVipLevel>
    <EditVipEndDate v-if="showVipEndDate" v-model:show="showVipEndDate" :info="rowInfo" @success="getList"></EditVipEndDate>
</template>

<script setup name="Member" lang="ts">
import { listMember, delMember, addMember, updateMember, countLevelMember } from '@/api/dgtmedicine/member/index';
import { approvalMember } from '@/api/dgtmedicine/approvalLog/index';
import { MemberVO, MemberQuery, MemberForm, MemberLevelCountVO } from '@/api/dgtmedicine/member/types';
import { ApprovalLogQuery, ApprovalLogForm } from '@/api/dgtmedicine/approvalLog/types';
import { colNoData } from '@/utils/noData';
import { DateRange, searchTabs } from '@/views/models/index';
import { EditVipLevel, EditVipEndDate } from '../model/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 showViplevel = ref(false);
const showVipEndDate = ref(false);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const rowInfo = ref<any>({});
const initFormData: MemberForm = {
    id: undefined,
    cpyName: '',
    legalPersonName: '',
    legalPersonPhone: '',
    legalPersonPosition: '',
    legalPersonIdFront: '',
    legalPersonIdBack: '',
    companyCertificate: '',
    email: '',
    department: '',
    totalAssets: '',
    introduction: '',
    regType: '',
    membershipPurpose: '',
    plantingInfo: [],
    vipLevel: '',
    startDate: '',
    endDate: '',
    reviewStatus: '',
    reviewMsg: '',
    reviewBy: '',
    reviewTime: '',
    partnerId: '',
    cpyBusType: '',
    applyLevel: ''
};
const data = reactive<any>({
    form: { ...initFormData },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        vipLevel: '',
        paymentStatus: '1',
        reviewStatus: '1',
        vipEnable: ''
    },
    rules: {}
});
// 修改级别
const editRowlevel = (row: any) => {
    rowInfo.value = { ...row };
    showViplevel.value = true;
};
// 修改有效期时间
const editRowEndDate = (row: any) => {
    rowInfo.value = { ...row };
    showVipEndDate.value = true;
};
const { queryParams, form } = toRefs(data);
/** 查询会员信息列表 */
const getList = async () => {
    loading.value = true;
    const res = await listMember(queryParams.value);
    memberList.value = res.rows;
    total.value = res.total;
    loading.value = false;
};

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

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

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

const memberDetail = (row: any) => {
    router.push({ path: `/szyy/member-detail`, query: { memberId: 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>