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

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>