Merge branch 'master' into net6.0
This commit is contained in:
不做码农
commit
a5575cb5a9
@ -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
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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
|
||||
{
|
||||
|
||||
@ -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; }
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
/// 文件真实名
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
throw new Exception(ex.Message);
|
||||
}
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,141 +31,155 @@
|
||||
</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;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
uploadUrl: {
|
||||
handler(val) {
|
||||
this.uploadFileUrl = process.env.VUE_APP_BASE_API + val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
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>
|
||||
@ -16,7 +16,7 @@ const actions = {
|
||||
changeOnlineNum({ commit }, data) {
|
||||
commit('SET_ONLINEUSER_NUM', data)
|
||||
},
|
||||
// 更新系统通知
|
||||
// 更新系统通知
|
||||
getNoticeList({ commit }, data) {
|
||||
commit('SET_NOTICE_list', data)
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
},
|
||||
// 接收消息处理
|
||||
|
||||
@ -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'
|
||||
@ -161,7 +116,7 @@ import logo from '@/assets/logo/logo.png'
|
||||
import CodeTypeDialog from './CodeTypeDialog'
|
||||
import DraggableItem from './DraggableItem'
|
||||
|
||||
const emptyActiveData = { style: {}, autosize: {} }
|
||||
const emptyActiveData = { style: {}, autosize: {}}
|
||||
let oldActiveId
|
||||
let tempActiveData
|
||||
|
||||
@ -193,19 +148,19 @@ export default {
|
||||
activeData: drawingDefalut[0]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
// eslint-disable-next-line func-names
|
||||
'activeData.label': function (val, oldVal) {
|
||||
'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,30 +336,34 @@ 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{
|
||||
.editor-tabs {
|
||||
background: #121315;
|
||||
.el-tabs__header{
|
||||
.el-tabs__header {
|
||||
margin: 0;
|
||||
border-bottom-color: #121315;
|
||||
.el-tabs__nav{
|
||||
.el-tabs__nav {
|
||||
border-color: #121315;
|
||||
}
|
||||
}
|
||||
.el-tabs__item{
|
||||
.el-tabs__item {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #888a8e;
|
||||
@ -409,15 +372,15 @@ input, textarea{
|
||||
margin-right: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
.el-tabs__item.is-active{
|
||||
.el-tabs__item.is-active {
|
||||
background: #1e1e1e;
|
||||
border-bottom-color: #1e1e1e!important;
|
||||
border-bottom-color: #1e1e1e !important;
|
||||
color: #fff;
|
||||
}
|
||||
.el-icon-edit{
|
||||
.el-icon-edit {
|
||||
color: #f1fa8c;
|
||||
}
|
||||
.el-icon-document{
|
||||
.el-icon-document {
|
||||
color: #a95812;
|
||||
}
|
||||
}
|
||||
@ -433,24 +396,24 @@ input, textarea{
|
||||
overflow-x: hidden !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.center-tabs{
|
||||
.el-tabs__header{
|
||||
margin-bottom: 0!important;
|
||||
.center-tabs {
|
||||
.el-tabs__header {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.el-tabs__item{
|
||||
.el-tabs__item {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
.el-tabs__nav{
|
||||
.el-tabs__nav {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.reg-item{
|
||||
.reg-item {
|
||||
padding: 12px 6px;
|
||||
background: #f8f8f8;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
.close-btn{
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
right: -6px;
|
||||
top: -6px;
|
||||
@ -465,16 +428,16 @@ input, textarea{
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
&:hover{
|
||||
background: rgba(210, 23, 23, 0.5)
|
||||
&:hover {
|
||||
background: rgba(210, 23, 23, 0.5);
|
||||
}
|
||||
}
|
||||
& + .reg-item{
|
||||
& + .reg-item {
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
.action-bar{
|
||||
& .el-button+.el-button {
|
||||
.action-bar {
|
||||
& .el-button + .el-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
& i {
|
||||
@ -485,37 +448,37 @@ input, textarea{
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node{
|
||||
.custom-tree-node {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
.node-operation{
|
||||
.node-operation {
|
||||
float: right;
|
||||
}
|
||||
i[class*="el-icon"] + i[class*="el-icon"]{
|
||||
i[class*="el-icon"] + i[class*="el-icon"] {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.el-icon-plus{
|
||||
color: #409EFF;
|
||||
.el-icon-plus {
|
||||
color: #409eff;
|
||||
}
|
||||
.el-icon-delete{
|
||||
.el-icon-delete {
|
||||
color: #157a0c;
|
||||
}
|
||||
}
|
||||
|
||||
.left-scrollbar .el-scrollbar__view{
|
||||
.left-scrollbar .el-scrollbar__view {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-rate{
|
||||
.el-rate {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
.el-upload__tip{
|
||||
.el-upload__tip {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
$selectedColor: #f6f7ff;
|
||||
$lighterBlue: #409EFF;
|
||||
$lighterBlue: #409eff;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
@ -534,14 +497,14 @@ $lighterBlue: #409EFF;
|
||||
transition: transform 0ms !important;
|
||||
}
|
||||
}
|
||||
.components-draggable{
|
||||
.components-draggable {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.components-title{
|
||||
.components-title {
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
margin: 6px 2px;
|
||||
.svg-icon{
|
||||
.svg-icon {
|
||||
color: #666;
|
||||
font-size: 18px;
|
||||
}
|
||||
@ -554,7 +517,7 @@ $lighterBlue: #409EFF;
|
||||
cursor: move;
|
||||
border: 1px dashed $selectedColor;
|
||||
border-radius: 3px;
|
||||
.svg-icon{
|
||||
.svg-icon {
|
||||
color: #777;
|
||||
font-size: 15px;
|
||||
}
|
||||
@ -574,7 +537,7 @@ $lighterBlue: #409EFF;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
.left-scrollbar{
|
||||
.left-scrollbar {
|
||||
height: calc(100vh - 42px);
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -591,7 +554,7 @@ $lighterBlue: #409EFF;
|
||||
margin: 0 350px 0 260px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.empty-info{
|
||||
.empty-info {
|
||||
position: absolute;
|
||||
top: 46%;
|
||||
left: 0;
|
||||
@ -601,27 +564,27 @@ $lighterBlue: #409EFF;
|
||||
color: #ccb1ea;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
.action-bar{
|
||||
.action-bar {
|
||||
position: relative;
|
||||
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;
|
||||
.delete-btn {
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
.logo-wrapper{
|
||||
.logo-wrapper {
|
||||
position: relative;
|
||||
height: 42px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f1e8e8;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.logo{
|
||||
.logo {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 6px;
|
||||
@ -630,16 +593,16 @@ $lighterBlue: #409EFF;
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
white-space: nowrap;
|
||||
> img{
|
||||
> img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.github{
|
||||
.github {
|
||||
display: inline-block;
|
||||
vertical-align: sub;
|
||||
margin-left: 15px;
|
||||
> img{
|
||||
> img {
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
@ -682,32 +645,33 @@ $lighterBlue: #409EFF;
|
||||
background-color: $selectedColor;
|
||||
}
|
||||
.active-from-item {
|
||||
& > .el-form-item{
|
||||
& > .el-form-item {
|
||||
background: $selectedColor;
|
||||
border-radius: 6px;
|
||||
}
|
||||
& > .drawing-item-copy, & > .drawing-item-delete{
|
||||
& > .drawing-item-copy,
|
||||
& > .drawing-item-delete {
|
||||
display: initial;
|
||||
}
|
||||
& > .component-name{
|
||||
& > .component-name {
|
||||
color: $lighterBlue;
|
||||
}
|
||||
}
|
||||
.el-form-item{
|
||||
.el-form-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.drawing-item{
|
||||
.drawing-item {
|
||||
position: relative;
|
||||
cursor: move;
|
||||
&.unfocus-bordered:not(.activeFromItem) > div:first-child {
|
||||
&.unfocus-bordered:not(.activeFromItem) > div:first-child {
|
||||
border: 1px dashed #ccc;
|
||||
}
|
||||
.el-form-item{
|
||||
.el-form-item {
|
||||
padding: 12px 10px;
|
||||
}
|
||||
}
|
||||
.drawing-row-item{
|
||||
.drawing-row-item {
|
||||
position: relative;
|
||||
cursor: move;
|
||||
box-sizing: border-box;
|
||||
@ -718,19 +682,19 @@ $lighterBlue: #409EFF;
|
||||
.drawing-row-item {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.el-col{
|
||||
.el-col {
|
||||
margin-top: 22px;
|
||||
}
|
||||
.el-form-item{
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.drag-wrapper{
|
||||
.drag-wrapper {
|
||||
min-height: 80px;
|
||||
}
|
||||
&.active-from-item{
|
||||
&.active-from-item {
|
||||
border: 1px dashed $lighterBlue;
|
||||
}
|
||||
.component-name{
|
||||
.component-name {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -740,17 +704,20 @@ $lighterBlue: #409EFF;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
.drawing-item, .drawing-row-item{
|
||||
.drawing-item,
|
||||
.drawing-row-item {
|
||||
&:hover {
|
||||
& > .el-form-item{
|
||||
& > .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;
|
||||
@ -764,26 +731,25 @@ $lighterBlue: #409EFF;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
& > .drawing-item-copy{
|
||||
& > .drawing-item-copy {
|
||||
right: 56px;
|
||||
border-color: $lighterBlue;
|
||||
color: $lighterBlue;
|
||||
background: #fff;
|
||||
&:hover{
|
||||
&:hover {
|
||||
background: $lighterBlue;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
& > .drawing-item-delete{
|
||||
& > .drawing-item-delete {
|
||||
right: 24px;
|
||||
border-color: #F56C6C;
|
||||
color: #F56C6C;
|
||||
border-color: #f56c6c;
|
||||
color: #f56c6c;
|
||||
background: #fff;
|
||||
&:hover{
|
||||
background: #F56C6C;
|
||||
&:hover {
|
||||
background: #f56c6c;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -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-input v-model="form.fileName" placeholder="请输入文件名" clearable=""/>
|
||||
<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 },
|
||||
],
|
||||
//上传时间时间范围
|
||||
dateRangeCreate_time: [],
|
||||
columns: [],
|
||||
// 上传时间时间范围
|
||||
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.dateRangeCreate_time = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
this.timeRange = []
|
||||
// 上传时间时间范围
|
||||
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);
|
||||
.then(function() {
|
||||
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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user