T2Admin 管理系统框架介绍

界面预览

系统角色层级关系定义

超级管理员｛

    客户（企业）1：｛员工1，员工2，......｝，

    客户（企业）2：｛员工1，员工2，......｝，

    ......

｝

系统管理对象是企业；

超级管理员的账号由系统（数据库、开发者）维护，超级管理员也有自己的（企业），所以不只有一个超级管理员账号，后面统一称超级管理员；

系统权限定义

超级管理员主要用于管理菜单和企业信息，如：添加菜单（路由方案后面介绍）、审核企业注册信息等；

企业审核通过之后会由系统生成一个与企业信息绑定的企业管理员账号（此账号对企业是透明的，即不可直接修改，可通过修改企业信息进行修改）；

企业管理员可在用户信息、角色信息通过配置，企业中不同用户拥有的菜单（权限），默认新创建的用户没有任何权限；

Tip:

   系统目前不支持角色组合子角色的架构，所以，角色在企业中都是一级的；

系统开发技术介绍

系统前端基于vue-element-template为基础进行开发的；

系统后端是用springboot多模块进行开发的；

系统前端组件和后端框架是相互配合使用的，通过简单的引用组件即可实现几乎所有的表格业务功能（增、删、改、查、筛选、分页等）；

接口调用规则约定成俗，使用这套系统，简单的CRUD,几乎不需要后端配合，只有复杂的业务，如报表等大量联表查询，等特殊的业务场景需要后端另外开辟接口；

不足之处：查询依赖于OneToOne,系统的请求效率可能偏低，但是开发之快基本可以无视缺点（目前公司做ERP系统有大量表格类的CRUD）；

推荐不需要响应速度的使用这个系统（不需要另外开接口），需要响应速度或则涉及很多表查询处理的可以另外开接口，不过真到了那个地位，推荐直接写存储sql函数调用（系统也有简单封装的调用方法^_^）;

前端页面开发示例

(以下页面实现了基础的表格过滤筛选CRUD,以及其子集明细的可编辑的表格功能 by 20200228)

<template>
  <div>
    <tz-table  ref="tzTable"
               :api-url="api" :action="['delete','edit']"
               :table-column="tableColumn" showIndex
               :edit-column="editColumn"
               :action-others='[
                 {title:"预览",icon:"el-icon-view",onClick:openDataModal},
               ]'
    >
    </tz-table>


    <div class="data-album-el-dialog">
      <el-drawer
              :title="album.title"
              v-model="isDrawerShow"
              direction="rtl"
              size="50%"
      >
        <tz-editable-table  ref="tzEditableTable"
                   :api-url="picApi" :action="['delete','edit','save','cancel']"
                    showIndex
                   :table-column="picEditColumn"
                   :other-height="50"
                   :edit-column-default-value="{'albumId':album.id}"
                   :operation-others="[
                           {title:'预览',onClick:()=>this.previewPic()}
                   ]"
        >
        </tz-editable-table>


        <div>
          <el-image-viewer v-show="showViewer" :url-list="previewPicArr" @close="()=>this.showViewer=false"></el-image-viewer>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
  import TZTable from "@/components/TZTable/index";
  import TZEditableTable from "@/components/TZEditableTable/index";
  import {ElImageViewer} from 'element-plus'

  export default {
    name: 'Album',
    components: {
      "tz-table":TZTable,
      "tz-editable-table":TZEditableTable,
      "el-image-viewer":ElImageViewer
    },
    data:function(){
      return {
        api:"/data_api/album",
        picApi:"",
        isDrawerShow:false,
        album:{},//当前选中的album
        previewPicArr:[],//预览图片
        showViewer:false,
      }
    },
    created(){},
    computed: {
      tableColumn(){
        return [
          {prop:"title",label:"标题",filterable:true},
        ]
      },
      editColumn(){
        return [
          {prop:"title", label:"标题", iType:"text",required:true,iSpan:24},
        ];
      },
      picEditColumn(){
        return [
          {prop:"url", label:"图片",imageUploadApi:"/service_api/aliyunoss/upload_picture/deletable",iType:"image",width:"100px",height:"50px",style:"width:40px;height:40px"}
        ];
      },
    },
    methods:{
      //设置预览图片
      previewPic(){
        let data = this.$refs.tzEditableTable.tableData;
        if(data.length==0){
          this.$message.warning("无可预览的图片");
          return false;
        }
        let imageArr = [];
        data.forEach(item=>imageArr.push(item.url))
        this.previewPicArr=imageArr;
        this.showViewer=true;
      },
      openDataModal(row){
        this.isDrawerShow=true;
        this.album=row;
        this.picApi="/data_api/album_pic?albumId@EQ="+row.id;
      },
    }
  }
</script>

后端技术介绍

主要使用springboot多模块进行开发；

-springboot2.2.9.RELEASE

-数据持久化框架用的是JPA(不得不说jpa的builder用起来真的是舒服！)

<!-- Spring Dependencies -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-dependencies</artifactId>
    <version>2.2.9.RELEASE</version>
    <type>pom</type>
    <scope>import</scope>
</dependency>

目录结构（所有的服务都应该依赖于commin-utils）

后端主要的核心代码是 SysBaseService.java这个文件,公共Service,继承了这个类即可实现增删改查,按照一定的约定进行传递参数即可实现所有出分组查询外的查询，但是这个不足之处是OneToOne不易过多，当涉及到大量OneToOne的时候请另外开接口进行查询，OneToOne层级注意不能太深（不在乎效率请忽略^_^）；

当前这里面也有给后端使用的分组（groupBy）接口,如下示例:

当前也有一些稍微有点逻辑和技术含量的工具类，比如这个PlaceholderStr.java（占位符号构建字符串）^_^

用于场景:后端返回的字符串提示信息统一用此类包装，用于格式转换、国际化等需求;

前端技术介绍

T2Admin System 管理后台(前端)

基础框架：element-template

UI框架:element-plus 2.2.0

vue3.2.0

后端配合框架:my_admin_api(自制)

---

后端使用说明请自己看代码，有注释；

文档链接

服务器部署安装请移步:

https://gitee.com/tangzhangss/T2Admin/blob/master/api/README.md

前端组件更新频繁具体请移步:

https://gitee.com/tangzhangss/T2Admin/blob/master/web/README.md

目前仅仅是做了一个基础模板，后续再升级；

这里只是简单介绍,更多细节升级请阅读源码；

<<开源地址>>

https://gitee.com/tangzhangss/T2Admin.git