SSM 单体框架 - 前端开发：用户和权限模块

1. 用户手机号
2. 注册时间,包含开始日期和结束日期

<template>
  <div>
    <div class="block">
      <span class="demonstration">带快捷选项</span>
      <el-date-picker
        v-model="dateTime"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      ></el-date-picker>
      <el-button type="primary" @click="getDate">查询</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      dateTime: ""
    };
  },
  methods: {
    getDate() {
      const params = {};
      params.startCreateTime = this.dateTime[0];
      params.startCreateTime.setHours(0);
      params.startCreateTime.setMinutes(0);
      params.startCreateTime.setSeconds(0);
      params.endCreateTime = this.dateTime[1];
      params.endCreateTime.setHours(23);
      params.endCreateTime.setMinutes(59);
      params.endCreateTime.setSeconds(59);
      console.log(params);
    }
  }
};
</script>

// 数据部分
return {
    pickerOptions, // 日期选择器选项设置
    total: 0, // 总条数
    size: 10, // 每页显示条数
    page: 1, // 当前页
    filter,
    users: [],
    loading: false,
    allocAdminId: "",
    allocDialogVisible: false,
    allocRoleIds: [],
    allRoleList: []
};

created() {
    // 初始化用户数据
    this.loadUsers();
}
// 方法 1: 加载用户数据
loadUsers() {
    this.loading = true;
    // 设置参数
    const params = { currentPage: this.page, pageSize: this.size };
    // 过滤条件
    if (this.filter.username) params.username = this.filter.username;
    // 设置日期参数
    if (this.filter.resTime) {
        params.startCreateTime = this.filter.resTime[0];
        params.startCreateTime.setHours(0);
        params.startCreateTime.setMinutes(0);
        params.startCreateTime.setSeconds(0);

        params.endCreateTime = this.filter.resTime[1];
        params.endCreateTime.setHours(23);
        params.endCreateTime.setMinutes(59);
        params.endCreateTime.setSeconds(59);
    }
    // 请求后台接口
    return axios.post("/user/findAllUserByPage", params)
        .then((res) => {
        // 用户数据
        this.users = res.data.content.list;
        this.total = res.data.content.total;
        this.loading = false;
    }).catch((err) => {
        this.$message("获取数据失败! ! !");
    });
},

<el-button size="mini" type="text" @click="handleToggleStatus(scope.row)">{{ scope.row.status == "ENABLE" ? "禁用" : "启用" }}</el-button>

// 修改用户状态
handleToggleStatus(item) {
    return axios
        .get("/user/updateUserStatus", {
        params: {
            id: item.id,
            status: item.status
        }
    })
        .then(res => {
        // debugger;
        console.log(res.data.content);
        item.status = res.data.content;
    })
        .catch(err => {
        this.$message.error("状态修改失败! ! !");
    });
},

data() {
    return {
        listQuery: { name: "" },
        list: null,
        listLoading: false,
        dialogVisible: false,
        role: Object.assign({}, defaultRole),
        isEdit: false
    };
},

created() {
    // 获取角色列表
    this.loadRoles();
},

// 获取角色数据
loadRoles() {
    return axios.post("/role/findAllRole", this.listQuery)
        .then(res => {
        this.list = res.data.content;
        this.listLoading = false;
    }).catch(err => {});
},

<el-input v-model="listQuery.name" class="input-width" placeholder="角色名称" clearable></el-input>

// 条件查询
handleSearchList() {
    this.loadRoles();
},

<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加角色</el-button>

// 添加角色弹窗
handleAdd() {
    // 打开对话框
    this.dialogVisible = true;
    // false 修改操作
    this.isEdit = false;
    this.role = Object.assign({}, defaultRole);
},

<!-- 添加&修改 角色对话框 -->
<el-dialog :title="isEdit?'编辑角色':'添加角色'" :visible.sync="dialogVisible" width="40%">
    <el-form :model="role" label-width="150px" size="small">
        <el-form-item label="角色名称：">
            <el-input v-model="role.name" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="角色编码：">
            <el-input v-model="role.code" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="描述：">
            <el-input v-model="role.description" type="textarea" :rows="5" style="width: 250px"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSave()" size="small">确 定</el-button>
    </span>
</el-dialog>

// 添加 & 修改角色
handleSave() {
    axios
        .post("/role/saveOrUpdateRole", this.role)
        .then(res => {
        this.dialogVisible = false;
        this.loadRoles();
    })
        .catch(error => {
        this.$message.error("保存课程信息失败! ! !");
    });
},

<el-button size="mini" type="text" @click="handleUpdate(scope.row)">编辑</el-button>

// 修改角色弹窗
handleUpdate(row) {
    this.dialogVisible = true;
    this.isEdit = true;
    // 回显数据
    this.role = Object.assign({}, row);
},

<el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>

handleDelete(row) {
    this.$confirm("是否要删除该角色?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        axios("/role/deleteRole?id=" + row.id)
            .then(res => {
            this.loadRoles();
        })
            .catch(err => {
            this.$message.error("操作失败! ! !");
        });
    });
},

<el-button size="mini" type="text" @click="handleSelectMenu(scope.row)">分配菜单</el-button>

// 为角色分配菜单
handleSelectMenu(row) {
    this.$router.push({ path: "/allocMenu", query: { roleId: row.id } });
},

{
    path: "allocMenu",
    name: "AllocMenu",
    component: () => import(
        /* webpackChunkName: 'allocMenu' */
        "../views/PermissionManage/AllocMenu"
    ),
    meta: { requireAuth: true, title: "角色菜单管理" }
},

data() {
    return {
        // 菜单数据
        menuTreeList: [],
        // 被选中的菜单
        checkedMenuId: [],
        // 树形结构子节点设置
        defaultProps: {
            children: "subMenuList",
            label: "name"
        },
        roleId: null
    };
},

// 钩子函数
created() {
    // 获取路由携带的 id
    this.roleId = this.$route.query.roleId;
    // 获取菜单列表
    this.treeList();
    // 获取角色所拥有的菜单信息
    this.getRoleMenu(this.roleId);
},

// 方法 1：获取菜单列表，使用树形控件展示
treeList() {
    axios.get("/role/findAllMenu").then(res => {
        console.log(res.data.content);
        // 获取树形控件所需数据
        this.menuTreeList = res.data.content.parentMenuList;
    });
},

// 方法 2：获取当前角色所拥有菜单列表 id
getRoleMenu(roleId) {
    axios.get("/role/findMenuByRoleId?roleId=" + roleId).then(res => {
        console.log(res.data.content);
        // 将已有菜单权限设置为选中
        this.$refs.tree.setCheckedKeys(res.data.content);
    });
},

<div style="margin-top: 20px" align="center">
    <el-button type="primary" @click="handleSave()">保存</el-button>
    <el-button @click="handleClear()">清空</el-button>
</div>

// 方法 3：修改角色所拥有的菜单列表
handleSave() {
    // debugger;
    // 获取所有被选中的节点
    const checkedNodes = this.$refs.tree.getCheckedNodes();
    // 定义常量保存被选中的菜单 id
    const checkedMenuIds = [];
    if (checkedNodes != null && checkedNodes.length > 0) {
        // 遍历获取节点对象
        for (let i = 0; i < checkedNodes.length; i++) {
            const checkedNode = checkedNodes[i];
            // 保存菜单列表 id
            checkedMenuIds.push(checkedNode.id);
            // 判断：当前节点为子节点 && 其父 ID 在数组没有出现过，就保存这个父 Id
            if (
                checkedNode.parentId !== -1 &&
                checkedMenuIds.filter(item => checkedNode.parentId).length === 0
            ) {
                checkedMenuIds.push(checkedNode.parentId);
            }
        }
    }
    this.$confirm("是否分配菜单？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        // 准备参数
        const params = {
            // 角色 ID
            roleId: this.roleId,
            // 当前角色拥有的菜单权限 ID
            menuIdList: checkedMenuIds
        };
        // 请求后台
        axios.post("/role/RoleContextMenu", params)
            .then(res => {
            this.$router.back();
        }).catch(err => {
            this.$message.error("权限分配失败! ! !");
        });
    });
},

data() {
    return {
        // 总条数
        total: 0,
        // 每页显示条数
        size: 10,
        // 当前页
        page: 1,
        // 广告数据
        list: [],
        listLoading: true,
        // 菜单父 id
        parentId: 0
    };
},

created() {
    // 获取菜单列表
    this.loadMenuList();
},

// 方法 1：加载菜单列表数据
loadMenuList() {
    this.listLoading = true;
    return axios
        .get("/menu/findAllMenu", {
        params: {
            currentPage: this.page,
            pageSize: this.size
        }
    })
        .then(res => {
        this.list = res.data.content.list;
        this.total = res.data.content.total;
        this.listLoading = false;
    })
        .catch(error => {
        this.$message.error("数据获取失败! ! !");
    });
},

<el-button class="btn-add" @click="handleAddMenu()" size="mini">添加菜单</el-button>

// 新增菜单跳转
handleAddMenu() {
    this.$router.push("/addMenu");
},

<template>
<menu-detail :is-edit='false'></menu-detail>
</template>
<script>
    import MenuDetail from './MenuDetail'
    export default {
        name: 'addMenu',
        title: '添加菜单',
        components: { MenuDetail }
    }
</script>

data() {
    return {
        // 菜单对象
        menu,
        // 下拉列表数据
        selectMenuList: [],
        rules
    };
},

created() {
    if (this.isEdit) {
        // 修改,回显菜单信息
        const id = this.$route.query.id;
        // 获取当前菜单和父菜单信息
        this.findMenuInfoById(id);
    } else {
        // 新增
        this.menu = {};
        // 获取父类菜单信息
        this.findMenuInfoById(-1);
    }
},

// 方法 1: 添加或修改的回显，下拉父菜单
findMenuInfoById(id) {
    axios.get("/menu/findMenuInfoById?id=" + id)
        .then(res => {
        // debugger;
        console.log(res.data);
        // 判断不为 null，修改操作需要回显
        if (res.data.content.menuInfo != null) {
            this.menu = res.data.content.menuInfo;
        }
        // 获取到父菜单信息，保存到 selectMenuList
        this.selectMenuList = res.data.content.parentMenuList.map(item => {
            return { id: item.id, title: item.name };
        });
        // -1 显示无上级菜单 (unshift 向数组的开头添加一个元素)
        this.selectMenuList.unshift({ id: -1, title: "无上级菜单" });
    }).catch(err => {
        this.$message.error("数据获取失败! ! !");
    });
},

<el-button type="primary" @click="handleSave()">提交</el-button>

// 保存菜单
handleSave() {
    this.$refs.form.validate(valid => {
        if (!valid) return false;
        axios.post("/menu/saveOrUpdateMenu", this.menu)
            .then(res => {
            this.$router.back();
        }).catch(error => {
            this.$message.error("保存课程信息失败! ! !");
        });
    });
}

// 查询条件
const listQuery = {
    currentPage: 1,
    pageSize: 5,
    name: null,
    url: null,
    categoryId: null
};
// 资源对象
const defaultResource = {
    id: null,
    name: null,
    url: null,
    categoryId: null,
    description: ""
};

data() {
    return {
        // 查询条件
        listQuery,
        total: 0,
        // 资源数据
        list: [],
        // 资源分类数据
        cateList: [],
        listLoading: false,
        dialogVisible: false,
        resource: Object.assign({}, defaultResource),
        isEdit: false,
        categoryOptions: [],
        defaultCategoryId: null
    };
},

// 钩子函数
created() {
    // 获取资源数据
    this.getResourceList();
    // 获取资源分类数据
    this.getResourceCateList();
},

// 方法 1: 获取资源数据
getResourceList() {
    this.listLoading = true;
    axios.post("/resource/findAllResource", this.listQuery)
        .then(res => {
        this.list = res.data.content.list;
        this.total = res.data.content.total;
        this.listLoading = false;
    }).catch(err => {
        this.$message.error("数据获取失败! ! !");
    });
},

// 方法 2: 获取资源分类数据
getResourceCateList() {
    axios.get("/ResourceCategory/findAllResourceCategory")
        .then(res => {
        this.cateList = res.data.content;
        // 遍历获取资源分类
        for (let i = 0; i < this.cateList.length; i++) {
            const cate = this.cateList[i];
            // 将资源分类名与 id 保存到 categoryOptions 中，供下拉列表展示
            this.categoryOptions.push({ label: cate.name, value: cate.id });
        }
        this.defaultCategoryId = this.cateList[0].id;
    })
        .catch(err => {
        this.$message.error("数据获取失败! ! !");
    });
},

<el-button style="float:right" type="primary" @click="handleSearchList()" size="small">查询搜索</el-button>

// 查询条件对象
const listQuery = {
    currentPage: 1,
    pageSize: 5,
    name: null,
    url: null,
    categoryId: null
};
// 查询按钮
handleSearchList() {
    this.getResourceList();
},

<el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>

// 添加资源回显
handleAdd() {
    // 显示表单
    this.dialogVisible = true;
    // 新增为 false
    this.isEdit = false;
    // 资源对象
    this.resource = Object.assign({}, defaultResource);
    // 保存默认分类 id
    this.resource.categoryId = this.defaultCategoryId;
},

<el-form-item label="资源分类：">
    <el-select v-model="resource.categoryId" placeholder="全部" clearable style="width: 250px">
        <el-option v-for="item in categoryOptions"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
    </el-select>
</el-form-item>

<el-button type="primary" @click="handleSave()" size="small">确 定</el-button>

// 添加 & 修改资源
handleSave() {
    axios.post("/resource/saveOrUpdateResource", this.resource)
        .then(res => {
        this.dialogVisible = false;
        this.getResourceList();
    }).catch(error => {
        this.$message.error("操作失败! ! !");
    });
},

<el-button size="mini" type="text" @click="handleUpdate(scope.row)">编辑</el-button> 

// 编辑资源 回显
handleUpdate(row) {
    // debugger;
    this.dialogVisible = true;
    this.isEdit = true;
    this.resource = Object.assign({}, row);
},