1. Toy模板网首页
  2. > Toy博客

CRM项目为新增用户设置对应的前端校验规则并发送Axios请求到后端将表单数据提交用户信息------CRM项目

7月前 作者：旧约Alatus 分类：Toy博客 阅读(31) 违法举报

这篇具有很好参考价值的文章主要介绍了CRM项目为新增用户设置对应的前端校验规则并发送Axios请求到后端将表单数据提交用户信息------CRM项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<template>
    <el-button type="primary" @click="addUser()">新增用户</el-button>
    <el-button type="danger">批量删除</el-button>
    <el-table
        :data="userList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
        <!-- 复选框    -->
        <el-table-column type="selection" width="33%" />
        <el-table-column type="index" label="序号" width="52%" />
        <el-table-column prop="loginAct" label="账号" width="90%" show-overflow-tooltip />
        <el-table-column property="name" label="姓名" width="75%" show-overflow-tooltip />
        <el-table-column property="phone" label="联系电话" show-overflow-tooltip />
        <el-table-column property="email" label="邮箱" show-overflow-tooltip />
        <el-table-column property="createTime" label="创建时间" show-overflow-tooltip />
        <el-table-column label="操作" show-overflow-tooltip>
            <template #default="scope">
                <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
                <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
                <el-button type="danger" @click="del(scope.row.id)">删除</el-button> 
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @prev-click="toPage"
        @next-click="toPage"
        @current-change="toPage"
     />
     <!-- 新增用户的弹窗(对话框) -->
     <el-dialog v-model="dialogVisible" title="新增用户" width="55%" draggable>
        <el-form ref="loginRefForm" :model="newUser" :rules="userRules">
            <el-form-item label="账号:" prop="loginAct">
                <el-input v-model="newUser.loginAct"/>
            </el-form-item>
            <el-form-item label="密码:" prop="loginPwd">
                <el-input v-model="newUser.loginPwd"/>
            </el-form-item>
            <el-form-item label="姓名:" prop="name">
                <el-input v-model="newUser.name"/>
            </el-form-item>
            <el-form-item label="联系电话:" prop="phone">
                <el-input v-model="newUser.phone"/>
            </el-form-item>
            <el-form-item label="邮箱:" prop="email">
                <el-input v-model="newUser.email"/>
            </el-form-item>
            <el-form-item label="账号未过期:" prop="accountNoExpired">
                <el-select v-model="newUser.accountNoExpired" placeholder="请选择">
                    <el-option label="是" value="1" />
                    <el-option label="否" value="0" />
                </el-select>
            </el-form-item>
            <el-form-item label="密码未过期:" prop="credentialsNoExpired">
                <el-select v-model="newUser.credentialsNoExpired" placeholder="请选择">
                    <el-option label="是" value="1" />
                    <el-option label="否" value="0" />
                </el-select>
            </el-form-item>
            <el-form-item label="账号未锁定:" prop="accountNoLocked">
                <el-select v-model="newUser.accountNoLocked" placeholder="请选择">
                    <el-option label="是" value="1" />
                    <el-option label="否" value="0" />
                </el-select>
            </el-form-item>
            <el-form-item label="账号是否启用:" prop="accountEnabled">
                <el-select v-model="newUser.accountEnabled" placeholder="请选择">
                    <el-option label="是" value="1" />
                    <el-option label="否" value="0" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submit()">
            确定
            </el-button>
        </div>
        </template>
    </el-dialog>
</template>

<script>
import { doGet,doPost } from '../http/httpRequest';
import { messageTip } from '../util/util';
export default {
    name:"userView",
    data(){
        return {
            userList : [],
            pageSize : 0,
            total : 0,
            dialogVisible : false,
            newUser : {},
            userRules : {                
                // 定义用户验证规则
                loginAct : [
                    { required: true, message: '登录账号不能为空', trigger: 'blur' },
                    { min: 3, max: 32, message: '登录账号长度范围为3-32个字符', trigger: 'blur' }
                ],
                loginPwd : [
                    { required: true, message: '登录密码不能为空', trigger: 'blur' },
                    { min: 6, max: 16, message: '登录密码长度为6-16位', trigger: 'blur' }
                ],
                name : [
                    { required: true, message: '姓名不能为空', trigger: 'blur' },
                    { pattern : /^[\u4e00-\u9fa5]{0,}$/, message: '姓名必须是中文汉字', trigger: 'blur'}
                ],
                phone : [
                    { required: true, message: '手机号码不能为空', trigger: 'blur' },
                    { pattern : /^1[3-9]\d{9}$/, message: '手机号码格式有误', trigger: 'blur'}
                ],
                email : [
                    { required: true, message: '邮箱不能为空', trigger: 'blur' },
                    { pattern : /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式有误', trigger: 'blur'}
                ],
                accountNoExpired : [
                    { required: true, message: '请选择账号是否未过期', trigger: 'blur' },
                ],
                credentialsNoExpired : [
                    { required: true, message: '请选择密码是否未过期', trigger: 'blur' },
                ],
                accountNoLocked : [
                    { required: true, message: '请选择账号是否未未锁定', trigger: 'blur' },
                ],
                accountEnabled : [
                    { required: true, message: '请选择账号是否可用', trigger: 'blur' },
                ]
            }
        }
    },
    mounted(){
        this.getData(1);
    },
    methods : {
        // 勾选或者取消勾选触发
        handleSelectionChange(){
            
        },
        submit(){
            let formData = new FormData();
            for(let field in newUser){
                formData.append(field,this.newUser[field]);
            }
            doPost("/api/user/add",formData).then(resp => {
                if(resp.data.code === 200){
                    messageTip("提交成功","success");
                }
                else{
                    messageTip("提交失败","error");
                }
            });
            this.dialogVisible = true;
        },
        // 自动传参
        toPage(current){
            // 把当前页作为current传递给获取数据方法,就可以实现分页查询了
            this.getData(current);
        },
        getData(current){
            //获取数据,查询用户列表数据
            doGet("api/users",{
                // 当前查询第几页
                current : current
            }).then(resp => {
                if(resp.data.code === 200){
                    this.userList = resp.data.data.list;
                    this.total = resp.data.data.total;
                    this.pageSize = resp.data.data.pageSize;
                }
            });
        },
        view(id){
            // $route是获取当前路由的属性信息,不要和router搞混了
            this.$router.push("/dashboard/user/detail/"+id);
        },
        // edit(id){
        //     // $router是调用路由对象的方法,如push跳转等
        //     this.$router.push("/dashboard/user/detail/"+id);
        // },
        // del(id){
        //     this.$router.push("/dashboard/user/detail/"+id);
        // },
        addUser(){
            this.dialogVisible = true;
        }
    }
}
</script>

<style scoped>
.el-pagination{
    margin-top: 3%;
}
.el-table{
    margin-top: 3%;
}
</style>

<template>

    <el-button type="primary" @click="addUser()">新增用户</el-button>

    <el-button type="danger">批量删除</el-button>

    <el-table

        :data="userList"

        style="width: 100%"

        @selection-change="handleSelectionChange"

    >

        <!-- 复选框    -->

        <el-table-column type="selection" width="33%" />

        <el-table-column type="index" label="序号" width="52%" />

        <el-table-column prop="loginAct" label="账号" width="90%" show-overflow-tooltip />

        <el-table-column property="name" label="姓名" width="75%" show-overflow-tooltip />

        <el-table-column property="phone" label="联系电话" show-overflow-tooltip />

        <el-table-column property="email" label="邮箱" show-overflow-tooltip />

        <el-table-column property="createTime" label="创建时间" show-overflow-tooltip />

        <el-table-column label="操作" show-overflow-tooltip>

            <template #default="scope">

                <el-button type="primary" @click="view(scope.row.id)">详情</el-button>

                <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>

                <el-button type="danger" @click="del(scope.row.id)">删除</el-button>

            </template>

        </el-table-column>

    </el-table>

    <!-- 分页条 -->

    <el-pagination

        background

        layout="prev, pager, next"

        :page-size="pageSize"

        :total="total"

        @prev-click="toPage"

        @next-click="toPage"

        @current-change="toPage"

     />

     <!-- 新增用户的弹窗(对话框) -->

     <el-dialog v-model="dialogVisible" title="新增用户" width="55%" draggable>

        <el-form ref="loginRefForm" :model="newUser" :rules="userRules">

            <el-form-item label="账号:" prop="loginAct">

                <el-input v-model="newUser.loginAct"/>

            </el-form-item>

            <el-form-item label="密码:" prop="loginPwd">

                <el-input v-model="newUser.loginPwd"/>

            </el-form-item>

            <el-form-item label="姓名:" prop="name">

                <el-input v-model="newUser.name"/>

            </el-form-item>

            <el-form-item label="联系电话:" prop="phone">

                <el-input v-model="newUser.phone"/>

            </el-form-item>

            <el-form-item label="邮箱:" prop="email">

                <el-input v-model="newUser.email"/>

            </el-form-item>

            <el-form-item label="账号未过期:" prop="accountNoExpired">

                <el-select v-model="newUser.accountNoExpired" placeholder="请选择">

                    <el-option label="是" value="1" />

                    <el-option label="否" value="0" />

                </el-select>

            </el-form-item>

            <el-form-item label="密码未过期:" prop="credentialsNoExpired">

                <el-select v-model="newUser.credentialsNoExpired" placeholder="请选择">

                    <el-option label="是" value="1" />

                    <el-option label="否" value="0" />

                </el-select>

            </el-form-item>

            <el-form-item label="账号未锁定:" prop="accountNoLocked">

                <el-select v-model="newUser.accountNoLocked" placeholder="请选择">

                    <el-option label="是" value="1" />

                    <el-option label="否" value="0" />

                </el-select>

            </el-form-item>

            <el-form-item label="账号是否启用:" prop="accountEnabled">

                <el-select v-model="newUser.accountEnabled" placeholder="请选择">

                    <el-option label="是" value="1" />

                    <el-option label="否" value="0" />

                </el-select>

            </el-form-item>

        </el-form>

        <template #footer>

        <div class="dialog-footer">

            <el-button @click="dialogVisible = false">取消</el-button>

            <el-button type="primary" @click="submit()">

            确定

            </el-button>

        </div>

        </template>

    </el-dialog>

</template>

<script>

import { doGet,doPost } from '../http/httpRequest';

import { messageTip } from '../util/util';

export default {

    name:"userView",

    data(){

        return {

            userList : [],

            pageSize : 0,

            total : 0,

            dialogVisible : false,

            newUser : {},

            userRules : {                

                // 定义用户验证规则

                loginAct : [

                    { required: true, message: '登录账号不能为空', trigger: 'blur' },

                    { min: 3, max: 32, message: '登录账号长度范围为3-32个字符', trigger: 'blur' }

                ],

                loginPwd : [

                    { required: true, message: '登录密码不能为空', trigger: 'blur' },

                    { min: 6, max: 16, message: '登录密码长度为6-16位', trigger: 'blur' }

                ],

                name : [

                    { required: true, message: '姓名不能为空', trigger: 'blur' },

                    { pattern : /^[\u4e00-\u9fa5]{0,}$/, message: '姓名必须是中文汉字', trigger: 'blur'}

                ],

                phone : [

                    { required: true, message: '手机号码不能为空', trigger: 'blur' },

                    { pattern : /^1[3-9]\d{9}$/, message: '手机号码格式有误', trigger: 'blur'}

                ],

                email : [

                    { required: true, message: '邮箱不能为空', trigger: 'blur' },

                    { pattern : /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式有误', trigger: 'blur'}

                ],

                accountNoExpired : [

                    { required: true, message: '请选择账号是否未过期', trigger: 'blur' },

                ],

                credentialsNoExpired : [

                    { required: true, message: '请选择密码是否未过期', trigger: 'blur' },

                ],

                accountNoLocked : [

                    { required: true, message: '请选择账号是否未未锁定', trigger: 'blur' },

                ],

                accountEnabled : [

                    { required: true, message: '请选择账号是否可用', trigger: 'blur' },

                ]

            }

        }

    },

    mounted(){

        this.getData(1);

    },

    methods : {

        // 勾选或者取消勾选触发

        handleSelectionChange(){

           

        },

        submit(){

            let formData = new FormData();

            for(let field in newUser){

                formData.append(field,this.newUser[field]);

            }

            doPost("/api/user/add",formData).then(resp => {

                if(resp.data.code === 200){

                    messageTip("提交成功","success");

                }

                else{

                    messageTip("提交失败","error");

                }

            });

            this.dialogVisible = true;

        },

        // 自动传参

        toPage(current){

            // 把当前页作为current传递给获取数据方法,就可以实现分页查询了

            this.getData(current);

        },

        getData(current){

            //获取数据,查询用户列表数据

            doGet("api/users",{

                // 当前查询第几页

                current : current

            }).then(resp => {

                if(resp.data.code === 200){

                    this.userList = resp.data.data.list;

                    this.total = resp.data.data.total;

                    this.pageSize = resp.data.data.pageSize;

                }

            });

        },

        view(id){

            // $route是获取当前路由的属性信息,不要和router搞混了

            this.$router.push("/dashboard/user/detail/"+id);

        },

        // edit(id){

        //     // $router是调用路由对象的方法,如push跳转等

        //     this.$router.push("/dashboard/user/detail/"+id);

        // },

        // del(id){

        //     this.$router.push("/dashboard/user/detail/"+id);

        // },

        addUser(){

            this.dialogVisible = true;

        }

    }

}

</script>

<style scoped>

.el-pagination{

    margin-top: 3%;

}

.el-table{

    margin-top: 3%;

}

</style>文章来源地址https://www.toymoban.com/news/detail-825938.html

到了这里，关于CRM项目为新增用户设置对应的前端校验规则并发送Axios请求到后端将表单数据提交用户信息------CRM项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包