系统管理样式

public/static/config.js

@@ -9,8 +9,8 @@
 
 // api 请求路径
 var PLATFROM_CONFIG = {};
-PLATFROM_CONFIG.baseUrl = "http://172.16.120.49/securityapi/"
-    //PLATFROM_CONFIG.baseUrl = "http://10.21.39.1:8082" //生产
+//PLATFROM_CONFIG.baseUrl = "http://172.16.120.49/securityapi/"
+PLATFROM_CONFIG.baseUrl = "http://10.21.39.1:8082" //生产
     //alarming WEBSOCKET
 let userInfo = window.localStorage.getItem("key");
 var PLATFROM_WEBSOCKET = {};

src/components/SvgIcon/index.vue

@@ -13,11 +13,11 @@ export default {
   name: 'SvgIcon',
   props: {
     iconClass: {
-      type: String,
+      // type: String,
       required: true
     },
     className: {
-      type: String,
+      // type: String,
       default: ''
     }
   },

src/styles/index.scss

@@ -155,14 +155,16 @@ div:focus {
 
 .el-table td,
 .el-table th {
-    text-align: center !important;
+    text-align: left !important;
+}
+
+.el-table td {
+    padding: 0 0 0 10px;
 }
 
 .el-table .cell,
-.el-table--border td:first-child .cell,
-.el-table--border th:first-child .cell {
+.el-table--border td:first-child .cell {
     padding-left: 0px;
-    padding-right: 0px;
 }
 
 .el-table .cell {
@@ -178,7 +180,7 @@ div:focus {
 
 .el-table th,
 .el-table td {
-    padding: 0;
+    // padding: 0;
     line-height: 40px;
     height: 40px
 }

src/views/system/auth-manage/index.vue

@@ -5,44 +5,34 @@
         <!-- 菜单表 start -->
         <el-tab-pane label="菜单表" name="menu">
           <div class="app-container">
-            <div class="filter-container">
-              <div class="filter-left">
-                <div class="filter-item">
-                  菜单名称:
-                  <el-input
-                    v-model="menuQuery.menuName"
-                    style="width: 160px"
-                    placeholder="请输入菜单名称"
-                    clearable
-                  ></el-input>
-                </div>
-                <el-button
-                  type="primary"
-                  icon="el-icon-search"
-                  size="mini"
-                  @click="getMenuData()"
+            <el-form  :inline="true">
+              <el-form-item label="菜单名称:">
+                <el-input
+                  v-model="menuQuery.menuName"
+                  style="width: 160px"
+                  placeholder="请输入菜单名称"
+                  clearable
+                ></el-input>
+              </el-form-item>
+              <el-form-item class="right">
+                <el-button plain size="mini" @click="resetQuery">重置</el-button>
+                <el-button type="primary" size="mini" @click="getMenuData()"
                   >搜索</el-button
                 >
-                <el-button
-                  type="primary"
-                  icon="el-icon-refresh"
-                  size="mini"
-                  @click="resetQuery"
-                  >重置</el-button
-                >
-                <el-button icon="el-icon-plus" type="success" size="mini" @click="menuAdd()"
-                  >新增</el-button
-                >
-              </div>
-            </div>
+              </el-form-item>
+              <br />
+              <el-button type="primary" size="mini" @click="menuAdd()"
+                >新增</el-button
+              >
+            </el-form>
             <el-table
               v-if="menuTable"
               v-loading="loading"
               :data="menuListData"
               row-key="menuId"
               :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-              style="margin-top: 10px"
-              :max-height="tableHeight"
+              style="margin-top: 20px"
+              border
             >
               <el-table-column
                 prop="menuName"
@@ -93,16 +83,12 @@
               >
                 <template slot-scope="scope">
                   <el-button
-                    size="mini"
-                    type="text"
-                    icon="el-icon-edit"
+                   class="lans"
                     @click="menuUpdate(scope.row)"
                     >修改</el-button
                   >
                   <el-button
-                    size="mini"
-                    type="text"
-                    icon="el-icon-delete"
+                    class="hongs"
                     @click="menuDelete(scope.row)"
                     >删除</el-button
                   >
@@ -135,7 +121,10 @@
                   </el-col>
                   <el-col :span="24">
                     <el-form-item label="菜单类型" prop="menuType">
-                      <el-radio-group v-model="menuForm.menuType" style="margin-top:-10px">
+                      <el-radio-group
+                        v-model="menuForm.menuType"
+                        style="margin-top: -10px"
+                      >
                         <el-radio label="M">目录</el-radio>
                         <el-radio label="C">菜单</el-radio>
                         <el-radio label="F">按钮</el-radio>
@@ -165,7 +154,7 @@
                             slot="prefix"
                             :icon-class="menuForm.icon"
                             class="el-input__icon"
-                            style="height: 32px; width: 16px;"
+                            style="height: 32px; width: 16px"
                           />
                           <!-- <i
                             v-else
@@ -263,7 +252,7 @@
                 <el-button :loading="loading" type="primary" v-else
                   >提交中...</el-button
                 >
-                <el-button @click="cancel">取 消</el-button>
+                <el-button @click="cancel" plain>取 消</el-button>
               </div>
             </el-dialog>
           </div>
@@ -273,46 +262,34 @@
         <!-- 角色表 start-->
         <el-tab-pane label="角色表" name="role">
           <div class="app-container">
-            <div class="filter-container">
-              <div class="filter-left">
-                <div class="filter-item">
-                  角色名称:
-                  <el-input
-                    v-model="roleListQuery.roleName"
-                    placeholder="请输入角色名称"
-                    style="width: 160px"
-                    clearable
-                  ></el-input>
-                </div>
-                <el-button
-                  type="primary"
-                  icon="el-icon-search"
-                  size="mini"
-                  @click="roleQuery()"
-                  >搜索</el-button
-                >
-                <el-button
-                  type="primary"
-                  icon="el-icon-refresh"
-                  size="mini"
-                  @click="resetQuery"
+            <el-form  :inline="true">
+              <el-form-item label="角色名称:">
+                <el-input
+                  v-model="roleListQuery.roleName"
+                  placeholder="请输入角色名称"
+                  style="width: 160px"
+                  clearable
+                ></el-input>
+              </el-form-item>
+              <el-form-item class="right">
+                <el-button plain size="mini" @click="resetQuery"
                   >重置</el-button
                 >
-                <el-button
-                  icon="el-icon-plus"
-                  size="mini"
-                  type="success"
-                  @click="roleEditOrAdd('add')"
-                  >新增</el-button
+                <el-button type="primary" size="mini" @click="roleQuery()"
+                  >搜索</el-button
                 >
-              </div>
-            </div>
+              </el-form-item>
+              <br />
+              <el-button type="primary" size="mini" @click="roleEditOrAdd('add')"
+                >新增</el-button
+              >
+            </el-form>
             <!-- <el-divider></el-divider> -->
             <el-table
               v-loading="loading"
               :data="roleListAdmin"
-              style="margin-top: 10px"
-              :max-height="tableHeight"
+              style="margin-top: 20px"
+              border
             >
               <el-table-column label="角色编号" prop="roleId" />
               <el-table-column
@@ -359,19 +336,13 @@
               >
                 <template slot-scope="scope" v-if="scope.row.roleId !== 1">
                   <el-button
-                    size="mini"
-                    type="text"
-                    icon="el-icon-edit"
-                    style="color: #406ce5"
+                    class="lans"
                     @click="roleEditOrAdd('edit', scope.row)"
                     >修改</el-button
                   >
                   <el-button
-                    size="mini"
-                    type="text"
-                    icon="el-icon-delete"
+                    class="hongs"
                     @click="roleRemove(scope.row)"
-                    style="color: #f27979"
                     >删除</el-button
                   >
                   <!-- <el-button
@@ -431,18 +402,22 @@
                         v-model="roleForm.roleSort"
                         controls-position="right"
                         :min="0"
-                        style="width:170px"
+                        style="width: 170px"
                       />
                     </el-form-item>
                   </el-col>
                   <el-col :span="12">
                     <el-form-item label="状态">
-                      <el-radio-group v-model="roleForm.status" style="margin-top:-10px" >
+                      <el-radio-group
+                        v-model="roleForm.status"
+                        style="margin-top: -10px"
+                      >
                         <el-radio
                           v-for="dict in statusOptions"
                           :key="dict.dictValue"
                           :label="dict.dictValue"
-                        >{{dict.dictLabel}}</el-radio>
+                          >{{ dict.dictLabel }}</el-radio
+                        >
                       </el-radio-group>
                     </el-form-item>
                   </el-col>
@@ -493,7 +468,7 @@
                 <el-button :loading="loading" type="primary" v-else
                   >提交中...</el-button
                 >
-                <el-button @click="cancel">取 消</el-button>
+                <el-button @click="cancel" plain>取 消</el-button>
               </div>
             </el-dialog>
           </div>
@@ -551,8 +526,8 @@ export default {
       },
       // 状态数据字典
       statusOptions: [
-        {dictLabel:"正常",dictValue:"0"},
-        {dictLabel:"停用",dictValue:"1"}
+        { dictLabel: "正常", dictValue: "0" },
+        { dictLabel: "停用", dictValue: "1" },
       ],
 
       menuListData: {}, //菜单初始化数据
@@ -711,7 +686,7 @@ export default {
       },
       menuFormHC: {},
       roleTitle: undefined,
-      tableHeight:undefined,
+      tableHeight: undefined,
     };
   },
   watch: {
@@ -729,16 +704,16 @@ export default {
   },
   mounted() {
     // table高度
-    if(window.innerWidth <1920){
-      this.tableHeight = window.innerHeight - 300
-    }else{
-      this.tableHeight = window.innerHeight - 295
+    if (window.innerWidth < 1920) {
+      this.tableHeight = window.innerHeight - 300;
+    } else {
+      this.tableHeight = window.innerHeight - 295;
     }
     // 监听窗口大小变化
     let self = this;
-    window.onresize = function() {
-      self.tableHeight = window.innerHeight - 300
-    }
+    window.onresize = function () {
+      self.tableHeight = window.innerHeight - 300;
+    };
   },
   methods: {
     /**
@@ -793,7 +768,6 @@ export default {
           status: undefined,
         });
 
-
       // this.resetForm("form");
     },
 
@@ -811,13 +785,20 @@ export default {
               for (let a = 0; a < response.data[i].children.length; a++) {
                 arr[i].children[a] = {};
                 arr[i].children[a].id = response.data[i].children[a].menuId;
-                arr[i].children[a].label = response.data[i].children[a].menuName;
-                if(response.data[i].children[a].children){
-                  arr[i].children[a].children = []
-                  for(let b =0; b<(response.data[i].children[a].children).length; b++){
-                    arr[i].children[a].children[b] = {}
-                    arr[i].children[a].children[b].id = response.data[i].children[a].children[b].menuId
-                    arr[i].children[a].children[b].label = response.data[i].children[a].children[b].menuName
+                arr[i].children[a].label =
+                  response.data[i].children[a].menuName;
+                if (response.data[i].children[a].children) {
+                  arr[i].children[a].children = [];
+                  for (
+                    let b = 0;
+                    b < response.data[i].children[a].children.length;
+                    b++
+                  ) {
+                    arr[i].children[a].children[b] = {};
+                    arr[i].children[a].children[b].id =
+                      response.data[i].children[a].children[b].menuId;
+                    arr[i].children[a].children[b].label =
+                      response.data[i].children[a].children[b].menuName;
                   }
                 }
               }
@@ -850,14 +831,22 @@ export default {
               arr[i].children = [];
               for (let a = 0; a < response.data.menus[i].children.length; a++) {
                 arr[i].children[a] = {};
-                arr[i].children[a].id = response.data.menus[i].children[a].menuId;
-                arr[i].children[a].label = response.data.menus[i].children[a].menuName;
-                if(response.data.menus[i].children[a].children){
-                  arr[i].children[a].children = []
-                  for(let b =0; b<(response.data.menus[i].children[a].children).length; b++){
-                    arr[i].children[a].children[b] = {}
-                    arr[i].children[a].children[b].id = response.data.menus[i].children[a].children[b].menuId
-                    arr[i].children[a].children[b].label = response.data.menus[i].children[a].children[b].menuName
+                arr[i].children[a].id =
+                  response.data.menus[i].children[a].menuId;
+                arr[i].children[a].label =
+                  response.data.menus[i].children[a].menuName;
+                if (response.data.menus[i].children[a].children) {
+                  arr[i].children[a].children = [];
+                  for (
+                    let b = 0;
+                    b < response.data.menus[i].children[a].children.length;
+                    b++
+                  ) {
+                    arr[i].children[a].children[b] = {};
+                    arr[i].children[a].children[b].id =
+                      response.data.menus[i].children[a].children[b].menuId;
+                    arr[i].children[a].children[b].label =
+                      response.data.menus[i].children[a].children[b].menuName;
                   }
                 }
               }
@@ -959,7 +948,7 @@ export default {
             type: "info",
             message: "已取消删除",
           });
-        })
+        });
     },
 
     batchDelete2() {
@@ -1024,33 +1013,39 @@ export default {
     },
     // 角色状态修改
     handleStatusChange(row) {
-      let that = this
+      let that = this;
       let text = row.status === "0" ? "启用" : "停用";
-      this.$confirm('确认要"' + text + '""' + row.roleName + '"角色吗?', "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(function() {
-        const roleId = row.roleId || that.ids;
-        const roleName = row.roleName;
-        roleMenuTree(roleId).then((response) =>{
-          roleList({ roleName: roleName }).then((response2) => {
-            let arr = []
-            arr = response2.data.pageList[0]
-            arr.menuIds = response.data.checkedKeys
-            arr.params = undefined
-            arr.status = row.status
-            roleEdit(arr).then(() => {
-              Message({
-                message: ("角色'" + row.roleName + "'"  + text + "成功"),
-                type: "success",
+      this.$confirm(
+        '确认要"' + text + '""' + row.roleName + '"角色吗?',
+        "警告",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(function () {
+          const roleId = row.roleId || that.ids;
+          const roleName = row.roleName;
+          roleMenuTree(roleId).then((response) => {
+            roleList({ roleName: roleName }).then((response2) => {
+              let arr = [];
+              arr = response2.data.pageList[0];
+              arr.menuIds = response.data.checkedKeys;
+              arr.params = undefined;
+              arr.status = row.status;
+              roleEdit(arr).then(() => {
+                Message({
+                  message: "角色'" + row.roleName + "'" + text + "成功",
+                  type: "success",
+                });
               });
-            })
-          })
+            });
+          });
         })
-      }).catch(function() {
-        row.status = row.status === "0" ? "1" : "0";
-      });
+        .catch(function () {
+          row.status = row.status === "0" ? "1" : "0";
+        });
     },
     //角色删除
     roleRemove(row) {
@@ -1298,43 +1293,39 @@ export default {
     cancel() {
       this.dialogFormVisible1 = false;
       this.dialogFormVisible2 = false;
-      this.menuFormReset()
-
+      this.menuFormReset();
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.roleListQuery = {
+      (this.roleListQuery = {
         //角色初始化表格请求参数
         pageNo: 1,
         pageSize: 15,
         roleKey: undefined,
         roleName: undefined,
         status: 0,
-      },
-      this.menuQuery = {
-        menuName: undefined,
-      },
-      this.handleQuery();
+      }),
+        (this.menuQuery = {
+          menuName: undefined,
+        }),
+        this.handleQuery();
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.tabChange()
+      this.tabChange();
     },
-    
   },
 };
 </script>
 <style scoped>
-
 .app-container {
   min-height: calc(100vh - 115px) !important;
 }
 </style>
 
-
-<style >
-.el-input__prefix{
-  top:4px !important;
+<style>
+.el-input__prefix {
+  top: 4px !important;
 }
 .el-dialog .el-form-item__label {
   line-height: 40px;

src/views/system/organization/index.vue

@@ -1,40 +1,40 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-left">
-        <div class="filter-item">
-          部门名称:
+    <el-form :model="queryForm" ref="queryForm" :inline="true">
+      <el-form-item label="部门名称:">
           <el-input
             v-model="queryForm.deptName"
             placeholder="请输入部门名称"
             style="width: 160px"
             clearable
           ></el-input>
-        </div>
-
-        <el-button type="primary" icon="el-icon-search"  size="mini" @click="query()">搜索</el-button>
-        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+        <el-form-item class="right">
+          <el-button plain size="mini" @click="resetQuery">重置</el-button>
+          <el-button type="primary" size="mini" @click="query()">搜索</el-button>
+        </el-form-item>
+        <br>
         <el-button
-          icon="el-icon-plus"
-          type="success"
+         type="primary"
           size="mini"
           @click="handleAdd()"
           >新增</el-button
         >
-      </div>
-    </div>
-    <!-- <el-divider></el-divider> -->
-     <!-- default-expand-all -->
+      </el-form>
     <el-table
       v-loading="loading"
       :data="tableData"
       row-key="deptId"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
       @selection-change="handleSelectionChange"
-      style="margin-top:10px"
-      :max-height="tableHeight"
+      style="margin-top:20px"
+      border
     >
-      <el-table-column prop="deptName" label="部门名称" align="left"></el-table-column>
+      <!-- <el-table-column  type="selection" width="50" align="center">
+          <input type="checkbox">
+      </el-table-column> -->
+      <el-table-column width="50" ></el-table-column>
+      <el-table-column prop="deptName" label="部门名称" align="right"></el-table-column>
       <!-- <el-table-column prop="leader" label="负责人" ></el-table-column>
       <el-table-column prop="phone" label="电话" ></el-table-column>
       <el-table-column prop="email" label="邮箱" ></el-table-column>