148 lines
4.4 KiB
Vue
148 lines
4.4 KiB
Vue
<template>
|
|
<div class="flow-list-by-category quality-table ">
|
|
<div class="nav">
|
|
<div class="nav-item" :style="'width:' + navWidth" :class="it.dictValue == selItem.dictValue ? 'active' : ''"
|
|
v-for="(it, idx) in categories" :key="idx" @click="doQuery(it)">{{ it.dictLabel }}</div>
|
|
</div>
|
|
|
|
<el-table :data="tableData" class="mytable" style="background: transparent;"
|
|
ref="fbsubordinateUnit">
|
|
<el-table-column prop="businessKeyName" label="申请项目" class-name="text-left">
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="startUserName" label="当前状态" width="100">
|
|
<template slot-scope="{row}">
|
|
<span v-if="row.finishTime" style="color: greenyellow;">已完成</span>
|
|
<span v-else style="color: red;">进行中</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="申请时间" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="申请附件" width="100">
|
|
<template slot-scope="{row}">
|
|
<span slot="reference" style="cursor: pointer; color: #01a9ff" @click="loadRowFils(row)">查看</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination layout="total,prev, pager, next" :hide-on-single-page="true" @current-change="handleCurrentChange"
|
|
:total="total" :page-size="size" :current-page.sync="index" class="bg-pagination"></el-pagination>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'JhbigscreenFlowListByCategory',
|
|
props: {
|
|
getPData: {
|
|
type: Function,
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
index: 1,
|
|
size: 10,
|
|
total: 0,
|
|
categories: [],
|
|
selItem: {},
|
|
tableData: [],
|
|
navWidth: '',
|
|
};
|
|
},
|
|
created() {
|
|
this.$api.dict('sys_process_category').then(d => {
|
|
this.categories = d || [];
|
|
if (this.categories.length > 0) {
|
|
this.doQuery(this.categories[0])
|
|
}
|
|
this.navWidth = (98.0 / this.categories.length).toFixed(2) + "%";
|
|
});
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
|
|
methods: {
|
|
loadRowFils(it){
|
|
this.$api.flow.findFormDatasByProcInsId(it.procInsId).then(d => {
|
|
if(d.data && d.data.files){
|
|
//多个文件批量下载
|
|
d.data.files.split(",").forEach(item => {
|
|
this.$api.downFile("/jhapi" + item, {}, item.substring(item.lastIndexOf("/")+1));
|
|
});
|
|
}
|
|
})
|
|
},
|
|
handleCurrentChange(n) {
|
|
this.index = n;
|
|
this.loadData();
|
|
},
|
|
doNav(n) {
|
|
this.nav = n;
|
|
this.index = 1;
|
|
this.loadData();
|
|
},
|
|
doQuery(it) {
|
|
this.selItem = it;
|
|
this.index = 1;
|
|
this.loadData();
|
|
},
|
|
loadData() {
|
|
let obj = this.getPData ? this.getPData() || {} : {}
|
|
this.$api.flow.listByCategory(obj.projectId, obj.deptId, this.selItem.dictValue, this.index, this.size).then(d => {
|
|
this.tableData = d.rows || [];
|
|
this.total = d.total;
|
|
})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.flow-list-by-category {
|
|
padding:0px;
|
|
height:calc(~"100% - 40px");
|
|
.bg-pagination{
|
|
margin-top:10px;
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
|
|
.nav-item {
|
|
text-align: center;
|
|
flex-grow: 1;
|
|
padding: 4px 4px;
|
|
cursor: pointer;
|
|
background: #142c6a;
|
|
color: #738fb4;
|
|
|
|
&.active {
|
|
color: #01a9ff
|
|
}
|
|
}
|
|
}
|
|
.mytable{
|
|
height:calc(~"100% - 100px");
|
|
margin:12px 12px;
|
|
width:calc(~"100% - 24px");
|
|
border:solid 1px #142c6a;
|
|
/deep/ th .cell{
|
|
color: aquamarine;
|
|
}
|
|
}
|
|
/deep/ .mytable {
|
|
|
|
.el-table__body-wrapper::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
// 滚动条的滑块
|
|
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
background-color: rgb(1, 169, 255);
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
}</style> |