digital-medicine-front/src/views/auth/userbind/index.vue

<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="108px">
                    <el-form-item label="关键字" prop="keywords">
                        <el-input v-model="queryParams.keywords" placeholder="请输入关键字" clearable style="width: 200px" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-select v-model="queryParams.status" clearable>
                            <el-option v-for="dict in approval_query_type" :value="dict.value" :label="dict.label"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否有管理员" prop="hasAdmin">
                        <el-select v-model="queryParams.hasAdmin" clearable>
                            <el-option label="全部" value="" />
                            <el-option label="是" value="1" />
                            <el-option label="否" value="0" />
                        </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>
        </transition>

        <el-card shadow="never">
            <template #header v-if="false"></template>

            <el-table v-loading="loading" :data="userList" border>
                <el-table-column type="index" width="55" align="center" label="序号" />
                <el-table-column label="姓名" align="left" prop="name" width="200">
                    <template #default="scope">
                        <div style="display: flex;align-items: center;">
                            <el-avatar size="small" :src="scope.row.userInfo.avatar" />
                            <div style="margin-left: 10px;">{{ scope.row.userInfo.name }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" align="left" prop="phone" width="200">
                    <template #default="scope">
                        <div style="display: flex;align-items: center;">
                            <div style="margin-left: 10px;">{{ scope.row.userInfo.phone }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="申请企业" align="center" prop="cpyName" width="300">
                    <template #default="scope">
                        <div style="display: flex;align-items: center;">
                            <el-avatar size="small" :src="scope.row.cpyInfo.storePhoto" />
                            <div style="margin-left: 10px;">{{ scope.row.cpyInfo.cpyName }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="是否有管理员" align="center" prop="hasAdmin" width="90">
                    <template #default="{ row }">
                        <dict-tag :options="yes_no" :value="row.hasAdmin"></dict-tag>
                    </template>
                </el-table-column>
                <el-table-column label="统一社会信用代码" align="center" prop="cpyName" width="250">
                    <template #default="scope">
                        <div style="margin-left: 10px;">{{ scope.row.cpyInfo.creditCode }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="时间申请" align="center" prop="createTime" width="200" />
                <el-table-column prop="res" width="90" label="状态">
                    <template #default="{ row }">
                        <div :style="{ color: approval_query_type.find((item: any) => item.value === row.res).elTagClass }">
                            {{ selectDictLabel(approval_query_type, row.res) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <div v-if="scope.row.res == '0'">
                            <el-button @click="handleApproval(scope.row, '1')" type="success">审核通过</el-button>
                            <el-button @click="handleApproval(scope.row, '2')" type="warning">审核不通过</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
        </el-card>
    </div>
</template>

<script setup name="app-user-bind" lang="ts">
import { bindInfoApproval } from '@/api/settled';
import { BindInfoCpyListVo, QueryUserBindInfoBo } from '@/api/enterprise/recordCompany/types';
import { listUserBindInfo } from '@/api/enterprise/recordCompany';
import { CircleCheck, CircleClose } from '@element-plus/icons-vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const userList = ref<BindInfoCpyListVo[]>([]);
const loading = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const { approval_query_type, yes_no } = toRefs<any>(proxy?.useDict('approval_query_type', 'yes_no'));

const data = reactive<PageData<any, any>>({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        cpyName: undefined,
        userName: undefined,
        keywords: undefined,
        hasAdmin: undefined,
        status: '0',
        params: {}
    },
    rules: {}
});

const { queryParams } = toRefs(data);

/** 查询app用户列表 */
const getList = async () => {
    loading.value = true;
    const res = await listUserBindInfo(queryParams.value);
    userList.value = res.rows;
    total.value = res.total;
    loading.value = false;
};

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

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

/**
 * 申请审批
 */
const handleApproval = async (row: any, res: string) => {
    if (res === '1') {
        ElMessageBox.confirm('该成员审核通过?', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'success',
            icon: markRaw(CircleCheck)
        })
            .then(() => {
                const params = {
                    approvalType: +row.hasAdmin ? '0' : '1',
                    targetId: row.id,
                    res: res,
                };
                approvalAjax(params);
            })
            .catch(() => {
                proxy?.$modal.msgWarning('取消审核');
            });
    } else {
        ElMessageBox.prompt('该成员审核不通过', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            inputPlaceholder: '不通过理由',
            inputErrorMessage: '请填写不通过理由',
            type: 'error',
            icon: markRaw(CircleClose),
            inputValidator: (value) => {
                return value ? true : false;
            }
        })
            .then(({ value }) => {
                const params = {
                    approvalType: '2',
                    targetId: row.id,
                    res,
                    msg: value
                };
                approvalAjax(params);
            })
            .catch(() => {
                proxy?.$modal.msgWarning('取消审核');
            });
    }
};
const approvalAjax = async (params: any) => {
    proxy?.$modal.loading('审核中...');
    const res = await bindInfoApproval(params).catch(() => {});
    proxy?.$modal.closeLoading();
    if (!res) return;
    proxy?.$modal.msgSuccess('操作完成');
    getList();
};

onMounted(() => {
    getList();
});
</script>
<style scoped lang="scss">
.cpy-container {
    margin-top: 20px;
    margin-bottom: 20px;

    .cpy-item {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border-bottom: 1px solid green;
    }
}

.center-btn-container {
    display: flex;

    .el-button {
        flex: 1;
    }
}
</style>