补充优化前端代码

Author: saleson

spring-cloud-gray-webui/src/api/api-request.js

@@ -0,0 +1,66 @@
+import request from '@/utils/request'
+
+export function fetchList(url, query) {
+  const tempData = Object.assign({}, query)
+  tempData.page = query.page - 1
+  tempData.size = query.limit
+  delete tempData['limit']
+  return request({
+    url: url,
+    method: 'get',
+    params: tempData
+  })
+}
+
+export function createRecord(url, data) {
+  return request({
+    url: url,
+    method: 'post',
+    data
+  })
+}
+
+export function updateRecord(url, data) {
+  return request({
+    url: url,
+    method: 'post',
+    data
+  })
+}
+
+export function deleteRecord(url, id) {
+  if (id) {
+    url = url + escape(id)
+  }
+  return request({
+    url: url,
+    method: 'delete'
+  })
+}
+
+export function recoverRecord(url, id) {
+  if (id) {
+    url = url + escape(id)
+  }
+  return request({
+    url: url,
+    method: 'patch'
+  })
+}
+
+export function putData(url, data) {
+  return request({
+    url: url,
+    method: 'put',
+    data
+  })
+}
+
+export function getData(url, query) {
+  const tempData = Object.assign({}, query)
+  return request({
+    url: url,
+    method: 'get',
+    params: tempData
+  })
+}

spring-cloud-gray-webui/src/components/SearchSelect/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="common-wrapper">
+    <el-select v-model="valueMeta" multiple collapse-tags placeholder="请选择标签">
+      <div class="el-input" style="width:90%;margin-left:5%;">
+        <input v-model="dropDownValue" type="text" placeholder="请输入" class="el-input__inner" @keyup="dropDownSearch">
+      </div>
+      <el-option v-for="item in optionsMetaShow" :value="item" />
+    </el-select>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dropDownValue: '',
+      optionsMetaAll: ['黄金糕', '双皮奶', '蚵仔煎', '双皮奶2', '龙须面', '北京烤鸭'],
+      optionsMetaShow: ['黄金糕', '双皮奶', '蚵仔煎', '双皮奶2', '龙须面', '北京烤鸭'],
+      valueMeta: []
+    }
+  },
+  methods: {
+    dropDownSearch() {
+      var _this = this
+      _this.valueMeta = []
+      _this.optionsMetaShow = _this.optionsMetaAll.filter(_this.filterSearch)
+    },
+    filterSearch(item) {
+      return item.includes(this.dropDownValue)
+    }
+  }
+}
+</script>
+<style lang="">
+  .el-scrollbar {
+    display: block !important;
+  }
+</style>

spring-cloud-gray-webui/src/views/authority/users.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+        Search
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+        Add
+      </el-button>
+      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
+        Export
+      </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="Id" prop="id" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="User Id" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.userId }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Authority" prop="authorityFlag" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.authorityFlag }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Operator" prop="operator" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.operator }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Operate Time" prop="operateTime" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.operateTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Actions" align="center" width="280" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <el-button size="mini" type="danger" @click="handleDelete(row)">
+            Delete
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getList" />
+
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 400px; margin-left:50px;">
+        <!--<el-form-item v-if="true" label="Service Id" prop="serviceId">
+          <el-input v-model="temp.serviceId" />
+        </el-form-item>-->
+        <el-form-item label="User Id" prop="userId">
+          <el-input v-model="temp.userId" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">
+          Cancel
+        </el-button>
+        <el-button type="primary" :disabled.sync="dialogFormConfirmDisabled" @click="dialogStatus==='create'?createData():updateData()">
+          Confirm
+        </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 { fetchList, createRecord, deleteRecord } from '@/api/api-request'
+import waves from '@/directive/waves' // waves directive
+import { parseTime } from '@/utils'
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+
+export default {
+  name: 'ComplexTable',
+  components: { Pagination },
+  directives: { waves },
+  data() {
+    return {
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        resource: this.$route.query.resource || '',
+        resourceId: this.$route.query.resourceId || '',
+        delFlag: false,
+        page: 1,
+        size: 10
+      },
+      importanceOptions: [1, 2, 3],
+      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
+      statusOptions: ['published', 'draft', 'deleted'],
+      showReviewer: false,
+      temp: {
+        resource: this.$route.query.resource || '',
+        resourceId: this.$route.query.resourceId || '',
+        userId: ''
+      },
+      dialogFormVisible: false,
+      dialogFormConfirmDisabled: false,
+      dialogStatus: '',
+      textMap: {
+        update: 'Edit',
+        create: 'Create'
+      },
+      dialogPvVisible: false,
+      pvData: [],
+      rules: {
+        userId: [{ required: true, message: 'userId is required', trigger: 'change' }]
+      },
+      downloadLoading: false,
+      tempRoute: {}
+    }
+  },
+  created() {
+    this.tempRoute = Object.assign({}, this.$route)
+    this.getList()
+    this.setTagsViewTitle()
+    this.setPageTitle()
+  },
+  methods: {
+    setPageTitle() {
+      var title = '权限'
+      if (this.listQuery.resourceId) {
+        title = title + '-' + this.listQuery.resource + '-' + this.listQuery.resourceId
+      }
+      document.title = `${title}`
+    },
+    setTagsViewTitle() {
+      var title = '权限'
+      if (this.listQuery.resourceId) {
+        title = title + '-' + this.listQuery.resource + '-' + this.listQuery.resourceId
+      }
+      const route = Object.assign({}, this.tempRoute, { title: `${title}` })
+      this.$store.dispatch('tagsView/updateVisitedView', route)
+      console.log(route)
+      console.log(this.$store.dispatch)
+    },
+    getList() {
+      this.listLoading = true
+      // this.listQuery.page = this.listQuery.page - 1
+      fetchList('/resourceAuthority/page', this.listQuery).then(response => {
+        this.list = response.data.items
+        this.total = response.data.total
+
+        // Just to simulate the time of the request
+        setTimeout(() => {
+          this.listLoading = false
+        }, 0.2 * 1000)
+      })
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.setTagsViewTitle()
+      this.setPageTitle()
+      this.getList()
+    },
+    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 = {
+        resource: this.$route.query.resource || '',
+        resourceId: this.$route.query.resourceId || '',
+        userId: ''
+      }
+    },
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.dialogFormConfirmDisabled = false
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.dialogFormConfirmDisabled = true
+
+          createRecord('/resourceAuthority/', this.temp).then(response => {
+            this.list.unshift(response.data)
+            this.dialogFormVisible = false
+            this.dialogFormConfirmDisabled = false
+            this.$notify({
+              title: 'Success',
+              message: 'Created Successfully',
+              type: 'success',
+              duration: 2000
+            })
+          }).catch(err => {
+            console.log(err)
+            this.dialogFormConfirmDisabled = false
+          })
+        }
+      })
+    },
+    handleDelete(row) {
+      this.$confirm('Confirm to remove the record?', 'Warning', {
+        confirmButtonText: 'Confirm',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      }).then(async() => {
+        deleteRecord('/resourceAuthority/?id=' + row.id).then(() => {
+          this.dialogFormVisible = false
+          for (const v of this.list) {
+            if (v.id === row.id) {
+              const index = this.list.indexOf(v)
+              this.list.splice(index, 1)
+              break
+            }
+          }
+          this.$notify({
+            title: 'Success',
+            message: 'Delete Successfully',
+            type: 'success',
+            duration: 2000
+          })
+        })
+      })
+    },
+    handleDownload() {
+      this.downloadLoading = true
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['Service Id', 'User Id']
+        const filterVal = ['serviceId', 'userId']
+        const data = this.formatJson(filterVal, this.list)
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          filename: 'gray-service-list'
+        })
+        this.downloadLoading = false
+      })
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => {
+        if (j === 'timestamp') {
+          return parseTime(v[j])
+        } else {
+          return v[j]
+        }
+      }))
+    }
+  }
+}
+</script>