1.角色清单 新增系统变色

loulijun2021

2022-12-29 b417ffcc48caff0f1e177b8445d22683cc9b08af

1.角色清单 新增系统变色

 src/components/Breadcrumb/index.vue

@@ -2,8 +2,8 @@
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
        <a v-else class="metaFirst">{{ item.meta.title }}</a>
        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" :style="styleObject" class="no-redirect">{{ item.meta.title }}</span>
        <a v-else :style="styleObject" class="metaFirst">{{ item.meta.title }}</a>
        <!--        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>-->
      </el-breadcrumb-item>
    </transition-group>
@@ -17,6 +17,11 @@
  data() {
    return {
      levelList: null
    }
  },
  computed: {
    styleObject() {
      return { 'color': this.$store.state.settings.theme }
    }
  },
  watch: {
@@ -73,7 +78,7 @@
  margin-left: 8px;

  .no-redirect {
    color: #42b983;
    //color: #42b983;
    cursor: text;
    font-weight: bolder;
  }

 src/components/HeaderSearch/index.vue

@@ -1,6 +1,6 @@
<template>
  <div :class="{'show':show}" class="header-search">
    <svg-icon class-name="search-icon" icon-class="search" style="color:#A7A7A7;" @click.stop="click"/>
    <svg-icon class-name="search-icon" icon-class="search" style="color:#A7A7A7;" @click.stop="click" />
    <el-select
      ref="headerSearchSelect"
      v-model="search"
@@ -13,8 +13,13 @@
      @change="change"
    >

      <el-option v-show="item.item.title.length>1" v-for="item in options" :key="item.path" :value="item"
                 :label="item.item.title.join('>')"/>
      <el-option
        v-for="item in options"
        v-show="item.item.title.length>1"
        :key="item.path"
        :value="item"
        :label="item.item.title.join('>')"
      />
    </el-select>
  </div>
</template>
@@ -154,7 +159,8 @@
  }

  .svg-icon:hover {
    color: #42b983 !important;
    //color: #42b983 !important;
    color: rgb(170, 170, 170) !important;
  }

  .header-search-select {

 src/components/Pagination/index.vue

@@ -100,12 +100,12 @@
  display: none;
}

::v-deep .el-pagination__sizes .el-input .el-input__inner:hover{
 border-color: #42b983 ;
}
::v-deep .el-pagination__sizes .el-input .el-input__inner:focus{
  border-color: #42b983;
}
/*::v-deep .el-pagination__sizes .el-input .el-input__inner:hover{*/
/* border-color: #42b983 ;*/
/*}*/
/*::v-deep .el-pagination__sizes .el-input .el-input__inner:focus{*/
/*  border-color: #42b983;*/
/*}*/

</style>
<style lang="scss">
@@ -118,9 +118,10 @@
  //.el-select-dropdown {
  //  background-color: #ffffff;
  //}
  .el-select-dropdown__item.selected {
    color: #42b983;
  }

  //.el-select-dropdown__item.selected {
  //  color: #42b983;
  //}

  //.el-select-dropdown__item.hover,
  //.el-select-dropdown__item:hover {

 src/components/Screenfull/index.vue

@@ -30,7 +30,7 @@
      //   })
      //   return false
      // }
      this.isFullscreen= !this.isFullscreen;
      this.isFullscreen = !this.isFullscreen
      screenfull.toggle()

      // let element = document.documentElement;
@@ -57,10 +57,6 @@
      //   }
      // }
      // this.isFullscreen= !this.isFullscreen;




    },
    change() {
      this.isFullscreen = screenfull.isFullscreen
@@ -91,6 +87,7 @@
}

::v-deep .iconFull:hover{
  color: #42b983 !important;
  /*color: #42b983 !important;*/
  color:rgb(170, 170, 170) !important;
}
</style>

 src/components/ThemePicker/index.vue

@@ -38,7 +38,7 @@
      console.log(themeCluster, originalCluster)

      const $message = this.$message({
        message: '  Compiling the theme',
        message: '  正在切换主题',
        customClass: 'theme-message',
        type: 'success',
        duration: 0,
@@ -61,7 +61,11 @@
      }

      if (!this.chalk) {
        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
        // const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
        // https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css

        // http://121.196.36.24:8001/VueTheme/theme.css
        const url = 'http://121.196.36.24:8001/VueTheme/theme.css'
        await this.getCSSString(url, 'chalk')
      }


 src/layout/components/Navbar.vue

@@ -1,16 +1,16 @@
<template>
  <div class="navbar">
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar"/>
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <breadcrumb class="breadcrumb-container"/>
    <breadcrumb class="breadcrumb-container" />

    <div class="right-menu">

<!--      <template v-if="device!=='mobile'">-->
      <!--      <template v-if="device!=='mobile'">-->
      <template>
        <search id="header-search" class="right-menu-item"/>
        <search id="header-search" class="right-menu-item" />
        <!--        <error-log class="errLog-container right-menu-item hover-effect" />-->
        <screenfull id="screenfull" class="right-menu-item hover-effect"/>
        <screenfull id="screenfull" class="right-menu-item hover-effect" />
        <!--        <el-tooltip content="Global Size" effect="dark" placement="bottom">-->
        <!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
        <!--        </el-tooltip>-->
@@ -21,7 +21,7 @@
          <!--          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
          <div style="display: flex;align-items: center;margin-top: -5px">

            <i class="el-icon-user" style="font-weight: bolder;font-size: 18px;margin-right: 5px;color:#A7A7A7"/>
            <i class="el-icon-user" style="font-weight: bolder;font-size: 18px;margin-right: 5px;color:#A7A7A7" />
            <div style=" font-size: 18px;font-family: 'Microsoft YaHei';color:#AAAAAA">{{ username }}</div>
          </div>

@@ -64,10 +64,10 @@
        <!--          <div> {{ username }}</div>-->
        <!--        </el-form-item>-->
        <el-form-item label="原密码：" prop="password">
          <el-input v-model="form.password" style="width: 220px;"/>
          <el-input v-model="form.password" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="新密码：" prop="newpassword">
          <el-input v-model="form.newpassword" style="width: 220px;"/>
          <el-input v-model="form.newpassword" style="width: 220px;" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
@@ -81,11 +81,11 @@
</template>

<script>
import {mapGetters} from 'vuex'
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import {getCookie} from '@/utils/auth'
import {UpdateUserPassword} from '@/api/user'
import { getCookie } from '@/utils/auth'
import { UpdateUserPassword } from '@/api/user'
import Search from '@/components/HeaderSearch'
import Screenfull from '@/components/Screenfull'

@@ -141,10 +141,10 @@
      dialogVisible: false,
      formRules: {
        password: [
          {required: true, validator: validatePassword1, trigger: ['blur', 'change']}
          { required: true, validator: validatePassword1, trigger: ['blur', 'change'] }
        ],
        newpassword: [
          {required: true, validator: validatePassword2, trigger: ['blur', 'change']}
          { required: true, validator: validatePassword2, trigger: ['blur', 'change'] }
        ]
      }
    }
@@ -193,6 +193,8 @@
</script>

<style lang="scss" scoped>
$main_color: #42b983;

.navbar {
  height: 50px;
  overflow: hidden;
@@ -273,32 +275,32 @@
    }
  }

  .footerButton {
    display: flex;
    justify-content: end;
  }

  ::v-deep .el-button--primary {
    background-color: #42b983 !important;
    height: 30px;
    display: flex;
    align-items: center;
    //border: 1px solid $main_color;
    border: none;
    padding: 0 20px;
  }

  ::v-deep .el-button--default {
    background-color: #ffffff !important;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }

  ::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  //.footerButton {
  //  display: flex;
  //  justify-content: end;
  //}
  //
  //::v-deep .el-button--primary {
  //  background-color: $main_color !important;
  //  height: 30px;
  //  display: flex;
  //  align-items: center;
  //  //border: 1px solid $main_color;
  //  border: none;
  //  padding: 0 20px;
  //}
  //
  //::v-deep .el-button--default {
  //  background-color: #ffffff !important;
  //  height: 30px;
  //  display: flex;
  //  align-items: center;
  //  padding: 0 20px;
  //}
  //
  //::v-deep .el-input__inner {
  //  height: 30px;
  //  line-height: 30px;
  //}
}
</style>

 src/layout/components/Settings/index.vue

@@ -1,10 +1,10 @@
<template>
  <div class="drawer-container">
    <div>
      <h3 class="drawer-title">Page style setting</h3>
      <h3 class="drawer-title">项目配置</h3>

      <div class="drawer-item">
        <span>Theme Color</span>
        <span>主题颜色</span>
        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
      </div>


 src/layout/components/TagsView/index.vue

@@ -264,7 +264,7 @@
}
</script>

<style lang="scss" scoped>
<style lang="scss">
$main_color: #42b983;
.tags-view-container {
  height: 34px;

 src/layout/index.vue

@@ -68,11 +68,15 @@
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";

//@import "~@/styles/element-variables.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  //color: #{$--color-primary};
  //background: #{$--color-primary};

  &.mobile.openSidebar {
    position: fixed;

 src/styles/element-variables.scss

@@ -4,7 +4,8 @@
**/

/* theme color */
$--color-primary: #1890ff;
//$--color-primary: #1890ff;
$--color-primary: #42b983;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-danger: #ff4949;

 src/views/jcsz/adsz.vue

@@ -524,6 +524,7 @@
<!--本页面单独样式-->
<style lang="scss" scoped>
$main_color: #42b983;
//$main_color: var(theme);
.body {
  display: flex;
  flex-direction: row;

 src/views/jcsz/jsqd.vue

@@ -147,7 +147,8 @@
              <i
                v-if="row.is_user==='Y'"
                class="el-icon-user-solid"
                style="color:#42b983;cursor: pointer"
                style=" cursor: pointer"
                :style="{color:styleObject}"
                @click="userClick(row)"
              />
              <i
@@ -166,7 +167,12 @@
            width="120"
          >
            <template slot-scope="{row}">
              <i v-if="row.is_right==='Y'" class="el-icon-share" @click="rightClick(row)" />
              <i
                v-if="row.is_right==='Y'"
                :style="{color:styleObject}"
                class="el-icon-share"
                @click="rightClick(row)"
              />
              <i
                v-if="row.is_right==='N'"
                class="el-icon-share"
@@ -183,9 +189,20 @@
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <i class="el-icon-edit-outline" @click="edit('edit',row)" />
                  <i
                    class="el-icon-edit-outline"
                    :style="{color:styleObject}"
                    @click="edit('edit',row)"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                <el-tooltip
                  v-del-tab-index
                  class="item"
                  :style="{color:styleObject}"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <i class="el-icon-delete" @click="del(row)" />
                </el-tooltip>
              </div>
@@ -297,7 +314,12 @@
          sortable="custom"
        >
          <template slot-scope="{row}">
            <el-input v-if="row.isVisible===1" v-model="row.roletype_code" oninput="value=value.replace(/[^0-9a-zA-Z]/g,'')" placeholder="请输入" />
            <el-input
              v-if="row.isVisible===1"
              v-model="row.roletype_code"
              oninput="value=value.replace(/[^0-9a-zA-Z]/g,'')"
              placeholder="请输入"
            />
            <div v-else> {{ row.roletype_code }}</div>
          </template>
        </el-table-column>
@@ -353,11 +375,11 @@
      @close="handleCloseUser"
    >
      <div>
        <i class="el-icon-s-comment" style="color:#42b983;" /> 角色名称：{{ userForm.roleName }}
        <i class="el-icon-s-comment" :style="{color:styleObject}" /> 角色名称：{{ userForm.roleName }}
      </div>
      <el-divider />
      <div style="margin-bottom: 10px">
        <i class="el-icon-s-operation" style="color:#42b983;" /> 用户列表
        <i class="el-icon-s-operation" :style="{color:styleObject}" /> 用户列表
      </div>
      <div style="display: flex;min-height: 50px;margin-bottom: 10px">
        <el-form ref="dialogFormUser" inline :model="dialogFormUser" label-width="80px">
@@ -469,11 +491,13 @@
        >
          <template slot-scope="{row}">
            <div v-if="row.flag==='Y'">
              <svg-icon icon-class="circleYes" style="margin-right: 2px" />
              <i class="el-icon-success" :style="{color:styleObject}" style="margin-right: 2px" />
              <!--              <svg-icon icon-class="circleYes" :style="{color:styleObject}" style="margin-right: 2px" />-->
              是
            </div>
            <div v-if="row.flag==='N'">
              <svg-icon icon-class="circleNo" style="margin-right: 2px" />
              <i class="el-icon-info" style="margin-right: 2px" />
              <!--              <svg-icon icon-class="circleNo" style="margin-right: 2px" />-->
              否
            </div>
          </template>
@@ -517,21 +541,22 @@
      @close="handleCloseRight"
    >
      <div>
        <i class="el-icon-s-comment" style="color:#42b983;" /> 角色名称：{{ rightFrom.username }}
        <i class="el-icon-s-comment" :style="{color:styleObject}" /> 角色名称：{{ rightFrom.username }}
      </div>
      <el-divider />
      <div style="margin-bottom: 10px">
        <i class="el-icon-s-operation" style="color:#42b983;" /> 权限操作端
        <i class="el-icon-s-operation" :style="{color:styleObject}" /> 权限操作端
      </div>

      <div class="myCheckboxGroup">
        <div
          v-for="item in dialogFormRight.rightOperationArr"
          :key="item.code"
          :style="{border:item.isSelected1?'1px solid #42b983':'1px solid #eee'}"
          :style="{border:item.isSelected1?'1px solid '+ styleObject :'1px solid #eee'}"
          class="myCheckbox"
          @click="myCheckboxClick(item)"
        >

          <input
            class="myCheckboxInput"
            type="checkbox"
@@ -541,13 +566,25 @@
            :style="{color:item.isSelected2?'#42b983':'#fff'}"
            @click="myCheckboxInputClick(item)"
          >{{ item.name }}

          <!--          :style="{color:item.isSelected2?'#42b983':'#fff'}"-->
          <!--            父子点击事件不影响-->
          <!--            onClick="event.cancelBubble = true"-->
          <!--明天再看一下input和el-checkbox之间的区别-->
          <el-checkbox
            v-model="item.isSelected2"
            class="myCheckboxInput"
            :value="item.code"
            :name="item.name"
            :disabled="rightFrom.usercode==='S001'"
          >{{ item.name }}
          </el-checkbox>

        </div>
      </div>
      <el-divider />
      <div style="margin-bottom: 10px">
        <i class="el-icon-s-operation" style="color:#42b983;" /> 功能权限
        <i class="el-icon-s-operation" :style="{color:styleObject}" /> 功能权限
      </div>
      <div style="height: 393px;overflow-y: scroll">
        <el-tree
@@ -723,6 +760,11 @@
      title_value: '数据导入 / 角色清单',
      code: '1',
      shows: false
    }
  },
  computed: {
    styleObject() {
      return this.$store.state.settings.theme
    }
  },
  watch: {
@@ -992,7 +1034,7 @@
    },

    /* 关联用户模块*/
    async  userClick(row) {
    async userClick(row) {
      if (row.role_code === 'S001') {
        return this.$message.info('此角色无法操作！')
      }
@@ -1213,13 +1255,13 @@
                pcIsSelected2 = true

                const interval = setInterval(() => {
                  if ($("input[name='PC']").length > 0) {
                  if ($('input[name=\'PC\']').length > 0) {
                    waitFlag = true
                  }
                  if (waitFlag) {
                    clearInterval(interval)
                    this.$nextTick(() => {
                      $("input[name='PC']").eq(0).prop('checked', true)// 自定义单选框回显
                      $('input[name=\'PC\']').eq(0).prop('checked', true)// 自定义单选框回显
                    })
                  }
                }, 100)
@@ -1232,13 +1274,13 @@
                appIsSelected2 = true

                const interval = setInterval(() => {
                  if ($("input[name='APP']").length > 0) {
                  if ($('input[name=\'APP\']').length > 0) {
                    waitFlag = true
                  }
                  if (waitFlag) {
                    clearInterval(interval)
                    this.$nextTick(() => {
                      $("input[name='APP']").eq(0).prop('checked', true)// 自定义单选框回显
                      $('input[name=\'APP\']').eq(0).prop('checked', true)// 自定义单选框回显
                    })
                  }
                }, 100)
@@ -1253,14 +1295,14 @@
                appIsSelected2 = true

                const interval = setInterval(() => {
                  if ($("input[name='PC']").length > 0) {
                  if ($('input[name=\'PC\']').length > 0) {
                    waitFlag = true
                  }
                  if (waitFlag) {
                    clearInterval(interval)
                    this.$nextTick(() => {
                      $("input[name='PC']").eq(0).prop('checked', true)// 自定义单选框回显
                      $("input[name='APP']").eq(0).prop('checked', true)// 自定义单选框回显
                      $('input[name=\'PC\']').eq(0).prop('checked', true)// 自定义单选框回显
                      $('input[name=\'APP\']').eq(0).prop('checked', true)// 自定义单选框回显
                    })
                  }
                }, 100)
@@ -1277,13 +1319,13 @@
                pcIsSelected2 = true

                const interval = setInterval(() => {
                  if ($("input[name='PC']").length > 0) {
                  if ($('input[name=\'PC\']').length > 0) {
                    waitFlag = true
                  }
                  if (waitFlag) {
                    clearInterval(interval)
                    this.$nextTick(() => {
                      $("input[name='PC']").eq(0).prop('checked', true)// 自定义单选框回显
                      $('input[name=\'PC\']').eq(0).prop('checked', true)// 自定义单选框回显
                    })
                  }
                }, 100)
@@ -1299,13 +1341,13 @@
                appIsSelected2 = true

                const interval = setInterval(() => {
                  if ($("input[name='APP']").length > 0) {
                  if ($('input[name=\'APP\']').length > 0) {
                    waitFlag = true
                  }
                  if (waitFlag) {
                    clearInterval(interval)
                    this.$nextTick(() => {
                      $("input[name='APP']").eq(0).prop('checked', true)// 自定义单选框回显
                      $('input[name=\'APP\']').eq(0).prop('checked', true)// 自定义单选框回显
                    })
                  }
                }, 100)
@@ -1509,7 +1551,7 @@
    },
    // 小盒子点击事件
    myCheckboxInputClick(val) {
      // console.log(val)
      console.log(val, 777777)
      val.isSelected2 = !val.isSelected2
      this.dialogFormRight.rightCurrentCode = val.code

@@ -1561,10 +1603,10 @@

            this.$nextTick(() => {
              if (item.name === 'PC') {
                $("input[name='PC']").eq(0).prop('checked', false)// 自定义单选框回显
                $('input[name=\'PC\']').eq(0).prop('checked', false)// 自定义单选框回显
              }
              if (item.name === 'APP') {
                $("input[name='APP']").eq(0).prop('checked', false)// 自定义单选框回显
                $('input[name=\'APP\']').eq(0).prop('checked', false)// 自定义单选框回显
              }
              // $("input[name='APP']").eq(0).prop('checked', false)// 自定义单选框回显
              // $('input:checkbox').eq(index).prop('checked', false)// 自定义单选框回显
@@ -1587,10 +1629,10 @@
            item.isSelected2 = true
            this.$nextTick(() => {
              if (item.name === 'PC') {
                $("input[name='PC']").eq(0).prop('checked', true)// 自定义单选框回显
                $('input[name=\'PC\']').eq(0).prop('checked', true)// 自定义单选框回显
              }
              if (item.name === 'APP') {
                $("input[name='APP']").eq(0).prop('checked', true)// 自定义单选框回显
                $('input[name=\'APP\']').eq(0).prop('checked', true)// 自定义单选框回显
              }
              // $('input:checkbox').eq(index).prop('checked', true)// 自定义单选框回显
            })
@@ -1613,10 +1655,10 @@
            item.isSelected2 = true
            this.$nextTick(() => {
              if (item.name === 'PC') {
                $("input[name='PC']").eq(0).prop('checked', true)// 自定义单选框回显
                $('input[name=\'PC\']').eq(0).prop('checked', true)// 自定义单选框回显
              }
              if (item.name === 'APP') {
                $("input[name='APP']").eq(0).prop('checked', true)// 自定义单选框回显
                $('input[name=\'APP\']').eq(0).prop('checked', true)// 自定义单选框回显
              }
              // $('input:checkbox').eq(index).prop('checked', true)// 自定义单选框回显
            })
@@ -1666,7 +1708,7 @@
      //border: 1px solid $main_color;
      border: 1px solid #eee;
      display: flex;
      min-width: 100px;
      min-width: 110px;
      padding: 10px;
      margin: 10px 30px 0 0;
      border-radius: 5px;
@@ -1678,10 +1720,6 @@
      }

    }

    //.myCheckbox{
    //  border: 1px solid $main_color;
    //}

    input[type=checkbox] {
      cursor: pointer;
@@ -1722,10 +1760,11 @@
<!--公共页面样式-->
<style lang="scss" scoped>
$main_color: #42b983;
::v-deep .el-button--text{
  font-size: 14px ;
  cursor: pointer ;
::v-deep .el-button--text {
  font-size: 14px;
  cursor: pointer;
}

.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
  color: $main_color;
  cursor: pointer;
@@ -1814,23 +1853,25 @@
  margin-bottom: 0;
}

.tableFixed{
  ::v-deep .el-table__fixed-right{
.tableFixed {
  ::v-deep .el-table__fixed-right {
    height: 100% !important;
  }
  ::v-deep .el-table__fixed{

  ::v-deep .el-table__fixed {
    height: 100% !important;
  }
}
</style>
<style>
.osloading{
.osloading {
  font-size: 26px !important;
}

.el-loading-text{
.el-loading-text {
  font-size: 26px !important;
}

.el-table .custom-row {
  background: #f8f8fa;
}

 src/views/jcsz/zzjg.vue

@@ -142,6 +142,9 @@
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i class="el-icon-delete" @click="del(row.id)" />
                </el-tooltip>
                <!--                <el-button type="primary" size="mini" />-->
                <!--                <el-button type="danger" size="mini">删除</el-button>-->

              </div>
            </template>
          </el-table-column>