系统参数配置

src/api/systemConfig.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+export function findPage(data) {
+  return request({
+    url: '/setting/systemConfig/findPage',
+    method: 'post',
+    data
+  })
+}
+
+export function updateById(id, data) {
+  return request({
+    url: '/setting/systemConfig/updateById',
+    method: 'post',
+    params: { id },
+    data
+  })
+}

src/router/index.js

@@ -96,9 +96,9 @@ export const asyncRoutes = [
     meta: { title: '设置', icon: 'el-icon-setting', authorities: ['system.config.find'] },
     children: [
       {
-        path: 'sysconfig',
-        name: 'SettingSysconfig',
-        component: () => import('@/views/dashboard/index'),
+        path: 'systemConfig',
+        name: 'SettingSystemConfig',
+        component: () => import('@/views/setting/systemConfig'),
         meta: { title: '系统设置', authorities: ['system.config.find'] }
       }
     ]

src/views/setting/systemConfig/DialogForm.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-dialog
+    v-if="visible"
+    width="900px"
+    :title="'修改['+form.name+']配置'"
+    :visible.sync="visible"
+  >
+    <el-form v-loading="isLoading" label-width="120px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="配置KEY">
+            <el-input v-model="form.configKey" autocomplete="off" disabled/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="名称">
+        <el-input v-model="form.name" autocomplete="off"/>
+      </el-form-item>
+      <el-form-item label="说明">
+        <el-input v-model="form.remark" type="textarea" autocomplete="off"/>
+      </el-form-item>
+      <el-form-item v-for="item in form.items" :key="item.id" :label="item.itemName">
+        <el-input v-model="item.itemValue">
+          <template slot="suffix">{{ item.itemKey }}</template>
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+import { updateById } from '@/api/systemConfig'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      isLoading: false,
+      form: {
+        permissions: ['login:1.0.0']
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    open(data) {
+      this.visible = true
+      this.form = Object.assign({}, data)
+    },
+    handleSubmit() {
+      console.log(this.form)
+      this.isLoading = true
+      updateById(this.form.id, this.form).then(() => {
+        this.visible = false
+        this.$emit('ok')
+      }).finally(() => {
+        this.isLoading = false
+      })
+    }
+  }
+}
+</script>

src/views/setting/systemConfig/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryForm" inline size="small">
+      <el-form-item label="AppKey">
+        <el-input v-model="queryForm.appKey" placeholder="AppKey" />
+      </el-form-item>
+      <el-form-item label="方法名">
+        <el-input v-model="queryForm.method" placeholder="方法名" />
+      </el-form-item>
+      <el-form-item label="版本号">
+        <el-input v-model="queryForm.version" placeholder="版本号" />
+      </el-form-item>
+      <el-form-item label="客户端IP">
+        <el-input v-model="queryForm.clientIp" placeholder="客户端IP" />
+      </el-form-item>
+      <el-form-item label="请求时间">
+        <el-date-picker
+          v-model="queryForm.serviceBeginTime"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+        />
+      </el-form-item>
+
+    </el-form>
+    <el-row class="action-bar-container" type="flex" justify="end">
+      <el-button type="primary" size="small" @click.native="fetchData">查询</el-button>
+    </el-row>
+    <el-table
+      v-loading="isLoading"
+      :data="pageData.records"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column label="配置KEY" prop="configKey" width="300" />
+      <el-table-column label="名称" prop="name" width="300" />
+      <el-table-column label="配置项" prop="name" width="300">
+        <template slot-scope="scope">
+          {{ (scope.row.items && scope.row.items.length) || 0 }}个
+        </template>
+      </el-table-column>
+      <el-table-column label="说明" prop="remark" min-width="300" />
+      <el-table-column label="操作" width="70" fixed="right">
+        <template slot-scope="scope">
+          <el-button v-permission="['system.config.edit']" type="text" size="small" @click.native="$refs.dialogForm.open(scope.row)">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      class="pagination-container"
+      background
+      layout="prev, pager, next"
+      :total="pageData.total"
+      :page-size="pageData.pageSize"
+      @current-change="paginationChange"
+    />
+    <dialog-form ref="dialogForm" @ok="fetchData" />
+  </div>
+</template>
+
+<script>
+import { findPage } from '@/api/systemConfig'
+import { dateTimeFormatter } from '@/utils/formater'
+import DialogForm from './DialogForm'
+
+export default {
+  components: { DialogForm },
+  data() {
+    return {
+      queryForm: {},
+      isLoading: true,
+      pageData: {},
+      currentPage: 1,
+      multipleSelection: []
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    dateTimeFormatter,
+    paginationChange(val) {
+      this.currentPage = val
+      this.fetchData()
+    },
+    fetchData() {
+      this.isLoading = true
+      findPage({ ...this.queryForm, current: this.currentPage })
+        .then((response) => {
+          this.pageData = response
+        })
+        .finally(() => (this.isLoading = false))
+    }
+  }
+}
+</script>