141 lines
5.9 KiB
Vue
141 lines
5.9 KiB
Vue
<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 左侧页签-->
|
||
<!-- 上传 -->
|
||
<AddDoc :show.sync="open" :toolId="toolDetail.toolId" @callback="getDocList"/>
|
||
</div><!--fbox1 左右分栏-->
|
||
</template>
|
||
|
||
<script>
|
||
import { listDocument, getDocument, delDocument, addDocument, updateDocument } from "@/api/document/document";
|
||
import AddDoc from './AddDoc'
|
||
import editDocument from "../document/editDocument";
|
||
import { Base64 } from 'js-base64';
|
||
export default {
|
||
name: 'toolDetail',
|
||
components: { editDocument, AddDoc },
|
||
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){
|
||
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>
|