代码更新

src/main.js

@@ -195,3 +195,6 @@ new Vue({
   template: '<App/>',
   components: { App }
 })
+
+const Bus = new Vue()
+Vue.prototype.$bus = Bus
\ No newline at end of file

src/views/layout/Layout.vue

@@ -51,7 +51,7 @@
       <div :class="{ 'main-content': true,mainAnimation: isMainAnimation,firstMain: isFirstMain,secondMain: isSecondMain,}" v-show="!unStatistics">
         <div class="main-container">
           <!-- 路由标题栏 -->
-          <ul class="entPly" v-if="threeRoute.children != ''">
+          <ul class="entPly" v-if="threeRoute.children != ''" v-show="showThreeRoute">
             <li :class="{ active: threeActive == item.title }" v-for="(item, index) in threeRoute.children" :key="index" @click="getContent(index, item.code, item.title)">
               {{ item.title }}
             </li>
@@ -121,7 +121,8 @@ export default {
       totalRefund: 0, // 总退款
       weName: "", //小程序名称
       foldedStatus: 0, //收起状态 0:原始状态 1:二级收起 3:二级三级收起
-      permissionMenusArr: []
+      permissionMenusArr: [],
+      showThreeRoute: true,
     };
   },
   created() {
@@ -137,10 +138,14 @@ export default {
     }
   },
   mounted() {
+    this.showThreeRoute = true
     this.unStatistics = true;
     this.secondRoute = [];
     this.threeRoute = [];
     this.threeMain = false;
+    this.$bus.$on("hideThreeRoute",bol => {
+      this.showThreeRoute = bol
+    })
   },
   methods: {
     //收起

src/views/webSiteManagement/industryApplication/applicationCate/index.vue

 <!--
  * @Author: your name
  * @Date: 2020-12-02 10:27:53
- * @LastEditTime: 2020-12-03 17:43:08
+ * @LastEditTime: 2020-12-04 09:04:15
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\index.vue
@@ -293,7 +293,7 @@ export default {
       }
     }
     .addCate{
-      width: 260px;
+      width: 240px;
       height: 46px;
       display: flex;
       flex-direction: row;

src/views/webSiteManagement/industryApplication/applicationList/addApp/index.vue

+<!--
+ * @Author: your name
+ * @Date: 2020-12-04 09:09:37
+ * @LastEditTime: 2020-12-04 09:29:00
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\addApp\index.vue
+-->
+<template>
+  <div id='addApp'>
+      <div class="top">
+        <div class="title" @click="backup">
+            <img src="/static/images/return.png"/>
+            返回上一页
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'addApp',
+  components: {
+
+  },
+  data(){
+    return {
+
+    }
+  },
+  mounted() {
+    this.$bus.$emit('hideThreeRoute',false)
+  },
+  beforeDestroy(){
+      this.$bus.$emit('hideThreeRoute',true)
+  },
+  methods: {
+    backup(){
+      this.$parent.componentName='appList'
+      this.$bus.$emit('hideThreeRoute',true)
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  #addApp{
+        margin: 0 1% 0 1%;
+        width: 98%;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        color: #5178F2;
+        .top{
+            width: 100%;
+            height: 68px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            overflow: hidden;
+            border-bottom: 1px solid #EEEEEE;
+            .title{ 
+                width: auto;
+                margin: 0 0 0 30px;
+                height: 46px;
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+                color: #5178F2;
+                overflow: hidden;
+                cursor: pointer;
+            }
+        }
+  }
+</style>
\ No newline at end of file

src/views/webSiteManagement/industryApplication/applicationList/appList/index.vue

+<!--
+ * @Author: your name
+ * @Date: 2020-12-02 10:27:53
+ * @LastEditTime: 2020-12-04 09:15:25
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\index.vue
+-->
+<template>
+  <div id="ApplicationList">
+    <!-- 操作表格栏 -->
+    <div class="operators">
+      <div class="applyName">
+        <span>应用名称</span>
+        <el-col :span="16">
+          <el-input
+            v-model="applyName"
+            placeholder="请输入类型名称"
+            size="100px"
+          ></el-input>
+        </el-col>
+      </div>
+      <div class="status">
+        <span>所有状态</span>
+        <el-select v-model="currentStatus" placeholder="全部">
+          <el-option
+            v-for="item in status"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="types">
+        <span>应用类别</span>
+        <el-select v-model="currentType" placeholder="全部">
+          <el-option
+            v-for="item in types"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="controls">
+        <div
+          class="item"
+          v-for="(item, index) in operatorControls"
+          :key="index"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="addApp">
+          <div class="add" @click="$parent.componentName = 'addApp'">
+              新增应用
+          </div>
+      </div>
+    </div>
+    <!-- 表格 -->
+    <div class="table">
+      <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
+        <el-table-column label="序号" width="100" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.id }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="应用类别" width="200" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.type }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="应用名称" align="center">
+          <template slot-scope="scope">
+            <span class="introduce">{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="详情图" align="center">
+          <template slot-scope="scope">
+            <span>
+              <img
+                class="icon"
+                :src="scope.row.icon.url"
+                @click="showPreview(scope.row.icon)"
+              />
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发布时间" width="150" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.date }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="150" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.status }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" align="center">
+          <template slot-scope="scope">
+            <!-- <span>{{scope.row.operator}}</span> -->
+            <span>
+              <div class="operators">
+                <div class="edit">编辑</div>
+                <div class="offshelf">下架</div>
+                <div class="delete">删除</div>
+              </div>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 使用图片查看器预览当前缩略图 -->
+    <el-image-viewer
+      v-if="currentIcon.showPreview"
+      :on-close="closePreview"
+      :url-list="[currentIcon.url]"
+    />
+  </div>
+</template>
+
+<script>
+// 导入组件
+import ElImageViewer from "element-ui/packages/image/src/image-viewer";
+import singleImageX from '@/components/Upload/singleImageX';
+// 导入请求
+import {
+  getAllApplicationType,
+  getListApplicationType,
+  addUpdateApplicationType,
+} from "api/website/industryApplication/index";
+export default {
+  name: "ApplicationList",
+  components: {
+    ElImageViewer,
+    singleImageX
+  },
+  data() {
+    return {
+      currentIcon: "",
+      // 功能按钮
+      operatorControls: [
+        {
+          name: "搜索",
+        },
+        {
+          name: "清空搜索",
+        },
+      ],
+      applyName: "",
+      //所有状态
+      status: [
+        {
+          value: "1",
+          label: "全部",
+        },
+        {
+          value: "2",
+          label: "上架",
+        },
+        {
+          value: "3",
+          label: "下架",
+        },
+      ],
+      // 所有类别
+      types: [
+        {
+          value: "1",
+          label: "全部",
+        },
+        {
+          value: "2",
+          label: "数字农业",
+        },
+      ],
+      currentType: "全部",
+      currentStatus: "全部",
+      // 表格数据
+      tableData: [
+        {
+          id: "1",
+          type: "类别",
+          name: "名称",
+          icon: {
+            url: "https://onemap.obtdata.com/wx/download/world.png",
+            showPreview: false,
+          },
+          date: "发布时间",
+          status: "状态",
+        },
+      ],
+    };
+  },
+  mounted() {},
+  methods: {
+    onPreview(url){   
+        this.form.coverImg = url
+    },
+    showPreview(icon) {
+      this.currentIcon = icon;
+      this.currentIcon.showPreview = true;
+    },
+    closePreview() {
+      this.currentIcon.showPreview = false;
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+#ApplicationList {
+  margin: 0 1% 0 1%;
+  width: 98%;
+  height: auto;
+  #addCateManager{
+    padding: 0 5%;
+    width: 90%;
+    height: auto;
+  }
+  .operators {
+    // margin: 0 1% 0 1%;
+    width: 100%;
+    height: 68px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    .applyName,.status,.types {
+      width: auto;
+      height: 46px;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+      span {
+        margin: 0 10px 0 20px;
+      }
+    }
+    .addApp{
+      width: 220px;
+      height: 46px;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+      overflow: hidden;
+      .add{
+        width: 50%;
+        height: 36px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        border-radius: 5px;
+        background-color: #1890ff;
+        color: #FFFFFF;
+        cursor: pointer;
+      }
+    }
+    .controls {
+      margin-left: 40px;
+      width: 260px;
+      height: 46px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      .item {
+        width: 120px;
+        height: 36px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        font-weight: 400;
+        color: #5178f2;
+        border: 1px solid #5178f2;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+    }
+  }
+  .table {
+    margin: 1% 1% 0 1%;
+    width: 98%;
+    height: auto;
+    span {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      .icon {
+        width: 50px;
+        height: 50px;
+        object-fit: cover;
+      }
+      .operators {
+        width: 300px;
+        height: 46px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+        .edit,
+        .offshelf,
+        .delete {
+          width: auto;
+          height: 36px;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+        }
+        .edit,
+        .offshelf {
+          color: #1890ff;
+        }
+        .delete {
+          color: #fe4066;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file