<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"
    >
        <!-- 復(fù)選框    -->
        <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="聯(lián)系電話" show-overflow-tooltip />
        <el-table-column property="email" label="郵箱" show-overflow-tooltip />
        <el-table-column property="createTime" label="創(chuàng)建時間" 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="聯(lián)系電話:" 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 : {                
                // 定義用戶驗證規(guī)則
                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: '手機(jī)號碼不能為空', trigger: 'blur' },
                    { pattern : /^1[3-9]\d{9}$/, message: '手機(jī)號碼格式有誤', 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 : {
        // 勾選或者取消勾選觸發(fā)
        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){
            // 把當(dāng)前頁作為current傳遞給獲取數(shù)據(jù)方法,就可以實現(xiàn)分頁查詢了
            this.getData(current);
        },
        getData(current){
            //獲取數(shù)據(jù),查詢用戶列表數(shù)據(jù)
            doGet("api/users",{
                // 當(dāng)前查詢第幾頁
                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是獲取當(dāng)前路由的屬性信息,不要和router搞混了
            this.$router.push("/dashboard/user/detail/"+id);
        },
        // edit(id){
        //     // $router是調(diào)用路由對象的方法,如push跳轉(zhuǎn)等
        //     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"

? ? >

? ? ? ? <!-- 復(fù)選框 ? ?-->

? ? ? ? <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="聯(lián)系電話" show-overflow-tooltip />

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

? ? ? ? <el-table-column property="createTime" label="創(chuàng)建時間" 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="聯(lián)系電話:" 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 : { ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? // 定義用戶驗證規(guī)則

? ? ? ? ? ? ? ? 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: '手機(jī)號碼不能為空', trigger: 'blur' },

? ? ? ? ? ? ? ? ? ? { pattern : /^1[3-9]\d{9}$/, message: '手機(jī)號碼格式有誤', 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 : {

? ? ? ? // 勾選或者取消勾選觸發(fā)

? ? ? ? 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){

? ? ? ? ? ? // 把當(dāng)前頁作為current傳遞給獲取數(shù)據(jù)方法,就可以實現(xiàn)分頁查詢了

? ? ? ? ? ? this.getData(current);

? ? ? ? },

? ? ? ? getData(current){

? ? ? ? ? ? //獲取數(shù)據(jù),查詢用戶列表數(shù)據(jù)

? ? ? ? ? ? doGet("api/users",{

? ? ? ? ? ? ? ? // 當(dāng)前查詢第幾頁

? ? ? ? ? ? ? ? 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是獲取當(dāng)前路由的屬性信息,不要和router搞混了

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

? ? ? ? },

? ? ? ? // edit(id){

? ? ? ? // ? ? // $router是調(diào)用路由對象的方法,如push跳轉(zhuǎn)等

? ? ? ? // ? ? 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>文章來源地址http://www.zghlxwxcb.cn/news/detail-825938.html

到了這里，關(guān)于CRM項目為新增用戶設(shè)置對應(yīng)的前端校驗規(guī)則并發(fā)送Axios請求到后端將表單數(shù)據(jù)提交用戶信息------CRM項目的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！