update

src/api/bz/base/venue.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function findPage(data) {
+  return request({
+    url: '/bz/base/venue/findPage',
+    method: 'post',
+    data
+  })
+}

src/api/table.js

@@ -1,9 +0,0 @@
-import request from '@/utils/request'
-
-export function getList(params) {
-  return request({
-    url: '/vue-admin-template/table/list',
-    method: 'get',
-    params
-  })
-}

src/api/upload.js

@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+
+if (!window.FileReader) {
+  console.error('Your browser does not support FileReader API!')
+}
+const fileReader = new FileReader()
+const baseApi = process.env.VUE_APP_BASE_API
+
+export function uploaderHandle(options) {
+  const file = options.file
+  const filename = file.name
+  if (file) {
+    fileReader.readAsDataURL(file)
+  }
+
+  fileReader.onload = () => {
+    const base64File = fileReader.result
+    request({
+      url: '/uploader/handle/base64File',
+      method: 'post',
+      data: { filename, base64File }
+    }).then(res => {
+      res.url = baseApi + '/src' + res.src
+      options.onSuccess(res, file)
+    }).catch(err => {
+      options.onError(err)
+    })
+  }
+}

src/router/index.js

@@ -33,23 +33,72 @@ import Layout from '@/layout'
 
 export const asyncRoutes = [
   {
+    path: '/bz/base',
+    component: Layout,
+    name: 'bz',
+    meta: {
+      title: '业务资源管理',
+      icon: 'el-icon-eleme',
+      authorities: ['bz.base.venue.find']
+    },
+    redirect: '/bz/base/venue',
+    children: [
+      {
+        path: 'venue',
+        name: 'BzBaseVenue',
+        component: () => import('@/views/bz/base/venue/index'),
+        meta: { title: '场馆', authorities: ['bz.base.venue.find'] }
+      },
+      {
+        path: 'scenery',
+        name: 'BzBaseScenery',
+        component: () => import('@/views/bz/base/scenery/index'),
+        meta: { title: '景区' }
+      },
+      {
+        path: 'holidayVillage',
+        name: 'BzBaseHolidayVillage',
+        component: () => import('@/views/bz/base/holidayVillage/index'),
+        meta: { title: '度假村' }
+      },
+      {
+        path: 'hotel',
+        name: 'BzBaseHotel',
+        component: () => import('@/views/bz/base/hotel/index'),
+        meta: { title: '酒店' }
+      },
+      {
+        path: 'homeStay',
+        name: 'BzBaseHomeStay',
+        component: () => import('@/views/bz/base/homeStay/index'),
+        meta: { title: '民宿' }
+      },
+      {
+        path: 'tourist',
+        name: 'BzBaseTourist',
+        component: () => import('@/views/bz/base/tourist/index'),
+        meta: { title: '旅行社' }
+      }
+    ]
+  },
+  {
     path: '/appKey',
     component: Layout,
     name: 'AppKey',
-    meta: { title: '接口', icon: 'el-icon-eleme' },
+    meta: { title: '接口', icon: 'el-icon-eleme', authorities: ['app.key.find', 'app.key.request.logs'] },
     redirect: '/appKey/index',
     children: [
       {
         path: 'index',
         name: 'AppKeyIndex',
         component: () => import('@/views/appKey/index'),
-        meta: { title: 'AppKey管理' }
+        meta: { title: 'AppKey管理', authorities: ['app.key.find'] }
       },
       {
         path: 'requestLogs',
         name: 'AppKeyRequestLogs',
         component: () => import('@/views/appKey/requestLogs'),
-        meta: { title: '调用日志' }
+        meta: { title: '调用日志', authorities: ['app.key.request.logs'] }
       }
     ]
   },

src/views/404.vue

@@ -14,7 +14,7 @@
         </div>
         <div class="bullshit__headline">{{ message }}</div>
         <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
-        <a href="/" class="bullshit__return-home">Back to home</a>
+        <a href="/" class="bullshit__return-home">返回首页</a>
       </div>
     </div>
   </div>

src/views/bz/base/holidayVillage/index.vue

@@ -0,0 +1,91 @@
+<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="AppKey" prop="appKey" width="150" />
+      <el-table-column label="方法名" prop="method" width="150" />
+      <el-table-column label="版本号" prop="version" width="150" />
+      <el-table-column label="客户端IP" prop="clientIp" width="150" />
+      <el-table-column label="请求时间" prop="serviceBeginTime" :formatter="dateTimeFormatter" width="160" />
+      <el-table-column label="响应时间" prop="serviceEndTime" :formatter="dateTimeFormatter" width="160" />
+      <el-table-column label="请求参数" prop="requestBody" min-width="300" />
+      <el-table-column label="返回结果" prop="responseData" min-width="300" />
+    </el-table>
+    <el-pagination
+      class="pagination-container"
+      background
+      layout="prev, pager, next"
+      :total="pageData.total"
+      :page-size="pageData.pageSize"
+      @current-change="paginationChange"
+    />
+  </div>
+</template>
+
+<script>
+import { findRequestLogsPage } from '@/api/appKey'
+import { dateTimeFormatter } from '@/utils/formater'
+
+export default {
+  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
+      findRequestLogsPage({ ...this.queryForm, current: this.currentPage })
+        .then((response) => {
+          this.pageData = response
+        })
+        .finally(() => (this.isLoading = false))
+    }
+  }
+}
+</script>

src/views/bz/base/homeStay/index.vue

@@ -0,0 +1,91 @@
+<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="AppKey" prop="appKey" width="150" />
+      <el-table-column label="方法名" prop="method" width="150" />
+      <el-table-column label="版本号" prop="version" width="150" />
+      <el-table-column label="客户端IP" prop="clientIp" width="150" />
+      <el-table-column label="请求时间" prop="serviceBeginTime" :formatter="dateTimeFormatter" width="160" />
+      <el-table-column label="响应时间" prop="serviceEndTime" :formatter="dateTimeFormatter" width="160" />
+      <el-table-column label="请求参数" prop="requestBody" min-width="300" />
+      <el-table-column label="返回结果" prop="responseData" min-width="300" />
+    </el-table>
+    <el-pagination
+      class="pagination-container"
+      background
+      layout="prev, pager, next"
+      :total="pageData.total"
+      :page-size="pageData.pageSize"
+      @current-change="paginationChange"
+    />
+  </div>
+</template>
+
+<script>
+import { findRequestLogsPage } from '@/api/appKey'
+import { dateTimeFormatter } from '@/utils/formater'
+
+export default {
+  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
+      findRequestLogsPage({ ...this.queryForm, current: this.currentPage })
+        .then((response) => {
+          this.pageData = response
+        })
+        .finally(() => (this.isLoading = false))
+    }
+  }
+}
+</script>

src/views/bz/base/hotel/index.vue

@@ -0,0 +1,91 @@
+<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="AppKey" prop="appKey" width="150" />
+      <el-table-column label="方法名" prop="method" width="150" />
+      <el-table-column label="版本号" prop="version" width="150" />
+      <el-table-column label="客户端IP" prop="clientIp" width="150" />
+      <el-table-column label="请求时间" prop="serviceBeginTime" :formatter="dateTimeFormatter" width="160" />
+      <el-table-column label="响应时间" prop="serviceEndTime" :formatter="dateTimeFormatter" width="160" />
+      <el-table-column label="请求参数" prop="requestBody" min-width="300" />
+      <el-table-column label="返回结果" prop="responseData" min-width="300" />
+    </el-table>
+    <el-pagination
+      class="pagination-container"
+      background
+      layout="prev, pager, next"
+      :total="pageData.total"
+      :page-size="pageData.pageSize"
+      @current-change="paginationChange"
+    />
+  </div>
+</template>
+
+<script>
+import { findRequestLogsPage } from '@/api/appKey'
+import { dateTimeFormatter } from '@/utils/formater'
+
+export default {
+  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
+      findRequestLogsPage({ ...this.queryForm, current: this.currentPage })
+        .then((response) => {
+          this.pageData = response
+        })
+        .finally(() => (this.isLoading = false))
+    }
+  }
+}
+</script>

src/views/bz/base/scenery/index.vue

@@ -0,0 +1,91 @@
+<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="AppKey" prop="appKey" width="150" />
+      <el-table-column label="方法名" prop="method" width="150" />
+      <el-table-column label="版本号" prop="version" width="150" />
+      <el-table-column label="客户端IP" prop="clientIp" width="150" />
+      <el-table-column label="请求时间" prop="serviceBeginTime" :formatter="dateTimeFormatter" width="160" />
+      <el-table-column label="响应时间" prop="serviceEndTime" :formatter="dateTimeFormatter" width="160" />
+      <el-table-column label="请求参数" prop="requestBody" min-width="300" />
+      <el-table-column label="返回结果" prop="responseData" min-width="300" />
+    </el-table>
+    <el-pagination
+      class="pagination-container"
+      background
+      layout="prev, pager, next"
+      :total="pageData.total"
+      :page-size="pageData.pageSize"
+      @current-change="paginationChange"
+    />
+  </div>
+</template>
+
+<script>
+import { findRequestLogsPage } from '@/api/appKey'
+import { dateTimeFormatter } from '@/utils/formater'
+
+export default {
+  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
+      findRequestLogsPage({ ...this.queryForm, current: this.currentPage })
+        .then((response) => {
+          this.pageData = response
+        })
+        .finally(() => (this.isLoading = false))
+    }
+  }
+}
+</script>

src/views/bz/base/tourist/index.vue

@@ -0,0 +1,91 @@
+<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="AppKey" prop="appKey" width="150" />
+      <el-table-column label="方法名" prop="method" width="150" />
+      <el-table-column label="版本号" prop="version" width="150" />
+      <el-table-column label="客户端IP" prop="clientIp" width="150" />
+      <el-table-column label="请求时间" prop="serviceBeginTime" :formatter="dateTimeFormatter" width="160" />
+      <el-table-column label="响应时间" prop="serviceEndTime" :formatter="dateTimeFormatter" width="160" />
+      <el-table-column label="请求参数" prop="requestBody" min-width="300" />
+      <el-table-column label="返回结果" prop="responseData" min-width="300" />
+    </el-table>
+    <el-pagination
+      class="pagination-container"
+      background
+      layout="prev, pager, next"
+      :total="pageData.total"
+      :page-size="pageData.pageSize"
+      @current-change="paginationChange"
+    />
+  </div>
+</template>
+
+<script>
+import { findRequestLogsPage } from '@/api/appKey'
+import { dateTimeFormatter } from '@/utils/formater'
+
+export default {
+  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
+      findRequestLogsPage({ ...this.queryForm, current: this.currentPage })
+        .then((response) => {
+          this.pageData = response
+        })
+        .finally(() => (this.isLoading = false))
+    }
+  }
+}
+</script>

src/views/bz/base/venue/DialogForm.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-dialog
+    v-if="visible"
+    :title="form.id?'编辑场馆':'新建场馆'"
+    :visible.sync="visible"
+    width="900px"
+  >
+    <el-form v-loading="isLoading" :model="form" label-width="100px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="名称">
+            <el-input v-model="form.name"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="开放时间">
+            <el-input v-model="form.businessHours"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="图片">
+        <el-upload
+          :file-list="fileList"
+          action="#"
+          list-type="picture-card"
+          name="fileData"
+          :http-request="uploaderHandle"
+          :on-success="uploadSuccess"
+          :auto-upload="true"
+        >
+          <i slot="default" class="el-icon-plus"/>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="描述">
+        <el-input v-model="form.describe" type="textarea"/>
+      </el-form-item>
+      <el-form-item label="简介">
+        <el-input v-model="form.brief" type="textarea"/>
+      </el-form-item>
+      <el-form-item label="地址">
+        <el-input v-model="form.address"/>
+      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="联系人">
+            <el-input v-model="form.contacts"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="联系电话">
+            <el-input v-model="form.contactNumber"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </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 { save, updateById } from '@/api/role'
+import { uploaderHandle } from '@/api/upload'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      isLoading: false,
+      listAllAuthorities: [],
+      form: {},
+      fileList: []
+    }
+  },
+  created() {
+  },
+  methods: {
+    uploaderHandle,
+    uploadSuccess(res, file, fileList) {
+      file.url = res.url
+      this.fileList = fileList
+    },
+    open(data) {
+      this.visible = true
+      // this.fileList = [{ url: 'http://127.0.0.1:9800/src/2022/01/25/2ce4b244c380c7e178f982bad02d844c.png' }]
+      this.form = Object.assign({}, data)
+    },
+    handleSubmit() {
+      console.log(this.form)
+      // this.isLoading = true
+      // if (this.form.id) {
+      //   updateById(this.form.id, this.form).then(() => {
+      //     this.visible = false
+      //     this.$emit('ok')
+      //   }).finally(() => {
+      //     this.isLoading = false
+      //   })
+      // } else {
+      //   save(this.form).then(res => {
+      //     this.visible = false
+      //     this.$emit('ok')
+      //   }).finally(() => {
+      //     this.isLoading = false
+      //   })
+      // }
+    }
+  }
+}
+</script>

src/views/bz/base/venue/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryForm" inline size="small">
+      <el-form-item label="关键词">
+        <el-input v-model="queryForm.appKey" placeholder="关键词"/>
+      </el-form-item>
+      <el-form-item label="联系电话">
+        <el-input v-model="queryForm.method" placeholder="联系电话"/>
+      </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-button-group>
+        <el-button v-permission="['bz.base.venue.add']" size="small" @click.native="$refs.dialogForm.open({})">
+          新建
+        </el-button>
+        <el-button v-permission="['bz.base.venue.delete']" size="small" @click.native="deleteByIds(multipleSelection)">
+          删除
+        </el-button>
+      </el-button-group>
+    </el-row>
+    <el-table
+      v-loading="isLoading"
+      :data="pageData.records"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column label="名称" prop="appKey" width="150"/>
+      <el-table-column label="缩略图" prop="method" width="150"/>
+      <el-table-column label="描述" prop="version" width="150"/>
+      <el-table-column label="简介" prop="clientIp" width="150"/>
+      <el-table-column label="地址" prop="serviceBeginTime" :formatter="dateTimeFormatter" width="160"/>
+      <el-table-column label="联系人" prop="serviceEndTime" :formatter="dateTimeFormatter" width="160"/>
+      <el-table-column label="联系电话" prop="requestBody" min-width="300"/>
+      <el-table-column label="位置信息" prop="responseData" min-width="300"/>
+    </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/bz/base/venue'
+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>

src/views/user/role/DialogForm.vue

@@ -3,17 +3,18 @@
     v-if="visible"
     title="收货地址"
     :visible.sync="visible"
+    width="900px"
   >
     <el-form v-loading="isLoading" :model="form" label-width="150px">
       <el-row>
         <el-col :span="12">
           <el-form-item label="角色名称">
-            <el-input v-model="form.name" autocomplete="off" />
+            <el-input v-model="form.name" autocomplete="off"/>
           </el-form-item>
         </el-col>
       </el-row>
       <el-form-item label="备注说明">
-        <el-input v-model="form.remark" type="textarea" autocomplete="off" />
+        <el-input v-model="form.remark" type="textarea" autocomplete="off"/>
       </el-form-item>
       <el-form-item v-for="authority in listAllAuthorities" :key="authority.id" :label="authority.remark">
         <el-checkbox-group v-model="form.listAuthorities">