代码改造完成，加入多字典查询方式

src/views/system/dict/form.vue

@@ -22,10 +22,6 @@ export default {
     isAdd: {
       type: Boolean,
       required: true
-    },
-    sup_this: {
-      type: Object,
-      default: null
     }
   },
   data() {
@@ -66,7 +62,7 @@ export default {
           duration: 2500
         })
         this.loading = false
-        this.sup_this.init()
+        this.$parent.init()
       }).catch(err => {
         this.loading = false
         console.log(err.response.data.message)
@@ -81,7 +77,7 @@ export default {
           duration: 2500
         })
         this.loading = false
-        this.sup_this.init()
+        this.$parent.init()
       }).catch(err => {
         this.loading = false
         console.log(err.response.data.message)

src/views/system/dict/index.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="app-container">
+    <!--表单组件-->
+    <eForm ref="form" :is-add="isAdd"/>
     <el-row :gutter="10">
       <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
         <el-card class="box-card">
@@ -12,16 +14,24 @@
               style="float: right;padding: 4px 10px"
               type="primary"
               icon="el-icon-plus"
-              @click="$refs.header.$refs.form.dialog = true">新增</el-button>
+              @click="$refs.form.dialog = true;isAdd = true">新增</el-button>
+          </div>
+          <!--工具栏-->
+          <div class="head-container">
+            <!-- 搜索 -->
+            <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
+            <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
+              <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
+            </el-select>
+            <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
           </div>
-          <eHeader ref="header" :query="query" :sup_this="sup_this"/>
           <!--表格渲染-->
           <el-table v-loading="loading" :data="data" size="small" highlight-current-row style="width: 100%;" @current-change="handleCurrentChange">
             <el-table-column :show-overflow-tooltip="true" prop="name" label="名称"/>
             <el-table-column :show-overflow-tooltip="true" prop="remark" label="描述"/>
             <el-table-column v-if="checkPermission(['ADMIN','DICT_ALL','DICT_EDIT','DICT_DELETE'])" label="操作" width="130px" align="center">
               <template slot-scope="scope">
-                <edit v-permission="['ADMIN','DICT_ALL','DICT_EDIT']" :data="scope.row" :sup_this="sup_this"/>
+                <el-button v-permission="['ADMIN','DICT_ALL','DICT_EDIT']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
                 <el-popover
                   v-permission="['ADMIN','DICT_ALL','DICT_DELETE']"
                   :ref="scope.row.id"
@@ -58,7 +68,7 @@
               style="float: right;padding: 4px 10px"
               type="primary"
               icon="el-icon-plus"
-              @click="$refs.dictDetail.$refs.header.$refs.form.dialog = true">新增</el-button>
+              @click="$refs.dictDetail.$refs.form.dialog = true;$refs.dictDetail.isAdd = true">新增</el-button>
           </div>
           <dictDetail ref="dictDetail"/>
         </el-card>
@@ -71,15 +81,18 @@
 import checkPermission from '@/utils/permission'
 import initData from '@/mixins/initData'
 import { del } from '@/api/dict'
-import eHeader from './module/header'
-import edit from './module/edit'
 import dictDetail from '../dictDetail/index'
+import eForm from './form'
 export default {
-  components: { eHeader, edit, dictDetail },
+  components: { dictDetail, eForm },
   mixins: [initData],
   data() {
     return {
-      delLoading: false, sup_this: this
+      delLoading: false,
+      queryTypeOptions: [
+        { key: 'name', display_name: '字典名称' },
+        { key: 'remark', display_name: '描述' }
+      ]
     }
   },
   created() {
@@ -127,6 +140,16 @@ export default {
         this.$refs.dictDetail.dictId = val.id
         this.$refs.dictDetail.init()
       }
+    },
+    edit(data) {
+      this.isAdd = false
+      const _this = this.$refs.form
+      _this.form = {
+        id: data.id,
+        name: data.name,
+        remark: data.remark
+      }
+      _this.dialog = true
     }
   }
 }

src/views/system/dict/module/edit.vue

@@ -1,40 +0,0 @@
-<template>
-  <div>
-    <el-button size="mini" type="primary" icon="el-icon-edit" @click="to"/>
-    <eForm ref="form" :sup_this="sup_this" :is-add="false"/>
-  </div>
-</template>
-<script>
-import eForm from './form'
-export default {
-  components: { eForm },
-  props: {
-    data: {
-      type: Object,
-      required: true
-    },
-    sup_this: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    to() {
-      const _this = this.$refs.form
-      _this.form = {
-        id: this.data.id,
-        name: this.data.name,
-        remark: this.data.remark
-      }
-      _this.dialog = true
-    }
-  }
-}
-</script>
-
-<style scoped>
-  div{
-    display: inline-block;
-    margin-right: 3px;
-  }
-</style>

src/views/system/dict/module/header.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="head-container">
-    <!-- 搜索 -->
-    <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
-    <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
-      <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
-    </el-select>
-    <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
-    <div style="display: inline-block;margin: 0px 2px;">
-      <eForm ref="form" :is-add="true" :sup_this="sup_this"/>
-    </div>
-  </div>
-</template>
-
-<script>
-import checkPermission from '@/utils/permission' // 权限判断函数
-import eForm from './form'
-export default {
-  components: { eForm },
-  props: {
-    query: {
-      type: Object,
-      required: true
-    },
-    sup_this: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      queryTypeOptions: [
-        { key: 'name', display_name: '字典名称' },
-        { key: 'remark', display_name: '描述' }
-      ]
-    }
-  },
-  methods: {
-    checkPermission,
-    toQuery() {
-      this.sup_this.page = 0
-      this.sup_this.init()
-    }
-  }
-}
-</script>