新增导航页面

src/api/navigate.js

+import request from '@/utils/holmesRequest'
+
+export function getNavigateIndex(queryInfo) {
+  return request({
+    url: '/navigate/index',
+    method: 'get',
+    params: queryInfo
+  })
+}
+
+// 获取导航列表
+export function getNavigateList(queryInfo) {
+  return request({
+    url: '/navigate/list',
+    method: 'get',
+    params: queryInfo
+  })
+}
+
+// 获取模块列表
+export function getModuleList(queryInfo) {
+  return request({
+    url: '/navigate/modules',
+    method: 'get',
+    params: queryInfo
+  })
+}
+
+// 新增导航
+export function addNavigate(data) {
+  return request({
+    url: '/navigate/add',
+    method: 'post',
+    data
+  })
+}
+
+// 更新导航
+export function updateNavigate(data) {
+  return request({
+    url: '/navigate/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除导航
+export function deleteNavigate(data) {
+  return request({
+    url: '/navigate/delete',
+    method: 'post',
+    data
+  })
+}

src/assets/css/iconfont.css

 @font-face {
   font-family: "iconfont"; /* Project id 2584881 */
-  src: url('../fonts/iconfont.woff2?t=1629700669553') format('woff2'),
-       url('../fonts/iconfont.woff?t=1629700669553') format('woff'),
-       url('../fonts/iconfont.ttf?t=1629700669553') format('truetype');
+  src: url('../fonts/iconfont.woff2?t=1630134092979') format('woff2'),
+       url('../fonts/iconfont.woff?t=1630134092979') format('woff'),
+       url('../fonts/iconfont.ttf?t=1630134092979') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zhifeiji:before {
+  content: "\e6a0";
+}
+
+.icon-detail:before {
+  content: "\e793";
+}
+
+.icon-yonghupeizhi:before {
+  content: "\e71b";
+}
+
+.icon-daohang:before {
+  content: "\e634";
+}
+
 .icon-docker1:before {
   content: "\e602";
 }

src/assets/fonts/iconfont.json

@@ -5,6 +5,34 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "5302982",
+      "name": "发送",
+      "font_class": "zhifeiji",
+      "unicode": "e6a0",
+      "unicode_decimal": 59040
+    },
+    {
+      "icon_id": "4765971",
+      "name": "detail",
+      "font_class": "detail",
+      "unicode": "e793",
+      "unicode_decimal": 59283
+    },
+    {
+      "icon_id": "7674918",
+      "name": "配置",
+      "font_class": "yonghupeizhi",
+      "unicode": "e71b",
+      "unicode_decimal": 59163
+    },
+    {
+      "icon_id": "8765227",
+      "name": "导航",
+      "font_class": "daohang",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
     {
       "icon_id": "14343595",
       "name": "docker",

src/router/index.js

@@ -45,6 +45,8 @@ import TestEnv from '../views/docker/TestEnv'
 import DevEnv from '../views/docker/DevEnv'
 import EnvDetail from '../views/docker/EnvDetail'
 import ProConfig from '../views/docker/ProConfig'
+import NavigateList from '../views/navigate/List'
+import NavigateConfig from '../views/navigate/Config'
 
 const originalPush = Router.prototype.push
 Router.prototype.push = function push(location) {
@@ -241,6 +243,16 @@ const router = new Router({
           path: '/docker/ProConfig',
           name: '项目配置管理',
           component: ProConfig
+        },
+        {
+          path: '/index/list',
+          name: '导航列表',
+          component: NavigateList
+        },
+        {
+          path: '/index/config',
+          name: '导航配置',
+          component: NavigateConfig
         }
       ]
     }

src/views/layout/leftAside/menu.json

 {
   "menu": [
+    {
+      "id": 1,
+      "icon": "iconfont icon-daohang",
+      "title": "导航页面",
+      "child": [
+        {
+          "id": 1,
+          "title": "导航页面列表",
+          "icon": "iconfont icon-detail",
+          "path": "/index/list"
+        },
+        {
+          "id": 2,
+          "title": "导航页面配置",
+          "icon": "iconfont icon-yonghupeizhi",
+          "path": "/index/config"
+        }
+      ]
+    },
     {
       "id": 2,
       "icon": "iconfont icon-docker1",
@@ -21,7 +40,7 @@
           "id": 3,
           "title": "服务配置管理",
           "icon": "iconfont icon-peizhi",
-          "path":  "/docker/ProConfig"
+          "path": "/docker/ProConfig"
         }
       ]
     },
@@ -137,8 +156,8 @@
         },
         {
           "id": 7,
-          "title": "发送短信",
-          "icon": "el-icon-position",
+          "title": "消息发送",
+          "icon": "iconfont icon-zhifeiji",
           "path": "/effect/msg"
         }
       ]

src/views/navigate/Config.vue

+<template>
+  <div>
+    <div class="filter">
+      <el-input v-model="listQuery.name" placeholder="名称" clearable style="width: 200px;" class="filter-item" />
+      <el-select v-model="listQuery.module" placeholder="类型" clearable style="width: 200px" class="filter-item">
+        <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchIndex">搜索</el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
+    </div>
+
+    <el-table :data="indexList" border fit highlight-current-row style="width: 100%;">
+      <el-table-column label="#" prop="id" align="center" width="65">
+        <template slot-scope="scope">
+          <span>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="名称" align="center">
+        <template slot-scope="scope">
+          <span class="link-type" @click="openWindow(scope.row)">{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="url" label="地址" align="center" />
+      <el-table-column prop="moduleName" label="类型" align="center" />
+
+      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
+          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 新增更新对话框 -->
+    <el-dialog :title="dialogName" :visible.sync="dialogFormVisible">
+      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="105px" style="width: 90%; margin-left:40px;">
+        <el-form-item label="类型" prop="type">
+          <el-select v-model="temp.module" class="filter-item" placeholder="请选择模块">
+            <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="名称" prop="remark" style="width:100%">
+          <el-input v-model="temp.name" />
+        </el-form-item>
+        <el-form-item label="地址" style="width:100%">
+          <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.url" type="textarea" placeholder="请输入地址" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="createOrUpdateNavigate()">确认</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 删除对话框 -->
+    <el-dialog :visible.sync="dialogDeleteVisible" :data="temp" title="删除导航">
+      <span>
+        确定要删除 {{ temp.name }} 吗?
+      </span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogDeleteVisible = false">取消</el-button>
+        <el-button type="primary" @click="deleteData()">确认</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import {
+  getNavigateList,
+  getModuleList,
+  addNavigate,
+  updateNavigate,
+  deleteNavigate
+} from '@/api/navigate'
+export default {
+  data() {
+    return {
+      listQuery: {
+        name: '',
+        module: null
+      },
+      indexList: [],
+      moduleList: [],
+      temp: {},
+      dialogName: '',
+      dialogFormVisible: false,
+      dialogDeleteVisible: false,
+      rules: {}
+    }
+  },
+  created() {
+    this.getNavigateList()
+    this.getModuleList()
+  },
+  methods: {
+    getNavigateList() {
+      getNavigateList(this.listQuery).then((resp) => {
+        this.indexList = resp.data.data
+      })
+    },
+    getModuleList() {
+      getModuleList().then((resp) => {
+        this.moduleList = resp.data.data
+      })
+    },
+    searchIndex() {
+      this.getNavigateList()
+    },
+    // 打开新增对话框
+    handleCreate() {
+      this.dialogName = '新增导航'
+      this.temp = {}
+      this.dialogFormVisible = true
+    },
+    // 新增/更新导航
+    createOrUpdateNavigate() {
+      if (this.dialogName === '新增导航') {
+        addNavigate(this.temp).then((resp) => {
+          if (resp.data.data === true) {
+            this.dialogFormVisible = false
+            this.getNavigateList()
+            this.$message.success('新增导航成功')
+          } else {
+            return this.$message.error('导航新增失败')
+          }
+        })
+      }
+      if (this.dialogName === '更新导航') {
+        updateNavigate(this.temp).then((resp) => {
+          if (resp.data.data === true) {
+            this.getNavigateList()
+            this.dialogFormVisible = false
+            return this.$message.success('更新导航成功')
+          } else {
+            return this.$message.error('导航更新失败')
+          }
+        })
+      }
+    },
+    // 打开新窗口
+    openWindow(row) {},
+    // 打开更新对话框
+    handleUpdate(row) {
+      this.dialogName = '更新导航'
+      this.dialogFormVisible = true
+      this.temp = {}
+      this.temp.id = row.id
+      this.temp.module = row.moduleId
+      this.temp.name = row.name
+      this.temp.url = row.url
+    },
+    // 删除
+    handleDelete(row) {
+      this.temp = {}
+      this.temp = row
+      this.dialogDeleteVisible = true
+    },
+    // 删除导航
+    deleteData() {
+      var formdata = new FormData()
+      formdata.set('id', this.temp.id)
+      deleteNavigate(formdata).then(resp => {
+        if (resp.data.data === true) {
+          this.dialogDeleteVisible = false
+          this.getNavigateList()
+          return this.$message.success('导航删除成功')
+        } else {
+          return this.$message.error('导航删除失败')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.filter {
+  margin-bottom: 20px;
+}
+</style>

src/views/navigate/List.vue

+<template>
+  <div class="mixin-components-container" >
+    <el-row v-for="item in indexList" :value="item.moduleName" :key="item.moduleName" style="margin-bottom:5px;">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span style="font-size: 20px;">{{ item.moduleName }}</span>
+        </div>
+        <el-button v-for="data in item.list" :key="data.id" :type="item.type" style="padding:10px;margin:5px" @click="openNewWindow(data.url)">{{ data.name }}</el-button>
+      </el-card>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getNavigateIndex } from '@/api/navigate'
+export default {
+  data() {
+    return {
+      indexList: []
+    }
+  },
+  created() {
+    this.getNavigateIndex()
+  },
+  methods: {
+    // 获取导航列表
+    getNavigateIndex() {
+      getNavigateIndex({}).then(resp => {
+        this.indexList = resp.data.data
+      })
+    },
+    // 打开链接
+    openNewWindow(url) {
+      window.open(url)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.mixin-components-container {
+  background-color: #f0f2f5;
+  padding: 10px;
+  min-height: calc(100vh - 84px);
+}
+.component-item{
+  min-height: 100px;
+}
+</style>