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

update

Browse Source
This commit is contained in:
Jane
2024-07-25 13:48:29 +08:00
parent 367d095b31
commit 1eb5dd1085
10 changed files with 1146 additions and 824 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
src/views/document/editDocument.vue Normal file
View File

@@ -0,0 +1,294 @@
<template>
<div class="el-form-border">
<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>
</el-col>
<el-col :span="24">
<el-form-item label="文档来源" prop="docSource">
<el-input v-model="form.docSource" placeholder="请输入文档来源" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="关联工具" prop="toolId">
<el-input v-model="form.toolId" placeholder="请选择关联工具" @focus="drawer1 = true"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="负责人" prop="docPrincipals">
<el-input v-model="form.docPrincipals" placeholder="请输入负责人" />
</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>
</el-col>
<el-col :span="24">
<el-form-item label="文件" required>
<el-upload
class="upload-component"
ref="upload"
:auto-upload="false"
:file-list="fileList"
:on-change="onChange"
:on-remove="onRemove"
:multiple="true"
action=""
>
<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-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form><!--el-form-->
<el-dialog title="选择关联工具" :visible.sync="drawer1" width="75%" append-to-body>
<div>
<el-table :data="tableData2" @row-click="singleElection" highlight-current-row style="width: 100%">
<!--<el-table-column label="选择" align="center" width="65">
<template slot-scope="scope">
<el-radio :label="scope.row.prop1" v-model="radio" @change.native="getCurrentRow(scope.row)" />
</template>
</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>
</template>
</el-table-column>
<el-table-column prop="prop1" label="工具编号"></el-table-column>
<el-table-column prop="prop2" label="工具名称"></el-table-column>
<el-table-column prop="prop5" label="工具类别" ></el-table-column>
<el-table-column prop="prop3" label="归属单位" width="180"> </el-table-column>
<el-table-column prop="prop4" label="负责人" width="100" ></el-table-column>
</el-table><!--el-table-->
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="chooseToolConfirm()">确 定</el-button>
<el-button @click="cancel()">取 消</el-button>
</div>
</el-dialog><!--el-drawer 流程监控-抽屉-->
</div><!--el-form-border 表单-->
</template>
<script>
import { addDocument, updateDocument } from "@/api/document/document";
import axios from 'axios';
import { getToken } from '@/utils/auth'
export default {
name: 'editDocument',
props: {
tooId: {
type: String,
default: "",
}
},
data(){
return{
templateSelection: '',
drawer1: false,
checkList: [],
tableData2: [
{
prop1: 'GDL-987',
prop2: 'GDL工具',
prop3: '检测型 ',
prop4: '研发部门',
prop5: '韩健'
},
{
prop1: 'GDL-988',
prop2: 'GDL工具',
prop3: '检测型 ',
prop4: '研发部门',
prop5: '韩健'
}
],
// 表单参数
form: {
docName: '',
docType: '',
docPrincipals: '',
docRespDept: '',
docSource: '',
toolId: ''
},
fileList: [],
progress: 0,
// 表单校验
rules: {
docType: [
{ required: true, message: "类别不能为空", trigger: "blur" }
],
docSource: [
{ required: true, message: "文档来源不能为空", trigger: "blur" }
]
}
}
},
created(){
},
mounted(){
/* this.$nextTick(() => {
document.querySelector('.el-upload__input').webkitdirectory = true
})*/
},
methods:{
chooseToolConfirm(){
this.form.toolId = this.templateSelection
},
singleElection(row) {
this.templateSelection = row.prop1
this.checkList = this.tableData2.filter((item) => item.prop1 === row.prop1)
console.log(`该行的编号为${row.prop1}`)
},
getCurrentRow(row){
// 获取选中数据 row表示选中这一行的数据，可以从里面提取所需要的值
},
showOpenHandle(){
this.reset();
this.title = "上传文档";
},
// 表单重置
reset() {
this.form = {
docName: '',
docType: '',
docPrincipals: '',
docRespDept: '',
docSource: '',
toolId: ''
};
this.fileList = []
this.resetForm("form");
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
onChange(file, fileList) {
// valid the suffix of file
/*let validSuffix = ['pdf', 'docx', 'doc', 'txt', 'eml', 'mp4']
let splits = file.name.split('.')
let suffix = splits[splits.length - 1]
if (!validSuffix.includes(suffix)) {
this.$message.error(`只能上传 ${validSuffix.join(',')} 类型的文件！`)
this.fileList = fileList.filter(item => item.uid !== file.uid)
return
}*/
this.fileList = fileList
},
onRemove(file, fileList) {
this.fileList = fileList.filter(item => item.uid !== file.uid)
},
generateUniqueID() {
// 使用时间戳来生成唯一ID
const timestamp = new Date().getTime();
// 在ID前面添加一个前缀，以防止与其他ID冲突
const uniqueID = 'file_' + timestamp;
return uniqueID;
},
/** 提交按钮 */
submitForm: function() {
//判断是否有文件再上传
if (this.fileList.length === 0) {
return this.$message.warning('请选取文件后再上传')
}
this.fileList.map(file =>{
this.form.docName = file.name
})
this.form.toolId = this.toolId
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != undefined) {
updateDocument(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.$emit("submit");
});
} else {
addDocument(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.confirmSubmit(response.data);
this.$emit("submit");
});
}
}
});
},
testUpdate(docId){
// 创建 formData 对象
const formData = new FormData()
// 将所有 的 upload 组件中的文件对象放入到 FormData 对象中
this.fileList.forEach((file) => {
formData.append('folder', file.raw)
})
formData.append('docId', '')
formData.append('requestId', this.generateUniqueID())
axios.post(process.env.VUE_APP_BASE_API + '/document/upload/folder', formData, {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer ' + getToken(),
}
}).then((response) => {
if(response.data.code===200){
this.$emit("submit");
}else{
// 弹框报错 response.data.message
}
}).catch((error) => {
console.error('Failed to upload file:', error);
});
},
confirmSubmit(docId) {
// 创建 formData 对象
const formData = new FormData()
// 将所有 的 upload 组件中的文件对象放入到 FormData 对象中
this.fileList.forEach((file) => {
formData.append('files', file.raw)
})
formData.append('docId', docId)
formData.append('requestId', this.generateUniqueID())
//自定义的接口也可以用ajax或者自己封装的接口
axios.post(process.env.VUE_APP_BASE_API + '/document/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer ' + getToken(),
}
}).then((response) => {
if(response.data.code===200){
this.$emit("submit");
}else{
// 弹框报错 response.data.message
}
}).catch((error) => {
console.error('Failed to upload file:', error);
});
},
}
}
</script>
<style scoped>
</style>

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

@@ -66,10 +66,10 @@
<el-table-column label="归属部门" prop="docRespDept" :show-overflow-tooltip="true" width="150" />
<el-table-column label="来源" prop="docSource" width="100" />
<el-table-column label="关联工具" prop="roleSort" width="100" />
<el-table-column label="上传进度" prop="docUploadProgress" width="100" >
<el-table-column label="上传状态" prop="docUploadProgress" width="100" >
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.docStatus == 'ysc'">已上传</el-tag>
<el-progress v-else :percentage="progress" status="success"></el-progress>
<el-tag type="danger" v-else>上传失败</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
@@ -106,75 +106,22 @@
</div>
</el-card>
<el-drawer :visible.sync="open" size="75%">
<template #title>
<span class="title">新增文档资源</span>
<div class="drawer-head-btn">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div><!--drawer-head-btn 抽屉顶部按钮区域-->
</template>
<div class="el-form-border">
<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>
</el-col>
<el-col :span="24">
<el-form-item label="文档来源" prop="docSource">
<el-input v-model="form.docSource" placeholder="请输入文档来源" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="文件" required>
<el-upload
class="upload-component"
ref="upload"
:auto-upload="false"
:file-list="fileList"
:on-change="onChange"
:on-remove="onRemove"
:limit="1"
action=""
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="负责人" prop="docPrincipals">
<el-input v-model="form.docPrincipals" placeholder="请输入负责人" />
</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>
</el-col>
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form><!--el-form-->
</div><!--el-form-border 表单-->
</el-drawer><!--el-drawer 新增抽屉-->
<el-dialog :title="viewDialogTitle" :visible.sync="viewDialogOpen" fullscreen width="500px" append-to-body>
<i-frame :src="previewUrl" />
</el-dialog>
<el-drawer :visible.sync="open" :modal-append-to-body="false" size="75%">
<template #title>
<span class="title">新增文档资源</span>
<div class="drawer-head-btn">
<el-button type="primary" @click="$refs.editDocumentRef.submitForm()">确 定</el-button>
<el-button @click="$refs.editDocumentRef.cancel()">取 消</el-button>
</div><!--drawer-head-btn 抽屉顶部按钮区域-->
</template>
<edit-document ref="editDocumentRef" @submit="editDocumentSubmit"/>
</el-drawer>
<upload-progress/>
</div>
</template>
@@ -182,14 +129,14 @@
import { listDocument, getDocument, delDocument, addDocument, updateDocument } from "@/api/document/document";
import { deptTreeSelect } from "@/api/system/user";
import { Base64 } from 'js-base64';
import iFrame from "@/components/iFrame/index";
import iFrame from "@/components/iFrame/index"
import editDocument from "./editDocument";
import uploadProgress from "./uploadProgress";
import { w3cwebsocket as WebSocket } from 'websocket';
import axios from 'axios';
import { getToken } from '@/utils/auth'
export default {
name: "Document",
components: { iFrame },
components: { iFrame, editDocument, uploadProgress },
data() {
return {
// 遮罩层
@@ -217,9 +164,8 @@ export default {
// 弹出层标题
title: "",
viewDialogTitle: "",
// 是否显示弹出层
open: false,
viewDialogOpen: false,
open: false,
// 日期范围
dateRange: [],
previewUrl: '',
@@ -254,7 +200,6 @@ export default {
created() {
this.getList();
this.getDeptTree();
this.initWebSocket();
},
methods: {
/** 查询部门下拉树结构 */
@@ -273,70 +218,6 @@ export default {
this.queryParams.toolRespDept = data.id;
this.handleQuery();
},
generateUniqueID() {
// 使用时间戳来生成唯一ID
const timestamp = new Date().getTime();
// 在ID前面添加一个前缀，以防止与其他ID冲突
const uniqueID = 'file_' + timestamp;
return uniqueID;
},
initWebSocket() {
this.websocket = new WebSocket(process.env.VUE_APP_WS_URL);
this.websocket.onmessage = (event) => {
const msgStr = event.data;
console.log('上传进度=' + msgStr);
let progress = msgStr.substring(msgStr.indexOf("/") + 1, msgStr.length);
this.progress = parseInt(progress)
// if (progress === '100%') {
// this.websocket.close();
// }
};
this.websocket.onclose = () => {
console.log('WebSocket connection closed');
};
},
onChange(file, fileList) {
// valid the suffix of file
let validSuffix = ['pdf', 'docx', 'doc', 'txt', 'eml', 'mp4']
let splits = file.name.split('.')
let suffix = splits[splits.length - 1]
if (!validSuffix.includes(suffix)) {
this.$message.error(`只能上传 ${validSuffix.join(',')} 类型的文件！`)
this.fileList = fileList.filter(item => item.uid !== file.uid)
return
}
this.fileList = fileList
},
onRemove(file, fileList) {
this.fileList = fileList.filter(item => item.uid !== file.uid)
},
confirmSubmit(docId) {
// 创建 formData 对象
const formData = new FormData()
// 将所有 的 upload 组件中的文件对象放入到 FormData 对象中
this.fileList.forEach((file) => {
formData.append('files', file.raw)
})
formData.append('docId', docId)
formData.append('requestId', this.generateUniqueID())
//自定义的接口也可以用ajax或者自己封装的接口
axios.post(process.env.VUE_APP_BASE_API + '/document/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer ' + getToken(),
}
}).then((response) => {
if(response.data.code===200){
this.getList()
}else{
// 弹框报错 response.data.message
}
this.initWebSocket();
}).catch((error) => {
console.error('Failed to upload file:', error);
});
},
/** 查询列表 */
getList() {
this.loading = true;
@@ -347,23 +228,6 @@ export default {
}
);
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
docName: '',
docType: '',
docPrincipals: '',
docRespDept: '',
docSource: ''
};
this.fileList = []
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
@@ -377,9 +241,7 @@ export default {
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "上传文档";
this.open = true
},
handlePriew(row){
console.log('mmmmmmmmmmm',process.env.VUE_APP_BASE_API + row.docUrl)
@@ -393,33 +255,9 @@ export default {
this.single = selection.length!=1
this.multiple = !selection.length
},
/** 提交按钮 */
submitForm: function() {
//判断是否有文件再上传
if (this.fileList.length === 0) {
return this.$message.warning('请选取文件后再上传')
}
this.fileList.map(file =>{
this.form.docName = file.name
})
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != undefined) {
updateDocument(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addDocument(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
this.confirmSubmit(response.data);
});
}
}
});
editDocumentSubmit: function() {
this.open = false;
this.getList();
},
/** 删除按钮操作 */
handleDelete(row) {
@@ -434,3 +272,4 @@ export default {
}
};
</script>

86
src/views/document/uploadProgress.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<div>
<div v-if="uploading" class="progress-bar">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>上传列表</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="uploading = false">关闭</el-button>
</div>
<el-table :data="progressArr" max-height="400px">
<el-table-column label="文档名称" prop="docName" :show-overflow-tooltip="true" />
<el-table-column label="进度">
<template slot-scope="scope">
<el-progress :percentage="parseInt(scope.row.progress)"></el-progress>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- <el-progress :percentage="progress"></el-progress>-->
</div>
</div>
</template>
<script>
export default {
data() {
return {
uploading: false,
progressArr: [],
progress: 0
}
},
created(){
this.initWebSocket();
},
methods: {
initWebSocket() {
this.websocket = new WebSocket(process.env.VUE_APP_WS_URL);
this.websocket.onmessage = (event) => {
this.uploading = true;
const msgStr = event.data;
let msgArr = msgStr.split('|');
let item = {}
item['docId'] = msgArr[0]
item['docName'] = msgArr[1]
item['progress'] = msgArr[2]
if((this.progressArr.findIndex(t => t['docId'] == item['docId'])) == -1){
this.progressArr.push(item)
}
this.progressArr.forEach(p => {
if(p['docId'] == item['docId']){
p['progress'] = item['progress']
}
})
console.log('this.progressArr=' + this.progressArr);
/* let progress = msgStr.substring(msgStr.indexOf("/") + 1, msgStr.length);
this.progress = parseInt(msgArr[2])*/
// if (progress === '100%') {
// this.websocket.close();
// }
};
this.websocket.onclose = () => {
console.log('WebSocket connection closed');
};
},
checkDuplicate(docId) {
return this.progressArr.findIndex(t => t['docId'] == docId) == -1
}
}
};
</script>
<style>
.progress-bar {
position: fixed;
bottom: 10px;
left: 85%;
transform: translateX(-50%);
width: 30%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fff;
text-align: center;
user-select: none;
}
</style>