CRM项目完成批量删除的前端请求发送并使用v-if实现局部路由组件刷新重新渲染------CRM项目

2024-03-05 23:00:06 分类：前端 热度：96 评论： 0 

<template>
    <el-button type="primary" @click="addUser()">新增用户</el-button>
    <el-button type="danger" @click="batchDel()">批量删除</el-button>
    <button @click="flash()">shsbs</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="su***ess" @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="Title" width="55%" draggable>
        <el-form ref="userRefForm" :model="newUser" :rules="userRules">
            <el-form-item label="账号:" prop="loginAct">
                <el-input v-model="newUser.loginAct"/>
            </el-form-item>
            <el-form-item label="密码:" v-if="newUser.id">
                <el-input v-model="newUser.loginPwd" type="password" placeholder="密码默认不可见,可在此修改"/>
            </el-form-item>
            <el-form-item label="密码:" prop="loginPwd" v-else>
                <el-input v-model="newUser.loginPwd" type="password"/>
            </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" type="email"/>
            </el-form-item>
            <el-form-item label="账号未过期:" prop="a***ountNoExpired">
                <el-select v-model="newUser.a***ountNoExpired" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="密码未过期:" prop="credentialsNoExpired">
                <el-select v-model="newUser.credentialsNoExpired" placeholder="请选择">              
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="账号未锁定:" prop="a***ountNoLocked">
                <el-select v-model="newUser.a***ountNoLocked" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
            </el-select>
            </el-form-item>
            <el-form-item label="账号是否启用:" prop="a***ountEnabled">
                <el-select v-model="newUser.a***ountEnabled" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </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, doPut, doDelete } from '../http/httpRequest';
import { messageTip, messageConfirm } from '../util/util';
export default {
    name:"userView",
    inject : ['reload'],
    data(){
        return {
            userList : [],
            pageSize : 0,
            total : 0,
            dialogVisible : false,
            newUser : {},
            // 标题
            Title : "",
            selectedIds : [],
            // 下拉选项
            options : [
                { label : "是", value : 1 },
                { label : "否", value : 0 }
            ],
            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'}
                ],
                a***ountNoExpired : [
                    { required: true, message: '请选择账号是否未过期', trigger: 'blur' },
                ],
                credentialsNoExpired : [
                    { required: true, message: '请选择密码是否未过期', trigger: 'blur' },
                ],
                a***ountNoLocked : [
                    { required: true, message: '请选择账号是否未未锁定', trigger: 'blur' },
                ],
                a***ountEnabled : [
                    { required: true, message: '请选择账号是否可用', trigger: 'blur' },
                ]
            }
        }
    },
    mounted(){
        this.getData(1);
    },
    methods : {
        // 勾选或者取消勾选触发
        handleSelectionChange(selectionItems){
            this.selectedIds = [];
            // 将已经勾选的数据传给我们
            selectionItems.forEach(data => {
                this.selectedIds.push(data.id);
            });
        },
        flash(){
            this.reload();
        },
        batchDel(){
            if(!this.selectedIds.length){
                messageTip("请选择要删除的数据","warning");
                return;
            }
            messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
                let ids = this.selectedIds.join(",");
                doDelete("/api/user/batchDel",{ids : ids}).then(resp => {
                    if(resp.data.code === 200){
                        messageTip("批量删除成功","su***ess");
                        this.reload();
                    }
                    else{
                        messageTip("批量删除失败:"+resp.data.msg,"error");
                    }
                });
            }).catch(() => {
              messageTip("已取消批量删除","warning");
            });  
        },
        submit(){
            let formData = new FormData();
            for(let field in this.newUser){
                formData.append(field,this.newUser[field]);
            }
            this.$refs.userRefForm.validate((isValid) => {
                if(isValid){
                    if(this.newUser.id){
                        doPut("/api/user/edit",formData).then(resp => {
                            if(resp.data.code === 200){
                                messageTip("修改成功","su***ess");
                                this.dialogVisible = false;
                                this.reload();
                            }
                            else{
                                messageTip("修改失败","error");
                            }
                        });
                    }
                    else{
                        doPost("/api/user/add",formData).then(resp => {
                        if(resp.data.code === 200){
                            messageTip("提交成功","su***ess");
                            this.dialogVisible = false;
                            this.reload();
                        }
                        else{
                            messageTip("提交失败","error");
                        }
                    });
                    }
                }
            });
        },
        // 自动传参
        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){
            this.Title = "修改用户信息";
            // $router是调用路由对象的方法,如push跳转等
            this.dialogVisible = true;
            this.loadUser(id);
        },
        loadUser(id){
            doGet("/api/user/" + id,{}).then(resp => {
                if(resp.data.code === 200){
                    this.newUser = resp.data.data;
                    this.newUser.loginPwd = "";
                }
            });
        },
        del(id){
            messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
                // 点击确定按钮
                doDelete("/api/user/del/" + id,{}).then(resp => {
                    if(resp.data.code === 200){
                        messageTip('删除成功','su***ess');
                        this.reload();
                    }
                    else{
                        messageTip('删除失败:'+resp.data.msg,'error');
                    }
                });
                }).catch(() => {
                // 点击取消按钮
                    messageTip("已取消删除",'warning');
            });
        },
        addUser(){
            this.newUser = {};
            this.dialogVisible = true;
            this.Title = "新增用户";
        }
    }
}
</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" @click="batchDel()">批量删除</el-button>

    <button @click="flash()">shsbs</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="su***ess" @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="Title" width="55%" draggable>

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

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

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

            </el-form-item>

            <el-form-item label="密码:" v-if="newUser.id">

                <el-input v-model="newUser.loginPwd" type="password" placeholder="密码默认不可见,可在此修改"/>

            </el-form-item>

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

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

            </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" type="email"/>

            </el-form-item>

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

                <el-select v-model="newUser.a***ountNoExpired" placeholder="请选择">

                    <el-option

                        v-for="item in options"

                        :key="item.value"

                        :label="item.label"

                        :value="item.value"

                    />

                </el-select>

            </el-form-item>

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

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

                    <el-option

                            v-for="item in options"

                            :key="item.value"

                            :label="item.label"

                            :value="item.value"

                    />

                </el-select>

            </el-form-item>

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

                <el-select v-model="newUser.a***ountNoLocked" placeholder="请选择">

                    <el-option

                            v-for="item in options"

                            :key="item.value"

                            :label="item.label"

                            :value="item.value"

                    />

            </el-select>

            </el-form-item>

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

                <el-select v-model="newUser.a***ountEnabled" placeholder="请选择">

                    <el-option

                            v-for="item in options"

                            :key="item.value"

                            :label="item.label"

                            :value="item.value"

                    />

                </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, doPut, doDelete } from '../http/httpRequest';

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

export default {

    name:"userView",

    inject : ['reload'],

    data(){

        return {

            userList : [],

            pageSize : 0,

            total : 0,

            dialogVisible : false,

            newUser : {},

            // 标题

            Title : "",

            selectedIds : [],

            // 下拉选项

            options : [

                { label : "是", value : 1 },

                { label : "否", value : 0 }

            ],

            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'}

                ],

                a***ountNoExpired : [

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

                ],

                credentialsNoExpired : [

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

                ],

                a***ountNoLocked : [

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

                ],

                a***ountEnabled : [

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

                ]

            }

        }

    },

    mounted(){

        this.getData(1);

    },

    methods : {

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

        handleSelectionChange(selectionItems){

            this.selectedIds = [];

            // 将已经勾选的数据传给我们

            selectionItems.forEach(data => {

                this.selectedIds.push(data.id);

            });

        },

        flash(){

            this.reload();

        },

        batchDel(){

            if(!this.selectedIds.length){

                messageTip("请选择要删除的数据","warning");

                return;

            }

            messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {

                let ids = this.selectedIds.join(",");

                doDelete("/api/user/batchDel",{ids : ids}).then(resp => {

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

                        messageTip("批量删除成功","su***ess");

                        this.reload();

                    }

                    else{

                        messageTip("批量删除失败:"+resp.data.msg,"error");

                    }

                });

            }).catch(() => {

              messageTip("已取消批量删除","warning");

            });  

        },

        submit(){

            let formData = new FormData();

            for(let field in this.newUser){

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

            }

            this.$refs.userRefForm.validate((isValid) => {

                if(isValid){

                    if(this.newUser.id){

                        doPut("/api/user/edit",formData).then(resp => {

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

                                messageTip("修改成功","su***ess");

                                this.dialogVisible = false;

                                this.reload();

                            }

                            else{

                                messageTip("修改失败","error");

                            }

                        });

                    }

                    else{

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

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

                            messageTip("提交成功","su***ess");

                            this.dialogVisible = false;

                            this.reload();

                        }

                        else{

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

                        }

                    });

                    }

                }

            });

        },

        // 自动传参

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

            this.Title = "修改用户信息";

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

            this.dialogVisible = true;

            this.loadUser(id);

        },

        loadUser(id){

            doGet("/api/user/" + id,{}).then(resp => {

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

                    this.newUser = resp.data.data;

                    this.newUser.loginPwd = "";

                }

            });

        },

        del(id){

            messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {

                // 点击确定按钮

                doDelete("/api/user/del/" + id,{}).then(resp => {

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

                        messageTip('删除成功','su***ess');

                        this.reload();

                    }

                    else{

                        messageTip('删除失败:'+resp.data.msg,'error');

                    }

                });

                }).catch(() => {

                // 点击取消按钮

                    messageTip("已取消删除",'warning');

            });

        },

        addUser(){

            this.newUser = {};

            this.dialogVisible = true;

            this.Title = "新增用户";

        }

    }

}

</script>

<style scoped>

.el-pagination{

    margin-top: 3%;

}

.el-table{

    margin-top: 3%;

}

</style>

<template>
    <el-container>
        <!-- 左侧 -->
      <el-aside :width="isShowed ? '3.4%' : '17%'">
        <div class="menuTitle">{{ isShowed ? "" : title }}</div>
        <!-- 菜单 -->
        <el-menu
        active-text-color="#ffd04b"
        background-color="#334157"
        class="el-menu-vertical-demo"
        default-active="2"
        style="border-right: solid 0px;"
        :unique-opened="true"
        text-color="#fff"
        :collapse="isShowed"
        :collapse-transition="false"
        :router="true"
      >
      <!-- 市场活动菜单 -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon><OfficeBuilding /></el-icon>
            <span>市场活动</span>
          </template>
          <!-- 二级目录 -->
          <el-menu-item index="1-1">
            <el-icon><OfficeBuilding /></el-icon>
            市场活动
          </el-menu-item>
          <el-menu-item index="1-2">
            <el-icon><OfficeBuilding /></el-icon>
            市场统计
          </el-menu-item>
        </el-sub-menu>
      <!-- 线索管理菜单 -->
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Operation /></el-icon>
            <span>线索管理</span>
          </template>
          <!-- 二级目录 -->
          <el-menu-item index="2-1">
            <el-icon><OfficeBuilding /></el-icon>
            线索管理
          </el-menu-item>
          <el-menu-item index="2-2">
            <el-icon><OfficeBuilding /></el-icon>
            线索统计
          </el-menu-item>
        </el-sub-menu>
      <!-- 客户管理菜单 -->
        <el-sub-menu index="3">
          <template #title>
            <el-icon><User /></el-icon>
            <span>客户管理</span>
          </template>
          <!-- 二级目录 -->
          <el-menu-item index="3-1">
            <el-icon><OfficeBuilding /></el-icon>
            客户管理
          </el-menu-item>
          <el-menu-item index="3-2">
            <el-icon><OfficeBuilding /></el-icon>
            客户统计
          </el-menu-item>
        </el-sub-menu>
      <!-- 交易管理菜单 -->
        <el-sub-menu index="4">
          <template #title>
            <el-icon><location /></el-icon>
            <span>交易管理</span>
          </template>
          <!-- 二级目录 -->
          <el-menu-item index="4-1">
            <el-icon><OfficeBuilding /></el-icon>
            交易管理
          </el-menu-item>
          <el-menu-item index="4-2">
            <el-icon><OfficeBuilding /></el-icon>
            交易统计
          </el-menu-item>
        </el-sub-menu>
      <!-- 产品管理菜单 -->
        <el-sub-menu index="5">
          <template #title>
            <el-icon><location /></el-icon>
            <span>产品管理</span>
          </template>
          <!-- 二级目录 -->
          <el-menu-item index="5-1">
            <el-icon><OfficeBuilding /></el-icon>
            产品管理
          </el-menu-item>
          <el-menu-item index="5-2">
            <el-icon><OfficeBuilding /></el-icon>
            产品统计
          </el-menu-item>
        </el-sub-menu>
        <!-- 字典管理菜单 -->
        <el-sub-menu index="6">
          <template #title>
            <el-icon><location /></el-icon>
            <span>字典管理</span>
          </template>
          <!-- 二级目录 -->
          <el-menu-item index="6-1">
            <el-icon><OfficeBuilding /></el-icon>
            字典管理
          </el-menu-item>
          <el-menu-item index="6-2">
            <el-icon><OfficeBuilding /></el-icon>
            字典统计
          </el-menu-item>
        </el-sub-menu>
        <!-- 用户管理菜单 -->
        <el-sub-menu index="7">
          <template #title>
            <el-icon><location /></el-icon>
            <span>用户管理</span>
          </template>
          <!-- 二级目录 -->
          <el-menu-item index="/dashboard/user">
            <el-icon><OfficeBuilding /></el-icon>
            用户管理
          </el-menu-item>
        </el-sub-menu>
        <!-- 系统管理菜单 -->
        <el-sub-menu index="8">
          <template #title>
            <el-icon><location /></el-icon>
            <span>系统管理</span>
          </template>
          <!-- 二级目录 -->
          <el-menu-item index="8-1">
            <el-icon><OfficeBuilding /></el-icon>
            系统管理
          </el-menu-item>
          <el-menu-item index="8-2">
            <el-icon><OfficeBuilding /></el-icon>
            系统统计
          </el-menu-item>
        </el-sub-menu>

      </el-menu>
      </el-aside>
      <el-container class="rightContent">
        <!-- 右侧上 -->
        <el-header>
          <!-- 折叠 -->
          <el-icon class="show" @click="showMenu()" v-show="isShowed===false"><Fold /></el-icon>
          <!-- 打开 -->
          <el-icon class="show" @click="showMenu()" v-show="isShowed"><Expand /></el-icon>
          <!-- 用户信息的下拉菜单 -->
          <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
              {{ user.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>我的资料</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item divided @click="logOut()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <!-- 右侧中 -->
        <el-main v-if="isRouterAlive">
          <router-view v-slot="{ ***ponent }">
            <keep-alive>
              <***ponent :is="***ponent" />
            </keep-alive>
          </router-view>
        </el-main>
        <!-- 右侧下 -->
        <el-footer>@版权所有 2000-2099 旧约Alatus 深圳市龙华区MZJDQLHY第XX栋XX总部xx号</el-footer>
      </el-container>
    </el-container>
</template>

<script>
import { doGet } from "../http/httpRequest.js";
import { messageTip, getTokenName, removeToken, messageConfirm, later } from "../util/util.js";
export default {
    name : "dashboard",
    mounted(){
      // 挂载时获取用户名
      this.loadLoginName();
    },
    // 提供者生产者
    provide(){
      return {
        // 提供了一个函数,要求必须是箭头函数
        reload: () => {
          this.isRouterAlive = false;
          //提供一个函数 (页面局部刷新函数)
          this.$nextTick(function(){
            this.isRouterAlive = true;
          })
        }
      }
    },
    methods : {
      loadLoginName(){
        if(window.localStorage.getItem(getTokenName())){
          
        }
        // 获取用户名
        doGet("/api/login/info",{}).then((resp) => {
          this.user = resp.data.data;
        });
      },
      // 左侧菜单左右展开与折叠
      showMenu(){
        // 取反即可
        this.isShowed = !this.isShowed;
      },
      // 退出登录
      logOut(){
        // 一样没有参数值,直接给个空的大括号就好
        doGet("/api/logOut",{}).then(resp => {
          if(resp.data.code === 200){
            messageTip('退出成功,即将返回首页',"su***ess");
            // 退出成功
            removeToken();
            later("/");
          }
          else{
            messageConfirm(resp.data.msg+",是否强制退出?","账号退出异常").then(() => {
              messageTip('退出成功,即将返回首页',"su***ess");
              // 后端不起作用,我们就把前端这里存的删了先
              removeToken();
              later("/");
            }).catch(() => {
              messageTip("已取消强制退出","warning");
            });
          }
        });
      }
    },
    data(){
      return {
        isShowed : false,
        // 登录的用户对象
        user : {},
        title : "@CRM管理系统",
        // 控制右侧子路由内容是否显示
        isRouterAlive : true
      }
    }
}
</script>

<style scoped>
.el-dropdown{
  float: right;
  line-height: 225%;
}
.el-aside{
    background-color: black;
}
.menuTitle{
    color: white;
    text-align: center;
    height: 5%;
    line-height: 225%;
}
.el-header{
    background-color: azure;
    height: 5%;
    line-height: 225%;
}
.el-footer{
    background-color: aliceblue;
    height: 5%;
    line-height: 225%;
    text-align: center;
}
.rightContent{
    /* 高度设置为计算高度,屏幕高度的100% */
    height: calc(100vh);
}
.show{
  /* 聚焦事件 */
  cursor: pointer;
}
</style>

<template>

    <el-container>

        <!-- 左侧 -->

      <el-aside :width="isShowed ? '3.4%' : '17%'">

        <div class="menuTitle">{{ isShowed ? "" : title }}</div>

        <!-- 菜单 -->

        <el-menu

        active-text-color="#ffd04b"

        background-color="#334157"

        class="el-menu-vertical-demo"

        default-active="2"

        style="border-right: solid 0px;"

        :unique-opened="true"

        text-color="#fff"

        :collapse="isShowed"

        :collapse-transition="false"

        :router="true"

      >

      <!-- 市场活动菜单 -->

        <el-sub-menu index="1">

          <template #title>

            <el-icon><OfficeBuilding /></el-icon>

            <span>市场活动</span>

          </template>

          <!-- 二级目录 -->

          <el-menu-item index="1-1">

            <el-icon><OfficeBuilding /></el-icon>

            市场活动

          </el-menu-item>

          <el-menu-item index="1-2">

            <el-icon><OfficeBuilding /></el-icon>

            市场统计

          </el-menu-item>

        </el-sub-menu>

      <!-- 线索管理菜单 -->

        <el-sub-menu index="2">

          <template #title>

            <el-icon><Operation /></el-icon>

            <span>线索管理</span>

          </template>

          <!-- 二级目录 -->

          <el-menu-item index="2-1">

            <el-icon><OfficeBuilding /></el-icon>

            线索管理

          </el-menu-item>

          <el-menu-item index="2-2">

            <el-icon><OfficeBuilding /></el-icon>

            线索统计

          </el-menu-item>

        </el-sub-menu>

      <!-- 客户管理菜单 -->

        <el-sub-menu index="3">

          <template #title>

            <el-icon><User /></el-icon>

            <span>客户管理</span>

          </template>

          <!-- 二级目录 -->

          <el-menu-item index="3-1">

            <el-icon><OfficeBuilding /></el-icon>

            客户管理

          </el-menu-item>

          <el-menu-item index="3-2">

            <el-icon><OfficeBuilding /></el-icon>

            客户统计

          </el-menu-item>

        </el-sub-menu>

      <!-- 交易管理菜单 -->

        <el-sub-menu index="4">

          <template #title>

            <el-icon><location /></el-icon>

            <span>交易管理</span>

          </template>

          <!-- 二级目录 -->

          <el-menu-item index="4-1">

            <el-icon><OfficeBuilding /></el-icon>

            交易管理

          </el-menu-item>

          <el-menu-item index="4-2">

            <el-icon><OfficeBuilding /></el-icon>

            交易统计

          </el-menu-item>

        </el-sub-menu>

      <!-- 产品管理菜单 -->

        <el-sub-menu index="5">

          <template #title>

            <el-icon><location /></el-icon>

            <span>产品管理</span>

          </template>

          <!-- 二级目录 -->

          <el-menu-item index="5-1">

            <el-icon><OfficeBuilding /></el-icon>

            产品管理

          </el-menu-item>

          <el-menu-item index="5-2">

            <el-icon><OfficeBuilding /></el-icon>

            产品统计

          </el-menu-item>

        </el-sub-menu>

        <!-- 字典管理菜单 -->

        <el-sub-menu index="6">

          <template #title>

            <el-icon><location /></el-icon>

            <span>字典管理</span>

          </template>

          <!-- 二级目录 -->

          <el-menu-item index="6-1">

            <el-icon><OfficeBuilding /></el-icon>

            字典管理

          </el-menu-item>

          <el-menu-item index="6-2">

            <el-icon><OfficeBuilding /></el-icon>

            字典统计

          </el-menu-item>

        </el-sub-menu>

        <!-- 用户管理菜单 -->

        <el-sub-menu index="7">

          <template #title>

            <el-icon><location /></el-icon>

            <span>用户管理</span>

          </template>

          <!-- 二级目录 -->

          <el-menu-item index="/dashboard/user">

            <el-icon><OfficeBuilding /></el-icon>

            用户管理

          </el-menu-item>

        </el-sub-menu>

        <!-- 系统管理菜单 -->

        <el-sub-menu index="8">

          <template #title>

            <el-icon><location /></el-icon>

            <span>系统管理</span>

          </template>

          <!-- 二级目录 -->

          <el-menu-item index="8-1">

            <el-icon><OfficeBuilding /></el-icon>

            系统管理

          </el-menu-item>

          <el-menu-item index="8-2">

            <el-icon><OfficeBuilding /></el-icon>

            系统统计

          </el-menu-item>

        </el-sub-menu>

      </el-menu>

      </el-aside>

      <el-container class="rightContent">

        <!-- 右侧上 -->

        <el-header>

          <!-- 折叠 -->

          <el-icon class="show" @click="showMenu()" v-show="isShowed===false"><Fold /></el-icon>

          <!-- 打开 -->

          <el-icon class="show" @click="showMenu()" v-show="isShowed"><Expand /></el-icon>

          <!-- 用户信息的下拉菜单 -->

          <el-dropdown :hide-on-click="false">

            <span class="el-dropdown-link">

              {{ user.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon>

            </span>

            <template #dropdown>

              <el-dropdown-menu>

                <el-dropdown-item>我的资料</el-dropdown-item>

                <el-dropdown-item>修改密码</el-dropdown-item>

                <el-dropdown-item divided @click="logOut()">退出登录</el-dropdown-item>

              </el-dropdown-menu>

            </template>

          </el-dropdown>

        </el-header>

        <!-- 右侧中 -->

        <el-main v-if="isRouterAlive">

          <router-view v-slot="{ ***ponent }">

            <keep-alive>

              <***ponent :is="***ponent" />

            </keep-alive>

          </router-view>

        </el-main>

        <!-- 右侧下 -->

        <el-footer>@版权所有 2000-2099 旧约Alatus 深圳市龙华区MZJDQLHY第XX栋XX总部xx号</el-footer>

      </el-container>

    </el-container>

</template>

<script>

import { doGet } from "../http/httpRequest.js";

import { messageTip, getTokenName, removeToken, messageConfirm, later } from "../util/util.js";

export default {

    name : "dashboard",

    mounted(){

      // 挂载时获取用户名

      this.loadLoginName();

    },

    // 提供者生产者

    provide(){

      return {

        // 提供了一个函数,要求必须是箭头函数

        reload: () => {

          this.isRouterAlive = false;

          //提供一个函数 (页面局部刷新函数)

          this.$nextTick(function(){

            this.isRouterAlive = true;

          })

        }

      }

    },

    methods : {

      loadLoginName(){

        if(window.localStorage.getItem(getTokenName())){

         

        }

        // 获取用户名

        doGet("/api/login/info",{}).then((resp) => {

          this.user = resp.data.data;

        });

      },

      // 左侧菜单左右展开与折叠

      showMenu(){

        // 取反即可

        this.isShowed = !this.isShowed;

      },

      // 退出登录

      logOut(){

        // 一样没有参数值,直接给个空的大括号就好

        doGet("/api/logOut",{}).then(resp => {

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

            messageTip('退出成功,即将返回首页',"su***ess");

            // 退出成功

            removeToken();

            later("/");

          }

          else{

            messageConfirm(resp.data.msg+",是否强制退出?","账号退出异常").then(() => {

              messageTip('退出成功,即将返回首页',"su***ess");

              // 后端不起作用,我们就把前端这里存的删了先

              removeToken();

              later("/");

            }).catch(() => {

              messageTip("已取消强制退出","warning");

            });

          }

        });

      }

    },

    data(){

      return {

        isShowed : false,

        // 登录的用户对象

        user : {},

        title : "@CRM管理系统",

        // 控制右侧子路由内容是否显示

        isRouterAlive : true

      }

    }

}

</script>

<style scoped>

.el-dropdown{

  float: right;

  line-height: 225%;

}

.el-aside{

    background-color: black;

}

.menuTitle{

    color: white;

    text-align: center;

    height: 5%;

    line-height: 225%;

}

.el-header{

    background-color: azure;

    height: 5%;

    line-height: 225%;

}

.el-footer{

    background-color: aliceblue;

    height: 5%;

    line-height: 225%;

    text-align: center;

}

.rightContent{

    /* 高度设置为计算高度,屏幕高度的100% */

    height: calc(100vh);

}

.show{

  /* 聚焦事件 */

  cursor: pointer;

}

</style>

转载请说明出处内容投诉
CSS教程_站长资源网 » CRM项目完成批量删除的前端请求发送并使用v-if实现局部路由组件刷新重新渲染------CRM项目
欢乐马

欢乐马

分享到：

相关推荐

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买