增加流程页面包括样式
This commit is contained in:
zhoulingpo
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<el-table
|
||||
:data="standTableList"
|
||||
style="width: 100%;margin-bottom: 30px"
|
||||
max-height="402"
|
||||
v-loading="loading"
|
||||
:header-cell-style="{ color: '#606266', fontSize: '13px',
|
||||
height: '48px'}"
|
||||
@sort-change="sortChange">
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
prop="orgName"
|
||||
align="center"
|
||||
label="审批人所在部门">
|
||||
<template slot-scope="scope">
|
||||
<span >{{ scope.row.orgName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="assignee"
|
||||
align="center"
|
||||
label="审批人员">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.assignee }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="standStateShow"
|
||||
label="审批结果"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.approvalResult == '1' || scope.row.approvalResult == '3' ">
|
||||
同意
|
||||
</span>
|
||||
<span v-else-if="scope.row.approvalResult == '2'">
|
||||
不同意
|
||||
</span>
|
||||
<span v-else></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="approvalOpinion"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
label="审批意见">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
width="160px"
|
||||
align="center"
|
||||
label="开始时间"
|
||||
prop="startTime"
|
||||
sortable="custom">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.startTime ? formatIssueDate(scope.row.startTime) : '' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
width="160px"
|
||||
align="center"
|
||||
label="完成时间"
|
||||
prop="endTime"
|
||||
sortable="custom">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.endTime ? formatIssueDate(scope.row.endTime) : '' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
width="150px"
|
||||
align="center"
|
||||
label="审批处理时长（天）">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.endTime ? scope.row.approvalTime : ''}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column-->
|
||||
<!-- show-overflow-tooltip-->
|
||||
<!-- align="center"-->
|
||||
<!-- prop="approvalFile"-->
|
||||
<!-- width="150px"-->
|
||||
<!-- label="附件">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!--<!– <span>{{ scope.row.approvalFile }}</span>–>-->
|
||||
<!-- <span class="lookFile" @click="lookFile(scope.row.approvalFile)" v-if="scope.row.approvalFile">查看附件</span>-->
|
||||
<!-- <span v-else>-</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
</el-table>
|
||||
<el-dialog
|
||||
width='400px'
|
||||
:visible.sync="importModalshowflagtemp"
|
||||
title="查看附件"
|
||||
@close="defaultFileList = []"
|
||||
>
|
||||
<div class="fileList" v-for="(item,index) in defaultFileList" :key="index">
|
||||
<span class="filename" :title="item.name">{{item.name}}</span>
|
||||
<span class="fileDown" @click="fileDown(item.id)">下载</span>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'approvalHistory',
|
||||
props: ['query'],
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
standTableList: [],
|
||||
importModalshowflagtemp: false,
|
||||
defaultFileList: [],
|
||||
uploadPath: 'api/att/attFile/upload'// 上传文件
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getListByInstance({})
|
||||
},
|
||||
methods: {
|
||||
// 表格排序
|
||||
sortChange (column, prop, order) {
|
||||
const form = {}
|
||||
form.sortWord = column.prop
|
||||
if (column.order === 'ascending') {
|
||||
form.shunxu = 'asc'
|
||||
} else if (column.order === 'descending') {
|
||||
form.shunxu = 'desc'
|
||||
} else {
|
||||
form.shunxu = ''
|
||||
form.sortWord = ''
|
||||
}
|
||||
this.getListByInstance(form)
|
||||
},
|
||||
formatIssueDate (str) {
|
||||
const momentDate = this.$moment(str)
|
||||
if (momentDate.isValid()) {
|
||||
return this.$moment(str).format('YYYY-MM-DD HH:mm:ss')
|
||||
} else {
|
||||
return str
|
||||
}
|
||||
},
|
||||
getListByInstance (form) {
|
||||
this.$http.get('lawss/activiti/get_list_by_instance', {
|
||||
prcNum: this.query.prcNum,
|
||||
...form
|
||||
}, {
|
||||
_this: this,
|
||||
loading: 'loading'
|
||||
}, res => {
|
||||
this.standTableList = res
|
||||
}, e => {
|
||||
})
|
||||
},
|
||||
lookFile (approvalFile) {
|
||||
this.importModalshowflagtemp = true
|
||||
this.clickButtonToUpload(approvalFile)
|
||||
},
|
||||
fileDown (id) {
|
||||
window.location.href = '/api/att/attFile/downloadFile?fileId=' + id
|
||||
// this.$http.get('att/attFile/downloadFile', {
|
||||
// fileId: id
|
||||
// }, {
|
||||
// _this: this
|
||||
// }, res => {
|
||||
//
|
||||
// }, e => {
|
||||
// })
|
||||
},
|
||||
clickButtonToUpload (current) {
|
||||
if (current) {
|
||||
this.$http.get('att/attFile/getMultiFileInfos', {
|
||||
fileIds: current
|
||||
}, {
|
||||
_this: this
|
||||
}, res => {
|
||||
res.data.map(item => {
|
||||
item.name = item.oldFileName
|
||||
})
|
||||
this.defaultFileList = res.data || []
|
||||
}, e => {
|
||||
})
|
||||
} else {
|
||||
this.defaultFileList = []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table-box{
|
||||
width: 100%;
|
||||
.el-table{
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
}
|
||||
.lookFile{
|
||||
color: #0c91e5;
|
||||
}
|
||||
.lookFile:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.fileList{
|
||||
width: 100%;
|
||||
line-height: 2;
|
||||
}
|
||||
.filename{
|
||||
width: 90%;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.fileDown{
|
||||
color: #0c91e5;
|
||||
position: absolute;
|
||||
}
|
||||
.fileDown:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file .el-upload{
|
||||
display: none!important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user