Merge branch 'test' into production

src/api/common.js

+import request from '@/utils/request'
+export function addKey(data) {
+  return request({
+    url: '/system/add/key/value',
+    method: 'post',
+    data
+  })
+}
+export function getValueList(p = 1, c = 20) {
+  return request({
+    url: '/system/get/variable/list',
+    method: 'post',
+    params: {
+      p, c
+    }
+  })
+}

src/router/index.js

@@ -11,6 +11,7 @@ import Layout from '@/layout'
 import tableRouter from './modules/table'
 import DeviceRouter from './modules/device'
 import TempaltesRouter from './modules/templates'
+import CommonRouter from './modules/common'
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -121,6 +122,7 @@ export const asyncRoutes = [
   DeviceRouter,
   TempaltesRouter,
   tableRouter,
+  CommonRouter,
   // {
   //   path: 'external-link',
   //   component: Layout,

src/router/modules/common.js

+/** When your routing table is too long, you can split it into small modules **/
+
+import Layout from '@/layout'
+
+const CommonRouter = {
+  path: '/common',
+  component: Layout,
+  redirect: '/common/index',
+  name: 'Common',
+  meta: {
+    title: '公共资源管理',
+    icon: 'table'
+  },
+  children: [
+    {
+      path: 'index',
+      component: () => import('@/views/common/index'),
+      name: 'CommonIndex',
+      meta: { title: '公共资源管理' }
+    }
+  ]
+}
+export default CommonRouter

src/views/common/index.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px;"
+        type="primary"
+        icon="el-icon-edit"
+        @click="handleCreate"
+      >新增公共资源</el-button>
+    </div>
+
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;"
+      @sort-change="sortChange"
+    >
+      <el-table-column
+        label="序号"
+        prop="id"
+        type="index"
+        align="center"
+        width="80"
+        :class-name="getSortClass('id')"
+      >
+        <!-- <template slot-scope="scope">
+          <span>{{ scope.index }}</span>
+        </template>-->
+      </el-table-column>
+      <el-table-column label="资源key" width="auto" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.key }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="资源值" width="auto" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.value }}</span>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column
+        label="状态"
+        class-name="status-col"
+        width="100"
+      >
+        <template slot-scope="{row}">
+          <el-tag :type="row.status | statusFilter">
+            {{ row.typeMenuType }}
+          </el-tag>
+        </template>
+      </el-table-column>-->
+      <el-table-column
+        label="操作"
+        align="center"
+        width="auto"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="{row}">
+          <el-button type="primary" size="mini" @click="handleUpdate(row)">更新</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="70px"
+        style="width: 400px; margin-left:50px;"
+      >
+        <el-form-item v-show="dialogStatus === 'create'" label="资源key" label-width="200" prop="key">
+          <el-input v-model="temp.key" />
+        </el-form-item>
+        <el-form-item label-width="200" label="资源地址" prop="value">
+          <el-input v-model="temp.value" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确认</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
+      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
+        <el-table-column prop="key" label="Channel" />
+        <el-table-column prop="pv" label="Pv" />
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { addKey, getValueList } from '@/api/common'
+import waves from '@/directive/waves' // waves directive
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+
+const calendarTypeOptions = [
+  { key: 'CN', display_name: 'China' },
+  { key: 'US', display_name: 'USA' },
+  { key: 'JP', display_name: 'Japan' },
+  { key: 'EU', display_name: 'Eurozone' }
+]
+
+// arr to obj, such as { CN : "China", US : "USA" }
+const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
+  acc[cur.key] = cur.display_name
+  return acc
+}, {})
+
+export default {
+  name: 'ComplexTable',
+  components: { Pagination },
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    },
+    typeFilter(type) {
+      return calendarTypeKeyValue[type]
+    }
+  },
+  data() {
+    return {
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20,
+        importance: undefined,
+        title: undefined,
+        type: undefined,
+        sort: '+id'
+      },
+      calendarTypeOptions,
+      showReviewer: false,
+      temp: {
+        key: 0,
+        value: ''
+      },
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '编辑',
+        create: '创建'
+      },
+      dialogPvVisible: false,
+      pvData: [],
+      rules: {
+        key: [
+          {
+            required: true,
+            message: 'key is required',
+            trigger: 'change'
+          }
+        ],
+        value: [
+          {
+            required: true,
+            message: 'value is required',
+            trigger: 'change'
+          }
+        ],
+        typeMenuOrder: [
+          {
+            required: true,
+            message: 'typeMenuOrder is required',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      getValueList(this.listQuery.page, this.listQuery.limit)
+        .then(response => {
+          this.list = response.list
+          this.total = response.count
+
+          // Just to simulate the time of the request
+          setTimeout(() => {
+            this.listLoading = false
+          }, 1.5 * 1000)
+        })
+        .catch(() => {
+          console.log('cathch')
+          this.listLoading = false
+        })
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleModifyStatus(row, status) {
+      this.$message({
+        message: '操作Success',
+        type: 'success'
+      })
+      row.status = status
+    },
+    sortChange(data) {
+      const { prop, order } = data
+      if (prop === 'id') {
+        this.sortByID(order)
+      }
+    },
+    sortByID(order) {
+      if (order === 'ascending') {
+        this.listQuery.sort = '+id'
+      } else {
+        this.listQuery.sort = '-id'
+      }
+      this.handleFilter()
+    },
+    resetTemp() {
+      this.temp = {
+        typeMenuName: '',
+        typeMenuOrder: 0
+      }
+    },
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          addKey(this.temp).then(() => {
+            this.getList()
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: 'Created Successfully',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleUpdate(row) {
+      this.dialogStatus = 'update'
+      this.temp = row
+      this.dialogFormVisible = true
+    },
+    updateData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp)
+          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
+          addKey(tempData).then(() => {
+            this.getList()
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: 'Update Successfully',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleDelete(row) {
+      this.$confirm('此操作将删除该类型, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {})
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+    },
+    getSortClass: function(key) {
+      const sort = this.listQuery.sort
+      return sort === `+${key}`
+        ? 'ascending'
+        : sort === `-${key}`
+          ? 'descending'
+          : ''
+    }
+  }
+}
+</script>