公共样式整合

4c0b4cd9 · 张伯涛 · 7bb504e5 · 4c0b4cd9 · 4c0b4cd9 · 4c0b4cd9
Commit 4c0b4cd9 authored Jan 08, 2024 by 张伯涛
9 changed files
--- a/src/components/coolbutton/index.vue
+++ b/src/components/coolbutton/index.vue
@@ -3,6 +3,7 @@
    v-if="isShow"
    :size="size"
    :type="type"
+    :class="className"
    :icon="icon"
    :disabled="disabled"
    @click="defaultClick"
@@ -12,6 +13,7 @@
    v-hasPermi="hasper"
    :size="size"
    :type="type"
+    :class="className"
    :icon="icon"
    :disabled="disabled"
    @click="defaultClick"
@@ -27,6 +29,9 @@ export default {
    name: {
      type: String
    },
+    className: {
+      type: String
+    },
    type: {
      type: String
    },

--- a/src/styles/themeA/index.scss
+++ b/src/styles/themeA/index.scss
+
+
+
+//------------公共的样式文件---------------------------------------------------
+@import "./navigationBar.scss"; // 左侧导航栏css样式文件
+@import "./sidebar.scss"; // 自带的左侧导航栏css样式文件
+@import "./variables.scss"; // 风格变量css样式文件
+@import "./tagsView.scss"; // 顶部面包屑tag签css样式文件
+@import "./layout.scss"; // layout的css样式文件
+
+
+
+//-----------各个模块的样式文件--------------------------------------------
 @import "./user.scss"; // 用户管理模块css样式文件
 @import "./role.scss"; // 角色管理模块css样式文件
 @import "./menu.scss"; // 菜单管理模块css样式文件
@@ -8,8 +21,3 @@
 @import "./errorLog.scss"; // 异常日志模块css样式文件
 @import "./reSetPsw.scss"; // 修改密码模块css样式文件
 @import "./login.scss"; // 登录页面css样式文件
-@import "./navigationBar.scss"; // 左侧导航栏css样式文件
-@import "./sidebar.scss"; // 自带的左侧导航栏css样式文件
-@import "./variables.scss"; // 风格变量css样式文件
-@import "./tagsView.scss"; // 顶部面包屑tag签css样式文件
-@import "./layout.scss"; // layout的css样式文件
--- a/src/styles/themeB/common.scss
+++ b/src/styles/themeB/common.scss
+// 通用样式，如：按钮，列表，form表单等
+
+// 查询按钮
+.queryBtn{
+  //width: 72px;
+  //height: 32px;
+  background: #03a487;
+  border: 1px solid #03a487!important;
+  border-radius: 4px;
+  font-size: 16px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #ffffff;
+  line-height: 16px;
+}
+//重置按钮
+.resetBtn{
+  //width: 72px;
+  //height: 32px;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 16px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #666666;
+  line-height: 16px;
+}
+//新增按钮
+.addBtn{
+  //width: 72px;
+  //height: 34px;
+  background: #03a487!important;
+  border: 1px solid #03a487!important;
+  border-radius: 6px;
+  font-size: 16px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #ffffff;
+  line-height: 16px;
+}
+//导入按钮
+.importBtn{
+  //width: 72px;
+  //height: 34px;
+  background: #f9a221!important;
+  border: 1px solid #f9a221!important;
+  border-radius: 6px;
+  font-size: 16px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #ffffff;
+  line-height: 16px;
+}
+//导出按钮
+.exportBtn{
+  //width: 72px;
+  //height: 34px;
+  background: #0762b6!important;
+  border: 1px solid #0762b6!important;
+  border-radius: 6px;
+  font-size: 16px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #ffffff;
+  line-height: 16px;
+}
+form的label样式
+.el-form .el-form-item .el-form-item__label{
+  color: #333333;
+  font-size: 16px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #333333;
+}
+// 输入框内文字样式
+ .el-input__inner{
+   padding-right: 10px!important;
+   font-size: 16px!important;
+ }
+ // placeholder样式
+::placeholder{
+  color: #969696!important;
+  font-size: 16px!important;
+}
+// tree组件样式
+.el-tree-node{
+  font-size: 16px!important;
+}
+// switch开样式
+.el-switch.is-checked .el-switch__core{
+  border-color: #03A487;
+  background-color: #03A487;
+}
+// switch关样式
+.el-switch__core{
+  border-color: #BBBBBB;
+  background-color: #BBBBBB;
+}
+//table列表title样式
+.tableTitle{
+  margin: 20px 0;
+  color: #333333;
+  font-size: 16px;
+  font-family: Microsoft YaHei, Microsoft YaHei-700;
+  font-weight: 700;
+  text-align: LEFT;
+}
+// table列表表头样式
+.el-table th .cell{
+  background: #f2f2f2;
+  font-size: 16px;
+  font-family: Microsoft YaHei, Microsoft YaHei-700;
+  font-weight: 700;
+  text-align: LEFT;
+  color: #333333;
+  line-height: 24px;
+}
+// table列表内容样式
+.el-table td .cell{
+  font-size: 16px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #666666;
+}
+//修改按钮文字类型样式
+.updateBtn{
+  font-size: 16px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #03a487;
+}
+//重置按钮文字类型样式
+.resetBtnText{
+  font-size: 16px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #0762B6;
+}
+//删除按钮文字类型样式
+.delBtn{
+  font-size: 16px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #0762B6;
+}
+//分页样式
+.el-pagination.is-background .el-pager li:not(.disabled).active{
+  background: #ffffff;
+  border: 1px solid #03a487;
+  border-radius: 2px;
+  color: #03a487;
+  font-size: 16px;
+}
+//分页样式
+.el-pagination.is-background .el-pager li {
+  font-size: 16px;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  color: #686A6C;
+  background: #ffffff;
+  border: 1px solid #eeeeee;
+  border-radius: 2px;
+}
+//分页样式
+.el-pagination__total{
+  font-size: 16px!important;
+  font-family: Microsoft YaHei, Microsoft YaHei-400;
+  font-weight: 400;
+  text-align: LEFT;
+  color: #686a6c;
+}
--- a/src/styles/themeB/index.scss
+++ b/src/styles/themeB/index.scss
+
+
+
+//------------公共的样式文件---------------------------------------------------
+@import "./navigationBar.scss"; // 左侧导航栏css样式文件
+@import "./sidebar.scss"; // 自带的左侧导航栏css样式文件
+@import "./variables.scss"; // 风格变量css样式文件
+@import "./tagsView.scss"; // 顶部面包屑tag签css样式文件
+@import "./layout.scss"; // layout的css样式文件
+@import "./common.scss"; // // 通用样式，如：按钮，列表，form表单等样式文件
+
+//-----------各个模块的样式文件--------------------------------------------
+@import "./login.scss"; // 登录页面css样式文件
 @import "./user.scss"; // 用户管理模块css样式文件
 @import "./role.scss"; // 角色管理模块css样式文件
 @import "./menu.scss"; // 菜单管理模块css样式文件
@@ -7,9 +20,3 @@
 @import "./operLog.scss"; // 操作日志模块css样式文件
 @import "./errorLog.scss"; // 异常日志模块css样式文件
 @import "./reSetPsw.scss"; // 修改密码模块css样式文件
-@import "./login.scss"; // 登录页面css样式文件
-@import "./navigationBar.scss"; // 左侧导航栏css样式文件
-@import "./sidebar.scss"; // 自带的左侧导航栏css样式文件
-@import "./variables.scss"; // 风格变量css样式文件
-@import "./tagsView.scss"; // 顶部面包屑tag签css样式文件
-@import "./layout.scss"; // layout的css样式文件
--- a/src/styles/themeB/sidebar.scss
+++ b/src/styles/themeB/sidebar.scss
@@ -263,7 +263,7 @@
    font-size: 16px!important;
    color: #333333 !important;
    font-weight: bold!important;
-    //margin: 0 10px!important;
+    margin: 0 10px!important;
    height: 42px!important;
    line-height: 42px!important;
    border-radius: 4px!important;

--- a/src/styles/themeB/user.scss
+++ b/src/styles/themeB/user.scss
 $color-theme: #F57b7b;
 .user-manage{
-  .userQueryBtn{
-    //font-size: 20px;
-    //font-weight: bold;
-    background-color: $color-theme!important;
-  }
+
 }
--- a/src/utils/commonField.js
+++ b/src/utils/commonField.js
@@ -6,6 +6,11 @@ const commonField = {
  nameParent: '删除',
  resetPassword: '重置密码',
  resetName: '重置',
+  addClass: 'addBtn',
+  exportClass: 'exportBtn',
+  updateClass: 'updateBtn',
+  resetPasClass: 'resetBtnText',
+  delClass: 'delBtn',
  addName: '新增',
  queryName: '查询',
  exportName: '导出',

--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -39,13 +39,13 @@
        </el-select>
      </el-form-item>
      <el-form-item>
-        <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
-        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+        <el-button class="queryBtn" type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
+        <el-button class="resetBtn" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
      <div style="float: right">
        <el-form-item>
-          <coolbutton style="padding: 8px 7px;" :type="commonField.typePrimary" :name="commonField.addName" :size="commonField.smallSize" :icon="commonField.addIcon" :haspermi="hasAddPerm" @btn-click="handleAdd" />
-          <coolbutton style="padding: 8px 7px;" :type="commonField.typeSuccess" :name="commonField.exportName" :size="commonField.smallSize" :icon="commonField.exportIcon" :haspermi="hasExportPerm" @btn-click="handleExport" />
+          <coolbutton :class-name="commonField.addClass" style="padding: 8px 7px;" :type="commonField.typePrimary" :name="commonField.addName" :size="commonField.smallSize" :icon="commonField.addIcon" :haspermi="hasAddPerm" @btn-click="handleAdd" />
+          <coolbutton :class-name="commonField.exportClass" style="padding: 8px 7px;" :type="commonField.typeSuccess" :name="commonField.exportName" :size="commonField.smallSize" :icon="commonField.exportIcon" :haspermi="hasExportPerm" @btn-click="handleExport" />
        </el-form-item>
      </div>
    </el-form>
@@ -53,7 +53,7 @@
    <div style="padding:5px 10px">
      <div class="mb12 font-small-bold">角色管理列表</div>
      <el-table v-loading="loading" border :data="roleList" @selection-change="handleSelectionChange">
-        <el-table-column type="index" label="序号" width="50" />
+        <el-table-column type="index" label="序号" width="90" />
        <el-table-column label="名称" prop="roleName" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ scope.row.roleName || '-' }}
@@ -86,14 +86,16 @@
        </el-table-column>
        <el-table-column label="操作" class-name="small-padding fixed-width" width="200px">
          <template slot-scope="scope">
-            <coolbutton style="color: #49cec9" :type="commonField.typeParent" :name="commonField.updateName" :size="commonField.size" :haspermi="hasUpdatePerm" @btn-click="handleUpdate(scope.row)" />
+            <coolbutton :class-name="commonField.updateClass" :type="commonField.typeParent" :name="commonField.updateName" :size="commonField.size" :haspermi="hasUpdatePerm" @btn-click="handleUpdate(scope.row)" />
            <el-button
+              class="resetBtnText"
              v-hasPermi="['sys:role:update']"
              size="mini"
              type="text"
              @click="handleMenu(scope.row)"
            >数据权限</el-button>
            <el-button
+              class="delBtn"
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"

--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -29,18 +29,19 @@
          </el-select>
        </el-form-item>
        <el-form-item>
-          <el-button class="userQueryBtn" type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
-          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+          <el-button class="queryBtn" type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
+          <el-button class="resetBtn" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
-          <coolbutton :type="commonField.typePrimary" :name="commonField.addName" :size="commonField.smallSize" :icon="commonField.addIcon" :haspermi="hasAddPerm" @btn-click="handleAdd" />
+          <coolbutton :class-name="commonField.addClass" :type="commonField.typePrimary" :name="commonField.addName" :size="commonField.smallSize" :icon="commonField.addIcon" :haspermi="hasAddPerm" @btn-click="handleAdd" />
          <el-button
+            class="importBtn"
            type="warning"
            icon="el-icon-upload"
            size="small"
            @click="handleImport"
          >导入</el-button>
-          <coolbutton :type="commonField.typeSuccess" :name="commonField.exportName" :size="commonField.smallSize" :icon="commonField.exportIcon" :haspermi="hasAddPerm" @btn-click="handleExport" />
+          <coolbutton :class-name="commonField.exportClass" :type="commonField.typeSuccess" :name="commonField.exportName" :size="commonField.smallSize" :icon="commonField.exportIcon" :haspermi="hasAddPerm" @btn-click="handleExport" />
        </el-form-item>
      </el-form>
    </div>
@@ -70,20 +71,20 @@
            @node-click="handleNodeClick"
          >
            <div slot-scope="{ node }" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden" class="custom-tree-node">
-              <span style="font-size: 14px" :title="node.label">{{ node.label }}</span>
+              <span  :title="node.label">{{ node.label }}</span>
            </div>
          </el-tree>
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
-        <div class="mb12 font-small-bold" style="margin-top: 20px">用户管理列表</div>
+        <div class="tableTitle">用户管理列表</div>
        <el-table
          v-loading="loading"
          style="padding-right: 10px"
          :data="userList"
        >
-          <el-table-column type="index" label="序号" width="50" />
+          <el-table-column type="index" label="序号" width="90" />
          <el-table-column label="登录名" prop="username" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{ scope.row.username || '-' }}
@@ -117,13 +118,13 @@
          </el-table-column>
          <el-table-column
            label="操作"
-            width="180"
+            width="200"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
-              <coolbutton style="color: #49cec9" :type="commonField.typeParent" :name="commonField.updateName" :size="commonField.size" :haspermi="hasUpdatePerm" @btn-click="handleUpdate(scope.row)" />
-              <coolbutton :type="commonField.typeParent" :name="commonField.resetPassword" :size="commonField.size" :haspermi="hasResetPerm" @btn-click="handleResetPwd(scope.row)" />
-              <coolbutton v-if="scope.row.businessId !== 1" :type="commonField.typeParent" :name="commonField.nameParent" :size="commonField.size" :haspermi="hasDelPerm" @btn-click="handleDelete(scope.row)" />
+              <coolbutton :class-name="commonField.updateClass" :type="commonField.typeParent" :name="commonField.updateName" :size="commonField.size" :haspermi="hasUpdatePerm" @btn-click="handleUpdate(scope.row)" />
+              <coolbutton :class-name="commonField.resetPasClass" :type="commonField.typeParent" :name="commonField.resetPassword" :size="commonField.size" :haspermi="hasResetPerm" @btn-click="handleResetPwd(scope.row)" />
+              <coolbutton :class-name="commonField.delClass" v-if="scope.row.businessId !== 1" :type="commonField.typeParent" :name="commonField.nameParent" :size="commonField.size" :haspermi="hasDelPerm" @btn-click="handleDelete(scope.row)" />
            </template>
          </el-table-column>
        </el-table>