代码优化，组件复用

2019-01-06 12:45:24 +08:00
parent 22a95e6fcc
commit ff0c36b5d4
40 changed files with 858 additions and 1116 deletions
--- a/src/views/tools/picture/index.vue
+++ b/src/views/tools/picture/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="app-container">
-    <search :query="query"/>
+    <eHeader :query="query"/>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
      <el-table-column prop="filename" label="文件名"/>
@@ -50,9 +50,9 @@ import checkPermission from '@/utils/permission' // 权限判断函数
 import initData from '../../../mixins/initData'
 import { del } from '@/api/picture'
 import { parseTime } from '@/utils/index'
-import search from './module/search'
+import eHeader from './module/header'
 export default {
-  components: { search },
+  components: { eHeader },
  mixins: [initData],
  data() {
    return {
--- a/src/views/tools/picture/module/form.vue
+++ b/src/views/tools/picture/module/form.vue
@@ -1,27 +1,25 @@
 <template>
-  <div>
-    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传图片</el-button>
-    <el-dialog :visible.sync="dialog" width="600px" @close="doSubmit">
-      <el-upload
-        :on-preview="handlePictureCardPreview"
-        :before-remove="handleBeforeRemove"
-        :on-success="handleSuccess"
-        :on-error="handleError"
-        :headers="headers"
-        :file-list="fileList"
-        :action="imagesUploadApi"
-        list-type="picture-card">
-        <i class="el-icon-plus"/>
-      </el-upload>
-      <el-dialog :visible.sync="dialogVisible">
-        <img :src="dialogImageUrl" width="100%" alt="">
-      </el-dialog>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="doSubmit">确认</el-button>
-      </div>
+  <el-dialog :visible.sync="dialog" width="600px" @close="doSubmit">
+    <el-upload
+      :on-preview="handlePictureCardPreview"
+      :before-remove="handleBeforeRemove"
+      :on-success="handleSuccess"
+      :on-error="handleError"
+      :headers="headers"
+      :file-list="fileList"
+      :action="imagesUploadApi"
+      list-type="picture-card">
+      <i class="el-icon-plus"/>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img :src="dialogImageUrl" width="100%" alt="">
    </el-dialog>
-  </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
 </template>
+
 <script>
 import { mapGetters } from 'vuex'
 import { del } from '@/api/picture'
@@ -84,9 +82,5 @@ export default {
 </script>

 <style scoped>
-  div{
-    display: inline-block;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
+
 </style>
--- a/src/views/tools/picture/module/header.vue
+++ b/src/views/tools/picture/module/header.vue
@@ -1,17 +1,28 @@
 <template>
  <div class="head-container">
+    <!--搜索-->
    <el-input v-model="query.value" clearable placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
-    <add v-if="checkPermission(['ADMIN','PICTURE_ALL','PICTURE_UPLOAD'])"/>
+    <!-- 上传 -->
+    <div style="display: inline-block;margin: 0px 2px;">
+      <el-button
+        v-if="checkPermission(['ADMIN','PICTURE_ALL','PICTURE_UPLOAD'])"
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-upload"
+        @click="$refs.form.dialog = true">上传图片</el-button>
+      <eForm ref="form"/>
+    </div>
  </div>
 </template>

 <script>
 import checkPermission from '@/utils/permission' // 权限判断函数
-import add from './add'
+import eForm from './form'
 // 查询条件
 export default {
-  components: { add },
+  components: { eForm },
  props: {
    query: {
      type: Object,
--- a/src/views/tools/qiniu/module/list.vue
+++ b/src/views/tools/qiniu/module/list.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="app-container">
-    <search :query="query"/>
+    <eHeader :query="query"/>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
      <el-table-column :show-overflow-tooltip="true" prop="key" label="文件名"/>
@@ -53,9 +53,9 @@ import checkPermission from '@/utils/permission' // 权限判断函数
 import initData from '../../../../mixins/initData'
 import { del, download } from '@/api/qiniu'
 import { parseTime } from '@/utils/index'
-import search from './module/search'
+import eHeader from './module/header'
 export default {
-  components: { search },
+  components: { eHeader },
  mixins: [initData],
  data() {
    return {
--- a/src/views/tools/qiniu/module/module/form.vue
+++ b/src/views/tools/qiniu/module/module/form.vue
@@ -1,25 +1,23 @@
 <template>
-  <div>
-    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传文件</el-button>
-    <el-dialog :visible.sync="dialog" width="400px" @close="doSubmit">
-      <el-upload
-        :before-remove="handleBeforeRemove"
-        :on-success="handleSuccess"
-        :on-error="handleError"
-        :file-list="fileList"
-        :headers="headers"
-        :action="qiNiuUploadApi"
-        class="upload-demo"
-        multiple>
-        <el-button size="small" type="primary">点击上传</el-button>
-        <div slot="tip" style="display: block;width: 330px" class="el-upload__tip">请勿上传违法文件，且文件不超过5M</div>
-      </el-upload>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="doSubmit">确认</el-button>
-      </div>
-    </el-dialog>
-  </div>
+  <el-dialog :visible.sync="dialog" width="500px" @close="doSubmit">
+    <el-upload
+      :before-remove="handleBeforeRemove"
+      :on-success="handleSuccess"
+      :on-error="handleError"
+      :file-list="fileList"
+      :headers="headers"
+      :action="qiNiuUploadApi"
+      class="upload-demo"
+      multiple>
+      <el-button size="small" type="primary">点击上传</el-button>
+      <div slot="tip" style="display: block;" class="el-upload__tip">请勿上传违法文件，且文件不超过5M</div>
+    </el-upload>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="doSubmit">确认</el-button>
+    </div>
+  </el-dialog>
 </template>
+
 <script>
 import { mapGetters } from 'vuex'
 import { del } from '@/api/qiniu'
@@ -82,9 +80,5 @@ export default {
 </script>

 <style scoped>
-  div{
-    display: inline-block;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
+
 </style>
--- a/src/views/tools/qiniu/module/module/header.vue
+++ b/src/views/tools/qiniu/module/module/header.vue
@@ -1,18 +1,29 @@
 <template>
  <div class="head-container">
+    <!-- 搜索 -->
    <el-input v-model="query.value" clearable placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
-    <add/>
+    <!-- 上传 -->
+    <div style="display: inline-block;margin: 0px 2px;">
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-upload"
+        @click="$refs.form.dialog = true">上传文件</el-button>
+      <eForm ref="form"/>
+    </div>
+    <!-- 同步 -->
    <el-button :icon="icon" class="filter-item" size="mini" type="primary" @click="synchronize">{{ buttonName }}</el-button>
  </div>
 </template>

 <script>
-import add from './add'
+import eForm from './form'
 import { sync } from '@/api/qiniu'
 // 查询条件
 export default {
-  components: { add },
+  components: { eForm },
  props: {
    query: {
      type: Object,