修改样式

.env.development

@@ -8,7 +8,7 @@ ENV = 'development'
 #测试地址
 #VUE_APP_BASE_API = 'http://10.87.10.91:8080'
 #罗俊
-VUE_APP_BASE_API = 'http://10.87.10.49:8080'
+VUE_APP_BASE_API = 'http://10.87.10.55:8080'
 #罗伟
 #VUE_APP_BASE_API = 'http://10.87.10.47:8080'
 #高雄

public/index.html

@@ -118,7 +118,7 @@
       top: 0;
       width: 51%;
       height: 100%;
-      background: #4F9BAA;
+      background: #008CD6;
       z-index: 1000;
       -webkit-transform: translateX(0);
       -ms-transform: translateX(0);

src/assets/styles/element-variables.scss

@@ -4,7 +4,8 @@
 **/
 
 /* theme color */
-$--color-primary: #4F9BAA;
+// $--color-primary: #008CD6;
+$--color-primary: #008CD6;
 $--color-success: #13ce66;
 $--color-warning: #ffba00;
 $--color-danger: #ff4949;

src/components/Breadcrumb/index.vue

@@ -63,11 +63,11 @@ export default {
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;
-  line-height: 50px;
-  margin-left: 8px;
+  line-height: 33px;
+  margin-left: 17px;
 
   .no-redirect {
-    color: #fff;
+    // color: #008CD6;
     cursor: text;
   }
 }

src/components/FileUpload/index.vue

@@ -44,6 +44,7 @@ import {upload} from "@/api/system/public";
 export default {
   name: "FileUpload",
   props: {
+    
     // 值
     value: [String, Object, Array],
     // 数量限制

src/components/ImageUpload/index.vue

@@ -17,17 +17,53 @@
       :file-list="fileList"
       :on-preview="handlePictureCardPreview"
       :http-request="uploadImage"
-      :class="{hide: fileList.length >= limit}">
+      :class="{ hide: fileList.length >= limit }"
+    >
       <i class="el-icon-plus"></i>
       <!-- 上传提示 -->
       <div class="el-upload__tip" slot="tip" v-if="showTip">
         请上传
-        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+        <template v-if="fileSize">
+          大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+        </template>
+        <template v-if="fileType">
+          格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+        </template>
+        的文件
+      </div>
+    </el-upload>
+    <el-upload
+      v-if="type === 'radioIcon'"
+      action="#"
+      list-type="picture-card"
+      :on-success="handleUploadSuccess"
+      :before-upload="handleBeforeUpload"
+      :limit="1"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      ref="imageUpload"
+      :on-remove="handleDelete"
+      :show-file-list="true"
+      :headers="headers"
+      :file-list="fileList"
+      :on-preview="handlePictureCardPreview"
+      :http-request="uploadImage"
+      :class="{ hide: fileList.length >0  }"
+    >
+      <i class="el-icon-plus"></i>
+      
+      <!-- 上传提示 -->
+      <div  class="el-upload__tip" slot="tip" >
+        请上传
+        <template v-if="fileSize">
+          大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+        </template>
+        <template v-if="fileType">
+          格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+        </template>
         的文件
       </div>
     </el-upload>
-
     <el-upload
       v-if="type === 'alone'"
       drag
@@ -38,9 +74,10 @@
       ref="imageUpload"
       :show-file-list="false"
       :file-list="fileList"
-      :http-request="uploadImage">
+      :http-request="uploadImage"
+    >
       <div v-if="fileList.length > 0" class="img-box">
-        <img style="width:100%;height: 100%;" :src="fileList[0].url" alt="" >
+        <img style="width: 100%; height: 100%" :src="fileList[0].url" alt="" />
         <div class="img-model" @click.stop="clickImg">
           <span>预览</span>
         </div>
@@ -50,11 +87,15 @@
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip" slot="tip" v-if="showTip">
           请上传
-          <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-          <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+          <template v-if="fileSize">
+            大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+          </template>
+          <template v-if="fileType">
+            格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+          </template>
           的文件
         </div>
-<!--        <div class="el-upload__tip" slot="tip">只能上传jpg/png/jpeg文件，且不超过500kb</div>-->
+        <!--        <div class="el-upload__tip" slot="tip">只能上传jpg/png/jpeg文件，且不超过500kb</div>-->
       </div>
     </el-upload>
 
@@ -62,23 +103,27 @@
       :visible.sync="dialogVisible"
       title="预览"
       width="800"
-      append-to-body>
-      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto"/>
+      append-to-body
+    >
+      <img
+        :src="dialogImageUrl"
+        style="display: block; max-width: 100%; margin: 0 auto"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
 import { getToken } from "@/utils/auth";
-import { upload } from "@/api/system/public"
+import { upload } from "@/api/system/public";
 
 export default {
   props: {
     value: [String, Object, Array],
     //两种模式：more（多选）、alone（单选）
-    type:{
-      type:String,
-      default: 'more',
+    type: {
+      type: String,
+      default: "more",
     },
     // 图片数量限制（单选模式下失效）
     limit: {
@@ -98,8 +143,8 @@ export default {
     // 是否显示提示
     isShowTip: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   data() {
     return {
@@ -108,12 +153,15 @@ export default {
       dialogImageUrl: "",
       dialogVisible: false,
       hideUpload: false,
-      uploadImgUrl: process.env.NODE_ENV === 'development'? '/dev-api'+ "/file/file/upload" : process.env.VUE_APP_BASE_API + "/file/file/upload", // 上传的图片服务器地址
+      uploadImgUrl:
+        process.env.NODE_ENV === "development"
+          ? "/dev-api" + "/file/file/upload"
+          : process.env.VUE_APP_BASE_API + "/file/file/upload", // 上传的图片服务器地址
       headers: {
         Authorization: "Bearer " + getToken(),
       },
       fileList: [],
-      file:null
+      file: null,
     };
   },
   watch: {
@@ -121,9 +169,9 @@ export default {
       handler(val) {
         if (val) {
           // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
+          const list = Array.isArray(val) ? val : this.value.split(",");
           // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
+          this.fileList = list.map((item) => {
             if (typeof item === "string") {
               item = { name: item, url: item };
             }
@@ -135,8 +183,8 @@ export default {
         }
       },
       deep: true,
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   computed: {
     // 是否显示提示
@@ -146,30 +194,38 @@ export default {
   },
   methods: {
     //单传模式下的预览
-    clickImg(){
+    clickImg() {
       this.dialogImageUrl = this.fileList[0].url;
       this.dialogVisible = true;
     },
     //自定义上传方式(自带的成功回调及失败回调会失效)
-    uploadImage(fileObj){
-      console.log(window.origin,'URL')
+    uploadImage(fileObj) {
+      console.log(window.origin, "URL");
       let formData = new FormData();
-      formData.append('file',fileObj.file);
-      upload(formData,'image').then(res=>{
-        /*上传成功*/
-        this.$modal.closeLoading();
-        let imgUrl = process.env.NODE_ENV === 'development'? process.env.VUE_APP_BASE_API + res.data.url :window.origin + res.data.url;
-        let arr = [];
-        arr.push({ name: res.data.name, url: imgUrl})
-        this.fileList = arr;
-        this.$emit("input", this.listToString(this.fileList));
-      }).catch(err=>{
-        /*上传失败*/
-        this.$modal.closeLoading();
-        //this.$modal.msgError(res.msg);
-        this.$refs.imageUpload.handleRemove(fileObj.file);
-        //this.uploadedSuccessfully();
-      })
+      formData.append("file", fileObj.file);
+      upload(formData, "image")
+        .then((res) => {
+          /*上传成功*/
+          this.$modal.closeLoading();
+          let imgUrl =
+            process.env.NODE_ENV === "development"
+              ? process.env.VUE_APP_BASE_API + res.data.url
+              : window.origin + res.data.url;
+          let arr = [];
+          arr.push({ name: res.data.name, url: imgUrl });
+          this.fileList = arr;
+          //emit完整图片URL路径
+          this.$emit("input", this.listToString(this.fileList));
+          // //非完整图片URL路径
+          // this.$emit("imgUrl", res.data.url);
+        })
+        .catch((err) => {
+          /*上传失败*/
+          this.$modal.closeLoading();
+          //this.$modal.msgError(res.msg);
+          this.$refs.imageUpload.handleRemove(fileObj.file);
+          //this.uploadedSuccessfully();
+        });
     },
     // 上传前loading加载
     handleBeforeUpload(file) {
@@ -179,7 +235,7 @@ export default {
         if (file.name.lastIndexOf(".") > -1) {
           fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
         }
-        isImg = this.fileType.some(type => {
+        isImg = this.fileType.some((type) => {
           if (file.type.indexOf(type) > -1) return true;
           if (fileExtension && fileExtension.indexOf(type) > -1) return true;
           return false;
@@ -189,7 +245,9 @@ export default {
       }
 
       if (!isImg) {
-        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
+        this.$modal.msgError(
+          `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
+        );
         return false;
       }
       if (this.fileSize) {
@@ -209,16 +267,16 @@ export default {
     },
     // 上传成功回调
     handleUploadSuccess(res, file) {
-      console.log(res,'res')
+      console.log(res, "res");
       if (res.code === 200) {
         let imgUrl = process.env.VUE_APP_BASE_API + res.data.url;
-        this.uploadList.push({ name: res.data.name, url: imgUrl});
+        this.uploadList.push({ name: res.data.name, url: imgUrl });
         this.uploadedSuccessfully();
 
-          // let str = res.data.code;
-          // let blob = new Blob([str],{type:'image/jpeg'});
-          // let imgUrl = window.URL.createObjectURL(blob);
-          // debugger
+        // let str = res.data.code;
+        // let blob = new Blob([str],{type:'image/jpeg'});
+        // let imgUrl = window.URL.createObjectURL(blob);
+        // debugger
       } else {
         this.number--;
         this.$modal.closeLoading();
@@ -229,12 +287,12 @@ export default {
     },
     // 删除图片
     handleDelete(file) {
-      const findex = this.fileList.map(f => f.name).indexOf(file.name);
+      const findex = this.fileList.map((f) => f.name).indexOf(file.name);
       if (findex > -1) {
         this.fileList.splice(findex, 1);
         this.$emit("input", this.listToString(this.fileList));
       }
-      console.log( this.listToString(this.fileList),'删除图片')
+      console.log(this.listToString(this.fileList), "删除图片");
     },
     // 上传失败
     handleUploadError() {
@@ -265,51 +323,50 @@ export default {
           strs += list[i].url.replace(this.baseUrl, "") + separator;
         }
       }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
-    }
-  }
+      return strs != "" ? strs.substr(0, strs.length - 1) : "";
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
 // .el-upload--picture-card 控制加号部分
 ::v-deep .hide .el-upload--picture-card {
-    display: none !important;
+  display: none !important;
 }
 // 去掉动画效果
 ::v-deep .el-list-enter-active,
 ::v-deep .el-list-leave-active {
-    transition: all 0s;
+  transition: all 0s;
 }
 
-::v-deep .el-list-enter, .el-list-leave-active {
-    opacity: 0;
-    transform: translateY(0);
+::v-deep .el-list-enter,
+.el-list-leave-active {
+  opacity: 0;
+  transform: translateY(0);
 }
-.img-box{
+.img-box {
   width: 100%;
   height: 100%;
   position: relative;
-  .img-model{
+  .img-model {
     width: 100%;
     display: none;
     position: absolute;
     left: 0;
     top: 0;
     align-items: center;
-    >span{
-      background-color: rgba(30, 30, 30, .3);
+    > span {
+      background-color: rgba(30, 30, 30, 0.3);
       display: block;
       padding: 5px;
-      color:#fff;
+      color: #fff;
       text-shadow: 0 0 2px #1e1e1e;
     }
   }
-  &:hover{
-    .img-model{
+  &:hover {
+    .img-model {
       display: block;
     }
   }
 }
-
 </style>
-

src/layout/components/AppMain.vue

@@ -46,7 +46,7 @@ export default {
   }
 
   .fixed-header + .app-main {
-    padding-top: 84px;
+    padding-top: 132px;
   }
 }
 </style>

src/layout/components/Navbar.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
+    <!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
     <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
     <div class="title-box"> 移动安全保卫管理平台项目 </div>
+    <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/> -->
+
     <span class="right-menu">
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
@@ -128,7 +129,7 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background-color: #4F9BAA !important;  /* 修改导航栏背景色*/
+  background-color: #008CD6 !important;  /* 修改导航栏背景色*/
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
   .hamburger-container {
     line-height: 46px;
@@ -153,11 +154,11 @@ export default {
   }
   .title-box{
     margin: 0;
-    font-size: 23px;
+    font-size: 21px;
     width: 360px;
     height: 50px;
     color: #fff;
-    padding-left:50px;
+    padding-left:12px;
     display: inline-grid;
     align-items: center;
   }

src/layout/components/Settings/index.vue

@@ -226,7 +226,7 @@ export default {
           height: 100%;
           padding-top: 15px;
           padding-left: 24px;
-          color: #4F9BAA;
+          color: #008CD6;
           font-weight: 700;
           font-size: 14px;
         }

src/layout/components/Sidebar/Logo.vue

@@ -58,7 +58,7 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background-color: #4F9BAA !important;  /* 修改logo背景色*/
+  background-color: #008CD6 !important;  /* 修改logo背景色*/
   text-align: center;
   overflow: hidden;
 

src/layout/components/Sidebar/index.vue

@@ -1,52 +1,114 @@
 <template>
-    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? '#f0f2f5' : '#ffffff' }">
-        <logo v-if="showLogo" :collapse="isCollapse" />
+  <div>
+    <div
+      :class="{ 'has-logo': showLogo,  }"
+      :style="{
+        backgroundColor:
+          settings.sideTheme === 'theme-dark' ? '#f0f2f5' : '#ffffff',
+      }"
+    >
+      <logo v-if="showLogo" :collapse="isCollapse" />
+      <div class="scro">
         <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
-            <el-menu
-                :default-active="activeMenu"
-                :collapse="isCollapse"
-                :background-color="settings.sideTheme === 'theme-dark' ? '#f0f2f5' : '#ffffff'"
-                :text-color="settings.sideTheme === 'theme-dark' ? '#bfcbd9' : 'rgba(0,0,0,.70)'"
-                :unique-opened="true"
-                :active-text-color="settings.theme"
-                :collapse-transition="false"
-                mode="vertical">
-                <sidebar-item
-                    v-for="(route, index) in sidebarRouters"
-                    :key="route.path  + index"
-                    :item="route"
-                    :base-path="'/'+route.path"
-                />
-            </el-menu>
-        </el-scrollbar>
+        <el-menu
+          :default-active="activeMenu"
+          :collapse="isCollapse"
+          :background-color="
+            settings.sideTheme === 'theme-dark' ? '#f0f2f5' : '#ffffff'
+          "
+          :text-color="
+            settings.sideTheme === 'theme-dark' ? '#bfcbd9' : 'rgba(0,0,0,.70)'
+          "
+          :unique-opened="true"
+          :active-text-color="settings.theme"
+          :collapse-transition="false"
+          mode="vertical"
+        >
+          <sidebar-item
+            v-for="(route, index) in sidebarRouters"
+            :key="route.path + index"
+            :item="route"
+            :base-path="'/' + route.path"
+          />
+        </el-menu>
+      </el-scrollbar>
+      </div>
+      
+      <div class="bottomBox">
+        <hamburger
+          id="hamburger-container"
+          :is-active="sidebar.opened"
+          class="hamburger-container"
+          @toggleClick="toggleSideBar"
+        />
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import { mapGetters, mapState } from "vuex";
 import Logo from "./Logo";
 import SidebarItem from "./SidebarItem";
-
+import Hamburger from "@/components/Hamburger";
 export default {
-    components: { SidebarItem, Logo },
-    computed: {
-        ...mapState(["settings"]),
-        ...mapGetters(["sidebarRouters", "sidebar"]),
-        activeMenu() {
-            const route = this.$route;
-            const { meta, path } = route;
-            // if set path, the sidebar will highlight the path you set
-            if (meta.activeMenu) {
-                return meta.activeMenu;
-            }
-            return path;
-        },
-        showLogo() {
-            return this.$store.state.settings.sidebarLogo;
-        },
-        isCollapse() {
-            return !this.sidebar.opened;
-        }
-    }
+  components: { SidebarItem, Logo, Hamburger },
+  computed: {
+    ...mapState(["settings"]),
+    ...mapGetters(["sidebarRouters", "sidebar"]),
+    activeMenu() {
+      const route = this.$route;
+      const { meta, path } = route;
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu;
+      }
+      return path;
+    },
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo;
+    },
+    isCollapse() {
+      return !this.sidebar.opened;
+    },
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch("app/toggleSideBar");
+    },
+  },
 };
 </script>
+<style lang="scss" scoped>
+.hamburger {
+  width: 100%;
+  height: 100%;
+  background-color: #f0f2f5;
+}
+.scro {
+  position: relative;
+  height: 90vh;
+  width: 100%;
+  overflow-y: scroll !important;
+}
+.bottomBox {
+  //   position: absolute;
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  padding-left: 10px;
+ 
+  bottom: 2%;
+  border-top: #ccc;
+  .hamburger-container {
+    // text-align: center;
+    cursor: pointer;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
+    }
+  }
+}
+</style>

src/layout/components/TagsView/ScrollPane.vue

@@ -1,5 +1,6 @@
 <template>
   <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+
     <slot />
   </el-scrollbar>
 </template>
@@ -9,6 +10,7 @@ const tagAndTagSpacing = 4 // tagAndTagSpacing
 
 export default {
   name: 'ScrollPane',
+  
   data() {
     return {
       left: 0
@@ -17,7 +19,8 @@ export default {
   computed: {
     scrollWrapper() {
       return this.$refs.scrollContainer.$refs.wrap
-    }
+    },
+    
   },
   mounted() {
     this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
@@ -77,6 +80,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.breadcrumbClass{
+  width: 100%;
+  height: 30px;
+}
 .scroll-container {
   white-space: nowrap;
   position: relative;

src/layout/components/TagsView/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
+    
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
+   
     <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
       <router-link
         v-for="tag in visitedViews"
@@ -31,9 +34,9 @@
 <script>
 import ScrollPane from './ScrollPane'
 import path from 'path'
-
+import Breadcrumb from '@/components/Breadcrumb'
 export default {
-  components: { ScrollPane },
+  components: { ScrollPane ,Breadcrumb},
   data() {
     return {
       visible: false,
@@ -47,6 +50,11 @@ export default {
     visitedViews() {
       return this.$store.state.tagsView.visitedViews
     },
+    topNav: {
+      get() {
+        return this.$store.state.settings.topNav
+      }
+    },
     routes() {
       return this.$store.state.permission.routes
     },
@@ -239,7 +247,7 @@ export default {
 
 <style lang="scss" scoped>
 .tags-view-container {
-  height: 34px;
+  height: 100%;
   width: 100%;
   background: #fff;
   border-bottom: 1px solid #d8dce5;

src/layout/index.vue

@@ -2,6 +2,7 @@
   <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
     <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
+   
     <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar/>
@@ -21,13 +22,13 @@ import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 import variables from '@/assets/styles/variables.scss'
-
 export default {
   name: 'Layout',
   components: {
     AppMain,
     Navbar,
     RightPanel,
+   
     Settings,
     Sidebar,
     TagsView

src/store/modules/settings.js

@@ -5,7 +5,7 @@ const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dyn
 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 const state = {
   title: '',
-  theme: storageSetting.theme || '#4F9BAA',
+  theme: storageSetting.theme || '#008CD6',
   sideTheme: storageSetting.sideTheme || sideTheme,
   showSettings: showSettings,
   topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,

src/views/system/dept/extend.vue

@@ -1216,7 +1216,7 @@ export default {
 .title {
   font-size: 18px;
   text-align: left;
-  background: #4f9baabd;
+  background: #008CD6bd;
   color: #fff;
   height: 36px;
   line-height: 36px;

src/views/system/menu/index.vue

@@ -1,6 +1,16 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="PC端" name="1"></el-tab-pane>
+      <el-tab-pane label="移动端" name="0"></el-tab-pane>
+    </el-tabs>
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+    >
       <el-form-item label="菜单名称" prop="menuName">
         <el-input
           v-model="queryParams.menuName"
@@ -10,7 +20,11 @@
         />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
+        <el-select
+          v-model="queryParams.status"
+          placeholder="菜单状态"
+          clearable
+        >
           <el-option
             v-for="dict in dict.type.sys_normal_disable"
             :key="dict.value"
@@ -20,8 +34,16 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
@@ -34,7 +56,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:menu:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -43,9 +66,13 @@
           icon="el-icon-sort"
           size="mini"
           @click="toggleExpandAll"
-        >展开/折叠</el-button>
+          >展开/折叠</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
     <el-table
@@ -54,12 +81,25 @@
       :data="menuList"
       row-key="id"
       :default-expand-all="isExpandAll"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
     >
-      <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
-      <el-table-column prop="platformType" label="平台类型" :show-overflow-tooltip="true" width="160">
+      <el-table-column
+        prop="menuName"
+        label="菜单名称"
+        :show-overflow-tooltip="true"
+        width="160"
+      ></el-table-column>
+      <el-table-column
+        prop="platformType"
+        label="平台类型"
+        :show-overflow-tooltip="true"
+        width="160"
+      >
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_platform_type" :value="scope.row.platformType"/>
+          <dict-tag
+            :options="dict.type.sys_platform_type"
+            :value="scope.row.platformType"
+          />
         </template>
       </el-table-column>
       <el-table-column prop="icon" label="图标" align="center" width="100">
@@ -67,12 +107,27 @@
           <svg-icon :icon-class="scope.row.icon" />
         </template>
       </el-table-column>
-      <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
-      <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
+      <el-table-column
+        prop="orderNum"
+        label="排序"
+        width="60"
+      ></el-table-column>
+      <el-table-column
+        prop="perms"
+        label="权限标识"
+        :show-overflow-tooltip="true"
+      ></el-table-column>
+      <el-table-column
+        prop="component"
+        label="组件路径"
+        :show-overflow-tooltip="true"
+      ></el-table-column>
       <el-table-column prop="status" label="状态" width="80">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+          <dict-tag
+            :options="dict.type.sys_normal_disable"
+            :value="scope.row.status"
+          />
         </template>
       </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime">
@@ -80,7 +135,11 @@
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -88,21 +147,24 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:menu:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-plus"
             @click="handleAdd(scope.row)"
             v-hasPermi="['system:menu:add']"
-          >新增</el-button>
+            >新增</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:menu:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -124,9 +186,13 @@
           </el-col>
           <el-col :span="14">
             <el-form-item label="平台类型" prop="platformType">
-              <el-radio-group v-model="form.platformType">
-                <el-radio v-for="dict in dict.type.sys_platform_type" :key="`${dict.value}`"
-                          :label="dict.value">{{ dict.label }}</el-radio>
+              <el-radio-group v-model="form.platformType" disabled>
+                <el-radio
+                  v-for="dict in dict.type.sys_platform_type"
+                  :key="`${dict.value}`"
+                  :label="dict.value"
+                  >{{ dict.label }}</el-radio
+                >
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -142,22 +208,39 @@
           <el-col :span="24" v-if="form.menuType != 'F'">
             <el-form-item label="菜单图标" prop="icon">
               <el-popover
+                v-if="activeName == '1'"
                 placement="bottom-start"
                 width="460"
                 trigger="click"
                 @show="$refs['iconSelect'].reset()"
               >
-                <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
-                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
+                <IconSelect
+                  ref="iconSelect"
+                  @selected="selected"
+                  :active-icon="form.icon"
+                />
+                <el-input
+                  slot="reference"
+                  v-model="form.icon"
+                  placeholder="点击选择图标"
+                  readonly
+                >
                   <svg-icon
                     v-if="form.icon"
                     slot="prefix"
                     :icon-class="form.icon"
-                    style="width: 25px;"
+                    style="width: 25px"
+                  />
+                  <i
+                    v-else
+                    slot="prefix"
+                    class="el-icon-search el-input__icon"
                   />
-                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                 </el-input>
               </el-popover>
+        
+                <imgUpload  v-else  type="radioIcon" :value="form.icon" @input="inputHandler"></imgUpload>
+             
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -167,14 +250,21 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="显示排序" prop="orderNum">
-              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+              <el-input-number
+                v-model="form.orderNum"
+                controls-position="right"
+                :min="0"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12" v-if="form.menuType != 'F'">
             <el-form-item prop="isFrame">
               <span slot="label">
-                <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
-                <i class="el-icon-question"></i>
+                <el-tooltip
+                  content="选择是外链则路由地址需要以`http(s)://`开头"
+                  placement="top"
+                >
+                  <i class="el-icon-question"></i>
                 </el-tooltip>
                 是否外链
               </span>
@@ -187,8 +277,11 @@
           <el-col :span="12" v-if="form.menuType != 'F'">
             <el-form-item prop="path">
               <span slot="label">
-                <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
-                <i class="el-icon-question"></i>
+                <el-tooltip
+                  content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头"
+                  placement="top"
+                >
+                  <i class="el-icon-question"></i>
                 </el-tooltip>
                 路由地址
               </span>
@@ -198,8 +291,11 @@
           <el-col :span="12" v-if="form.menuType == 'C'">
             <el-form-item prop="component">
               <span slot="label">
-                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
-                <i class="el-icon-question"></i>
+                <el-tooltip
+                  content="访问的组件路径，如：`system/user/index`，默认在`views`目录下"
+                  placement="top"
+                >
+                  <i class="el-icon-question"></i>
                 </el-tooltip>
                 组件路径
               </span>
@@ -208,10 +304,17 @@
           </el-col>
           <el-col :span="12" v-if="form.menuType != 'M'">
             <el-form-item prop="perms">
-              <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
+              <el-input
+                v-model="form.perms"
+                placeholder="请输入权限标识"
+                maxlength="100"
+              />
               <span slot="label">
-                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
-                <i class="el-icon-question"></i>
+                <el-tooltip
+                  content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
+                  placement="top"
+                >
+                  <i class="el-icon-question"></i>
                 </el-tooltip>
                 权限字符
               </span>
@@ -219,10 +322,17 @@
           </el-col>
           <el-col :span="12" v-if="form.menuType == 'C'">
             <el-form-item prop="query">
-              <el-input v-model="form.query" placeholder="请输入参数，如：id:xx格式" maxlength="255" />
+              <el-input
+                v-model="form.query"
+                placeholder="请输入参数，如：id:xx格式"
+                maxlength="255"
+              />
               <span slot="label">
-                <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
-                <i class="el-icon-question"></i>
+                <el-tooltip
+                  content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`'
+                  placement="top"
+                >
+                  <i class="el-icon-question"></i>
                 </el-tooltip>
                 路由参数
               </span>
@@ -231,8 +341,11 @@
           <el-col :span="12" v-if="form.menuType == 'C'">
             <el-form-item prop="isCache">
               <span slot="label">
-                <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
-                <i class="el-icon-question"></i>
+                <el-tooltip
+                  content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致"
+                  placement="top"
+                >
+                  <i class="el-icon-question"></i>
                 </el-tooltip>
                 是否缓存
               </span>
@@ -245,26 +358,42 @@
           <el-col :span="12" v-if="form.menuType != 'F'">
             <el-form-item prop="visible">
               <span slot="label">
-                <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
-                <i class="el-icon-question"></i>
+                <el-tooltip
+                  content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问"
+                  placement="top"
+                >
+                  <i class="el-icon-question"></i>
                 </el-tooltip>
                 显示状态
               </span>
               <el-radio-group v-model="form.visible">
-                <el-radio v-for="dict in dict.type.sys_show_hide" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
+                <el-radio
+                  v-for="dict in dict.type.sys_show_hide"
+                  :key="dict.value"
+                  :label="dict.value"
+                  >{{ dict.label }}</el-radio
+                >
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="12" v-if="form.menuType != 'F'">
             <el-form-item prop="status">
               <span slot="label">
-                <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
-                <i class="el-icon-question"></i>
+                <el-tooltip
+                  content="选择停用则路由将不会出现在侧边栏，也不能被访问"
+                  placement="top"
+                >
+                  <i class="el-icon-question"></i>
                 </el-tooltip>
                 菜单状态
               </span>
               <el-radio-group v-model="form.status">
-                <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
+                <el-radio
+                  v-for="dict in dict.type.sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.value"
+                  >{{ dict.label }}</el-radio
+                >
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -279,17 +408,27 @@
 </template>
 
 <script>
-import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
+import {
+  listMenu,
+  getMenu,
+  delMenu,
+  addMenu,
+  updateMenu,
+} from "@/api/system/menu";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import IconSelect from "@/components/IconSelect";
-
+import imgUpload from "@/components/ImageUpload/index.vue";
 export default {
   name: "Menu",
-  dicts: ['sys_show_hide', 'sys_normal_disable','sys_platform_type'],
-  components: { Treeselect, IconSelect },
+  dicts: ["sys_show_hide", "sys_normal_disable", "sys_platform_type"],
+  components: { Treeselect, IconSelect, imgUpload },
   data() {
     return {
+      // platformType 平台类型 0APP 1PC
+      //tabsName
+      activeName: "1",
+
       // 遮罩层
       loading: true,
       // 显示搜索条件
@@ -309,28 +448,39 @@ export default {
       // 查询参数
       queryParams: {
         menuName: undefined,
-        visible: undefined
+        visible: undefined,
       },
       // 表单参数
-      form: {},
+      form: {
+        platformType: "1",
+      },
       // 表单校验
       rules: {
         menuName: [
-          { required: true, message: "菜单名称不能为空", trigger: "blur" }
+          { required: true, message: "菜单名称不能为空", trigger: "blur" },
         ],
         orderNum: [
-          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
+          { required: true, message: "菜单顺序不能为空", trigger: "blur" },
         ],
         path: [
-          { required: true, message: "路由地址不能为空", trigger: "blur" }
-        ]
-      }
+          { required: true, message: "路由地址不能为空", trigger: "blur" },
+        ],
+      },
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    //上传成功回调
+    inputHandler(list){
+      console.log(list);
+      this.form.icon=list
+    },
+    //切换tab栏刷新数据
+    handleClick() {
+      this.getList();
+    },
     // 选择图标
     selected(name) {
       this.form.icon = name;
@@ -338,8 +488,13 @@ export default {
     /** 查询菜单列表 */
     getList() {
       this.loading = true;
-      listMenu(this.queryParams).then(response => {
-        this.menuList = this.handleTree(response.data, "id");
+      listMenu(this.queryParams).then((response) => {
+        console.log(response.data);
+        // filter((item)=>item.item.platformType==this.activeName)
+        this.menuList = this.handleTree(
+          response.data.filter((item) => item.platformType == this.activeName)
+        );
+
         this.loading = false;
       });
     },
@@ -351,14 +506,14 @@ export default {
       return {
         id: node.id,
         label: node.menuName,
-        children: node.children
+        children: node.children,
       };
     },
     /** 查询菜单下拉树结构 */
     getTreeselect() {
-      listMenu().then(response => {
+      listMenu().then((response) => {
         this.menuOptions = [];
-        const menu = { id: 0, menuName: '主类目', children: [] };
+        const menu = { id: 0, menuName: "主类目", children: [] };
         menu.children = this.handleTree(response.data, "id");
         this.menuOptions.push(menu);
       });
@@ -380,7 +535,7 @@ export default {
         isFrame: 1,
         isCache: 0,
         visible: "0",
-        status: "0"
+        status: "0",
       };
       this.resetForm("form");
     },
@@ -404,6 +559,7 @@ export default {
         this.form.parentId = 0;
       }
       this.open = true;
+      this.form.platformType = this.activeName;
       this.title = "添加菜单";
     },
     /** 展开/折叠操作 */
@@ -418,24 +574,25 @@ export default {
     handleUpdate(row) {
       this.reset();
       this.getTreeselect();
-      getMenu(Number(row.id)).then(response => {
+      getMenu(Number(row.id)).then((response) => {
         this.form = response.data;
+        this.form.platformType = this.activeName;
         this.open = true;
         this.title = "修改菜单";
       });
     },
     /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != undefined) {
-            updateMenu(this.form).then(response => {
+            updateMenu(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addMenu(this.form).then(response => {
+            addMenu(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -446,13 +603,23 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function() {
-        return delMenu(row.id);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    }
-  }
+      this.$modal
+        .confirm('是否确认删除名称为"' + row.menuName + '"的数据项？')
+        .then(function () {
+          return delMenu(row.id);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+  },
 };
 </script>
+<style lang="scss" scoped>
+  .el-upload-dragger{
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/views/system/user/extend.vue

@@ -682,7 +682,7 @@ export default {
 .title{
   font-size: 18px;
   text-align: left;
-  background: #4f9baabd;
+  background: #008CD6bd;
   color:#fff;
   height: 36px;
   line-height: 36px;

src/views/tool/build/index.vue

@@ -476,7 +476,7 @@ export default {
     margin-left: 6px;
   }
   .el-icon-plus{
-    color: #4F9BAA;
+    color: #008CD6;
   }
   .el-icon-delete{
     color: #157a0c;