style: 优化代码

src/components/Query/index.vue

@@ -92,8 +92,8 @@
         <el-button v-if="folding" :size="size" @click="show = !show">
           {{ show ? "折叠" : "展开" }}
         </el-button>
-        <el-button type="primary" :size="size" @click.prevent="onSubmit">查询</el-button>
-        <el-button :size="size" @click="resetForm()">重置</el-button>
+        <el-button type="primary" :size="size" @click.prevent="onSubmit">{{ $t('common.search') }}</el-button>
+        <el-button :size="size" @click="resetForm()">{{ $t('common.reset') }}</el-button>
         <el-button :loading="isExporting" type="primary" :size="size" @click="onExport">{{ $t('common.export') }}</el-button>
       </el-col>
     </el-row>

src/store/modules/app.js

@@ -8,7 +8,7 @@ const state = {
   },
   device: 'desktop',
   language: getLanguage(),
-  size: Cookies.get('size') || 'medium',
+  size: Cookies.get('size') || 'mini',
   treeWidth: '18%',
   minMainHeight: window.screen.height - 465,
   pageTableHeaderHeight: 0

src/store/modules/permission.js

@@ -75,6 +75,7 @@ const actions = {
       return api.sysMenu.sidebar().then(res => {
         const { data: menuTree } = res
         const accessedRoutes = buildRouters(menuTree)
+        console.log(accessedRoutes)
         commit('SET_ROUTES', accessedRoutes)
         resolve(accessedRoutes)
       })

src/views/optionset/index.vue

@@ -4,42 +4,10 @@
       <el-card>
         <el-container>
           <el-header height="120">
-            <el-form ref="searchForm" :model="dataQuery" :size="size" label-position="left" label-width="80px">
-              <el-row :gutter="20">
-                <el-col :span="6">
-                  <el-form-item label="Name:" class="notice-input" label-width="60px" prop="name">
-                    <el-input v-model="dataQuery.name" placeholder="Please input Name" clearable @keyup.enter.native="search" />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item label="Code:" class="notice-input" label-width="60px" prop="code">
-                    <el-input v-model="dataQuery.code" placeholder="Please input Code" clearable @keyup.enter.native="search" />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12" style="text-align: right">
-                  <el-form-item>
-                    <el-button type="primary" icon="el-icon-search" :size="size" @click="search">{{ $t('common.search') }}</el-button>
-                    <el-button icon="el-icon-refresh" :size="size" @click="resetFields">{{ $t('common.reset') }}</el-button>
-                    <export-button :api="this.$api.sysOptionset.page" :columns="tableColumns" :data-query="dataQuery" name="optionset.xlsx" />
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <el-row>
-                <el-button type="primary" icon="el-icon-plus" :size="size" @click="create">{{ $t('common.create') }}</el-button>
-                <el-button :size="size" @click="deleteBatch">{{ $t('common.batchDelete') }}</el-button>
-              </el-row>
-            </el-form>
+            <query ref="searchForm" :form-config="query" @onSubmit="search" />
           </el-header>
           <el-main>
-            <sheet
-              ref="qtable"
-              :api="this.$api.sysOptionset.page"
-              :columns="tableColumns"
-              :data-query="dataQuery"
-              :operates="operates"
-              :float-type="'right'"
-              :select-type="'selection'"
-            />
+            <sheet ref="qtable" :api="this.$api.sysOptionset.page" :columns="tableColumns" :data-query="dataQuery" :operates="operates" :float-type="'right'" :select-type="'selection'" />
           </el-main>
         </el-container>
       </el-card>
@@ -87,14 +55,16 @@
 <script>
 import { mapGetters } from 'vuex'
 import Sheet from '@/components/Sheet/index'
-import ExportButton from '@/components/ExportButton'
+import Query from '@/components/Query'
+import { optionset } from './query'
 
 export default {
   name: 'Optionset',
   components: {
     Sheet,
-    ExportButton
+    Query
   },
+  mixins: [optionset],
   data() {
     return {
       maps: [{ value: '', text: '' }],
@@ -236,8 +206,8 @@ export default {
     addItem() {
       this.maps.push({ value: '', text: '' })
     },
-    search() {
-      this.$refs.qtable.getData()
+    search(obj) {
+      return this.$refs.qtable.getData(obj)
     },
     resetFields() {
       this.$refs['searchForm'].resetFields()

src/views/optionset/query.js

@@ -0,0 +1,30 @@
+export const optionset = {
+  data() {
+    return {
+      query: {
+        export: {
+          name: 'optionsets.xlsx',
+          rows: 1000
+        },
+        items: [
+          {
+            name: 'name',
+            placeholder: 'Name',
+            span: 4,
+            style: '',
+            type: '',
+            value: ''
+          },
+          {
+            name: 'code',
+            placeholder: 'Code',
+            span: 4,
+            style: '',
+            type: '',
+            code: ''
+          }
+        ]
+      }
+    }
+  }
+}

src/views/org/index.vue

@@ -8,42 +8,10 @@
           </el-aside>
           <el-container>
             <el-header height="120">
-              <el-form ref="searchForm" :model="dataQuery" :size="size" label-position="left" label-width="80px">
-                <el-row :gutter="20">
-                  <el-col :span="6">
-                    <el-form-item label="Name:" class="notice-input" label-width="60px" prop="name">
-                      <el-input v-model="dataQuery.name" placeholder="Please input name" clearable @keyup.enter.native="search" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="Code:" class="notice-input" label-width="60px" prop="code">
-                      <el-input v-model="dataQuery.code" placeholder="Please input code" clearable @keyup.enter.native="search" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="12" style="text-align: right">
-                    <el-form-item>
-                      <el-button type="primary" icon="el-icon-search" :size="size" @click="search">{{ $t('common.search') }}</el-button>
-                      <el-button icon="el-icon-refresh" :size="size" @click="resetFields">{{ $t('common.reset') }}</el-button>
-                      <export-button :api="this.$api.sysOrg.page" :columns="tableColumns" :data-query="dataQuery" name="org.xlsx" />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <el-row>
-                  <el-button type="primary" icon="el-icon-plus" :size="size" @click="create">{{ $t('common.create') }}</el-button>
-                  <el-button :size="size" @click="deleteBatch">{{ $t('common.batchDelete') }}</el-button>
-                </el-row>
-              </el-form>
+              <query ref="searchForm" :form-config="query" @onSubmit="search" />
             </el-header>
             <el-main class="table-main">
-              <sheet
-                ref="qtable"
-                :api="this.$api.sysOrg.page"
-                :columns="tableColumns"
-                :data-query="dataQuery"
-                :operates="operates"
-                :float-type="'right'"
-                :select-type="'selection'"
-              />
+              <sheet ref="qtable" :api="this.$api.sysOrg.page" :columns="tableColumns" :data-query="dataQuery" :operates="operates" :float-type="'right'" :select-type="'selection'" />
             </el-main>
           </el-container>
         </el-container>
@@ -91,7 +59,6 @@
         </el-button>
       </footer>
     </el-dialog>
-
   </el-container>
 </template>
 
@@ -100,7 +67,8 @@ import { mapGetters } from 'vuex'
 import Tree from '@/components/Tree'
 import Sheet from '@/components/Sheet'
 import Cascader from '@/components/Cascader'
-import ExportButton from '@/components/ExportButton'
+import Query from '@/components/Query'
+import { org } from './query'
 
 export default {
   name: 'Org',
@@ -108,8 +76,9 @@ export default {
     Tree,
     Sheet,
     Cascader,
-    ExportButton
+    Query
   },
+  mixins: [org],
   data() {
     return {
       tableColumns: [
@@ -265,8 +234,8 @@ export default {
         }
       })
     },
-    search() {
-      this.$refs.qtable.getData()
+    search(obj) {
+      return this.$refs.qtable.getData(obj)
     },
     resetFields() {
       this.$refs['searchForm'].resetFields()

src/views/org/query.js

@@ -0,0 +1,30 @@
+export const org = {
+  data() {
+    return {
+      query: {
+        export: {
+          name: 'orgs.xlsx',
+          rows: 1000
+        },
+        items: [
+          {
+            name: 'name',
+            placeholder: 'Name',
+            span: 4,
+            style: '',
+            type: '',
+            value: ''
+          },
+          {
+            name: 'code',
+            placeholder: 'Code',
+            span: 4,
+            style: '',
+            type: '',
+            code: ''
+          }
+        ]
+      }
+    }
+  }
+}

src/views/role/index.vue

@@ -4,31 +4,7 @@
       <el-card>
         <el-container>
           <el-header height="120">
-            <el-form ref="searchForm" :size="size" label-position="left" label-width="80px">
-              <el-row :gutter="20">
-                <el-col :span="6">
-                  <el-form-item label="名称:" class="notice-input" label-width="60px">
-                    <el-input v-model="dataQuery.name" placeholder="请输入名称" clearable @keyup.enter.native="search" />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item label="编码:" class="notice-input" label-width="60px">
-                    <el-input v-model="dataQuery.code" placeholder="请输入编码" clearable @keyup.enter.native="search" />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12" style="text-align: right">
-                  <el-form-item>
-                    <el-button type="primary" icon="el-icon-search" :size="size" @click="search">{{ $t('common.search') }}</el-button>
-                    <el-button icon="el-icon-refresh" :size="size" @click="resetFields">{{ $t('common.reset') }}</el-button>
-                    <export-button :api="this.$api.sysRole.page" :columns="tableColumns" :data-query="dataQuery" name="roles.xlsx" />
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <el-row>
-                <el-button type="primary" icon="el-icon-plus" :size="size" @click="create">{{ $t('common.create') }}</el-button>
-                <el-button :size="size" @click="deleteBatch">{{ $t('common.batchDelete') }}</el-button>
-              </el-row>
-            </el-form>
+            <query ref="searchForm" :form-config="query" @onSubmit="search" />
           </el-header>
           <el-main>
             <sheet ref="qtable" :api="this.$api.sysRole.page" :columns="tableColumns" :data-query="dataQuery" :operates="operates" :float-type="'right'" :select-type="'selection'" />
@@ -101,15 +77,17 @@ import { mapGetters } from 'vuex'
 import { deepClone } from '@/utils/index'
 import Sheet from '@/components/Sheet'
 import treeTransfer from 'el-tree-transfer'
-import ExportButton from '@/components/ExportButton'
+import Query from '@/components/Query'
+import { role } from './query'
 
 export default {
   name: 'Role',
   components: {
     Sheet,
     treeTransfer,
-    ExportButton
+    Query
   },
+  mixins: [role],
   data() {
     return {
       menu: [],
@@ -356,8 +334,8 @@ export default {
       })
         .catch(() => {})
     },
-    search() {
-      this.$refs.qtable.getData()
+    search(obj) {
+      this.$refs.qtable.getData(obj)
     },
     resetFields() {
       this.$refs['searchForm'].resetFields()

src/views/role/query.js

@@ -0,0 +1,30 @@
+export const role = {
+  data() {
+    return {
+      query: {
+        export: {
+          name: 'roles.xlsx',
+          rows: 1000
+        },
+        items: [
+          {
+            name: 'name',
+            placeholder: 'Name',
+            span: 4,
+            style: '',
+            type: '',
+            value: ''
+          },
+          {
+            name: 'code',
+            placeholder: 'Code',
+            span: 4,
+            style: '',
+            type: '',
+            code: ''
+          }
+        ]
+      }
+    }
+  }
+}