初始化
This commit is contained in:
aixianling
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<section class="approval-manage">
|
||||
<ai-list v-if="showList">
|
||||
<template slot="title">
|
||||
<ai-title title="审批管理" :isShowBottomBorder="false"></ai-title>
|
||||
</template>
|
||||
<template slot="tabs">
|
||||
<el-tabs class="tabs-page" v-model="currIndex">
|
||||
<el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label" :name="String(i)">
|
||||
<component :is="tab.comp" v-if="currIndex==i" :ref="currIndex" :instance="instance" :dict="dict"
|
||||
:permissions="permissions" :listType="tab.value" @goPage="goPage"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
</ai-list>
|
||||
<component v-if="!showList" :is="currentPage" :instance="instance" :listType="currentTab.value" :dict="dict"
|
||||
:permissions="permissions" :detail="detail" @goBack="goBack"></component>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import forMyApproval from "./components/forMyApproval";
|
||||
import approvalDetail from "./components/approvalDetail";
|
||||
|
||||
export default {
|
||||
name: "AppApprovalManage",
|
||||
label: "审批管理",
|
||||
components: {approvalDetail},
|
||||
provide() {
|
||||
return {
|
||||
approval: this
|
||||
}
|
||||
},
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currIndex: '0',
|
||||
showList: true,
|
||||
currentPage: "",
|
||||
detail: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return [
|
||||
{
|
||||
label: "待我审批", name: "forMyApproval", value: "0", comp: forMyApproval, detail: approvalDetail,
|
||||
permission: ""
|
||||
},
|
||||
{
|
||||
label: "我已审批", name: "forMyApproval", value: "1", comp: forMyApproval, detail: approvalDetail,
|
||||
permission: ""
|
||||
},
|
||||
{
|
||||
label: "抄送我的", name: "forMyApproval", value: "3", comp: forMyApproval, detail: approvalDetail,
|
||||
permission: ""
|
||||
},
|
||||
{
|
||||
label: "超时督办", name: "forMyApproval", value: "4", comp: forMyApproval, detail: approvalDetail,
|
||||
permission: ""
|
||||
},
|
||||
]
|
||||
},
|
||||
currentTab() {
|
||||
return this.tabs[this.currIndex] || {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goPage(obj) {
|
||||
this.currentPage = this.tabs[Number(this.currIndex)][obj.key];
|
||||
obj.row && (this.detail = obj.row)
|
||||
this.showList = false;
|
||||
},
|
||||
goBack() {
|
||||
this.showList = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs[this.currIndex][0].getList();
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.approval-manage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F3F6F9;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="for-my-approval">
|
||||
<ai-list isTabs>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #right>
|
||||
<el-input
|
||||
v-model="search.param"
|
||||
size="small"
|
||||
placeholder="标题/发起人"
|
||||
@keyup.enter.native="search.current = 1, getList()"
|
||||
@clear="reset"
|
||||
clearable
|
||||
suffix-icon="iconfont iconSearch"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ul class="list-wrap">
|
||||
<li v-for="(item,index) in tableData" :key="index" @click="goTo('detail',item)">
|
||||
<div class="list-title">{{item.processDefName}}</div>
|
||||
<div class="info">
|
||||
<div class="item">
|
||||
<label>发起人:</label>
|
||||
<span>{{item.createUserName}}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<label>所属部门:</label>
|
||||
<span>{{dict.getLabel('hbDepartment',item.department)}}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<label>所属分类:</label>
|
||||
<span>{{item.classificationName}}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<label>发起时间:</label>
|
||||
<span>{{item.createTime|format}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<svgIcon :class-name="icon(item.approvalStatus)" class="svg"></svgIcon>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="no-data" v-if="tableData.length==0"></div>
|
||||
<el-pagination class="pagination" background :current-page="search.current" @current-change="handleCurrent"
|
||||
layout="total,prev, pager, next,sizes, jumper"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
:page-size="search.size"
|
||||
:page-sizes="[10, 20, 50, 100,200]">
|
||||
</el-pagination>
|
||||
</template>
|
||||
</ai-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import svgIcon from "./svgIcon";
|
||||
import day from 'dayjs'
|
||||
|
||||
export default {
|
||||
name: "forMyApproval",
|
||||
components: {svgIcon},
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
listType: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
param:"",
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
tableData: [],
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
icon(icon) {
|
||||
if(icon==0){
|
||||
return "iconsp_ing"
|
||||
}else if(icon==1){
|
||||
return "iconsp-pass"
|
||||
}else if(icon==2){
|
||||
return "iconsp_refused"
|
||||
}
|
||||
return "iconcancel"
|
||||
},
|
||||
|
||||
goTo(key = '', row) {
|
||||
this.$emit('goPage', {key, row});
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.search.param = ""
|
||||
this.search.current = 1
|
||||
this.search.size = 10
|
||||
this.getList()
|
||||
},
|
||||
|
||||
handleCurrent(val) {
|
||||
this.search.current = val;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
handleSizeChange(val) {
|
||||
this.search.size = val;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.instance.post(`/app/approv-alapply-info/list`,null,{
|
||||
params:{
|
||||
listType: this.listType,
|
||||
...this.search
|
||||
}
|
||||
}).then(res => {
|
||||
if (res && res.data) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
filters:{
|
||||
format(time){
|
||||
return time ? day(time).format('YYYY-MM-DD HH:mm') : '-'
|
||||
}
|
||||
},
|
||||
|
||||
created(){
|
||||
this.dict.load(['hbDepartment']).then(()=>{
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.for-my-approval {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
|
||||
.list-wrap {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #D8E0E8;
|
||||
margin-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 32px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
.list-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
width: 30%;
|
||||
& > label {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
& > span {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.svg {
|
||||
width: 66px;
|
||||
height: 61px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-data {
|
||||
background-size: 120px 120px;
|
||||
height: 160px;
|
||||
margin: 48px auto 10px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
box-sizing: border-box;
|
||||
padding: 24px 0 32px 0;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::v-deep .AiSearchBar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<svg class="icon" aria-hidden="true" v-bind="$attrs">
|
||||
<use :xlink:href="iconName"></use>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "svgIcon",
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconName() {
|
||||
return `#${this.className}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user