新增页面，修改页面布局情况

mock/controller/colorfulIcon.js

+const data = [
+  'alphabetical_sorting',
+  'advance',
+  'address_book',
+  'alphabetical_sorting',
+  'advertising',
+  'alarm_clock',
+  'area_chart',
+  'approval',
+  'answers',
+  'approve',
+  'assistant',
+  'audio_file',
+  'automotive',
+  'automatic',
+  'bad_decision',
+  'bar_chart',
+  'bearish',
+  'biomass',
+  'biohazard',
+  'binoculars',
+  'bookmark',
+  'briefcase',
+  'biotech',
+  'broken_link',
+  'business',
+  'bullish',
+  'business_contact',
+  'businesswoman',
+  'cable_release',
+  'calculator',
+  'businessman',
+  'calendar',
+  'butting_in',
+  'call_transfer',
+  'callback',
+  'camcorder',
+  'camera',
+  'camcorder_pro',
+  'cancel',
+  'camera_addon',
+  'camera_identificatio',
+  'capacitor',
+  'candle_sticks',
+  'checkmark',
+  'circuit',
+  'charge_battery',
+  'clear_filters',
+  'clapperboard',
+  'clock',
+  'close_up_mode',
+  'collaboration',
+  'cell_phone',
+  'collapse',
+  'collect',
+  'cloth',
+  'combo_chart',
+  'comments',
+  'conference_call',
+  'compact_camera',
+  'contacts',
+  'copyleft',
+  'copyright',
+  'crystal_oscillator',
+  'cursor',
+  'currency_exchange',
+  'customer_support',
+  'dam',
+  'data_backup',
+  'data_configuration',
+  'data_encryption',
+  'data_protection',
+  'data_recovery',
+  'database',
+  'data_sheet',
+  'debt',
+  'decision',
+  'delete_column',
+  'delete_database',
+  'department',
+  'delete_row',
+  'deployment',
+  'dislike',
+  'disapprove',
+  'disclaimer',
+  'display',
+  'document',
+  'do_not_insert',
+  'do_not_mix',
+  'do_not_inhale',
+  'donate',
+  'down',
+  'doughnut_chart',
+  'down_left',
+  'down_right',
+  'download',
+  'edit_image',
+  'electrical_sensor',
+  'electrical_threshold',
+  'electricity',
+  'electro_devices',
+  'electronics',
+  'empty_battery',
+  'empty_filter',
+  'empty_trash',
+  'end_call',
+  'engineering',
+  'entering_heaven_aliv',
+  'expand',
+  'export',
+  'expired',
+  'factory',
+  'factory_breakdown',
+  'external',
+  'faq',
+  'feed_in',
+  'file',
+  'feedback',
+  'film',
+  'filled_filter',
+  'filing_cabinet',
+  'film_reel',
+  'flash_auto',
+  'fine_print',
+  'flash_off',
+  'flash_on',
+  'flow_chart',
+  'folder',
+  'frame',
+  'full_battery',
+  'full_trash',
+  'gallery',
+  'generic_sorting_asc',
+  'generic_sorting_desc',
+  'genealogy',
+  'globe',
+  'good_decision',
+  'headset',
+  'grid',
+  'graduation_cap',
+  'heat_map',
+  'high_priority',
+  'high_battery',
+  'image_file',
+  'home',
+  'idea',
+  'import',
+  'in_transit',
+  'integrated_webcam',
+  'inspection',
+  'invite',
+  'internal',
+  'ipad',
+  'info',
+  'iphone',
+  'kindle',
+  'key',
+  'landscape',
+  'left',
+  'left_down',
+  'left_up',
+  'leave',
+  'like_placeholder',
+  'light_at_the_end_of_',
+  'library',
+  'line_chart',
+  'link',
+  'like',
+  'lock',
+  'list',
+  'lock_landscape',
+  'low_battery',
+  'lock_portrait',
+  'low_priority',
+  'make_decision',
+  'medium_priority',
+  'manager',
+  'menu',
+  'middle_battery',
+  'minus',
+  'missed_call',
+  'mind_map',
+  'mms',
+  'multiple_cameras',
+  'money_transfer',
+  'music',
+  'multiple_devices',
+  'multiple_smartphones',
+  'multiple_inputs',
+  'negative_dynamic',
+  'neutral_decision',
+  'night_landscape',
+  'news',
+  'neutral_trading',
+  'night_portrait',
+  'no_idea',
+  'next',
+  'no_video',
+  'nook',
+  'ok',
+  'org_unit',
+  'opened_folder',
+  'old_time_camera',
+  'online_support',
+  'organization',
+  'package',
+  'paid',
+  'parallel_tasks',
+  'overtime',
+  'panorama',
+  'phone',
+  'phone_android',
+  'photo_reel',
+  'pie_chart',
+  'picture',
+  'planner',
+  'plus',
+  'podium_with_audience',
+  'podium_without_speak',
+  'podium_with_speaker',
+  'previous',
+  'portrait_mode',
+  'positive_dynamic',
+  'privacy',
+  'process',
+  'puzzle',
+  'questions',
+  'print',
+  'radar_plot',
+  'rating',
+  'ratings',
+  'reading',
+  'redo',
+  'reading_ebook',
+  'refresh',
+  'registered_trademark',
+  'right',
+  'reuse',
+  'remove_image',
+  'right_down',
+  'right_up',
+  'rotate_to_portrait',
+  'rules',
+  'rotate_camera',
+  'rotate_to_landscape',
+  'ruler',
+  'scatter_plot',
+  'search',
+  'safe',
+  'self_service_kiosk',
+  'selfie',
+  'serial_tasks',
+  'sales_performance',
+  'settings',
+  'services',
+  'share',
+  'shipped',
+  'sim_card',
+  'shop',
+  'service_mark',
+  'sim_card_chip',
+  'signature',
+  'smartphone_tablet',
+  'sound_recording_copy',
+  'sms',
+  'speaker',
+  'slr_back_side',
+  'start',
+  'stack_of_photos',
+  'statistics',
+  'sports_mode',
+  'support',
+  'synchronize',
+  'switch_camera',
+  'survey',
+  'tablet_android',
+  'template',
+  'trademark',
+  'todo_list',
+  'touchscreen_smartpho',
+  'timeline',
+  'tree_structure',
+  'undo',
+  'up_left',
+  'two_smartphones',
+  'unlock',
+  'up',
+  'up_right',
+  'upload',
+  'video_call',
+  'video_file',
+  'view_details',
+  'video_projector',
+  'vip',
+  'voice_presentation',
+  'webcam',
+  'voicemail',
+  'workflow',
+  'about',
+  'accept_database',
+  'add_image',
+  'add_column',
+  'add_database',
+  'add_row',
+]
+module.exports = [
+  {
+    url: '/colorfulIcon/getList',
+    type: 'get',
+    response(config) {
+      const { title, pageNo = 1, pageSize = 72 } = config.query
+      let mockList = data.filter((item) => {
+        if (title && item.indexOf(title) < 0) return false
+        return true
+      })
+      const pageList = mockList.filter(
+        (item, index) =>
+          index < pageSize * pageNo && index >= pageSize * (pageNo - 1)
+      )
+      return {
+        code: 200,
+        msg: 'success',
+        totalCount: mockList.length,
+        data: pageList,
+      }
+    },
+  },
+]

mock/controller/departmentManagement.js

+const List = [
+  {
+    id: 'root',
+    createTime: '@datetime',
+    name: '根节点',
+    order: 0,
+    children: [
+      {
+        id: '1',
+        parentId: 'root',
+        parentName: '根节点',
+        createTime: '@datetime',
+        name: '桃花坞',
+        order: 0,
+      },
+      {
+        id: '2',
+        parentId: 'root',
+        parentName: '根节点',
+        createTime: '@datetime',
+        name: '少林寺',
+        order: 1,
+        children: [
+          {
+            id: '@uuid',
+            parentId: '2',
+            parentName: '少林寺',
+            createTime: '@datetime',
+            name: '达摩院',
+            order: 0,
+          },
+          {
+            id: '@uuid',
+            parentId: '2',
+            parentName: '少林寺',
+            createTime: '@datetime',
+            name: '戒律堂',
+            order: 1,
+          },
+        ],
+      },
+    ],
+  },
+]
+
+module.exports = [
+  {
+    url: '/departmentManagement/getList',
+    type: 'get',
+    response: (config) => {
+      const { name, pageNo = 1, pageSize = 20 } = config.query
+
+      let mockList = List.filter((item) => {
+        return !(name && item.name.indexOf(name) < 0)
+      })
+      const pageList = mockList.filter(
+        (item, index) =>
+          index < pageSize * pageNo && index >= pageSize * (pageNo - 1)
+      )
+
+      return {
+        code: 200,
+        msg: 'success',
+        totalCount: mockList.length,
+        data: pageList,
+      }
+    },
+  },
+  {
+    url: '/departmentManagement/doEdit',
+    type: 'post',
+    response: () => {
+      return {
+        code: 200,
+        msg: '模拟保存成功',
+      }
+    },
+  },
+  {
+    url: '/departmentManagement/doDelete',
+    type: 'post',
+    response: () => {
+      return {
+        code: 200,
+        msg: '模拟删除成功',
+      }
+    },
+  },
+]

mock/controller/description.js

+const data = {
+  description:
+    ' 作者寄语：静坐常思己过，闲谈不论人非，vue-admin-beautiful-pro目前已支持5种布局、5种主题，共计25种风格无缝切换，支持三级路由以上缓存，提供最细致的权限处理，支持中英文切换，同时兼容电脑、平板、手机。',
+}
+
+module.exports = [
+  {
+    url: '/description/getList',
+    type: 'get',
+    response: () => {
+      return {
+        code: 200,
+        msg: 'success',
+        data,
+      }
+    },
+  },
+]

mock/controller/goods.js

+const List = [
+  {
+    uuid: '@uuid',
+    icon: 'file-pdf-line',
+    title: 'pdf打印',
+    price: '0',
+    type: '组件',
+    isRecommend: 1,
+  },
+]
+
+module.exports = [
+  {
+    url: '/goods/getList',
+    type: 'get',
+    response(config) {
+      const { title, pageNo = 1, pageSize = 20 } = config.query
+      let mockList = List.filter((item) => {
+        return !(title && item.title.indexOf(title) < 0)
+      })
+      const pageList = mockList.filter(
+        (item, index) =>
+          index < pageSize * pageNo && index >= pageSize * (pageNo - 1)
+      )
+      return {
+        code: 200,
+        msg: 'success',
+        totalCount: mockList.length,
+        data: pageList,
+      }
+    },
+  },
+]

mock/controller/menuManagement.js

+module.exports = [
+  {
+    url: '/menuManagement/getTree',
+    type: 'get',
+    response() {
+      return {
+        code: 200,
+        msg: 'success',
+        totalCount: 999,
+        data: [
+          {
+            id: 'root',
+            label: '全部角色',
+            children: [
+              {
+                id: '@id',
+                role: 'admin',
+                label: 'admin角色',
+              },
+              {
+                id: '@id',
+                role: 'editor',
+                label: 'editor角色',
+              },
+            ],
+          },
+        ],
+      }
+    },
+  },
+  {
+    url: '/menuManagement/doEdit',
+    type: 'post',
+    response() {
+      return {
+        code: 200,
+        msg: '模拟保存成功',
+      }
+    },
+  },
+  {
+    url: '/menuManagement/doDelete',
+    type: 'post',
+    response() {
+      return {
+        code: 200,
+        msg: '模拟删除成功',
+      }
+    },
+  },
+]

mock/controller/notice.js

+const data = [
+  {
+    email: '@email',
+    image: 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif',
+    notice: '官方QQ群1：972435319、官方QQ群2：1139183756',
+  },
+  {
+    email: '@email',
+    image: 'https://i.gtimg.cn/club/item/face/img/8/15918_100.gif',
+    notice:
+      "github开源地址：<a target='_blank' href='https://github.com/chuzhixin/vue-admin-beautiful'>https://github.com/chuzhixin/vue-admin-beautiful</a>",
+  },
+  {
+    email: '@email',
+    image: 'https://i.gtimg.cn/club/item/face/img/0/15640_100.gif',
+    notice:
+      "开源中国地址：<a target='_blank' href='https://www.oschina.net/p/vue-admin-beautiful'>https://www.oschina.net/p/vue-admin-beautiful</a>",
+  },
+  {
+    email: '@email',
+    image: 'https://i.gtimg.cn/club/item/face/img/9/15919_100.gif',
+    notice:
+      "gitee开源地址：<a target='_blank' href='https://gitee.com/chu1204505056/vue-admin-beautiful'>https://gitee.com/chu1204505056/vue-admin-beautiful</a>",
+  },
+  {
+    email: '@email',
+    image: 'https://i.gtimg.cn/club/item/face/img/8/15918_100.gif',
+    notice:
+      "vue3.0 体验地址：<a target='_blank' href='https://chu1204505056.gitee.io/vue-admin-beautiful-antdv'>'https://chu1204505056.gitee.io/vue-admin-beautiful-antdv</a>",
+  },
+]
+module.exports = [
+  {
+    url: '/notice/getList',
+    type: 'get',
+    response: () => {
+      return {
+        code: 200,
+        msg: 'success',
+        data,
+      }
+    },
+  },
+]

mock/controller/roleManagement.js

+const List = [
+  {
+    id: '@id',
+    role: 'admin',
+  },
+  {
+    id: '@id',
+    role: 'editor',
+  },
+]
+module.exports = [
+  {
+    url: '/roleManagement/getList',
+    type: 'get',
+    response(config) {
+      const { role, pageNo = 1, pageSize = 20 } = config.query
+      let mockList = List.filter((item) => {
+        return !(role && item.title.indexOf(role) < 0)
+      })
+      const pageList = mockList.filter(
+        (item, index) =>
+          index < pageSize * pageNo && index >= pageSize * (pageNo - 1)
+      )
+      return {
+        code: 200,
+        msg: 'success',
+        totalCount: mockList.length,
+        data: pageList,
+      }
+    },
+  },
+  {
+    url: '/roleManagement/doEdit',
+    type: 'post',
+    response() {
+      return {
+        code: 200,
+        msg: '模拟保存成功',
+      }
+    },
+  },
+  {
+    url: '/roleManagement/doDelete',
+    type: 'post',
+    response() {
+      return {
+        code: 200,
+        msg: '模拟删除成功',
+      }
+    },
+  },
+]

mock/controller/search.js

+const data = [
+  {
+    url: 'https://github.com/chuzhixin/vue-admin-beautiful',
+    value:
+      '中国最好用的框架企业级、中后台、通用型前端框架vue-admin-beautiful-pro',
+  },
+  {
+    url:
+      'https://www.baidu.com/s?wd=vue-admin-beautiful%E6%96%87%E6%A1%A3&rsv_spt=1&rsv_iqid=0xb8393f250000e09a&issp=1&f=3&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ts_0&oq=vue-admin-beautiful&rsv_t=780fn2RNJdwKpBcnXhafmyPjUPAduXDbHgYYngJ2QKBQluEnKOClb2r3SE4W%2BzhtF6fV&rsv_btype=t&inputT=459&rsv_sug3=5&rsv_sug1=5&rsv_sug7=100&rsv_pq=ed30ea5500032c4b&rsv_sug2=0&prefixsug=vue-admin-beautiful&rsp=0&rsv_sug4=1793',
+    value: 'vue-admin-beautiful文档',
+  },
+  {
+    url:
+      'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=beautiful.panm.cn&oq=beautiful.panm.cn&rsv_pq=bf312c2f00026019&rsv_t=a6b8%2Fo1W16TeYRYzViSwSXsVMosb255PaiEfKTXMKKNx0dwOtxpowxPYRP%2FJ%2BgMgtcAo&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=2&rsv_sug3=61&rsv_sug2=0&rsv_sug4=883&bs=beautiful.panm.cn',
+    value: 'vue-admin-beautiful官网',
+  },
+]
+module.exports = [
+  {
+    url: '/search/getList',
+    type: 'get',
+    response: () => {
+      return {
+        code: 200,
+        msg: 'success',
+        data,
+      }
+    },
+  },
+]

mock/controller/table.js

+const { mock } = require('mockjs')
+const { handleRandomImage } = require('../utils')
+const List = []
+const count = 50
+for (let i = 0; i < count; i++) {
+  List.push(
+    mock({
+      uuid: '@uuid',
+      id: '@id',
+      title: '@title(1, 2)',
+      description: '@csentence',
+      'status|1': ['published', 'draft', 'deleted'],
+      author: '@cname',
+      datetime: '@datetime',
+      pageViews: '@integer(300, 5000)',
+      img: handleRandomImage(228, 228),
+      switch: '@boolean',
+      percent: '@integer(80,99)',
+      'rate|1': [1, 2, 3, 4, 5],
+    })
+  )
+}
+
+module.exports = [
+  {
+    url: '/table/getList',
+    type: 'get',
+    response(config) {
+      const { title, pageNo = 1, pageSize = 20 } = config.query
+      let mockList = List.filter((item) => {
+        return !(title && item.title.indexOf(title) < 0)
+      })
+      const pageList = mockList.filter(
+        (item, index) =>
+          index < pageSize * pageNo && index >= pageSize * (pageNo - 1)
+      )
+      return {
+        code: 200,
+        msg: 'success',
+        totalCount: mockList.length,
+        data: pageList,
+      }
+    },
+  },
+  {
+    url: '/table/doEdit',
+    type: 'post',
+    response() {
+      return {
+        code: 200,
+        msg: '模拟保存成功',
+      }
+    },
+  },
+  {
+    url: '/table/doDelete',
+    type: 'post',
+    response() {
+      return {
+        code: 200,
+        msg: '模拟删除成功',
+      }
+    },
+  },
+]

mock/controller/user.js

+const accessTokens = {
+  admin: 'admin-accessToken',
+  editor: 'editor-accessToken',
+  test: 'test-accessToken',
+}
+
+module.exports = [
+  {
+    url: '/publicKey',
+    type: 'post',
+    response() {
+      return {
+        code: 200,
+        msg: 'success',
+        data: {
+          mockServer: true,
+          publicKey:
+            'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDBT2vr+dhZElF73FJ6xiP181txKWUSNLPQQlid6DUJhGAOZblluafIdLmnUyKE8mMHhT3R+Ib3ssZcJku6Hn72yHYj/qPkCGFv0eFo7G+GJfDIUeDyalBN0QsuiE/XzPHJBuJDfRArOiWvH0BXOv5kpeXSXM8yTt5Na1jAYSiQ/wIDAQAB',
+        },
+      }
+    },
+  },
+  {
+    url: '/login',
+    type: 'post',
+    response(config) {
+      const { username } = config.body
+      const accessToken = accessTokens[username]
+      if (!accessToken) {
+        return {
+          code: 500,
+          msg: '帐户或密码不正确',
+        }
+      }
+      return {
+        code: 200,
+        msg: 'success',
+        data: { accessToken },
+      }
+    },
+  },
+  {
+    url: '/socialLogin',
+    type: 'post',
+    response(config) {
+      const { code } = config.body
+      if (!code) {
+        return {
+          code: 500,
+          msg: '未成功获取Token',
+        }
+      }
+      return {
+        code: 200,
+        msg: 'success',
+        data: { accessToken: accessTokens['admin'] },
+      }
+    },
+  },
+  {
+    url: '/register',
+    type: 'post',
+    response() {
+      return {
+        code: 200,
+        msg: '模拟注册成功',
+      }
+    },
+  },
+  {
+    url: '/userInfo',
+    type: 'post',
+    response(config) {
+      const { accessToken } = config.body
+      let roles = ['admin']
+      let ability = ['READ']
+      let username = 'admin'
+      if ('admin-accessToken' === accessToken) {
+        roles = ['admin']
+        ability = ['READ', 'WRITE', 'DELETE']
+        username = 'admin'
+      }
+      if ('editor-accessToken' === accessToken) {
+        roles = ['editor']
+        ability = ['READ', 'WRITE']
+        username = 'editor'
+      }
+      if ('test-accessToken' === accessToken) {
+        roles = ['admin', 'editor']
+        ability = ['READ']
+        username = 'test'
+      }
+      return {
+        code: 200,
+        msg: 'success',
+        data: {
+          roles,
+          ability,
+          username,
+          'avatar|1': [
+            'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif',
+            'https://i.gtimg.cn/club/item/face/img/8/15918_100.gif',
+          ],
+        },
+      }
+    },
+  },
+  {
+    url: '/logout',
+    type: 'post',
+    response() {
+      return {
+        code: 200,
+        msg: 'success',
+      }
+    },
+  },
+]

mock/controller/userManagement.js

+const List = [
+  {
+    id: '@id',
+    username: 'admin',
+    password: 'admin',
+    email: '@email',
+    roles: ['admin'],
+    datatime: '@datetime',
+  },
+  {
+    id: '@id',
+    username: 'editor',
+    password: 'editor',
+    email: '@email',
+    roles: ['editor'],
+    datatime: '@datetime',
+  },
+  {
+    id: '@id',
+    username: 'test',
+    password: 'test',
+    email: '@email',
+    roles: ['admin', 'editor'],
+    datatime: '@datetime',
+  },
+]
+module.exports = [
+  {
+    url: '/userManagement/getList',
+    type: 'get',
+    response(config) {
+      const { username, pageNo = 1, pageSize = 20 } = config.query
+      let mockList = List.filter((item) => {
+        return !(username && item.username.indexOf(username) < 0)
+      })
+      const pageList = mockList.filter(
+        (item, index) =>
+          index < pageSize * pageNo && index >= pageSize * (pageNo - 1)
+      )
+      return {
+        code: 200,
+        msg: 'success',
+        totalCount: mockList.length,
+        data: pageList,
+      }
+    },
+  },
+  {
+    url: '/userManagement/doEdit',
+    type: 'post',
+    response() {
+      return {
+        code: 200,
+        msg: '模拟保存成功',
+      }
+    },
+  },
+  {
+    url: '/userManagement/doDelete',
+    type: 'post',
+    response() {
+      return {
+        code: 200,
+        msg: '模拟删除成功',
+      }
+    },
+  },
+]

mock/index.js

+/**
+ * @description 导入所有 controller 模块，npm run serve时在node环境中自动输出controller文件夹下Mock接口，请勿修改。
+ */
+
+const { handleMockArray } = require('./utils')
+
+const mocks = []
+const mockArray = handleMockArray()
+mockArray.forEach((item) => {
+  const obj = require(item)
+  mocks.push(...obj)
+})
+module.exports = {
+  mocks,
+}

mock/mockServer.js

+const chokidar = require("chokidar");
+const bodyParser = require("body-parser");
+const chalk = require("chalk");
+const path = require("path");
+const Mock = require("mockjs");
+const { baseURL } = require("../src/config");
+const mockDir = path.join(process.cwd(), "mock");
+
+/**
+ *
+ * @param app
+ * @returns {{mockStartIndex: number, mockRoutesLength: number}}
+ */
+const registerRoutes = (app) => {
+  let mockLastIndex;
+  const { mocks } = require("./index.js");
+  const mocksForServer = mocks.map((route) => {
+    return responseFake(route.url, route.type, route.response);
+  });
+  for (const mock of mocksForServer) {
+    app[mock.type](mock.url, mock.response);
+    mockLastIndex = app._router.stack.length;
+  }
+  const mockRoutesLength = Object.keys(mocksForServer).length;
+  return {
+    mockRoutesLength: mockRoutesLength,
+    mockStartIndex: mockLastIndex - mockRoutesLength,
+  };
+};
+
+/**
+ *
+ * @param url
+ * @param type
+ * @param respond
+ * @returns {{response(*=, *=): void, type: (*|string), url: RegExp}}
+ */
+const responseFake = (url, type, respond) => {
+  return {
+    url: new RegExp(`${baseURL}${url}`),
+    type: type || "get",
+    response(req, res) {
+      res.status(200);
+      if (JSON.stringify(req.body) !== "{}") {
+        console.log(chalk.green(`> 请求地址：${req.path}`));
+        console.log(chalk.green(`> 请求参数：${JSON.stringify(req.body)}\n`));
+      } else {
+        console.log(chalk.green(`> 请求地址：${req.path}\n`));
+      }
+      res.json(
+        Mock.mock(respond instanceof Function ? respond(req, res) : respond)
+      );
+    },
+  };
+};
+/**
+ *
+ * @param app
+ */
+module.exports = (app) => {
+  app.use(bodyParser.json());
+  app.use(
+    bodyParser.urlencoded({
+      extended: true,
+    })
+  );
+
+  const mockRoutes = registerRoutes(app);
+  let mockRoutesLength = mockRoutes.mockRoutesLength;
+  let mockStartIndex = mockRoutes.mockStartIndex;
+  chokidar
+    .watch(mockDir, {
+      ignored: /mock-server/,
+      ignoreInitial: true,
+    })
+    .on("all", (event) => {
+      if (event === "change" || event === "add") {
+        try {
+          app._router.stack.splice(mockStartIndex, mockRoutesLength);
+
+          Object.keys(require.cache).forEach((item) => {
+            if (item.includes(mockDir)) {
+              delete require.cache[require.resolve(item)];
+            }
+          });
+          const mockRoutes = registerRoutes(app);
+          mockRoutesLength = mockRoutes.mockRoutesLength;
+          mockStartIndex = mockRoutes.mockStartIndex;
+        } catch (error) {
+          console.log(chalk.red(error));
+        }
+      }
+    });
+};

mock/utils/index.js

+const { Random } = require('mockjs')
+const { join } = require('path')
+const fs = require('fs')
+
+/**
+ * @description 随机生成图片url。
+ * @param width
+ * @param height
+ * @returns {string}
+ */
+function handleRandomImage(width = 50, height = 50) {
+  return `https://picsum.photos/${width}/${height}?random=${Random.guid()}`
+}
+
+/**
+ * @description 处理所有 controller 模块，npm run serve时在node环境中自动输出controller文件夹下Mock接口，请勿修改。
+ * @returns {[]}
+ */
+function handleMockArray() {
+  const mockArray = []
+  const getFiles = (jsonPath) => {
+    const jsonFiles = []
+    const findJsonFile = (path) => {
+      const files = fs.readdirSync(path)
+      files.forEach((item) => {
+        const fPath = join(path, item)
+        const stat = fs.statSync(fPath)
+        if (stat.isDirectory() === true) findJsonFile(item)
+        if (stat.isFile() === true) jsonFiles.push(item)
+      })
+    }
+    findJsonFile(jsonPath)
+    jsonFiles.forEach((item) => mockArray.push(`./controller/${item}`))
+  }
+  getFiles('mock/controller')
+  return mockArray
+}
+module.exports = {
+  handleRandomImage,
+  handleMockArray,
+}

plopfile.js

 const viewGenerator = require('zx-templates/view/prompt')
 const curdGenerator = require('zx-templates/curd/prompt')
 const componentGenerator = require('zx-templates/component/prompt')
-//const mockGenerator = require('zx-templates/mock/prompt')
+const mockGenerator = require('zx-templates/mock/prompt')
 const vuexGenerator = require('zx-templates/vuex/prompt')
 
 module.exports = (plop) => {
   plop.setGenerator('view', viewGenerator)
   plop.setGenerator('curd', curdGenerator)
   plop.setGenerator('component', componentGenerator)
-  //plop.setGenerator('mock&api', mockGenerator)
+  plop.setGenerator('mock&api', mockGenerator)
   plop.setGenerator('vuex', vuexGenerator)
 }

src/assets/common.scss

+.page{
+  box-sizing: border-box;
+  padding: 20px;
+}
+.labelCls{
+  width: 140px !important;
+}

src/config/default/setting.config.js

@@ -14,6 +14,7 @@ const setting = {
   transpileDependencies: ['vue-echarts', 'resize-detector'],
   //默认的接口地址 如果是开发环境和生产环境走vab-mock-server，当然你也可以选择自己配置成需要的接口地址
   baseURL:process.env.NODE_ENV === 'development' ? 'api' : '',
+  //baseURL:process.env.NODE_ENV === 'development' ? 'mock-server' : '',
   //标题 （包括初次加载雪花屏的标题 页面的标题 浏览器的标题）
   title: '丽人贷管理后台',
   //标题分隔符

src/main.js

@@ -6,6 +6,8 @@ import router from './router'
 import '@/vab'
 import Minix from '@/minix/index'
 
+import '@/assets/common.scss'
+
 
 
 // 全局混入

src/router/index.js

@@ -33,11 +33,6 @@ export const constantRoutes = [
     component: () => import('@/views/login'),
     hidden: true,
   },
-  {
-    path: '/register',
-    component: () => import('@/views/register'),
-    hidden: true,
-  },
   {
     path: '/callback',
     component: () => import('@/views/callback'),
@@ -64,8 +59,7 @@ export const asyncRoutes = [
     redirect: '/index',
     meta: {
       title: '首页',
-      remixIcon: 'home-4-line',
-      affix: true,
+      remixIcon: 'home-4-line'
     },
     children: [
       {
@@ -74,144 +68,167 @@ export const asyncRoutes = [
         component: () => import('@/views/index'),
         meta: {
           title: '首页',
-          remixIcon: 'home-4-line',
-          affix: true,
+          affix: true
         },
       },
     ],
   },
   {
-    path: '/merchant',
-    name: 'DeviceManagement',
+    path: '/credit',
+    name: 'CreditManagement',
     component: Layout,
-    redirect: '/merchant/list',
+    redirect: '/credit/pre',
     meta: {
-      title: '机构管理'
+      title: '授信管理',
+      remixIcon: 'home-4-line'
     },
     children: [
       {
-        path: 'list',
-        name: 'MerchantList',
-        component: () => import('@/views/merchant/list'),
+        path: 'pre',
+        name: 'CreditPre',
+        component: () => import('@/views/credit/pre'),
         meta: {
-          title: '机构列表',
-          remixIcon: 'building-line',
+          title: '预授信审核'
         },
       },
       {
-        path: 'new',
-        name: 'MerchantNew',
-        component: () => import('@/views/merchant/new'),
+        path: 'list',
+        name: 'CreditList',
+        component: () => import('@/views/credit/list'),
         meta: {
-          title: '新增机构'
+          title: '授信审核'
         },
-        hidden:true
-      }
-    ],
-  },
-  {
-    path: '/prod',
-    name: 'prod',
-    component: Layout,
-    redirect: '/prod/list',
-    meta: {
-      title: '产品列表'
       },
-    children: [
       {
-        path: 'list',
-        name: 'ProdList',
-        component: () => import('@/views/prod/list'),
+        path: 'order',
+        name: 'CreditOrder',
+        component: () => import('@/views/credit/order'),
         meta: {
-          title: '产品列表',
-          remixIcon: 'product-hunt-line',
+          title: '我的审批'
         },
       },
       {
-        path: 'new',
-        name: 'ProdNew',
-        component: () => import('@/views/prod/new'),
+        path: 'detail',
+        name: 'CreditDetail',
+        component: () => import('@/views/credit/detail'),
         meta: {
-          title: '产品新增'
+          title: '授信详情',
+          remixIcon: 'building-line',
+          tagHidden:true
         },
-        hidden: true
+        hidden: true,
+
       },
       {
-        path: 'edit',
-        name: 'ProdEdit',
-        component: () => import('@/views/prod/edit'),
+        path: 'pre-detail',
+        name: 'CreditPreDetail',
+        component: () => import('@/views/credit/pre-detail'),
         meta: {
-          title: '产品详情'
+          title: '预授信详情',
+          remixIcon: 'building-line',
+          tagHidden:true
         },
         hidden: true
       }
     ],
   },
   {
-    path: '/apply',
-    name: 'apply',
+    path: '/approval',
+    name: 'approval',
     component: Layout,
-    redirect: '/apply/list',
+    redirect: '/approval/order',
     meta: {
-      title: '申请管理'
+      title: '审批管理',
+      remixIcon: 'home-4-line'
     },
     children: [
       {
-        path: 'list',
-        name: 'ApplyList',
-        component: () => import('@/views/apply/list'),
+        path: 'order',
+        name: 'ApprovalList',
+        component: () => import('@/views/approval/order'),
         meta: {
-          title: '申请列表',
-          remixIcon: 'task-line'
+          title: '我的订单',
+          remixIcon: 'product-hunt-line',
+        },
       },
+      //{
+      //  path: 'order1',
+      //  name: 'ApprovalList',
+      //  component: () => import('@/views/approval/order1'),
+      //  meta: {
+      //    title: '我的订单2',
+      //    remixIcon: 'product-hunt-line',
+      //  },
+      //},
+      {
+        path: 'detail',
+        name: 'ApprovalDetail',
+        component: () => import('@/views/approval/detail'),
+        meta: {
+          title: '详情',
+          remixIcon: 'product-hunt-line',
+        },
+        hidden: true
       }
     ],
   },
   {
-    path: '/notice',
-    name: 'notice',
+    path: '/loan',
+    name: 'loan',
     component: Layout,
-    redirect: '/notice/list',
+    redirect: '/loan/list',
     meta: {
-      title: '公告管理'
+      title: '借款管理',
+      remixIcon: 'home-4-line'
     },
     children: [
       {
         path: 'list',
-        name: 'NoticeList',
-        component: () => import('@/views/notice/list'),
+        name: 'loanList',
+        component: () => import('@/views/loan/list'),
         meta: {
-          title: '公告列表',
-          remixIcon: 'notification-3-line'
+          title: '借款列表',
+          remixIcon: 'task-line'
         },
       },
       {
-        path: 'new',
-        name: 'NoticeNew',
-        component: () => import('@/views/notice/new'),
+        path: 'detail',
+        name: 'loanDetail',
+        component: () => import('@/views/loan/detail'),
         meta: {
-          title: '公告新增'
+          title: '借款详情',
+          remixIcon: 'task-line'
         },
         hidden: true
-      }
+      },
+      {
+        path: 'order',
+        name: 'loanOrder',
+        component: () => import('@/views/loan/order'),
+        meta: {
+          title: '放款列表',
+          remixIcon: 'task-line'
+        },
+      },
     ],
   },
   {
-    path: '/app',
-    name: 'app',
+    path: '/admin',
+    name: 'admin',
     component: Layout,
-    redirect: '/app/setting',
+    redirect: '/admin/user',
     meta: {
-      title: 'APP管理'
+      title: '系统管理',
+      remixIcon: 'home-4-line'
     },
     children: [
       {
-        path: 'setting',
-        name: 'AppSetting',
-        component: () => import('@/views/app/setting'),
+        path: 'user',
+        name: 'AdminUser',
+        component: () => import('@/views/admin/user'),
         meta: {
-          title: 'APP设置',
-          remixIcon: 'settings-line'
+          title: '用户管理',
+          remixIcon: 'notification-3-line'
         },
       }
     ],
@@ -255,7 +272,7 @@ export const asyncRoutes = [
     component: Layout,
     redirect: '/vab/icon/remixIcon',
     alwaysShow: true,
-    hidden: true,
+    hidden: false,
     meta: {
       title: '组件参考',
       remixIcon: 'code-box-line',

src/store/modules/routes.js

@@ -21,12 +21,6 @@ const mutations = {
   }
 };
 const actions = {
-  /**
-   * @description 多模式设置路由
-   * @param {*} { commit }
-   * @param mode
-   * @returns
-   */
   async setRoutes({ commit }, mode) {
     let routes = asyncRoutes;
     if (mode === "all") {

src/store/modules/user.js

@@ -80,6 +80,7 @@ const actions = {
    * @returns
    */
   async getUserInfo({ commit, dispatch, state }) {
+    try{
       const result = await API.userInfo();
       if(result.success){
         const {avatar,nickName} = result.result;
@@ -87,7 +88,13 @@ const actions = {
         commit("setAvatar", avatar);
         // 当不传递roles或ability时,默认使用管理员权限,可查看所有路由和按钮
         dispatch("acl/setFull", true, { root: true });
+      }else{
+
+      }
+    }catch (e){
+      throw new Error('bao cuo')
     }
+
     //let { username, avatar, roles, ability } = state.user;
     //if (username && avatar) {
     //  commit("setUsername", userName);

src/utils/request.js

 import Vue from "vue";
 import axios from "axios";
 import {
+  baseURL,
   contentType,
   debounce,
   requestTimeout,
@@ -89,6 +90,7 @@ const handleData = ({ config, data, status, statusText }) => {
  */
 const instance = axios.create({
   baseURL: API_URL,
+  //baseURL,
   timeout: requestTimeout,
   withCredentials: true,
   headers: {
@@ -146,7 +148,12 @@ instance.interceptors.response.use(
         "error"
       );
       return {};
-    } else return handleData(response);
+    } else {
+      console.log(response,'返回结果');
+      //throw new Error(response)
+      return handleData(response);
+
+    }
   }
 );
 

src/vab/plugins/permissions.js

@@ -42,12 +42,15 @@ router.beforeEach(async (to, from, next) => {
           if (loginInterception) await store.dispatch("user/getUserInfo");
           //settings.js loginInterception为false（关闭登录拦截时）时，创建虚拟角色
           else await store.dispatch("user/setVirtualRoles");
+
+
           //根据路由模式添加路由
           router.addRoutes(
             await store.dispatch("routes/setRoutes", authentication)
           );
           next({ ...to, replace: true });
-        } catch(err) {
+        }
+        catch(err) {
           console.log(err,'啥错误');
           await store.dispatch("user/resetAll");
           if (recordRoute && to.path !== "/") {
@@ -61,7 +64,8 @@ router.beforeEach(async (to, from, next) => {
           }
         }
       }
-    } else {
+    }
+    else {
       if (recordRoute && to.path !== "/")
         next({ path: "/login", query: { redirect: to.path }, replace: true });
       else next({ path: "/login", replace: true });

src/views/approval/order1.vue

+<template>
+  <div class="page-fence">
+    <!--搜索-->
+    <block-header title="搜索" />
+    <div class="search">
+      <el-form
+        label-suffix=":"
+        :inline="true"
+        :model="queryForm"
+        class="form-inline"
+      >
+        <el-form-item label="机构编号">
+          <el-input
+            v-model="queryForm.tenantNo"
+            clearable
+            placeholder="请输入机构编号"
+          />
+        </el-form-item>
+        <el-form-item label="产品名称">
+          <el-input
+            v-model="queryForm.appName"
+            clearable
+            placeholder="请输入机构名称"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            icon="el-icon-search"
+            type="primary"
+            @click="onSubmit"
+          >
+            搜 索
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!--操作菜单栏-->
+    <block-header title="产品列表" />
+    <div
+      v-if="true"
+      class="action-bar"
+    >
+      <div class="action-bar-left">
+        <router-link to="/prod/new">
+          <el-button
+            icon="el-icon-plus"
+            type="primary"
+            size="mini"
+          >
+            新增产品
+          </el-button>
+        </router-link>
+      </div>
+      <div class="action-bar-right" />
+    </div>
+
+
+    <!--表格-->
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      border
+      size="small"
+      :data="list"
+      style="width: 100%"
+    >
+      <el-table-column
+        v-for="(item, index) in finallyColumns"
+        :key="index"
+        align="center"
+        :label="item.label"
+        :sortable="item.sortable"
+        :width="item.width"
+        :fixed="!!item.fixed"
+        :show-overflow-tooltip="!!item.overflow"
+      >
+        <template #default="{ row }">
+          <div v-if="item.label==='LOGO'">
+            <el-image
+              style="width: 50px; height: 35px"
+              :src="row[item.prop]"
+              fit="fit"
+            />
+          </div>
+          <div v-else-if="item.label==='产品状态'">
+            <el-tag
+              v-if="row[item.prop] === '1'"
+              type="success"
+              size="mini"
+            >
+              启用
+            </el-tag>
+            <el-tag
+              v-else
+              type="info"
+              size="mini"
+            >
+              禁用
+            </el-tag>
+          </div>
+          <span v-else>{{ row[item.prop] }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        width="170"
+        fixed="right"
+        align="center"
+        label="操作"
+      >
+        <template #default="{ row }">
+          <el-button
+            v-if="row.status==='1'"
+            size="mini"
+            type="danger"
+            @click="handleClick(row)"
+          >
+            禁用
+          </el-button>
+          <el-button
+            v-else
+            size="mini"
+            type="success"
+            @click="handleClick(row)"
+          >
+            启用
+          </el-button>
+          <el-button
+            size="mini"
+            type="primary"
+            @click="handleView(row)"
+          >
+            详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :current-page="queryForm.current"
+      :layout="layout"
+      :page-size="queryForm.size"
+      :total="total"
+      background
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import { doDelete, getList } from "@/api/table";
+import API from "@/server/api";
+
+export default {
+  name: "Fence",
+  data() {
+    return {
+      checkList: ["产品等级", "产品编号", "产品名称", "LOGO", "机构编号", "产品状态", "对接方式", "创建时间"],
+      columns: [
+        {
+          order: 1,
+          label: "产品等级",
+          prop: "gradeSort"
+        },
+        {
+          order: 2,
+          label: "产品编号",
+          prop: "appNo"
+        },
+        {
+          order: 3,
+          label: "产品名称",
+          prop: "appName"
+        },
+        {
+          order: 4,
+          label: "LOGO",
+          prop: "appLogo"
+        },
+        {
+          order: 5,
+          label: "机构编号",
+          prop: "tenantNo",
+          overflow: true
+        },
+        {
+          order: 6,
+          label: "产品状态",
+          prop: "status"
+        },
+        {
+          order: 7,
+          label: "对接方式",
+          prop: "abutmentWay"
+        },
+        {
+          order: 8,
+          width: 170,
+          label: "创建时间",
+          prop: "gmtCreated"
+        }
+      ],
+      list: [],
+      listLoading: true,
+      layout: "total, sizes, prev, pager, next, jumper",
+      total: 0,
+      queryForm: {
+        current: 1,
+        size: 10,
+        status: "",
+        appName: "",
+        tenantNo: ""
+      }
+    };
+  },
+  computed: {
+    finallyColumns() {
+      let finallyArray = [];
+      this.checkList.forEach((checkItem) => {
+        finallyArray.push(
+          this.columns.filter((item) => item.label === checkItem)[0]
+        );
+      });
+      return _.sortBy(finallyArray, (item) => item.order);
+      //return finallyArray;
+    }
+  },
+  created() {
+    //防止三级以上路由时多次走created
+    if (this.$route.name === this.$options.name) this.fetchData();
+  },
+  mounted() {
+    this.fetchData();
+  },
+  methods: {
+    onSubmit() {
+      this.fetchData();
+    },
+    handleView(row) {
+      const { appNo } = row;
+      this.$router.push({
+        path: "/prod/new",
+        query: { appNo }
+      });
+    },
+    handleSizeChange(val) {
+      this.queryForm.size = val;
+      this.fetchData();
+    },
+    handleCurrentChange(val) {
+      this.queryForm.current = val;
+      this.fetchData();
+    },
+    handleQuery() {
+      this.queryForm.current = 1;
+      this.fetchData();
+    },
+    async fetchData() {
+      this.listLoading = true;
+      const result = await API.prod_list(this.queryForm);
+      const { records, total } = result.result;
+      this.list = records;
+      this.total = total;
+      this.listLoading = false;
+    },
+    async handleClick(row) {
+      console.log(row, "我知道");
+      let { appNo, status } = row;
+      status = status === "1" ? "2" : "1";
+      this.$confirm(`此操作将变更该产品状态, 是否继续?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(async () => {
+        const result = await API.prod_switch_upDown({
+          appNo,
+          status
+        });
+
+        if (result.success) {
+          this.$message.success("操作成功");
+          await this.fetchData();
+        }
+
+      });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.page-fence {
+  ::v-deep {
+    i {
+      cursor: pointer;
+    }
+  }
+
+  box-sizing: border-box;
+  padding: 20px;
+}
+</style>
+<style lang="scss">
+.custom-table-checkbox {
+  .el-checkbox {
+    display: block !important;
+    margin: 0 0 $base-padding/4 0;
+  }
+}
+
+.action-bar {
+  margin-bottom: 15px;
+}
+</style>

src/views/credit/components/CreditDetail.vue

+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogFormVisible"
+    width="500px"
+    @close="close"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+    >
+      <el-form-item
+        label="标题"
+        prop="title"
+      >
+        <el-input v-model.trim="form.title" />
+      </el-form-item>
+      <el-form-item
+        label="作者"
+        prop="author"
+      >
+        <el-input v-model.trim="form.author" />
+      </el-form-item>
+    </el-form>
+    <div
+      slot="footer"
+      class="dialog-footer"
+    >
+      <el-button @click="close">
+        取 消
+      </el-button>
+      <el-button
+        type="primary"
+        @click="save"
+      >
+        确 定
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit } from '@/api/table'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        form: {
+          title: '',
+          author: '',
+        },
+        rules: {
+          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
+          author: [{ required: true, trigger: 'blur', message: '请输入作者' }],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    created() {},
+    methods: {
+      showEdit(row) {
+        if (!row) {
+          this.title = '添加'
+        } else {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        this.$emit('fetch-data')
+      },
+      save() {
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { msg } = await doEdit(this.form)
+            this.$baseMessage(msg, 'success')
+            this.$refs['form'].resetFields()
+            this.dialogFormVisible = false
+            this.$emit('fetch-data')
+            this.form = this.$options.data().form
+          } else {
+            return false
+          }
+        })
+      },
+    },
+  }
+</script>

src/views/credit/components/pre-operation-log.vue

+<template>
+  <div>
+    <block-header title='操作日志' />
+    <!--表格-->
+    <el-table
+      ref="tableSort"
+      v-loading="listLoading"
+      border
+      :data="list"
+      style="width: 100%"
+    >
+      <el-table-column
+        v-for="(item, index) in finallyColumns"
+        :key="index"
+        align="center"
+        :label="item.label"
+        :sortable="item.sortable"
+        :width="item.width"
+        :fixed="!!item.fixed"
+        :show-overflow-tooltip="!!item.overflow"
+      >
+        <template #default="{ row }">
+          <div v-if="item.label==='营业执照' || item.label==='小贷拍照' || item.label==='金融办批文'">
+            <el-image
+              style="width: 100px; height: 75px"
+              :src="row[item.prop]"
+              fit="fit"
+            />
+          </div>
+          <div v-else-if="item.label==='机构状态'">
+            <span>{{ row[item.prop]==="1"?'启用':'禁用' }}</span>
+          </div>
+          <span v-else>{{ row[item.prop] }}</span>
+        </template>
+      </el-table-column>
+
+    </el-table>
+
+    <el-pagination
+      style='margin-bottom: 20px'
+      :current-page="queryForm.current"
+      :layout="layout"
+      :page-size="queryForm.size"
+      :total="total"
+      background
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+  </div>
+</template>
+
+<script>
+  import _ from 'lodash'
+  import API from '@/server/api'
+
+  export default {
+    name: 'TableEdit',
+    data() {
+      return {
+        checkList: ["操作人员", "操作类型", "操作结果", "审批结果", "操作时间", "备注"],
+        columns: [
+          {
+            order: 1,
+            label: "操作人员",
+            prop: "tenantNo"
+          },
+          {
+            order: 2,
+            label: "操作类型",
+            prop: "tenantFullName"
+          },
+          {
+            order: 3,
+            label: "操作结果",
+            prop: "tenantName"
+          },
+          {
+            order: 4,
+            label: "审批结果",
+            prop: "status"
+          },
+          {
+            order: 5,
+            label: "操作时间",
+            prop: "businessLicenseUrl",
+            overflow: true
+          },
+          {
+            order: 6,
+            label: "备注",
+            prop: "status"
+          }
+        ],
+        list: [],
+        listLoading: true,
+        layout: "total, sizes, prev, pager, next, jumper",
+        total: 1,
+        queryForm: {
+          current: 1,
+          size: 9,
+          status: "",
+          tenantName: "",
+          tenantNo: ""
+        }
+      }
+    },
+    computed: {
+      finallyColumns() {
+        let finallyArray = [];
+        this.checkList.forEach((checkItem) => {
+          finallyArray.push(
+            this.columns.filter((item) => item.label === checkItem)[0]
+          );
+        });
+        return _.sortBy(finallyArray, (item) => item.order);
+        //return finallyArray;
+      }
+    },
+    created() {
+      //防止三级以上路由时多次走created
+      if (this.$route.name === this.$options.name) this.fetchData();
+    },
+    mounted() {
+      this.fetchData();
+    },
+    methods: {
+      handleSizeChange(val) {
+        this.queryForm.size = val;
+        this.fetchData();
+      },
+      handleCurrentChange(val) {
+        this.queryForm.current = val;
+        this.fetchData();
+      },
+      async fetchData() {
+        this.listLoading = true;
+        const result = await API.merchant_list(this.queryForm);
+        const { records, total } = result.result;
+        this.list = records;
+        this.total = total;
+        this.listLoading = false;
+      }
+    },
+  }
+</script>

src/views/credit/components/pre-plead.vue

+<template>
+  <div>
+    <!--搜索-->
+    <block-header title="申述" />
+    <el-form label-suffix=":" label-width='120px' :model="form" class="form-inline">
+      <el-form-item label="申述备注">
+        <el-input v-model="form.remarks" type="textarea" clearable placeholder="请输入申述备注" />
+      </el-form-item>
+      <el-form-item label="审批意见">
+        <el-radio-group v-model="form.opinion">
+          <el-radio :label="3">备选项</el-radio>
+          <el-radio :label="6">备选项</el-radio>
+          <el-radio :label="9">备选项</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+
+      <el-form-item>
+        <el-button icon="el-icon-search" type="primary" @click="onSubmit">提 交</el-button>
+      </el-form-item>
+    </el-form>
+
+  </div>
+</template>
+
+<script>
+  import API from "@/server/api";
+  export default {
+    name: "PrePlead",
+    data() {
+      return {
+        form: {
+          remarks: 1,
+          opinion: 9
+        }
+      };
+    },
+    methods: {
+      onSubmit(){}
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .page-fence {
+    ::v-deep {
+      i {
+        cursor: pointer;
+      }
+    }
+
+    box-sizing: border-box;
+    padding: 20px;
+  }
+</style>
+<style lang="scss">
+  .custom-table-checkbox {
+    .el-checkbox {
+      display: block !important;
+      margin: 0 0 $base-padding/4 0;
+    }
+  }
+
+  .action-bar {
+    margin-bottom: 15px;
+  }
+</style>

src/views/credit/pre-detail.vue

+<template>
+  <div class='page'>
+
+    <block-header title='基础信息' />
+    <el-descriptions style='margin-bottom: 20px;' border size='small' :column='3'>
+      <el-descriptions-item label-class-name='labelCls' label='客户姓名'>1</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='手机号码'>1</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='身份证号'>1</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='户籍地址'>1</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='申请时间'>1</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='授信类型'>1</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='授信状态'>1</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='商户区域'>1</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='首次授信'>1</el-descriptions-item>
+    </el-descriptions>
+
+    <block-header title='预审报告' />
+    <el-descriptions style='margin-bottom: 20px;' border size='small' :column='3'>
+      <el-descriptions-item label-class-name='labelCls' label='规则名称'>1</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='规则名称'>1</el-descriptions-item>
+      <el-descriptions-item label-class-name='labelCls' label='审批建议'>1</el-descriptions-item>
+    </el-descriptions>
+
+    <!--操作日志-->
+    <operation-log />
+
+    <!--申述操作-->
+    <pre-plead />
+
+
+  </div>
+</template>
+
+<script>
+  import OperationLog from './components/pre-operation-log'
+  import PrePlead from './components/pre-plead'
+  import API from '@/server/api'
+
+  export default {
+    name: 'PreDetail',
+    components: {
+      'operation-log': OperationLog,
+      'pre-plead': PrePlead
+    },
+    data() {
+      return {
+        tenantNo: ''
+      }
+    },
+    created() {
+      const { query } = this.$route
+      if (query && query.tenantNo) {
+        this.tenantNo = query.tenantNo
+      }
+    },
+    methods: {}
+  }
+</script>
+
+<style lang='scss' src='./index.scss'></style>