diff --git a/src/api/tools/localStorage.js b/src/api/tools/localStorage.js
index 2e68c14..c938de3 100644
--- a/src/api/tools/localStorage.js
+++ b/src/api/tools/localStorage.js
@@ -31,11 +31,4 @@ export function edit(data) {
   })
 }
 
-export function downloadStorage(params) {
-  return request({
-    url: 'api/localStorage/download',
-    method: 'get',
-    params,
-    responseType: 'blob'
-  })
-}
+export default { add, edit, del, delAll }
diff --git a/src/api/tools/picture.js b/src/api/tools/picture.js
index df9d720..a689c77 100644
--- a/src/api/tools/picture.js
+++ b/src/api/tools/picture.js
@@ -15,11 +15,4 @@ export function delAll(ids) {
   })
 }
 
-export function downloadPicture(params) {
-  return request({
-    url: 'api/pictures/download',
-    method: 'get',
-    params,
-    responseType: 'blob'
-  })
-}
+export default { del, delAll }
diff --git a/src/api/tools/qiniu.js b/src/api/tools/qiniu.js
index ce75cba..7b94205 100644
--- a/src/api/tools/qiniu.js
+++ b/src/api/tools/qiniu.js
@@ -44,11 +44,4 @@ export function delAll(ids) {
   })
 }
 
-export function downloadQiNiu(params) {
-  return request({
-    url: 'api/qiNiuContent/download/list',
-    method: 'get',
-    params,
-    responseType: 'blob'
-  })
-}
+export default { del, download, sync, delAll }
diff --git a/src/mixins/crud.js b/src/mixins/crud.js
index c429c8d..244fc29 100644
--- a/src/mixins/crud.js
+++ b/src/mixins/crud.js
@@ -31,6 +31,7 @@ export default {
       loading: true,
       // 删除 Loading 属性
       delLoading: false,
+      delAllLoading: false,
       // 弹窗属性
       dialog: false,
       // Form 表单
@@ -170,6 +171,41 @@ export default {
     },
     afterDelMethod() {
     },
+    /**
+     * 多选删除提示
+     */
+    beforeDelAllMethod() {
+      this.$confirm('你确定删除选中的数据吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.delAllMethod()
+      })
+    },
+    /**
+     * 多选删除
+     */
+    delAllMethod() {
+      this.delAllLoading = true
+      const data = this.$refs.table.selection
+      const ids = []
+      for (let i = 0; i < data.length; i++) {
+        ids.push(data[i].id)
+      }
+      this.crudMethod.delAll(ids).then(() => {
+        this.delAllLoading = false
+        this.dleChangePage(ids.length)
+        this.init()
+        this.$notify({
+          title: '删除成功',
+          type: 'success',
+          duration: 2500
+        })
+      }).catch(() => {
+        this.delAllLoading = false
+      })
+    },
     /**
      * 显示新增弹窗前可以调用该方法
      */
diff --git a/src/views/tools/picture/index.vue b/src/views/tools/picture/index.vue
index dc73679..cd90086 100644
--- a/src/views/tools/picture/index.vue
+++ b/src/views/tools/picture/index.vue
@@ -5,7 +5,7 @@
       <!--搜索-->
       <el-input v-model="query.filename" clearable size="small" placeholder="输入文件名" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
       <el-date-picker
-        v-model="query.date"
+        v-model="query.createTime"
         :default-time="['00:00:00','23:59:59']"
         type="daterange"
         range-separator=":"
@@ -17,27 +17,24 @@
       />
       <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;">
-        <el-button
-          v-permission="['admin','pictures:add']"
-          class="filter-item"
-          size="mini"
-          type="primary"
-          icon="el-icon-upload"
-          @click="dialog = true"
-        >上传图片</el-button>
-      </div>
-      <div v-permission="['admin','pictures:del']" style="display: inline-block;">
-        <el-button
-          :loading="delAllLoading"
-          :disabled="data.length === 0 || $refs.table.selection.length === 0"
-          class="filter-item"
-          size="mini"
-          type="danger"
-          icon="el-icon-delete"
-          @click="open"
-        >删除</el-button>
-      </div>
+      <el-button
+        v-permission="['admin','pictures:add']"
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-upload"
+        @click="dialog = true"
+      >上传图片</el-button>
+      <el-button
+        v-permission="['admin','pictures:del']"
+        :loading="delAllLoading"
+        :disabled="data.length === 0 || $refs.table.selection.length === 0"
+        class="filter-item"
+        size="mini"
+        type="danger"
+        icon="el-icon-delete"
+        @click="beforeDelAllMethod"
+      >删除</el-button>
       <!-- 导出 -->
       <div style="display: inline-block;">
         <el-button
@@ -46,7 +43,7 @@
           class="filter-item"
           type="warning"
           icon="el-icon-download"
-          @click="download"
+          @click="downloadMethod"
         >导出</el-button>
       </div>
     </div>
@@ -77,8 +74,14 @@
       <el-table-column prop="filename" label="文件名" />
       <el-table-column prop="username" label="上传者" />
       <el-table-column ref="table" :show-overflow-tooltip="true" prop="url" label="缩略图">
-        <template slot-scope="scope">
-          <a :href="scope.row.url" style="color: #42b983" target="_blank"><img :src="scope.row.url" alt="点击打开" class="el-avatar"></a>
+        <template slot-scope="{row}">
+          <el-image
+            :src="row.url"
+            :preview-src-list="[row.url]"
+            fit="contain"
+            lazy
+            class="el-avatar"
+          />
         </template>
       </el-table-column>
       <el-table-column prop="size" label="文件大小" />
@@ -99,7 +102,7 @@
             <p>确定删除本条数据吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
-              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
+              <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
             </div>
             <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
           </el-popover>
@@ -119,23 +122,20 @@
 </template>
 
 <script>
-import checkPermission from '@/utils/permission' // 权限判断函数
-import initData from '@/mixins/initData'
-import { parseTime, downloadFile } from '@/utils/index'
+import crud from '@/mixins/crud'
 import { mapGetters } from 'vuex'
-import { del, delAll, downloadPicture } from '@/api/tools/picture'
+import crudPic from '@/api/tools/picture'
 import { getToken } from '@/utils/auth'
 export default {
   name: 'Pictures',
-  mixins: [initData],
+  mixins: [crud],
   data() {
     return {
-      delLoading: false,
-      delAllLoading: false,
+      title: '图片',
+      crudMethod: { ...crudPic },
       headers: {
         'Authorization': 'Bearer ' + getToken()
       },
-      dialog: false,
       dialogImageUrl: '',
       dialogVisible: false,
       fileList: [],
@@ -153,69 +153,10 @@ export default {
     })
   },
   methods: {
-    parseTime,
-    checkPermission,
     beforeInit() {
       this.url = 'api/pictures'
-      const sort = 'id,desc'
-      const query = this.query
-      const filename = query.filename
-      this.params = { page: this.page, size: this.size, sort: sort }
-      if (filename) { this.params[filename] = filename }
-      if (query.date) {
-        this.params['startTime'] = query.date[0]
-        this.params['endTime'] = query.date[1]
-      }
       return true
     },
-    subDelete(id) {
-      this.delLoading = true
-      del(id).then(res => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        this.dleChangePage()
-        this.init()
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        console.log(err.response.data.message)
-      })
-    },
-    doDelete() {
-      this.delAllLoading = true
-      const data = this.$refs.table.selection
-      const ids = []
-      for (let i = 0; i < data.length; i++) {
-        ids.push(data[i].id)
-      }
-      delAll(ids).then(res => {
-        this.delAllLoading = false
-        this.init()
-        this.dleChangePage(ids.length)
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delAllLoading = false
-        console.log(err.response.data.message)
-      })
-    },
-    open() {
-      this.$confirm('你确定删除选中的数据吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.doDelete()
-      })
-    },
     handleSuccess(response, file, fileList) {
       const uid = file.uid
       const id = response.id
@@ -224,7 +165,7 @@ export default {
     handleBeforeRemove(file, fileList) {
       for (let i = 0; i < this.pictures.length; i++) {
         if (this.pictures[i].uid === file.uid) {
-          del(this.pictures[i].id).then(res => {})
+          this.crudMethod.del(this.pictures[i].id).then(res => {})
           return true
         }
       }
@@ -249,16 +190,6 @@ export default {
         type: 'error',
         duration: 2500
       })
-    },
-    download() {
-      this.beforeInit()
-      this.downloadLoading = true
-      downloadPicture(this.params).then(result => {
-        downloadFile(result, '图片列表', 'xlsx')
-        this.downloadLoading = false
-      }).catch(() => {
-        this.downloadLoading = false
-      })
     }
   }
 }
diff --git a/src/views/tools/storage/local/form.vue b/src/views/tools/storage/local/form.vue
deleted file mode 100644
index dfa8bb2..0000000
--- a/src/views/tools/storage/local/form.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '上传文件' : '编辑文件'" width="500px">
-    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
-      <el-form-item label="文件名">
-        <el-input v-model="form.name" style="width: 370px;" />
-      </el-form-item>
-      <!--   上传文件   -->
-      <el-form-item v-if="isAdd" label="上传">
-        <el-upload
-          ref="upload"
-          :limit="1"
-          :before-upload="beforeUpload"
-          :auto-upload="false"
-          :headers="headers"
-          :on-success="handleSuccess"
-          :on-error="handleError"
-          :action="fileUploadApi + '?name=' + form.name"
-        >
-          <div class="eladmin-upload"><i class="el-icon-upload" /> 添加文件</div>
-          <div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
-        </el-upload>
-      </el-form-item>
-    </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button type="text" @click="cancel">取消</el-button>
-      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { getToken } from '@/utils/auth'
-import { edit } from '@/api/tools/localStorage'
-export default {
-  props: {
-    isAdd: {
-      type: Boolean,
-      required: true
-    }
-  },
-  data() {
-    return {
-      loading: false, dialog: false,
-      headers: { 'Authorization': 'Bearer ' + getToken() },
-      form: {
-        id: '',
-        name: ''
-      },
-      rules: {
-      }
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'fileUploadApi'
-    ])
-  },
-  methods: {
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.loading = true
-      if (this.isAdd) {
-        this.$refs.upload.submit()
-      } else this.doEdit()
-    },
-    doEdit() {
-      edit(this.form).then(res => {
-        this.resetForm()
-        this.$notify({
-          title: '修改成功',
-          type: 'success',
-          duration: 2500
-        })
-        this.loading = false
-        this.$parent.init()
-      }).catch(err => {
-        this.loading = false
-        console.log(err.response.data.message)
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = {
-        id: '',
-        name: ''
-      }
-    },
-    beforeUpload(file) {
-      let isLt2M = true
-      isLt2M = file.size / 1024 / 1024 < 100
-      if (!isLt2M) {
-        this.$message.error('上传文件大小不能超过 100MB!')
-      }
-      this.loading = false
-      return isLt2M
-    },
-    handleSuccess(response, file, fileList) {
-      this.dialog = false
-      this.resetForm()
-      this.$refs.upload.clearFiles()
-      this.$parent.init()
-    },
-    // 监听上传失败
-    handleError(e, file, fileList) {
-      const msg = JSON.parse(e.message)
-      this.$notify({
-        title: msg.message,
-        type: 'error',
-        duration: 2500
-      })
-      this.loading = false
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/tools/storage/local/index.vue b/src/views/tools/storage/local/index.vue
index 1479435..bb6c7fa 100644
--- a/src/views/tools/storage/local/index.vue
+++ b/src/views/tools/storage/local/index.vue
@@ -3,9 +3,9 @@
     <!--工具栏-->
     <div class="head-container">
       <!-- 搜索 -->
-      <el-input v-model="query.value" clearable size="small" placeholder="输入内容模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+      <el-input v-model="query.blurry" clearable size="small" placeholder="输入内容模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
       <el-date-picker
-        v-model="query.date"
+        v-model="query.createTime"
         :default-time="['00:00:00','23:59:59']"
         type="daterange"
         range-separator=":"
@@ -17,45 +17,65 @@
       />
       <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;">
-        <el-button
-          v-permission="['admin','storage:add']"
-          class="filter-item"
-          size="mini"
-          type="primary"
-          icon="el-icon-upload"
-          @click="add"
-        >文件上传
-        </el-button>
-      </div>
+      <el-button
+        v-permission="['admin','storage:add']"
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-upload"
+        @click="showAddFormDialog"
+      >文件上传
+      </el-button>
       <!-- 多选删除 -->
-      <div style="display: inline-block;margin: 0px 2px;">
-        <el-button
-          v-permission="['admin','storage:del']"
-          :loading="delAllLoading"
-          :disabled="data.length === 0 || $refs.table.selection.length === 0"
-          class="filter-item"
-          size="mini"
-          type="danger"
-          icon="el-icon-delete"
-          @click="open"
-        >删除
-        </el-button>
-      </div>
+      <el-button
+        v-permission="['admin','storage:del']"
+        :loading="delAllLoading"
+        :disabled="data.length === 0 || $refs.table.selection.length === 0"
+        class="filter-item"
+        size="mini"
+        type="danger"
+        icon="el-icon-delete"
+        @click="beforeDelAllMethod"
+      >删除
+      </el-button>
       <!-- 导出 -->
-      <div style="display: inline-block;">
-        <el-button
-          :loading="downloadLoading"
-          size="mini"
-          class="filter-item"
-          type="warning"
-          icon="el-icon-download"
-          @click="download"
-        >导出</el-button>
-      </div>
+      <el-button
+        :loading="downloadLoading"
+        size="mini"
+        class="filter-item"
+        type="warning"
+        icon="el-icon-download"
+        @click="downloadMethod"
+      >导出</el-button>
     </div>
     <!--表单组件-->
-    <eForm ref="form" :is-add="isAdd" />
+    <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
+      <el-form ref="form" :model="form" size="small" label-width="80px">
+        <el-form-item label="文件名">
+          <el-input v-model="form.name" style="width: 370px;" />
+        </el-form-item>
+        <!--   上传文件   -->
+        <el-form-item v-if="isAdd" label="上传">
+          <el-upload
+            ref="upload"
+            :limit="1"
+            :before-upload="beforeUpload"
+            :auto-upload="false"
+            :headers="headers"
+            :on-success="handleSuccess"
+            :on-error="handleError"
+            :action="fileUploadApi + '?name=' + form.name"
+          >
+            <div class="eladmin-upload"><i class="el-icon-upload" /> 添加文件</div>
+            <div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="cancel">取消</el-button>
+        <el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
+      </div>
+    </el-dialog>
     <!--表格渲染-->
     <el-table ref="table" v-loading="loading" :data="data" size="small" style="width: 100%;">
       <el-table-column type="selection" width="55" />
@@ -106,7 +126,7 @@
       </el-table-column>
       <el-table-column v-if="checkPermission(['admin','storage:edit','storage:del'])" label="操作" width="150px" align="center">
         <template slot-scope="scope">
-          <el-button v-permission="['admin','storage:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)" />
+          <el-button v-permission="['admin','storage:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
           <el-popover
             :ref="scope.row.id"
             v-permission="['admin','storage:del']"
@@ -116,7 +136,7 @@
             <p>确定删除本条数据吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
-              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定
+              <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定
               </el-button>
             </div>
             <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
@@ -138,28 +158,24 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import checkPermission from '@/utils/permission'
-import initData from '@/mixins/initData'
-import { del, delAll, downloadStorage } from '@/api/tools/localStorage'
-import { parseTime, downloadFile } from '@/utils/index'
-import eForm from './form'
+import { getToken } from '@/utils/auth'
+import crud from '@/mixins/crud'
+import crudFile from '@/api/tools/localStorage'
 export default {
-  components: { eForm },
-  mixins: [initData],
+  mixins: [crud],
   data() {
     return {
-      delLoading: false, delAllLoading: false,
-      queryTypeOptions: [
-        { key: 'name', display_name: '文件名' },
-        { key: 'suffix', display_name: '后缀' },
-        { key: 'type', display_name: '类型' },
-        { key: 'operate', display_name: '操作人' }
-      ]
+      title: '文件',
+      crudMethod: { ...crudFile },
+      delAllLoading: false,
+      headers: { 'Authorization': 'Bearer ' + getToken() },
+      form: { id: null, name: null }
     }
   },
   computed: {
     ...mapGetters([
-      'baseApi'
+      'baseApi',
+      'fileUploadApi'
     ])
   },
   created() {
@@ -168,91 +184,39 @@ export default {
     })
   },
   methods: {
-    parseTime,
-    checkPermission,
+    // 获取数据前设置好接口地址
     beforeInit() {
       this.url = 'api/localStorage'
-      const sort = 'id,desc'
-      this.params = { page: this.page, size: this.size, sort: sort }
-      const query = this.query
-      const value = query.value
-      if (value) { this.params['blurry'] = value }
-      if (query.date) {
-        this.params['startTime'] = query.date[0]
-        this.params['endTime'] = query.date[1]
-      }
       return true
     },
-    subDelete(id) {
-      this.delLoading = true
-      del(id).then(res => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        this.dleChangePage()
-        this.init()
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        console.log(err.response.data.message)
-      })
+    // 上传文件
+    addMethod() {
+      this.$refs.upload.submit()
     },
-    add() {
-      this.isAdd = true
-      this.$refs.form.dialog = true
-    },
-    edit(data) {
-      this.isAdd = false
-      const _this = this.$refs.form
-      _this.form = {
-        id: data.id,
-        name: data.name
+    beforeUpload(file) {
+      let isLt2M = true
+      isLt2M = file.size / 1024 / 1024 < 100
+      if (!isLt2M) {
+        this.$message.error('上传文件大小不能超过 100MB!')
       }
-      _this.dialog = true
+      this.loading = false
+      return isLt2M
     },
-    doDelete() {
-      this.delAllLoading = true
-      const data = this.$refs.table.selection
-      const ids = []
-      for (let i = 0; i < data.length; i++) {
-        ids.push(data[i].id)
-      }
-      delAll(ids).then(res => {
-        this.delAllLoading = false
-        this.dleChangePage(ids.length)
-        this.init()
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delAllLoading = false
-        console.log(err.response.data.message)
-      })
+    handleSuccess(response, file, fileList) {
+      this.dialog = false
+      this.cancel()
+      this.$refs.upload.clearFiles()
+      this.init()
     },
-    open() {
-      this.$confirm('你确定删除选中的数据吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.doDelete()
-      })
-    },
-    download() {
-      this.beforeInit()
-      this.downloadLoading = true
-      downloadStorage(this.params).then(result => {
-        downloadFile(result, '文件列表', 'xlsx')
-        this.downloadLoading = false
-      }).catch(() => {
-        this.downloadLoading = false
+    // 监听上传失败
+    handleError(e, file, fileList) {
+      const msg = JSON.parse(e.message)
+      this.$notify({
+        title: msg.message,
+        type: 'error',
+        duration: 2500
       })
+      this.loading = false
     }
   }
 }
diff --git a/src/views/tools/storage/qiniu/form.vue b/src/views/tools/storage/qiniu/form.vue
index 586106c..570e19f 100644
--- a/src/views/tools/storage/qiniu/form.vue
+++ b/src/views/tools/storage/qiniu/form.vue
@@ -1,5 +1,4 @@
 <template>
-  <!--上传图片-->
   <el-dialog :visible.sync="dialog" :close-on-click-modal="false" title="七牛云配置" append-to-body width="580px">
     <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="110px">
       <el-form-item label="Access Key" prop="accessKey">
diff --git a/src/views/tools/storage/qiniu/index.vue b/src/views/tools/storage/qiniu/index.vue
index 57e3e96..dce0a47 100644
--- a/src/views/tools/storage/qiniu/index.vue
+++ b/src/views/tools/storage/qiniu/index.vue
@@ -5,9 +5,9 @@
     <!-- 工具栏 -->
     <div class="head-container">
       <!-- 搜索 -->
-      <el-input v-model="query.value" clearable size="small" placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+      <el-input v-model="query.key" clearable size="small" placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
       <el-date-picker
-        v-model="query.date"
+        v-model="query.c"
         :default-time="['00:00:00','23:59:59']"
         type="daterange"
         range-separator=":"
@@ -19,44 +19,36 @@
       />
       <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;">
-        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传文件</el-button>
-      </div>
+      <el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传文件</el-button>
       <!-- 同步 -->
       <el-button :icon="icon" class="filter-item" size="mini" type="warning" @click="synchronize">同步数据</el-button>
       <!-- 配置 -->
-      <div style="display: inline-block;margin: 0px 2px;">
-        <el-button
-          class="filter-item"
-          size="mini"
-          type="success"
-          icon="el-icon-s-tools"
-          @click="doConfig"
-        >七牛配置</el-button>
-      </div>
+      <el-button
+        class="filter-item"
+        size="mini"
+        type="success"
+        icon="el-icon-s-tools"
+        @click="doConfig"
+      >七牛配置</el-button>
       <!-- 多选删除 -->
-      <div style="display: inline-block;margin: 0px 2px;">
-        <el-button
-          :loading="delAllLoading"
-          :disabled="data.length === 0 || $refs.table.selection.length === 0"
-          class="filter-item"
-          size="mini"
-          type="danger"
-          icon="el-icon-delete"
-          @click="open"
-        >删除</el-button>
-      </div>
+      <el-button
+        :loading="delAllLoading"
+        :disabled="data.length === 0 || $refs.table.selection.length === 0"
+        class="filter-item"
+        size="mini"
+        type="danger"
+        icon="el-icon-delete"
+        @click="beforeDelAllMethod"
+      >删除</el-button>
       <!-- 导出 -->
-      <div style="display: inline-block;">
-        <el-button
-          :loading="downloadLoading"
-          size="mini"
-          class="filter-item"
-          type="warning"
-          icon="el-icon-download"
-          @click="downloadList"
-        >导出</el-button>
-      </div>
+      <el-button
+        :loading="downloadLoading"
+        size="mini"
+        class="filter-item"
+        type="warning"
+        icon="el-icon-download"
+        @click="downloadMethod"
+      >导出</el-button>
       <!-- 文件上传 -->
       <el-dialog :visible.sync="dialog" :close-on-click-modal="false" append-to-body width="500px" @close="doSubmit">
         <el-upload
@@ -103,7 +95,7 @@
               <p>确定删除本条数据吗？</p>
               <div style="text-align: right; margin: 0">
                 <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
-                <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
+                <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
               </div>
               <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
             </el-popover>
@@ -124,21 +116,21 @@
 </template>
 
 <script>
-import initData from '@/mixins/initData'
-import { del, download, sync, delAll, downloadQiNiu } from '@/api/tools/qiniu'
-import { parseTime, downloadFile } from '@/utils/index'
+import crud from '@/mixins/crud'
+import crudQiNiu from '@/api/tools/qiniu'
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
 import eForm from './form'
 export default {
   components: { eForm },
-  mixins: [initData],
+  mixins: [crud],
   data() {
     return {
-      icon: 'el-icon-refresh', delAllLoading: false,
+      title: '文件',
+      crudMethod: { ...crudQiNiu },
+      icon: 'el-icon-refresh',
       url: '', headers: { 'Authorization': 'Bearer ' + getToken() }, dialog: false,
-      dialogImageUrl: '', dialogVisible: false, fileList: [], files: [],
-      newWin: null, downloadLoading: false, delLoading: false
+      dialogImageUrl: '', dialogVisible: false, fileList: [], files: [], newWin: null
     }
   },
   computed: {
@@ -158,54 +150,17 @@ export default {
     }
   },
   methods: {
-    parseTime,
+    // 获取数据前设置好接口地址
     beforeInit() {
       this.url = 'api/qiNiuContent'
-      const sort = 'id,desc'
-      const query = this.query
-      const value = query.value
-      this.params = { page: this.page, size: this.size, sort: sort }
-      if (value) { this.params['key'] = value }
-      if (query.date) {
-        this.params['startTime'] = query.date[0]
-        this.params['endTime'] = query.date[1]
-      }
       return true
     },
+    // 七牛云配置
     doConfig() {
       const _this = this.$refs.form
       _this.init()
       _this.dialog = true
     },
-    subDelete(id) {
-      this.delLoading = true
-      del(id).then(res => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        this.init()
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        console.log(err.response.data.message)
-      })
-    },
-    download(id) {
-      this.downloadLoading = true
-      // 先打开一个空的新窗口，再请求
-      this.newWin = window.open()
-      download(id).then(res => {
-        this.downloadLoading = false
-        this.url = res.url
-      }).catch(err => {
-        this.downloadLoading = false
-        console.log(err.response.data.message)
-      })
-    },
     handleSuccess(response, file, fileList) {
       const uid = file.uid
       const id = response.id
@@ -214,7 +169,7 @@ export default {
     handleBeforeRemove(file, fileList) {
       for (let i = 0; i < this.files.length; i++) {
         if (this.files[i].uid === file.uid) {
-          del(this.files[i].id).then(res => {})
+          this.crudMethod.del(this.files[i].id).then(res => {})
           return true
         }
       }
@@ -234,18 +189,26 @@ export default {
     // 监听上传失败
     handleError(e, file, fileList) {
       const msg = JSON.parse(e.message)
-      this.$notify({
-        title: msg.message,
-        type: 'error',
-        duration: 2500
+      this.notify(msg.message, 'error')
+    },
+    // 下载文件
+    download(id) {
+      this.downloadLoading = true
+      // 先打开一个空的新窗口，再请求
+      this.newWin = window.open()
+      this.crudMethod.download(id).then(res => {
+        this.downloadLoading = false
+        this.url = res.url
+      }).catch(err => {
+        this.downloadLoading = false
+        console.log(err.response.data.message)
       })
     },
+    // 同步数据
     synchronize() {
       this.icon = 'el-icon-loading'
-      this.buttonName = '同步中'
-      sync().then(res => {
+      this.crudMethod.sync().then(res => {
         this.icon = 'el-icon-refresh'
-        this.buttonName = '同步数据'
         this.$message({
           showClose: true,
           message: '数据同步成功',
@@ -255,49 +218,8 @@ export default {
         this.toQuery()
       }).catch(err => {
         this.icon = 'el-icon-refresh'
-        this.buttonName = '同步数据'
         console.log(err.response.data.message)
       })
-    },
-    doDelete() {
-      this.delAllLoading = true
-      const data = this.$refs.table.selection
-      const ids = []
-      for (let i = 0; i < data.length; i++) {
-        ids.push(data[i].id)
-      }
-      delAll(ids).then(res => {
-        this.delAllLoading = false
-        this.dleChangePage(ids.length)
-        this.init()
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delAllLoading = false
-        console.log(err.response.data.message)
-      })
-    },
-    open() {
-      this.$confirm('你确定删除选中的数据吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.doDelete()
-      })
-    },
-    downloadList() {
-      this.beforeInit()
-      this.downloadLoading = true
-      downloadQiNiu(this.params).then(result => {
-        downloadFile(result, '七牛云文件列表', 'xlsx')
-        this.downloadLoading = false
-      }).catch(() => {
-        this.downloadLoading = false
-      })
     }
   }
 }