删除文件同时删除数据库记录及文件

src/api/platform/file/attachment.js

@@ -28,6 +28,18 @@ export function remove(params) {
     params: params
   })
 }
+/**
+ * 删除文件
+ * @param {*} params
+ */
+ export function deleteFile(params) {
+    return request({
+      url: SYSTEM_URL() + '/file/delete',
+      method: 'post',
+      isLoading: true,
+      params: params
+    })
+  }
 /**
  * 保存数据
  * @param {*} params

src/business/platform/file/uploader/upload.vue

@@ -1,337 +1,339 @@
 <template>
-  <div
-    :style="{
-      height:height
-    }"
-    class="ibps-uplpad"
-  >
-    <div class="header">
-      <div class="btns">
-        <el-upload
-          :file-list="fileList"
-          :on-remove="handleRemove"
-          :on-success="handleSuccess"
-          :on-error="handleError"
-          :before-upload="beforeUpload"
-          :http-request="httpRequest"
-          :multiple="multiple"
-          :accept="accept"
-          :show-file-list="false"
-          action="https://www.bpmhome.cn/post"
-          list-type="picture"
-          name="file"
-        >
-          <el-button slot="trigger" icon="el-icon-upload" type="primary" size="mini">选择要上传的文件</el-button>
-          <el-button
-            type="danger"
-            icon="ibps-icon-remove"
-            class="ibps-ml-5"
-            @click="clearFiles"
-            size="mini"
-          >清空文件</el-button>
-        </el-upload>
-      </div>
-    </div>
-    <div class="uploader">
-      <el-upload
-        ref="upload"
-        :file-list="fileList"
-        :on-remove="handleRemove"
-        :on-success="handleSuccess"
-        :on-error="handleError"
-        :before-upload="beforeUpload"
-        :http-request="httpRequest"
-        :multiple="multiple"
-        :accept="accept"
-        action="https://www.bpmhome.cn/post"
-        name="file"
-        drag
-        list-type="picture-card"
-      >
-        <i class="el-icon-upload" />
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-      </el-upload>
+    <div :style="{height: height}" class="ibps-uplpad">
+        <div class="header">
+            <div class="btns">
+                <el-upload
+                    :file-list="fileList"
+                    :on-remove="handleRemove"
+                    :on-success="handleSuccess"
+                    :on-error="handleError"
+                    :before-upload="beforeUpload"
+                    :http-request="httpRequest"
+                    :multiple="multiple"
+                    :accept="accept"
+                    :show-file-list="false"
+                    action="https://www.bpmhome.cn/post"
+                    list-type="picture"
+                    name="file"
+                >
+                    <el-button
+                        slot="trigger"
+                        icon="el-icon-upload"
+                        type="primary"
+                        size="mini"
+                        >选择要上传的文件</el-button
+                    >
+                    <el-button
+                        type="danger"
+                        icon="ibps-icon-remove"
+                        class="ibps-ml-5"
+                        @click="clearFiles"
+                        size="mini"
+                        >清空文件</el-button
+                    >
+                </el-upload>
+            </div>
+        </div>
+        <div class="uploader">
+            <el-upload
+                ref="upload"
+                :file-list="fileList"
+                :on-remove="handleRemove"
+                :on-success="handleSuccess"
+                :on-error="handleError"
+                :before-upload="beforeUpload"
+                :http-request="httpRequest"
+                :multiple="multiple"
+                :accept="accept"
+                action="https://www.bpmhome.cn/post"
+                name="file"
+                drag
+                list-type="picture-card"
+            >
+                <i class="el-icon-upload" />
+                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            </el-upload>
 
-      <el-dialog :visible.sync="dialogVisible" append-to-body>
-        <img :src="dialogImageUrl" width="100%" alt="">
-      </el-dialog>
+            <el-dialog :visible.sync="dialogVisible" append-to-body>
+                <img :src="dialogImageUrl" width="100%" alt="" />
+            </el-dialog>
+        </div>
     </div>
-  </div>
 </template>
 <script>
-import { uploadFile, remove } from '@/api/platform/file/attachment'
-import { fileTypes, allFileTypes, accept as acceptTypes } from '@/business/platform/file/constants/fileTypes'
-export default {
-  props: {
-    height: String,
-    init: Boolean,
-    limit: Number, // 个数
-    multiple: Boolean,
-    fileSize: Number, // 尺寸
-    accept: String// 类型
-  },
-  data() {
-    return {
-      uploadData: {}, // 可以添加分类、文件等信息
-      fileList: [],
-      dialogVisible: false,
-      targetExt: false,
-      dialogImageUrl: '',
-      fileTypes: fileTypes,
-      allFileTypes: allFileTypes,
-      acceptTypes: acceptTypes
-    }
-  },
-  watch: {
-    init: {
-      handler() {
-        if (this.init) {
-          this.fileList = []
+    import { uploadFile, remove, deleteFile } from '@/api/platform/file/attachment'
+    import { fileTypes, allFileTypes, accept as acceptTypes } from '@/business/platform/file/constants/fileTypes'
+    export default {
+        props: {
+            height: String,
+            init: Boolean,
+            limit: Number, // 个数
+            multiple: Boolean,
+            fileSize: Number, // 尺寸
+            accept: String // 类型
+        },
+        data() {
+            return {
+                uploadData: {}, // 可以添加分类、文件等信息
+                fileList: [],
+                dialogVisible: false,
+                targetExt: false,
+                dialogImageUrl: '',
+                fileTypes: fileTypes,
+                allFileTypes: allFileTypes,
+                acceptTypes: acceptTypes
+            }
+        },
+        watch: {
+            init: {
+                handler() {
+                    if (this.init) {
+                        this.fileList = []
+                    }
+                },
+                immediate: true
+            }
+        },
+        methods: {
+            /**
+             * 文件上传
+             */
+            httpRequest(options) {
+                return uploadFile(options.file, {})
+            },
+            // 做文件校验
+            beforeUpload(file) {
+                if (this.$utils.isNotEmpty(this.limit) && this.limit === 0) {
+                    this.$message({
+                        message: '上传文件个数不能为0，请重新设置',
+                        type: 'warning'
+                    })
+                    return false
+                }
+                if (this.$utils.isNotEmpty(this.fileSize) && file.size > this.fileSize) {
+                    this.$message.closeAll()
+                    this.$message({
+                        message: '上传文件的大小大于' + this.$utils.formatSize(this.fileSize),
+                        type: 'warning'
+                    })
+                    return false
+                }
+                // if (this.$utils.isNotEmpty(this.accept) && this.handleAccpt(file) || this.fileExtType(file)) {
+                if (this.$utils.isNotEmpty(this.accept) && this.accept && !this.fileExtType(file)) {
+                    this.$message.closeAll()
+                    this.$message({
+                        message: '不允许的文件类型',
+                        type: 'warning'
+                    })
+                    return false
+                }
+                // console.log(this.fileList, 'beforeUpload')
+                if (!this.multiple && this.$utils.isNotEmpty(this.fileList)) {
+                    this.$message.closeAll()
+                    this.$message({
+                        message: '附件上传设置为单选，文件上传只能为1个',
+                        type: 'warning'
+                    })
+                    return false
+                }
+            },
+            /**
+             * 文件类型的检测
+             */
+            fileExtType(file) {
+                const accept = this.accept
+                const acceptTypes = this.acceptTypes
+                const fileTypes = this.fileTypes
+                const arr = file.name.split('.')
+                const result = arr[arr.length - 1]
+                let type = ''
+                this.targetExt = false
+                for (const i in acceptTypes) {
+                    if (acceptTypes[i] === accept) {
+                        type = i
+                    }
+                }
+                if (type !== '' && this.accept !== '*') {
+                    // 现存的附件类型
+                    const targetFileTypes = fileTypes[type]
+                    this.targetExt = targetFileTypes.includes(result)
+                } else {
+                    if (this.accept === '*') {
+                        // 不限制
+                        this.targetExt = true
+                    } else {
+                        // 自定义
+                        const targetFileTypes = this.accept.split(',')
+                        this.targetExt = targetFileTypes.includes('.' + result)
+                    }
+                }
+                return this.targetExt
+            },
+            /**
+             * 文件类型的限制
+             */
+            // handleAccpt (file) {
+            //     const rExt = /\.\w+$/
+            //     let accept = ''
+            //     const arr = []
+            //     const extensions = this.accept.split(',')
+            //     const acceptTypes = this.acceptTypes
+            //     const acceptArr = []
+            //     for (var i in acceptTypes) {
+            //         acceptArr.push(acceptTypes[i])
+            //     }
+            //     const inAcceptTypes = acceptArr.includes(this.accept)
+
+            //     for (let i = 0, len = extensions.length; i < len; i++) {
+            //         const item = extensions[i]
+            //         if (item) {
+            //             if (item.indexOf('/')) {
+            //                 const v = item.split('/')
+            //                 let k = item
+            //                 if (v.length > 0) {
+            //                     k = v[v.length - 1]
+            //                 }
+            //                 arr.push(k)
+            //             } else {
+            //                 arr.push(item)
+            //             }
+            //         }
+            //     }
+            //     if (arr.length) {
+            //         accept = '\\.' + arr.join(',').replace(/,/g, '$|\\.').replace(/\*/g, '.*') + '$'
+            //     }
+            //     accept = new RegExp(accept, 'i')
+            //     // 如果名字中有后缀，才做后缀白名单处理。
+            //     return !file || !file.size || this.accept && rExt.exec(file.name) && !accept.test(file.name) && inAcceptTypes
+            // },
+            handleSuccess(response, file, fileList) {
+                let ext = this.getExtName(file.name)
+                let url = ''
+                if (this.$utils.isEmpty(ext)) {
+                    ext = 'file'
+                }
+                if (['jpg', 'jpeg', 'bmp', 'png'].includes(ext)) {
+                    url = file.url
+                } else {
+                    url = `${this.$baseUrl}images/file/${ext}.png`
+                }
+                file.url = url
+                this.fileList = fileList
+                this.emitCallback(fileList)
+            },
+            // 获取扩展名
+            getExtName(name) {
+                return name ? name.substring(name.lastIndexOf('.') + 1, name.length) : ''
+            },
+            handleError(err, file, fileList) {
+                this.fileList = fileList
+                if (!(err instanceof Error)) {
+                    const data = this.$utils.parseJSON(err.message)
+                    this.$message.closeAll()
+                    this.$message({
+                        message: this.$utils.isNotEmpty(data.message) ? data.message : data.cause,
+                        type: 'error'
+                    })
+                }
+            },
+            handleRemove(file, fileList) {
+                this.fileList = fileList
+                if (file && file.response) {
+                    this.handleRemoteRemove(file.response.data.id, () => {
+                        this.emitCallback(fileList)
+                    })
+                }
+            },
+            emitCallback(fileList) {
+                this.$emit('callback', this.convertFileDataList(fileList, this.multiple))
+            },
+            convertFileDataList(fileList, multiple) {
+                if (this.$utils.isEmpty(fileList)) {
+                    return multiple ? [] : {}
+                }
+                const rtn = []
+                fileList.forEach((file) => {
+                    if (this.$utils.isNotEmpty(file.response)) {
+                        rtn.push(file.response.data)
+                    }
+                })
+                return multiple ? rtn : rtn[rtn.length - 1]
+            },
+            /**
+             * 清空
+             */
+            clearFiles() {
+                const ids = this.$refs.upload.uploadFiles.map((file) => {
+                    // console.log(file.response.data.id)
+                    return file.response.data.id
+                }).join(',')
+
+                if (this.$utils.isEmpty(ids)) {
+                    this.$message.warning('请先上传文件！')
+                    return
+                }
+                this.handleRemoteRemove(ids, () => {
+                    this.$refs.upload.clearFiles()
+                    this.$emit('callback', this.multiple ? [] : {})
+                })
+            },
+            handleRemoteRemove(ids, callback) {
+                // 删除附件文件
+                deleteFile({ attachmentIds: ids }).then(() => {
+                    // 删除附件记录
+                    remove({ attachmentIds: ids }).then(() => {
+                        const _this = this
+                        // this.fileList = []
+                        callback(_this)
+                    }).catch(() => {})
+                })
+            },
+            handlePreview(file) {
+                this.dialogVisible = true
+                //  this.dialogImageUrl = file.url
+            }
         }
-      },
-      immediate: true
     }
-  },
-  methods: {
-    /**
-     * 文件上传
-     */
-    httpRequest(options) {
-      return uploadFile(options.file, {})
-    },
-    // 做文件校验
-    beforeUpload(file) {
-      if (this.$utils.isNotEmpty(this.limit) && this.limit === 0) {
-        this.$message({
-          message: '上传文件个数不能为0，请重新设置',
-          type: 'warning'
-        })
-        return false
-      }
-      if (this.$utils.isNotEmpty(this.fileSize) && file.size > this.fileSize) {
-        this.$message.closeAll()
-        this.$message({
-          message: '上传文件的大小大于' + this.$utils.formatSize(this.fileSize),
-          type: 'warning'
-        })
-        return false
-      }
-      // if (this.$utils.isNotEmpty(this.accept) && this.handleAccpt(file) || this.fileExtType(file)) {
-      if (this.$utils.isNotEmpty(this.accept) && this.accept && !this.fileExtType(file)) {
-        this.$message.closeAll()
-        this.$message({
-          message: '不允许的文件类型',
-          type: 'warning'
-        })
-        return false
-      }
-      // console.log(this.fileList, 'beforeUpload')
-      if (!this.multiple && this.$utils.isNotEmpty(this.fileList)) {
-        this.$message.closeAll()
-        this.$message({
-          message: '附件上传设置为单选，文件上传只能为1个',
-          type: 'warning'
-        })
-        return false
-      }
-    },
-    /**
-     * 文件类型的检测
-     */
-    fileExtType(file) {
-      const accept = this.accept
-      const acceptTypes = this.acceptTypes
-      const fileTypes = this.fileTypes
-      const arr = file.name.split('.')
-      const result = arr[arr.length - 1]
-      let type = ''
-      this.targetExt = false
-      for (const i in acceptTypes) {
-        if (acceptTypes[i] === accept) {
-          type = i
+</script>
+<style lang="scss">
+    .ibps-uplpad {
+        overflow-y: auto;
+        padding: 5px;
+        .header {
+            height: 45px;
+            border-bottom: 1px solid #dadada;
+            margin: 0;
+            padding: 0;
+            line-height: 45px;
+            vertical-align: middle;
+            position: relative;
         }
-      }
-      if (type !== '' && this.accept !== '*') {
-        // 现存的附件类型
-        const targetFileTypes = fileTypes[type]
-        this.targetExt = targetFileTypes.includes(result)
-      } else {
-        if (this.accept === '*') {
-        // 不限制
-          this.targetExt = true
-        } else {
-        // 自定义
-          const targetFileTypes = this.accept.split(',')
-          this.targetExt = targetFileTypes.includes('.' + result)
+        .btns {
+            position: absolute;
+            top: 7px;
+            right: 0;
+            line-height: 30px;
         }
-      }
-      return this.targetExt
-    },
-    /**
-     * 文件类型的限制
-     */
-    // handleAccpt(file) {
-    //   const rExt = /\.\w+$/
-    //   let accept = ''
-    //   const arr = []
-    //   const extensions = this.accept.split(',')
-
-    //   const acceptTypes = this.acceptTypes
-    //   const acceptArr = []
-    //   for (var i in acceptTypes) {
-    //     acceptArr.push(acceptTypes[i])
-    //   }
-    //   const inAcceptTypes = acceptArr.includes(this.accept)
-
-    //   for (let i = 0, len = extensions.length; i < len; i++) {
-    //     const item = extensions[i]
-    //     if (item) {
-    //       if (item.indexOf('/')) {
-    //         const v = item.split('/')
-    //         let k = item
-    //         if (v.length > 0) {
-    //           k = v[v.length - 1]
-    //         }
-    //         arr.push(k)
-    //       } else {
-    //         arr.push(item)
-    //       }
-    //     }
-    //   }
-    //   if (arr.length) {
-    //     accept = '\\.' + arr.join(',')
-    //       .replace(/,/g, '$|\\.')
-    //       .replace(/\*/g, '.*') + '$'
-    //   }
-    //   accept = new RegExp(accept, 'i')
-    //   return !file || !file.size || this.accept &&
-    //   // 如果名字中有后缀，才做后缀白名单处理。
-    //      rExt.exec(file.name) && !accept.test(file.name) && inAcceptTypes
-    // },
-    handleSuccess(response, file, fileList) {
-      let ext = this.getExtName(file.name)
-      let url = ''
-      if (this.$utils.isEmpty(ext)) {
-        ext = 'file'
-      }
-      if (['jpg', 'jpeg', 'bmp', 'png'].includes(ext)) {
-        url = file.url
-      } else {
-        url = `${this.$baseUrl}images/file/${ext}.png`
-      }
-      file.url = url
-      this.fileList = fileList
-      this.emitCallback(fileList)
-    },
-    // 获取扩展名
-    getExtName(name) {
-      return name ? name.substring(name.lastIndexOf('.') + 1, name.length) : ''
-    },
-    handleError(err, file, fileList) {
-      this.fileList = fileList
-      if (!(err instanceof Error)) {
-        const data = this.$utils.parseJSON(err.message)
-        this.$message.closeAll()
-        this.$message({
-          message: this.$utils.isNotEmpty(data.message) ? data.message : data.cause,
-          type: 'error'
-        })
-      }
-    },
-    handleRemove(file, fileList) {
-      this.fileList = fileList
-      if (file && file.response) {
-        this.handleRemoteRemove(file.response.data.id, () => {
-          this.emitCallback(fileList)
-        })
-      }
-    },
-    emitCallback(fileList) {
-      this.$emit('callback', this.convertFileDataList(fileList, this.multiple))
-    },
-    convertFileDataList(fileList, multiple) {
-      if (this.$utils.isEmpty(fileList)) {
-        return multiple ? [] : {}
-      }
-      const rtn = []
-      fileList.forEach((file) => {
-        if (this.$utils.isNotEmpty(file.response)) {
-          rtn.push(file.response.data)
+        .uploader {
+            list-style: none;
+            margin: 0;
+            padding-top: 5px;
+        }
+        .el-upload--picture-card {
+            border: 0;
+        }
+        .el-upload-dragger {
+            width: 148px;
+            height: 148px;
+        }
+        .el-upload-list--picture-card .el-upload-list__item-name {
+            display: block;
+            position: absolute;
+            top: 0px;
+            background: rgba(0, 0, 0, 0.6);
+            color: white;
+            margin: 0;
+            width: 100%;
         }
-      })
-      return multiple ? rtn : rtn[rtn.length - 1]
-    },
-    /**
-     * 清空
-     */
-    clearFiles() {
-      const ids = this.$refs.upload.uploadFiles.map((file) => {
-        // console.log(file.response.data.id)
-        return file.response.data.id
-      }).join(',')
-
-      if (this.$utils.isEmpty(ids)) {
-        this.$message.warning('请先上传文件！')
-        return
-      }
-      this.handleRemoteRemove(ids, () => {
-        this.$refs.upload.clearFiles()
-        this.$emit('callback', this.multiple ? [] : {})
-      })
-    },
-    handleRemoteRemove(ids, callback) {
-      remove({ attachmentIds: ids }).then(response => {
-        const _this = this
-        this.fileList = []
-        callback(_this)
-      }).catch(() => {})
-    },
-    handlePreview(file) {
-      this.dialogVisible = true
-    //  this.dialogImageUrl = file.url
     }
-  }
-}
-</script>
-<style lang="scss" >
-.ibps-uplpad{
-  overflow-y: auto;
-  padding: 5px;
-  .header{
-     height: 45px;
-    border-bottom: 1px solid #dadada;
-    margin: 0;
-    padding: 0;
-    line-height: 45px;
-    vertical-align: middle;
-    position: relative;
-  }
-  .btns{
-    position: absolute;
-    top: 7px;
-    right: 0;
-    line-height: 30px;
-  }
-  .uploader{
-    list-style: none;
-    margin: 0;
-    padding-top: 5px;
-  }
-  .el-upload--picture-card{
-    border: 0;
-  }
-  .el-upload-dragger{
-    width: 148px;
-    height: 148px;
-  }
-  .el-upload-list--picture-card .el-upload-list__item-name {
-    display: block;
-    position: absolute;
-    top: 0px;
-    background: rgba(0, 0, 0, 0.6);
-    color: white;
-    margin: 0;
-    width: 100%;
-  }
-}
-</style>
+</style>

src/views/platform/file/attachment/list.vue

@@ -1,295 +1,339 @@
 <template>
-  <div class="main-container">
-    <ibps-crud
-      ref="crud"
-      :height="height"
-      :data="listData"
-      :toolbars="listConfig.toolbars"
-      :search-form="listConfig.searchForm"
-      :pk-key="pkKey"
-      :columns="listConfig.columns"
-      :row-handle="listConfig.rowHandle"
-      :pagination="pagination"
-      :loading="loading"
-      @action-event="handleAction"
-      @sort-change="handleSortChange"
-      @pagination-change="handlePaginationChange"
-    />
-    <ibps-uploader
-      :visible="dialogFormVisible"
-      :multiple="true"
-      margin-top="7vh"
-      accept="*"
-      class="attachment-uploader-dialog"
-      @action-event="uploaderAction"
-      @close="visible => dialogFormVisible = visible"
-    />
-    <modify-name
-      :id="editId"
-      :file="file"
-      :visible="modifyNameVisible"
-      @callback="search"
-      @close="visible => modifyNameVisible = visible"
-    />
-    <detail
-      :id="editId"
-      :visible="detailVisible"
-      :data="detailData"
-      @callback="search"
-      @close="visible => detailVisible = visible"
-    />
-     <div  v-if="filePreviewVisible">
-       <file-preview
-          :file="file"
-          :visible="filePreviewVisible"
-          @close="visible => filePreviewVisible = visible"
+    <div class="main-container">
+        <ibps-crud
+            ref="crud"
+            :height="height"
+            :data="listData"
+            :toolbars="listConfig.toolbars"
+            :search-form="listConfig.searchForm"
+            :pk-key="pkKey"
+            :columns="listConfig.columns"
+            :row-handle="listConfig.rowHandle"
+            :pagination="pagination"
+            :loading="loading"
+            @action-event="handleAction"
+            @sort-change="handleSortChange"
+            @pagination-change="handlePaginationChange"
         />
-    </div>
-    <div  v-if="filePreviewVisible2">
-       <file-preview
-          :optionFile="file"
-          :visible="filePreviewVisible"
-          @close="visible => filePreviewVisible = visible"
+        <ibps-uploader
+            :visible="dialogFormVisible"
+            :multiple="true"
+            margin-top="7vh"
+            accept="*"
+            class="attachment-uploader-dialog"
+            @action-event="uploaderAction"
+            @close="visible => dialogFormVisible = visible"
+        />
+        <modify-name
+            :id="editId"
+            :file="file"
+            :visible="modifyNameVisible"
+            @callback="search"
+            @close="visible => modifyNameVisible = visible"
+        />
+        <detail
+            :id="editId"
+            :visible="detailVisible"
+            :data="detailData"
+            @callback="search"
+            @close="visible => detailVisible = visible"
         />
+        <div v-if="filePreviewVisible">
+            <file-preview
+                :file="file"
+                :visible="filePreviewVisible"
+                @close="visible => filePreviewVisible = visible"
+            />
+        </div>
+        <div v-if="filePreviewVisible2">
+            <file-preview
+                :optionFile="file"
+                :visible="filePreviewVisible"
+                @close="visible => filePreviewVisible = visible"
+            />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import { queryPageList, remove } from '@/api/platform/file/attachment'
-import { downloadFile } from '@/business/platform/file/utils'
-import ActionUtils from '@/utils/action'
-import FixHeight from '@/mixins/height'
-import IbpsUploader from '@/business/platform/file/uploader'
-import FilePreview from '@/business/platform/file/file-preview'
-import Detail from './detail'
-import ModifyName from './modify-name'
-import {SYSTEM_URL,BASE_API} from '@/api/baseUrl'
+    import { queryPageList, remove, deleteFile } from '@/api/platform/file/attachment'
+    import { downloadFile } from '@/business/platform/file/utils'
+    import ActionUtils from '@/utils/action'
+    import FixHeight from '@/mixins/height'
+    import IbpsUploader from '@/business/platform/file/uploader'
+    import FilePreview from '@/business/platform/file/file-preview'
+    import Detail from './detail'
+    import ModifyName from './modify-name'
+    import { SYSTEM_URL, BASE_API } from '@/api/baseUrl'
 
-export default {
-  components: {
-    IbpsUploader,
-    FilePreview,
-    Detail,
-    ModifyName
-  },
-  mixins: [FixHeight],
-  data() {
-    const extType = ['txt', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'wps', 'jpg', 'jpeg', 'png', 'gif', 'mp3', 'mp4']
-    return {
-      dialogFormVisible: false, // 弹窗
-      modifyNameVisible: false,
-      detailVisible: false,
-      filePreviewVisible: false,
-      filePreviewVisible2: false,
-      editId: '', // 编辑dialog需要使用
-      pkKey: 'id', // 主键  如果主键不是pk需要传主键
-      detailData: '',
-      file: {fileName:'',url:'',editUrl:'',title:'',fileType:'' },
-      loading: true,
-      height: document.clientHeight,
+    export default {
+        components: {
+            IbpsUploader,
+            FilePreview,
+            Detail,
+            ModifyName
+        },
+        mixins: [FixHeight],
+        data() {
+            const extType = [
+                'txt',
+                'pdf',
+                'doc',
+                'docx',
+                'xls',
+                'xlsx',
+                'ppt',
+                'pptx',
+                'wps',
+                'jpg',
+                'jpeg',
+                'png',
+                'gif',
+                'mp3',
+                'mp4'
+            ]
+            return {
+                dialogFormVisible: false, // 弹窗
+                modifyNameVisible: false,
+                detailVisible: false,
+                filePreviewVisible: false,
+                filePreviewVisible2: false,
+                editId: '', // 编辑dialog需要使用
+                pkKey: 'id', // 主键  如果主键不是pk需要传主键
+                detailData: '',
+                file: {
+                    fileName: '',
+                    url: '',
+                    editUrl: '',
+                    title: '',
+                    fileType: ''
+                },
+                loading: true,
+                height: document.clientHeight,
 
-      listData: [],
-      pagination: {},
-      sorts: {},
-      listConfig: {
-        toolbars: [
-          {
-            key: 'search'
-          },
-          {
-            key: 'upLoad',
-            label: '上传',
-            icon: 'ibps-icon-upload'
-          },
-          {
-            key: 'remove'
-          }
-        ],
-        searchForm: {
-          forms: [
-            { prop: 'Q^file_name_^SL', label: '文件名' },
-            { prop: 'Q^creator_name_^SL', label: '上传者' },
-            { prop: 'Q^ext_^SL', label: '扩展名' },
-            { prop: ['Q^create_time_^DL', 'Q^create_time_^DG'], label: '创建时间', fieldType: 'daterange' }
-          ]
+                listData: [],
+                pagination: {},
+                sorts: {},
+                listConfig: {
+                    toolbars: [
+                        {
+                            key: 'search'
+                        },
+                        {
+                            key: 'upLoad',
+                            label: '上传',
+                            icon: 'ibps-icon-upload'
+                        },
+                        {
+                            key: 'remove'
+                        }
+                    ],
+                    searchForm: {
+                        forms: [
+                            { prop: 'Q^file_name_^SL', label: '文件名' },
+                            { prop: 'Q^creator_name_^SL', label: '上传者' },
+                            { prop: 'Q^ext_^SL', label: '扩展名' },
+                            {
+                                prop: [
+                                    'Q^create_time_^DL',
+                                    'Q^create_time_^DG'
+                                ],
+                                label: '创建时间',
+                                fieldType: 'daterange'
+                            }
+                        ]
+                    },
+                    // 表格字段配置
+                    columns: [
+                        { prop: 'fileName', label: '文件名' },
+                        {
+                            prop: 'createTime',
+                            label: '创建时间',
+                            dateFormat: 'yyyy-MM-dd HH:mm:ss'
+                        },
+                        { prop: 'ext', label: '扩展名' },
+                        {
+                            prop: 'totalBytes',
+                            label: '总字节数',
+                            filter: 'numberFormatter'
+                        },
+                        { prop: 'creatorName', label: '上传者' }
+                    ],
+                    rowHandle: {
+                        actions: [
+                            {
+                                key: 'preview',
+                                label: '预览',
+                                icon: 'ibps-icon-eye',
+                                hidden: (row, index) => {
+                                    if (extType.includes(row.ext)) return false
+                                    return true
+                                }
+                            },
+                            {
+                                key: 'modifyName',
+                                label: '修改文件名',
+                                icon: 'ibps-icon-eraser'
+                            },
+                            {
+                                key: 'detail',
+                                icon: 'ibps-icon-detail'
+                            },
+                            {
+                                key: 'download',
+                                label: '下载',
+                                icon: 'ibps-icon-download'
+                            },
+                            {
+                                key: 'remove'
+                            }
+                        ]
+                    }
+                }
+            }
         },
-        // 表格字段配置
-        columns: [
-          { prop: 'fileName', label: '文件名' },
-          { prop: 'createTime', label: '创建时间', dateFormat: 'yyyy-MM-dd HH:mm:ss' },
-          { prop: 'ext', label: '扩展名' },
-          { prop: 'totalBytes', label: '总字节数', filter: 'numberFormatter' },
-          { prop: 'creatorName', label: '上传者' }
-        ],
-        rowHandle: {
-          actions: [
-            {
-              key: 'preview',
-              label: '预览',
-              icon: 'ibps-icon-eye',
-              hidden: (row, index) => {
-                if (extType.includes(row.ext)) return false
-                return true
-              }
-            }, {
-              key: 'modifyName',
-              label: '修改文件名',
-              icon: 'ibps-icon-eraser'
-            }, {
-              key: 'detail',
-              icon: 'ibps-icon-detail'
-            }, {
-              key: 'download',
-              label: '下载',
-              icon: 'ibps-icon-download'
-            }, {
-              key: 'remove'
+        created() {
+            this.loadData()
+        },
+        methods: {
+            // 加载数据
+            loadData() {
+                this.loading = true
+                queryPageList(this.getSearcFormData()).then((response) => {
+                    ActionUtils.handleListData(this, response.data)
+                    this.loading = false
+                }).catch(() => {
+                    this.loading = false
+                })
+            },
+            /**
+             * 获取格式化参数
+             */
+            getSearcFormData() {
+                return ActionUtils.formatParams(
+                    this.$refs['crud'] ? this.$refs['crud'].getSearcFormData() : {},
+                    this.pagination,
+                    this.sorts
+                )
+            },
+            /**
+             * 处理分页事件
+             */
+            handlePaginationChange(page) {
+                ActionUtils.setPagination(this.pagination, page)
+                this.loadData()
+            },
+            /**
+             * 处理排序
+             */
+            handleSortChange(sort) {
+                ActionUtils.setSorts(this.sorts, sort)
+                this.loadData()
+            },
+            /**
+             * 查询
+             */
+            search() {
+                this.loadData()
+            },
+            /**
+             * 处理按钮事件
+             */
+            handleAction(command, position, selection, data) {
+                switch (command) {
+                    case 'search': // 查询
+                        ActionUtils.setFirstPagination(this.pagination)
+                        this.search()
+                        break
+                    case 'upLoad': // 添加
+                        this.handleUpload()
+                        break
+                    case 'modifyName': // 修改文件名
+                        ActionUtils.selectedRecord(selection).then((id) => {
+                            this.handleModify(id)
+                            this.file.fileName = data.fileName
+                            // console.log(this.file.fileName)
+                        })
+                        break
+                    case 'detail': // 明细
+                        ActionUtils.selectedRecord(selection).then((id) => {
+                            this.handleDetail(id)
+                            this.detailData = data
+                        })
+                        break
+                    case 'preview': // 预览
+                        console.log('ext:', data.ext)
+                        if (['png', 'jpeg', 'jpg'].includes(data.ext)) {
+                            this.file = data
+                            this.filePreviewVisible2 = false
+                            this.filePreviewVisible = true
+                            break
+                        }
+                        this.file.url = BASE_API() + SYSTEM_URL() + `/file/download?attachmentId=${data.id}`
+                        this.file.editUrl = BASE_API() + SYSTEM_URL() + `/file/editCallback?fileName=${data.fileName}&fileType=${data.ext}&id=${data.id}`
+                        this.file.title = data.fileName // 文件名称
+                        this.file.fileType = data.ext //类型
+                        this.filePreviewVisible = false
+                        this.filePreviewVisible2 = true
+                        break
+                    case 'download': //  下载
+                        this.handleDownload(data)
+                        break
+                    case 'remove': // 删除
+                        ActionUtils.removeRecord(selection).then((ids) => {
+                            this.handleRemove(ids)
+                        }).catch(() => {})
+                        break
+                    default:
+                        break
+                }
+            },
+            /**
+             * 上传
+             */
+            handleUpload(id = '') {
+                this.editId = id
+                this.dialogFormVisible = true
+            },
+            uploaderAction(data) {
+                this.dialogFormVisible = false
+                this.search()
+            },
+            /**
+             * 修改文件名
+             */
+            handleModify(id = '') {
+                this.editId = id
+                this.modifyNameVisible = true
+            },
+            /**
+             * 处理明细
+             */
+            handleDetail(id = '') {
+                this.editId = id
+                this.detailVisible = true
+            },
+            /**
+             * 处理删除
+             */
+            handleRemove(ids) {
+                deleteFile({ attachmentIds: ids }).then(() => {
+                    remove({ attachmentIds: ids }).then(() => {
+                        ActionUtils.removeSuccessMessage()
+                        this.search()
+                    }).catch(() => {})
+                })
+            },
+            handleDownload(data) {
+                downloadFile(data)
             }
-          ]
         }
-      }
-    }
-  },
-  created() {
-    this.loadData()
-  },
-  methods: {
-    // 加载数据
-    loadData() {
-      this.loading = true
-      queryPageList(this.getSearcFormData()).then(response => {
-        ActionUtils.handleListData(this, response.data)
-        this.loading = false
-      }).catch(() => {
-        this.loading = false
-      })
-    },
-    /**
-     * 获取格式化参数
-     */
-    getSearcFormData() {
-      return ActionUtils.formatParams(
-        this.$refs['crud'] ? this.$refs['crud'].getSearcFormData() : {},
-        this.pagination,
-        this.sorts)
-    },
-    /**
-     * 处理分页事件
-     */
-    handlePaginationChange(page) {
-      ActionUtils.setPagination(this.pagination, page)
-      this.loadData()
-    },
-    /**
-     * 处理排序
-     */
-    handleSortChange(sort) {
-      ActionUtils.setSorts(this.sorts, sort)
-      this.loadData()
-    },
-    /**
-     * 查询
-     */
-    search() {
-      this.loadData()
-    },
-    /**
-     * 处理按钮事件
-     */
-    handleAction(command, position, selection, data) {
-      switch (command) {
-        case 'search':// 查询
-          ActionUtils.setFirstPagination(this.pagination)
-          this.search()
-          break
-        case 'upLoad':// 添加
-          this.handleUpload()
-          break
-        case 'modifyName':// 修改文件名
-          ActionUtils.selectedRecord(selection).then((id) => {
-            this.handleModify(id)
-            this.file.fileName = data.fileName
-            // console.log(this.file.fileName)
-          })
-          break
-        case 'detail':// 明细
-          ActionUtils.selectedRecord(selection).then((id) => {
-            this.handleDetail(id)
-            this.detailData = data
-          })
-          break
-        case 'preview':// 预览
-          console.log("ext:",data.ext)
-          if("png"==data.ext||"jpeg"==data.ext||"jpg"==data.ext){
-            this.file = data
-            this.filePreviewVisible2 = false
-            this.filePreviewVisible = true
-            break
-          }
-          this.file.url = BASE_API() + SYSTEM_URL() + '/file/download?attachmentId=' + data.id
-          this.file.editUrl =  BASE_API()+SYSTEM_URL() + '/file/editCallback?fileName='+data.fileName+'&fileType='+data.ext+'&id='+ data.id
-          this.file.title =data.fileName // 文件名称
-          this.file.fileType = data.ext //类型
-          this.filePreviewVisible = false
-          this.filePreviewVisible2 = true
-          break
-        case 'download'://  下载
-          this.handleDownload(data)
-          break
-        case 'remove':// 删除
-          ActionUtils.removeRecord(selection).then((ids) => {
-            this.handleRemove(ids)
-          }).catch(() => { })
-          break
-        default:
-          break
-      }
-    },
-    /**
-     * 上传
-     */
-    handleUpload(id = '') {
-      this.editId = id
-      this.dialogFormVisible = true
-    },
-    uploaderAction(data) {
-      this.dialogFormVisible = false
-      this.search()
-    },
-    /**
-     * 修改文件名
-     */
-    handleModify(id = '') {
-      this.editId = id
-      this.modifyNameVisible = true
-    },
-    /**
-     * 处理明细
-     */
-    handleDetail(id = '') {
-      this.editId = id
-      this.detailVisible = true
-    },
-    /**
-     * 处理删除
-     */
-    handleRemove(ids) {
-      remove({ attachmentIds: ids }).then(response => {
-        ActionUtils.removeSuccessMessage()
-        this.search()
-      }).catch(() => {})
-    },
-    handleDownload(data) {
-      downloadFile(data)
     }
-  }
-}
 </script>
 <style lang="scss">
-.attachment-uploader-dialog{
-  .el-dialog__body{
-    height:  calc(57vh - 100px) !important;
-  }
-}
+    .attachment-uploader-dialog {
+        .el-dialog__body {
+            height: calc(57vh - 100px) !important;
+        }
+    }
 </style>