Merge branch 'gin-vue-admin_v2_dev' of https://github.com/flipped-aurora/gin-vue-admin into gin-vue-admin_v2_dev

CONTRIBUTING.md

@@ -0,0 +1,19 @@
+
+### Contributing Guide
+#### 1 Issue Guidelines
+
+- Issues are exclusively for bug reports, feature requests and design-related topics. Other questions may be closed directly. If any questions come up when you are using Element, please hit [Gitter](https://gitter.im/element-en/Lobby) for help.
+
+- Before submitting an issue, please check if similar problems have already been issued.
+
+#### 2 Pull Request Guidelines
+
+- Fork this repository to your own account. Do not create branches here.
+
+- Commit info should be formatted as `[File Name]: Info about commit.` (e.g. `README.md: Fix xxx bug`)
+
+- <font color=red>Make sure PRs are created to `develop` branch instead of `master` branch.</font>
+
+- If your PR fixes a bug, please provide a description about the related bug.
+
+- Merging a PR takes two maintainers: one approves the changes after reviewing, and then the other reviews and merges.

server/db/qmplus.sql

@@ -11,7 +11,7 @@
  Target Server Version : 50644
  File Encoding         : 65001
 
- Date: 24/04/2020 10:28:38
+ Date: 30/04/2020 20:47:13
 */
 
 SET NAMES utf8mb4;
@@ -3833,7 +3833,13 @@ CREATE TABLE `exa_file_upload_and_downloads`  (
   PRIMARY KEY (`id`) USING BTREE,
   INDEX `idx_file_upload_and_downloads_deleted_at`(`deleted_at`) USING BTREE,
   INDEX `idx_exa_file_upload_and_downloads_deleted_at`(`deleted_at`) USING BTREE
-) ENGINE = InnoDB AUTO_INCREMENT = 16 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
+) ENGINE = InnoDB AUTO_INCREMENT = 20 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
+
+-- ----------------------------
+-- Records of exa_file_upload_and_downloads
+-- ----------------------------
+INSERT INTO `exa_file_upload_and_downloads` VALUES (17, '2020-04-26 11:51:39', '2020-04-26 11:51:39', NULL, '10.png', 'http://qmplusimg.henrongyi.top/158787308910.png', 'png', '158787308910.png');
+INSERT INTO `exa_file_upload_and_downloads` VALUES (19, '2020-04-27 15:48:38', '2020-04-27 15:48:38', NULL, 'logo.png', 'http://qmplusimg.henrongyi.top/1587973709logo.png', 'png', '1587973709logo.png');
 
 -- ----------------------------
 -- Table structure for exa_files
@@ -4040,6 +4046,7 @@ INSERT INTO `sys_authority_menus` VALUES ('888', 38);
 INSERT INTO `sys_authority_menus` VALUES ('888', 40);
 INSERT INTO `sys_authority_menus` VALUES ('888', 41);
 INSERT INTO `sys_authority_menus` VALUES ('888', 42);
+INSERT INTO `sys_authority_menus` VALUES ('888', 45);
 INSERT INTO `sys_authority_menus` VALUES ('8881', 1);
 INSERT INTO `sys_authority_menus` VALUES ('8881', 2);
 INSERT INTO `sys_authority_menus` VALUES ('8881', 18);
@@ -4092,16 +4099,16 @@ CREATE TABLE `sys_base_menus`  (
   PRIMARY KEY (`id`) USING BTREE,
   INDEX `idx_base_menus_deleted_at`(`deleted_at`) USING BTREE,
   INDEX `idx_sys_base_menus_deleted_at`(`deleted_at`) USING BTREE
-) ENGINE = InnoDB AUTO_INCREMENT = 45 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
+) ENGINE = InnoDB AUTO_INCREMENT = 46 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
 
 -- ----------------------------
 -- Records of sys_base_menus
 -- ----------------------------
 INSERT INTO `sys_base_menus` VALUES (1, '2019-09-19 22:05:18', '2020-04-24 10:16:42', NULL, 0, 0, 'dashboard', 'dashboard', 0, 'view/dashboard/index.vue', '仪表盘', 'setting', '仪表盘', 1, 0, 0);
-INSERT INTO `sys_base_menus` VALUES (2, '2019-09-19 22:06:17', '2020-04-24 10:16:43', NULL, 0, 0, 'test', 'test', 0, 'view/test/index.vue', '测试菜单', 'info', '测试菜单', 2, 0, 0);
+INSERT INTO `sys_base_menus` VALUES (2, '2019-09-19 22:06:17', '2020-04-30 17:50:34', NULL, 0, 0, 'about', 'about', 0, 'view/about/index.vue', '关于我们', 'info', '测试菜单', 7, 0, 0);
 INSERT INTO `sys_base_menus` VALUES (3, '2019-09-19 22:06:38', '2020-04-24 10:16:43', NULL, 0, 0, 'admin', 'superAdmin', 0, 'view/superAdmin/index.vue', '超级管理员', 'user-solid', '超级管理员', 3, 0, 0);
 INSERT INTO `sys_base_menus` VALUES (4, '2019-09-19 22:11:53', '2020-04-24 10:16:42', NULL, 0, 3, 'authority', 'authority', 0, 'view/superAdmin/authority/authority.vue', '角色管理', 's-custom', '角色管理', 1, 0, 0);
-INSERT INTO `sys_base_menus` VALUES (5, '2019-09-19 22:13:18', '2020-04-24 10:16:43', NULL, 0, 3, 'menu', 'menu', 0, 'view/superAdmin/menu/menu.vue', '菜单管理', 's-order', '菜单管理', 2, 0, 0);
+INSERT INTO `sys_base_menus` VALUES (5, '2019-09-19 22:13:18', '2020-04-30 17:45:27', NULL, 0, 3, 'menu', 'menu', 0, 'view/superAdmin/menu/menu.vue', '菜单管理', 's-order', '菜单管理', 2, 1, 0);
 INSERT INTO `sys_base_menus` VALUES (6, '2019-09-19 22:13:36', '2020-04-24 10:16:43', NULL, 0, 3, 'api', 'api', 0, 'view/superAdmin/api/api.vue', 'api管理', 's-platform', 'api管理', 3, 1, 0);
 INSERT INTO `sys_base_menus` VALUES (17, '2019-10-09 15:12:29', '2020-04-24 10:16:43', NULL, 0, 3, 'user', 'user', 0, 'view/superAdmin/user/user.vue', '用户管理', 'coordinate', '用户管理', 4, 0, 0);
 INSERT INTO `sys_base_menus` VALUES (18, '2019-10-15 22:27:22', '2020-04-24 10:16:43', NULL, 0, 0, 'person', 'person', 1, 'view/person/person.vue', '个人信息', 'user-solid', '个人信息', 4, 0, 0);
@@ -4117,6 +4124,7 @@ INSERT INTO `sys_base_menus` VALUES (38, '2020-03-29 21:31:03', '2020-04-24 10:1
 INSERT INTO `sys_base_menus` VALUES (40, '2020-03-29 21:35:10', '2020-04-24 10:16:43', NULL, 0, 38, 'autoCode', 'autoCode', 0, 'view/systemTools/autoCode/index.vue', '代码生成器', 'cpu', '代码生成器', 1, 0, 0);
 INSERT INTO `sys_base_menus` VALUES (41, '2020-03-29 21:36:26', '2020-04-24 10:16:43', NULL, 0, 38, 'formCreate', 'formCreate', 0, 'view/systemTools/formCreate/index.vue', '表单生成器', 'magic-stick', '表单生成器', 2, 0, 0);
 INSERT INTO `sys_base_menus` VALUES (42, '2020-04-02 14:19:36', '2020-04-24 10:16:43', NULL, 0, 38, 'system', 'system', 0, 'view/systemTools/system/system.vue', '系统配置', 's-operation', '系统配置', 3, 0, 0);
+INSERT INTO `sys_base_menus` VALUES (45, '2020-04-29 17:19:34', '2020-04-30 17:44:44', NULL, 0, 0, 'iconList', 'iconList', 0, 'view/iconList/index.vue', '图标集合', 'star-on', NULL, 2, 0, 0);
 
 -- ----------------------------
 -- Table structure for sys_data_authority_id

server/model/sys_auto_code.go

@@ -10,7 +10,8 @@ type AutoCodeStruct struct {
 
 type Field struct {
 	FieldName  string `json:"fieldName"`
+	FieldDesc  string `json:"fieldDesc"`
 	FieldType  string `json:"fieldType"`
 	FieldJson  string `json:"fieldJson"`
 	ColumnName string `json:"columnName"`
-}
+}

server/resource/template/fe/api.js.tpl

@@ -58,7 +58,7 @@ export const create{{.StructName}} = (data) => {
 // @Param data body model.{{.StructName}} true "用id查询{{.StructName}}"
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"查询成功"}"
 // @Router /{{.Abbreviation}}/find{{.StructName}} [get]
- export const find{{.StructName}} = (data) => {
+ export const find{{.StructName}} = (params) => {
      return service({
          url: "/{{.Abbreviation}}/find{{.StructName}}",
          method: 'get',
@@ -75,7 +75,7 @@ export const create{{.StructName}} = (data) => {
 // @Param data body request.PageInfo true "分页获取{{.StructName}}列表"
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"获取成功"}"
 // @Router /{{.Abbreviation}}/get{{.StructName}}List [get]
- export const get{{.StructName}}List = (data) => {
+ export const get{{.StructName}}List = (params) => {
      return service({
          url: "/{{.Abbreviation}}/get{{.StructName}}List",
          method: 'get',

server/resource/template/fe/table.vue.tpl

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <div class="search-term">
+      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
+            此处请使用表单生成器生成form填充 表单默认绑定 formData 如手动修改过请自行修改key
+        <el-form-item>
+          <el-button @click="openDialog" type="primary">新增</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-table
+      :data="tableData"
+      border
+      ref="multipleTable"
+      stripe
+      style="width: 100%"
+      tooltip-effect="dark"
+    >
+    <el-table-column type="selection" width="55"></el-table-column>
+    <el-table-column label="日期" width="180">
+         <template slot-scope="scope">{{ "{{scope.row.CreatedAt|formatDate}}" }}</template>
+    </el-table-column>
+    {{range .Fields}}
+     <el-table-column label="{{.FieldDesc}}" prop="{{.FieldJson}}" width="120"></el-table-column>
+    {{ end }}
+      <el-table-column label="按钮组">
+        <template slot-scope="scope">
+          <el-button @click="update{{.StructName}}(scope.row)" size="small" type="text">变更</el-button>
+          <el-popover placement="top" width="160" v-model="scope.row.visible">
+            <p>确定要删除吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
+              <el-button type="primary" size="mini" @click="delete{{.StructName}}(scope.row)">确定</el-button>
+            </div>
+            <el-button type="text" size="mini" slot="reference">删除</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :current-page="page"
+      :page-size="pageSize"
+      :page-sizes="[10, 30, 50, 100]"
+      :style="{float:'right',padding:'20px'}"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+      layout="total, sizes, prev, pager, next, jumper"
+    ></el-pagination>
+
+    <el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="弹窗操作">
+      此处请使用表单生成器生成form填充 表单默认绑定 formData 如手动修改过请自行修改key
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="closeDialog">取 消</el-button>
+        <el-button @click="enterDialog" type="primary">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+    create{{.StructName}},
+    delete{{.StructName}},
+    update{{.StructName}},
+    find{{.StructName}},
+    get{{.StructName}}List
+} from "@/api/{{.StructName}}";  //  此处请自行替换地址
+import { formatTimeToStr } from "@/utils/data";
+import infoList from "@/components/mixins/infoList";
+
+export default {
+  name: "{{.StructName}}",
+  mixins: [infoList],
+  data() {
+    return {
+      listApi: get{{.StructName}}List,
+      dialogFormVisible: false,
+      visible: false,
+      type: "",
+      formData: {
+        {{range .Fields}}{{.FieldJson}}:null,{{ end }}
+      }
+    };
+  },
+  filters: {
+    formatDate: function(time) {
+      if (time != null && time != "") {
+        var date = new Date(time);
+        return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
+      } else {
+        return "";
+      }
+    }
+  },
+  methods: {
+    async update{{.StructName}}(row) {
+      const res = await find{{.StructName}}({ ID: row.ID });
+      this.type = "update";
+      if (res.code == 0) {
+        this.formData = res.data.re{{.Abbreviation}};
+        this.dialogFormVisible = true;
+      }
+    },
+    closeDialog() {
+      this.dialogFormVisible = false;
+      this.formData = {
+        {{range .Fields}}
+          {{.FieldJson}}:null,{{ end }}
+      };
+    },
+    async delete{{.StructName}}(row) {
+      this.visible = false;
+      const res = await delete{{.StructName}}({ ID: row.ID });
+      if (res.code == 0) {
+        this.$message({
+          type: "success",
+          message: "删除成功"
+        });
+        this.getTableData();
+      }
+    },
+    async enterDialog() {
+      let res;
+      switch (this.type) {
+        case "create":
+          res = await create{{.StructName}}(this.formData);
+          break;
+        case "update":
+          res = await update{{.StructName}}(this.formData);
+          break;
+        default:
+          res = await create{{.StructName}}(this.formData);
+          break;
+      }
+
+      if (res.code == 0) {
+        this.closeDialog();
+        this.getTableData();
+      }
+    },
+    openDialog() {
+      this.type = "create";
+      this.dialogFormVisible = true;
+    }
+  },
+  created() {
+    this.getTableData();
+  }
+};
+</script>
+
+<style>
+</style>

server/service/sys_auto_code.go

@@ -3,8 +3,8 @@ package service
 import (
 	"gin-vue-admin/model"
 	"gin-vue-admin/utils"
-	"html/template"
 	"os"
+	"text/template"
 )
 
 // @title    CreateTemp
@@ -35,6 +35,10 @@ func CreateTemp(autoCode model.AutoCodeStruct) (err error) {
 	if err != nil {
 		return err
 	}
+	feTableTmpl, err := template.ParseFiles(basePath + "/fe/table.vue.tpl")
+	if err != nil {
+		return err
+	}
 	readmeTmpl, err := template.ParseFiles(basePath + "/readme.txt.tpl")
 	if err != nil {
 		return err
@@ -52,7 +56,8 @@ func CreateTemp(autoCode model.AutoCodeStruct) (err error) {
 	_fe := "./autoCode/fe/"
 	_fe_dir := _fe + autoCode.PackageName
 	_fe_apidir := _fe + autoCode.PackageName + "/api"
-	err = utils.CreateDir(_autoCode, _te, _dir, _modeldir, _apidir, _routerdir, _servicedir, _fe, _fe_dir, _fe_apidir)
+	_fe_tabledir := _fe + autoCode.PackageName + "/table"
+	err = utils.CreateDir(_autoCode, _te, _dir, _modeldir, _apidir, _routerdir, _servicedir, _fe, _fe_dir, _fe_apidir, _fe_tabledir)
 	if err != nil {
 		return err
 	}
@@ -76,6 +81,11 @@ func CreateTemp(autoCode model.AutoCodeStruct) (err error) {
 	if err != nil {
 		return err
 	}
+	fetable, err := os.OpenFile(_fe+autoCode.PackageName+"/table/"+autoCode.PackageName+".vue", os.O_CREATE|os.O_WRONLY, 0755)
+	if err != nil {
+		return err
+	}
+
 	readme, err := os.OpenFile(_autoCode+"readme.txt", os.O_CREATE|os.O_WRONLY, 0755)
 	if err != nil {
 		return err
@@ -102,6 +112,10 @@ func CreateTemp(autoCode model.AutoCodeStruct) (err error) {
 		if err != nil {
 			return err
 		}
+		err = feTableTmpl.Execute(fetable, autoCode)
+		if err != nil {
+			return err
+		}
 		err = readmeTmpl.Execute(readme, autoCode)
 		if err != nil {
 			return err
@@ -112,6 +126,7 @@ func CreateTemp(autoCode model.AutoCodeStruct) (err error) {
 	_ = router.Close()
 	_ = service.Close()
 	_ = feapi.Close()
+	_ = fetable.Close()
 	_ = readme.Close()
 	fileList := []string{
 		_te + autoCode.PackageName + "/model/" + autoCode.PackageName + ".go",
@@ -119,6 +134,8 @@ func CreateTemp(autoCode model.AutoCodeStruct) (err error) {
 		_te + autoCode.PackageName + "/router/" + autoCode.PackageName + ".go",
 		_te + autoCode.PackageName + "/service/" + autoCode.PackageName + ".go",
 		_fe + autoCode.PackageName + "/api/" + autoCode.PackageName + ".js",
+		_fe + autoCode.PackageName + "/table/" + autoCode.PackageName + ".vue",
+
 		_autoCode + "readme.txt",
 	}
 	err = utils.ZipFiles("./ginvueadmin.zip", fileList, ".", ".")

web/src/App.vue

@@ -18,5 +18,6 @@ export default {
 #app {
   background: #eee;
   height: 100vh;
+  overflow: hidden;
 }
 </style>

web/src/style/main.scss

@@ -664,11 +664,6 @@ li {
     }
 }
 
-// el-form
-.el-form {
-    background-color: #fff;
-    padding: 10px 0;
-}
 
 .el-row {
     padding: 10px 0;

web/src/utils/request.js

@@ -21,13 +21,13 @@ const showLoading = () => {
 }
 
 const closeLoading = () => {
-    acitveAxios--
-    if (acitveAxios <= 0) {
-        clearTimeout(timer)
-        loadingInstance && loadingInstance.close()
+        acitveAxios--
+        if (acitveAxios <= 0) {
+            clearTimeout(timer)
+            loadingInstance && loadingInstance.close()
+        }
     }
-}
-//http request 拦截器
+    //http request 拦截器
 service.interceptors.request.use(
     config => {
         showLoading()

web/src/view/dashboard/index.vue

@@ -168,7 +168,6 @@ export default {
 
 <style lang="scss" scoped>
     .big{
-        width: 100%;
         background-color: rgb(243,243,243);;
         .top{
             width: 98%;

web/src/view/example/customer/customer.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-      <div class="search-term">
+    <div class="search-term">
       <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
         <el-form-item>
           <el-button @click="openDialog" type="primary">新增客户</el-button>
@@ -25,22 +25,19 @@
       <el-table-column label="按钮组">
         <template slot-scope="scope">
           <el-button @click="updateCustomer(scope.row)" size="small" type="text">变更</el-button>
-          <el-popover
-          placement="top"
-          width="160"
-          v-model="scope.row.visible">
-          <p>确定要删除吗？</p>
-          <div style="text-align: right; margin: 0">
-            <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
-            <el-button type="primary" size="mini" @click="deleteCustomer(scope.row)">确定</el-button>
-          </div>
-          <el-button type="text" size="mini" slot="reference">删除</el-button>
-        </el-popover>
+          <el-popover placement="top" width="160" v-model="scope.row.visible">
+            <p>确定要删除吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
+              <el-button type="primary" size="mini" @click="deleteCustomer(scope.row)">确定</el-button>
+            </div>
+            <el-button type="text" size="mini" slot="reference">删除</el-button>
+          </el-popover>
         </template>
       </el-table-column>
     </el-table>
 
-      <el-pagination
+    <el-pagination
       :current-page="page"
       :page-size="pageSize"
       :page-sizes="[10, 30, 50, 100]"
@@ -64,108 +61,101 @@
         <el-button @click="closeDialog">取 消</el-button>
         <el-button @click="enterDialog" type="primary">确 定</el-button>
       </div>
-    </el-dialog>
-    在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示
+    </el-dialog>在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示
   </div>
 </template>
 
 <script>
-
 import {
   createExaCustomer,
   updateExaCustomer,
   deleteExaCustomer,
   getExaCustomer,
   getExaCustomerList
-} from '@/api/customer'
-import { formatTimeToStr } from '@/utils/data'
-import infoList from '@/components/mixins/infoList'
-import { mapGetters } from 'vuex'
+} from "@/api/customer";
+import { formatTimeToStr } from "@/utils/data";
+import infoList from "@/components/mixins/infoList";
 
 export default {
-  name: 'Customer',
-   mixins: [infoList],
-  data(){
-    return{
+  name: "Customer",
+  mixins: [infoList],
+  data() {
+    return {
       listApi: getExaCustomerList,
-      dialogFormVisible:false,
-      visible:false,
-      type:"",
-      form:{
-        customerName:"",
-        customerPhoneData:""
+      dialogFormVisible: false,
+      visible: false,
+      type: "",
+      form: {
+        customerName: "",
+        customerPhoneData: ""
       }
-    }
-  },
-  computed:{
-    ...mapGetters('user', ['token'])
+    };
   },
-   filters: {
+  filters: {
     formatDate: function(time) {
-      if (time != null && time != '') {
-        var date = new Date(time)
-        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
+      if (time != null && time != "") {
+        var date = new Date(time);
+        return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
       } else {
-        return ''
+        return "";
       }
     }
   },
-  methods:{
-    async updateCustomer(row){
-      const res = await getExaCustomer({ID:row.ID})
-      this.type = "update"
-      if(res.code == 0){
-        this.form = res.data.customer        
-        this.dialogFormVisible = true
+  methods: {
+    async updateCustomer(row) {
+      const res = await getExaCustomer({ ID: row.ID });
+      this.type = "update";
+      if (res.code == 0) {
+        this.form = res.data.customer;
+        this.dialogFormVisible = true;
       }
     },
-    closeDialog(){
-      this.dialogFormVisible = false
+    closeDialog() {
+      this.dialogFormVisible = false;
       this.form = {
-        customerName:"",
-        customerPhoneData:""
-      }
+        customerName: "",
+        customerPhoneData: ""
+      };
     },
-    async deleteCustomer(row){
-      this.visible = false
-      const res = await deleteExaCustomer({ID:row.ID})
-      if (res.code == 0){
+    async deleteCustomer(row) {
+      this.visible = false;
+      const res = await deleteExaCustomer({ ID: row.ID });
+      if (res.code == 0) {
         this.$message({
-          type:"success",
-          message:"删除成功"
-        })
-         this.getTableData()
+          type: "success",
+          message: "删除成功"
+        });
+        this.getTableData();
       }
     },
-    async enterDialog(){
-      let res 
+    async enterDialog() {
+      let res;
       switch (this.type) {
         case "create":
-          res =await createExaCustomer(this.form)
-             break;
+          res = await createExaCustomer(this.form);
+          break;
         case "update":
-           res =await updateExaCustomer(this.form)
-              break;
+          res = await updateExaCustomer(this.form);
+          break;
         default:
-          res =await createExaCustomer(this.form)
-             break;
-
+          res = await createExaCustomer(this.form);
+          break;
       }
-     
-      if(res.code == 0){
-        this.closeDialog()
-        this.getTableData()
+
+      if (res.code == 0) {
+        this.closeDialog();
+        this.getTableData();
       }
     },
-     openDialog() {
-      this.type = "create"
-      this.dialogFormVisible = true
+    openDialog() {
+      this.type = "create";
+      this.dialogFormVisible = true;
     }
   },
-  created(){
-    this.getTableData()
+  created() {
+    this.getTableData();
   }
-}
+};
 </script>
 
 <style>

web/src/view/iconList/index.vue

@@ -0,0 +1,1492 @@
+<template>
+    <ul class="icon-list clearfix">
+        <li>
+    <span>
+      <i class="el-icon-platform-eleme"></i>
+      <span class="icon-name">el-icon-platform-eleme</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-eleme"></i>
+      <span class="icon-name">el-icon-eleme</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-delete-solid"></i>
+      <span class="icon-name">el-icon-delete-solid</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-delete"></i>
+      <span class="icon-name">el-icon-delete</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-tools"></i>
+      <span class="icon-name">el-icon-s-tools</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-setting"></i>
+      <span class="icon-name">el-icon-setting</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-user-solid"></i>
+      <span class="icon-name">el-icon-user-solid</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-user"></i>
+      <span class="icon-name">el-icon-user</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-phone"></i>
+      <span class="icon-name">el-icon-phone</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-phone-outline"></i>
+      <span class="icon-name">el-icon-phone-outline</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-more"></i>
+      <span class="icon-name">el-icon-more</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-more-outline"></i>
+      <span class="icon-name">el-icon-more-outline</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-star-on"></i>
+      <span class="icon-name">el-icon-star-on</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-star-off"></i>
+      <span class="icon-name">el-icon-star-off</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-goods"></i>
+      <span class="icon-name">el-icon-s-goods</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-goods"></i>
+      <span class="icon-name">el-icon-goods</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-warning"></i>
+      <span class="icon-name">el-icon-warning</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-warning-outline"></i>
+      <span class="icon-name">el-icon-warning-outline</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-question"></i>
+      <span class="icon-name">el-icon-question</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-info"></i>
+      <span class="icon-name">el-icon-info</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-remove"></i>
+      <span class="icon-name">el-icon-remove</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-circle-plus"></i>
+      <span class="icon-name">el-icon-circle-plus</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-success"></i>
+      <span class="icon-name">el-icon-success</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-error"></i>
+      <span class="icon-name">el-icon-error</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-zoom-in"></i>
+      <span class="icon-name">el-icon-zoom-in</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-zoom-out"></i>
+      <span class="icon-name">el-icon-zoom-out</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-remove-outline"></i>
+      <span class="icon-name">el-icon-remove-outline</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-circle-plus-outline"></i>
+      <span class="icon-name">el-icon-circle-plus-outline</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-circle-check"></i>
+      <span class="icon-name">el-icon-circle-check</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-circle-close"></i>
+      <span class="icon-name">el-icon-circle-close</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-help"></i>
+      <span class="icon-name">el-icon-s-help</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-help"></i>
+      <span class="icon-name">el-icon-help</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-minus"></i>
+      <span class="icon-name">el-icon-minus</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-plus"></i>
+      <span class="icon-name">el-icon-plus</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-check"></i>
+      <span class="icon-name">el-icon-check</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-close"></i>
+      <span class="icon-name">el-icon-close</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-picture"></i>
+      <span class="icon-name">el-icon-picture</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-picture-outline"></i>
+      <span class="icon-name">el-icon-picture-outline</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-picture-outline-round"></i>
+      <span class="icon-name">el-icon-picture-outline-round</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-upload"></i>
+      <span class="icon-name">el-icon-upload</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-upload2"></i>
+      <span class="icon-name">el-icon-upload2</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-download"></i>
+      <span class="icon-name">el-icon-download</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-camera-solid"></i>
+      <span class="icon-name">el-icon-camera-solid</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-camera"></i>
+      <span class="icon-name">el-icon-camera</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-video-camera-solid"></i>
+      <span class="icon-name">el-icon-video-camera-solid</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-video-camera"></i>
+      <span class="icon-name">el-icon-video-camera</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-message-solid"></i>
+      <span class="icon-name">el-icon-message-solid</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-bell"></i>
+      <span class="icon-name">el-icon-bell</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-cooperation"></i>
+      <span class="icon-name">el-icon-s-cooperation</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-order"></i>
+      <span class="icon-name">el-icon-s-order</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-platform"></i>
+      <span class="icon-name">el-icon-s-platform</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-fold"></i>
+      <span class="icon-name">el-icon-s-fold</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-unfold"></i>
+      <span class="icon-name">el-icon-s-unfold</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-operation"></i>
+      <span class="icon-name">el-icon-s-operation</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-promotion"></i>
+      <span class="icon-name">el-icon-s-promotion</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-home"></i>
+      <span class="icon-name">el-icon-s-home</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-release"></i>
+      <span class="icon-name">el-icon-s-release</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-ticket"></i>
+      <span class="icon-name">el-icon-s-ticket</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-management"></i>
+      <span class="icon-name">el-icon-s-management</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-open"></i>
+      <span class="icon-name">el-icon-s-open</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-shop"></i>
+      <span class="icon-name">el-icon-s-shop</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-marketing"></i>
+      <span class="icon-name">el-icon-s-marketing</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-flag"></i>
+      <span class="icon-name">el-icon-s-flag</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-comment"></i>
+      <span class="icon-name">el-icon-s-comment</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-finance"></i>
+      <span class="icon-name">el-icon-s-finance</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-claim"></i>
+      <span class="icon-name">el-icon-s-claim</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-custom"></i>
+      <span class="icon-name">el-icon-s-custom</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-opportunity"></i>
+      <span class="icon-name">el-icon-s-opportunity</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-data"></i>
+      <span class="icon-name">el-icon-s-data</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-check"></i>
+      <span class="icon-name">el-icon-s-check</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-s-grid"></i>
+      <span class="icon-name">el-icon-s-grid</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-menu"></i>
+      <span class="icon-name">el-icon-menu</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-share"></i>
+      <span class="icon-name">el-icon-share</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-d-caret"></i>
+      <span class="icon-name">el-icon-d-caret</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-caret-left"></i>
+      <span class="icon-name">el-icon-caret-left</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-caret-right"></i>
+      <span class="icon-name">el-icon-caret-right</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-caret-bottom"></i>
+      <span class="icon-name">el-icon-caret-bottom</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-caret-top"></i>
+      <span class="icon-name">el-icon-caret-top</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-bottom-left"></i>
+      <span class="icon-name">el-icon-bottom-left</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-bottom-right"></i>
+      <span class="icon-name">el-icon-bottom-right</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-back"></i>
+      <span class="icon-name">el-icon-back</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-right"></i>
+      <span class="icon-name">el-icon-right</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-bottom"></i>
+      <span class="icon-name">el-icon-bottom</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-top"></i>
+      <span class="icon-name">el-icon-top</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-top-left"></i>
+      <span class="icon-name">el-icon-top-left</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-top-right"></i>
+      <span class="icon-name">el-icon-top-right</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-arrow-left"></i>
+      <span class="icon-name">el-icon-arrow-left</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-arrow-right"></i>
+      <span class="icon-name">el-icon-arrow-right</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-arrow-down"></i>
+      <span class="icon-name">el-icon-arrow-down</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-arrow-up"></i>
+      <span class="icon-name">el-icon-arrow-up</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-d-arrow-left"></i>
+      <span class="icon-name">el-icon-d-arrow-left</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-d-arrow-right"></i>
+      <span class="icon-name">el-icon-d-arrow-right</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-video-pause"></i>
+      <span class="icon-name">el-icon-video-pause</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-video-play"></i>
+      <span class="icon-name">el-icon-video-play</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-refresh"></i>
+      <span class="icon-name">el-icon-refresh</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-refresh-right"></i>
+      <span class="icon-name">el-icon-refresh-right</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-refresh-left"></i>
+      <span class="icon-name">el-icon-refresh-left</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-finished"></i>
+      <span class="icon-name">el-icon-finished</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-sort"></i>
+      <span class="icon-name">el-icon-sort</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-sort-up"></i>
+      <span class="icon-name">el-icon-sort-up</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-sort-down"></i>
+      <span class="icon-name">el-icon-sort-down</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-rank"></i>
+      <span class="icon-name">el-icon-rank</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-loading"></i>
+      <span class="icon-name">el-icon-loading</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-view"></i>
+      <span class="icon-name">el-icon-view</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-c-scale-to-original"></i>
+      <span class="icon-name">el-icon-c-scale-to-original</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-date"></i>
+      <span class="icon-name">el-icon-date</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-edit"></i>
+      <span class="icon-name">el-icon-edit</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-edit-outline"></i>
+      <span class="icon-name">el-icon-edit-outline</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-folder"></i>
+      <span class="icon-name">el-icon-folder</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-folder-opened"></i>
+      <span class="icon-name">el-icon-folder-opened</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-folder-add"></i>
+      <span class="icon-name">el-icon-folder-add</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-folder-remove"></i>
+      <span class="icon-name">el-icon-folder-remove</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-folder-delete"></i>
+      <span class="icon-name">el-icon-folder-delete</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-folder-checked"></i>
+      <span class="icon-name">el-icon-folder-checked</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-tickets"></i>
+      <span class="icon-name">el-icon-tickets</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-document-remove"></i>
+      <span class="icon-name">el-icon-document-remove</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-document-delete"></i>
+      <span class="icon-name">el-icon-document-delete</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-document-copy"></i>
+      <span class="icon-name">el-icon-document-copy</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-document-checked"></i>
+      <span class="icon-name">el-icon-document-checked</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-document"></i>
+      <span class="icon-name">el-icon-document</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-document-add"></i>
+      <span class="icon-name">el-icon-document-add</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-printer"></i>
+      <span class="icon-name">el-icon-printer</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-paperclip"></i>
+      <span class="icon-name">el-icon-paperclip</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-takeaway-box"></i>
+      <span class="icon-name">el-icon-takeaway-box</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-search"></i>
+      <span class="icon-name">el-icon-search</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-monitor"></i>
+      <span class="icon-name">el-icon-monitor</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-attract"></i>
+      <span class="icon-name">el-icon-attract</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-mobile"></i>
+      <span class="icon-name">el-icon-mobile</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-scissors"></i>
+      <span class="icon-name">el-icon-scissors</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-umbrella"></i>
+      <span class="icon-name">el-icon-umbrella</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-headset"></i>
+      <span class="icon-name">el-icon-headset</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-brush"></i>
+      <span class="icon-name">el-icon-brush</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-mouse"></i>
+      <span class="icon-name">el-icon-mouse</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-coordinate"></i>
+      <span class="icon-name">el-icon-coordinate</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-magic-stick"></i>
+      <span class="icon-name">el-icon-magic-stick</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-reading"></i>
+      <span class="icon-name">el-icon-reading</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-data-line"></i>
+      <span class="icon-name">el-icon-data-line</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-data-board"></i>
+      <span class="icon-name">el-icon-data-board</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-pie-chart"></i>
+      <span class="icon-name">el-icon-pie-chart</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-data-analysis"></i>
+      <span class="icon-name">el-icon-data-analysis</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-collection-tag"></i>
+      <span class="icon-name">el-icon-collection-tag</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-film"></i>
+      <span class="icon-name">el-icon-film</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-suitcase"></i>
+      <span class="icon-name">el-icon-suitcase</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-suitcase-1"></i>
+      <span class="icon-name">el-icon-suitcase-1</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-receiving"></i>
+      <span class="icon-name">el-icon-receiving</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-collection"></i>
+      <span class="icon-name">el-icon-collection</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-files"></i>
+      <span class="icon-name">el-icon-files</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-notebook-1"></i>
+      <span class="icon-name">el-icon-notebook-1</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-notebook-2"></i>
+      <span class="icon-name">el-icon-notebook-2</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-toilet-paper"></i>
+      <span class="icon-name">el-icon-toilet-paper</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-office-building"></i>
+      <span class="icon-name">el-icon-office-building</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-school"></i>
+      <span class="icon-name">el-icon-school</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-table-lamp"></i>
+      <span class="icon-name">el-icon-table-lamp</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-house"></i>
+      <span class="icon-name">el-icon-house</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-no-smoking"></i>
+      <span class="icon-name">el-icon-no-smoking</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-smoking"></i>
+      <span class="icon-name">el-icon-smoking</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-shopping-cart-full"></i>
+      <span class="icon-name">el-icon-shopping-cart-full</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-shopping-cart-1"></i>
+      <span class="icon-name">el-icon-shopping-cart-1</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-shopping-cart-2"></i>
+      <span class="icon-name">el-icon-shopping-cart-2</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-shopping-bag-1"></i>
+      <span class="icon-name">el-icon-shopping-bag-1</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-shopping-bag-2"></i>
+      <span class="icon-name">el-icon-shopping-bag-2</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-sold-out"></i>
+      <span class="icon-name">el-icon-sold-out</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-sell"></i>
+      <span class="icon-name">el-icon-sell</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-present"></i>
+      <span class="icon-name">el-icon-present</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-box"></i>
+      <span class="icon-name">el-icon-box</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-bank-card"></i>
+      <span class="icon-name">el-icon-bank-card</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-money"></i>
+      <span class="icon-name">el-icon-money</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-coin"></i>
+      <span class="icon-name">el-icon-coin</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-wallet"></i>
+      <span class="icon-name">el-icon-wallet</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-discount"></i>
+      <span class="icon-name">el-icon-discount</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-price-tag"></i>
+      <span class="icon-name">el-icon-price-tag</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-news"></i>
+      <span class="icon-name">el-icon-news</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-guide"></i>
+      <span class="icon-name">el-icon-guide</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-male"></i>
+      <span class="icon-name">el-icon-male</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-female"></i>
+      <span class="icon-name">el-icon-female</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-thumb"></i>
+      <span class="icon-name">el-icon-thumb</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-cpu"></i>
+      <span class="icon-name">el-icon-cpu</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-link"></i>
+      <span class="icon-name">el-icon-link</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-connection"></i>
+      <span class="icon-name">el-icon-connection</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-open"></i>
+      <span class="icon-name">el-icon-open</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-turn-off"></i>
+      <span class="icon-name">el-icon-turn-off</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-set-up"></i>
+      <span class="icon-name">el-icon-set-up</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-chat-round"></i>
+      <span class="icon-name">el-icon-chat-round</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-chat-line-round"></i>
+      <span class="icon-name">el-icon-chat-line-round</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-chat-square"></i>
+      <span class="icon-name">el-icon-chat-square</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-chat-dot-round"></i>
+      <span class="icon-name">el-icon-chat-dot-round</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-chat-dot-square"></i>
+      <span class="icon-name">el-icon-chat-dot-square</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-chat-line-square"></i>
+      <span class="icon-name">el-icon-chat-line-square</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-message"></i>
+      <span class="icon-name">el-icon-message</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-postcard"></i>
+      <span class="icon-name">el-icon-postcard</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-position"></i>
+      <span class="icon-name">el-icon-position</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-turn-off-microphone"></i>
+      <span class="icon-name">el-icon-turn-off-microphone</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-microphone"></i>
+      <span class="icon-name">el-icon-microphone</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-close-notification"></i>
+      <span class="icon-name">el-icon-close-notification</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-bangzhu"></i>
+      <span class="icon-name">el-icon-bangzhu</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-time"></i>
+      <span class="icon-name">el-icon-time</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-odometer"></i>
+      <span class="icon-name">el-icon-odometer</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-crop"></i>
+      <span class="icon-name">el-icon-crop</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-aim"></i>
+      <span class="icon-name">el-icon-aim</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-switch-button"></i>
+      <span class="icon-name">el-icon-switch-button</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-full-screen"></i>
+      <span class="icon-name">el-icon-full-screen</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-copy-document"></i>
+      <span class="icon-name">el-icon-copy-document</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-mic"></i>
+      <span class="icon-name">el-icon-mic</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-stopwatch"></i>
+      <span class="icon-name">el-icon-stopwatch</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-medal-1"></i>
+      <span class="icon-name">el-icon-medal-1</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-medal"></i>
+      <span class="icon-name">el-icon-medal</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-trophy"></i>
+      <span class="icon-name">el-icon-trophy</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-trophy-1"></i>
+      <span class="icon-name">el-icon-trophy-1</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-first-aid-kit"></i>
+      <span class="icon-name">el-icon-first-aid-kit</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-discover"></i>
+      <span class="icon-name">el-icon-discover</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-place"></i>
+      <span class="icon-name">el-icon-place</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-location"></i>
+      <span class="icon-name">el-icon-location</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-location-outline"></i>
+      <span class="icon-name">el-icon-location-outline</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-location-information"></i>
+      <span class="icon-name">el-icon-location-information</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-add-location"></i>
+      <span class="icon-name">el-icon-add-location</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-delete-location"></i>
+      <span class="icon-name">el-icon-delete-location</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-map-location"></i>
+      <span class="icon-name">el-icon-map-location</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-alarm-clock"></i>
+      <span class="icon-name">el-icon-alarm-clock</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-timer"></i>
+      <span class="icon-name">el-icon-timer</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-watch-1"></i>
+      <span class="icon-name">el-icon-watch-1</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-watch"></i>
+      <span class="icon-name">el-icon-watch</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-lock"></i>
+      <span class="icon-name">el-icon-lock</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-unlock"></i>
+      <span class="icon-name">el-icon-unlock</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-key"></i>
+      <span class="icon-name">el-icon-key</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-service"></i>
+      <span class="icon-name">el-icon-service</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-mobile-phone"></i>
+      <span class="icon-name">el-icon-mobile-phone</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-bicycle"></i>
+      <span class="icon-name">el-icon-bicycle</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-truck"></i>
+      <span class="icon-name">el-icon-truck</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-ship"></i>
+      <span class="icon-name">el-icon-ship</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-basketball"></i>
+      <span class="icon-name">el-icon-basketball</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-football"></i>
+      <span class="icon-name">el-icon-football</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-soccer"></i>
+      <span class="icon-name">el-icon-soccer</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-baseball"></i>
+      <span class="icon-name">el-icon-baseball</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-wind-power"></i>
+      <span class="icon-name">el-icon-wind-power</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-light-rain"></i>
+      <span class="icon-name">el-icon-light-rain</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-lightning"></i>
+      <span class="icon-name">el-icon-lightning</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-heavy-rain"></i>
+      <span class="icon-name">el-icon-heavy-rain</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-sunrise"></i>
+      <span class="icon-name">el-icon-sunrise</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-sunrise-1"></i>
+      <span class="icon-name">el-icon-sunrise-1</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-sunset"></i>
+      <span class="icon-name">el-icon-sunset</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-sunny"></i>
+      <span class="icon-name">el-icon-sunny</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-cloudy"></i>
+      <span class="icon-name">el-icon-cloudy</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-partly-cloudy"></i>
+      <span class="icon-name">el-icon-partly-cloudy</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-cloudy-and-sunny"></i>
+      <span class="icon-name">el-icon-cloudy-and-sunny</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-moon"></i>
+      <br/>
+      <span class="icon-name">el-icon-moon</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-moon-night"></i>
+      <span class="icon-name">el-icon-moon-night</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-dish"></i>
+      <span class="icon-name">el-icon-dish</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-dish-1"></i>
+      <span class="icon-name">el-icon-dish-1</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-food"></i>
+      <span class="icon-name">el-icon-food</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-chicken"></i>
+      <span class="icon-name">el-icon-chicken</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-fork-spoon"></i>
+      <span class="icon-name">el-icon-fork-spoon</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-knife-fork"></i>
+      <span class="icon-name">el-icon-knife-fork</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-burger"></i>
+      <span class="icon-name">el-icon-burger</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-tableware"></i>
+      <span class="icon-name">el-icon-tableware</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-sugar"></i>
+      <span class="icon-name">el-icon-sugar</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-dessert"></i>
+      <span class="icon-name">el-icon-dessert</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-ice-cream"></i>
+      <span class="icon-name">el-icon-ice-cream</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-hot-water"></i>
+      <span class="icon-name">el-icon-hot-water</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-water-cup"></i>
+      <span class="icon-name">el-icon-water-cup</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-coffee-cup"></i>
+      <span class="icon-name">el-icon-coffee-cup</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-cold-drink"></i>
+      <span class="icon-name">el-icon-cold-drink</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-goblet"></i>
+      <span class="icon-name">el-icon-goblet</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-goblet-full"></i>
+      <span class="icon-name">el-icon-goblet-full</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-goblet-square"></i>
+      <span class="icon-name">el-icon-goblet-square</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-goblet-square-full"></i>
+      <span class="icon-name">el-icon-goblet-square-full</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-refrigerator"></i>
+      <span class="icon-name">el-icon-refrigerator</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-grape"></i>
+      <span class="icon-name">el-icon-grape</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-watermelon"></i>
+      <span class="icon-name">el-icon-watermelon</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-cherry"></i>
+      <span class="icon-name">el-icon-cherry</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-apple"></i>
+      <span class="icon-name">el-icon-apple</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-pear"></i>
+      <span class="icon-name">el-icon-pear</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-orange"></i>
+      <span class="icon-name">el-icon-orange</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-coffee"></i>
+      <span class="icon-name">el-icon-coffee</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-ice-tea"></i>
+      <span class="icon-name">el-icon-ice-tea</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-ice-drink"></i>
+      <span class="icon-name">el-icon-ice-drink</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-milk-tea"></i>
+      <span class="icon-name">el-icon-milk-tea</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-potato-strips"></i>
+      <span class="icon-name">el-icon-potato-strips</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-lollipop"></i>
+      <span class="icon-name">el-icon-lollipop</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-ice-cream-square"></i>
+      <span class="icon-name">el-icon-ice-cream-square</span></span>
+        </li>
+        <li>
+    <span>
+      <i class="el-icon-ice-cream-round"></i>
+      <span class="icon-name">el-icon-ice-cream-round</span></span>
+        </li>
+    </ul>
+</template>
+
+<script>
+    export default {
+        name: 'IconList',
+        data() {
+            return {}
+        },
+      
+    }
+</script>
+
+<style lang="scss" scoped>
+.icon-list{
+  -webkit-tap-highlight-color: transparent;
+  font-family: icomoon!important;
+  font-style: normal;
+  font-weight: 400;
+  font-variant: normal;
+  text-transform: none;
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+  list-style: none;
+  padding: 0!important;
+  border: 1px solid #eaeefb;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #5e6d82;
+  line-height: 2em;
+  li{
+    -webkit-tap-highlight-color: transparent;
+    font-family: icomoon!important;
+    font-style: normal;
+    font-weight: 400;
+    font-variant: normal;
+    text-transform: none;
+    -webkit-font-smoothing: antialiased;
+    list-style: none;
+    float: left;
+    width: 16.66%;
+    text-align: center;
+    height: 120px;
+    line-height: 120px;
+    color: #666;
+    font-size: 13px;
+    border-right: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    margin-right: -1px;
+    margin-bottom: -1px;
+    span{
+      -webkit-tap-highlight-color: transparent;
+      font-style: normal;
+      font-weight: 400;
+      font-variant: normal;
+      text-transform: none;
+      -webkit-font-smoothing: antialiased;
+      list-style: none;
+      text-align: center;
+      font-size: 13px;
+      display: inline-block;
+      vertical-align: middle;
+      line-height: normal;
+      font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
+      color: #99a9bf;
+      transition: color .15s linear;
+      i{
+        -webkit-tap-highlight-color: transparent;
+        list-style: none;
+        text-align: center;
+        font-family: element-icons!important;
+        font-style: normal;
+        font-weight: 400;
+        font-variant: normal;
+        text-transform: none;
+        line-height: 1;
+        vertical-align: baseline;
+        -webkit-font-smoothing: antialiased;
+        display: block;
+        font-size: 32px;
+        margin-bottom: 15px;
+        color: #606266;
+        transition: color .15s linear;
+      }
+    }
+  }
+}
+
+</style>

web/src/view/layout/aside/historyComponent/history.vue

@@ -1,76 +1,205 @@
 <template>
-          <div class="router-history">
-            <el-tabs v-model="activeValue" type="card" :closable="!(historys.length==1&&this.$route.name=='dashboard')" @tab-click="changeTab" @tab-remove="removeTab">
-              <el-tab-pane
-                v-for="item in historys"
-                :key="item.name"
-                :label="item.meta.title"
-                :name="item.name"
-              >
-              </el-tab-pane>
-            </el-tabs>
-          </div>
+  <div class="router-history">
+    <el-tabs
+      :closable="!(historys.length==1&&this.$route.name=='dashboard')"
+      @contextmenu.prevent.native="openContextMenu($event)"
+      @tab-click="changeTab"
+      @tab-remove="removeTab"
+      type="card"
+      v-model="activeValue"
+    >
+      <el-tab-pane
+        :key="item.name"
+        :label="item.meta.title"
+        :name="item.name"
+        v-for="item in historys"
+      ></el-tab-pane>
+    </el-tabs>
+
+    <!--自定义右键菜单html代码-->
+    <ul :style="{left:left+'px',top:top+'px'}" class="contextmenu" v-show="contextMenuVisible">
+      <li @click="closeAll">关闭所有</li>
+      <li @click="closeLeft">关闭左边</li>
+      <li @click="closeRight">关闭右边</li>
+      <li @click="closeOther">关闭其他</li>
+    </ul>
+  </div>
 </template>
 <script>
 export default {
-    name:"HistoryComponent",
-    data(){
-        return{
-            historys:[],
-            activeValue:"dashboard"
+  name: 'HistoryComponent',
+  data() {
+    return {
+      historys: [],
+      activeValue: 'dashboard',
+      contextMenuVisible: false,
+      left: 0,
+      top: 0,
+      isCollapse: false,
+      isMobile:false,
+      rightActive: ''
+    }
+  },
+  created() {
+    this.$bus.on('mobile',(isMobile)=>{
+      this.isMobile = isMobile
+    })
+    this.$bus.on('collapse',(isCollapse)=>{
+      this.isCollapse = isCollapse
+    })
+    const initHistorys = [
+      {
+        name: 'dashboard',
+        meta: {
+          title: '仪表盘'
+        }
+      }
+    ]
+    this.historys =
+      JSON.parse(sessionStorage.getItem('historys')) || initHistorys
+    this.setTab(this.$route)
+  },
+
+  beforeDestroy(){
+    this.$bus.off('collapse')
+    this.$bus.off('mobile')
+  },
+  methods: {
+    openContextMenu(e) {
+      if (this.historys.length == 1 && this.$route.name == 'dashboard') {
+        return false
+      }
+      if (e.srcElement.id) {
+        this.contextMenuVisible = true
+        let width
+        if (this.isCollapse) {
+          width = 54
+        } else {
+          width = 220
         }
+        if(this.isMobile){
+          width = 0
+        }
+        this.left = e.clientX - width
+        this.top = e.clientY + 10
+        this.rightActive = e.srcElement.id.split('-')[1]
+      }
+    },
+    closeAll() {
+      this.historys = [
+        {
+          name: 'dashboard',
+          meta: {
+            title: '仪表盘'
+          }
+        }
+      ]
+      this.$router.push({ name: 'dashboard' })
+      this.contextMenuVisible = false
+      sessionStorage.setItem('historys', JSON.stringify(this.historys))
+    },
+    closeLeft() {
+      const rightIndex = this.historys.findIndex(
+        item => item.name == this.rightActive
+      )
+      const activeIndex = this.historys.findIndex(
+        item => item.name == this.activeValue
+      )
+      this.historys.splice(0, rightIndex)
+      if (rightIndex > activeIndex) {
+        this.$router.push({ name: this.rightActive })
+      }
+      sessionStorage.setItem('historys', JSON.stringify(this.historys))
+    },
+    closeRight() {
+      const leftIndex = this.historys.findIndex(
+        item => item.name == this.rightActive
+      )
+      const activeIndex = this.historys.findIndex(
+        item => item.name == this.activeValue
+      )
+      this.historys.splice(leftIndex, this.historys.length)
+      if (leftIndex < activeIndex) {
+        this.$router.push({ name: this.rightActive })
+      }
+      sessionStorage.setItem('historys', JSON.stringify(this.historys))
     },
-    created(){
-        const initHistorys = [
-                {
-                name:"dashboard",
-                meta:{
-                    title:"仪表盘"
-                }
-                }
-            ]
-        this.historys = JSON.parse(sessionStorage.getItem("historys")) || initHistorys
-        this.setTab(this.$route)
+    closeOther() {
+      this.historys = this.historys.filter(
+        item => item.name == this.rightActive
+      )
+      this.$router.push({ name: this.rightActive })
+      sessionStorage.setItem('historys', JSON.stringify(this.historys))
     },
-    methods:{
-        setTab(route){
-        if(!this.historys.some(item=>item.name==route.name)){
-           const obj = {}
-           obj.name = route.name
-           obj.meta = route.meta
-           this.historys.push(obj)
-       }
-           this.activeValue = this.$route.name
-        },
-        changeTab(tab){
-            this.$router.push({name:tab.name})
-        },
-        removeTab(tab){
-           const index = this.historys.findIndex(item=>item.name == tab)
-           if(this.$route.name == tab){
-               if(this.historys.length==1){
-                   this.$router.push({name:"dashboard"})
-               }else{
-                    if(index<this.historys.length-1){
-                        this.$router.push({name:this.historys[index+1].name})
-                    }else{
-                        this.$router.push({name:this.historys[index-1].name})
-                    }
-               }
-           }
-               this.historys.splice(index,1)
+    setTab(route) {
+      if (!this.historys.some(item => item.name == route.name)) {
+        const obj = {}
+        obj.name = route.name
+        obj.meta = route.meta
+        this.historys.push(obj)
+      }
+      this.activeValue = this.$route.name
+    },
+    changeTab(tab) {
+      this.$router.push({ name: tab.name })
+    },
+    removeTab(tab) {
+      const index = this.historys.findIndex(item => item.name == tab)
+      if (this.$route.name == tab) {
+        if (this.historys.length == 1) {
+          this.$router.push({ name: 'dashboard' })
+        } else {
+          if (index < this.historys.length - 1) {
+            this.$router.push({ name: this.historys[index + 1].name })
+          } else {
+            this.$router.push({ name: this.historys[index - 1].name })
+          }
         }
+      }
+      this.historys.splice(index, 1)
+    }
+  },
+  watch: {
+    contextMenuVisible() {
+      if (this.contextMenuVisible) {
+        document.body.addEventListener('click', () => {
+          this.contextMenuVisible = false
+        })
+      } else {
+        document.body.removeEventListener('click', () => {
+          this.contextMenuVisible = false
+        })
+      }
     },
-    watch:{
-     $route( to ){
-       this.historys = this.historys.filter(item=>!item.meta.hidden)
-       this.setTab(to)
-       sessionStorage.setItem("historys",JSON.stringify(this.historys))
-     }
-     
+    $route(to) {
+      this.historys = this.historys.filter(item => !item.meta.hidden)
+      this.setTab(to)
+      sessionStorage.setItem('historys', JSON.stringify(this.historys))
     }
+  }
 }
 </script>
 <style lang="scss">
-    
+.contextmenu {
+  width: 100px;
+  margin: 0;
+  border: 1px solid #ccc;
+  background: #fff;
+  z-index: 3000;
+  position: absolute;
+  list-style-type: none;
+  padding: 5px 0;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #333;
+  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
+}
+.contextmenu li {
+  margin: 0;
+  padding: 7px 16px;
+}
+.contextmenu li:hover {
+  background: #f2f2f2;
+  cursor: pointer;
+}
 </style>

web/src/view/layout/aside/index.vue

@@ -50,9 +50,7 @@ export default {
      if(screenWidth<1000){
        this.isCollapse = !this.isCollapse
       }
-    this.$bus.on('totalCollapse', () => {
-      this.isCollapse = !this.isCollapse
-    })
+
      this.$bus.on('collapse', (item) => {
       this.isCollapse = item
     })
@@ -64,7 +62,6 @@ export default {
     }
   },
   beforeDestroy() {
-    this.$bus.off('totalCollapse')
     this.$bus.off('collapse')
   }
 }

web/src/view/layout/index.vue

@@ -8,45 +8,47 @@
       <!-- 分块滑动功能 -->
       <el-main class="main-cont main-right">
         <transition mode="out-in" name="el-fade-in-linear">
-          <div class="topfix" :style="{width: `calc(100% - ${isCollapse?'54px':'220px'})`}">
-        <el-header class="header-cont">
-          <div @click="totalCollapse" class="menu-total">
-            <i class="el-icon-s-unfold" v-if="isCollapse"></i>
-            <i class="el-icon-s-fold" v-else></i>
-          </div>
-          <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
-          <el-breadcrumb-item
-            :key="item.path"
-            v-for="item in matched.slice(1,matched.length)"
-          >{{item.meta.title}}</el-breadcrumb-item>
-        </el-breadcrumb>
-          <div class="fl-right right-box">
-            <el-dropdown>
-              <span class="el-dropdown-link">
-                <img :src="userInfo.headerImg" height="30" width="30" />
-                {{userInfo.title}}
-                <i class="el-icon-arrow-down"></i>
-              </span>
-              <el-dropdown-menu class="dropdown-group" slot="dropdown">
-                <el-dropdown-item>
-                  <span>
-                    更多信息
-                    <el-badge is-dot />
+          <div
+            class="topfix"
+            :style="{width: `calc(100% - ${isMobile?'0px':isCollapse?'54px':'220px'})`}"
+          >
+            <el-header class="header-cont">
+              <div @click="totalCollapse" class="menu-total">
+                <i class="el-icon-s-unfold" v-if="isCollapse"></i>
+                <i class="el-icon-s-fold" v-else></i>
+              </div>
+              <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
+                <el-breadcrumb-item
+                  :key="item.path"
+                  v-for="item in matched.slice(1,matched.length)"
+                >{{item.meta.title}}</el-breadcrumb-item>
+              </el-breadcrumb>
+              <div class="fl-right right-box">
+                <el-dropdown>
+                  <span class="el-dropdown-link">
+                    <img :src="userInfo.headerImg" height="30" width="30" />
+                    {{userInfo.title}}
+                    <i class="el-icon-arrow-down"></i>
                   </span>
-                </el-dropdown-item>
-                <el-dropdown-item @click.native="showPassword=true" icon="el-icon-s-custom">修改密码</el-dropdown-item>
-                <el-dropdown-item @click.native="toPerson" icon="el-icon-s-custom">个人信息</el-dropdown-item>
-                <el-dropdown-item @click.native="LoginOut" icon="el-icon-table-lamp">登 出</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
- 
+                  <el-dropdown-menu class="dropdown-group" slot="dropdown">
+                    <el-dropdown-item>
+                      <span>
+                        更多信息
+                        <el-badge is-dot />
+                      </span>
+                    </el-dropdown-item>
+                    <el-dropdown-item @click.native="showPassword=true" icon="el-icon-s-custom">修改密码</el-dropdown-item>
+                    <el-dropdown-item @click.native="toPerson" icon="el-icon-s-custom">个人信息</el-dropdown-item>
+                    <el-dropdown-item @click.native="LoginOut" icon="el-icon-table-lamp">登 出</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </div>
+            </el-header>
+            <!-- 当前面包屑用路由自动生成可根据需求修改 -->
+            <!--
+            :to="{ path: item.path }" 暂时注释不用-->
+            <HistoryComponent />
           </div>
-        </el-header>
-        <!-- 当前面包屑用路由自动生成可根据需求修改 -->
-        <!--
-        :to="{ path: item.path }" 暂时注释不用-->
-        <HistoryComponent />
-        </div>
         </transition>
         <transition mode="out-in" name="el-fade-in-linear">
           <keep-alive>
@@ -54,43 +56,38 @@
           </keep-alive>
         </transition>
         <transition mode="out-in" name="el-fade-in-linear">
-            <router-view v-if="!$route.meta.keepAlive" class="admin-box"></router-view>
+          <router-view v-if="!$route.meta.keepAlive" class="admin-box"></router-view>
         </transition>
       </el-main>
     </el-container>
-               <el-dialog
-              title="修改密码"
-              :visible.sync="showPassword"
-              @close="clearPassword"
-              width="360px"
-            >
-              <el-form ref="modifyPwdForm" :model="pwdModify" :rules="rules" label-width="80px">
-                <el-form-item prop="password" :minlength="6" label="原密码">
-                  <el-input v-model="pwdModify.password" show-password></el-input>
-                </el-form-item>
-                <el-form-item prop="newPassword" :minlength="6" label="新密码">
-                  <el-input v-model="pwdModify.newPassword" show-password></el-input>
-                </el-form-item>
-                <el-form-item prop="confirmPassword" :minlength="6" label="确认密码">
-                  <el-input v-model="pwdModify.confirmPassword" show-password></el-input>
-                </el-form-item>
-              </el-form>
-              <div slot="footer" class="dialog-footer">
-                <el-button @click="showPassword=false">取 消</el-button>
-                <el-button type="primary" @click="savePassword">确 定</el-button>
-              </div>
-            </el-dialog>
+    <el-dialog title="修改密码" :visible.sync="showPassword" @close="clearPassword" width="360px">
+      <el-form ref="modifyPwdForm" :model="pwdModify" :rules="rules" label-width="80px">
+        <el-form-item prop="password" :minlength="6" label="原密码">
+          <el-input v-model="pwdModify.password" show-password></el-input>
+        </el-form-item>
+        <el-form-item prop="newPassword" :minlength="6" label="新密码">
+          <el-input v-model="pwdModify.newPassword" show-password></el-input>
+        </el-form-item>
+        <el-form-item prop="confirmPassword" :minlength="6" label="确认密码">
+          <el-input v-model="pwdModify.confirmPassword" show-password></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showPassword=false">取 消</el-button>
+        <el-button type="primary" @click="savePassword">确 定</el-button>
+      </div>
+    </el-dialog>
   </el-container>
 </template>
 
 <script>
-import Aside from '@/view/layout/aside'
-import HistoryComponent from '@/view/layout/aside/historyComponent/history'
+import Aside from "@/view/layout/aside";
+import HistoryComponent from "@/view/layout/aside/historyComponent/history";
 
-import { mapGetters, mapActions } from 'vuex'
-import { changePassword } from '@/api/user'
+import { mapGetters, mapActions } from "vuex";
+import { changePassword } from "@/api/user";
 export default {
-  name: 'Layout',
+  name: "Layout",
   data() {
     return {
       isCollapse: false,
@@ -101,59 +98,49 @@ export default {
       pwdModify: {},
       rules: {
         password: [
-          { required: true, message: '请输入密码', trigger: 'blur' },
-          { min: 6, message: '最少6个字符', trigger: 'blur' }
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { min: 6, message: "最少6个字符", trigger: "blur" }
         ],
         newPassword: [
-          { required: true, message: '请输入新密码', trigger: 'blur' },
-          { min: 6, message: '最少6个字符', trigger: 'blur' }
+          { required: true, message: "请输入新密码", trigger: "blur" },
+          { min: 6, message: "最少6个字符", trigger: "blur" }
         ],
         confirmPassword: [
-          { required: true, message: '请输入确认密码', trigger: 'blur' },
-          { min: 6, message: '最少6个字符', trigger: 'blur' },
+          { required: true, message: "请输入确认密码", trigger: "blur" },
+          { min: 6, message: "最少6个字符", trigger: "blur" },
           {
             validator: (rule, value, callback) => {
               if (value !== this.pwdModify.newPassword) {
-                callback(new Error('两次密码不一致'))
+                callback(new Error("两次密码不一致"));
               } else {
-                callback()
+                callback();
               }
             },
-            trigger: 'blur'
+            trigger: "blur"
           }
         ]
-      },
-
-    }
+      }
+    };
   },
   components: {
-    Aside,HistoryComponent
-  },
-  created() {
-    let screenWidth = document.body.clientWidth
-    if (screenWidth < 1000) {
-      this.isMobile = true
-      this.isSider = false
-      this.isCollapse = !this.isCollapse
-    } else {
-      this.isMobile = false
-    }
+    Aside,
+    HistoryComponent
   },
   methods: {
-    ...mapActions('user', ['LoginOut']),
+    ...mapActions("user", ["LoginOut"]),
     totalCollapse() {
-      this.isCollapse = !this.isCollapse
-      this.isSider = !this.isCollapse
-      this.isShadowBg = !this.isCollapse
-      this.$bus.emit('totalCollapse')
+      this.isCollapse = !this.isCollapse;
+      this.isSider = !this.isCollapse;
+      this.isShadowBg = !this.isCollapse;
+      this.$bus.emit("collapse", this.isCollapse);
     },
     toPerson() {
-      this.$router.push({ name: 'person' })
+      this.$router.push({ name: "person" });
     },
     changeShadow() {
-      this.isShadowBg = !this.isShadowBg
-      this.isSider = !!this.isCollapse
-      this.totalCollapse()
+      this.isShadowBg = !this.isShadowBg;
+      this.isSider = !!this.isCollapse;
+      this.totalCollapse();
     },
     savePassword() {
       this.$refs.modifyPwdForm.validate(valid => {
@@ -163,57 +150,72 @@ export default {
             password: this.pwdModify.password,
             newPassword: this.pwdModify.newPassword
           }).then(() => {
-            this.$message.success('修改密码成功！')
-            this.showPassword = false
-          })
+            this.$message.success("修改密码成功！");
+            this.showPassword = false;
+          });
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
     clearPassword() {
       this.pwdModify = {
-        password: '',
-        newPassword: '',
-        confirmPassword: ''
-      }
-      this.$refs.modifyPwdForm.clearValidate()
+        password: "",
+        newPassword: "",
+        confirmPassword: ""
+      };
+      this.$refs.modifyPwdForm.clearValidate();
     }
   },
   computed: {
-    ...mapGetters('user', ['userInfo']),
-    ...mapGetters('history', ['historys','activeValue']),
+    ...mapGetters("user", ["userInfo"]),
+    ...mapGetters("history", ["historys", "activeValue"]),
     title() {
-      return this.$route.meta.title || '当前页面'
+      return this.$route.meta.title || "当前页面";
     },
     matched() {
-      return this.$route.matched
+      return this.$route.matched;
     }
   },
   mounted() {
+    let screenWidth = document.body.clientWidth;
+    if (screenWidth < 1000) {
+      this.isMobile = true;
+      this.isSider = false;
+      this.isCollapse = true;
+    } else if (screenWidth >= 1000 && screenWidth < 1200) {
+      this.isMobile = false;
+      this.isSider = false;
+      this.isCollapse = true;
+    } else {
+      this.isMobile = false;
+      this.isSider = true;
+      this.isCollapse = false;
+    }
+    this.$bus.emit("collapse", this.isCollapse);
+    this.$bus.emit("mobile", this.isMobile);
     window.onresize = () => {
       return (() => {
-        let screenWidth = document.body.clientWidth
-        if (!this.screenWidth && this.isSider) {
-          if (screenWidth < 1000) {
-            this.isMobile = true
-            this.isSider = false
-            this.isCollapse = true
-            this.$bus.emit('collapse', this.isCollapse)
-          }
+        let screenWidth = document.body.clientWidth;
+        if (screenWidth < 1000) {
+          this.isMobile = true;
+          this.isSider = false;
+          this.isCollapse = true;
+        } else if (screenWidth >= 1000 && screenWidth < 1200) {
+          this.isMobile = false;
+          this.isSider = false;
+          this.isCollapse = true;
         } else {
-          if (screenWidth < 1000) {
-            this.isMobile = true
-            this.isSider = false
-            this.isCollapse = true
-          } else {
-            this.isMobile = false
-          }
+          this.isMobile = false;
+          this.isSider = true;
+          this.isCollapse = false;
         }
-      })()
-    }
+        this.$bus.emit("collapse", this.isCollapse);
+        this.$bus.emit("mobile", this.isMobile);
+      })();
+    };
   }
-}
+};
 </script>
 
 <style lang="scss">
@@ -225,14 +227,14 @@ $mainHight: 100vh;
 .dropdown-group {
   min-width: 100px;
 }
-.topfix{
-  position:fixed;
-  top:0;
+.topfix {
+  position: fixed;
+  top: 0;
   box-sizing: border-box;
   z-index: 999;
 }
-.admin-box{
-  background-color: rgb(255,255,255);
+.admin-box {
+  background-color: rgb(255, 255, 255);
   margin-top: 100px;
 }
 .el-scrollbar__wrap {
@@ -269,9 +271,10 @@ $mainHight: 100vh;
       // padding: 6px;
       // border-bottom: 1px solid #eee;
     }
-    .router-history{
+    .router-history {
       background: #fff;
       padding: 0 6px;
+      border-top: 1px solid #dcdcdc;
     }
     &.el-main {
       overflow: auto;

web/src/view/login/login.vue

@@ -1,57 +1,92 @@
 <template>
-  <el-container class="login-register-box">
-    <vue-particle-line></vue-particle-line>
-    <el-main class="login-box">
-      <h1 class="title-1">
-        <img
-          class="logo"
-          :src="require('@/assets/logo.png')"
-          alt=""
-          srcset=""
-        />
-      </h1>
-      <el-form :model="loginForm" :rules="rules" ref="loginForm" @keyup.enter.native="submitForm">
-        <el-form-item prop="username">
-          <el-input
-            placeholder="请输入用户名"
-            v-model="loginForm.username"
-          ></el-input>
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input
-            :type="lock === 'lock' ? 'password' : 'text'"
-            placeholder="请输入密码"
-            v-model="loginForm.password"
-          >
+  <div id="userLayout" class="user-layout-wrapper">
+    <div class="container">
+      <div class="top">
+        <div class="desc">
+          <img class="logo_login" src="@/assets/logo_login.png" alt="" />
+        </div>
+        <div class="header">
+          <a href="/">
+            <!-- <img src="~@/assets/logo.png" class="logo" alt="logo" /> -->
+            <span class="title">Gin-Vue-Admin</span>
+          </a>
+        </div>
+      </div>
+      <div class="main">
+        <el-form
+          :model="loginForm"
+          :rules="rules"
+          ref="loginForm"
+          @keyup.enter.native="submitForm"
+        >
+          <el-form-item prop="username">
+            <el-input
+              placeholder="请输入用户名"
+              v-model="loginForm.username"
+            >
             <i
-              :class="'el-input__icon el-icon-' + lock"
-              @click="changeLock"
-              slot="suffix"
-            ></i>
-          </el-input>
-        </el-form-item>
-        <el-form-item style="position:relative">
-          <el-input
-            v-model="loginForm.captcha"
-            name="logVerify"
-            placeholder="请输入验证码"
-            maxlength="10"
-          />
-          <img
-            v-if="picPath"
-            :src="path + picPath"
-            alt="请输入验证码"
-            @click="loginVefify()"
-            class="vPic"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="submitForm" style="width:100%">登 录</el-button>
-        </el-form-item>
-      </el-form>
-      <h3 class="title-3 fl-right">测试用户:admin 密码:123456</h3>
-    </el-main>
-  </el-container>
+                class="el-input__icon el-icon-user"
+                slot="suffix"
+              ></i></el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              :type="lock === 'lock' ? 'password' : 'text'"
+              placeholder="请输入密码"
+              v-model="loginForm.password"
+            >
+              <i
+                :class="'el-input__icon el-icon-' + lock"
+                @click="changeLock"
+                slot="suffix"
+              ></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item style="position:relative">
+            <el-input
+              v-model="loginForm.captcha"
+              name="logVerify"
+              placeholder="请输入验证码"
+              style="width:60%"
+            />
+            <div class="vPic">
+              <img
+                v-if="picPath"
+                :src="path + picPath"
+                alt="请输入验证码"
+                @click="loginVefify()"
+              />
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="submitForm" style="width:100%"
+              >登 录</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="footer">
+        <div class="links">
+          <a href="http://doc.henrongyi.top/"
+            ><img src="@/assets/docs.png" class="link-icon"
+          /></a>
+          <a href="https://www.yuque.com/flipped-aurora/"
+            ><img src="@/assets/yuque.png" class="link-icon"
+          /></a>
+          <a href="https://github.com/flipped-aurora/gin-vue-admin"
+            ><img src="@/assets/github.png" class="link-icon"
+          /></a>
+          <a href="https://space.bilibili.com/322210472"
+            ><img src="@/assets/video.png" class="link-icon"
+          /></a>
+        </div>
+        <div class="copyright">
+          Copyright &copy; 2020 💖flipped-aurora
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -79,8 +114,8 @@ export default {
     return {
       lock: "lock",
       loginForm: {
-        username: "",
-        password: "",
+        username: "admin",
+        password: "123456",
         captcha: "",
         captchaId: "",
       },
@@ -132,7 +167,6 @@ export default {
 
 <style scoped lang="scss">
 .login-register-box {
-  background: #fff;
   height: 100vh;
   .login-box {
     width: 40vw;
@@ -145,10 +179,122 @@ export default {
       width: 35vh;
     }
   }
-  .vPic {
-    position: absolute;
-    right: 10px;
-    bottom: 0px; // 适配ie
+}
+
+.link-icon {
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  border-radius: 10px;
+}
+
+.vPic {
+  width: 33%;
+  height: 38px;
+  float: right !important;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+
+.logo_login {
+  width: 100px;
+}
+
+#userLayout.user-layout-wrapper {
+  height: 100%;
+  position: relative;
+  &.mobile {
+    .container {
+      .main {
+        max-width: 368px;
+        width: 98%;
+      }
+    }
+  }
+
+  .container {
+    width: 100%;
+    min-height: 100%;
+    background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
+    background-size: 100%;
+    padding: 110px 0 144px;
+    a {
+      text-decoration: none;
+    }
+
+    .top {
+      text-align: center;
+      .header {
+        height: 44px;
+        line-height: 44px;
+        margin-bottom: 30px;
+        .badge {
+          position: absolute;
+          display: inline-block;
+          line-height: 1;
+          vertical-align: middle;
+          margin-left: -12px;
+          margin-top: -10px;
+          opacity: 0.8;
+        }
+
+        .logo {
+          height: 44px;
+          vertical-align: top;
+          margin-right: 16px;
+          border-style: none;
+        }
+
+        .title {
+          font-size: 33px;
+          color: rgba(0, 0, 0, 0.85);
+          font-family: Avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
+          font-weight: 600;
+          position: relative;
+          top: 2px;
+        }
+      }
+      .desc {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.45);
+        margin-top: 12px;
+      }
+    }
+
+    .main {
+      min-width: 260px;
+      width: 368px;
+      margin: 0 auto;
+    }
+
+    .footer {
+      position: absolute;
+      width: 100%;
+      padding: 0 16px;
+      margin: 120px 0 24px;
+      text-align: center;
+      bottom: 100px;
+      .links {
+        margin-bottom: 8px;
+        font-size: 14px;
+        width: 330px;
+        display: inline-flex;
+        flex-direction: row;
+        justify-content: space-between;
+        padding-right: 40px;
+        a {
+          color: rgba(0, 0, 0, 0.45);
+          transition: all 0.3s;
+        }
+      }
+      .copyright {
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 14px;
+        padding-right: 40px;
+      }
+    }
   }
 }
 </style>

web/src/view/login/register.vue

@@ -1,24 +1,48 @@
 <template>
-  <el-container class="login-register-box">
-    <vue-particle-line></vue-particle-line>
-    <el-main class="login-box">
-      <h1 class="title-1">
-        <img class="logo" :src="require('@/assets/logo.png')">
-      </h1>
-      <el-form :model="registerForm" :rules="rules" ref="registerForm">
-        <el-form-item prop="username">
-          <el-input placeholder="请输入用户名" v-model="registerForm.username"></el-input>
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input
-            :type="lock==='lock'?'password':'text'"
-            placeholder="请输入密码"
-            v-model="registerForm.password"
-          >
-            <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="rePassword">
+  <div id="userLayout" class="user-layout-wrapper">
+    <div class="container">
+      <div class="top">
+        <div class="desc">
+          <img class="logo_login" src="@/assets/logo_login.png" alt="" />
+        </div>
+        <div class="header">
+          <a href="/">
+            <!-- <img src="~@/assets/logo.png" class="logo" alt="logo" /> -->
+            <span class="title">Gin-Vue-Admin</span>
+          </a>
+        </div>
+      </div>
+      <div class="main">
+        <el-form
+          :model="registerForm"
+          :rules="rules"
+          ref="registerForm"
+          @keyup.enter.native="submitForm"
+        >
+          <el-form-item prop="username">
+            <el-input
+              placeholder="请输入用户名"
+              v-model="registerForm.username"
+            >
+            <i
+                class="el-input__icon el-icon-user"
+                slot="suffix"
+              ></i></el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              :type="lock === 'lock' ? 'password' : 'text'"
+              placeholder="请输入密码"
+              v-model="registerForm.password"
+            >
+              <i
+                :class="'el-input__icon el-icon-' + lock"
+                @click="changeLock"
+                slot="suffix"
+              ></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="rePassword" style="position:relative">
           <el-input
             :type="lock==='lock'?'password':'text'"
             placeholder="请再次输入密码"
@@ -27,12 +51,36 @@
             <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
           </el-input>
         </el-form-item>
-        <el-form-item>
-          <el-button @click="submitForm" style="width:100%">注 册</el-button>
-        </el-form-item>
-      </el-form>
-    </el-main>
-  </el-container>
+        
+          <el-form-item>
+            <el-button type="primary" @click="submitForm" style="width:100%"
+              >注 册</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="footer">
+        <div class="links">
+          <a href="http://doc.henrongyi.top/"
+            ><img src="@/assets/docs.png" class="link-icon"
+          /></a>
+          <a href="https://www.yuque.com/flipped-aurora/"
+            ><img src="@/assets/yuque.png" class="link-icon"
+          /></a>
+          <a href="https://github.com/flipped-aurora/gin-vue-admin"
+            ><img src="@/assets/github.png" class="link-icon"
+          /></a>
+          <a href="https://space.bilibili.com/322210472"
+            ><img src="@/assets/video.png" class="link-icon"
+          /></a>
+        </div>
+        <div class="copyright">
+          Copyright &copy; 2020 💖flipped-aurora
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -110,18 +158,131 @@ export default {
 
 <style scoped lang="scss">
 .login-register-box {
-  background: #fff;
   height: 100vh;
   .login-box {
     width: 40vw;
     position: absolute;
     left: 50%;
     margin-left: -22vw;
-    top:5vh;
-    .logo{
+    top: 5vh;
+    .logo {
       height: 35vh;
       width: 35vh;
     }
   }
 }
+
+.link-icon {
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  border-radius: 10px;
+}
+
+.vPic {
+  width: 33%;
+  height: 38px;
+  float: right !important;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+
+.logo_login {
+  width: 100px;
+}
+
+#userLayout.user-layout-wrapper {
+  height: 100%;
+  position: relative;
+  &.mobile {
+    .container {
+      .main {
+        max-width: 368px;
+        width: 98%;
+      }
+    }
+  }
+
+  .container {
+    width: 100%;
+    min-height: 100%;
+    background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
+    background-size: 100%;
+    padding: 110px 0 144px;
+    a {
+      text-decoration: none;
+    }
+
+    .top {
+      text-align: center;
+      .header {
+        height: 44px;
+        line-height: 44px;
+        margin-bottom: 30px;
+        .badge {
+          position: absolute;
+          display: inline-block;
+          line-height: 1;
+          vertical-align: middle;
+          margin-left: -12px;
+          margin-top: -10px;
+          opacity: 0.8;
+        }
+
+        .logo {
+          height: 44px;
+          vertical-align: top;
+          margin-right: 16px;
+          border-style: none;
+        }
+
+        .title {
+          font-size: 33px;
+          color: rgba(0, 0, 0, 0.85);
+          font-family: Avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
+          font-weight: 600;
+          position: relative;
+          top: 2px;
+        }
+      }
+      .desc {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.45);
+        margin-top: 12px;
+      }
+    }
+
+    .main {
+      min-width: 260px;
+      width: 368px;
+      margin: 0 auto;
+    }
+
+    .footer {
+      position: absolute;
+      width: 100%;
+      padding: 0 16px;
+      margin: 120px 0 24px;
+      text-align: center;
+      bottom: 100px;
+      .links {
+        margin-bottom: 8px;
+        font-size: 14px;
+        a {
+          color: rgba(0, 0, 0, 0.45);
+          transition: all 0.3s;
+          &:not(:last-child) {
+            margin-right: 80px;
+          }
+        }
+      }
+      .copyright {
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 14px;
+      }
+    }
+  }
+}
 </style>

web/src/view/superAdmin/authority/authority.vue

@@ -51,15 +51,15 @@
     </el-dialog>
 
     <el-drawer :visible.sync="drawer" :with-header="false" size="40%" title="角色配置" v-if="drawer">
-      <el-tabs class="role-box" type="border-card">
+      <el-tabs class="role-box" type="border-card" :before-leave="autoEnter">
         <el-tab-pane label="角色菜单">
-          <Menus :row="activeRow" />
+          <Menus :row="activeRow" ref="menus"/>
         </el-tab-pane>
         <el-tab-pane label="角色api">
-          <apis :row="activeRow" />
+          <apis :row="activeRow"  ref="apis"/>
         </el-tab-pane>
         <el-tab-pane label="资源权限">
-          <Datas :authority="tableData" :row="activeRow" />
+          <Datas :authority="tableData" :row="activeRow"  ref="datas"/>
         </el-tab-pane>
       </el-tabs>
     </el-drawer>
@@ -124,6 +124,15 @@ export default {
     Datas
   },
   methods: {
+    autoEnter(activeName, oldActiveName){
+      const paneArr = ["menus","apis","datas"]
+      if(oldActiveName){
+        if(this.$refs[paneArr[oldActiveName]].needConfirm){
+          this.$refs[paneArr[oldActiveName]].enterAndNext()
+          this.$refs[paneArr[oldActiveName]].needConfirm = false
+        }
+      }
+    },
     // 拷贝角色
     copyAuthority(row) {
       this.setOptions()

web/src/view/superAdmin/authority/components/apis.vue

@@ -7,6 +7,7 @@
       :data="apiTreeData"
       :default-checked-keys="apiTreeIds"
       :props="apiDefaultProps"
+      @check="nodeChange"
       default-expand-all
       highlight-current
       node-key="onlyId"
@@ -32,6 +33,7 @@ export default {
     return {
       apiTreeData: [],
       apiTreeIds: [],
+      needConfirm:false,
       apiDefaultProps: {
         children: 'children',
         label: 'description'
@@ -39,6 +41,13 @@ export default {
     }
   },
   methods: {
+    nodeChange(){
+      this.needConfirm = true
+    },
+    // 暴露给外层使用的切换拦截统一方法
+    enterAndNext(){
+      this.authApiEnter()
+    },
     // 创建api树方法
     buildApiTree(apis) {
       const apiObj = new Object()
@@ -78,7 +87,7 @@ export default {
         casbinInfos
       })
       if (res.code == 0) {
-        this.$message({ type: 'success', message: res.msg })
+        this.$message({ type: 'success', message: "api设置成功" })
       }
     }
   },

web/src/view/superAdmin/authority/components/datas.vue

@@ -3,8 +3,8 @@
       <div class="clearflex" style="margin:18px">
       <el-button @click="authDataEnter" class="fl-right" size="small" type="primary">确 定</el-button>
       <el-button @click="all" class="fl-left" size="small" type="primary">全选</el-button>
-      <el-button @click="self" class="fl-left" size="small" type="primary">本部门</el-button>
-      <el-button @click="selfAndChildren" class="fl-left" size="small" type="primary">部门及以下</el-button>
+      <el-button @click="self" class="fl-left" size="small" type="primary">本角色</el-button>
+      <el-button @click="selfAndChildren" class="fl-left" size="small" type="primary">本角色及子角色</el-button>
     </div>
      <el-checkbox-group v-model="dataAuthorityId" @change="selectAuthority">
         <el-checkbox v-for="(item,key) in authoritys" :label="item" :key="key">{{item.authorityName}}</el-checkbox>
@@ -18,7 +18,8 @@ export default {
   data() {
     return {
         authoritys:[],
-        dataAuthorityId:[]
+        dataAuthorityId:[],
+        needConfirm:false
     }
   },
   props: {
@@ -36,20 +37,26 @@ export default {
     }
   },
   methods:{
+    // 暴露给外层使用的切换拦截统一方法
+      enterAndNext(){
+        this.authDataEnter()
+      },
       all(){
          this.dataAuthorityId = [...this.authoritys]
          this.row.dataAuthorityId = this.dataAuthorityId
-
+         this.needConfirm = true
       },
       self(){
           this.dataAuthorityId = this.authoritys.filter(item=>item.authorityId===this.row.authorityId)
           this.row.dataAuthorityId = this.dataAuthorityId
+          this.needConfirm = true
       },
       selfAndChildren(){
          const arrBox = []
          this.getChildrenId(this.row,arrBox)
          this.dataAuthorityId = this.authoritys.filter(item=>arrBox.indexOf(item.authorityId)>-1)
          this.row.dataAuthorityId = this.dataAuthorityId
+         this.needConfirm = true
       },
       getChildrenId(row,arrBox){
           arrBox.push(row.authorityId)
@@ -61,7 +68,7 @@ export default {
       async authDataEnter(){
           const res = await setDataAuthority(this.row)
           if(res.code == 0){
-              this.$message({ type: 'success', message: res.msg })
+              this.$message({ type: 'success', message: "资源设置成功" })
           }
       },
     //   平铺角色
@@ -79,6 +86,7 @@ export default {
     //   选择
       selectAuthority(){
           this.row.dataAuthorityId = this.dataAuthorityId
+          this.needConfirm = true
       }
   },
   created() {

web/src/view/superAdmin/authority/components/menus.vue

@@ -7,6 +7,7 @@
       :data="menuTreeData"
       :default-checked-keys="menuTreeIds"
       :props="menuDefaultProps"
+      @check="nodeChange"
       default-expand-all
       highlight-current
       node-key="ID"
@@ -32,6 +33,7 @@ export default {
     return {
       menuTreeData: [],
       menuTreeIds: [],
+      needConfirm:false,
       menuDefaultProps: {
         children: 'children',
         label: function(data){
@@ -41,6 +43,13 @@ export default {
     }
   },
   methods: {
+    nodeChange(){
+      this.needConfirm = true
+    },
+    // 暴露给外层使用的切换拦截统一方法
+    enterAndNext(){
+      this.relation()
+    },
     // 关联树 确认方法
     async relation() {
       const checkArr = this.$refs.menuTree.getCheckedNodes(false, true)
@@ -51,7 +60,7 @@ export default {
       if (res.code == 0) {
         this.$message({
           type: 'success',
-          message: '添加成功!'
+          message: '菜单设置成功!'
         })
       }
     }

web/src/view/superAdmin/menu/menu.vue

@@ -36,39 +36,48 @@
     </el-table>
 
     <el-dialog :before-close="handleClose" :visible.sync="dialogFormVisible" :title="dialogTitle">
-      <el-form :inline="true" :model="form" :rules="rules" label-width="85px" ref="menuForm">
-        <el-form-item label="路由name" prop="path">
+      <el-form
+        :inline="true"
+        :model="form"
+        :rules="rules"
+        label-width="85px"
+        ref="menuForm"
+        label-position="top"
+      >
+        <el-form-item label="路由name" prop="path" style="width:30%">
           <el-input autocomplete="off" placeholder="唯一英文字符串" v-model="form.path"></el-input>
         </el-form-item>
-        <el-form-item label="是否隐藏">
+        <el-form-item label="是否隐藏" style="width:30%">
           <el-select placeholder="是否在列表隐藏" v-model="form.hidden">
             <el-option :value="false" label="否"></el-option>
             <el-option :value="true" label="是"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="父节点Id">
-           <el-cascader
-              :disabled="!this.isEdit"
-              v-model="form.parentId"
-              :options="menuOption"
-              :show-all-levels="false"
-              :props="{ checkStrictly: true,label:'title',value:'ID',disabled:'disabled',emitPath:false}"
-              filterable>
-              </el-cascader>
+        <el-form-item label="父节点Id" style="width:30%">
+          <el-cascader
+            :disabled="!this.isEdit"
+            v-model="form.parentId"
+            :options="menuOption"
+            :show-all-levels="false"
+            :props="{ checkStrictly: true,label:'title',value:'ID',disabled:'disabled',emitPath:false}"
+            filterable
+          ></el-cascader>
         </el-form-item>
-        <el-form-item label="文件路径" prop="component">
+        <el-form-item label="文件路径" prop="component" style="width:30%">
           <el-input autocomplete="off" v-model="form.component"></el-input>
         </el-form-item>
-        <el-form-item label="展示名称" prop="meta.title">
+        <el-form-item label="展示名称" prop="meta.title" style="width:30%">
           <el-input autocomplete="off" v-model="form.meta.title"></el-input>
         </el-form-item>
-        <el-form-item label="图标" prop="meta.icon">
-          <el-input autocomplete="off" v-model="form.meta.icon"></el-input>
+        <el-form-item label="图标" prop="meta.icon" style="width:30%">
+          <el-input autocomplete="off" v-model="form.meta.icon">
+            <template slot="prepend">el-icon-</template>
+          </el-input>
         </el-form-item>
-        <el-form-item label="排序标记" prop="sort">
+        <el-form-item label="排序标记" prop="sort" style="width:30%">
           <el-input autocomplete="off" v-model.number="form.sort"></el-input>
         </el-form-item>
-        <el-form-item label="keepAlive" prop="meta.keepAlive">
+        <el-form-item label="keepAlive" prop="meta.keepAlive" style="width:30%">
           <el-select placeholder="是否keepAlive缓存页面" v-model="form.meta.keepAlive">
             <el-option :value="false" label="否"></el-option>
             <el-option :value="true" label="是"></el-option>
@@ -93,191 +102,198 @@ import {
   addBaseMenu,
   deleteBaseMenu,
   getBaseMenuById
-} from '@/api/menu'
-import infoList from '@/components/mixins/infoList'
+} from "@/api/menu";
+import infoList from "@/components/mixins/infoList";
 export default {
-  name: 'Menus',
+  name: "Menus",
   mixins: [infoList],
   data() {
     return {
       listApi: getMenuList,
       dialogFormVisible: false,
-      dialogTitle:"新增菜单",
-      menuOption:[
+      dialogTitle: "新增菜单",
+      menuOption: [
         {
-          ID:"0",
-          title:"根菜单"
+          ID: "0",
+          title: "根菜单"
         }
       ],
       form: {
         ID: 0,
-        path: '',
-        name: '',
-        hidden: '',
-        parentId: '',
-        component: '',
+        path: "",
+        name: "",
+        hidden: "",
+        parentId: "",
+        component: "",
         meta: {
-          title: '',
-          icon: '',
-          defaultMenu:false,
-          keepAlive:false
+          title: "",
+          icon: "",
+          defaultMenu: false,
+          keepAlive: false
         }
       },
       rules: {
-        path: [{ required: true, message: '请输入菜单name', trigger: 'blur' }],
+        path: [{ required: true, message: "请输入菜单name", trigger: "blur" }],
         component: [
-          { required: true, message: '请输入文件路径', trigger: 'blur' }
+          { required: true, message: "请输入文件路径", trigger: "blur" }
         ],
-        'meta.title': [
-          { required: true, message: '请输入菜单展示名称', trigger: 'blur' }
+        "meta.title": [
+          { required: true, message: "请输入菜单展示名称", trigger: "blur" }
         ]
       },
       isEdit: false
-    }
+    };
   },
   methods: {
-    setOptions(){
-       this.menuOption = [{
-          ID:"0",
-          title:"根目录"
-        }]
-      this.setMenuOptions(this.tableData,this.menuOption,false)
-    },
-    setMenuOptions(menuData,optionsData,disabled){
-      menuData&&menuData.map(item=>{
-        if(item.children.length){
-          const option = {
-            title:item.meta.title,
-            ID:String(item.ID),
-            disabled:disabled||item.ID == this.form.ID,
-            children:[]
+    setOptions() {
+      this.menuOption = [
+        {
+          ID: "0",
+          title: "根目录"
         }
-          this.setMenuOptions(item.children,option.children,disabled||item.ID == this.form.ID)
-          optionsData.push(option)
-        }else{
-          const option = {
-              title:item.meta.title,
-              ID:String(item.ID),
-              disabled:disabled||item.ID == this.form.ID,
+      ];
+      this.setMenuOptions(this.tableData, this.menuOption, false);
+    },
+    setMenuOptions(menuData, optionsData, disabled) {
+      menuData &&
+        menuData.map(item => {
+          if (item.children.length) {
+            const option = {
+              title: item.meta.title,
+              ID: String(item.ID),
+              disabled: disabled || item.ID == this.form.ID,
+              children: []
+            };
+            this.setMenuOptions(
+              item.children,
+              option.children,
+              disabled || item.ID == this.form.ID
+            );
+            optionsData.push(option);
+          } else {
+            const option = {
+              title: item.meta.title,
+              ID: String(item.ID),
+              disabled: disabled || item.ID == this.form.ID
+            };
+            optionsData.push(option);
           }
-          optionsData.push(option)
-        }
-      })
+        });
     },
     handleClose(done) {
-      this.initForm()
-      done()
+      this.initForm();
+      done();
     },
     // 懒加载子菜单
     load(tree, treeNode, resolve) {
       resolve([
         {
           id: 31,
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄"
         },
         {
           id: 32,
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄"
         }
-      ])
+      ]);
     },
     // 删除菜单
     deleteMenu(ID) {
-      this.$confirm('此操作将永久删除所有角色下该菜单, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+      this.$confirm("此操作将永久删除所有角色下该菜单, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
       })
         .then(async () => {
-          const res = await deleteBaseMenu({ ID })
+          const res = await deleteBaseMenu({ ID });
           if (res.code == 0) {
             this.$message({
-              type: 'success',
-              message: '删除成功!'
-            })
-            this.getTableData()
+              type: "success",
+              message: "删除成功!"
+            });
+            this.getTableData();
           }
         })
         .catch(() => {
           this.$message({
-            type: 'info',
-            message: '已取消删除'
-          })
-        })
+            type: "info",
+            message: "已取消删除"
+          });
+        });
     },
     // 初始化弹窗内表格方法
     initForm() {
-      this.$refs.menuForm.resetFields()
+      this.$refs.menuForm.resetFields();
       this.form = {
         ID: 0,
-        path: '',
-        name: '',
-        hidden: '',
-        parentId: '',
-        component: '',
+        path: "",
+        name: "",
+        hidden: "",
+        parentId: "",
+        component: "",
         meta: {
-          title: '',
-          icon: '',
-          defaultMenu:false,
-          keepAlive:""
+          title: "",
+          icon: "",
+          defaultMenu: false,
+          keepAlive: ""
         }
-      }
+      };
     },
     // 关闭弹窗
     closeDialog() {
-      this.initForm()
-      this.dialogFormVisible = false
+      this.initForm();
+      this.dialogFormVisible = false;
     },
     // 添加menu
     async enterDialog() {
       this.$refs.menuForm.validate(async valid => {
         if (valid) {
-          let res
-          this.form.name = this.form.path
+          let res;
+          this.form.name = this.form.path;
           if (this.isEdit) {
-            res = await updateBaseMenu(this.form)
+            res = await updateBaseMenu(this.form);
           } else {
-            res = await addBaseMenu(this.form)
+            res = await addBaseMenu(this.form);
           }
           if (res.code == 0) {
             this.$message({
-              type: 'success',
-              message: this.isEdit?'编辑成功':'添加成功!'
-            })
-            this.getTableData()
+              type: "success",
+              message: this.isEdit ? "编辑成功" : "添加成功!"
+            });
+            this.getTableData();
           }
-          this.initForm()
-          this.dialogFormVisible = false
+          this.initForm();
+          this.dialogFormVisible = false;
         }
-      })
+      });
     },
     // 添加菜单方法，id为 0则为添加根菜单
     addMenu(id) {
-      this.dialogTitle = "新增菜单"
-      this.form.parentId = String(id)
-      this.isEdit = false
-      this.setOptions()
-      this.dialogFormVisible = true
+      this.dialogTitle = "新增菜单";
+      this.form.parentId = String(id);
+      this.isEdit = false;
+      this.setOptions();
+      this.dialogFormVisible = true;
     },
     // 修改菜单方法
     async editMenu(id) {
-      this.dialogTitle = "编辑菜单"
-      const res = await getBaseMenuById({ id })
-      this.form = res.data.menu
-      this.isEdit = true
-      this.setOptions()
-      this.dialogFormVisible = true
-    },
+      this.dialogTitle = "编辑菜单";
+      const res = await getBaseMenuById({ id });
+      this.form = res.data.menu;
+      this.isEdit = true;
+      this.setOptions();
+      this.dialogFormVisible = true;
+    }
   },
-   async created() {
-    this.pageSize = 999
-    await this.getTableData()
+  async created() {
+    this.pageSize = 999;
+    await this.getTableData();
   }
-}
+};
 </script>
 <style scoped lang="scss">
 .button-box {

web/src/view/superAdmin/user/user.vue

@@ -18,27 +18,24 @@
         <template slot-scope="scope">
           <el-cascader
             @change="changeAuthority(scope.row)"
-              v-model="scope.row.authority.authorityId"
-              :options="authOptions"
-              :show-all-levels="false"
-              :props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
-              filterable>
-              </el-cascader>
+            v-model="scope.row.authority.authorityId"
+            :options="authOptions"
+            :show-all-levels="false"
+            :props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
+            filterable
+          ></el-cascader>
         </template>
       </el-table-column>
       <el-table-column label="操作" min-width="150">
         <template slot-scope="scope">
-          <el-popover
-          placement="top"
-          width="160"
-          v-model="scope.row.visible">
-          <p>确定要删除此用户吗</p>
-          <div style="text-align: right; margin: 0">
-            <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
-            <el-button type="primary" size="mini" @click="deleteUser(scope.row)">确定</el-button>
-          </div>
-           <el-button type="text" size="small" slot="reference">删除</el-button>
-        </el-popover>
+          <el-popover placement="top" width="160" v-model="scope.row.visible">
+            <p>确定要删除此用户吗</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
+              <el-button type="primary" size="mini" @click="deleteUser(scope.row)">确定</el-button>
+            </div>
+            <el-button type="text" size="small" slot="reference">删除</el-button>
+          </el-popover>
         </template>
       </el-table-column>
     </el-table>
@@ -54,7 +51,7 @@
     ></el-pagination>
 
     <el-dialog :visible.sync="addUserDialog" custom-class="user-dialog" title="新增用户">
-      <el-form :rules="rules" ref="userForm" :model="userInfo" >
+      <el-form :rules="rules" ref="userForm" :model="userInfo">
         <el-form-item label="用户名" label-width="80px" prop="username">
           <el-input v-model="userInfo.username"></el-input>
         </el-form-item>
@@ -80,12 +77,12 @@
         <el-form-item label="用户角色" label-width="80px" prop="authorityId">
           <el-cascader
             @change="changeAuthority(scope.row)"
-              v-model="userInfo.authorityId"
-              :options="authOptions"
-              :show-all-levels="false"
-              :props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
-              filterable>
-              </el-cascader>
+            v-model="userInfo.authorityId"
+            :options="authOptions"
+            :show-all-levels="false"
+            :props="{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
+            filterable
+          ></el-cascader>
         </el-form-item>
       </el-form>
       <div class="dialog-footer" slot="footer">
@@ -99,115 +96,121 @@
 
 <script>
 // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成
-const path = process.env.VUE_APP_BASE_API
-import { getUserList, setUserAuthority, register, deleteUser } from '@/api/user'
-import { getAuthorityList } from '@/api/authority'
-import infoList from '@/components/mixins/infoList'
-import { mapGetters } from 'vuex'
+const path = process.env.VUE_APP_BASE_API;
+import {
+  getUserList,
+  setUserAuthority,
+  register,
+  deleteUser
+} from "@/api/user";
+import { getAuthorityList } from "@/api/authority";
+import infoList from "@/components/mixins/infoList";
+import { mapGetters } from "vuex";
 export default {
-  name: 'Api',
+  name: "Api",
   mixins: [infoList],
   data() {
     return {
       listApi: getUserList,
-      path:path,
+      path: path,
       authOptions: [],
       addUserDialog: false,
       userInfo: {
-        username: '',
-        password: '',
-        nickName: '',
-        headerImg: '',
-        authorityId: ''
+        username: "",
+        password: "",
+        nickName: "",
+        headerImg: "",
+        authorityId: ""
       },
       rules: {
-        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" }
+        ],
         password: [
-          { required: true, message: '请输入用户密码', trigger: 'blur' }
+          { required: true, message: "请输入用户密码", trigger: "blur" }
         ],
         nickName: [
-          { required: true, message: '请输入用户昵称', trigger: 'blur' }
+          { required: true, message: "请输入用户昵称", trigger: "blur" }
         ],
         authorityId: [
-          { required: true, message: '请选择用户角色', trigger: 'blur' }
+          { required: true, message: "请选择用户角色", trigger: "blur" }
         ]
-      },
-    }
+      }
+    };
   },
   computed: {
-    ...mapGetters('user', ['token'])
+    ...mapGetters("user", ["token"])
   },
   methods: {
-     setOptions(authData){
-      this.authOptions = []
-      this.setAuthorityOptions(authData,this.authOptions)
+    setOptions(authData) {
+      this.authOptions = [];
+      this.setAuthorityOptions(authData, this.authOptions);
     },
-    setAuthorityOptions(AuthorityData,optionsData){
-      AuthorityData&&AuthorityData.map(item=>{
-        if(item.children.length){
-          const option = {
-            authorityId:item.authorityId,
-            authorityName:item.authorityName,
-            children:[]
-        }
-          this.setAuthorityOptions(item.children,option.children)
-          optionsData.push(option)
-        }else{
-          const option = {
-              authorityId:item.authorityId,
-              authorityName:item.authorityName,
+    setAuthorityOptions(AuthorityData, optionsData) {
+      AuthorityData &&
+        AuthorityData.map(item => {
+          if (item.children.length) {
+            const option = {
+              authorityId: item.authorityId,
+              authorityName: item.authorityName,
+              children: []
+            };
+            this.setAuthorityOptions(item.children, option.children);
+            optionsData.push(option);
+          } else {
+            const option = {
+              authorityId: item.authorityId,
+              authorityName: item.authorityName
+            };
+            optionsData.push(option);
           }
-          optionsData.push(option)
-        }
-      })
+        });
     },
-    async deleteUser(row){
-      const res = await deleteUser({id:row.ID})
-      if(res.code == 0){
-        this.getTableData()
-        row.visible = false
+    async deleteUser(row) {
+      const res = await deleteUser({ id: row.ID });
+      if (res.code == 0) {
+        this.getTableData();
+        row.visible = false;
       }
     },
     async enterAddUserDialog() {
       this.$refs.userForm.validate(async valid => {
         if (valid) {
-          const res = await register(this.userInfo)
+          const res = await register(this.userInfo);
           if (res.code == 0) {
-            this.$message({ type: 'success', message: '创建成功' })
+            this.$message({ type: "success", message: "创建成功" });
           }
-          await this.getTableData()
-          this.closeAddUserDialog()
+          await this.getTableData();
+          this.closeAddUserDialog();
         }
-      })
+      });
     },
     closeAddUserDialog() {
-      this.$refs.userForm.resetFields()
-      this.addUserDialog = false
+      this.$refs.userForm.resetFields();
+      this.addUserDialog = false;
     },
     handleAvatarSuccess(res) {
-      this.userInfo.headerImg = res.data.file.url
+      this.userInfo.headerImg = res.data.file.url;
     },
     addUser() {
-      this.addUserDialog = true
+      this.addUserDialog = true;
     },
     async changeAuthority(row) {
       const res = await setUserAuthority({
         uuid: row.uuid,
         authorityId: row.authority.authorityId
-      })
+      });
       if (res.code == 0) {
-        this.$message({ type: 'success', message: '角色设置成功' })
+        this.$message({ type: "success", message: "角色设置成功" });
       }
     }
   },
   async created() {
-    this.getTableData()
-    const res = await getAuthorityList({ page: 1, pageSize: 999 })
-    this.setOptions(res.data.list)
+    this.getTableData();
+    const res = await getAuthorityList({ page: 1, pageSize: 999 });
+    this.setOptions(res.data.list);
   }
-
-  
-}
+};
 </script>
 <style scoped lang="scss">
 .button-box {

web/src/view/systemTools/autoCode/component/fieldDialog.vue

@@ -6,6 +6,11 @@
                 <el-input v-model="dialogMiddle.fieldName" autocomplete="off"></el-input>
                 </el-col>
             </el-form-item>
+            <el-form-item label="Field中文名" prop="fieldDesc">
+                <el-col :span="6">
+                <el-input v-model="dialogMiddle.fieldDesc" autocomplete="off"></el-input>
+                </el-col>
+            </el-form-item>
             <el-form-item label="FieldJSON" prop="fieldJson">
                 <el-col :span="6">
                 <el-input v-model="dialogMiddle.fieldJson" autocomplete="off"></el-input>
@@ -69,6 +74,7 @@ export default {
             ],
             rules:{
                 fieldName:[ { required: true, message: '请输入field英文名', trigger: 'blur' }],
+                fieldDesc:[ { required: true, message: '请输入field中文名', trigger: 'blur' }],
                 fieldJson:[ { required: true, message: '请输入field格式化json', trigger: 'blur' }],
                 fieldType:[ { required: true, message: '请选择field数据类型', trigger: 'blur' }]
             }

web/src/view/systemTools/autoCode/index.vue

@@ -8,7 +8,7 @@
             <el-form-item label="Struct简称" prop="abbreviation">
                 <el-input v-model="form.abbreviation" placeholder="简称会作为入参对象名和路由group"></el-input>
             </el-form-item>
-            <el-form-item label="Package名称" prop="packageName">
+            <el-form-item label="文件名称" prop="packageName">
                 <el-input v-model="form.packageName"></el-input>
             </el-form-item>
         </el-form>
@@ -28,6 +28,11 @@
                 prop="fieldName"
                 label="Field名"
                 width="280">
+            </el-table-column>
+             <el-table-column
+                type="fieldDesc"
+                label="中文名"
+                width="280">
             </el-table-column>
             <el-table-column
                 prop="fieldJson"
@@ -74,6 +79,7 @@
 <script>
 const fieldTemplate={
             fieldName:"",
+            fieldDesc:"",
             fieldType:"",
             fieldJson:"",
             columnName:"",