ToolTech/tool-tech-front
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into v1.0

Browse Source
This commit is contained in:
pan 2024-08-28 17:41:06 +08:00
commit 3a21059ab4
6 changed files with 2017 additions and 1385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2738
public/css/tool.css
View File

File diff suppressed because it is too large Load Diff

376
src/components/FileUpload/optimizeUpload.vue Normal file
View File

@ -0,0 +1,376 @@
<template>
<div>
<el-upload class="upload-demo" ref="upload" action="#"
:before-upload="beforeUpload"
:on-change="onChange"
:on-remove="handleRemove"
:multiple="isMultiple"
:on-exceed="handleExceed"
:accept="acceptType"
:limit="limit"
:file-list="fileList"
:auto-upload="true"
:http-request="uploadFile"
show-file-list>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传{{acceptType}}文件</div>
</el-upload>
<div v-show="progressFlag" class="head-img">
<el-progress :text-inside="true" :stroke-width="14" :percentage="progressPercent" status="success"></el-progress>
</div>
</div>
</template>
<script>
import axios from 'axios'
import {
getToken
} from "@/utils/auth";
export default {
props: {
uploadUrl: {
type: String,
required: true
},
headers: {
type: Object,
default: () => ({})
},
extraData: {
type: Object,
default: () => ({})
},
onSuccess: {
type: Function,
default: () => {}
},
onError: {
type: Function,
default: () => {}
},
// 是否多选
isMultiple: {
type: Boolean,
default() {
return false
}
},
// 文件类型
type: {
type: Array,
default() {
return []
}
},
//上传类型
acceptType: {
type: String,
required: true
},
// 上传数量
limit: {
type: Number,
default() {
return 1
}
},
},
data() {
return {
fileList: [],
progress: 0,
isUploading: false,
progressFlag: false, //进度条初始值隐藏
progressPercent: 0, //进度条初始值
partSize: 5 * 1024 * 1024,
};
},
methods: {
// 上传前
beforeUpload(file) {
/* const fileType = file.type.toLowerCase()
console.info("fileType=======", fileType)
const typeFlag = this.type.some(item => {
return fileType.indexOf(item) != -1
})
if (!typeFlag) {
this.$message.error('上传类型有误，请重新上传')
return false
}*/
},
/* //上传函数
submitUpload(file) {
//重新命名 方便setTimeout函数 --因为setTimeout函数在vue内部中无效
var that = this;
// that.$refs.upload.submit();
//判断上传文件数量
if (this.fileList.length == 0) {
that.$message({
message: '请选择导入的文件',
type: 'warning',
duration: '2000'
});
return;
}
//创建FormData();主要用于发送表单数据
let paramFormData = new FormData();
//遍历 fileList
that.fileList.forEach(file => {
paramFormData.append("file", file.raw);
});
//修改progressFlag值
that.progressFlag = true;
//axios 发出请求
axios({
url: that.uploadUrl,
method: 'post',
data: paramFormData,
headers: {
'Authorization': 'Bearer ' + getToken(),
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
// progressEvent.loaded:已上传文件大小
// progressEvent.total:被上传文件的总大小
//进度条
that.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
}
}).then(res => {
console.info("res===========", res)
if (res.data.code == 200 && that.progressPercent === 100) {
setTimeout(function () {
that.$message({
message: '上传成功！',
type: 'success',
duration: '2000'
});
that.progressFlag = false;
that.progressPercent = 0
}, 500);
}
}).catch(error => {
that.progressFlag = false;
that.progressPercent = 0
that.$refs.upload.clearFiles();
that.$message({
message: '上传失败！',
type: 'error',
duration: '2000'
});
})
},*/
//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
onChange(file, fileList) {
this.fileList = fileList;
},
handleRemove(file, fileList) {
this.fileList = fileList;
},
handleExceed(files, fileList) {
this.$message.warning(
"最多之能上传"+ this.limit +"个附件"
);
},
async uploadFile({ data, file }) {
let self = this
//初始化参数
this.progress++
if (file.size < this.partSize) {
let formData = new FormData()
formData.append("file", file)
self.progressFlag = true;
axios({
url: self.uploadUrl,
method: 'post',
data: formData,
headers: {
'Authorization': 'Bearer ' + getToken(),
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
// progressEvent.loaded:已上传文件大小
// progressEvent.total:被上传文件的总大小
//进度条
self.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
}
}).then(res => {
setTimeout(() => {
if (res.data.code == 200 && self.progressPercent === 100) {
setTimeout(function () {
self.$message({
message: '上传成功！',
type: 'success',
duration: '2000'
});
self.progressFlag = false;
self.progressPercent = 0
}, 500);
} else {
self.$message({
message: '上传失败！',
type: 'error',
duration: '2000'
});
}
}, 1000);
}).catch(error => {
console.error(error)
self.progressFlag = false;
self.progressPercent = 0
self.$refs.upload.clearFiles();
self.$message({
message: '上传失败！',
type: 'error',
duration: '2000'
});
})
} else {
console.info("111111111111")
file._shardCount = Math.ceil(file.size / this.partSize) //总片数
file.uploaded = 0
let formData = new FormData()
formData.append('fileName', file.name)
let self = this
//大文件上传初始化,返回uploadId initUpload(formData)
axios({
url: process.env.VUE_APP_BASE_API + "/common/initUpload",
method: 'post',
data: formData,
headers: {
'Authorization': 'Bearer ' + getToken(),
'Content-Type': 'multipart/form-data'
},
}).then(function (res) {
console.info("res=====initUpload=======", res)
if (res.status == 200) {
//从第0块开始上传
file.uploadId = res.data.uploadId
file.objectKey = res.data
file.chunkId = 0
self.uploadByChunk(file)
} else {
this.progress--
self.$message.error(res.msg)
}
}).catch(error => {
self.progressPercent = 0
self.progressFlag = false;
console.error(error)
})
}
},
//分片上传大文件
uploadByChunk(file) {
this._start = file.chunkId * this.partSize
this._end = Math.min(file.size, this._start + this.partSize)//结束时总大小，和 开始的大小+之前的大小比较
let self = this
let fileData = file.slice(this._start, this._end)
//获取文件块MD5
let reader = new FileReader()
reader.readAsBinaryString(fileData)
// 读取成功后的回调
// reader.onloadend = function(e) {
// 用hex_md5生成md5值，与OSS的算法对应，并转换为大写，不是直接md5-js的算法
// self.md5Str[index] = (CryptoJS(this.result)).toLocaleUpperCase()
// self.md5Str[index] = CryptoJS.MD5(e.target.result)
// }
let form1 = new FormData()//new一个form的实例，可以进行键值对的添加，
form1.append('chunkFile', fileData) //slice方法用于切出文件的一部分
form1.append('uploadId', file.uploadId)
form1.append('chunkId', (file.chunkId + 1).toString())
form1.append('shardCount', file._shardCount.toString()) //是否最后一片
self.progressFlag = true;
//上传大文件的Chunk 返回chunk的MD5 uploadChunk(form1)
axios({
url: process.env.VUE_APP_BASE_API + "/common/uploadChunk",
method: 'post',
data: form1,
headers: {
'Authorization': 'Bearer ' + getToken(),
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
// progressEvent.loaded:已上传文件大小
// progressEvent.total:被上传文件的总大小
//进度条
self.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
}
}).then(response => {
console.info("response=======uploadChunk=====", response)
if (response.status == 200) {
//判断返回的MD5值是否一致，一致继续传下一块，否则重传本块（这里目前前后端MD5一直不一致，暂时先注释掉，有时间了我再研究一下）
// self.md5Str[index] === response.msg ||
if (true) {
// this.$message.success('第' + (index + 1).toString() + '块文件上传成功')
file.uploaded++
self.percentageSend(file)
//如果没上传完成，继续上传一下块
file.chunkId++
if (file.chunkId < file._shardCount) {
this.uploadByChunk(file)
}
} else {
//不一致，重新传本块
this.$message.success('第' + (file.chunkId + 1).toString() + '块文件上传不成功，重新上传')
this.uploadByChunk(file.chunkId)
}
} else {
//出错，跳出循环显示错误
this.progress--
this.$message.error(response.msg)
}
})
},
//接收上传的百分值回调
percentageSend(file) {
let self = this
let perNum = Math.floor((file.uploaded / file._shardCount) * 100)
this.progressPercent = perNum
//如果上传完成，合并文件
if (perNum === 100) {
let form2 = new FormData()//new一个form的实例，可以进行键值对的添加，
form2.append('uploadId', file.uploadId)
form2.append('fileName', file.name)
// 大文件上传完成后合并
// 返回文件访问的URL
axios({
url: process.env.VUE_APP_BASE_API + "/common/mergeFile",
method: 'post',
data: form2,
headers: {
'Authorization': 'Bearer ' + getToken(),
'Content-Type': 'multipart/form-data'
},
}).then(response => {
console.info("response====mergeFile========", response)
if (response.status == 200) {
setTimeout(function () {
self.$message({
message: '上传成功！',
type: 'success',
duration: '2000'
});
self.progressFlag = false;
self.progressPercent = 0
}, 500);
} else {
self.$message({
message: '上传失败！',
type: 'error',
duration: '2000'
});
}
console.info("file===============", file)
})
}
},
resetData() {
this.progress = 0;
},
}
};
</script>

124
src/views/document/editDocument.vue
View File

@ -3,21 +3,32 @@
<el-form ref="form" :model="form" :rules="rules" label-width="150px">
<el-row>
<el-col :span="24">
<!--<el-form-item label="文档类别" required>
<el-select placeholder="请选择">
<el-option label="管理手册" value=""></el-option>
<el-option label="操作手册" value=""></el-option>
<el-option label="程序文件" value=""></el-option>
<el-option label="需求文档" value=""></el-option>
</el-select>
</el-form-item>-->
<el-form-item label="文档类别" prop="docType">
<el-input v-model="form.docType" placeholder="请输入文档类别" />
<el-form-item label="文件分类" prop="docCode">
<treeselect v-model="form.categoryId" :options="docCategory" :show-count="true" placeholder="请选择文件分类"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="文档编号" prop="docCode">
<el-input v-model="form.docCode" placeholder="请输入文档编号" maxlength="50" show-word-limit/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="文档名称" prop="docName">
<el-input v-model="form.docName" placeholder="请输入文档名称" maxlength="200" show-word-limit/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="文档类别" prop="docType">
<el-input v-model="form.docType" placeholder="请输入文档类别" maxlength="50" show-word-limit/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="文档来源" prop="docSource">
<el-input v-model="form.docSource" placeholder="请输入文档来源" />
<el-input v-model="form.docSource" placeholder="请输入文档来源" maxlength="50" show-word-limit/>
</el-form-item>
</el-col>
<el-col :span="24">
@ -27,16 +38,26 @@
</el-col>
<el-col :span="24">
<el-form-item label="负责人" prop="docPrincipals">
<el-input v-model="form.docPrincipals" placeholder="请输入负责人" />
<el-input v-model="form.docPrincipals" placeholder="请输入负责人" maxlength="50" show-word-limit/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="归属部门" prop="docRespDept">
<el-input v-model="form.docRespDept" placeholder="请输入归属部门" />
<el-form-item label="归属单位" prop="docRespDept">
<treeselect v-model="form.docRespDept" :options="deptOptions" :show-count="true" placeholder="请输入归属单位" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="文件" required>
<uploadVue
:uploadUrl="uploadFileUrl"
:type="['.txt','.doc','.docx','.pdf','.mp4','.zip','.rar','.7z','.png','.jpg','.jpeg']"
:acceptType="acceptType"
:limit="1"
:onSuccess="handleUploadSuccess"
:onError="handleUploadError"
/>
<!-- <uploadVue-->
<!-- <upload-progress/>
<el-upload
class="upload-component"
ref="upload"
@ -50,7 +71,7 @@
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
<div slot="tip" class="el-upload__tip"><el-progress :percentage="progress"></el-progress></div>
</el-upload>
</el-upload>-->
</el-form-item>
</el-col>
<el-col :span="24">
@ -71,7 +92,7 @@
</el-table-column>-->
<el-table-column align="center" width="55">
<template slot-scope="scope">
<el-radio v-model="templateSelection" :label="scope.row.prop1">&nbsp;</el-radio>
<el-radio v-model="templateSelection" :label="scope.row.prop1"></el-radio>
</template>
</el-table-column>
<el-table-column prop="prop1" label="工具编号"></el-table-column>
@ -93,8 +114,15 @@
import { addDocument, updateDocument } from "@/api/document/document";
import axios from 'axios';
import { getToken } from '@/utils/auth'
import { deptTreeSelect } from "@/api/system/user";
import { documentTree } from "@/api/documentCategory/documentCategory.js";
import Treeselect from "@riophae/vue-treeselect";
import uploadProgress from "./uploadProgress";
import uploadVue from '@/components/FileUpload/optimizeUpload.vue'
export default {
name: 'editDocument',
components: { Treeselect, uploadProgress, uploadVue},
props: {
tooId: {
type: String,
@ -124,10 +152,12 @@
],
// 表单参数
form: {
categoryId: undefined,
docCode: '',
docName: '',
docType: '',
docPrincipals: '',
docRespDept: '',
docRespDept: undefined,
docSource: '',
toolId: ''
},
@ -135,16 +165,29 @@
progress: 0,
// 表单校验
rules: {
docCode: [
{ required: true, message: "文档编号不能为空", trigger: "blur" }
],
docName: [
{ required: true, message: "文档名称不能为空", trigger: "blur" }
],
docType: [
{ required: true, message: "类别不能为空", trigger: "blur" }
],
docSource: [
{ required: true, message: "文档来源不能为空", trigger: "blur" }
]
}
},
docCategory:[],
deptOptions:[],
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
fileData: null,
acceptType: ".txt,.doc,.docx,.pdf,.mp4,.zip,.rar,.7z,.png,.jpg,.jpeg"
}
},
created(){
this.getDeptTree();
this.getDocumentTree();
},
mounted(){
/* this.$nextTick(() => {
@ -153,7 +196,8 @@
},
methods:{
chooseToolConfirm(){
this.form.toolId = this.templateSelection
this.$set(this.form, "toolId", this.templateSelection)
this.drawer1 = false;
},
singleElection(row) {
this.templateSelection = row.prop1
@ -182,7 +226,7 @@
},
// 取消按钮
cancel() {
this.open = false;
this.drawer1 = false;
this.reset();
},
onChange(file, fileList) {
@ -285,6 +329,46 @@
console.error('Failed to upload file:', error);
});
},
/** 查询部门下拉树结构 */
getDeptTree() {
deptTreeSelect().then(response => {
this.deptOptions = response.data;
});
},
/** 查询树形下拉树结构 */
getDocumentTree() {
documentTree().then(response => {
this.docCategory = response.data;
});
},
/** 转换部门数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.deptId,
label: node.deptName,
children: node.children
};
},
// flag 为true表示新增
getData(data, flag, index) {
console.info("data============", data)
console.info("flag============", flag)
console.info("index============", index)
},
getError(message) {
this.$message.error(message);
},
handleUploadSuccess(response) {
alert('File uploaded successfully');
// 处理上传成功后的逻辑
},
handleUploadError(error) {
alert('Failed to upload file');
// 处理上传失败后的逻辑
}
}
}
</script>

160
src/views/document/index.vue
View File

@ -23,26 +23,21 @@
</el-card>
<el-card class="lrtt">
<div class="lt">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
<el-input placeholder="请输入..." prefix-icon="el-icon-search"></el-input>
<div class="divide"></div><!--divide 分隔-->
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
<el-tree :data="docCategory" :props="docCategoryProps" @node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<el-dropdown>
<span class="el-dropdown-link"><i class="el-icon-more"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="handleDocCategoryAdd(data)"><i class="el-icon-plus"></i>添加</el-dropdown-item>
<el-dropdown-item v-if="data.types != 'system'" @@click.native="handleDocCategoryUpdate(data)"><i class="el-icon-edit"></i>编辑</el-dropdown-item>
<el-dropdown-item v-if="data.types != 'system'" @@click.native="handleDocCategoryDelete(data)"><i class="el-icon-delete"></i>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</el-tree>
</div><!--lt 左-->
<div class="rt">
<div class="operate">
@ -106,6 +101,28 @@
</div>
</el-card>
<el-dialog :title="docCategoryTitle" :visible.sync="docCategoryOpen" width="50%" append-to-body>
<el-form ref="docCategoryForm" :model="docCategoryForm" :rules="docCategoryRules" label-width="80px">
<el-form-item label="父分类" prop="parentId">
<treeselect v-model="docCategoryForm.parentId" :options="docCategory" :show-count="true" placeholder="如果不选择，默认为顶级节点" />
</el-form-item>
<el-form-item label="分类名称" prop="categoryName">
<el-input v-model="docCategoryForm.categoryName" placeholder="请输入分类名称" maxlength="50" show-word-limit/>
</el-form-item>
<el-form-item label="分类描述" prop="categoryDescription">
<el-input v-model="docCategoryForm.categoryDescription"
type="textarea" :rows="3" maxlength="500" show-word-limit
placeholder="请输入分类描述" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="docCategorySubmitForm">确 定</el-button>
<el-button @click="docCategoryCancel">取 消</el-button>
</span>
</el-dialog>
<el-dialog :title="viewDialogTitle" :visible.sync="viewDialogOpen" fullscreen width="500px" append-to-body>
<i-frame :src="previewUrl" />
</el-dialog>
@ -128,15 +145,18 @@
<script>
import { listDocument, getDocument, delDocument, addDocument, updateDocument } from "@/api/document/document";
import { deptTreeSelect } from "@/api/system/user";
import { documentTree,addCategory,updateCategory,delCategory,getCategory } from "@/api/documentCategory/documentCategory.js";
import { Base64 } from 'js-base64';
import iFrame from "@/components/iFrame/index"
import editDocument from "./editDocument";
import uploadProgress from "./uploadProgress";
import { w3cwebsocket as WebSocket } from 'websocket';
import Treeselect from "@riophae/vue-treeselect";
export default {
name: "Document",
components: { iFrame, editDocument, uploadProgress },
components: { iFrame, editDocument, uploadProgress, Treeselect},
data() {
return {
// 遮罩层
@ -157,6 +177,12 @@ export default {
children: "children",
label: "label"
},
// 文档树
docCategory: undefined,
docCategoryProps: {
children: "children",
label: "label"
},
// 总条数
total: 0,
// 表格数据
@ -194,12 +220,35 @@ export default {
docSource: [
{ required: true, message: "文档来源不能为空", trigger: "blur" }
]
}
},
docCategoryRules: {
categoryName: [
{ required: true, message: "分类名称不能为空", trigger: "blur" }
],
createBy: [
{ required: true, message: "创建人名称不能为空", trigger: "blur" }
],
createById: [
{ required: true, message: "创建人id不能为空", trigger: "blur" }
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
},
docCategoryTitle: "",
docCategoryOpen: false,
// 文档资源参数
docCategoryForm: {
categoryName: null,
categoryDescription: null,
parentId: null
},
};
},
created() {
this.getList();
this.getDeptTree();
this.getDocumentTree();
},
methods: {
/** 查询部门下拉树结构 */
@ -208,6 +257,12 @@ export default {
this.deptOptions = response.data;
});
},
/** 查询树形下拉树结构 */
getDocumentTree() {
documentTree().then(response => {
this.docCategory = response.data;
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
@ -268,7 +323,70 @@ export default {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 新增按钮操作 */
handleDocCategoryAdd(data) {
console.info("data================", data)
this.docCategoryOpen = true;
// this.docCategoryForm.parentId = data.id;
this.$nextTick(() => {
this.resetDocCategoryForm();
this.docCategoryForm.parentId = data.id;
})
this.docCategoryTitle = "添加文档资源分类";
},
/** 删除按钮操作 */
handleDocCategoryDelete(row) {
this.$modal.confirm('是否删除该项数据？').then(function() {
return delCategory(row.id);
}).then(() => {
this.getDocumentTree();
this.$modal.msgSuccess("删除成功");
}).catch((err) => {
console.info("err============", err)
});
},
/** 修改按钮操作 */
handleDocCategoryUpdate(row) {
this.resetDocCategoryForm();
const id = row.id;
getCategory(id).then(response => {
this.docCategoryForm = response.data;
this.docCategoryOpen = true;
this.docCategoryTitle = "修改文档资源分类";
});
},
/** 提交按钮 */
docCategorySubmitForm() {
this.$refs["docCategoryForm"].validate(valid => {
if (valid) {
if (this.docCategoryForm.id != null) {
updateCategory(this.docCategoryForm).then(response => {
this.$modal.msgSuccess("修改成功");
this.docCategoryOpen = false;
this.getDocumentTree();
});
} else {
this.$set(this.docCategoryForm, "type", "user")
addCategory(this.docCategoryForm).then(response => {
this.$modal.msgSuccess("新增成功");
this.docCategoryOpen = false;
this.getDocumentTree();
});
}
}
});
},
// 取消按钮
docCategoryCancel() {
this.docCategoryOpen = false;
this.resetDocCategoryForm();
},
/** 重置 **/
resetDocCategoryForm(){
this.$refs.docCategoryForm.resetFields();
}
}
};
</script>

2
src/views/login.vue
View File

@ -124,7 +124,7 @@ export default {
};
</script>
<style rel="stylesheet/scss" lang="scss">
<style rel="stylesheet/scss" lang="scss" scoped>
.login {
display: flex;
justify-content: center;

2
src/views/register.vue
View File

@ -146,7 +146,7 @@ export default {
};
</script>
<style rel="stylesheet/scss" lang="scss">
<style rel="stylesheet/scss" lang="scss" scoped>
.register {
display: flex;
justify-content: center;