电子---文件中心
<template>
<div class="projectBox project_list">
<!-- 项目列表 -->
<basic-container class="projectManange">
<!-- 头部导航 -->
<div class="filecenter-header">
<div class="add-btn">
<el-button
size="small"
type="primary"
@click="addFile"
>+添加</el-button>
</div>
<ul class="nav-list">
<li
v-for="(item,index) in navList"
:key="index"
:class="index == activeNum ? 'active_nav' : '' "
@click="changeNav(index,item.value)">{{item.label}}</li>
</ul>
<div class="search">
<el-input v-model="keywork" size="small" class="_input" placeholder="文件名称/编号/申请人"></el-input>
<div class="icon" @click="searchEvent">
<i class="el-icon-search"></i>
</div>
</div>
</div>
<!-- 表格 -->
<div class="file-table">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
label="文件名称"
show-overflow-tooltip>
<template slot-scope="scope">
<div class="file_name" :class="scope.row.State != 0 ? 'op_file' : ''" @click="checkFile(scope.row)">{{scope.row.FileName}}</div>
</template>
</el-table-column>
<!-- <el-table-column
prop="FileCode"
label="编号"
width="220">
</el-table-column> -->
<el-table-column
prop="CreateName"
label="申请人">
</el-table-column>
<el-table-column
prop="CreateDate"
label="时间">
</el-table-column>
<el-table-column
label="状态">
<template slot-scope="scope">
<span>{{ fileState(scope.row.State) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<!-- 未发起-发起签署 -->
<div v-if="scope.row.State == 0">
<el-button
size="mini"
type="text"
style="color:#5953A4"
@click="initiateSigning(scope.row)"
>发起签署</el-button>
</div>
<!-- 已发起-签署、撤回-->
<div v-else-if="scope.row.State == 1">
<el-button
size="mini"
type="text"
style="color:#5953A4"
@click="signing(scope.row)"
>签署</el-button>
<el-button
size="mini"
type="text"
style="color:#909399"
@click="signRecall(scope.row)"
>撤回</el-button>
</div>
<!-- 其他-下载 -->
<div v-else-if="scope.row.State == 4"></div>
<div v-else @click="downloadFile(scope.row)">
<i class="el-icon-download"></i>
</div>
</template>
</el-table-column>
</el-table>
<div class="fenye-page">
<el-pagination
background
layout="total, sizes, prev, pager, next"
:page-size.sync="page.pageSize"
:page-sizes=[10,20,50]
@size-change="changeSize"
@current-change="changeCurrent"
:total="page.total">
</el-pagination>
</div>
</div>
</basic-container>
<!-- 发起签署弹窗 -->
<el-dialog
:visible.sync="dialogCheck"
width="100%"
class="sign-dialog"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
ref="iframePage"
fullscreen>
<iframe :src="fileUrl" frameborder="0" :height="iframeH" class="dialog-iframe"></iframe>
<span slot="footer" class="iframe-footer">
<div class="l-btn">
<el-button type="primary" @click="closeDialog">关 闭</el-button>
</div>
</span>
</el-dialog>
<el-dialog
:visible.sync="dialogSigning"
width="100%"
class="sign-dialog"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
ref="iframeDia"
fullscreen>
<iframe :src="signUrl" frameborder="0" :height="iframeH" class="dialog-iframe"></iframe>
<div slot="footer" class="iframe-footer clearfix">
<div class="l-btn">
<el-button type="primary" @click="confirmSign">已签署</el-button>
</div>
<div class="r-btn">
<el-button @click="closeDialog">关 闭</el-button>
</div>
</div>
</el-dialog>
<!-- -->
<!-- 用印申请 -->
<FileAudi :dialogAudiVisible.sync="dialogAudiVisible" @close="closePrintAudiDialog()"></FileAudi>
</div>
</template>
<script>
import * as Api from "@/api/signature/index";
import { encryptionObject } from "@/util/util";
import FileAudi from "../wel/FileAudi";
export default {
name:'filecente',
components:{
FileAudi
},
data(){
return{
// tab切换的状态和label
activeNum:'',
navList:[
{
label: "全部文件",
value: ''
},
{
label: "未发起",
value: 0
},
{
label: "待签署",
value: 1
},
{
label: "已签署",
value: 2
},
{
label: "已撤回",
value: 4
},
{
label: "已作废",
value: 3
},
],
searchInput:'',//搜索
// 表格分页
page: {
total: 0,
pageSize: 20,
currentPage: 1
},
stateVal:'',
keywork: "",
// 表格数据
tableData:[],
// 签署，未签署弹窗
dialogSigning:false,//签署弹框
dialogCheck:false,//查看，下载弹框
fileUrl:'',//查看，下载iframe的url
signUrl:'',//签署iframe的url
iframeH:0,//iframe的高度
rowObj:{},//点击每一行的数据对象
dialogAudiVisible:false,//用印申请
}
},
created(){
this.getFileData('');
},
computed:{
},
methods:{
// 切换
changeNav(index,value){
this.activeNum = index;
this.stateVal = value;
this.getFileData(value);
},
// 调用接口获取表格数据的方法
getFileData(val){
const pageData = {
pageNo: this.page.currentPage - 1,
pageSize: this.page.pageSize,
Keywork: this.keywork,
State:val
};
const dataObj = encryptionObject({
data: pageData,
type: "Base64",
key: "avue"
});
const param = {
param: dataObj
};
Api.SignList(param).then((res )=> {
if(res.data.Code == 200){
this.tableData = res.data.Data.Items;
this.page.total = res.data.Data.Count;
}else{
this.$alert(res.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
}).catch((error)=>{
if(error.data.Code == 400){
this.$alert(error.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
});
},
searchEvent(){
this.page.currentPage = 1;
this.getFileData(this.stateVal);
},
// 匹配状态
fileState(state){
switch(state){
case 0:
return "未发起";
case 1:
return "待签署";
case 2:
return "已签约";
case 3:
return "已作废";
case 4:
return "已撤回";
default:
return "";
}
},
// 发起签署
initiateSigning(row){
this.rowObj = row;
const param = {
fileUrl:row.FileUrl,
SignUid:row.Uid
};
Api.ContractDraft(param).then(({data})=> {
if(data.Code == 200){
let resData = JSON.parse(data.Data);
this.signUrl = resData.result.pageUrl;
this.dialogSigning = true;
this.$nextTick(()=>{
this.iframeH = this.$refs.iframeDia.$el.offsetHeight - 70;
})
}else{
this.$alert(data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
}).catch((error)=>{
if(error.data.Code == 400){
this.$alert(error.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
});
},
// 签署
signing(row){
this.rowObj = row;
const param = {
contractId:row.ContractId
};
Api.Signing(param).then((res )=> {
if(res.data.Code == 200){
let resData = JSON.parse(res.data.Data);
this.signUrl = resData.result.pageUrl;
this.dialogSigning = true
this.$nextTick(()=>{
this.iframeH = this.$refs.iframeDia.$el.offsetHeight - 70;
})
}else{
this.$alert(res.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
}).catch((error)=>{
if(error.data.Code == 400){
this.$alert(error.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
});
},
// 撤回
signRecall(row){
const param = {
SignUid:row.Uid
};
Api.Revoke(param).then((res )=> {
if(res.data.Code == 200){
this.$message.success('撤回成功');
this.getFileData(this.stateVal);
}else{
this.$alert(res.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
}).catch((error)=>{
if(error.data.Code == 400){
this.$alert(error.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
});
},
// 查看文件
checkFile(row){
if(row.State == 0){
return;
}
const param = {
contractId:row.ContractId
};
Api.ViewUrl(param).then((res )=> {
if(res.data.Code == 200){
let resData = JSON.parse(res.data.Data);
this.fileUrl = resData.result.pageUrl;
this.dialogCheck = true;
this.$nextTick(()=>{
this.iframeH = this.$refs.iframePage.$el.offsetHeight - 70;
})
}else{
this.$alert(res.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
}).catch((error)=>{
if(error.data.Code == 400){
this.$alert(error.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
});
},
// 签署完成回调
confirmSign(){
const param = {
SignUid:this.rowObj.Uid
};
Api.SignUpdate(param).then((res )=> {
if(res.data.Code == 200){
this.getFileData(this.stateVal);
this.dialogSigning = false;
}else{
this.$alert(res.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
}).catch((error)=>{
if(error.data.Code == 400){
this.$alert(error.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
});
},
// 下载
downloadFile(row){
const param = {
contractId:row.ContractId
};
Api.Signing(param).then((res )=> {
if(res.data.Code == 200){
let resData = JSON.parse(res.data.Data);
this.fileUrl = resData.result.pageUrl;
this.dialogCheck = true;
this.$nextTick(()=>{
this.iframeH = this.$refs.iframePage.$el.offsetHeight - 70;
})
}else{
this.$alert(res.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
}).catch((error)=>{
if(error.data.Code == 400){
this.$alert(error.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
});
},
// 分页改变size
changeSize(value){
this.page.currentPage = 1;
this.page.pageSize = value;
this.getFileData(this.stateVal);
},
// 分页改变页数
changeCurrent(value){
this.page.currentPage = value;
this.getFileData(this.stateVal);
},
// 关闭iframe弹框
closeDialog(){
this.getFileData(this.stateVal);
this.dialogSigning = false;
this.dialogCheck = false;
},
// 添加
addFile(){
this.dialogAudiVisible = true;
},
// 关闭用印申请
closePrintAudiDialog() {
this.dialogAudiVisible = false;
},
}
}
</script>>
<style lang="scss">
.filecenter-header{
height: 32px;
.add-btn{
float: left;
}
.nav-list{
float: left;
margin: 0 0 0 28px;
padding: 0;
li{
line-height: 32px;
margin-right: 28px;
list-style: none;
font-size: 14px;
float: left;
cursor: pointer;
}
.active_nav{
color: #453E9A;
font-weight:bold;
}
}
.search{
float: right;
position: relative;
._input{
width: 260px;
}
.icon{
color: #CCCCCC;
font-size: 16px;
height: 32px;
width: 32px;
line-height: 30px;
text-align: center;
position: absolute;
top:0;
right: 0;
cursor: pointer;
}
}
}
// 表格
.file-table{
margin-top: 30px;
.op_file{
color: #409EFF;
cursor: pointer;
}
.file_name{
max-width: 220px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.el-icon-download{
font-size: 18px;
color: #453E9A;
cursor: pointer;
}
.fenye-page{
margin-top: 30px;
text-align: center;
}
}
.sign-dialog{
.el-dialog{
.el-dialog__body{
padding: 0;
.dialog-iframe{
// min-height: 660px;
width: 100%;
}
}
.el-dialog__header{
padding: 0;
}
.el-dialog__footer{
// padding-bottom: 10px;
padding: 0 !important;
margin: 0;
text-align: center;
.iframe-footer{
margin-top: 12px;
width: 100%;
.l-btn{
width: 1000px;
display: inline-block;
text-align: center;
}
.r-btn{
display: inline-block;
}
.el-button{
margin: 0 16px;
}
}
}
}
}
</style>
