导航页面管理

src/api/indexurl.js

 import request from '@/utils/request'
 
-export function getIndexUrl() {
+export function getIndexUrl(query) {
   return request({
     url: '/indexurl/get_index_url',
-    method: 'get'
+    method: 'get',
+    params: query
+  })
+}
+
+export function getType(query) {
+  return request({
+    url: '/indexurl/get_type_name',
+    method: 'get',
+    params: query
+  })
+}
+
+export function saveIndex(data) {
+  return request({
+    url: '/indexurl/save',
+    method: 'post',
+    data
+  })
+}
+
+export function deleteIndex(query) {
+  return request({
+    url: '/indexurl/delete',
+    method: 'get',
+    params: query
   })
 }

src/router/index.js

@@ -64,7 +64,7 @@ export const constantRouterMap = [
     path: '/401',
     component: () => import('@/views/errorPage/401'),
     hidden: true
-  },
+  }
   // {
   //   path: '/dashboard',
   //   component: Layout,
@@ -78,19 +78,7 @@ export const constantRouterMap = [
   //     }
   //   ]
   // },
-  {
-    path: '',
-    component: Layout,
-    redirect: 'indexlist',
-    children: [
-      {
-        path: '/indexlist',
-        component: () => import('@/views/index/index'),
-        name: 'indexList',
-        meta: { title: 'indexList', icon: 'link' }
-      }
-    ]
-  }
+
   // {
   //   path: '/documentation',
   //   component: Layout,
@@ -126,6 +114,29 @@ export default new Router({
 })
 
 export const asyncRouterMap = [
+  {
+    path: '',
+    component: Layout,
+    redirect: 'indexlist',
+    meta: {
+      title: 'indexList',
+      icon: 'link'
+    },
+    children: [
+      {
+        path: '/indexlist',
+        component: () => import('@/views/index/index'),
+        name: 'indexList',
+        meta: { title: 'indexList' }
+      },
+      {
+        path: 'manager',
+        component: () => import('@/views/index/manager'),
+        name: 'manager',
+        meta: { title: '导航页面管理', roles: ['admin'] }
+      }
+    ]
+  },
 
   dockersRouter,
   {

src/views/index/manager.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="listQuery.remark" placeholder="名称" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
+      <el-select v-model="listQuery.type" placeholder="类型" clearable style="width: 200px" class="filter-item" >
+        <el-option v-for="item in typeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
+      </el-select>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</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="$t('table.id')" 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="handleUpdate(scope.row)">{{ scope.row.remark }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="url" label="地址" align="center"/>
+      <el-table-column prop="type_name" label="类型" align="center"/>
+
+      <el-table-column :label="$t('table.actions')" align="center" width="180" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
+          <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('table.delete') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> -->
+
+    <el-dialog :title="textMap[dialogStatus]" :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.type" class="filter-item" placeholder="Please select">
+            <el-option v-for="item in typeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="名称" prop="remark" style="width:100%">
+          <el-input v-model="temp.remark"/>
+        </el-form-item>
+        <el-form-item label="地址" style="width:100%">
+          <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.url" type="textarea" placeholder="Please input"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
+        <el-button type="primary" @click="createData()">{{ $t('table.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :visible.sync="dialogDeleteVisible" :data="temp" title="Delete">
+      <span >
+        确定要删除 {{ temp.remark }} 吗?
+      </span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogDeleteVisible = false">{{ $t('table.cancel') }}</el-button>
+        <el-button type="primary" @click="deleteData()">{{ $t('table.confirm') }}</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getIndexUrl, saveIndex, deleteIndex } from '@/api/indexurl'
+import waves from '@/directive/waves' // Waves directive
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+
+export default {
+  name: 'ComplexTable',
+  components: { Pagination },
+  directives: { waves },
+
+  data() {
+    return {
+      indexList: [],
+      total: 0,
+      listQuery: {
+        remark: undefined,
+        type: undefined
+      },
+      typeOptions: [],
+      temp: {},
+      dialogFormVisible: false,
+      dialogDeleteVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: 'Edit',
+        create: 'Create'
+      },
+      rules: {}
+    }
+  },
+  created() {
+    getIndexUrl().then(res => {
+      for (const i in res.data) {
+        this.indexList = res.data[i].data.concat(this.indexList)
+        // this.indexList.sort((s1, s2) => {
+        //   return s2.remark.localeCompare(s1.remark)
+        // })
+        this.sortList(this.indexList)
+        this.typeOptions.push({
+          key: res.data[i].type,
+          display_name: res.data[i].name
+        })
+      }
+    })
+  },
+  methods: {
+
+    getIndexUrl() {
+      for (const prop in this.listQuery) {
+        if (this.listQuery[prop] === '') {
+          delete this.listQuery[prop]
+        }
+      }
+      getIndexUrl(this.listQuery).then(res => {
+        this.indexList = []
+        for (const i in res.data) {
+          this.indexList = res.data[i].data.concat(this.indexList)
+        }
+        this.sortList(this.indexList)
+      })
+    },
+
+    sortList(index) {
+      index.sort((s1, s2) => {
+        return s2.remark.localeCompare(s1.remark)
+      })
+    },
+
+    handleFilter() {
+      this.getIndexUrl()
+    },
+
+    resetTemp() {
+      this.temp = {
+        remark: '',
+        type: '',
+        type_name: '',
+        url: ''
+      }
+    },
+
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.temp.type_name = this.typeOptions.filter(i => i.key === this.temp.type)[0].display_name
+          saveIndex(this.temp).then(() => {
+            this.dialogFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '保存成功',
+              type: 'success',
+              duration: 2000
+            })
+            this.getIndexUrl()
+          })
+        }
+      })
+    },
+
+    handleUpdate(row) {
+      this.temp = Object.assign({}, row) // copy obj
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+    },
+
+    handleDelete(row) {
+      this.temp = row
+      this.dialogDeleteVisible = true
+    },
+
+    deleteData() {
+      deleteIndex({ '_id': this.temp._id }).then(() => {
+        this.dialogDeleteVisible = false
+        this.$notify({
+          title: '成功',
+          message: '删除成功',
+          type: 'success',
+          duration: 2000
+        })
+        this.getIndexUrl()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item {
+  width: 600px;
+}
+</style>