1.项目全局配置（部分）

loulijun2021

2022-06-13 71fc2c24359c747c84b92fa45f542141e5678eb2

1.项目全局配置（部分）

 src/layout/components/Sidebar/index.vue

@@ -69,6 +69,7 @@
}
</script>
<style lang="scss">
$main_color :#42b983;
.el-button--text, .el-button--text.is-disabled, .el-button--text.is-disabled:focus, .el-button--text.is-disabled:hover, .el-button--text:active{
  color: white ;
  font-size: 18px ;
@@ -78,11 +79,11 @@
}

#app .sidebar-container .el-submenu .el-menu-item.is-active{
  background: #42b983 !important;
  background: $main_color !important;
  color: #fff !important;
}
#app .sidebar-container .el-submenu .el-menu-item:hover{
  background: #42b983 !important;
  background: $main_color !important;
  //color: #fff !important;
}

@@ -91,20 +92,20 @@
}

.sub-el-icon::before{
  color: #42b983;
  color: $main_color;
}
.svg-icon{
  color: #42b983;
  color: $main_color;
}
.submenu-title-noDropdown{
  font-weight: bolder;
}
.router-link-exact-active>.submenu-title-noDropdown{
  color: #42b983 !important;
  color: $main_color !important;
}

.el-menu-item.is-active{
  color: #42b983 !important;
  color: $main_color !important;
}

.el-button--text:hover{

 src/layout/components/TagsView/index.vue

@@ -198,6 +198,7 @@
</script>

<style lang="scss" scoped>
$main_color :#42b983;
.tags-view-container {
  height: 34px;
  width: 100%;
@@ -225,9 +226,9 @@
        margin-right: 15px;
      }
      &.active {
        background-color: #42b983;
        background-color:$main_color;
        color: #fff;
        border-color: #42b983;
        border-color:$main_color;
        &::before {
          content: '';
          background: #fff;

 src/main.js

@@ -37,6 +37,11 @@

// å¯¼å…¥å…¨å±€æ ·å¼è¡¨
import './styles/global.css'
import { getGlobalColor, headerCellStyle, cellStyle } from './utils/global.js'

Vue.prototype.$getGlobalColor = getGlobalColor().globalColor // è®¾ç½®å…¨å±€é¢œè‰²
Vue.prototype.$headerCellStyle = headerCellStyle() // è®¾ç½®å…¨å±€è¡¨å¤´æ ·å¼
Vue.prototype.$cellStyle = cellStyle() // è®¾ç½®å…¨å±€è¡¨ä½“样式

new Vue({
  el: '#app',

 src/store/modules/permission.js

@@ -123,29 +123,6 @@
            meta: { title: '系统首页', icon: 'el-icon-house', affix: '1' }
          }]
        },
        // {
        //   path: '/',
        //   component: 'Layout',
        //   redirect: '/dashboard',
        //   children: [{
        //     path: 'dashboard',
        //     name: 'Dashboard',
        //     component: '/dashboard/index'
        //   }]
        // },
        // {
        //   path: '/xtsy',
        //   component: 'Layout',
        //   redirect: '/stxy/index',
        //   children: [
        //     {
        //       path: 'index',
        //       name: 'Form',
        //       component: '/xtsy/index',
        //       meta: { title: '系统首页', icon: 'form', affix: '1' }
        //     }
        //   ]
        // },
        {
          path: '/jcsz',
          component: 'Layout',
@@ -160,11 +137,23 @@
              meta: { title: '组织架构', icon: '' }
            },
            {
              path: 'rwgl',
              name: 'rwgl',
              component: '/jcsz/rwgl',
              meta: { title: '任务管理', icon: '' }
            }
              path: 'yhqd',
              name: 'yhqd',
              component: '/jcsz/yhqd',
              meta: { title: '用户清单', icon: '' }
            },
            {
              path: 'jsqd',
              name: 'jsqd',
              component: '/jcsz/jsqd',
              meta: { title: '角色清单', icon: '' }
            },
            {
              path: 'wldw',
              name: 'wldw',
              component: '/jcsz/wldw',
              meta: { title: '往来单位', icon: '' }
            },
          ]
        },
        {
@@ -194,7 +183,6 @@
            }
          ]
        }

      ]
      const asyncRoutes = getAsyncRoutes(routes)
      asyncRoutes.push({ path: '*', redirect: '/404', hidden: true })

 src/utils/glabal.js

 src/utils/global.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@
// å…¨å±€ä¸»è¦é¢œè‰²
export function getGlobalColor() {
  return { globalColor: `#42b983` }
}

// å¤„理表头单元格样式
export function headerCellStyle() {
  const option = {
    background: '#eee', padding: '5px 0'
  }
  return option
}
// å¤„理表格单元格样式
export function cellStyle() {
  const option = {
    padding: '5px 0'
  }
  return option
}

 src/views/dashboard/index.vue

ÎļþÒÑɾ³ý

 src/views/jcsz/jsqd.vue

copy from src/views/jcsz/rwgl.vue
copy to src/views/jcsz/jsqd.vue
Îļþ´Ó src/views/jcsz/rwgl.vue ¸´ÖÆ
@@ -1,8 +1,10 @@
<template />
<template>

</template>

<script>
export default {
  name: 'Rwgl'
  name: "jsqd"
}
</script>


 src/views/jcsz/wldw.vue

ÎļþÃû´Ó src/views/jcsz/rwgl.vue ÐÞ¸Ä
@@ -1,8 +1,10 @@
<template />
<template>

</template>

<script>
export default {
  name: 'Rwgl'
  name: "wldw"
}
</script>


 src/views/jcsz/yhqd.vue

copy from src/views/jcsz/rwgl.vue
copy to src/views/jcsz/yhqd.vue
Îļþ´Ó src/views/jcsz/rwgl.vue ¸´ÖÆ
@@ -1,8 +1,10 @@
<template />
<template>

</template>

<script>
export default {
  name: 'Rwgl'
  name: "yhqd"
}
</script>


 src/views/jcsz/zzjg.vue

@@ -22,7 +22,7 @@

          <el-tree
            ref="tree"
            style="margin-left: 10px;"
            style="margin-left: 10px;overflow-y: scroll;height: 230px"
            :icon-class="iconClass"
            :data="treeData"
            default-expand-all
@@ -59,8 +59,8 @@
          :data="tableData"
          border
          style="width: 72%"
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
        >
          <!--          <el-table-column-->
          <!--            label="组织分类"-->
@@ -186,6 +186,9 @@
          }, {
            id: 8,
            label: '二级 3-2'
          }, {
            id: 19,
            label: '二级 3-2'
          }]
        }],
      defaultProps: {
@@ -240,16 +243,17 @@
}
</script>

<style scoped>
<style lang="scss" scoped>
$main_color: #42b983;
::v-deep .el-button--primary {
  background-color: #42b983 !important;
  background-color: $main_color !important;
  height: 30px;
  display: flex;
  align-items: center;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #42b983 !important;
  background-color: $main_color !important;
}

.zzflStyle{
@@ -258,7 +262,8 @@
  background-color: #eee;
  font-weight:400;
  padding-left: 10px;
  color:rgb(144, 147, 153); font-size: 14px
  color: rgb(144, 147, 153);
  font-size: 14px
}

/*::v-deep*/

 src/views/login/index.vue

@@ -7,7 +7,7 @@
        :autoplay="false"
        indicator-position="outside"
        height="580px"
        interval="3000"
        :interval="3000"
        style="width: 500px;margin-left: 20px"
      >
        <el-carousel-item v-for="item in carouselArr" :key="item.title">
@@ -240,6 +240,7 @@
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
$main_color:#42b983;

.login-container {
  min-height: 100%;
@@ -361,11 +362,11 @@
  }

  ::v-deep .el-input__inner:focus{
    border:  1px solid #42b983;
    border: 1px solid $main_color;
  }

  ::v-deep .el-input__icon:focus{
    color: #42b983;
    color: $main_color;
  }

  ::v-deep .el-input input:-webkit-autofill{

 src/views/zzmx/gylx.vue

@@ -22,7 +22,8 @@
          </div>
          <div style="display: flex;">
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button type="text" style="display: flex;align-items: start;padding-top: 10px;" @click="reset">重置</el-button>
            <el-button type="text" style="display: flex;align-items: start;padding-top: 10px;" @click="reset">重置
            </el-button>
          </div>
        </el-form>
        <div style="display: flex;justify-content: space-between">
@@ -46,9 +47,8 @@
          <el-table
            :data="tableData1"
            style="width: 100%;border: 1px solid #eee"
            :header-cell-style="headerCellStyle"
            :header-row-style="headerRowStyle"
            :cell-style="cellStyle"
            :header-cell-style="this.$headerCellStyle"
            :cell-style="this.$cellStyle"
          >
            <el-table-column type="selection">
              <!--              <template slot-scope="{row}">-->
@@ -59,8 +59,8 @@
              <!--              </template>-->
            </el-table-column>
            <el-table-column label="工艺路线" prop="gylx" />
            <el-table-column label="物料编码" prop="wlbm" />
            <el-table-column label="物料名称" prop="wlmc" />
            <el-table-column show-overflow-tooltip label="物料编码" prop="wlbm" />
            <el-table-column show-overflow-tooltip label="物料名称" prop="wlmc" />
            <el-table-column label="物料规格" prop="wlgg" />
            <el-table-column label="结束装箱" prop="jszx">
              <template slot-scope="{row}">
@@ -87,8 +87,8 @@
            border
            height="500px"
            style="width: 100%;"
            :header-cell-style="headerCellStyle"
            :cell-style="cellStyle"
            :header-cell-style="this.$headerCellStyle"
            :cell-style="this.$cellStyle"
          >
            <el-table-column label="" prop="" type="index" />
            <el-table-column label="工序编码" prop="gxbm" />
@@ -203,6 +203,7 @@
<script>

import Pagination from '@/components/Pagination'
import { cellStyle } from '@/utils/global'

export default {
  name: 'Gylx',
@@ -340,6 +341,7 @@
    }
  },
  created() {

  },
  methods: {
    // å¯¼å…¥
@@ -433,22 +435,22 @@
      this.form.wlbm = ''
      this.form.wlmc = ''
    },
    // å¤„理表头单元格样式
    headerCellStyle() {
      const option = {
        background: '#eee', padding: '5px 0'
        // border: '1px solid #fff'
      }
      return option
    },
    // å¤„理表头行样式
    headerRowStyle() {

    },
    // å¤„理表格单元格样式
    cellStyle() {
      return { padding: '5px 0' }
    },
    // // å¤„理表头单元格样式
    // headerCellStyle() {
    //   const option = {
    //     background: '#eee', padding: '5px 0'
    //   }
    //   return option
    // },
    // // å¤„理表头行样式
    // headerRowStyle() {
    //
    // },
    // // å¤„理表格单元格样式
    // cellStyle() {
    //   // return {padding: '5px 0'}
    //   return { padding: '0' }
    // },
    // æŸ¥è¯¢äº‹ä»¶
    async search() {
      const data = this.form
@@ -459,30 +461,31 @@
}
</script>

<style scoped>
<style lang="scss" scoped>
$main_color: #42b983;
::v-deep .el-button--primary {
  background-color: #42b983 !important;
  background-color: $main_color !important;
  height: 30px;
  display: flex;
  align-items: center;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #42b983 !important;
  background-color: $main_color !important;
}

::v-deep .el-button--text {
  color: #42b983;
  color: $main_color;
  font-size: 14px;
}

::v-deep .el-step__head.is-finish {
  color: #42b983;
  border-color: #42b983;;
  color: $main_color;
  border-color: $main_color;;
}

::v-deep .el-step__title.is-finish {
  color: #42b983;
  color: $main_color;
}

::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
@@ -495,26 +498,28 @@
}

::v-deep .el-radio__input.is-checked+.el-radio__label{
  color: #42b983;
  color: $main_color;
}

::v-deep .el-radio.is-bordered.is-checked{
  border-color: #42b983;
  border-color: $main_color;
}

::v-deep .el-radio__input.is-checked .el-radio__inner{
  border-color: #42b983;
  background: #42b983;
  border-color: $main_color;
  background: $main_color;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
  border-color: #42b983;
  background-color: #42b983;
  border-color: $main_color;
  background-color: $main_color;
}

::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  border-color: #42b983;
  background-color: #42b983;
  border-color: $main_color;
  background-color: $main_color;
}

/*::v-deep .el-divider--horizontal{*/
/*  margin:0 0 10px 0;*/
/*}*/