mailbox-outer-admin-vue/src/views/Admin.vue

<template>
    <div class="container">
        <el-form :model="form" label-width="120px" style="margin-top: 20px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="姓名">
                        <el-input
                            v-model="form.nickname"
                            placeholder="请输入姓名"
                            max-length="200px"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="手机号">
                        <el-input
                            v-model="form.username"
                            placeholder="请输入手机号"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="flex between mb-24">
                <el-button type="primary" @click="show = true"
                    >新增用户</el-button
                >
                <div>
                    <el-button type="primary" @click="getList">搜索</el-button>
                    <el-button type="default" @click="reset">重置</el-button>
                </div>
            </div>
        </el-form>

        <div class="table-box" v-loading="loading">
            <el-table :data="list">
                <el-table-column prop="id" label="编号" />
                <el-table-column prop="nickname" label="姓名" />
                <el-table-column prop="username" label="手机号/用户名" />
                <el-table-column prop="createTime" label="创建日期" />
            </el-table>
            <div class="flex end mt-10">
                <el-pagination
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>
    </div>

    <el-dialog v-model="show" title="新增用户" width="600px">
        <el-form :model="newForm" label-width="150px" ref="formRef" :rules="rules">
            <el-form-item label="管理员姓名" prop="nickname">
                <el-input
                    v-model="newForm.nickname"
                    placeholder="请输入新管理员姓名"
                    max-length="200px"
                ></el-input>
            </el-form-item>
            <el-form-item label="管理员手机号" prop="username">
                <el-input
                    v-model="newForm.username"
                    placeholder="请输入管理员手机号"
                ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input
                    type="password"
                    v-model="newForm.password"
                    placeholder="请输入密码"
                />
                </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="handleAdd">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { adminList, addAdmin } from "@/api/admin";
const loading = ref(true);
const form = ref({
    current: 1,
    pageSize: 10
});

const list = ref([]);
const total = ref(0)
const getList = () => {
    loading.value = true;
    adminList(form.value).then((data) => {
        list.value = data.records;
        total.value = data.total
        loading.value = false;
        
    });
};

getList();

const reset = () => {
    form.value = {};
    getList();
};

const successMessage = (msg) => {
    ElMessage.success(msg);
};

const show = ref(false)
const newForm = ref({})
const formRef = ref()
const rules = {
    username: [{ validator: validatorPhone }],
    password: [
        {
            required: true,
            message: "请输入密码(长度不能少于6位)",
            min: 6
        }
    ],
};
function handleAdd() {
    formRef.value.validate((valid) => {
        if (valid) {
            addAdmin(newForm.value).then(() => {
                show.value  = false
                newForm.value = {}
                getList()
            })
        }
    })
}

function validatorPhone(rule, phonenumber, callback) {
    if (!phonenumber) {
        return callback(new Error('请输入手机号码'))
    }
    if (phonenumber.length !== 11) {
        return callback(new Error('请输入正确的手机号码'))
    }
    if (!/^1[3456789]\d{9}/.test(phonenumber)) {
        return callback(new Error('请输入正确的手机号码'))
    }
    callback()
}
</script>