<template>
|
<div>
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item>
|
<el-button type="primary" @click="queryTask" icon="el-icon-search" size="small">刷新</el-button>
|
</el-form-item>
|
<el-form-item>
|
<template slot-scope="scope">
|
<el-button type="primary" v-if="buttonList.work_upcoming_assign.show" @click="showApproveBatchDialog" icon="el-icon-circle-plus" size="small">批量审批</el-button>
|
</template>
|
</el-form-item>
|
</el-form>
|
<el-table :data="taskList" v-if="taskList" class="show_table" ref="upcomingTaskTable" @selection-change="handleSelectionChange"
|
highlight-current-row v-loading="listLoading" :style="conheight" :height="conheight.height" style="width: 100%">
|
<el-table-column type="expand">
|
<template slot-scope="props">
|
<el-form label-position="left" inline class="demo-table-expand">
|
<el-form-item label="产品名称">
|
<span>{{ props.row.assignFileStream.productName }}</span>
|
</el-form-item>
|
<el-form-item label="部件名称">
|
<span>{{ props.row.assignFileStream.componentName }}</span>
|
</el-form-item>
|
<el-form-item v-if="props.row.assignFileStream.partsName && props.row.assignFileStream.partsName != ``" label="零件名称">
|
<span>{{ props.row.assignFileStream.partsName }}</span>
|
</el-form-item>
|
<el-form-item label="文档名称">
|
<span>{{ props.row.assignFileStream.docName}}</span>
|
</el-form-item>
|
<el-form-item label="设备名称">
|
<span>{{ props.row.assignFileStream.deviceName}}</span>
|
</el-form-item>
|
<el-form-item label="文档版本" >
|
<span>{{props.row.assignFileStream.version }}</span>
|
</el-form-item>
|
<el-form-item label="申请人">
|
<span>{{ props.row.assignFileStream.applyUser}}</span>
|
</el-form-item>
|
<el-form-item label="申请原因">
|
<span>{{ props.row.assignFileStream.applyReason}}</span>
|
</el-form-item>
|
<el-form-item label="申请时间">
|
<span>{{ props.row.assignFileStream.applyTime}}</span>
|
</el-form-item>
|
</el-form>
|
</template>
|
</el-table-column>
|
<el-table-column type="selection" width="55" align="center">
|
</el-table-column>
|
<el-table-column type="index" label="序号" align="center">
|
</el-table-column>
|
<el-table-column prop="assignFileStream.docName" label="文档名称" class-name="left">
|
</el-table-column>
|
<el-table-column prop="assignFileStream.deviceName" label="设备名称" class-name="left">
|
</el-table-column>
|
<el-table-column prop="assignFileStream.version" label="文档版本" align="center">
|
</el-table-column>
|
<el-table-column prop="assignFileStream.secretLevel" label="密级" align="center">
|
</el-table-column>
|
<el-table-column label="操作" align="center">
|
<template slot-scope="scope">
|
<el-button v-if="buttonList.work_upcoming_edit.show" size="mini" icon="el-icon-edit" @click="showApproveDialog(scope.$index, scope.row)">审批</el-button>
|
<el-button v-if="buttonList.work_upcoming_edit.show" size="mini" icon="el-icon-edit" @click="showPreviewDialog(scope.$index, scope.row)">预览</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-dialog :visible.sync="approveVisible" :close-on-click-modal="false" title="审批" @close="closeDialog" width="480px">
|
<el-form :model="approveData" :rules="approveRules" ref="approveForm" label-width="80px">
|
<el-form-item label="文档名称" >
|
<el-input v-model.trim="currentRow.assignFileStream.docName" readonly></el-input>
|
</el-form-item>
|
<el-form-item label="文档版本" >
|
<el-input v-model.trim="currentRow.assignFileStream.version" readonly></el-input>
|
</el-form-item>
|
<el-form-item label="申请人">
|
<el-input v-model.trim="currentRow.assignFileStream.applyUser" readonly></el-input>
|
</el-form-item>
|
<el-form-item label="申请原因">
|
<el-input type="textarea" rows="3" resize="none" v-model.trim="currentRow.assignFileStream.applyReason" readonly></el-input>
|
</el-form-item>
|
<el-form-item label="密级为">
|
<el-select v-model="currentRow.assignFileStream.secretLevel" placeholder="请选择" style="width: 100%">
|
<el-option
|
v-for="item in secretLevelOps"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="审批意见" prop="approveContent">
|
<el-input placeholder="请输入审批意见" type="textarea" maxlength="50" rows="3" resize="none" v-model.trim="approveData.approveContent"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-checkbox v-model="checked">同意导入工控网</el-checkbox>
|
<el-button @click.native="approveCommit(2)" :loading="buttonLoading" type="success" class="btn-custom" :disabled="!checked">
|
<span>批准</span>
|
</el-button>
|
<el-button @click.native="approveCommit(3)" :loading="buttonLoading" type="primary" class="btn-custom" :disabled="checked">
|
<span>驳回</span>
|
</el-button>
|
<el-button @click="closeDialog" class="btn-custom">
|
<span>取 消</span>
|
</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog :visible.sync="batchApproveVisible" :close-on-click-modal="false" title="批量审批" @close="closeBatchDialog" width="720px">
|
<el-table class="show_table" :data="batchApproveList" ref="approveBatchTable" highlight-current-row style="width: 100%;margin-bottom: 10px;">
|
<el-table-column type="expand">
|
<template slot-scope="props">
|
<el-form label-position="left" inline class="demo-table-expand">
|
<el-form-item label="产品名称">
|
<span>{{ props.row.assignFileStream.productName }}</span>
|
</el-form-item>
|
<el-form-item label="部件名称">
|
<span>{{ props.row.assignFileStream.componentName }}</span>
|
</el-form-item>
|
<el-form-item v-if="props.row.assignFileStream.partsName && props.row.assignFileStream.partsName != ``" label="零件名称">
|
<span>{{ props.row.assignFileStream.partsName }}</span>
|
</el-form-item>
|
<el-form-item label="文档名称">
|
<span>{{ props.row.assignFileStream.docName}}</span>
|
</el-form-item>
|
<el-form-item label="设备名称">
|
<span>{{ props.row.assignFileStream.deviceName}}</span>
|
</el-form-item>
|
<el-form-item label="文档版本" >
|
<span>{{props.row.assignFileStream.version }}</span>
|
</el-form-item>
|
<el-form-item label="申请人">
|
<span>{{ props.row.assignFileStream.applyUser}}</span>
|
</el-form-item>
|
<el-form-item label="申请原因">
|
<span>{{ props.row.assignFileStream.applyReason}}</span>
|
</el-form-item>
|
<el-form-item label="申请时间">
|
<span>{{ props.row.assignFileStream.applyTime}}</span>
|
</el-form-item>
|
</el-form>
|
</template>
|
</el-table-column>
|
<el-table-column type="index">
|
</el-table-column>
|
<el-table-column prop="assignFileStream.docName" label="文档名称" class-name="left">
|
</el-table-column>
|
<el-table-column prop="assignFileStream.deviceName" label="设备名称" class-name="left">
|
</el-table-column>
|
<el-table-column prop="assignFileStream.version" label="文档版本">
|
</el-table-column>
|
<el-table-column prop="assignFileStream.secretLevel" label="密级">
|
</el-table-column>
|
</el-table>
|
<el-form :model="approveBatchData" :rules="approveRules" ref="approveBatchForm" label-width="80px">
|
<el-form-item label="审批意见" prop="approveContent">
|
<el-input placeholder="请输入审批意见" type="textarea" maxlength="50" rows="3" resize="none" v-model.trim="approveBatchData.approveContent"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-checkbox v-model="checked">同意导入工控网</el-checkbox>
|
<el-button @click.native="approveBatchCommit(2)" :loading="buttonLoading" type="success" class="btn-custom" :disabled="!checked">
|
<span>批准</span>
|
</el-button>
|
<el-button @click.native="approveBatchCommit(3)" :loading="buttonLoading" type="primary" class="btn-custom" :disabled="checked">
|
<span>驳回</span>
|
</el-button>
|
<el-button @click="closeBatchDialog" class="btn-custom">
|
<span>取 消</span>
|
</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog :visible.sync="previewVisible" :close-on-click-modal="false" title="文档预览" @close="closeDialog" width="80%" >
|
<el-row :style="dialogStyle">
|
<div v-if="docSuffix ==='pdf'" class="pdf" style="width: 100%;height: 100%">
|
<iframe :src="pdfUrl" frameborder="0" style="width: 100%;height: 99%"></iframe>
|
</div>
|
<div v-else style="height: 98%; width: 100%">
|
<textarea id = "fileInfo" style="width:99%; height: 100%; margin: auto" readonly></textarea>
|
</div>
|
</el-row>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import * as workUpcomingApi from '../api/upcoming'
|
import * as SystemApi from '../../../base/api/system'
|
export default {
|
name: "work_upcoming",
|
data(){
|
return {
|
docSuffix:'',
|
pdfUrl:'',
|
conheight:{
|
height:'',
|
overflow: 'auto'
|
},
|
dialogStyle:{
|
height:'',
|
overflow: 'auto'
|
},
|
secretLevelOps: [{
|
value: '公开',
|
label: '公开'
|
}, {
|
value: '内部',
|
label: '内部'
|
}],
|
checked: true,
|
taskList:[],
|
buttonList:{
|
work_upcoming_edit:{show:false, code:'work_upcoming_edit'},
|
work_upcoming_assign:{show:false, code:'work_upcoming_assign'}
|
},
|
defaultApproveData:{},
|
approveData:{
|
approveContent:'',
|
status:0
|
},
|
approveRules:{
|
approveContent:[
|
{required: true, message: '请输入审批意见', trigger: 'blur'}
|
]
|
},
|
defaultApproveBatchData:{},
|
approveBatchData:{
|
approveContent:'',
|
status:0,
|
taskArr:[]
|
},
|
buttonLoading:false,
|
listLoading:false,
|
approveVisible:false,
|
batchApproveVisible:false,
|
previewVisible:false,
|
batchApproveList:[],
|
currentRow:{
|
assignFileStream:{}
|
}
|
}
|
},
|
methods:{
|
queryTask() {
|
this.listLoading = true;
|
workUpcomingApi.task_list().then((res) => {
|
this.listLoading = false;
|
if(res.success&& res.list && res.list.length > 0) {
|
this.taskList = res.list;
|
}else {
|
this.taskList=[];
|
}
|
}).catch((error) => {
|
this.listLoading = false;
|
this.taskList=[];
|
this.$message({
|
type:'error',
|
message:'网络异常！'
|
})
|
});
|
},
|
showApproveBatchDialog(){
|
this.batchApproveVisible = true;
|
},
|
showApproveDialog(index,row) {
|
this.approveVisible = true;
|
this.currentRow = row;
|
},
|
showPreviewDialog(index,row) {
|
this.previewVisible = true;
|
this.currentRow = row;
|
this.docSuffix = this.currentRow.assignFileStream.docSuffix;
|
this.previewFileInfo();
|
},
|
closeDialog() {
|
this.previewVisible = false;
|
this.approveVisible = false;
|
this.approveData = JSON.parse(JSON.stringify(this.defaultApproveData));
|
this.currentRow = {assignFileStream:{}};
|
},
|
closeBatchDialog() {
|
this.batchApproveVisible = false;
|
this.approveBatchData = JSON.parse(JSON.stringify(this.defaultApproveBatchData));
|
},
|
approveCommit(param) {
|
this.approveData.status = param;
|
if(this.currentRow && (param == 2 || param == 3)) {
|
this.$refs.approveForm.validate((valid) => {
|
if (valid) {
|
this.$confirm('确认提交吗？', '提示', {}).then(() => {
|
this.buttonLoading = true;
|
workUpcomingApi.approve_task(this.currentRow.id, this.currentRow.businessKey, this.approveData).then((res) => {
|
if (res.success) {
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
this.closeDialog();
|
this.queryTask();
|
} else if (res.message) {
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type:'error'
|
});
|
}
|
});
|
});
|
}
|
});
|
}
|
},
|
approveBatchCommit(param) {
|
console.log(this.approveBatchData);
|
|
this.approveBatchData.status = param;
|
if(this.batchApproveList && this.batchApproveList.length > 0 && (param == 2 || param == 3)) {
|
this.$refs.approveBatchForm.validate((valid) => {
|
if (valid) {
|
this.$confirm('确认提交吗？', '提示', {}).then(() => {
|
this.buttonLoading = true;
|
workUpcomingApi.approve_batch_task(this.approveBatchData).then((res) => {
|
if (res.success) {
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
this.closeBatchDialog();
|
this.queryTask();
|
} else if (res.message) {
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type:'error'
|
});
|
}
|
});
|
});
|
}
|
}).catch((err) => {
|
this.$message({
|
message: '服务异常！',
|
type:'error'
|
});
|
});
|
}else{
|
this.$message({
|
message: '审批信息错误！',
|
type:'error'
|
});
|
}
|
},
|
previewFileInfo(){
|
let docSuffix = this.currentRow.assignFileStream.docSuffix;
|
let fileId = this.currentRow.assignFileStream.fileId;
|
if (docSuffix === 'pdf') {
|
this.getPdfFileInfo(fileId);
|
}else {
|
this.getFileInfo(fileId);
|
}
|
},
|
getFileInfo(fileId){
|
workUpcomingApi.file_preview(fileId).then((res) =>{
|
document.getElementById('fileInfo').innerHTML = '';
|
if (res.success && res.list) {
|
let str = '';
|
res.list.forEach((val,k) =>{
|
str += val;
|
if (k != res.list.length - 1) {
|
str += '\n';
|
}
|
});
|
document.getElementById('fileInfo').innerHTML = str;
|
}else{
|
this.$message({
|
message: res.message,
|
type: 'error'
|
});
|
}
|
})
|
},
|
getPdfFileInfo(fileId){
|
workUpcomingApi.file_preview_pdf(fileId).then((res) =>{
|
let url = window.URL.createObjectURL(new Blob([res],{type:"application/zip"}));
|
this.pdfUrl = './static/pdf/web/viewer.html?file='+encodeURIComponent(url);
|
})
|
},
|
getHeight(){
|
this.conheight.height=window.innerHeight-160+'px';
|
this.dialogStyle.height = window.innerHeight *0.65 + 'px';
|
},
|
getButtonList(){
|
let params = {flag:1,param:this.$route.path};
|
SystemApi.button_list(params).then((res)=>{
|
if (res.success && res.list.length>0){
|
res.list.forEach((v,k)=>{
|
if(this.buttonList[v] && this.buttonList[v].code == v) {
|
this.buttonList[v].show = true
|
}
|
});
|
}
|
})
|
},
|
handleSelectionChange(val) {
|
this.batchApproveList = val;
|
this.approveBatchData.taskArr = [];
|
if(val && val.length > 0) {
|
val.forEach((v,k) => {
|
this.approveBatchData.taskArr.push({"id": v.id, "businessKey": v.businessKey});
|
});
|
|
}else {
|
this.approveBatchData = JSON.parse(JSON.stringify(this.defaultApproveBatchData));
|
}
|
}
|
},
|
created() {
|
this.defaultApproveBatchData = JSON.parse(JSON.stringify(this.approveBatchData));
|
this.defaultApproveData = JSON.parse(JSON.stringify(this.approveData));
|
window.addEventListener('resize', this.getHeight);
|
this.getHeight()
|
},
|
mounted() {
|
this.getButtonList();
|
this.queryTask();
|
}
|
}
|
</script>
|
|
<style>
|
.demo-table-expand {
|
font-size: 0;
|
}
|
.demo-table-expand label {
|
width: 90px;
|
color: #99a9bf;
|
}
|
.el-table__expanded-cell .el-form-item{
|
width: 50%;
|
}
|
|
.demo-table-expand .el-form-item {
|
margin-right: 0;
|
margin-bottom: 0;
|
width: 50%;
|
}
|
/* .transfer-footer {
|
margin-left: 20px;
|
padding: 6px 5px;
|
} */
|
</style>
|
