ToolTech/tool-tech-front
6
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>

214
src/views/tool/index.vue
View File

@@ -89,11 +89,10 @@
@click="handleAdd"
v-hasPermi="['system:user:add']"
>新增</el-button>
<el-button type="primary" icon="el-icon-upload2">上传</el-button>
<el-button type="primary" icon="el-icon-position">发布</el-button>
<el-button icon="el-icon-thumb" @click="drawer2 = true">申请使用</el-button>
<el-button icon="el-icon-thumb" @click="applyUse()">申请使用</el-button>
<el-button icon="el-icon-delete">批量删除</el-button>
<el-button icon="el-icon-download" @click="drawer3 = true">导出</el-button>
<el-button icon="el-icon-download" @click="exoportDrawerOpen = true">导出</el-button>
</div><!--operate 操作按钮-->
<el-table v-loading="loading" :data="toolList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
@@ -126,22 +125,17 @@
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button type="text" icon="el-icon-info" @click="drawer4 = true">详情</el-button>
<el-button type="text" icon="el-icon-info" @click="handleDetail(scope.row)">详情</el-button>
<el-button type="text" icon="el-icon-download">下载</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:user:edit']"
>编辑</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:user:remove']"
>删除</el-button>
<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['tool:edit', 'tool:remove']">
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="handleUpdate" icon="el-icon-edit"
v-hasPermi="['tool:edit']">编辑</el-dropdown-item>
<el-dropdown-item command="handleDelete" icon="el-icon-delete"
v-hasPermi="['tool:remove']">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
@@ -155,7 +149,8 @@
</div><!--rt 右-->
</el-card><!--el-card-->
<el-drawer :visible.sync="open" size="75%">
<!-- 添加或修改工具信息对话框 -->
<el-drawer :visible.sync="addDrawerOpen" size="75%">
<template #title>
<span>新增工具</span>
<div class="drawer-head-btn">
@@ -266,12 +261,13 @@
</div><!--el-form-border 表单-->
</el-drawer><!--el-drawer 新增抽屉-->
<el-drawer :visible.sync="drawer2" size="75%">
<!-- 工具申请使用对话框 -->
<el-drawer :visible.sync="applyDrawerOpen" size="75%">
<template #title>
<span class="title">申请使用</span>
<span>申请使用</span>
<div class="drawer-head-btn">
<el-button type="primary">提交</el-button>
<el-button>取消</el-button>
<el-button type="primary" icon="el-icon-check" @click="submitApply()">提交</el-button>
<el-button icon="el-icon-close" @click="cancelApply()">取消</el-button>
</div><!--drawer-head-btn 抽屉顶部按钮区域-->
</template>
<div class="el-form-border">
@@ -295,24 +291,22 @@
</div><!--el-form-border 表单-->
<div class="divide double"></div><!--divide 分隔-->
<div class="tboper">
<div class="tit">具体变更内容</div>
<div class="boper">
<el-button type="primary">添加</el-button>
</div>
<div class="tit">申请使用工具列表</div>
</div><!--tboper 标题与操作按钮-->
<el-table :data="tableData2" style="width: 100%">
<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-column prop="prop5" label="工具类别" ></el-table-column>
<el-table-column label="操作" width="100">
<el-button type="text">删除</el-button>
</el-table-column>
</el-table><!--el-table-->
</el-drawer><!--el-drawer 申请使用-->
<el-drawer :visible.sync="drawer3" size="75%">
<!-- 工具导出对话框 -->
<el-drawer :visible.sync="exoportDrawerOpen" size="75%">
<template #title>
<span class="title">导出</span>
<div class="drawer-head-btn">
@@ -346,117 +340,15 @@
</div><!--el-form-border 表单-->
</el-drawer><!--el-drawer 导出抽屉-->
<el-drawer :visible.sync="drawer4" size="85%" class="no-padding">
<!-- 工具详情对话框 -->
<el-drawer :visible.sync="detailDrawerOpen" :modal-append-to-body="false" size="85%" class="no-padding">
<template #title>
<span>工具名称</span>
</template>
<div class="fbox1">
<div class="fl">
<el-tabs v-model="activeName1" @tab-click="handleClick">
<el-tab-pane label="基本信息" name="first">
<div class="el-form-border">
<el-form ref="form" label-width="150px">
<el-row>
<el-col :span="12"> <el-form-item label="工具名称">工具名称2</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="工具类别">网络工具</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="工具来源">单位自建</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="负责人">赵宁宇</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="归属单位">人力资源部/员工关系组</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="状态"><span class="green">启用中</span></el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="工具用途">主要用于单位网络使用</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="测评情况">运行良好，可正常使用</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="功能描述">单位网络使用</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="适用条件">网络正常</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="操作说明">正常开启即可用</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="备注">工具使用完成后，请做好保养工作。</el-form-item> </el-col>
</el-row>
</el-form><!--el-form-->
</div><!--el-form-border 表单-->
</el-tab-pane><!--el-tab-pane-->
<el-tab-pane label="文件来源" name="second">
<div class="operate">
<el-button type="primary">上传</el-button>
<el-button>编辑</el-button>
<el-button>删除</el-button>
<el-button>下载</el-button>
</div><!--operate 操作按钮-->
<el-table :data="tableData2" style="width: 100%">
<el-table-column type="selection" width="50" align="center"> </el-table-column>
<el-table-column prop="prop1" label="文档名称"><a>网络信息管理文件.doc</a></el-table-column>
<el-table-column prop="prop2" label="文件类别"></el-table-column>
<el-table-column prop="prop3" label="文档类型"></el-table-column>
<el-table-column prop="prop4" label="归属单位"></el-table-column>
<el-table-column prop="prop5" label="更新时间"></el-table-column>
</el-table><!--el-table-->
</el-tab-pane><!--el-tab-pane-->
</el-tabs><!--el-tabs-->
</div><!--fl 左侧页签-->
<div class="fr">
<div class="tboper">
<div class="tit">评论</div>
</div><!--tboper 标题与操作按钮-->
<div class="pltextarea">
<el-input type="textarea" placeholder="请输入您的意见" :rows="4" maxlength="1000" show-word-limit></el-input>
<div class="plbtn"><el-button>发布</el-button></div>
</div><!--pltextarea-->
<div class="pllist">
<div class="list">
<div class="luser"><span class="xuser">张</span></div>
<div class="ltext">
<div class="nt"><span class="name">张鑫辉</span><span class="time">05/01 12:00</span></div>
<div class="te">这个工具可以！</div>
<div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
<div class="pltextarea">
<el-input type="textarea" placeholder="请输入您的意见" :rows="2" maxlength="1000" show-word-limit></el-input>
<div class="plbtn"><el-button>取消</el-button><el-divider direction="vertical"></el-divider><el-button>发布</el-button></div>
</div><!--pltextarea-->
</div>
</div><!--list-->
<div class="list">
<div class="luser"><span class="xuser">钱</span></div>
<div class="ltext">
<div class="nt"><span class="name">钱多多</span><span class="time">05/01 12:00</span></div>
<div class="te">好用！</div>
<div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
<div class="list">
<div class="luser"><span class="xuser">赵</span></div>
<div class="ltext">
<div class="nt"><span class="name">赵宇</span><span class="time">05/01 12:00</span></div>
<div class="te">希望再选代一下，还有待完善的地方。</div>
<div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
</div>
</div><!--list-->
<div class="list">
<div class="luser"><span class="xuser">李</span></div>
<div class="ltext">
<div class="nt"><span class="name">李志</span><span class="time">05/01 12:00</span></div>
<div class="te">很好的解决了我的问题，感谢！</div>
<div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
</div>
</div><!--list-->
</div>
</div><!--list-->
<div class="list">
<div class="luser"><span class="xuser">赵</span></div>
<div class="ltext">
<div class="nt"><span class="name">赵宇</span><span class="time">05/01 12:00</span></div>
<div class="te">希望再选代一下，还有待完善的地方。</div>
<div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
</div>
</div><!--list-->
<div class="list">
<div class="luser"><span class="xuser">李</span></div>
<div class="ltext">
<div class="nt"><span class="name">李志</span><span class="time">05/01 12:00</span></div>
<div class="te">很好的解决了我的问题，感谢！</div>
<div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
</div>
</div><!--list-->
</div><!--pllist-->
</div><!--fl 右侧评论-->
</div><!--fbox1 左右分栏-->
<tool-detail ref="toolDetailRef" :toolDetail="toolDetail"/>
</el-drawer><!--el-drawer 详情-抽屉-->
<bl-user-selector ref="peopleSelect" :type="'single'" :isCheck="true" :open="toolPrincipalsChoose" @cancel="toolPrincipalsChoose=false" @submit="submitPeople"></bl-user-selector>
</div><!--app-container-->
</template>
@@ -468,11 +360,12 @@ import { Base64 } from 'js-base64'
import Treeselect from "@riophae/vue-treeselect";
import blUserSelector from "@/components/user-selector/src/user-selector";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import toolDetail from "./toolDetail";
export default {
name: "User",
dicts: ['sys_normal_disable', 'tool_type'],
components: { Treeselect, blUserSelector },
components: { Treeselect, blUserSelector, toolDetail },
data() {
return {
// 遮罩层
@@ -497,12 +390,13 @@ export default {
toolPrincipalsData: [],
tableData2: [],
checkList1: [],
toolDetail: {},
// 是否显示弹出层
open: false,
drawer2: false,
drawer3: false,
drawer4: false,
activeName1: '',
addDrawerOpen: false,
applyDrawerOpen: false,
exoportDrawerOpen: false,
detailDrawerOpen: false,
detailActiveName: 'first',
// 部门名称
deptName: undefined,
// 默认密码
@@ -653,7 +547,7 @@ export default {
},
// 取消按钮
cancel() {
this.open = false;
this.addDrawerOpen = false;
this.reset();
},
// 表单重置
@@ -674,6 +568,22 @@ export default {
};
this.resetForm("form");
},
/**=============================申请使用Start================================*/
applyUse(){
let toolIds = this.ids
if(toolIds.length == 0){
this.$modal.msgWarning("请选择需要申请使用的工具！");
return
}
this.applyDrawerOpen = true
},
submitApply(){
},
cancelApply(){
this.applyDrawerOpen = false
},
/**=============================申请使用End================================*/
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
@@ -693,14 +603,18 @@ export default {
this.single = selection.length != 1;
this.multiple = !selection.length;
},
handleDetail(row){
this.detailDrawerOpen = true
this.toolDetail = row
},
// 更多操作触发
handleCommand(command, row) {
switch (command) {
case "handlePublish":
this.handlePublish(row);
case "handleUpdate":
this.handleUpdate(row);
break;
case "handleAuthRole":
this.handleAuthRole(row);
case "handleDelete":
this.handleDelete(row);
break;
default:
break;
@@ -712,7 +626,7 @@ export default {
getTool().then(response => {
this.postOptions = response.posts;
this.roleOptions = response.roles;
this.open = true;
this.addDrawerOpen = true;
this.title = "添加工具";
this.form.password = this.initPassword;
});
@@ -727,7 +641,7 @@ export default {
this.roleOptions = response.roles;
this.$set(this.form, "postIds", response.postIds);
this.$set(this.form, "roleIds", response.roleIds);
this.open = true;
this.addDrawerOpen = true;
this.title = "修改工具";
this.form.password = "";
});
@@ -742,13 +656,13 @@ export default {
if (this.form.userId != undefined) {
updateTool(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.addDrawerOpen = false;
this.getList();
});
} else {
addTool(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.addDrawerOpen = false;
this.getList();
}).catch((e) => {
if (e.response.data.code === 400001001) {

210
src/views/tool/toolDetail.vue Normal file
View File

@@ -0,0 +1,210 @@
<template>
<div class="fbox1">
<div class="fl">
<el-tabs v-model="detailActiveName">
<el-tab-pane label="基本信息" name="first">
<div class="el-form-border">
<el-form ref="form" label-width="150px">
<el-row>
<el-col :span="12"> <el-form-item label="工具名称">工具名称2</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="工具类别">网络工具</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="工具来源">单位自建</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="负责人">赵宁宇</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="归属单位">人力资源部/员工关系组</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="状态"><span class="green">启用中</span></el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="工具用途">主要用于单位网络使用</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="测评情况">运行良好，可正常使用</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="功能描述">单位网络使用</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="适用条件">网络正常</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="操作说明">正常开启即可用</el-form-item> </el-col>
<el-col :span="12"> <el-form-item label="备注">工具使用完成后，请做好保养工作。</el-form-item> </el-col>
</el-row>
</el-form><!--el-form-->
</div><!--el-form-border 表单-->
</el-tab-pane><!--el-tab-pane-->
<el-tab-pane label="关联文件" name="second">
<div class="operate">
<el-button type="primary" icon="el-icon-upload2" @click="handleAdd">上传</el-button>
<el-button icon="el-icon-delete">删除</el-button>
</div><!--operate 操作按钮-->
<el-table :data="docList" style="width: 100%">
<el-table-column type="selection" width="50" align="center"> </el-table-column>
<el-table-column label="文档名称" prop="docName" :show-overflow-tooltip="true" />
<el-table-column label="类别" prop="docType" :show-overflow-tooltip="true" width="80" />
<el-table-column label="负责人" prop="docPrincipals" :show-overflow-tooltip="true" width="80" />
<el-table-column label="归属部门" prop="docRespDept" :show-overflow-tooltip="true" width="150" />
<el-table-column label="来源" prop="docSource" width="100" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="180">
<template slot-scope="scope" v-if="scope.row.roleId !== 1">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handlePriew(scope.row)"
>预览</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button type="text" icon="el-icon-download">下载</el-button>
</template>
</el-table-column>
</el-table><!--el-table-->
</el-tab-pane><!--el-tab-pane-->
</el-tabs><!--el-tabs-->
</div><!--fl 左侧页签-->
<div class="fr">
<div class="tboper">
<div class="tit">评论</div>
</div><!--tboper 标题与操作按钮-->
<div class="pltextarea">
<el-input type="textarea" placeholder="请输入您的意见" :rows="4" maxlength="1000" show-word-limit></el-input>
<div class="plbtn"><el-button>发布</el-button></div>
</div><!--pltextarea-->
<div class="pllist">
<div class="list">
<div class="luser"><span class="xuser">张</span></div>
<div class="ltext">
<div class="nt"><span class="name">张鑫辉</span><span class="time">05/01 12:00</span></div>
<div class="te">这个工具可以！</div>
<div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
<div class="pltextarea">
<el-input type="textarea" placeholder="请输入您的意见" :rows="2" maxlength="1000" show-word-limit></el-input>
<div class="plbtn"><el-button>取消</el-button><el-divider direction="vertical"></el-divider><el-button>发布</el-button></div>
</div><!--pltextarea-->
</div>
</div><!--list-->
<div class="list">
<div class="luser"><span class="xuser">钱</span></div>
<div class="ltext">
<div class="nt"><span class="name">钱多多</span><span class="time">05/01 12:00</span></div>
<div class="te">好用！</div>
<div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
<div class="list">
<div class="luser"><span class="xuser">赵</span></div>
<div class="ltext">
<div class="nt"><span class="name">赵宇</span><span class="time">05/01 12:00</span></div>
<div class="te">希望再选代一下，还有待完善的地方。</div>
<div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
</div>
</div><!--list-->
<div class="list">
<div class="luser"><span class="xuser">李</span></div>
<div class="ltext">
<div class="nt"><span class="name">李志</span><span class="time">05/01 12:00</span></div>
<div class="te">很好的解决了我的问题，感谢！</div>
<div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
</div>
</div><!--list-->
</div>
</div><!--list-->
<div class="list">
<div class="luser"><span class="xuser">赵</span></div>
<div class="ltext">
<div class="nt"><span class="name">赵宇</span><span class="time">05/01 12:00</span></div>
<div class="te">希望再选代一下，还有待完善的地方。</div>
<div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
</div>
</div><!--list-->
<div class="list">
<div class="luser"><span class="xuser">李</span></div>
<div class="ltext">
<div class="nt"><span class="name">李志</span><span class="time">05/01 12:00</span></div>
<div class="te">很好的解决了我的问题，感谢！</div>
<div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
</div>
</div><!--list-->
</div><!--pllist-->
</div><!--fl 右侧评论-->
<el-dialog :title="title" :visible.sync="open" width="85%" append-to-body>
<edit-document ref="editDocumentRef" :toolId="toolDetail.toolId" @submit="editDocumentSubmit"/>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="$refs.editDocumentRef.submitForm()">确 定</el-button>
<el-button @click="$refs.editDocumentRef.cancel()">取 消</el-button>
</div>
</el-dialog>
</div><!--fbox1 左右分栏-->
</template>
<script>
import { listDocument, getDocument, delDocument, addDocument, updateDocument } from "@/api/document/document";
import editDocument from "../document/editDocument";
import { Base64 } from 'js-base64';
export default {
name: 'toolDetail',
components: { editDocument },
props: {
toolDetail: {
type: Object,
default: {},
}
},
data(){
return{
detailActiveName: 'first',
docList: [],
queryParams: {
pageNum: 1,
pageSize: 10,
toolId: ''
},
previewUrl: '',
viewDialogTitle: "",
viewDialogOpen: false,
title: '新增文档',
open: false,
}
},
created(){
this.getDocList()
},
methods:{
getDocList() {
this.loading = true;
this.queryParams.toolId = this.toolDetail.toolId
listDocument(this.queryParams).then(response => {
this.docList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
handleAdd(){
this.open = true
},
editDocumentSubmit(){
this.open = false
this.getDocList()
},
handlePriew(row){
console.log('mmmmmmmmmmm',process.env.VUE_APP_BASE_API + row.docUrl)
this.previewUrl = process.env.VUE_APP_TOOL_TECH_FILE_VIEW_API + '/onlinePreview?url=' + encodeURIComponent(Base64.encode(process.env.VUE_APP_BASE_API + row.docUrl));
this.viewDialogTitle = '文档在线预览'
this.viewDialogOpen = true;
},
/** 删除按钮操作 */
handleDelete(row) {
const docIds = row.docId || this.ids;
this.$modal.confirm('是否确认删除？').then(function() {
return delDocument(docIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
}
}
</script>
<style scoped>
</style>

109
src/views/workstuff/apply/index.vue
View File

@@ -5,13 +5,16 @@
<el-form label-width="80px">
<div class="search">
<div class="sl">
<el-form-item label="流程标题">
<el-input placeholder="输入流程标题"></el-input>
</el-form-item>
<el-form-item label="流程状态">
<el-select placeholder="请选择">
<el-option label="进行中" value=""></el-option>
<el-option label="已办结" value=""></el-option>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-form-item label="发起时间">
<el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
</div>
@@ -26,15 +29,14 @@
<el-card>
<el-table :data="tableData1" style="width: 100%" height="529">
<el-table-column prop="prop1" label="申请类型"></el-table-column>
<el-table-column prop="prop2" label="流程状态">
<el-table-column prop="prop2" label="流程标题">【使用申请】工具名称11</el-table-column>
<el-table-column prop="prop2" label="流程状态" width="150">
<template slot-scope="scope">
<span :class="getClassName(scope.row.prop2)">{{ scope.row.prop2 }}</span>
<span :class="getClassName(scope.row.prop2)"><a @click="drawer2 = true">{{ scope.row.prop2 }}</a></span>
</template>
</el-table-column>
<el-table-column prop="prop3" label="当前环节" width="180"> </el-table-column>
<el-table-column prop="prop4" label="当前环节处理人" width="150"></el-table-column>
<el-table-column prop="prop5" label="创建时间" width="150"></el-table-column>
<el-table-column prop="prop6" label="结束时间" width="150"></el-table-column>
<el-table-column prop="prop5" label="发起时间"></el-table-column>
<el-table-column prop="prop6" label="结束时间"></el-table-column>
<el-table-column label="操作" width="100" >
<el-button type="text" icon="el-icon-info" @click="drawer1 = true">详情</el-button>
</el-table-column>
@@ -44,11 +46,9 @@
<el-drawer :visible.sync="drawer1" :direction="direction" :before-close="handleClose" size="75%">
<template #title>
<span class="title">申请使用</span>
<span>申请使用</span>
<div class="drawer-head-btn">
<el-button @click="drawer2 = true">流程监控</el-button>
<el-button type="primary">提交</el-button>
<el-button>取消</el-button>
</div><!--drawer-head-btn 抽屉顶部按钮区域-->
</template>
<el-tabs v-model="activeName1" @tab-click="handleClick">
@@ -82,40 +82,15 @@
<el-table-column prop="prop5" label="工具类别" ></el-table-column>
</el-table><!--el-table-->
<div class="divide double"></div><!--divide 分隔-->
<div class="tboper">
<div class="tit">审批信息</div>
</div><!--tboper 标题与操作按钮-->
<div class="el-form-border">
<el-form ref="form" label-width="150px">
<el-row>
<el-col :span="24">
<el-form-item label="审批结论">
<el-radio-group v-model="radio1">
<el-radio label="1">通过</el-radio>
<el-radio label="2" >不通过</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="审批理由">
<el-input type="textarea" rows="4" maxlength="1000" placeholder="请输入" show-word-limit></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form><!--el-form-->
</div><!--el-form-border 表单-->
</el-tab-pane><!--el-tab-pane-->
<el-tab-pane label="审批记录" name="second">
<el-table :data="tableData3" style="width: 100%">
<el-table-column prop="prop1" label="环节"></el-table-column>
<el-table-column prop="prop2" label="意见">
<template slot-scope="scope">
<span :class="getClassName(scope.row.prop2)">{{ scope.row.prop2 }}</span>
</template>
</el-table-column>
<el-table-column prop="prop3" label="操作人" width="200"> </el-table-column>
<el-table-column prop="prop4" label="操作人部门" width="200" ></el-table-column>
<el-table-column prop="prop5" label="操作时间" ></el-table-column>
<el-table-column prop="prop4" label="处理人"></el-table-column>
<el-table-column prop="prop3" label="处理环节"> </el-table-column>
<el-table-column prop="prop2" label="接收人"></el-table-column>
<el-table-column prop="prop1" label="接收环节"></el-table-column>
<el-table-column prop="prop7" label="处理时间" ></el-table-column>
<el-table-column prop="prop5" label="审批意见" ></el-table-column>
</el-table><!--el-table-->
</el-tab-pane><!--el-tab-pane-->
</el-tabs><!--el-tabs-->
@@ -123,27 +98,10 @@
<el-drawer :visible.sync="drawer2" :direction="direction" :before-close="handleClose" size="75%">
<template #title>
<span class="title">流程监控</span>
<span>流程监控</span>
</template>
<div class="lctitle">流程标题：【申请使用】工具名称1 ，流程定义名称：申请使用流程</div><!--lctitle-->
<el-tabs v-model="activeName2" @tab-click="handleClick">
<el-tab-pane label="文本监控" name="first">
<el-table :data="tableData4" style="width: 100%">
<el-table-column prop="prop1" label="接受环节"></el-table-column>
<el-table-column prop="prop2" label="接收人"></el-table-column>
<el-table-column prop="prop3" label="发送环节"> </el-table-column>
<el-table-column prop="prop4" label="发送人"></el-table-column>
<el-table-column prop="prop5" label="审批意见" ></el-table-column>
<el-table-column prop="prop6" label="开始时间" ></el-table-column>
<el-table-column prop="prop7" label="结束时间" ></el-table-column>
<el-table-column prop="prop8" label="持续时间" ></el-table-column>
<el-table-column prop="prop9" label="任务状态" ></el-table-column>
</el-table><!--el-table-->
</el-tab-pane><!--el-tab-pane-->
<el-tab-pane label="图形监控" name="second">
<img style="width:auto; max-width: 100%;" src="images/lcjk1.jpg" />
</el-tab-pane><!--el-tab-pane-->
</el-tabs><!--el-tabs-->
<img style="width:auto; max-width: 100%;" src="../../../../public/images/lcjk1.jpg" />
</el-drawer><!--el-drawer 流程监控-抽屉-->
</div><!--app-container-->
@@ -265,26 +223,27 @@
}
],
tableData3: [
{
prop1: '总监批准',
prop2: '不通过',
prop3: '赵宇 ',
prop4: '总裁办',
prop5: '2024/02/09 12:00',
},
{
prop1: '部门领导审核',
prop2: '通过',
prop3: '钱多多',
prop4: '设备部',
prop5: '2024/02/09 12:00',
prop2: '张宇',
prop3: '管理员审核 ',
prop4: '赵定',
prop5: '同意',
prop6: '2024/02/09 12:00',
prop7: '2024/02/09 12:03',
prop8: '耗时0天',
prop9: '已完成',
},
{
prop1: '管理员审核',
prop2: '通过',
prop3: '孙瑶',
prop4: '人力资源部',
prop5: '2024/02/09 12:00',
prop2: '赵定',
prop3: '直接领导审核 ',
prop4: '钱多多',
prop5: '同意',
prop6: '2024/02/09 12:00',
prop7: '2024/02/09 12:03',
prop8: '耗时0天',
prop9: '已完成',
}
],
tableData4: [

191
src/views/workstuff/dispose/index.vue
View File

@@ -2,10 +2,10 @@
<div class="app-container"><!--从这一层开始嵌入页面-->
<el-card>
<el-form label-width="50px">
<el-form label-width="80px">
<div class="search">
<el-form-item label="关键字">
<el-input placeholder="输入流程标题搜索"></el-input>
<el-form-item label="流程标题">
<el-input placeholder="输入流程标题"></el-input>
</el-form-item>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button icon="el-icon-refresh-left">重置</el-button>
@@ -18,12 +18,15 @@
<el-tab-pane label="待办(4)" name="first">
<el-table :data="tableData5" style="width: 100%" height="529">
<el-table-column prop="prop1" label="流程类型"></el-table-column>
<el-table-column prop="prop2" label="流程标题"><a @click="drawer1 = true">【使用申请】工具名称11</a></el-table-column>
<el-table-column prop="prop2" label="流程标题">【使用申请】工具名称11</el-table-column>
<el-table-column prop="prop3" label="当前环节"></el-table-column>
<el-table-column prop="prop4" label="上一环节"></el-table-column>
<el-table-column prop="prop5" label="上一环节处理人"></el-table-column>
<el-table-column prop="prop6" label="发起人"></el-table-column>
<el-table-column prop="prop7" label="接收时间"></el-table-column>
<el-table-column label="操作" width="100" >
<el-button type="text" icon="el-icon-info" @click="drawer1 = true">详情</el-button>
</el-table-column>
</el-table><!--el-table-->
<el-pagination :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
</el-tab-pane><!--el-tab-pane-->
@@ -31,23 +34,37 @@
<el-table :data="tableData6" style="width: 100%" height="529">
<el-table-column prop="prop1" label="流程类型"></el-table-column>
<el-table-column prop="prop2" label="流程标题"><a>【使用申请】工具名称1</a></el-table-column>
<el-table-column prop="prop3" label="当前环节"></el-table-column>
<el-table-column prop="prop8" label="流程状态">
<template slot-scope="scope">
<span :class="getClassName(scope.row.prop8)">{{ scope.row.prop8 }}</span>
</template>
</el-table-column>
<el-table-column prop="prop3" label="处理环节"></el-table-column>
<el-table-column prop="prop4" label="上一环节"></el-table-column>
<el-table-column prop="prop5" label="上一环节处理人"></el-table-column>
<el-table-column prop="prop6" label="发起人"></el-table-column>
<el-table-column prop="prop7" label="接收时间"></el-table-column>
<el-table-column label="操作" width="100" >
<el-button type="text" icon="el-icon-info" @click="drawer1 = true">详情</el-button>
</el-table-column>
</el-table><!--el-table-->
<el-pagination :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
</el-tab-pane><!--el-tab-pane-->
<el-tab-pane label="办结(10)" name="third">
<el-table :data="tableData7" style="width: 100%" height="529">
<el-table-column prop="prop1" label="流程类型"></el-table-column>
<el-table-column prop="prop2" label="流程标题"><a>【使用申请】工具名称1</a></el-table-column>
<el-table-column prop="prop3" label="当前环节"></el-table-column>
<el-table-column prop="prop4" label="上一环节"></el-table-column>
<el-table-column prop="prop5" label="上一环节处理人"></el-table-column>
<el-table-column prop="prop6" label="发起人"></el-table-column>
<el-table-column prop="prop7" label="接收时间"></el-table-column>
<el-table-column prop="prop2" label="流程标题">【使用申请】工具名称1</el-table-column>
<el-table-column label="流程状态">
<template slot-scope="scope">
<span :class="getClassName(scope.row.prop3)">{{ scope.row.prop3 }}</span>
</template>
</el-table-column>
<el-table-column prop="prop4" label="发起人"></el-table-column>
<el-table-column prop="prop5" label="发起时间"></el-table-column>
<el-table-column prop="prop6" label="接收时间"></el-table-column>
<el-table-column label="操作" width="100" >
<el-button type="text" icon="el-icon-info" @click="drawer1 = true">详情</el-button>
</el-table-column>
</el-table><!--el-table-->
<el-pagination :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
</el-tab-pane><!--el-tab-pane-->
@@ -56,10 +73,10 @@
<el-drawer :visible.sync="drawer1" :direction="direction" :before-close="handleClose" size="75%">
<template #title>
<span class="title">申请使用</span>
<span>申请使用</span>
<div class="drawer-head-btn">
<el-button @click="drawer2 = true">流程监控</el-button>
<el-button type="primary">提交</el-button>
<el-button type="primary" v-if="activeName3 == 'first'">提交</el-button>
<el-button>取消</el-button>
</div><!--drawer-head-btn 抽屉顶部按钮区域-->
</template>
@@ -89,15 +106,15 @@
<el-table :data="tableData2" style="width: 100%">
<el-table-column prop="prop1" label="工具编号"></el-table-column>
<el-table-column prop="prop2" label="工具名称"></el-table-column>
<el-table-column prop="prop3" label="归属单位" width="200"> </el-table-column>
<el-table-column prop="prop4" label="负责人" width="100" ></el-table-column>
<el-table-column prop="prop5" label="工具类别" ></el-table-column>
<el-table-column prop="prop3" label="归属单位"> </el-table-column>
<el-table-column prop="prop4" label="负责人"></el-table-column>
</el-table><!--el-table-->
<div class="divide double"></div><!--divide 分隔-->
<div class="tboper">
<div class="tboper" v-if="activeName3 == 'first'">
<div class="tit">审批信息</div>
</div><!--tboper 标题与操作按钮-->
<div class="el-form-border">
<div class="el-form-border" v-if="activeName3 == 'first'">
<el-form ref="form" label-width="150px">
<el-row>
<el-col :span="24">
@@ -118,16 +135,13 @@
</div><!--el-form-border 表单-->
</el-tab-pane><!--el-tab-pane-->
<el-tab-pane label="审批记录" name="second">
<el-table :data="tableData3" style="width: 100%">
<el-table-column prop="prop1" label="环节"></el-table-column>
<el-table-column prop="prop2" label="意见">
<template slot-scope="scope">
<span :class="getClassName(scope.row.prop2)">{{ scope.row.prop2 }}</span>
</template>
</el-table-column>
<el-table-column prop="prop3" label="操作人" width="200"> </el-table-column>
<el-table-column prop="prop4" label="操作人部门" width="200" ></el-table-column>
<el-table-column prop="prop5" label="操作时间" ></el-table-column>
<el-table :data="tableData4" style="width: 100%">
<el-table-column prop="prop4" label="处理人"></el-table-column>
<el-table-column prop="prop3" label="处理环节"> </el-table-column>
<el-table-column prop="prop2" label="接收人"></el-table-column>
<el-table-column prop="prop1" label="接收环节"></el-table-column>
<el-table-column prop="prop7" label="处理时间" ></el-table-column>
<el-table-column prop="prop5" label="审批意见" ></el-table-column>
</el-table><!--el-table-->
</el-tab-pane><!--el-tab-pane-->
</el-tabs><!--el-tabs-->
@@ -135,27 +149,10 @@
<el-drawer :visible.sync="drawer2" :direction="direction" :before-close="handleClose" size="75%">
<template #title>
<span class="title">流程监控</span>
<span>流程监控</span>
</template>
<div class="lctitle">流程标题：【申请使用】工具名称1 ，流程定义名称：申请使用流程</div><!--lctitle-->
<el-tabs v-model="activeName2" @tab-click="handleClick">
<el-tab-pane label="文本监控" name="first">
<el-table :data="tableData4" style="width: 100%">
<el-table-column prop="prop1" label="接受环节"></el-table-column>
<el-table-column prop="prop2" label="接收人"></el-table-column>
<el-table-column prop="prop3" label="发送环节"> </el-table-column>
<el-table-column prop="prop4" label="发送人"></el-table-column>
<el-table-column prop="prop5" label="审批意见" ></el-table-column>
<el-table-column prop="prop6" label="开始时间" ></el-table-column>
<el-table-column prop="prop7" label="结束时间" ></el-table-column>
<el-table-column prop="prop8" label="持续时间" ></el-table-column>
<el-table-column prop="prop9" label="任务状态" ></el-table-column>
</el-table><!--el-table-->
</el-tab-pane><!--el-tab-pane-->
<el-tab-pane label="图形监控" name="second">
<img style="width:auto; max-width: 100%;" src="images/lcjk1.jpg" />
</el-tab-pane><!--el-tab-pane-->
</el-tabs><!--el-tabs-->
<img style="width:auto; max-width: 100%;" src="../../../../public/images/lcjk1.jpg" />
</el-drawer><!--el-drawer 流程监控-抽屉-->
</div><!--app-container-->
</template>
@@ -170,7 +167,7 @@
activeName1: 'first',
activeName2: 'second',
activeName3: 'first',
radio1: '',
radio1: '1',
tableData1: [
{
prop1: '使用申请',
@@ -360,6 +357,7 @@
tableData6: [
{
prop1: '使用申请',
prop8: '通过',
prop3: '部门经理审核',
prop4: '直接领导审核',
prop5: '张鑫辉',
@@ -368,6 +366,7 @@
},
{
prop1: '使用申请',
prop8: '通过',
prop3: '管理员审核',
prop4: '总监审核',
prop5: '柳青',
@@ -376,6 +375,7 @@
},
{
prop1: '使用申请',
prop8: '通过',
prop3: '总经理审核',
prop4: '直接领导审核',
prop5: '张庆幸',
@@ -384,6 +384,7 @@
},
{
prop1: '使用申请',
prop8: '通过',
prop3: '总监审核',
prop4: '部门经理审核',
prop5: '刘宁',
@@ -392,6 +393,7 @@
},
{
prop1: '使用申请',
prop8: '不通过',
prop3: '部门经理审核',
prop4: '直接领导审核',
prop5: '张鑫辉',
@@ -400,6 +402,7 @@
},
{
prop1: '使用申请',
prop8: '通过',
prop3: '管理员审核',
prop4: '总监审核',
prop5: '柳青',
@@ -408,6 +411,7 @@
},
{
prop1: '使用申请',
prop8: '不通过',
prop3: '总经理审核',
prop4: '直接领导审核',
prop5: '张庆幸',
@@ -416,6 +420,7 @@
},
{
prop1: '使用申请',
prop8: '通过',
prop3: '总监审核',
prop4: '部门经理审核',
prop5: '刘宁',
@@ -424,6 +429,7 @@
},
{
prop1: '使用申请',
prop8: '通过',
prop3: '部门经理审核',
prop4: '直接领导审核',
prop5: '张鑫辉',
@@ -432,6 +438,7 @@
},
{
prop1: '使用申请',
prop8: '通过',
prop3: '管理员审核',
prop4: '总监审核',
prop5: '柳青',
@@ -442,83 +449,73 @@
tableData7: [
{
prop1: '使用申请',
prop3: '部门经理审核',
prop4: '直接领导审核',
prop5: '张鑫辉',
prop6: '张慧玉',
prop7: '2022/10/10 12:00',
prop3: '通过',
prop4: '张鑫辉',
prop5: '2024/02/08 07:00',
prop6: '2024/02/10 12:00',
},
{
prop1: '使用申请',
prop3: '管理员审核',
prop4: '总监审核',
prop5: '柳青',
prop6: '刘青',
prop7: '2022/10/10 12:00',
prop3: '不通过',
prop4: '柳青',
prop5: '2024/02/08 07:00',
prop6: '2024/02/10 12:00',
},
{
prop1: '使用申请',
prop3: '总经理审核',
prop4: '直接领导审核',
prop5: '张庆幸',
prop6: '王慧',
prop7: '2022/10/10 12:00',
prop3: '通过',
prop4: '张庆幸',
prop5: '2024/02/08 07:00',
prop6: '2024/02/10 12:00',
},
{
prop1: '使用申请',
prop3: '总监审核',
prop4: '部门经理审核',
prop5: '刘宁',
prop6: '赵媛',
prop7: '2022/10/10 12:00',
prop3: '通过',
prop4: '刘宁',
prop5: '2024/02/08 07:00',
prop6: '2024/02/10 12:00',
},
{
prop1: '使用申请',
prop3: '部门经理审核',
prop4: '直接领导审核',
prop5: '张鑫辉',
prop6: '张慧玉',
prop7: '2022/10/10 12:00',
prop3: '不通过',
prop4: '张鑫辉',
prop5: '2024/02/08 07:00',
prop6: '2024/02/10 12:00',
},
{
prop1: '使用申请',
prop3: '管理员审核',
prop4: '总监审核',
prop5: '柳青',
prop6: '刘青',
prop7: '2022/10/10 12:00',
prop3: '通过',
prop4: '柳青',
prop5: '2024/02/08 07:00',
prop6: '2024/02/10 12:00',
},
{
prop1: '使用申请',
prop3: '总经理审核',
prop4: '直接领导审核',
prop5: '张庆幸',
prop6: '王慧',
prop7: '2022/10/10 12:00',
prop3: '通过',
prop4: '张庆幸',
prop5: '2024/02/08 07:00',
prop6: '2024/02/10 12:00',
},
{
prop1: '使用申请',
prop3: '总监审核',
prop4: '部门经理审核',
prop5: '刘宁',
prop6: '赵媛',
prop7: '2022/10/10 12:00',
prop3: '通过',
prop4: '刘宁',
prop5: '2024/02/08 07:00',
prop6: '2024/02/10 12:00',
},
{
prop1: '使用申请',
prop3: '部门经理审核',
prop4: '直接领导审核',
prop5: '张鑫辉',
prop6: '张慧玉',
prop7: '2022/10/10 12:00',
prop3: '通过',
prop4: '张鑫辉',
prop5: '2024/02/08 07:00',
prop6: '2024/02/10 12:00',
},
{
prop1: '使用申请',
prop3: '管理员审核',
prop4: '总监审核',
prop5: '柳青',
prop6: '刘青',
prop7: '2022/10/10 12:00',
prop3: '通过',
prop4: '柳青',
prop5: '2024/02/08 07:00',
prop6: '2024/02/10 12:00',
},
],
}

29
src/views/workstuff/message/index.vue
View File

@@ -18,7 +18,11 @@
<el-button type="primary" icon="el-icon-check">全部标记已读</el-button>
</div><!--operate 操作按钮-->
<el-table :data="tableData" style="width: 100%" height="529">
<el-table-column prop="prop1" label="消息内容"></el-table-column>
<el-table-column prop="prop0" label="消息标题">
<template slot-scope="scope">
<el-link type="primary" @click="drawer1 = true">{{ scope.row.prop0 }}</el-link>
</template>
</el-table-column>
<el-table-column prop="prop2" label="接收时间"></el-table-column>
<el-table-column prop="prop3" label="消息状态">
<template slot-scope="scope">
@@ -32,6 +36,15 @@
<el-pagination :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
</el-card><!--el-card-->
<el-dialog :visible.sync="drawer1" :direction="direction" :before-close="handleClose" size="75%">
<template #title>
<span>消息内容</span>
</template>
<div class="lctitle">消息标题：网络资源信息名称1 已过期</div><!--lctitle-->
<div>
</div>
</el-dialog><!--el-drawer 流程监控-抽屉-->
</div><!--app-container-->
</template>
@@ -40,29 +53,35 @@
name: 'message',
data() {
return {
drawer1: false,
tableData: [
{
prop0: '网络资源信息名称1 已过期',
prop1: '网络资源信息名称1 已过期',
prop2: '2024/02/09 12:00',
prop3: '未读',
},
{
prop1: '网络资源信息名称2 已过期',
prop0: '网络资源信息名称2 已过期',
prop1: '网络资源信息名称1 已过期',
prop2: '2024/02/09 12:00',
prop3: '已读',
},
{
prop1: '网络资源信息名称3 已过期',
prop0: '网络资源信息名称3 已过期',
prop1: '网络资源信息名称1 已过期',
prop2: '2024/02/09 12:00',
prop3: '未读',
},
{
prop1: '网络资源信息名称4 已过期',
prop0: '网络资源信息名称4 已过期',
prop1: '网络资源信息名称1 已过期',
prop2: '2024/02/09 12:00',
prop3: '已读',
},
{
prop1: '网络资源信息名称5 已过期',
prop0: '网络资源信息名称5 已过期',
prop1: '网络资源信息名称1 已过期',
prop2: '2024/02/09 12:00',
prop3: '未读',
}