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

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>