stock-front/src/views/taskMessage/TaskAccountList.vue

<template>
    <!-- 新人账号申请列表 -->
    <div class="taskAccountList flex-col">
        <s-header name="待审核列表" :noback="false"></s-header>

        <div class="taskAccountBox flex-col">
            <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('common.reqFailClkReload')"
                :finished="finished" :finished-text="$t('common.noMoreTxt')" offset="300" :immediate-check="false"
                @load="onLoad">
                <div class="searchRow flex-row justify-between">
                    <div class="flex-col">
                        <div class="flex-row justify-between bd3">
                            <div class="flex-col outer4 proportionIcon"></div>
                            <span class="flex-col txt2">{{ $t("taskMessage.total")
                                }}<span class="discountNumber">{{ userApplyTotal }}</span>{{
                                    $t("taskMessage.recordsInTotal") }}</span>
                        </div>
                    </div>
                    <!-- <div class="l-flex-RC"> -->
                    <!-- <div @click="reviewedClk" class="label3 o-mr-30">
                        {{ $t("taskMessage.toViewAppro") }}
                    </div> -->
                    <!-- </div> -->
                </div>
                <div class="listBox">
                    <div v-for="(item, index) in userApplyList" :key="index" class="listItem">
                        <div class="itemBox">
                            <div class="itemRow">
                                <span class="itemTitle">用户名:&nbsp;</span>{{
                                    item.userName }}
                            </div>
                            <div class="itemRow">
                                <span class="itemTitle">部门岗位:&nbsp;</span>{{
                                    item.deptName }}-{{ item.jobName }}
                            </div>
                            <div class="itemRow">
                                <span class="itemTitle">手机号:&nbsp;</span>{{
                                    item.phone }}
                            </div>
                            <!-- 申请时间 -->
                            <div class="itemRow">
                                <span class="itemTitle">{{ $t("taskMessage.applicationTime") }}:&nbsp;</span>{{
                                    showDateTime(item.applyTime) }}
                            </div>
                            <!-- 状态：0red待审批，消失，去审批》 -->
                            <div class="itemRow" v-if="item.status === '0'">
                                <span class="itemTitle">状态:&nbsp;</span><span style="color: red">{{
                                    showItemType(item.status)
                                }}</span>
                            </div>
                            <!-- 审批时间 -->
                            <div class="itemRow" v-if="item.status !== '0'">
                                <span class="itemTitle">{{ $t("taskMessage.approvalTime") }}:&nbsp;</span>{{
                                    showDateTime(item.modifyDate)
                                }}
                            </div>
                            <!-- 去审批 -->
                            <div v-if="item.status === '0' && isOper" class="itemRow"
                                style="display: flex; justify-content: flex-end">
                                <van-button span="5" round type="primary" :style="{
                                    height: '2em',
                                    padding: '0 1.2em',
                                    margin: '0 1em',
                                    backgroundColor: 'rgb(200, 55, 95 / 80%)', // 红色背景，不透明度为100%
                                    color: '#fff', // 文字颜色为白色
                                    boxShadow: '0 2px 8px rgba(255, 55, 95, 0.3)', // 添加阴影效果
                                    transition: 'all 0.3s ease' // 添加过渡效果，使变化更平滑
                                }" @click="toTaskAccount(item)">
                                    审核
                                </van-button>
                            </div>
                            <div class="itemRow" style="display: flex; justify-content: flex-end">
                                <!-- 已拒绝 -->
                                <span v-if="item.status === '2'" style="color: #ff0000">{{
                                    showItemType(item.status)
                                    }}</span>
                                <!-- 已同意 -->
                                <span v-if="item.status === '1'" style="color: #4fc08d">{{
                                    showItemType(item.status)
                                    }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>

    </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { getPageUserApply } from "@/service/taskAccount";
import { showFailToast } from "vant";
import { getLoginUser, styleUrl } from "@/common/js/utils";
import dateUtil from "@/utils/dateUtil";
import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user';

export default {
    components: { sHeader },
    setup() {
        const { t } = useI18n();
        const router = useRouter()
        // 筛选弹窗
        const busiPopList = reactive([
            {
                name: t("taskMessage.toBeApproved"),
                id: "0",
            },
            {
                name: t("taskMessage.rejected"),
                id: "2",
            },
            {
                name: t("taskMessage.agreed"),
                id: "1",
            },
        ]);
        const busiPopFieldName = reactive({
            text: "name",
            value: "id",
        });
        const kDialogRef = ref(null);
        const busiPopShow = ref(false);

        // 点击查询按钮
        const confirmClk = () => {
            isClkReview.value = false;
            searchGetList();
        };
        // 是否点击待审核
        const isClkReview = ref(true);
        // 点击查看待审核
        // const reviewedClk = () => {
        //     isClkReview.value = true;
        //     searchParams.statusType = "1";
        //     searchGetList();
        // };
        const user = getLoginUser();
        const loading = ref(false); // 加载状态
        const error = ref(false); // 错误状态
        const finished = ref(false); // 结束翻页状态
        const userApplyList = ref([]); // 列表集合
        const userApplyTotal = ref(0); // 列表总数
        let searchParams = reactive({
            current: 1, // 当前页，默认第一页
            size: 10, // 页大小，默认10条
        });
        // name: "", // 用户userName
        // status: "", // 审核状态 0 申请中，1通过，2拒绝
        // 滚动加载
        const onLoad = () => {
            if (!finished.value) {
                searchParams.current = searchParams.current + 1;
                getList();
            }
        };
        // 查询列表
        const searchGetList = () => {
            userApplyList.value = [];
            searchParams.current = 1;
            getList();
        };
        // 获取新人账号注册审批列表数据
        const getList = async () => {

            const { data } = await getPageUserApply(
                Object.assign({}, searchParams)
            );
            if (data.code === "00000") {
                // 列表值叠加
                userApplyList.value = userApplyList.value.concat(
                    data.data.records
                );
                userApplyTotal.value = data.data.total;
                if (userApplyList.value.length === data.data.total) {
                    finished.value = true;
                }
                loading.value = false;
            } else {
                showFailToast(data.message);
            }
        };

        const showDateTime = (date) => {
            return date
                ? dateUtil.formateDate(new Date(date), "yyyy-MM-dd hh:mm:ss")
                : "";
        };

        const showItemType = (type) => {
            if (type === '0') {
                return t("taskMessage.toBeApproved");
            }
            if (type === '2') {
                return t("taskMessage.rejected");
            }
            if (type === '1') {
                return t("taskMessage.agreed");
            }
            return "";
        };

        const userStore = useUserStore();
        // 去审核账号
        const toTaskAccount = (item) => {
            userStore.setUserInfo(item);
            router.push({ name: 'taskAccount' });
        };

        // 是否有操作的权限
        const isOper = ref(true);
        // 初始化页面获取列表
        onMounted(async () => {
            // 加载样式
            styleUrl('taskAccountList');
            if (user) {
                searchParams.adminId = user.id;
                searchGetList();

                // 如果不是admin账号，不能有操作权限
                if (user.phone != '13245678901') {
                    isOper.value = false;
                }
            }
        });
        return {
            loading,
            error,
            finished,
            onLoad,
            userApplyList,
            userApplyTotal,
            showDateTime,
            showItemType,
            toTaskAccount,
            kDialogRef,
            confirmClk,
            busiPopShow,
            busiPopList,
            busiPopFieldName,
            // reviewedClk,
            isOper,
        };
    },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";
</style>