update file manage

package.json

@@ -1,6 +1,6 @@
 {
   "name": "go-admin",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
   "author": "https://github.com/wenjianzhang/go-admin-ui",
   "license": "MIT",

src/components/FileChoose/index.vue

@@ -1,64 +1,64 @@
 <template>
   <div>
     <el-dialog
-      :visible.sync="show"
+      :visible.sync="dialog"
       width="30%"
-      :before-close="handleClose">
-      <div class="file-title" slot="title">
-          系统资源选择器(<small>已选择：{{ resultList.length }}个</small>)
+      :before-close="handleClose"
+    >
+      <div slot="title" class="file-title">
+        系统资源选择器(<small>已选择：{{ resultList.length }}个</small>)
       </div>
       <div class="file-header">
         <el-cascader
           v-model="value"
           :options="options"
           clearable
-          :props="{ expandTrigger: 'hover',  checkStrictly: true, value: 'id' }"
+          :props="{ expandTrigger: 'hover', checkStrictly: true, value: 'id' }"
           @change="handleChange"
-        ></el-cascader>
+        />
       </div>
       <div class="file-footer">
         <el-card>
           <el-scrollbar>
             <div class="file-footer-inner">
               <div
-                class="file-footer-item"
                 v-for="(item,index) in fileList"
                 :key="item.id"
+                class="file-footer-item"
                 :class=" item.open ? 'file-active' : '' "
                 @click="handleChoose(item,index)"
               >
                 <div class="file-footer-item-inner">
                   <div class="file-footer-item-icon">
-                    <img :src="item.fullUrl | formatFile" alt="" />
+                    <img :src="item.fullUrl | formatFile" alt="">
                   </div>
                   <div class="file-footer-item-title">
                     {{ item.name }}
                   </div>
                   <div class="file-footer-item-mask">
-                    <i class="el-icon-check"></i>
+                    <i class="el-icon-check" />
                   </div>
                 </div>
               </div>
             </div>
           </el-scrollbar>
-            <div class="page">
+          <div class="page">
             <el-pagination
-                layout="prev, pager, next, jumper, total"
-                prev-text="上一页"
-                next-text="下一页"
-                @current-change="handlePage"
-                :current-page="pageNo"
-                :page-size="pageSize"
-                :total="total"
-            >
-            </el-pagination>
-            </div>
+              layout="prev, pager, next, jumper, total"
+              prev-text="上一页"
+              next-text="下一页"
+              :current-page="pageNo"
+              :page-size="pageSize"
+              :total="total"
+              @current-change="handlePage"
+            />
+          </div>
         </el-card>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="handleCancle">取 消</el-button>
+        <el-button @click="handleCancel">取 消</el-button>
         <el-button type="primary" @click="handleConfirm">确 定</el-button>
-    </span>
+      </span>
     </el-dialog>
   </div>
 </template>
@@ -68,222 +68,226 @@ import {
   sysfiledirList,
   sysfileinfoList
 } from '@/api/file'
-import { filter } from 'jszip';
+// import { filter } from 'jszip'
 export default {
-  data() {
-    return {
-      value: [],
-      options: [],
-      fileList: [],
-      total:0,
-      pageNo: 1,
-      pageSize: 12,
-      resultList:[]
-    };
-  },
-  props: {
-      multiple: {
-          type: Boolean,
-          default: true
-      },
-      show: {
-          type: Boolean,
-          default: false
-      }
-  },
-  created() {
-      this.getFileDir()
-  },
-   filters: {
+  filters: {
     formatFile(pic) {
-      let type = pic.substring(pic.lastIndexOf(".") + 1, pic.length);
+      const type = pic.substring(pic.lastIndexOf('.') + 1, pic.length)
       const FileIcons = [
         {
-          icon: "",
-          matchList: ["bmp", "jpg", "png", "jpeg", "gif", "webp"]
+          icon: '',
+          matchList: ['bmp', 'jpg', 'png', 'jpeg', 'gif', 'webp']
         },
         {
-          icon: require("../../assets/icons/txtbeifen.png"),
-          matchList: ["text", "txt"]
+          icon: require('../../assets/icons/txtbeifen.png'),
+          matchList: ['text', 'txt']
         },
         {
-          icon: require("../../assets/icons/Zip.png"),
-          matchList: ["zip", "tar", "7z"]
+          icon: require('../../assets/icons/Zip.png'),
+          matchList: ['zip', 'tar', '7z']
         },
         {
-          icon: require("../../assets/icons/rar.png"),
-          matchList: ["rar"]
+          icon: require('../../assets/icons/rar.png'),
+          matchList: ['rar']
         },
         {
-          icon: require("../../assets/icons/Word.png"),
-          matchList: ["doc", "docx"]
+          icon: require('../../assets/icons/Word.png'),
+          matchList: ['doc', 'docx']
         },
         {
-          icon: require("../../assets/icons/pptbeifen.png"),
-          matchList: ["ppt", "pptx"]
+          icon: require('../../assets/icons/pptbeifen.png'),
+          matchList: ['ppt', 'pptx']
         },
         {
-          icon: require("../../assets/icons/Excel.png"),
-          matchList: ["xlsx", "xls"]
+          icon: require('../../assets/icons/Excel.png'),
+          matchList: ['xlsx', 'xls']
         },
         {
-          icon: require("../../assets/icons/PDFbeifen.png"),
-          matchList: ["pdf", "pdfx"]
+          icon: require('../../assets/icons/PDFbeifen.png'),
+          matchList: ['pdf', 'pdfx']
         },
         {
-          icon: require("../../assets/icons/Idea.png"),
-          matchList: ["java", "class", "jar", "kt"]
+          icon: require('../../assets/icons/Idea.png'),
+          matchList: ['java', 'class', 'jar', 'kt']
         },
         {
-          icon: require("../../assets/icons/tubiaozhizuomoban-01.png"),
-          matchList: ["psd"]
+          icon: require('../../assets/icons/tubiaozhizuomoban-01.png'),
+          matchList: ['psd']
         },
         {
-          icon: require("../../assets/icons/tubiaozhizuomoban2-01-01.png"),
-          matchList: ["ai"]
+          icon: require('../../assets/icons/tubiaozhizuomoban2-01-01.png'),
+          matchList: ['ai']
         },
         {
-          icon: require("../../assets/icons/Web.png"),
-          matchList: ["ts", "html", "css", "js"]
+          icon: require('../../assets/icons/Web.png'),
+          matchList: ['ts', 'html', 'css', 'js']
         },
         {
-          icon: require("../../assets/icons/video2.png"),
-          matchList: ["mp4"]
+          icon: require('../../assets/icons/video2.png'),
+          matchList: ['mp4']
         },
         {
-          icon: require("../../assets/icons/voice.png"),
-          matchList: ["mp3"]
+          icon: require('../../assets/icons/voice.png'),
+          matchList: ['mp3']
         },
         {
-          icon: require("../../assets/icons/AwesomeVue.png"),
-          matchList: ["vue"]
+          icon: require('../../assets/icons/AwesomeVue.png'),
+          matchList: ['vue']
         },
         {
-          icon: require("../../assets/icons/Pycharm.png"),
-          matchList: ["py"]
+          icon: require('../../assets/icons/Pycharm.png'),
+          matchList: ['py']
         },
         {
-          icon: require("../../assets/icons/Phpstorm-01.png"),
-          matchList: ["php"]
+          icon: require('../../assets/icons/Phpstorm-01.png'),
+          matchList: ['php']
         }
-      ];
-      const UnknowIcon = require("../../assets/icons/Unknow.png");
+      ]
+      const UnknowIcon = require('../../assets/icons/Unknow.png')
       if (FileIcons[0].matchList.includes(type)) {
-        return pic;
+        return pic
       } else {
-        let file = FileIcons.filter(item => item.matchList.includes(type));
+        const file = FileIcons.filter(item => item.matchList.includes(type))
         if (file.length > 0) {
-          return file[0].icon;
+          return file[0].icon
         } else {
-          return UnknowIcon;
+          return UnknowIcon
         }
       }
     }
   },
+  props: {
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    dialogFormVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      value: [],
+      options: [],
+      fileList: [],
+      total: 0,
+      pageNo: 1,
+      pageSize: 12,
+      resultList: [],
+      dialog: this.dialogFormVisible
+    }
+  },
+  watch: {
+    dialogFormVisible(val) {
+      this.dialog = val
+    }
+  },
+  created() {
+    this.getFileDir()
+  },
   methods: {
     handleCancel() {
-        this.show = false;
-        this.$emit('close')
+      this.dialog = false
+      this.$emit('close')
     },
     handleConfirm() {
-        this.show = false;
-        this.$emit('confirm',this.resultList)
+      this.dialog = false
+      this.$emit('confirm', this.resultList)
+      this.$emit('close')
     },
     getFileDir() {
-        sysfiledirList().then(ret => {
+      sysfiledirList().then(ret => {
         if (ret.code === 200) {
           this.options = ret.data
         }
       })
     },
     getFileInfo(id) {
-        sysfileinfoList({
-          pId:id,
-          pageIndex: this.pageNo,
-          pageSize: this.pageSize
-        }).then(ret => {
-          if (ret.code === 200) {
-            this.total = ret.data.count;
-            this.fileList = ret.data.list.map(item => {
-              return {
-                ...item,
-                open: false
-              };
-            });
-             this.updateStatus()
-          }
-        });
+      sysfileinfoList({
+        pId: id,
+        pageIndex: this.pageNo,
+        pageSize: this.pageSize
+      }).then(ret => {
+        if (ret.code === 200) {
+          this.total = ret.data.count
+          this.fileList = ret.data.list.map(item => {
+            return {
+              ...item,
+              open: false
+            }
+          })
+          this.updateStatus()
+        }
+      })
     },
     handleClose() {
-      this.handleCancel();
+      this.handleCancel()
     },
     handleChange() {
-        const id = this.value[this.value.length-1];
-        this.total = 0;
-        this.pageNo = 1;
-        this.fileList.length = 0;
-        if(id) {
-            this.getFileInfo(id)
-        }
+      const id = this.value[this.value.length - 1]
+      this.total = 0
+      this.pageNo = 1
+      this.fileList.length = 0
+      if (id) {
+        this.getFileInfo(id)
+      }
     },
     handlePage(e) {
-        this.pageNo = e;
-        const id = this.value[this.value.length-1];
-        if(id) {
-            this.getFileInfo(id)
-        }
-        
+      this.pageNo = e
+      const id = this.value[this.value.length - 1]
+      if (id) {
+        this.getFileInfo(id)
+      }
     },
-    handleChoose(e,index) {
-        if(this.multiple){
-            const fileIndex = this.resultList.findIndex(item => item.id === e.id)
-            if(e.open) {
-                if(fileIndex<0){
-                    return false;
-                }
-                this.resultList.splice(fileIndex,1)
-            } else {
-                if(fileIndex > 0) {
-                    return false;
-                }
-                this.resultList.push(e)
-                this.resultList = Array.from(new Set(this.resultList))
-            }
-
-
+    handleChoose(e, index) {
+      if (this.multiple) {
+        const fileIndex = this.resultList.findIndex(item => item.id === e.id)
+        if (e.open) {
+          if (fileIndex < 0) {
+            return false
+          }
+          this.resultList.splice(fileIndex, 1)
         } else {
-            if(e.open) {
-                this.resultList.length = 0;
-            } else {
-                this.resultList.length = 0;
-                this.resultList.push(e)
-            }
+          if (fileIndex > 0) {
+            return false
+          }
+          this.resultList.push(e)
+          this.resultList = Array.from(new Set(this.resultList))
+        }
+      } else {
+        if (e.open) {
+          this.resultList.length = 0
+        } else {
+          this.resultList.length = 0
+          this.resultList.push(e)
         }
-        this.updateStatus()
+      }
+      this.updateStatus()
     },
     updateStatus() {
-        if(this.multiple) {
-            for(let i=0;i<this.fileList.length;i++) {
-                this.fileList[i].open = false;
-                for(let j=0;j<this.resultList.length;j++) {
-                    if(this.resultList[j].id === this.fileList[i].id) {
-                        this.fileList[i].open = true;
-                    }
-                    continue
-                }
-            }
-        } else {
-            for(let i=0;i<this.fileList.length;i++) {
-                if(this.resultList.every(e => e.id === this.fileList[i].id)) {
-                    this.fileList[i].open = true;
-                } else {
-                    this.fileList[i].open = false;
-                }
+      if (this.multiple) {
+        for (let i = 0; i < this.fileList.length; i++) {
+          this.fileList[i].open = false
+          for (let j = 0; j < this.resultList.length; j++) {
+            if (this.resultList[j].id === this.fileList[i].id) {
+              this.fileList[i].open = true
             }
+            continue
+          }
         }
+      } else {
+        for (let i = 0; i < this.fileList.length; i++) {
+          if (this.resultList.every(e => e.id === this.fileList[i].id)) {
+            this.fileList[i].open = true
+          } else {
+            this.fileList[i].open = false
+          }
+        }
+      }
     }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>

src/components/FileManage/Left.vue

@@ -231,6 +231,7 @@ export default {
           }).then(ret => {
             if (ret.code === 200) {
               this.$refs.tree.append(ret.data, this.rightData.currentData.id)
+              this.getDirList()
             }
           })
           break

src/views/syscontent/index.vue

@@ -176,6 +176,14 @@
                 v-model="form.img"
                 placeholder="图片"
               />
+              <el-button type="primary" @click="fileShow">选择文件</el-button>
+            </el-form-item>
+            <el-form-item label="图片" prop="img">
+              <el-input
+                v-model="form.img1"
+                placeholder="图片"
+              />
+              <el-button type="primary" @click="fileShow1">选择文件</el-button>
             </el-form-item>
             <el-form-item label="内容" prop="content">
               <el-input
@@ -203,10 +211,10 @@
             <el-button @click="cancel">取 消</el-button>
           </div>
         </el-dialog>
-        <FileChoose show></FileChoose>
+        <FileChoose ref="fileChoose" :dialog-form-visible="fileOpen" @confirm="getImgList" @close="fileClose" />
       </el-card>
     </template>
-    
+
   </BasicLayout>
 </template>
 
@@ -214,11 +222,11 @@
 import { addSysContent, delSysContent, getSysContent, listSysContent, updateSysContent } from '@/api/syscontent'
 import { listSysCategory } from '@/api/syscategory'
 
-import FileChoose from "@/components/FileChoose"
+import FileChoose from '@/components/FileChoose'
 export default {
   name: 'Config',
   components: {
-    FileChoose,
+    FileChoose
   },
   data() {
     return {
@@ -236,6 +244,8 @@ export default {
       title: '',
       // 是否显示弹出层
       open: false,
+      fileOpen: false,
+      fileIndex: undefined,
       isEdit: false,
       // 类型数据字典
       typeOptions: [],
@@ -243,7 +253,6 @@ export default {
       statusOptions: [],
       // 关系表类型
       cateIdOptions: [],
-
       // 查询参数
       queryParams: {
         pageIndex: 1,
@@ -251,24 +260,14 @@ export default {
         cateId: undefined,
         name: undefined,
         status: undefined
-
       },
       // 表单参数
-      form: {
-      },
+      form: {},
       // 表单校验
-      rules: { cateId:
-                [
-                  { required: true, message: '分类id不能为空', trigger: 'blur' }
-                ],
-      name:
-                [
-                  { required: true, message: '名称不能为空', trigger: 'blur' }
-                ],
-      status:
-                [
-                  { required: true, message: '状态不能为空', trigger: 'blur' }
-                ]
+      rules: {
+        cateId: [{ required: true, message: '分类id不能为空', trigger: 'blur' }],
+        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+        status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
       }
     }
   },
@@ -359,6 +358,20 @@ export default {
         this.isEdit = true
       })
     },
+    fileShow: function() {
+      this.fileOpen = true
+      this.fileIndex = 'img'
+    },
+    fileShow1: function() {
+      this.fileOpen = true
+      this.fileIndex = 'img1'
+    },
+    getImgList: function() {
+      this.form[this.fileIndex] = this.$refs['fileChoose'].resultList[0].fullUrl
+    },
+    fileClose: function() {
+      this.fileOpen = false
+    },
     /** 提交按钮 */
     submitForm: function() {
       this.$refs['form'].validate(valid => {

src/views/tools/gen/editTable.vue

@@ -91,6 +91,7 @@
                 <el-option label="文本框" value="input" />
                 <el-option label="下拉框" value="select" />
                 <el-option label="单选框" value="radio" />
+                <el-option label="文件选择" value="file" />
                 <!-- <el-option label="复选框" value="checkbox" />
                 <el-option label="日期控件" value="datetime" />-->
                 <el-option label="文本域" value="textarea" />