Merge branch 'master' into net6.0

2022-03-11 11:53:31 +08:00 · 2022-03-11 11:53:31 +08:00 · a5575cb5a9
commit a5575cb5a9
parent 7fe07b104c eb32117b8c
14 changed files with 376 additions and 430 deletions
--- a/ZR.Admin.WebApi/Controllers/CommonController.cs
+++ b/ZR.Admin.WebApi/Controllers/CommonController.cs
@ -7,9 +7,11 @@ using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Options;
 using Newtonsoft.Json;
+using Snowflake.Core;
 using System;
 using System.IO;
 using System.Linq;
+using System.Threading.Tasks;
 using ZR.Admin.WebApi.Extensions;
 using ZR.Admin.WebApi.Filters;
 using ZR.Common;
@ -158,25 +160,29 @@ namespace ZR.Admin.WebApi.Controllers
        [HttpPost]
        [Verify]
        [ActionPermissionFilter(Permission = "common")]
-        public IActionResult UploadFileAliyun([FromForm(Name = "file")] IFormFile formFile, string fileName = "", string fileDir = "")
+        public async Task<IActionResult> UploadFileAliyun([FromForm(Name = "file")] IFormFile formFile, string fileName = "", string fileDir = "")
        {
+            if (fileDir.IsEmpty()) fileDir = "uploads";
            if (formFile == null) throw new CustomException(ResultCode.PARAM_ERROR, "上传文件不能为空");
-            string fileExt = Path.GetExtension(formFile.FileName);
-            string[] AllowedFileExtensions = new string[] { ".jpg", ".gif", ".png", ".jpeg", ".webp", ".svga", ".xls", ".doc", ".zip", ".json", ".txt", ".bundle" };
-            int MaxContentLength = 1024 * 1024 * 15;
-            double fileSize = formFile.Length / 1024;
-            if (!AllowedFileExtensions.Contains(fileExt))
+            string fileExt = Path.GetExtension(formFile.FileName);//文件后缀
+            double fileSize = formFile.Length / 1024.0;//文件大小KB
+            string[] NotAllowedFileExtensions = new string[] { ".bat", ".exe", ".jar", ".js" };
+            int MaxContentLength = 15;
+            if (NotAllowedFileExtensions.Contains(fileExt))
            {
                return ToResponse(ResultCode.CUSTOM_ERROR, "上传失败，未经允许上传类型");
            }
-
-            if (formFile.Length > MaxContentLength)
+            if ((fileSize / 1024) > MaxContentLength)
            {
-                return ToResponse(ResultCode.CUSTOM_ERROR, "上传文件过大，不能超过 " + (MaxContentLength / 1024).ToString() + " MB");
+                return ToResponse(ResultCode.CUSTOM_ERROR, "上传文件过大，不能超过 " + MaxContentLength + " MB");
            }

-            (bool, string, string) result = SysFileService.SaveFile(fileDir, formFile, fileName);
-            long fileId = SysFileService.InsertFile(new SysFile()
+            (bool, string, string) result = new();
+            await Task.Run(() =>
+            {
+                result = SysFileService.SaveFile(fileDir, formFile, fileName, "");
+            });
+            long id = SysFileService.InsertFile(new SysFile()
            {
                AccessUrl = result.Item2,
                Create_by = HttpContext.GetName(),
@ -193,7 +199,7 @@ namespace ZR.Admin.WebApi.Controllers
            {
                url = result.Item2,
                fileName = result.Item3,
-                fileId
+                fileId = id
            });
        }
        #endregion
--- a/ZR.Admin.WebApi/Controllers/System/SysFileController.cs
+++ b/ZR.Admin.WebApi/Controllers/System/SysFileController.cs
@ -46,7 +46,7 @@ namespace ZR.Admin.WebApi.Controllers
            predicate = predicate.AndIF(parm.FileId != null, m => m.Id == parm.FileId);

            //搜索条件查询语法参考Sqlsugar
-            var response = _SysFileService.GetPages(predicate.ToExpression(), parm);
+            var response = _SysFileService.GetPages(predicate.ToExpression(), parm, x => x.Id, OrderByType.Desc);
            return SUCCESS(response);
        }

@ -57,74 +57,13 @@ namespace ZR.Admin.WebApi.Controllers
        /// <returns></returns>
        [HttpGet("{Id}")]
        [ActionPermissionFilter(Permission = "tool:file:query")]
-        public IActionResult GetSysFile(int Id)
+        public IActionResult GetSysFile(long Id)
        {
            var response = _SysFileService.GetFirst(x => x.Id == Id);

            return SUCCESS(response);
        }

-        ///// <summary>
-        ///// 添加文件存储
-        ///// </summary>
-        ///// <returns></returns>
-        //[HttpPost]
-        //[ActionPermissionFilter(Permission = "tool:file:add")]
-        //[Log(Title = "文件存储", BusinessType = BusinessType.INSERT)]
-        //public IActionResult AddSysFile([FromBody] SysFileDto parm)
-        //{
-        //    if (parm == null)
-        //    {
-        //        throw new CustomException("请求参数错误");
-        //    }
-        //    //从 Dto 映射到 实体
-        //    var model = parm.Adapt<SysFile>().ToCreate(HttpContext);
-
-        //    var response = _SysFileService.Insert(model, it => new
-        //    {
-        //        it.FileName,
-        //        it.FileUrl,
-        //        it.StorePath,
-        //        it.FileSize,
-        //        it.FileExt,
-        //        it.Create_by,
-        //        it.Create_time,
-        //        it.StoreType,
-        //        it.AccessUrl,
-        //    });
-        //    return ToResponse(response);
-        //}
-
-        ///// <summary>
-        ///// 更新文件存储
-        ///// </summary>
-        ///// <returns></returns>
-        //[HttpPut]
-        //[ActionPermissionFilter(Permission = "tool:file:update")]
-        //[Log(Title = "文件存储", BusinessType = BusinessType.UPDATE)]
-        //public IActionResult UpdateSysFile([FromBody] SysFileDto parm)
-        //{
-        //    if (parm == null)
-        //    {
-        //        throw new CustomException("请求实体不能为空");
-        //    }
-        //    //从 Dto 映射到 实体
-        //    var model = parm.Adapt<SysFile>().ToUpdate(HttpContext);
-
-        //    var response = _SysFileService.Update(w => w.Id == model.Id, it => new SysFile()
-        //    {
-        //        //Update 字段映射
-        //        FileUrl = model.FileUrl,
-        //        StorePath = model.StorePath,
-        //        FileSize = model.FileSize,
-        //        FileExt = model.FileExt,
-        //        StoreType = model.StoreType,
-        //        AccessUrl = model.AccessUrl,
-        //    });
-
-        //    return ToResponse(response);
-        //}
-
        /// <summary>
        /// 删除文件存储
        /// </summary>
@ -134,7 +73,7 @@ namespace ZR.Admin.WebApi.Controllers
        [Log(Title = "文件存储", BusinessType = BusinessType.DELETE)]
        public IActionResult DeleteSysFile(string ids)
        {
-            int[] idsArr = Tools.SpitIntArrary(ids);
+            long[] idsArr = Tools.SpitLongArrary(ids);
            if (idsArr.Length <= 0) { return ToResponse(ApiResult.Error($"删除失败Id 不能为空")); }

            var response = _SysFileService.Delete(idsArr);
--- a/ZR.Common/AliyunOssHelper.cs
+++ b/ZR.Common/AliyunOssHelper.cs
@ -21,7 +21,7 @@ namespace ZR.Common
        /// <param name="bucketName">存储桶 如果为空默认取配置文件</param>
        public static System.Net.HttpStatusCode PutObjectFromFile(Stream filestreams, string dirPath, string bucketName = "")
        {
-            OssClient client = new OssClient(endpoint, accessKeyId, accessKeySecret);
+            OssClient client = new(endpoint, accessKeyId, accessKeySecret);
            if (string.IsNullOrEmpty(bucketName)) { bucketName = bucketName1; }
            try
            {
--- a/ZR.Model/System/Dto/SysFileQueryDto.cs
+++ b/ZR.Model/System/Dto/SysFileQueryDto.cs
@ -9,7 +9,7 @@ namespace ZR.Model.System.Dto
    /// </summary>
    public class SysFileDto
    {
-        public int Id { get; set; }
+        public long Id { get; set; }
        public string FileName { get; set; }
        public string FileUrl { get; set; }
        public string StorePath { get; set; }
@ -25,6 +25,6 @@ namespace ZR.Model.System.Dto
        public DateTime? BeginCreate_time { get; set; }
        public DateTime? EndCreate_time { get; set; }
        public int? StoreType { get; set; }
-        public int? FileId { get; set; }
+        public long? FileId { get; set; }
    }
 }
--- a/ZR.Model/System/SysFile.cs
+++ b/ZR.Model/System/SysFile.cs
@ -1,4 +1,5 @@
-using SqlSugar;
+using Newtonsoft.Json;
+using SqlSugar;
 using System;
 using System.Collections.Generic;
 using System.Text;
@ -13,7 +14,8 @@ namespace ZR.Model.System
        /// 描述 : 自增id
        /// 空值 : false  
        /// </summary>
-        [SugarColumn(IsPrimaryKey = true, IsIdentity = true)]
+        [JsonConverter(typeof(ValueToStringConverter))]
+        [SugarColumn(IsPrimaryKey = true)]
        public long Id { get; set; }
        /// <summary>
        /// 文件真实名
--- a/ZR.Service/System/IService/ISysFileService.cs
+++ b/ZR.Service/System/IService/ISysFileService.cs
@ -16,7 +16,7 @@ namespace ZR.Service.System.IService
        /// <param name="formFile"></param>
        /// <returns>结果、地址、文件名</returns>
        (bool, string, string) SaveFile(string picdir, IFormFile formFile);
-        (bool, string, string) SaveFile(string picdir, IFormFile formFile, string customFileName);
+        (bool, string, string) SaveFile(string picdir, IFormFile formFile, string customFileName, string bucketName);
        /// <summary>
        /// 按时间来创建文件夹
        /// </summary>
--- a/ZR.Service/System/SysFileService.cs
+++ b/ZR.Service/System/SysFileService.cs
@ -11,6 +11,7 @@ using System.Net;
 using ZR.Model.System;
 using ZR.Repository.System;
 using Infrastructure.Extensions;
+using SqlSugar.DistributedSystem.Snowflake;

 namespace ZR.Service.System
 {
@ -36,18 +37,28 @@ namespace ZR.Service.System
        /// <returns></returns>
        public (bool, string, string) SaveFile(string picdir, IFormFile formFile)
        {
-            return SaveFile(picdir, formFile, "");
+            return SaveFile(picdir, formFile, "", "");
        }
-        public (bool, string, string) SaveFile(string picdir, IFormFile formFile, string customFileName)
+
+        /// <summary>
+        /// 存储文件
+        /// </summary>
+        /// <param name="picdir">文件夹</param>
+        /// <param name="formFile"></param>
+        /// <param name="customFileName">自定义文件名</param>
+        /// <param name="bucketName">存储桶</param>
+        /// <returns></returns>
+        public (bool, string, string) SaveFile(string picdir, IFormFile formFile, string customFileName, string bucketName)
        {
            // eg: uploads/2020/08/18
-            string dir = GetdirPath(picdir.ToString());
+            //string dir = GetdirPath(picdir.ToString());
+
            string tempName = customFileName.IsEmpty() ? HashFileName() : customFileName;
            string fileExt = Path.GetExtension(formFile.FileName);
-            string fileName = $"{tempName}{fileExt}";
-            string webUrl = $"{domainUrl}/{dir}/{fileName}";
+            string fileName = tempName + fileExt;
+            string webUrl = string.Concat(domainUrl, "/", picdir, "/", fileName);

-            HttpStatusCode statusCode = AliyunOssHelper.PutObjectFromFile(formFile.OpenReadStream(), Path.Combine(dir, fileName));
+            HttpStatusCode statusCode = AliyunOssHelper.PutObjectFromFile(formFile.OpenReadStream(), Path.Combine(picdir, fileName), bucketName);

            return (statusCode == HttpStatusCode.OK, webUrl, fileName);
        }
@ -81,13 +92,13 @@ namespace ZR.Service.System
        {
            try
            {
-                return InsertReturnBigIdentity(file);
+                return Insertable(file).ExecuteReturnSnowflakeId();//单条插入返回雪花ID;
            }
            catch (Exception ex)
            {
                Console.WriteLine("存储图片失败" + ex.Message);
-            }
-            return 1;
+                throw new Exception(ex.Message);
+            }
        }
    }
 }
--- a/ZR.Vue/src/components/FileUpload/index.vue
+++ b/ZR.Vue/src/components/FileUpload/index.vue
@ -1,9 +1,12 @@
 <template>
  <div class="upload-file">
    <el-upload :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :limit="limit" :on-error="handleUploadError"
-      :on-exceed="handleExceed" :on-success="handleUploadSuccess" :on-progress="uploadProcess" :show-file-list="false" :data="data" :headers="headers" ref="upload">
+      :on-exceed="handleExceed" :on-success="handleUploadSuccess" :on-progress="uploadProcess" :show-file-list="true" :data="data" :headers="headers"
+      :drag="drag" ref="upload">
+			<i class="el-icon-upload" v-if="drag"></i>
+			<div class="el-upload__text" v-if="drag">将文件拖到此处，或<em>点击上传</em></div>
      <!-- 上传按钮 -->
-      <el-button size="mini" type="primary" icon="el-icon-upload">选取文件</el-button>
+      <el-button size="mini" icon="el-icon-upload" v-if="!drag">选取文件</el-button>
      <!-- 上传提示 -->
      <div class="el-upload__tip" slot="tip" v-if="showTip">
        请上传
@ -28,81 +31,86 @@
 </template>

 <script>
-import { getToken } from "@/utils/auth";
+import { getToken } from '@/utils/auth'

 export default {
-  name: "FileUpload",
+  name: 'FileUpload',
  props: {
    // 值
    value: [String, Object, Array],
    // 数量限制
    limit: {
      type: Number,
-      default: 1,
+      default: 1
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
-      default: 5,
+      default: 5
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
-      default: () => ["doc", "xls", "ppt", "txt", "pdf", "svga", "json"],
+      default: () => ['doc', 'xls', 'ppt', 'txt', 'pdf', 'svga', 'json']
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
-      default: true,
+      default: true
    },
    // 上传地址
    uploadUrl: {
      type: String,
-      default: process.env.VUE_APP_UPLOAD_URL,
+      default: process.env.VUE_APP_UPLOAD_URL
    },
    // form 列名
    column: [String],
    // 上传携带的参数
    data: {
-      type: Object,
+      type: Object
    },
+    // 是否拖拽
+    drag: {
+      type: Boolean,
+      default: false
+    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadFileUrl: process.env.VUE_APP_BASE_API + this.uploadUrl, // 上传的图片服务器地址
      headers: {
-        Authorization: "Bearer " + getToken(),
+        Authorization: 'Bearer ' + getToken()
      },
-      fileList: [],
-    };
+      fileList: []
+    }
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
-          let temp = 1;
+          let temp = 1
          // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(",");
+          const list = Array.isArray(val) ? val : this.value.split(',')
          // 然后将数组转为对象数组
          this.fileList = list.map((item) => {
-            if (typeof item === "string") {
-              item = { name: item, url: item };
+            if (typeof item === 'string') {
+              item = { name: item, url: item }
            }
-            item.uid = item.uid || new Date().getTime() + temp++;
-            return item;
-          });
+            item.uid = item.uid || new Date().getTime() + temp++
+            return item
+          })
        } else {
-          this.fileList = [];
-          return [];
+          this.fileList = []
+          return []
        }
      },
      deep: true,
-      immediate: true,
+      immediate: true
    },
    uploadUrl: {
      handler(val) {
-			this.uploadFileUrl = process.env.VUE_APP_BASE_API + val;
+        this.uploadFileUrl = process.env.VUE_APP_BASE_API + val
      },
      immediate: true
    }
@ -110,59 +118,68 @@ export default {
  computed: {
    // 是否显示提示
    showTip() {
-      return this.isShowTip && (this.fileType || this.fileSize);
-    },
+      return this.isShowTip && (this.fileType || this.fileSize)
+    }
  },
  methods: {
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType && this.fileType.length > 0) {
-        let fileExtension = "";
-        if (file.name.lastIndexOf(".") > -1) {
-          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+        let fileExtension = ''
+        if (file.name.lastIndexOf('.') > -1) {
+          fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
        }
        const isTypeOk = this.fileType.some((type) => {
-          if (file.type.indexOf(type) > -1) return true;
-          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-          return false;
-        });
+          if (file.type.indexOf(type) > -1) return true
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true
+          return false
+        })
        if (!isTypeOk) {
          this.msgError(
-            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
-          );
-          return false;
+            `文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`
+          )
+          return false
        }
      }
      // 校检文件大小
      if (this.fileSize) {
-        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        const isLt = file.size / 1024 / 1024 < this.fileSize
        if (!isLt) {
-          this.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
-          return false;
+          this.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`)
+          return false
        }
      }
-      return true;
+      return true
    },
    // 文件个数超出
    handleExceed() {
-      this.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+      this.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
    },
    // 上传失败
    handleUploadError(err) {
-      this.msgError("上传失败, 请重试");
-      this.fileList = [];
+      this.msgError('上传失败, 请重试')
+      this.fileList = []
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      if (res.code != 200) {
-        this.fileList = [];
-        this.msgError(`上传失败，原因:${res.msg}!`);
-        return;
+        this.fileList = []
+        this.msgError(`上传失败，原因:${res.msg}!`)
+        return
      }
-      this.msgSuccess("上传成功");
-      this.fileList.push({ name: res.data.fileName, url: res.data.url, path: res.data.path });
-      this.$emit("input", this.column, this.listToString(this.fileList), res.data);
+      this.msgSuccess('上传成功')
+      this.fileList.push({
+        name: res.data.fileName,
+        url: res.data.url,
+        path: res.data.path
+      })
+      this.$emit(
+        'input',
+        this.column,
+        this.listToString(this.fileList),
+        res.data
+      )
    },
    // 上传进度
    uploadProcess(event, file, fileList) {
@ -170,28 +187,28 @@ export default {
    },
    // 删除文件
    handleDelete(index) {
-      this.fileList.splice(index, 1);
-      this.$emit("input", this.column, this.listToString(this.fileList));
+      this.fileList.splice(index, 1)
+      this.$emit('input', this.column, this.listToString(this.fileList))
    },
    // 获取文件名称
    getFileName(name) {
-      if (name.lastIndexOf("/") > -1) {
-        return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
+      if (name.lastIndexOf('/') > -1) {
+        return name.slice(name.lastIndexOf('/') + 1).toLowerCase()
      } else {
-        return name;
+        return name
      }
    },
    // 对象转成指定字符串分隔
    listToString(list, separator) {
-      let strs = "";
-      separator = separator || ",";
-      for (let i in list) {
-        strs += list[i].url + separator;
+      let strs = ''
+      separator = separator || ','
+      for (const i in list) {
+        strs += list[i].url + separator
+      }
+      return strs != '' ? strs.substr(0, strs.length - 1) : ''
+    }
+  }
 }
-      return strs != "" ? strs.substr(0, strs.length - 1) : "";
-    },
-  },
-};
 </script>

 <style scoped lang="scss">
@ -210,4 +227,8 @@ export default {
 .ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
 }
+::v-deep .el-upload-dragger {
+	width: 270px;
+	height: 150px;
+}
 </style>
--- a/ZR.Vue/src/utils/signalR.js
+++ b/ZR.Vue/src/utils/signalR.js
@ -13,31 +13,38 @@ export default {
  init(url) {
    const connection = new signalR.HubConnectionBuilder()
      .withUrl(url, { accessTokenFactory: () => getToken() })
+      .withAutomaticReconnect()//自动重新连接
+      .configureLogging(signalR.LogLevel.Information)
      .build();
    this.SR = connection;
    // 断线重连
    connection.onclose(async () => {
      console.log('断开连接了')
+			console.assert(connection.state === signalR.HubConnectionState.Disconnected);
+			// 建议用户重新刷新浏览器
      await this.start();
    })

    connection.onreconnected(() => {
-      console.log('断线重连')
+      console.log('断线重新连接成功')
    })
    this.receiveMsg(connection);
    // 启动
    // this.start();
  },
+  /**
+   * 调用 this.signalR.start().then(async () => { await this.SR.invoke("method")})
+   * @returns 
+   */
  async start() {
    var that = this;

    try {
      //使用async和await 或 promise的then 和catch 处理来自服务端的异常
-
      await this.SR.start();
-
      //console.assert(this.SR.state === signalR.HubConnectionState.Connected);
      console.log('signalR 连接成功了', this.SR.state);
+      return true;
    } catch (error) {
      that.failNum--;
      console.log(`失败重试剩余次数${that.failNum}`, error)
@ -46,6 +53,7 @@ export default {
          await this.SR.start()
        }, 5000);
      }
+      return false;
    }
  },
 	// 接收消息处理
--- a/ZR.Vue/src/views/tool/build/index.vue
+++ b/ZR.Vue/src/views/tool/build/index.vue
@ -11,19 +11,9 @@
          <div class="components-title">
            <svg-icon icon-class="component" />输入型组件
          </div>
-          <draggable
-            class="components-draggable"
-            :list="inputComponents"
-            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
-            :clone="cloneComponent"
-            draggable=".components-item"
-            :sort="false"
-            @end="onEnd"
-          >
-            <div
-              v-for="(element, index) in inputComponents" :key="index" class="components-item"
-              @click="addComponent(element)"
-            >
+          <draggable class="components-draggable" :list="inputComponents" :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+            :clone="cloneComponent" draggable=".components-item" :sort="false" @end="onEnd">
+            <div v-for="(element, index) in inputComponents" :key="index" class="components-item" @click="addComponent(element)">
              <div class="components-body">
                <svg-icon :icon-class="element.tagIcon" />
                {{ element.label }}
@ -33,21 +23,9 @@
          <div class="components-title">
            <svg-icon icon-class="component" />选择型组件
          </div>
-          <draggable
-            class="components-draggable"
-            :list="selectComponents"
-            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
-            :clone="cloneComponent"
-            draggable=".components-item"
-            :sort="false"
-            @end="onEnd"
-          >
-            <div
-              v-for="(element, index) in selectComponents"
-              :key="index"
-              class="components-item"
-              @click="addComponent(element)"
-            >
+          <draggable class="components-draggable" :list="selectComponents" :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+            :clone="cloneComponent" draggable=".components-item" :sort="false" @end="onEnd">
+            <div v-for="(element, index) in selectComponents" :key="index" class="components-item" @click="addComponent(element)">
              <div class="components-body">
                <svg-icon :icon-class="element.tagIcon" />
                {{ element.label }}
@ -57,15 +35,9 @@
          <div class="components-title">
            <svg-icon icon-class="component" /> 布局型组件
          </div>
-          <draggable
-            class="components-draggable" :list="layoutComponents"
-            :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
-            draggable=".components-item" :sort="false" @end="onEnd"
-          >
-            <div
-              v-for="(element, index) in layoutComponents" :key="index" class="components-item"
-              @click="addComponent(element)"
-            >
+          <draggable class="components-draggable" :list="layoutComponents" :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+            :clone="cloneComponent" draggable=".components-item" :sort="false" @end="onEnd">
+            <div v-for="(element, index) in layoutComponents" :key="index" class="components-item" @click="addComponent(element)">
              <div class="components-body">
                <svg-icon :icon-class="element.tagIcon" />
                {{ element.label }}
@ -90,25 +62,12 @@
      </div>
      <el-scrollbar class="center-scrollbar">
        <el-row class="center-board-row" :gutter="formConf.gutter">
-          <el-form
-            :size="formConf.size"
-            :label-position="formConf.labelPosition"
-            :disabled="formConf.disabled"
-            :label-width="formConf.labelWidth + 'px'"
-          >
+          <el-form :size="formConf.size" :label-position="formConf.labelPosition" :disabled="formConf.disabled"
+            :label-width="formConf.labelWidth + 'px'">
            <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
-              <draggable-item
-                v-for="(element, index) in drawingList"
-                :key="element.renderKey"
-                :drawing-list="drawingList"
-                :element="element"
-                :index="index"
-                :active-id="activeId"
-                :form-conf="formConf"
-                @activeItem="activeFormItem"
-                @copyItem="drawingItemCopy"
-                @deleteItem="drawingItemDelete"
-              />
+              <draggable-item v-for="(element, index) in drawingList" :key="element.renderKey" :drawing-list="drawingList" :element="element"
+                :index="index" :active-id="activeId" :form-conf="formConf" @activeItem="activeFormItem" @copyItem="drawingItemCopy"
+                @deleteItem="drawingItemDelete" />
            </draggable>
            <div v-show="!drawingList.length" class="empty-info">
              从左侧拖入或点选组件进行表单设计
@ -118,19 +77,9 @@
      </el-scrollbar>
    </div>

-    <right-panel
-      :active-data="activeData"
-      :form-conf="formConf"
-      :show-field="!!drawingList.length"
-      @tag-change="tagChange"
-    />
+    <right-panel :active-data="activeData" :form-conf="formConf" :show-field="!!drawingList.length" @tag-change="tagChange" />

-    <code-type-dialog
-      :visible.sync="dialogVisible"
-      title="选择生成类型"
-      :show-file-name="showFileName"
-      @confirm="generate"
-    />
+    <code-type-dialog :visible.sync="dialogVisible" title="选择生成类型" :show-file-name="showFileName" @confirm="generate" />
    <input id="copyNode" type="hidden">
  </div>
 </template>
@ -149,10 +98,16 @@ import {
  formConf
 } from '@/utils/generator/config'
 import {
-  exportDefault, beautifierConf, isNumberStr, titleCase
+  exportDefault,
+  beautifierConf,
+  isNumberStr,
+  titleCase
 } from '@/utils/index'
 import {
-  makeUpHtml, vueTemplate, vueScript, cssStyle
+  makeUpHtml,
+  vueTemplate,
+  vueScript,
+  cssStyle
 } from '@/utils/generator/html'
 import { makeUpJs } from '@/utils/generator/js'
 import { makeUpCss } from '@/utils/generator/css'
@ -193,19 +148,19 @@ export default {
      activeData: drawingDefalut[0]
    }
  },
-  computed: {
-  },
+  computed: {},
  watch: {
    // eslint-disable-next-line func-names
    'activeData.label': function(val, oldVal) {
      if (
-        this.activeData.placeholder === undefined
-        || !this.activeData.tag
-        || oldActiveId !== this.activeId
+        this.activeData.placeholder === undefined ||
+        !this.activeData.tag ||
+        oldActiveId !== this.activeId
      ) {
        return
      }
-      this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
+      this.activeData.placeholder =
+        this.activeData.placeholder.replace(oldVal, '') + val
    },
    activeId: {
      handler(val) {
@ -216,7 +171,7 @@ export default {
  },
  mounted() {
    const clipboard = new ClipboardJS('#copyNode', {
-      text: trigger => {
+      text: (trigger) => {
        const codeStr = this.generateCode()
        this.$notify({
          title: '成功',
@ -226,7 +181,7 @@ export default {
        return codeStr
      }
    })
-    clipboard.on('error', e => {
+    clipboard.on('error', (e) => {
      this.$message.error('代码复制失败')
    })
  },
@ -309,7 +264,9 @@ export default {
        item.componentName = `row${this.idGlobal}`
      }
      if (Array.isArray(item.children)) {
-        item.children = item.children.map(childItem => this.createIdAndKey(childItem))
+        item.children = item.children.map((childItem) =>
+          this.createIdAndKey(childItem)
+        )
      }
      return item
    },
@ -353,9 +310,11 @@ export default {
      delete this.activeData.tag
      delete this.activeData.tagIcon
      delete this.activeData.document
-      Object.keys(newTag).forEach(key => {
-        if (this.activeData[key] !== undefined
-          && typeof this.activeData[key] === typeof newTag[key]) {
+      Object.keys(newTag).forEach((key) => {
+        if (
+          this.activeData[key] !== undefined &&
+          typeof this.activeData[key] === typeof newTag[key]
+        ) {
          newTag[key] = this.activeData[key]
        }
      })
@ -363,12 +322,12 @@ export default {
      this.updateDrawingList(newTag, this.drawingList)
    },
    updateDrawingList(newTag, list) {
-      const index = list.findIndex(item => item.formId === this.activeId)
+      const index = list.findIndex((item) => item.formId === this.activeId)
      if (index > -1) {
        list.splice(index, 1, newTag)
      } else {
-        list.forEach(item => {
-          if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children)
+        list.forEach((item) => {
+          if (Array.isArray(item.children)) { this.updateDrawingList(newTag, item.children) }
        })
      }
    }
@ -377,18 +336,22 @@ export default {
 </script>

 <style lang='scss'>
-body, html{
+body,
+html {
  margin: 0;
  padding: 0;
  background: #fff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
-  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji;
 }

-input, textarea{
-  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+input,
+textarea {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji;
 }

 .editor-tabs {
@ -466,7 +429,7 @@ input, textarea{
    cursor: pointer;
    font-size: 12px;
    &:hover {
-      background: rgba(210, 23, 23, 0.5)
+      background: rgba(210, 23, 23, 0.5);
    }
  }
  & + .reg-item {
@ -495,7 +458,7 @@ input, textarea{
    margin-left: 6px;
  }
  .el-icon-plus {
-    color: #409EFF;
+    color: #409eff;
  }
  .el-icon-delete {
    color: #157a0c;
@ -515,7 +478,7 @@ input, textarea{
 }

 $selectedColor: #f6f7ff;
-$lighterBlue: #409EFF;
+$lighterBlue: #409eff;

 .container {
  position: relative;
@ -606,12 +569,12 @@ $lighterBlue: #409EFF;
  height: 42px;
  text-align: right;
  padding: 0 15px;
-  box-sizing: border-box;;
+  box-sizing: border-box;
  border: 1px solid #f1e8e8;
  border-top: none;
  border-left: none;
  .delete-btn {
-    color: #F56C6C;
+    color: #f56c6c;
  }
 }
 .logo-wrapper {
@ -686,7 +649,8 @@ $lighterBlue: #409EFF;
      background: $selectedColor;
      border-radius: 6px;
    }
-    & > .drawing-item-copy, & > .drawing-item-delete{
+    & > .drawing-item-copy,
+    & > .drawing-item-delete {
      display: initial;
    }
    & > .component-name {
@ -740,17 +704,20 @@ $lighterBlue: #409EFF;
    padding: 0 6px;
  }
 }
-.drawing-item, .drawing-row-item{
+.drawing-item,
+.drawing-row-item {
  &:hover {
    & > .el-form-item {
      background: $selectedColor;
      border-radius: 6px;
    }
-    & > .drawing-item-copy, & > .drawing-item-delete{
+    & > .drawing-item-copy,
+    & > .drawing-item-delete {
      display: initial;
    }
  }
-  & > .drawing-item-copy, & > .drawing-item-delete{
+  & > .drawing-item-copy,
+  & > .drawing-item-delete {
    display: none;
    position: absolute;
    top: -10px;
@ -776,14 +743,13 @@ $lighterBlue: #409EFF;
  }
  & > .drawing-item-delete {
    right: 24px;
-    border-color: #F56C6C;
-    color: #F56C6C;
+    border-color: #f56c6c;
+    color: #f56c6c;
    background: #fff;
    &:hover {
-      background: #F56C6C;
+      background: #f56c6c;
      color: #fff;
    }
  }
 }
-
 </style>
--- a/ZR.Vue/src/views/tool/file/index.vue
+++ b/ZR.Vue/src/views/tool/file/index.vue
@ -6,7 +6,7 @@
        <el-input v-model="queryParams.fileId" placeholder="请输入文件id" clearable size="small" />
      </el-form-item>
      <el-form-item label="上传时间">
-        <el-date-picker v-model="dateRangeCreate_time" size="small" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
+        <el-date-picker v-model="dateRangeAddTime" size="small" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
          start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择上传时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="存储类型" prop="storeType">
@ -34,15 +34,13 @@
    <!-- 数据区域 -->
    <el-table :data="dataList" v-loading="loading" ref="table" border highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center" />
-      <el-table-column prop="id" label="文件id" align="center" width="80" />
+      <el-table-column prop="id" label="文件id" align="center" width="180" />
      <el-table-column prop="fileName" label="文件名" align="center">
        <template slot-scope="scope">
-          <el-popover :content="scope.row.fileUrl" placement="top-start" title="路径" trigger="hover">
            <a slot="reference" :href="scope.row.accessUrl" class="el-link--primary"
              style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color: #1890ff;font-size: 13px;" target="_blank">
              {{ scope.row.fileName }}
            </a>
-          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="accessUrl" align="center" label="预览图" width="100">
@ -62,6 +60,10 @@
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
+          <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" v-clipboard:copy="scope.row.accessUrl"
+            v-clipboard:success="clipboardSuccess">
+            复制
+          </el-button>
          <el-button v-hasPermi="['tool:file:delete']" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
@ -69,11 +71,11 @@
    <pagination class="mt10" background :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改文件存储对话框 -->
-    <el-dialog :title="title" :lock-scroll="false" :visible.sync="open" width="400px">
-      <el-form ref="form" :model="form" :rules="rules" label-width="135px" label-position="left">
+    <el-dialog :title="title" :lock-scroll="false" :visible.sync="open" width="320px">
+      <el-form ref="form" :model="form" :rules="rules" label-position="left">
        <el-row>
          <el-col :lg="24">
-            <el-form-item label="存储类型" prop="storeType">
+            <el-form-item prop="storeType">
              <el-select v-model="form.storeType" placeholder="请选择存储类型" @change="handleSelectStore">
                <el-option v-for="item in storeTypeOptions" :key="item.dictValue" :label="item.dictLabel" :value="parseInt(item.dictValue)">
                </el-option>
@ -81,32 +83,25 @@
            </el-form-item>
          </el-col>
          <el-col :lg="24">
-            <el-form-item label="存储文件夹前缀" prop="storePath">
-              <span slot="label">
-                存储文件夹前缀
-                <el-tooltip content="比如存储到'/uploads' '如果不填写默认按时间存储eg：/2021/12/16(固定段)'" placement="top">
-                  <i class="el-icon-question"></i>
-                </el-tooltip>
-              </span>
-              <el-input v-model="form.storePath" placeholder="请输入" clearable=""/>
+            <el-form-item prop="">
+              <el-input v-model="form.storePath" placeholder="请输入存储文件夹" clearable="" auto-complete="" />
            </el-form-item>
          </el-col>
          <el-col :lg="24">
-            <el-form-item label="自定文件名" prop="fileName">
+            <el-form-item  prop="fileName">
              <el-input v-model="form.fileName" placeholder="请输入文件名" clearable="" />
            </el-form-item>
          </el-col>
          <el-col :lg="24">
-            <el-form-item label="上传文件" prop="accessUrl">
-              <UploadFile v-model="form.accessUrl" :uploadUrl="uploadUrl" :fileType="[]" :limit="1" :fileSize="15"
+            <el-form-item prop="accessUrl">
+              <UploadFile v-model="form.accessUrl" :uploadUrl="uploadUrl" :fileType="[]" :limit="1" :fileSize="15" :drag="true"
                :data="{ 'fileDir' :  form.storePath, 'fileName': form.fileName}" column="accessUrl" @input="handleUploadSuccess" />
            </el-form-item>
          </el-col>
-
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancel">取 消</el-button>
+        <el-button type="text" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

@ -139,7 +134,12 @@
            <el-form-item label="存储路径">{{formView.fileUrl}}</el-form-item>
          </el-col>
          <el-col :lg="24">
-            <el-form-item label="访问路径">{{formView.accessUrl}}</el-form-item>
+            <el-form-item label="访问路径">{{formView.accessUrl}}
+              <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" v-clipboard:copy="formView.accessUrl"
+                v-clipboard:success="clipboardSuccess">
+                复制
+              </el-button>
+            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
@ -147,14 +147,14 @@
  </div>
 </template>
 <script>
-import { listSysfile, delSysfile, getSysfile } from "@/api/tool/file.js";
+import { listSysfile, delSysfile, getSysfile } from '@/api/tool/file.js'

 export default {
-  name: "sysfile",
+  name: 'sysfile',
  data() {
    return {
-      labelWidth: "100px",
-      formLabelWidth: "100px",
+      labelWidth: '100px',
+      formLabelWidth: '100px',
      // 选中id数组
      ids: [],
      // 非单个禁用
@ -170,37 +170,26 @@ export default {
        pageNum: 1,
        pageSize: 20,
        storeType: 1,
-        fileId: undefined,
+        fileId: undefined
      },
      // 弹出层标题
-      title: "",
+      title: '',
      // 是否显示弹出层
      open: false,
      openView: false,
      // 表单参数
      form: {},
      formView: {},
-      columns: [
-        { index: 0, key: "id", label: `自增id`, checked: true },
-        { index: 1, key: "fileName", label: `文件名`, checked: true },
-        { index: 2, key: "fileUrl", label: `文件存储地址`, checked: true },
-        { index: 3, key: "storePath", label: `仓库位置`, checked: true },
-        { index: 4, key: "fileSize", label: `文件大小`, checked: true },
-        { index: 5, key: "fileExt", label: `文件扩展名`, checked: true },
-        { index: 6, key: "create_by", label: `创建人`, checked: true },
-        { index: 7, key: "create_time", label: `上传时间`, checked: true },
-        { index: 8, key: "storeType", label: `存储类型`, checked: true },
-        { index: 9, key: "accessUrl", label: `访问路径`, checked: false },
-      ],
+      columns: [],
      // 上传时间时间范围
-      dateRangeCreate_time: [],
+      dateRangeAddTime: [],
      // 存储类型选项列表
      storeTypeOptions: [
-        { dictLabel: "本地存储", dictValue: 1 },
-        { dictLabel: "阿里云存储", dictValue: 2 },
+        { dictLabel: '本地存储', dictValue: 1 },
+        { dictLabel: '阿里云存储', dictValue: 2 }
      ],
      // 上传文件地址
-      uploadUrl: "/common/uploadFile",
+      uploadUrl: '/common/uploadFile',
      fileType: [],
      // 数据列表
      dataList: [],
@ -213,127 +202,131 @@ export default {
        accessUrl: [
          {
            required: true,
-            message: "上传文件不能为空",
-            trigger: "blur",
-          },
+            message: '上传文件不能为空',
+            trigger: 'blur'
+          }
        ],
        storeType: [
          {
            required: true,
-            message: "存储类型不能为空",
-            trigger: "blur",
-          },
-        ],
-      },
-    };
+            message: '存储类型不能为空',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
  },
  created() {
    // 列表数据查询
-    this.getList();
+    this.getList()
  },
  methods: {
    // 查询数据
    getList() {
-      this.addDateRange(this.queryParams, this.dateRangeCreate_time, 'Create_time');
-      this.loading = true;
+      this.addDateRange(this.queryParams, this.dateRangeAddTime, 'Create_time')
+      this.loading = true
      listSysfile(this.queryParams).then((res) => {
        if (res.code == 200) {
-          this.dataList = res.data.result;
-          this.total = res.data.totalNum;
-          this.loading = false;
+          this.dataList = res.data.result
+          this.total = res.data.totalNum
+          this.loading = false
        }
-      });
+      })
    },
    // 取消按钮
    cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
    },
    // 重置数据表单
    reset() {
      this.form = {
-        fileName: "",
-        fileUrl: "",
-        storePath: "uploads",
+        fileName: '',
+        fileUrl: '',
+        storePath: 'uploads',
        fileSize: 0,
-        fileExt: "",
+        fileExt: '',
        storeType: 1,
-        accessUrl: "",
-      };
-      this.resetForm("form");
+        accessUrl: ''
+      }
+      this.resetForm('form')
    },
    /** 重置查询操作 */
    resetQuery() {
-      this.timeRange = [];
+      this.timeRange = []
      // 上传时间时间范围
-      this.dateRangeCreate_time = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.dateRangeAddTime = []
+      this.resetForm('queryForm')
+      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.id);
-      this.single = selection.length != 1;
-      this.multiple = !selection.length;
+      this.ids = selection.map((item) => item.id)
+      this.single = selection.length != 1
+      this.multiple = !selection.length
    },
    /** 搜索按钮操作 */
    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
    },
    /** 新增按钮操作 */
    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "上传文件";
-      this.form.storeType = this.queryParams.storeType;
+      this.reset()
+      this.open = true
+      this.title = '上传文件'
+      this.form.storeType = this.queryParams.storeType
    },
    /** 删除按钮操作 */
    handleDelete(row) {
-      const Ids = row.id || this.ids;
+      const Ids = row.id || this.ids

      this.$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？')
        .then(function() {
-          return delSysfile(Ids);
+          return delSysfile(Ids)
        })
        .then(() => {
-          this.handleQuery();
-          this.msgSuccess("删除成功");
+          this.handleQuery()
+          this.msgSuccess('删除成功')
        })
-        .catch(() => {});
+        .catch(() => {})
    },
    /** 查看按钮操作 */
    handleView(row) {
-      const id = row.id || this.ids;
+      const id = row.id || this.ids
      getSysfile(id).then((res) => {
-        const { code, data } = res;
+        const { code, data } = res
        if (code == 200) {
-          this.openView = true;
-          this.formView = data;
+          this.openView = true
+          this.formView = data
        }
-      });
+      })
    },
    // 上传成功方法
    handleUploadSuccess(columnName, filelist, data) {
-      this.form[columnName] = filelist;
-      this.queryParams.fileId = data.fileId;
-      this.open = false;
-      this.getList();
+      this.form[columnName] = filelist
+      this.queryParams.fileId = data.fileId
+      this.open = false
+      this.getList()
    },
    // 存储类型字典翻译
    storeTypeFormat(row, column) {
-      return this.selectDictLabel(this.storeTypeOptions, row.storeType);
+      return this.selectDictLabel(this.storeTypeOptions, row.storeType)
    },
    handleSelectStore(val) {
-      this.queryParams.storeType = val;
+      this.queryParams.storeType = val
      if (val == 1) {
-        this.uploadUrl = "/common/uploadFile";
+        this.uploadUrl = '/common/uploadFile'
      } else if (val == 2) {
-        this.uploadUrl = "/common/UploadFileAliyun";
+        this.uploadUrl = '/common/UploadFileAliyun'
      }
    },
-  },
-};
+    /** 复制代码成功 */
+    clipboardSuccess() {
+      this.msgSuccess('复制成功')
+    }
+  }
+}
 </script>
 <style scoped>
 .el-avatar {
--- a/document/admin-mysql.sql
+++ b/document/admin-mysql.sql
@ -776,7 +776,7 @@ CREATE TABLE `gen_demo`  (
 -- ----------------------------
 DROP TABLE IF EXISTS `sys_file`;
 CREATE TABLE `sys_file`  (
-  `id` BIGINT(11) NOT NULL AUTO_INCREMENT,
+  `id` BIGINT(11) NOT NULL,
  `realName` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '文件真实名',
  `fileName` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '文件名',
  `fileUrl` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '文件存储地址',
@ -789,5 +789,5 @@ CREATE TABLE `sys_file`  (
  `create_time` datetime(0) NULL DEFAULT NULL COMMENT '上传时间',
  `storeType` int(4) NULL DEFAULT NULL COMMENT '存储类型',
  PRIMARY KEY (`id`) USING BTREE
-) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
+) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

--- a/document/admin-sqlserver.sql
+++ b/document/admin-sqlserver.sql