feat: 通用列表组件

src/api/base/baseErrorLog.js

 import {axios} from '@/util/axios/request'
 
-const api = {
-  getPage: '/base/error/log/page'
-}
-
-export default api
-
 export function getPage(parameter) {
   return axios({
-    url: api.getPage,
+    url: '/log/error/page',
     method: 'post',
     data: parameter,
+  })
+}
+
+export function exportExxx(parameter) {
+  return axios({
+    responseType: 'blob',
+    headers: {'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'},
+    url: '/log/error/xxxxx',
+    method: 'get',
+    data: parameter,
     useFullLoading: true
   })
 }
\ No newline at end of file

src/api/datashow/datashow.js

-import { axios } from '@/util/axios/request'
-// 数据展示接口
-const baseURI = '/data-show'
-
-// 用车统计
-export function getUsageAmount(data) {
-  return axios({
-    url: `${baseURI}/usage-amount`,
-    method: 'post',
-    data
-  })
-}
-// 基础数据
-export function getBasicData(communityId) {
-  return axios({
-    url: `${baseURI}/basic-statistics/${communityId}`,
-    method: 'get',
-  })
-}
-// 可选单位
-export function getSelectableCommunities() {
-  return axios({
-    url: `${baseURI}/selectable-communities`,
-    method: 'get'
-  })
-}
-// 费用统计
-export function getCostData(data) {
-  return axios({
-    url: `${baseURI}/cost-data`,
-    method: 'post',
-    data
-  })
-}
-// 加油统计 
-export function getFuelData(data) {
-  return axios({
-    url: `${baseURI}/fuel-data`,
-    method: 'post',
-    data
-  })
-}
-// 车辆使用寿命统计
-export function getCarYears(data) {
-  return axios({
-    url: `${baseURI}/used-years`,
-    method: 'post',
-    data
-  })
-}
\ No newline at end of file

src/api/workflow/workflow.js

-import { axios } from '@/util/axios/request'
-
-const api = {
-  baseUrl: '/workflow'
-};
-
-export function getProcdefPage(parameter) {
-  return axios({
-    url: api.baseUrl + '/page',
-    method: 'post',
-    data: parameter,
-    useFullLoading: true
-  })
-}
-
-
-export function getTaskFormDetail(id) {
-  return axios({
-    url: api.baseUrl + '/task/form/detail/' + id,
-    method: 'get',
-    useFullLoading: true
-  })
-}
-
-
-export function save(id,strategy) {
-  return axios({
-    url: api.baseUrl + '/id/' + id + '/strategy/' + strategy,
-    method: 'get',
-    useFullLoading: true
-  })
-}
-
-
-export function getTaskOutFormDetail(processId, flowOutId) {
-  return axios({
-    url: api.baseUrl + '/task/form/detail/' + processId + '/' + flowOutId,
-    method: 'get',
-    useFullLoading: true
-  })
-}
-
-export function saveTaskOutForm(processId, flowOutId, parameter) {
-  return axios({
-    url: api.baseUrl + '/task/form/detail/' + processId + '/' + flowOutId,
-    method: 'post',
-    data: parameter,
-    useFullLoading: true
-  })
-}
-
-export function getTaskAuditRule(processId, taskDefId) {
-  return axios({
-    url: api.baseUrl + '/task/audit/rule/' + processId + '/' + taskDefId,
-    method: 'get',
-    useFullLoading: true
-  })
-}
-
-
-export function getTaskAuditRuleCommunity(communityId, taskId) {
-  return axios({
-    url: api.baseUrl + '/task/audit/rule/community/' + communityId + '/' + taskId,
-    method: 'get',
-    useFullLoading: true
-  })
-}
-
-export function saveTaskAuditRuleCommunity(communityId, taskId, parameter) {
-  return axios({
-    url: api.baseUrl + '/task/audit/rule/community/' + communityId + '/' + taskId,
-    method: 'post',
-    data: parameter,
-    useFullLoading: true
-  })
-}
-
-export function getTaskRemindRuleCommunity(communityId, taskId) {
-  return axios({
-    url: api.baseUrl + '/task/remind/rule/community/' + communityId + '/' + taskId,
-    method: 'get',
-    useFullLoading: true
-  })
-}
-
-export function saveTaskRemindRuleCommunity(communityId, taskId, parameter) {
-  return axios({
-    url: api.baseUrl + '/task/remind/rule/community/' + communityId + '/' + taskId,
-    method: 'post',
-    data: parameter,
-    useFullLoading: true
-  })
-}
-
-export function getTaskProperty(processId, taskDefId) {
-  return axios({
-    url: api.baseUrl + '/task/property/' + processId + '/' + taskDefId,
-    method: 'get',
-    useFullLoading: true
-  })
-}
-
-export function saveTaskProperty(parameter) {
-  return axios({
-    url: api.baseUrl + '/task/property',
-    method: 'post',
-    data: parameter,
-    useFullLoading: true
-  })
-}
-
-export function remark(procId, parameter) {
-  return axios({
-    url: api.baseUrl + '/remark/' + procId,
-    method: 'post',
-    data: parameter,
-    useFullLoading: true
-  })
-}
-
-export function getUserByRoleId(roleId) {
-  return axios({
-    url: api.baseUrl + '/role/' + roleId + '/user',
-    method: 'get',
-    useFullLoading: true
-  })
-}
-
-export function getContentList(businessType) {
-  return axios({
-    url: api.baseUrl + '/list/' + businessType,
-    method: 'get',
-    useFullLoading: true
-  })
-}
-
-export function getTaskTree(businessTypeId) {
-  return axios({
-    url: api.baseUrl + '/task/tree/' + businessTypeId,
-    method: 'get',
-    useFullLoading: true
-  })
-}
-
-export function getTaskListByParent(procDefId) {
-  return axios({
-    url: api.baseUrl + '/task/list/' + procDefId,
-    method: 'get',
-    useFullLoading: true
-  })
-}
-
-export function getProcVersion(businessTypeId) {
-  return axios({
-    url: api.baseUrl + '/proc/version/list/' + businessTypeId,
-    method: 'get',
-    useFullLoading: true
-  })
-}
-
-export function getProcRole(businessTypeId,procDefId) {
-  return axios({
-    url: api.baseUrl + '/proc/role/list/' + businessTypeId + '/' +procDefId,
-    method: 'get',
-    useFullLoading: true
-  })
-}
\ No newline at end of file

src/components/layouts/BasicLayout.vue

 <template>
   <global-layout>
-    <a-spin :spinning="isLoading">
+    <a-spin :spinning="isLoading" class="global-spinning">
       <keep-alive v-if="keepAlive">
-          <router-view/>
+        <router-view />
       </keep-alive>
-        <router-view v-else/>
+      <router-view v-else />
     </a-spin>
   </global-layout>
 </template>
 
 <script>
-  import GlobalLayout from '@/components/page/GlobalLayout'
-  import {mapState} from 'vuex'
+import GlobalLayout from '@/components/page/GlobalLayout'
+import { mapState } from 'vuex'
 
-  export default {
-    name: "BasicLayout",
+export default {
+  name: 'BasicLayout',
   components: {
     GlobalLayout
   },
@@ -26,16 +26,23 @@
       return this.$route.meta.keepAlive
     },
     ...mapState({
-        isLoading: state => state.app.isLoading
-      }),
+      isLoading: (state) => state.app.isLoading
+    })
   },
-    methods: {},
-  }
+  methods: {}
+}
 </script>
 
 <style lang="less">
+.global-spinning {
+  height: 100%;
+  .ant-spin-container {
+    max-height: calc(100% - 20px);
+    overflow: hidden;
+  }
+}
 
-  /*
+/*
  * The following styles are auto-applied to elements with
  * transition="page-transition" when their visibility is toggled
  * by Vue.js.
@@ -44,34 +51,35 @@
  * these styles.
  */
 
-  .page-transition-enter {
+.page-transition-enter {
   opacity: 0;
-  }
+}
 
-  .page-transition-leave-active {
+.page-transition-leave-active {
   opacity: 0;
-  }
+}
 
-  .page-transition-enter .page-transition-container,
-  .page-transition-leave-active .page-transition-container {
+.page-transition-enter .page-transition-container,
+.page-transition-leave-active .page-transition-container {
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
-  }
+}
 
-  /*上传控件尺寸调整*/
-  .ant-upload {
+/*上传控件尺寸调整*/
+.ant-upload {
   width: 80px !important;
   height: 80px !important;
-  }
-  .ant-upload-list-picture-card .ant-upload-list-item{
+}
+.ant-upload-list-picture-card .ant-upload-list-item {
   width: 80px !important;
   height: 80px !important;
-  }
-  .ant-upload-list-item-uploading-text {
+}
+.ant-upload-list-item-uploading-text {
   font-size: 10px; // 调整“文件上传中”字体大小
-  }
-  .ant-upload-list-picture .ant-upload-list-item, .ant-upload-list-picture-card .ant-upload-list-item {
-    padding: 4px!important; // 调整图片和边框的间隙
-  }
-  /*end*/
+}
+.ant-upload-list-picture .ant-upload-list-item,
+.ant-upload-list-picture-card .ant-upload-list-item {
+  padding: 4px !important; // 调整图片和边框的间隙
+}
+/*end*/
 </style>
\ No newline at end of file

src/components/page/GlobalLayout.vue

@@ -75,12 +75,13 @@
 
       <!-- layout content -->
       <a-layout-content
-        style="scroll-behavior:smooth"
         :style="{
           marginLeft: ' 16px',
+          height: 'calc(100vh - 65px)',
+          scrollBehavior: 'smooth',
           marginRight: '16px',
-          height: 'calc(100vh - 50px)',
-          marginTop: fixedHeader ? '74px' : '24px',
+          overflow: 'hidden',
+          marginTop: fixedHeader ? '64px' : '14px',
         }"
       >
         <slot></slot>
@@ -90,14 +91,12 @@
       <a-layout-footer style="padding: 0px"></a-layout-footer>
     </a-layout>
 
-    <!--<setting-drawer></setting-drawer>-->
   </a-layout>
 </template>
 
 <script>
 import SideMenu from "@/components/menu/SideMenu";
 import GlobalHeader from "@/components/page/GlobalHeader";
-// import SettingDrawer from '@/components/setting/SettingDrawer'
 import { triggerWindowResizeEvent } from "@/util/util";
 import { mapActions, mapState } from "vuex";
 import { mixin, mixinDevice } from "@/util/mixin.js";
@@ -107,7 +106,6 @@ export default {
   components: {
     SideMenu,
     GlobalHeader,
-    // ,SettingDrawer
   },
   mixins: [mixin, mixinDevice],
   data() {
@@ -200,20 +198,16 @@ body {
   }
 }
 
-
 .ant-card-body {
   padding: 5px !important;
 }
 
 
-
 //列表页样式调整
 .ant-advanced-search-form {
-  margin-bottom: 5px !important;
-  padding: 3px !important;
-  background: #fbfbfb;
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
+  margin-bottom: 15px !important;
+  padding: 10px 20px 10px 5px !important;
+  background: #ffffff;
 }
 
 .ant-table-selection-column {

src/components/setting/SettingDrawer.vue

-<template>
-  <div class="setting-drawer">
-    <a-drawer
-      width="300"
-      placement="right"
-      :closable="false"
-      @close="onClose"
-      :visible="visible"
-      :style="{}"
-    >
-      <div class="setting-drawer-index-content">
-
-        <div :style="{ marginBottom: '24px' }">
-          <h3 class="setting-drawer-index-title">整体风格设置</h3>
-
-          <div class="setting-drawer-index-blockChecbox">
-            <a-tooltip>
-              <template slot="title">
-                暗色菜单风格
-              </template>
-              <div class="setting-drawer-index-item" @click="handleMenuTheme('dark')">
-                <img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark">
-                <div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
-                  <a-icon type="check"/>
-                </div>
-              </div>
-            </a-tooltip>
-
-            <a-tooltip>
-              <template slot="title">
-                亮色菜单风格
-              </template>
-              <div class="setting-drawer-index-item" @click="handleMenuTheme('light')">
-                <img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light">
-                <div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'">
-                  <a-icon type="check"/>
-                </div>
-              </div>
-            </a-tooltip>
-          </div>
-        </div>
-
-        <div :style="{ marginBottom: '24px' }">
-          <h3 class="setting-drawer-index-title">主题色</h3>
-
-          <div style="height: 20px">
-            <a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
-              <template slot='title'>
-                {{ item.key }}
-              </template>
-              <a-tag :color="item.color" @click="changeColor(item.color)">
-                <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
-              </a-tag>
-            </a-tooltip>
-
-          </div>
-        </div>
-        <a-divider />
-
-        <div :style="{ marginBottom: '24px' }">
-          <h3 class="setting-drawer-index-title">导航模式</h3>
-
-          <div class="setting-drawer-index-blockChecbox">
-            <a-tooltip>
-              <template slot="title">
-                侧边栏导航
-              </template>
-              <div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">
-                <img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="sidemenu">
-                <div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'sidemenu'">
-                  <a-icon type="check"/>
-                </div>
-              </div>
-            </a-tooltip>
-
-            <a-tooltip>
-              <template slot="title">
-                顶部栏导航
-              </template>
-              <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
-                <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu">
-                <div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'">
-                  <a-icon type="check"/>
-                </div>
-              </div>
-            </a-tooltip>
-          </div>
-          <div :style="{ marginTop: '24px' }">
-            <a-list :split="false">
-              <a-list-item>
-                <a-tooltip slot="actions">
-                  <template slot='title'>
-                    该设定仅 [顶部栏导航] 时有效
-                  </template>
-                  <a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
-                    <a-select-option value="Fixed">固定</a-select-option>
-                    <a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option>
-                  </a-select>
-                </a-tooltip>
-                <a-list-item-meta>
-                  <div slot="title">内容区域宽度</div>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-switch slot="actions" size="small" :defaultChecked="fixedHeader" @change="handleFixedHeader" />
-                <a-list-item-meta>
-                  <div slot="title">固定 Header</div>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-switch slot="actions" size="small" :disabled="!fixedHeader" :defaultChecked="autoHideHeader" @change="handleFixedHeaderHidden" />
-                <a-list-item-meta>
-                  <div slot="title" :style="{ textDecoration: !fixedHeader ? 'line-through' : 'unset' }">下滑时隐藏 Header</div>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item >
-                <a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :defaultChecked="fixSiderbar" @change="handleFixSiderbar" />
-                <a-list-item-meta>
-                  <div slot="title" :style="{ textDecoration: layoutMode === 'topmenu' ? 'line-through' : 'unset' }">固定侧边菜单</div>
-                </a-list-item-meta>
-              </a-list-item>
-            </a-list>
-          </div>
-        </div>
-        <a-divider />
-
-        <div :style="{ marginBottom: '24px' }">
-          <h3 class="setting-drawer-index-title">其他设置</h3>
-          <div>
-            <a-list :split="false">
-              <a-list-item>
-                <a-switch slot="actions" size="small" :defaultChecked="colorWeak" @change="onColorWeak" />
-                <a-list-item-meta>
-                  <div slot="title">色弱模式</div>
-                </a-list-item-meta>
-              </a-list-item>
-            </a-list>
-          </div>
-        </div>
-        <a-divider />
-        <div :style="{ marginBottom: '24px' }">
-          <a-alert type="warning">
-            <span slot="message">
-              配置栏只在开发环境用于预览，生产环境不会展现，请手动修改配置文件
-              <a href="https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js" target="_blank">src/defaultSettings.js</a>
-            </span>
-          </a-alert>
-        </div>
-      </div>
-      <div class="setting-drawer-index-handle" @click="toggle">
-        <a-icon type="setting" v-if="!visible"/>
-        <a-icon type="close" v-else/>
-      </div>
-    </a-drawer>
-  </div>
-</template>
-
-<script>
-  import DetailList from '@/components/tools/DetailList'
-  import SettingItem from '@/components/setting/SettingItem'
-  import config from '@/defaultSettings'
-  import { updateTheme, updateColorWeak, colorList } from '@/components/tools/setting'
-  import { mixin, mixinDevice } from '@/util/mixin.js'
-
-  export default {
-    components: {
-      DetailList,
-      SettingItem
-    },
-    mixins: [mixin, mixinDevice],
-    data() {
-      return {
-        visible: true,
-        colorList,
-      }
-    },
-    watch: {
-
-    },
-    mounted () {
-      const vm = this
-      setTimeout(() => {
-        vm.visible = false
-      }, 16)
-      // 当主题色不是默认色时，才进行主题编译
-      if (this.primaryColor !== config.primaryColor) {
-        updateTheme(this.primaryColor)
-      }
-      if (this.colorWeak !== config.colorWeak) {
-        updateColorWeak(this.colorWeak)
-      }
-    },
-    methods: {
-      showDrawer() {
-        this.visible = true
-      },
-      onClose() {
-        this.visible = false
-      },
-      toggle() {
-        this.visible = !this.visible
-      },
-      onColorWeak (checked) {
-        this.$store.dispatch('ToggleWeak', checked)
-        updateColorWeak(checked)
-      },
-      handleMenuTheme (theme) {
-        this.$store.dispatch('ToggleTheme', theme)
-      },
-      handleLayout (mode) {
-        this.$store.dispatch('ToggleLayoutMode', mode)
-        // 因为顶部菜单不能固定左侧菜单栏，所以强制关闭
-        //
-        this.handleFixSiderbar(false);
-      },
-      handleContentWidthChange (type) {
-        this.$store.dispatch('ToggleContentWidth', type)
-      },
-      changeColor (color) {
-        if (this.primaryColor !== color) {
-          this.$store.dispatch('ToggleColor', color)
-          updateTheme(color)
-        }
-      },
-      handleFixedHeader (fixed) {
-        this.$store.dispatch('ToggleFixedHeader', fixed)
-      },
-      handleFixedHeaderHidden (autoHidden) {
-        this.$store.dispatch('ToggleFixedHeaderHidden', autoHidden)
-      },
-      handleFixSiderbar (fixed) {
-        if (this.layoutMode === 'topmenu') {
-          this.$store.dispatch('ToggleFixSiderbar', false)
-          return;
-        }
-        this.$store.dispatch('ToggleFixSiderbar', fixed)
-      }
-    },
-  }
-</script>
-
-<style lang="less" scoped>
-
-  .setting-drawer-index-content {
-
-    .setting-drawer-index-blockChecbox {
-      display: flex;
-
-      .setting-drawer-index-item {
-        margin-right: 16px;
-        position: relative;
-        border-radius: 4px;
-        cursor: pointer;
-
-        img {
-          width: 48px;
-        }
-
-        .setting-drawer-index-selectIcon {
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: 100%;
-          padding-top: 15px;
-          padding-left: 24px;
-          height: 100%;
-          color: #1890ff;
-          font-size: 14px;
-          font-weight: 700;
-        }
-      }
-    }
-    .setting-drawer-theme-color-colorBlock {
-      width: 20px;
-      height: 20px;
-      border-radius: 2px;
-      float: left;
-      cursor: pointer;
-      margin-right: 8px;
-      padding-left: 0px;
-      padding-right: 0px;
-      text-align: center;
-      color: #fff;
-      font-weight: 700;
-
-      i {
-        font-size: 14px;
-      }
-    }
-  }
-
-  .setting-drawer-index-handle {
-    position: absolute;
-    top: 240px;
-    background: #1890ff;
-    width: 48px;
-    height: 48px;
-    right: 300px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    pointer-events: auto;
-    z-index: 1001;
-    text-align: center;
-    font-size: 16px;
-    border-radius: 4px 0 0 4px;
-
-    i {
-      color: rgb(255, 255, 255);
-      font-size: 20px;
-    }
-  }
-</style>
\ No newline at end of file

src/components/setting/SettingItem.vue

-<template>
-  <div class="setting-drawer-index-item">
-    <h3 class="setting-drawer-index-title">{{ title }}</h3>
-    <slot></slot>
-    <a-divider v-if="divider"/>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: "SettingItem",
-    props: {
-      title: {
-        type: String,
-        default: ''
-      },
-      divider: {
-        type: Boolean,
-        default: false
-      }
-    }
-  }
-</script>
-
-<style lang="less" scoped>
-
-  .setting-drawer-index-item {
-    margin-bottom: 24px;
-
-    .setting-drawer-index-title {
-      font-size: 14px;
-      color: rgba(0, 0, 0, .85);
-      line-height: 22px;
-      margin-bottom: 12px;
-    }
-
-  }
-</style>
\ No newline at end of file

src/components/table/SearchForm.vue

+<!-- 自动生成搜索表单 -->
+<template>
+  <a-form layout="horizontal" class="ant-advanced-search-form">
+    <a-row>
+      <template v-for="(f, i) in list">
+        <template v-if="f.filter.type == SearchType.RANGE  && (!collapsed || i < 3)">
+          <a-col :span="6" :key="f.dataIndex">
+            <a-form-item v-bind="formItemLayout" :label="f.title">
+              <a-range-picker
+                :showTime="f.filter.showTime"
+                v-model="query[f.dataIndex]"
+                :allowClear="true"
+                style="width: 100%"
+                @change="(value) => rangeChange(f, value)"
+              />
+            </a-form-item>
+          </a-col>
+        </template>
+
+        <template v-if="f.filter.type == SearchType.DATE  && (!collapsed || i < 3)">
+          <a-col :span="6" :key="f.dataIndex">
+            <a-form-item v-bind="formItemLayout" :label="f.title">
+              <a-date-picker
+                v-model="query[f.dataIndex]"
+                :allowClear="true"
+                style="width: 100%"
+                @change="(value) => dateChange(f, value)"
+              />
+            </a-form-item>
+          </a-col>
+        </template>
+
+        <template v-if="f.filter.type == SearchType.STRING && (!collapsed || i < 3)">
+          <a-col :span="6" :key="f.dataIndex">
+            <a-form-item v-bind="formItemLayout" :label="f.title">
+              <a-input
+                v-model="query[f.dataIndex]"
+                @change="(e) => strChange(f, e)"
+                @pressEnter="reload"
+              />
+            </a-form-item>
+          </a-col>
+        </template>
+
+        <template v-if="f.filter.type == SearchType.ENUM && (!collapsed || i < 3)">
+          <a-col :span="6" :key="f.dataIndex">
+            <a-form-item v-bind="formItemLayout" :label="f.title">
+              <a-select
+                v-model="query[f.dataIndex]"
+                :allowClear="true"
+                @change="(value) => selectionChange(f, value)"
+                :options="options[f.enum]"
+                :mode="f.filter.multiple ? 'multiple' : 'default'"
+                show-search
+                :filter-option="filterOption"
+              />
+            </a-form-item>
+          </a-col>
+        </template>
+
+      </template>
+      <a-col :span="6" style="float: right">
+        <a-space style="margin-top:4px; float:right">
+          <a-button @click="onReset">重&nbsp;置</a-button>
+          <a-button type="primary" @click="onSearch">查&nbsp;询</a-button>
+          <a-button type="link" @click="collapse">
+            {{collapsed? '展开': '收起'}}
+            <a-icon type="up" v-if="!collapsed" />
+            <a-icon type="down" v-show="collapsed" />
+          </a-button>
+        </a-space>
+      </a-col>
+    </a-row>
+  </a-form>
+</template>
+<script>
+import _ from 'lodash'
+
+const defaultDateFormat = 'YYYY-MM-DD'
+
+export default {
+  name: 'commonSearchForm',
+  props: {
+    query: Object,
+    list: Array,
+    options: Object,
+    reload: Function,
+    onSearch: Function,
+    onReset: Function,
+    onCollapse: Function,
+  },
+  model: {
+    prop: 'query',
+    event: 'queryChange',
+  },
+  data() {
+    return {
+      SearchType,
+      collapsed: true,
+      gap: 0,
+      formItemLayout: {
+        labelCol: {
+          sm: { span: 8 },
+        },
+        wrapperCol: {
+          sm: { span: 16 },
+        },
+      },
+    }
+  },
+
+  methods: {
+    rangeChange(column, values) {
+      const be = {}
+      if (values.length) {
+        be[column.dataIndex + 'Begin'] = values[0].format(column.filter.format || defaultDateFormat)
+        be[column.dataIndex + 'End'] = values[1].format(column.filter.format || defaultDateFormat)
+      } else {
+        be[column.dataIndex + 'Begin'] = ''
+        be[column.dataIndex + 'End'] = ''
+      }
+      this.$emit('queryChange', _.merge(this.query, be))
+      this.$nextTick(() => {
+        this.reload && this.reload()
+      })
+    },
+
+    dateChange(c, val) {
+      const dt = {}
+      if (val) {
+        dt[c.dataIndex] = val.format(c.filter.format || defaultDateFormat)
+      } else {
+        dt[c.dataIndex] = ''
+      }
+      this.$emit('queryChange', _.merge(this.query, dt))
+      this.$nextTick(() => {
+        this.reload && this.reload()
+      })
+    },
+
+    strChange(c, { target: { value } }) {
+      this.$emit('queryChange', _.merge(this.query, { [c.dataIndex]: value }))
+    },
+
+    selectionChange(c, val) {
+      this.$emit('queryChange', _.merge(this.query, { [c.dataIndex]: val }))
+      this.$nextTick(() => {
+        this.reload && this.reload()
+      })
+    },
+
+    filterOption(input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+    // 展开
+    collapse() {
+      this.onCollapse(this.collapsed? this.gap: 0)
+      this.collapsed = !this.collapsed
+    }
+
+  },
+
+  activated() {
+    // 初始化一些必要数据
+    // this.list.forEach();
+    // 计算修改量
+    const count = Math.ceil((this.list.length - 3) / 4)
+    if(count <= 0) {
+      this.gap = 0
+    } else {
+      this.gap = count * 55
+    }
+  },
+}
+
+/**
+ * @typedef {Object} SearchType
+ * @property {String} RANGE
+ * @property {String} DATE
+ * @property {String} STRING
+ * @property {String} ENUM
+ */
+
+/**
+ * @type SearchType
+ */
+const SearchType = {
+  RANGE: 'range', // 时间范围
+  DATE: 'date', // 日期
+  STRING: 'str', // 字符串
+  ENUM: 'enum', // 下拉选择
+}
+export { SearchType }
+</script>

src/components/table/TableScript.vue

+<script>
+import {
+  humpToLine,
+  setOrder,
+  bizCodeMapping,
+  getCodeOptions
+} from '@/util/util'
+import _ from 'lodash'
+
+export default {
+  name: 'TableScript',
+  data() {
+    return {
+      query: {
+        page: 1,
+        size: this.$defaultPageSize()
+      },
+      rowKey: 'id',
+      selectedRowKeys: [],
+      selectedRows: [],
+      total: 0,
+      loading: false,
+      dataSource: [],
+      isFirstLoad: true,
+
+      toolbar: [],
+      // reset时保留的query属性
+      retainFields: [],
+
+      options: {},
+      codeMapping: {},
+      codes: [[], []],
+      columns: [],
+      useYScroll: false, // 是否只使用纵向滚动
+      useScroll: false, // 是否使用表格内滚动, 想要生效需要给列配置宽度
+      heightFix: 330, // 默认高度修正
+      widthFix: 233, // 默认宽度修正
+      /** 是否使用分页  */
+      pagination: true,
+      /** 是否使用列选择 */
+      useSelection: true,
+      // 标题
+      title: '列表',
+      keep: false, // 保持状态
+      useSearch: true, // 显示搜索
+      customClass: '',
+      useTitle: true,
+      expandedRowKeys: [],
+      bordered: false,
+      childrenColumnName: 'children',
+      searchHeight: 0 // 搜索框高度
+    }
+  },
+  computed: {
+    /* 滚动设置 */
+    scroll() {
+      if (this.useYScroll) {
+        return {
+          y: this.$store.getters.size[1] - this.heightFix - this.searchHeight
+        }
+      }
+      const width = this.columns
+        .map((c) => c.width || 0)
+        .reduce((w1, w2) => w1 + w2)
+      return this.useScroll
+        ? {
+            x: width - this.widthFix,
+            y: this.$store.getters.size[1] - this.heightFix - this.searchHeight
+          }
+        : undefined
+    },
+    /* 最终过滤后的列 */
+    finalColumns() {
+      return this.columns.filter((c) => !c.hidden)
+    },
+
+    filters() {
+      return this.columns.filter((c) => !!c.filter)
+    },
+
+    defaultPageSize: function () {
+      return this.$defaultPageSize()
+    },
+
+    paginationConfig: function () {
+      return {
+        onChange: this.pageChange,
+        current: this.query.page,
+        defaultPageSize: this.$defaultPageSize(),
+        pageSizeOptions: this.$pageSizeOptions,
+        onShowSizeChange: this.sizeChange,
+        total: this.total,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: this.$showTotal
+      }
+    }
+  },
+
+  methods: {
+    reset() {
+      this.query = _.pick(this.query, ['page', 'size', ...this.retainFields])
+      this.loadData()
+    },
+
+    handleChange({ fileList }) {
+      this.isUpdateSuccess(fileList)
+      this.fileList = fileList
+    },
+
+    // eslint-disable-next-line no-unused-vars
+    changeClassName(row, index) {
+      return ''
+    },
+
+    loadData(size) {
+      this.loading = true
+      this.selectedRowKeys = []
+      if (size && !isNaN(size)) {
+        this.query.size = size
+      }
+      this.queryData(this.query).then((response) => {
+        if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
+          if (this.pagination) {
+            let respData = response.data
+            this.dataSource = respData.list
+            this.total = respData.total
+          } else {
+            this.dataSource = response.data
+          }
+        }
+        this.loading = false
+      })
+    },
+    search() {
+      this.query.page = 1
+      this.loadData()
+    },
+    /* 新增数据 */
+    addNew() {
+      this.editRow()
+    },
+    /* 编辑行 */
+    // eslint-disable-next-line no-unused-vars
+    editRow(row) {},
+    async deleteOne() {},
+    deleteRow(id) {
+      this.deleteOne(id).then((response) => {
+        if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
+          this.loadData()
+        }
+      })
+    },
+    onDelete(row) {
+      let _this = this
+      this.$confirm({
+        title: '提示',
+        content: '确定删除这条记录吗？',
+        onOk() {
+          _this.deleteRow(row.id)
+        },
+        onCancel() {}
+      })
+    },
+
+    onDeleteBatch() {
+      if (this.selectedRowKeys.length == 0) {
+        return
+      }
+      let _this = this
+      this.$confirm({
+        title: '提示',
+        content: '确定删除选中的记录吗？',
+        onOk() {
+          _this.deleteBatch()
+        },
+        onCancel() {}
+      })
+    },
+    updateSelect(selectedRowKeys) {
+      this.selectedRowKeys = selectedRowKeys
+    },
+
+    pageChange(page) {
+      this.query.page = page
+      this.loadData()
+    },
+    sizeChange(current, size) {
+      this.query.page = 1
+      this.query.size = size
+      this.loadData()
+    },
+    sortChange(pagination, filters, sorter) {
+      this.query.sort = humpToLine(sorter.field)
+      this.query.order = setOrder(sorter.order)
+      this.loadData()
+    },
+    getTypes() {
+      console.info('getType')
+    },
+
+    beforeFirstLoad() {},
+    queryData() {
+      return new Promise((resolve) => resolve({ data: {} }))
+    },
+    init() {
+      this.beforeFirstLoad && this.beforeFirstLoad()
+      if (this.isFirstLoad == true) {
+        this.loadData(this.defaultPageSize)
+        this.isFirstLoad = false
+      } else {
+        let isModify = this.$route.query.isModify
+        if (isModify == true) {
+          this.loadData()
+        } else if (isModify != undefined) {
+          this.query.page = 1
+          this.loadData()
+        }
+      }
+    },
+    onCollapse(gap) {
+      this.searchHeight = gap
+    }
+  },
+
+  mounted() {
+    // 加载编码
+    this.codes[0].length &&
+      getCodeOptions(this.codes[0]).then(([codeMapping, options]) => {
+        this.options = { ...this.options, ...options }
+        this.codeMapping = codeMapping
+      })
+
+    this.codes[1].length &&
+      this.codes[1].forEach((c) => {
+        bizCodeMapping[c] &&
+          bizCodeMapping[c]().then((ops) => {
+            this.options = { ...this.options, [c]: ops }
+            const bizCodeMap = {}
+            ops.forEach((op) => (bizCodeMap[op.value] = op.label))
+            this.codeMapping = { ...this.codeMapping, [c]: bizCodeMap }
+          })
+      })
+    if (!this.$route.meta.keepAlive) {
+      this.init()
+    }
+  },
+
+  activated() {
+    if (this.$route.meta.keepAlive) {
+      this.init()
+    }
+  },
+  deactivated() {
+    if (!this.keep) {
+      this.dataSource = []
+      this.query = { page: 1, size: this.query.size }
+    }
+  }
+}
+</script>

src/components/table/TableTemplate.vue

+<template>
+  <div class="common-table-container" v-if="!!soul">
+    <search-form
+      v-if="soul.useSearch"
+      v-model="soul.query"
+      :list="soul.filters"
+      :reload="soul.loadData"
+      :options="soul.options"
+      :onSearch="soul.search"
+      :onReset="soul.reset"
+      :onCollapse="soul.onCollapse"
+    />
+    <a-table
+      size="middle"
+      @change="soul.sortChange"
+      :loading="soul.loading"
+      :columns="soul.finalColumns"
+      :dataSource="soul.dataSource"
+      :rowKey="soul.rowKey"
+      :scroll="soul.scroll"
+      :childrenColumnName="soul.childrenColumnName"
+      :rowClassName="soul.changeClassName"
+      :rowSelection="
+        soul.useSelection
+          ? {
+              selectedRowKeys: soul.selectedRowKeys,
+              onChange: soul.updateSelect
+            }
+          : null
+      "
+      :bordered="soul.bordered"
+      :expandedRowKeys.sync="soul.expandedRowKeys"
+      :pagination="soul.paginationConfig"
+    >
+      <div slot="title" v-if="soul.useTitle">
+        <span class="cust-title">
+          {{ soul.title }}
+        </span>
+        <div class="cust-table-operator">
+          <a-button-group>
+            <!-- 额外的按钮 -->
+            <template v-for="(tool, i) in soul.toolbar">
+              <a-button
+                :key="i"
+                @click="tool.handler"
+                v-if="!tool.bizCode || soul.hasPerm(tool.bizCode)"
+                >{{ tool.text }}</a-button
+              >
+            </template>
+          </a-button-group>
+        </div>
+      </div>
+      <!-- 单元格渲染插槽（双层的插槽） -->
+      <template
+        v-for="sname in soul.finalColumns
+          .filter((c) => !!c.scopedSlots)
+          .map((c) => c.scopedSlots.customRender)"
+        #[sname]="value, record, index"
+      >
+        <slot :name="`${sname}`" v-bind="{ value, record, index }" />
+      </template>
+      <!-- 列title插槽 -->
+      <template
+        v-for="tname in soul.finalColumns
+          .filter((c) => !!c.slots && c.slots.title)
+          .map((c) => c.slots.title)"
+        #[tname]
+      >
+        <slot :name="tname" />
+      </template>
+    </a-table>
+    <slot name="free" />
+  </div>
+  <span v-else>what the fuck?</span>
+</template>
+<script>
+import SearchForm from './SearchForm'
+
+export default {
+  components: { SearchForm },
+  props: ['soul']
+}
+</script>
+<style lang="less">
+.common-table-container {
+  .ant-table-title {
+    padding: 0px 20px 10px 20px !important;
+    height: 55px;
+    line-height: 55px;
+    border-bottom: 0px !important;
+    background: #ffffff;
+  }
+  .ant-table-wrapper {
+    background: #ffffff;
+    .ant-table-pagination {
+      margin-right: 20px;
+      margin-top: 10px;
+    }
+  }
+  //列表页样式调整
+  .ant-advanced-search-form {
+    margin-bottom: 15px !important;
+    padding: 20px 20px 10px 5px !important;
+    background: #ffffff;
+    .ant-form-item {
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>

src/components/table/index.js

+import TableTemplate from './TableTemplate'
+import TableScript from './TableScript'
+import { SearchType } from './SearchForm'
+
+const fieldType = {
+  STRING: 1, // 字符串(输入)
+  ENUM: 2, // 枚举(选择)
+  DATE: 3, // 日期
+  DATE_RANGE: 4, // 日期选择
+}
+
+const defaultBtn = {
+  QUERY: 'query', // 查询
+  RESET: 'reset', // 重置
+  RETURN: 'return', // 返回
+}
+
+export {
+  TableTemplate,
+  TableScript,
+  fieldType,
+  defaultBtn,
+  SearchType,
+}

src/main.js

@@ -4,7 +4,7 @@ import Storage from 'vue-ls'
 import router from './router/index'
 import store from './store/'
 
-import {VueAxios} from "@/util/axios/request"
+import { VueAxios } from "@/util/axios/request"
 
 import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.less'
@@ -42,6 +42,12 @@ new Vue({
     store.commit('TOGGLE_WEAK', config.colorWeak)
     store.commit('TOGGLE_COLOR', config.primaryColor)
     store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
+    store.commit('changeSize', [window.innerWidth, window.innerHeight])
   },
   render: h => h(App),
+  created() {
+    window.addEventListener('resize', () => {
+      store.commit('changeSize', [window.innerWidth, window.innerHeight])
+    });
+  }
 }).$mount('#app')
\ No newline at end of file

src/store/getters.js

@@ -10,6 +10,7 @@ const getters = {
   userInfo: state => state.user.info,
   addRouters: state => state.permission.addRouters,
   buttons: state => state.user.buttons,
+  size: state => [state.app.width, state.app.height]
 };
 
 export default getters
\ No newline at end of file

src/store/modules/app.js

@@ -28,7 +28,9 @@ const app = {
     weak: false,
     breadcrumb: [],
     isLoading: false,
-    loadingLayer: 0
+    loadingLayer: 0,
+    height: 0,
+    width: 0,
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
@@ -95,43 +97,47 @@ const app = {
     resetLoading: (state) => {
       state.loadingLayer = 0
       state.isLoading = false
+    },
+    changeSize: (state, [width, height]) => {
+      state.height = height;
+      state.width = width;
     }
   },
   actions: {
-    setSidebar: ({commit}, type) => {
+    setSidebar: ({ commit }, type) => {
       commit('SET_SIDEBAR_TYPE', type)
     },
-    CloseSidebar({commit}, {withoutAnimation}) {
+    CloseSidebar({ commit }, { withoutAnimation }) {
       commit('CLOSE_SIDEBAR', withoutAnimation)
     },
-    ToggleDevice({commit}, device) {
+    ToggleDevice({ commit }, device) {
       commit('TOGGLE_DEVICE', device)
     },
-    ToggleTheme({commit}, theme) {
+    ToggleTheme({ commit }, theme) {
       commit('TOGGLE_THEME', theme)
     },
-    ToggleLayoutMode({commit}, mode) {
+    ToggleLayoutMode({ commit }, mode) {
       commit('TOGGLE_LAYOUT_MODE', mode)
     },
-    ToggleFixedHeader({commit}, fixedHeader) {
+    ToggleFixedHeader({ commit }, fixedHeader) {
       if (!fixedHeader) {
         commit('TOGGLE_FIXED_HEADER_HIDDEN', false)
       }
       commit('TOGGLE_FIXED_HEADER', fixedHeader)
     },
-    ToggleFixSiderbar({commit}, fixSiderbar) {
+    ToggleFixSiderbar({ commit }, fixSiderbar) {
       commit('TOGGLE_FIXED_SIDERBAR', fixSiderbar)
     },
-    ToggleFixedHeaderHidden({commit}, show) {
+    ToggleFixedHeaderHidden({ commit }, show) {
       commit('TOGGLE_FIXED_HEADER_HIDDEN', show)
     },
-    ToggleContentWidth({commit}, type) {
+    ToggleContentWidth({ commit }, type) {
       commit('TOGGLE_CONTENT_WIDTH', type)
     },
-    ToggleColor({commit}, color) {
+    ToggleColor({ commit }, color) {
       commit('TOGGLE_COLOR', color)
     },
-    ToggleWeak({commit}, weakFlag) {
+    ToggleWeak({ commit }, weakFlag) {
       commit('TOGGLE_WEAK', weakFlag)
     }
   }

src/util/axios/request.js

@@ -53,6 +53,7 @@ service.interceptors.response.use((response) => {
     return response
   }
   let data = response.data
+  console.info('data', 'datata', data)
   if (response.config.url.replace(response.config.baseURL, '/') != '/login') {
     // 非登录请求时
     if (data.code == SYS_CONST.REQUEST.NOT_LOGIN) {

src/util/util.js

@@ -2,6 +2,7 @@
  * 触发 window.resize
  */
 import store from '@/store/index'
+import {getCommonCode} from '@/api/system/sysCode'
 
 export function triggerWindowResizeEvent() {
   let event = document.createEvent('HTMLEvents')
@@ -95,3 +96,36 @@ export function hasBtnPermission(permission) {
   return myBtns.has(permission)
 }
 
+const bizCode = {
+};
+
+const bizCodeMapping = {
+};
+
+export { bizCode, bizCodeMapping };
+
+/**
+ * 从编码中获取字典值映射和下拉框选项数据
+ */
+ export function getCodeOptions(codes, valueFiled) {
+  if(!valueFiled) {
+    valueFiled = 'valueInt';
+  }
+  return getCommonCode(codes).then(({ data: { data } }) => {
+    const codeMapping = {};
+    const options = {};
+    Object.keys(data).forEach((k) => {
+      const codeArray = data[k];
+      const map = {};
+      options[k] = codeArray.map(c => {
+        map[c[valueFiled]] = c['name'];
+        return {
+          title: c['name'],
+          value: c[valueFiled]
+        };
+      });
+      codeMapping[k] = map;
+    });
+    return [codeMapping, options];
+  });
+}
\ No newline at end of file

src/views/base/communityUser/CommunityUserDetail.vue

-<template>
-  <div class="news-detail">
-    <a-form @submit="handleSubmit" :form="form" class="cust-detail-form">
-      <header-tool-bar>
-        <span class="cust-title" slot="title">
-          <a-icon type="hdd"/>业主用户明细
-        </span>
-        <a-button-group slot="extra">
-          <!--<a-button type='primary' htmlType='submit' :loading="loading">保存</a-button>-->
-          <a-button type="primary" @click="back" ghost>返回</a-button>
-        </a-button-group>
-      </header-tool-bar>
-      <a-card title="业主用户详情" class="cust-normal-card">
-        <a-row :utter="gutter">
-          <a-col :span="6">
-            <a-form-item
-              v-bind="formItemLayout"
-              label='实名'>
-              <span>{{communityUser.realName}}</span>
-            </a-form-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-item
-              v-bind="formItemLayout"
-              label='昵称'>
-              <span>{{communityUser.nickname}}</span>
-            </a-form-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-item
-              v-bind="formItemLayout"
-              label='电话'>
-              <span>{{communityUser.phone}}</span>
-            </a-form-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-item
-              v-bind="formItemLayout"
-              label='生日'>
-              <span>{{formatDate(new Date(communityUser.birthday), 'yyyy-MM-dd')}}</span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :utter="gutter">
-          <a-col :span="6">
-            <a-form-item
-              v-bind="formItemLayout"
-              label='头像'>
-              <img style="width: 86px" :src="communityUser.avatar">
-            </a-form-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-item
-              v-bind="formItemLayout"
-              label='性别'>
-              <span v-for="item in this.sexList" :key="item.id" :value ="item.valueInt" v-if="communityUser.sex==item.valueInt">
-                {{item.name}}
-              </span>
-            </a-form-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-item
-              v-bind="formItemLayout"
-              label='级别'>
-              <span>{{communityUser.level}}</span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-card>
-      <a-card title="房产列表" class="cust-normal-card">
-        <a-table
-          :columns="columns"
-          :dataSource="itemList"
-          size="middle"
-          :rowKey="rowKey"
-          :pagination="false"
-          class="cust-card-table"
-          bordered
-        >
-        </a-table>
-      </a-card>
-    </a-form>
-  </div>
-</template>
-
-<script>
-    import HeaderToolBar from '@/components/page/HeaderToolBar'
-    import {getDetail, save } from "../../../api/base/communityUser";
-    import moment from 'moment';
-    import {formatDate} from "@/util/util";
-
-    let listPathName = 'communityUserList';
-
-    const columns = [
-      {title: '社区',width:150, dataIndex: 'communityName'},
-      {title: '房产编号', dataIndex: 'code'}
-    ]
-
-  export default {
-    name: "CommunityUserDetail",
-    components: {HeaderToolBar},
-    data() {
-      return {
-        id: 0,
-        online: false,
-        rowKey: "id",
-        columns: columns,
-        form: this.$form.createForm(this),
-        communityUser: {},
-        sexList: [],
-        itemList: [],
-        formItemLayout: {
-          labelCol: {
-            sm: {span: 8},
-          },
-          wrapperCol: {
-            sm: {span: 16},
-          },
-        },
-        loading: false,
-        gutter: 8,
-      }
-    },
-    activated() {
-      this.form.resetFields()
-      this.initData()
-    },
-    methods: {
-      moment,
-      formatDate,
-      initData() {
-        this.id = this.$route.query.id || 0
-        getDetail(this.id).then(resp => {
-          if (resp && resp.code == SYS_CONST.REQUEST.SUCCEED) {
-            this.communityUser = resp.data.communityUser
-            this.sexList = resp.data.codeMap[SYS_CONST.CODE.USER_SEX]
-            this.itemList = resp.data.houseList || []
-          }
-        })
-      },
-      handleSubmit(e) {
-        e.preventDefault();
-        this.form.validateFieldsAndScroll((err, values) => {
-          if (!err) {
-            let community = this.$valueCopy(this.communityUser, values.communityUser);
-            save(community).then(resp => {
-              if (resp && resp.code == SYS_CONST.REQUEST.SUCCEED) {
-                this.$notification.success({message: '系统提示', description: "保存成功", duration: 4,});
-                this.$router.push({name: listPathName, query: {isModify: this.id != 0}})
-              }
-            })
-          }
-        })
-      },
-      back() {
-        this.$router.push({name: listPathName})
-      },
-    },
-    mounted() {
-    },
-  };
-</script>
-<style>
-  .news-detail .cust-normal-card .ant-row {
-    height: auto;
-  }
-</style>

src/views/base/communityUser/CommunityUserList.vue

-<template>
-  <a-card class="cust-list-cart">
-    <div>
-      <a-form layout="horizontal" class="ant-advanced-search-form">
-        <div>
-          <a-row>
-            <a-col :span="6">
-              <a-form-item label="昵称" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
-                <a-input @pressEnter="search" placeholder="请输入" v-model="query.nickname"/>
-              </a-form-item>
-            </a-col>
-            <a-col :span="6">
-              <a-form-item label="电话" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
-                <a-input oninput="value=value.replace(/[^\d]/g,'')" @pressEnter="search" placeholder="请输入" v-model="query.phone"/>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </div>
-      </a-form>
-    </div>
-    <div>
-      <a-table
-        size="middle"
-        @change="sortChange"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="false"
-        :rowKey="rowKey"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: updateSelect}"
-        bordered
-      >
-        <div slot="title" slot-scope="data">
-          <span class="cust-title">
-            <a-icon type="hdd"/>业主用户列表{{data.none}}
-          </span>
-          <div class="cust-table-operator">
-            <a-button-group>
-              <a-button type="primary" @click="search">查询</a-button>
-              <a-button @click="reset">重置</a-button>
-            </a-button-group>
-          </div>
-        </div>
-        <div slot="footer" slot-scope="data">
-          {{data.none}}
-          <a-pagination
-            @change="pageChange"
-            :current="query.page"
-            :defaultPageSize="defaultPageSize"
-            :pageSizeOptions="$pageSizeOptions"
-            @showSizeChange="sizeChange"
-            class="cust-pagination"
-            size="small"
-            :total="total"
-            showSizeChanger
-            showQuickJumper
-            :showTotal="$showTotal"/>
-        </div>
-        <span slot="tags" slot-scope="text">
-          <img :src=text  style="width: 25px;height: 25px;"/>
-        </span>
-        <span slot="action" slot-scope="text, record">
-          <a @click="editRow(record)">详情</a>
-        </span>
-        <span slot="sexTags" slot-scope="text">
-          <div v-for="option in sexList" :key="option.id">
-          <a-tag
-            v-if="text == option.valueInt"
-            :color="setSexColor(option)"
-            :key="text"
-          >
-          {{ option.name }}
-          </a-tag>
-          </div>
-        </span>
-      </a-table>
-
-    </div>
-  </a-card>
-</template>
-
-<script>
-  import {formatDate, humpToLine,setOrder} from "@/util/util";
-  import {getCommonCode} from "@/api/system/sysCode";
-  import {getPage} from "../../../api/base/communityUser";
-
-
-  let detailPathName = 'communityUserDetail'
-  const dataSource = []
-  const columns = [
-    {title: '头像', width: 80, dataIndex: 'avatar',align:'center',scopedSlots: {customRender: 'tags'}},
-    {title: '昵称', width: 180, dataIndex: 'nickname'},
-    {title: '电话', width: 100, dataIndex: 'phone'},
-    {title: '真实姓名', width: 90, dataIndex: 'realName'},
-    {title: '级别', width: 90, dataIndex: 'level'},
-    {
-      title: '性别',
-      width: 70,
-      dataIndex: 'sex',
-      scopedSlots: {customRender: 'sexTags'}
-    },
-    {
-      title: '生日',
-      dataIndex: 'birthday',
-      width: 110,
-      customRender: (text) => formatDate(new Date(text), 'yyyy-MM-dd')
-    },
-    {title: '备注', dataIndex: 'remark'},
-    {
-      title: '创建时间',
-      dataIndex: 'ctDate',
-      width: 120,
-      sorter: true,
-      customRender: (text) => formatDate(new Date(text), 'yyyy-MM-dd hh:mm')
-    },
-    {title: '操作', key: 'operation', width: 60, scopedSlots: {customRender: 'action'}}
-  ]
-
-  export default {
-    name: 'CommunityHouseList',
-    data() {
-      return {
-        isFirstLoad: true,
-        query: {
-          nickname: "",
-          phone: "",
-          sort: "",
-          page: 1,
-          size: 10,
-        },
-        ctDatePicker: [],
-        total: 0,
-        rowKey: "id",
-        columns: columns,
-        dataSource: dataSource,
-        selectedRowKeys: [],
-        selectedRows: [],
-        sexList: [],
-      }
-    },
-    computed: {
-      defaultPageSize: function () {
-        return this.$defaultPageSize()
-      }
-    },
-    methods: {
-      search() {
-        this.query.page = 1
-        this.loadData();
-      },
-      reset() {
-        this.query.page = 1
-        this.query.nickname = "";
-        this.query.phone = "";
-        this.loadData();
-      },
-      pageChange(page) {
-        this.query.page = page;
-        this.loadData();
-      },
-      sizeChange(current, size) {
-        this.query.size = size;
-        this.loadData();
-      },
-      loadData(pageSize) {
-        if (pageSize && !isNaN(pageSize)) {
-          this.query.size = pageSize
-        }
-        getPage(this.query).then(response => {
-          if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
-            let respData = response.data;
-            this.total = respData.total;
-            this.dataSource = respData.list;
-          }
-        });
-      },
-      sortChange(pagination, filters, sorter) {
-        this.query.sort = humpToLine(sorter.field);
-        this.query.order = setOrder(sorter.order);
-        this.loadData();
-      },
-      editRow(row) {
-        this.$router.push({name: detailPathName, query: {id: row ? row.id : 0}})
-      },
-      updateSelect(selectedRowKeys) {
-        this.selectedRowKeys = selectedRowKeys
-      },
-      setSexColor(option) {
-        if (option.valueInt == SYS_CONST.USER_SEX.MALE) {
-          return "blue";
-        } else if (option.valueInt == SYS_CONST.USER_SEX.FEMALE) {
-          return "#FFB7DD"
-        } else {
-          return "#DDDDDD"
-        }
-      },
-      getSysCode() {
-        getCommonCode([SYS_CONST.CODE.USER_SEX]).then(response => {
-          if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
-            this.sexList = response.data.data[SYS_CONST.CODE.USER_SEX]
-          }
-        })
-      },
-    },
-    mounted() {
-      this.getSysCode();
-    },
-    activated() {
-      if (this.isFirstLoad == true) {
-        this.loadData(this.defaultPageSize)
-        this.isFirstLoad = false
-      } else {
-        let isModify = this.$route.query.isModify
-        if (isModify == true) {
-          this.loadData()
-        } else if (isModify != undefined) {
-          this.loadData()
-        }
-      }
-    }
-  }
-</script>
\ No newline at end of file

src/views/base/communityUser/CommunityUserRouteView.vue

-<template>
-  <keep-alive v-if="keepAlive">
-    <router-view/>
-  </keep-alive>
-  <router-view v-else/>
-</template>
-
-<script>
-  export default {
-    name: "CommunityUserRouteView",
-    computed: {
-      keepAlive() {
-        return this.$route.meta.keepAlive
-      }
-    },
-  }
-</script>
\ No newline at end of file

src/views/base/errorLog/ErrorLogList.vue

 <template>
-  <a-card>
-    <div class="cust-list-cart" ref="code">
-      <a-form layout="horizontal" class="ant-advanced-search-form">
-        <div>
-          <a-row>
-            <a-col :span="6">
-              <a-form-item label="项目名称" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
-                <a-input
-                  @pressEnter="search"
-                  style="width: 100%"
-                  v-model="query.projectName"
-                  placeholder="请输入"/>
-              </a-form-item>
-            </a-col>
-            <a-col :span="6">
-              <a-form-item label="错误码" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
-                <a-input
-                  @pressEnter="search"
-                  style="width: 100%"
-                  v-model="query.errorCode"
-                  placeholder="请输入"/>
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="创建时间" :labelCol="{span: 4}" :wrapperCol="{span: 20}">
-                <a-range-picker style="width:100%" :value="ctDatePicker" @change="onCtDateChange"/>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </div>
-      </a-form>
-
-      <a-table
-        size="middle"
-        @change="sortChange"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="false"
-        :rowKey="rowKey"
-        bordered
-      >
-        <div slot="title" slot-scope="data">
-          <span class="cust-title">
-
-            <a-icon type="hdd"/>异常日志列表{{data.none}}
-          </span>
-          <div class="cust-table-operator">
-            <a-button-group>
-              <a-button type="primary" @click="search">查询</a-button>
-              <a-button @click="reset">重置</a-button>
-            </a-button-group>
-          </div>
-        </div>
-        <div slot="footer" slot-scope="data">
-          {{data.none}}
-          <a-pagination
-            @change="pageChange"
-            :defaultPageSize="defaultPageSize"
-            :pageSizeOptions="$pageSizeOptions"
-            @showSizeChange="sizeChange"
-            class="cust-pagination"
-            size="small"
-            :total="total"
-            showSizeChanger
-            showQuickJumper
-            :showTotal="$showTotal"/>
-        </div>
-      </a-table>
-    </div>
-  </a-card>
+  <table-template :soul="this"> </table-template>
 </template>
-
 <script>
-
-  import {getPage} from "@/api/base/baseErrorLog";
-  import {formatDate, humpToLine, setOrder} from "@/util/util";
-
-  const dataSource = [];
-
-  const columns = [
-    {title: '操作人员', width: 120, dataIndex: 'userName'},
-    {title: '项目名称', width: 130, dataIndex: 'projectName'},
-    {title: '错误码', width: 100, dataIndex: 'errorCode'},
-    {title: '平台类型', width: 100, dataIndex: 'platform'},
-    {title: '日志异常信息', dataIndex: 'content'},
+import { TableTemplate, TableScript, SearchType } from '@/components/table'
+import { getPage } from '@/api/base/baseErrorLog'
+const columns = [
+  { title: '操作人员', width: 120, dataIndex: 'userName' },
+  {
+    title: '项目名称',
+    width: 130,
+    dataIndex: 'projectName',
+    filter: { type: SearchType.STRING }
+  },
+  { title: '错误码', width: 100, dataIndex: 'errorCode', filter: { type: SearchType.STRING } },
+  { title: '平台类型', width: 100, dataIndex: 'platform', filter: { type: SearchType.STRING } },
+  { title: '日志异常信息', dataIndex: 'content', width: 300, ellipsis: true, filter: { type: SearchType.STRING } },
   {
     title: '创建时间',
-      dataIndex: 'ctDate',
+    dataIndex: 'createTime',
     width: 120,
     sorter: true,
-      customRender: (text) => formatDate(new Date(text), 'yyyy-MM-dd hh:mm')
+    filter: { type: SearchType.STRING }
+    // customRender: (text) => formatDate(new Date(text), 'yyyy-MM-dd hh:mm')
   }
+]
 
-  ];
-
-  export default {
-    name: "ErrorLogList",
+export default {
+  name: 'ErrorLogList',
+  mixins: [TableScript],
+  components: { TableTemplate },
   data() {
     return {
-        query: {
-          page: 1,
-          size: 10,
-          projectName: "",
-          errorCode: "",
-          ctDateBegin: "",
-          ctDateEnd: "",
-          sort: ""
-        },
-        ctDatePicker: [],
-        rowKey: "id",
-        total: 0,
-        columns: columns,
-        dataSource: dataSource,
-        isFirstLoad: true,
+      columns,
+      useYScroll: true,
+      title: '错误日志'
     }
   },
   methods: {
-      reset() {
-        this.query.page = 1;
-        this.query.projectName = "";
-        this.query.errorCode = "";
-        this.query.ctDateBegin = "";
-        this.query.ctDateEnd = "";
-        this.ctDatePicker = [];
-        this.loadData();
-      },
-
-      loadData(size) {
-        if (size && !isNaN(size)) {
-          this.query.size = size
-        }
-        getPage(this.query).then(response => {
-          if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
-            let respData = response.data;
-            this.dataSource = respData.list;
-            this.total = respData.total;
-          }
-        });
-      },
-      search() {
-        this.query.page = 1;
-        this.loadData();
-      },
-      onCtDateChange(date, dateString) {
-        this.ctDatePicker = date;
-        this.query.ctDateBegin = dateString[0]
-        this.query.ctDateEnd = dateString[1]
-        this.loadData()
-      },
-      pageChange(page) {
-        this.query.page = page;
-        this.loadData();
-      },
-      sizeChange(current, size) {
-        this.query.size = size;
-        this.loadData();
-      },
-      sortChange(pagination, filters, sorter) {
-        this.query.sort = humpToLine(sorter.field);
-        this.query.order = setOrder(sorter.order);
-        this.loadData();
-      },
-    },
-    computed: {
-      defaultPageSize: function () {
-        return this.$defaultPageSize()
-      }
-    },
-    mounted() {
-    },
-    activated() {
-      if (this.isFirstLoad == true) {
-        this.loadData(this.defaultPageSize)
-        this.isFirstLoad = false
-      } else {
-        let isModify = this.$route.query.isModify
-        if (isModify == true) {
-          this.loadData()
-        } else if (isModify != undefined) {
-          this.loadData()
-        }
-      }
-
-    }
+    queryData: getPage
   }
+}
 </script>
\ No newline at end of file
-
-<style scoped>
-
-</style>
\ No newline at end of file

src/views/base/errorLog/ErrorLogListX.vue

+<template>
+  <a-card>
+    <div class="cust-list-cart" ref="code">
+      <a-form layout="horizontal" class="ant-advanced-search-form">
+        <div>
+          <a-row>
+            <a-col :span="6">
+              <a-form-item
+                label="项目名称"
+                :labelCol="{ span: 8 }"
+                :wrapperCol="{ span: 16 }"
+              >
+                <a-input
+                  @pressEnter="search"
+                  style="width: 100%"
+                  v-model="query.projectName"
+                  placeholder="请输入"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-item
+                label="错误码"
+                :labelCol="{ span: 8 }"
+                :wrapperCol="{ span: 16 }"
+              >
+                <a-input
+                  @pressEnter="search"
+                  style="width: 100%"
+                  v-model="query.errorCode"
+                  placeholder="请输入"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item
+                label="创建时间"
+                :labelCol="{ span: 4 }"
+                :wrapperCol="{ span: 20 }"
+              >
+                <a-range-picker
+                  style="width: 100%"
+                  :value="ctDatePicker"
+                  @change="onCtDateChange"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </div>
+      </a-form>
+
+      <a-table
+        size="middle"
+        @change="sortChange"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="false"
+        :rowKey="rowKey"
+        bordered
+      >
+        <div slot="title" slot-scope="data">
+          <span class="cust-title">
+            <a-icon type="hdd" />异常日志列表{{ data.none }}
+          </span>
+          <div class="cust-table-operator">
+            <a-button-group>
+              <a-button type="primary" @click="search">查询</a-button>
+              <a-button  key="dddsa" type="primary" @click="exportExcel">xxsad</a-button>
+              <a-button @click="reset">重置</a-button>
+            </a-button-group>
+          </div>
+        </div>
+<!--         <div slot="footer" slot-scope="data">
+          {{ data.none }}
+          <a-pagination
+            @change="pageChange"
+            :defaultPageSize="defaultPageSize"
+            :pageSizeOptions="$pageSizeOptions"
+            @showSizeChange="sizeChange"
+            class="cust-pagination"
+            size="small"
+            :total="total"
+            showSizeChanger
+            showQuickJumper
+            :showTotal="$showTotal"
+          />
+        </div> -->
+      </a-table>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import { getPage, exportExxx } from '@/api/base/baseErrorLog'
+import { formatDate, humpToLine, setOrder } from '@/util/util'
+import fileDownload from 'js-file-download';
+
+const dataSource = []
+
+const columns = [
+  { title: '操作人员', width: 120, dataIndex: 'userName' },
+  { title: '项目名称', width: 130, dataIndex: 'projectName' },
+  { title: '错误码', width: 100, dataIndex: 'errorCode' },
+  { title: '平台类型', width: 100, dataIndex: 'platform' },
+  { title: '日志异常信息', dataIndex: 'content', width: 300, ellipsis: true },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 120,
+    sorter: true,
+    customRender: (text) => formatDate(new Date(text), 'yyyy-MM-dd hh:mm')
+  }
+]
+
+export default {
+  name: 'ErrorLogList',
+  data() {
+    return {
+      query: {
+        page: 1,
+        size: 10,
+        projectName: '',
+        errorCode: '',
+        ctDateBegin: '',
+        ctDateEnd: '',
+        sort: ''
+      },
+      ctDatePicker: [],
+      rowKey: 'id',
+      total: 0,
+      columns: columns,
+      dataSource: dataSource,
+      isFirstLoad: true
+    }
+  },
+  methods: {
+    reset() {
+      this.query.page = 1
+      this.query.projectName = ''
+      this.query.errorCode = ''
+      this.query.ctDateBegin = ''
+      this.query.ctDateEnd = ''
+      this.ctDatePicker = []
+      this.loadData()
+    },
+
+    exportExcel() {
+      exportExxx().then((response) => {
+        if (response && response.data) {
+          fileDownload(response.data, '退票统计.xlsx')
+        }
+      })
+    },
+
+    loadData(size) {
+      if (size && !isNaN(size)) {
+        this.query.size = size
+      }
+      getPage(this.query).then((response) => {
+        if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
+          let respData = response.data
+          this.dataSource = respData.list
+          this.total = respData.total
+        }
+      })
+    },
+    search() {
+      this.query.page = 1
+      this.loadData()
+    },
+    onCtDateChange(date, dateString) {
+      this.ctDatePicker = date
+      this.query.ctDateBegin = dateString[0]
+      this.query.ctDateEnd = dateString[1]
+      this.loadData()
+    },
+    pageChange(page) {
+      this.query.page = page
+      this.loadData()
+    },
+    sizeChange(current, size) {
+      this.query.size = size
+      this.loadData()
+    },
+    sortChange(pagination, filters, sorter) {
+      this.query.sort = humpToLine(sorter.field)
+      this.query.order = setOrder(sorter.order)
+      this.loadData()
+    }
+  },
+  computed: {
+    defaultPageSize: function () {
+      return this.$defaultPageSize()
+    }
+  },
+  mounted() {},
+  activated() {
+    if (this.isFirstLoad == true) {
+      this.loadData(this.defaultPageSize)
+      this.isFirstLoad = false
+    } else {
+      let isModify = this.$route.query.isModify
+      if (isModify == true) {
+        this.loadData()
+      } else if (isModify != undefined) {
+        this.loadData()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file

src/views/group/GroupWechatConfigDetail.vue

-<template>
-  <div style="padding: 0px 10px">
-    <a-card
-      title="Banner"
-      class="group-wechat-conf-card"
-      :headStyle="style.groupCardHeadStyle"
-      :bodyStyle="style.groupCardBodyStyle"
-    >
-      <a-button slot="extra" shape="circle" @click="handleEditBanner()">
-        <a-icon type="plus" :style="style.groupCardBtnStyle" />
-      </a-button>
-      <a-card
-        hoverable
-        :style="style.elementCardStyle"
-        v-for="item in bannerList"
-        :key="item.id"
-      >
-        <img
-          slot="cover"
-          alt="example"
-          :style="style.bannerImageStyle"
-          :src="item.imageUrl"
-        />
-        <template slot="actions" class="ant-card-actions">
-          <a-icon key="edit" type="edit" @click="handleEditBanner(item)" />
-          <a-icon key="del" type="delete" @click="handleDelBanner(item.id)" />
-        </template>
-      </a-card>
-    </a-card>
-
-    <a-card
-      :headStyle="style.groupCardHeadStyle"
-      :bodyStyle="style.groupCardBodyStyle"
-      class="group-wechat-conf-card"
-      title="Logo"
-    >
-      <a-button slot="extra" shape="circle" @click="handleEditLogo()">
-        <a-icon type="plus" :style="style.groupCardBtnStyle" />
-      </a-button>
-
-      <a-card
-        hoverable
-        :style="style.elementCardStyle"
-        v-for="item in subsidiaryLinkList"
-        :key="item.id"
-      >
-        <img
-          slot="cover"
-          alt="example"
-          :style="style.logoImageStyle"
-          :src="item.logoUrl"
-        />
-        <a-card-meta>
-          <div slot="title" :style="style.logoCardTitleStyle">
-            {{ item.name }}
-          </div>
-        </a-card-meta>
-        <template slot="actions" class="ant-card-actions">
-          <a-icon key="edit" type="edit" @click="handleEditLogo(item)" />
-          <a-icon key="del" type="delete" @click="handleDelLogo(item.id)" />
-        </template>
-      </a-card>
-    </a-card>
-    <a-modal
-      title="Banner管理"
-      :maskClosable="false"
-      :visible="visibleBanner"
-      @cancel="handleBannerModalCancel"
-      :confirmLoading="bannerModel.loading"
-      okText="保存"
-      @ok="handleBannerSave"
-      :destroyOnClose="true"
-      :centered="false"
-    >
-      <a-form-model
-        ref="bannerForm"
-        :model="bannerModel.data"
-        :label-col="labelCol"
-        :wrapper-col="wrapperCol"
-        :rules="bannerModel.rules"
-      >
-        <a-form-model-item label="图片" prop="imageUrl">
-          <a-upload
-            name="file"
-            list-type="picture-card"
-            class="avatar-uploader"
-            :show-upload-list="false"
-            accept="image/*"
-            :action="getUploadImageUrl(business)"
-            :headers="uploadImageHeader"
-            :before-upload="beforeUpload"
-            @change="handleBannerChange"
-          >
-            <img
-              v-if="bannerModel.data.imageUrl"
-              :src="bannerModel.data.imageUrl"
-              alt="avatar"
-              :style="style.bannerImageStyle"
-            />
-            <div v-else>
-              <a-icon :type="bannerModel.loading ? 'loading' : 'plus'" />
-              <div class="ant-upload-text">Upload</div>
-            </div>
-          </a-upload>
-        </a-form-model-item>
-        <a-form-model-item label="排序号" prop="showOrder">
-          <a-input-number
-            v-model="bannerModel.data.showOrder"
-            :min="0"
-            :precision="0"
-          />
-        </a-form-model-item>
-        <a-form-model-item label="备注">
-          <a-textarea
-            :autoSize="{ minRows: 4, maxRows: 4 }"
-            v-model="bannerModel.data.remark"
-          />
-        </a-form-model-item>
-      </a-form-model>
-    </a-modal>
-
-    <a-modal
-      title="Logo管理"
-      :maskClosable="false"
-      :visible="visibleLogo"
-      @cancel="handleLogoModalCancel"
-      :confirmLoading="logoModel.loading"
-      okText="保存"
-      @ok="handleLogoSave"
-      :destroyOnClose="true"
-      :centered="false"
-    >
-      <a-form-model
-        ref="logoForm"
-        :model="logoModel.data"
-        :label-col="labelCol"
-        :wrapper-col="wrapperCol"
-        :rules="logoModel.rules"
-      >
-        <a-form-model-item label="公众号名称" prop="name">
-          <a-input v-model="logoModel.data.name" />
-        </a-form-model-item>
-        <a-form-model-item label="Logo" prop="logoUrl">
-          <a-upload
-            name="file"
-            list-type="picture-card"
-            class="avatar-uploader"
-            :show-upload-list="false"
-            accept="image/*"
-            :action="getUploadImageUrl(business)"
-            :headers="uploadImageHeader"
-            :before-upload="beforeUpload"
-            @change="handleLogoChange"
-          >
-            <img
-              v-if="logoModel.data.logoUrl"
-              :src="logoModel.data.logoUrl"
-              alt="avatar"
-              :style="style.logoImageStyle"
-            />
-            <div v-else>
-              <a-icon :type="logoModel.loading ? 'loading' : 'plus'" />
-              <div class="ant-upload-text">Upload</div>
-            </div>
-          </a-upload>
-        </a-form-model-item>
-        <a-form-model-item label="关注二维码" prop="qrcodeUrl">
-          <a-upload
-            name="file"
-            list-type="picture-card"
-            class="avatar-uploader"
-            :show-upload-list="false"
-            accept="image/*"
-            :action="getUploadImageUrl(business)"
-            :headers="uploadImageHeader"
-            :before-upload="beforeUpload"
-            @change="handleQrcodeChange"
-          >
-            <img
-              v-if="logoModel.data.qrcodeUrl"
-              :src="logoModel.data.qrcodeUrl"
-              alt="avatar"
-              :style="style.logoImageStyle"
-            />
-            <div v-else>
-              <a-icon :type="logoModel.loading ? 'loading' : 'plus'" />
-              <div class="ant-upload-text">Upload</div>
-            </div>
-          </a-upload>
-        </a-form-model-item>
-        <a-form-model-item label="排序号" prop="showOrder">
-          <a-input-number
-            v-model="logoModel.data.showOrder"
-            :min="0"
-            :precision="0"
-          />
-        </a-form-model-item>
-        <a-form-model-item label="备注">
-          <a-textarea
-            :autoSize="{ minRows: 4, maxRows: 4 }"
-            v-model="logoModel.data.remark"
-          />
-        </a-form-model-item>
-      </a-form-model>
-    </a-modal>
-  </div>
-</template>
-
-<script>
-import {
-  getIndexConfig,
-  delLogoById,
-  delbannerById,
-  saveBanner,
-  saveLogo,
-} from "@/api/group/groupWechat";
-import {
-  getUploadImageHeader,
-  getUploadImageUrl,
-} from "@/api/common/fileUpload";
-export default {
-  name: "GroupWechatConfigDetail",
-  data() {
-    return {
-      business: "groupwechat",
-      visibleBanner: false,
-      visibleLogo: false,
-      uploadImageHeader: getUploadImageHeader(),
-      bannerList: [],
-      subsidiaryLinkList: [],
-      labelCol: { span: 5 },
-      wrapperCol: { span: 18 },
-      bannerModel: {
-        data: {
-          id: 0,
-          remark: "",
-          showOrder: 0,
-          imageUrl: "",
-        },
-        loading: false,
-        rules: {
-          showOrder: [
-            { required: true, message: "排序号必填", trigger: "change" },
-          ],
-          imageUrl: [
-            { required: true, message: "图片必须上传", trigger: "change" },
-          ],
-        },
-      },
-      logoModel: {
-        data: {
-          id: 0,
-          name: "",
-          remark: "",
-          showOrder: 0,
-          logoUrl: "",
-          qrcodeUrl: "",
-        },
-        loading: false,
-        rules: {
-          name: [
-            { required: true, message: "公众号名称必填", trigger: "change" },
-          ],
-          showOrder: [
-            { required: true, message: "排序号必填", trigger: "change" },
-          ],
-          logoUrl: [
-            { required: true, message: "Logo必须上传", trigger: "change" },
-          ],
-          qrcodeUrl: [
-            {
-              required: true,
-              message: "公众号二维码必须上传",
-              trigger: "change",
-            },
-          ],
-        },
-      },
-      style: {
-        groupCardBtnStyle: { fontSize: "16px" },
-        groupCardHeadStyle: {
-          color: "white",
-          height: "15px",
-          fontWeight: "bold",
-          lineHeight: "15px",
-          background: "rgb(71 81 84)",
-        },
-        groupCardBodyStyle: { margin: "0px 8px 8px 8px" },
-        elementCardStyle: {
-          float: "left",
-          marginRight: "8px",
-          marginTop: "8px",
-        },
-        bannerImageStyle: {
-          width: "250px",
-          height: "125px",
-        },
-        logoImageStyle: {
-          width: "120px",
-          height: "120px",
-        },
-        logoCardTitleStyle: {
-          textAlign: "center",
-          fontSize: "14px",
-          fontWeight: "bold",
-          height: "30px",
-          lineHeight: "30px",
-          borderTop: "1px dashed Gainsboro",
-          textOverflow: "ellipsis",
-          overflow: "hidden",
-          width: "110px",
-        },
-      },
-    };
-  },
-  activated() {
-    this.initData();
-  },
-  methods: {
-    getUploadImageUrl,
-    initData() {
-      getIndexConfig().then((resp) => {
-        this.bannerList = resp.data.bannerList || [];
-        this.subsidiaryLinkList = resp.data.subsidiaryLinkList || [];
-      });
-    },
-    handleDelBanner(id) {
-      let _this = this;
-      this.$confirm({
-        title: "提示",
-        content: "确定删除选中的记录吗？",
-        onOk() {
-          delbannerById(id).then(() => {
-            _this.initData();
-          });
-        },
-        onCancel() {},
-      });
-    },
-    handleDelLogo(id) {
-      let _this = this;
-      this.$confirm({
-        title: "提示",
-        content: "确定删除选中的记录吗？",
-        onOk() {
-          delLogoById(id).then(() => {
-            _this.initData();
-          });
-        },
-        onCancel() {},
-      });
-    },
-    beforeUpload(file) {
-      const isJpgOrPng =
-        file.type === "image/jpeg" || file.type === "image/png";
-      if (!isJpgOrPng) {
-        this.$message.error("只能上传图片文件!");
-      }
-      const isLt2M = file.size / 1024 / 1024 < 10;
-      if (!isLt2M) {
-        this.$message.error("上传文件不能超过10MB!");
-      }
-      return isJpgOrPng && isLt2M;
-    },
-    handleBannerModalCancel() {
-      this.visibleBanner = false;
-    },
-    handleLogoModalCancel() {
-      this.visibleLogo = false;
-    },
-    handleEditBanner(item) {
-      if (item) {
-        this.bannerModel.data.id = item.id;
-        this.bannerModel.data.remark = item.remark;
-        this.bannerModel.data.showOrder = item.showOrder;
-        this.bannerModel.data.imageUrl = item.imageUrl;
-      } else {
-        this.bannerModel.data.id = 0;
-        this.bannerModel.data.remark = "";
-        this.bannerModel.data.imageUrl = "";
-        let showOrder = 0;
-        this.bannerList.forEach((item) => {
-          if (item.showOrder > showOrder) {
-            showOrder = item.showOrder;
-          }
-        });
-        this.bannerModel.data.showOrder = ++showOrder;
-      }
-      this.visibleBanner = true;
-    },
-    handleEditLogo(item) {
-      if (item) {
-        this.logoModel.data.id = item.id;
-        this.logoModel.data.name = item.name;
-        this.logoModel.data.remark = item.remark;
-        this.logoModel.data.showOrder = item.showOrder;
-        this.logoModel.data.logoUrl = item.logoUrl;
-        this.logoModel.data.qrcodeUrl = item.qrcodeUrl;
-      } else {
-        this.logoModel.data.id = 0;
-        this.logoModel.data.name = "";
-        this.logoModel.data.remark = "";
-        this.logoModel.data.logoUrl = "";
-        this.logoModel.data.qrcodeUrl = "";
-        let showOrder = 0;
-        this.subsidiaryLinkList.forEach((item) => {
-          if (item.showOrder > showOrder) {
-            showOrder = item.showOrder;
-          }
-        });
-        this.logoModel.data.showOrder = ++showOrder;
-      }
-      this.visibleLogo = true;
-    },
-    handleBannerChange(info) {
-      if (info.file.status === "uploading") {
-        this.bannerModel.loading = true;
-        return;
-      }
-      if (info.file.status === "done") {
-        this.bannerModel.data.imageUrl = info.file.response.data.url;
-        this.bannerModel.loading = false;
-        this.$refs.bannerForm.clearValidate("imageUrl");
-      }
-    },
-    handleLogoChange(info) {
-      if (info.file.status === "uploading") {
-        this.logoModel.loading = true;
-        return;
-      }
-      if (info.file.status === "done") {
-        this.logoModel.data.logoUrl = info.file.response.data.url;
-        this.logoModel.loading = false;
-        this.$refs.logoForm.clearValidate("logoUrl");
-      }
-    },
-    handleQrcodeChange(info) {
-      if (info.file.status === "uploading") {
-        this.logoModel.loading = true;
-        return;
-      }
-      if (info.file.status === "done") {
-        this.logoModel.data.qrcodeUrl = info.file.response.data.url;
-        this.logoModel.loading = false;
-        this.$refs.logoForm.clearValidate("qrcodeUrl");
-      }
-    },
-    handleBannerSave() {
-      this.$refs.bannerForm.validate((valid) => {
-        if (valid) {
-          this.bannerModel.loading = true;
-          saveBanner(this.bannerModel.data)
-            .then((resp) => {
-              if (resp && resp.code == SYS_CONST.REQUEST.SUCCEED) {
-                this.visibleBanner = false;
-                this.initData();
-              }
-              this.bannerModel.loading = false;
-            })
-            .catch(() => {
-              this.bannerModel.loading = false;
-            });
-        } else {
-          return false;
-        }
-      });
-    },
-    handleLogoSave() {
-      this.$refs.logoForm.validate((valid) => {
-        if (valid) {
-          this.logoModel.loading = true;
-          saveLogo(this.logoModel.data)
-            .then((resp) => {
-              if (resp && resp.code == SYS_CONST.REQUEST.SUCCEED) {
-                this.visibleLogo = false;
-                this.initData();
-              }
-              this.logoModel.loading = false;
-            })
-            .catch(() => {
-              this.logoModel.loading = false;
-            });
-        } else {
-          return false;
-        }
-      });
-    },
-  },
-};
-</script>
-
-<style lang="less">
-.group-wechat-conf-card {
-  min-height: 250px;
-  margin-top: 10px;
-  .ant-card-extra {
-    padding: 0px;
-  }
-}
-</style>
-

src/views/group/GroupWechatConfigRouteView.vue

-<template>
-  <keep-alive v-if="keepAlive">
-    <router-view />
-  </keep-alive>
-  <router-view v-else />
-</template>
-
-<script>
-    export default {
-        name: "GroupWechatConfigRouteView",
-        computed: {
-            keepAlive () {
-                return this.$route.meta.keepAlive
-            }
-        },
-    }
-</script>
\ No newline at end of file