5 changed files with 529 additions and 55 deletions
-
38src/assets/styles/mixin.scss
-
38src/components/Crud/RR.operation.vue
-
62src/views/system/user/center.vue
-
324src/views/system/user/processCenter/index.vue
-
122src/views/system/user/processCenter/module/detail.vue
@ -0,0 +1,324 @@ |
|||||
|
<template> |
||||
|
<div class="process-center"> |
||||
|
<ul class="process-left"> |
||||
|
<li class="active-li">全部流程</li> |
||||
|
<li>归档审批流程</li> |
||||
|
<li>归档退回流程</li> |
||||
|
<li>赋权审批流程</li> |
||||
|
<li>内部移交流程</li> |
||||
|
<li>外部移交流程</li> |
||||
|
<li>外部接受流程</li> |
||||
|
<li>开放鉴定流程</li> |
||||
|
<li>销毁鉴定流程</li> |
||||
|
</ul> |
||||
|
<div class="process-right"> |
||||
|
<div class="head-container" style="display: flex; justify-content: space-between;"> |
||||
|
<div> |
||||
|
<el-input v-model="query.keyword" clearable size="small" placeholder="输入关键字搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 225px;" /> |
||||
|
<date-range-picker v-model="query.createTime" class="date-item" /> |
||||
|
<el-button icon="el-icon-search" size="mini" @click="getTableData">搜索</el-button> |
||||
|
</div> |
||||
|
<el-select v-model="value" placeholder="请选择" style="width: 97px;"> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
v-loading="isLoading" |
||||
|
:data="tableData" |
||||
|
:row-class-name="cell" |
||||
|
@row-click="clickRowHandler" |
||||
|
@selection-change="selectionChangeHandler" |
||||
|
> |
||||
|
<el-table-column type="isHandle" label="处理" width="100" align="center"> |
||||
|
<!-- slot-scope="scope" --> |
||||
|
<template> |
||||
|
<span class="deal-state" @click="dealWithCont">处理</span> |
||||
|
<!-- <span class="deal-off">处理</span> --> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="create_time" label="创建时间" align="center" min-width="180"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.create_time | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="pushUserName" label="创建人" align="center" min-width="100" /> |
||||
|
<el-table-column prop="noticeContent" :show-overflow-tooltip="true" label="所属流程" min-width="200" /> |
||||
|
<el-table-column prop="nodes" label="当前节点" align="center" min-width="150" /> |
||||
|
<el-table-column prop="operable" label="可操作者" align="center" min-width="150" /> |
||||
|
<el-table-column prop="approver" label="审批者" align="center" min-width="150" /> |
||||
|
<el-table-column prop="states" label="状态" align="center" min-width="150" /> |
||||
|
<el-table-column prop="end_time" label="完成时间" align="center" min-width="180"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.end_time | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<el-pagination |
||||
|
:page-size.sync="page.size" |
||||
|
:total="page.total" |
||||
|
:current-page.sync="page.page" |
||||
|
style="margin-top: 8px;" |
||||
|
layout="total, prev, pager, next, sizes" |
||||
|
@size-change="sizeChangeHandler($event)" |
||||
|
@current-change="pageChangeHandler" |
||||
|
/> |
||||
|
</div> |
||||
|
<detail ref="detail" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import DateRangePicker from '@/components/DateRangePicker' |
||||
|
import { getUserNotice, isread } from '@/api/system/logs' |
||||
|
import CRUD, { presenter, header, crud } from '@crud/crud' |
||||
|
import detail from './module/detail.vue' |
||||
|
export default { |
||||
|
name: 'MessageCenter', |
||||
|
inject: ['reload'], |
||||
|
components: { DateRangePicker, detail }, |
||||
|
mixins: [presenter(), crud(), header()], |
||||
|
cruds() { |
||||
|
return CRUD({ |
||||
|
url: 'api/users/notice', |
||||
|
sort: ['createTime,desc'], |
||||
|
optShow: {} |
||||
|
}) |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
tableData: [], |
||||
|
selections: [], |
||||
|
query: { |
||||
|
createTime: [], |
||||
|
keyword: null |
||||
|
}, |
||||
|
page: { |
||||
|
total: 0, |
||||
|
size: 10, |
||||
|
page: 1 |
||||
|
}, |
||||
|
isLoading: false, |
||||
|
options: [{ |
||||
|
value: '选项1', |
||||
|
label: '待处理' |
||||
|
}, { |
||||
|
value: '选项2', |
||||
|
label: '已处理' |
||||
|
}, { |
||||
|
value: '选项3', |
||||
|
label: '全部' |
||||
|
}], |
||||
|
value: '' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getTableData() |
||||
|
}, |
||||
|
methods: { |
||||
|
dealWithCont() { |
||||
|
this.$refs.detail.detailVisible = true |
||||
|
}, |
||||
|
getTableData() { |
||||
|
this.isLoading = true |
||||
|
getUserNotice(this.getParams()).then(res => { |
||||
|
this.page.total = res.totalElements |
||||
|
const table = res.content |
||||
|
table.forEach(item => { |
||||
|
item.pushUserName = item.noticeUsers[0].pushUserName |
||||
|
item.isRead = item.noticeUsers[0].isRead |
||||
|
}) |
||||
|
this.tableData = table |
||||
|
this.isLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
getParams() { |
||||
|
const params = { |
||||
|
page: this.page.page - 1, |
||||
|
size: this.page.size, |
||||
|
createTime: this.query.createTime, |
||||
|
sort: 'createTime,desc' |
||||
|
} |
||||
|
return params |
||||
|
}, |
||||
|
getUserMsgId(list) { |
||||
|
const ids = [] |
||||
|
list.forEach(item => { |
||||
|
item.noticeUsers.forEach(i => { |
||||
|
ids.push(i.id) |
||||
|
}) |
||||
|
}) |
||||
|
return ids |
||||
|
}, |
||||
|
// 标记已读 |
||||
|
handleRead() { |
||||
|
isread(this.getUserMsgId(this.selections)).then(res => { |
||||
|
if (res) { |
||||
|
// this.getTableData() |
||||
|
this.reload() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 全部标记已读 |
||||
|
async handleAllRead() { |
||||
|
const params = { |
||||
|
page: 0, |
||||
|
size: 10, |
||||
|
// createTime: [], |
||||
|
sort: 'createTime,desc' |
||||
|
} |
||||
|
const list = [] |
||||
|
const allList = await this.getAllNoRead(params, list) |
||||
|
isread(this.getUserMsgId(allList)).then(res => { |
||||
|
if (res) { |
||||
|
this.reload() |
||||
|
// this.getTableData() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 递归获取所有列表 |
||||
|
async getAllNoRead(params, list) { |
||||
|
const allList = await getUserNotice(params).then(res => { |
||||
|
list = list.concat(res.content) |
||||
|
if ((list.length) < res.totalElements) { |
||||
|
params.page++ |
||||
|
return this.getAllNoRead(params, list) |
||||
|
} else { |
||||
|
return list |
||||
|
} |
||||
|
}) |
||||
|
return allList |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
// this.$refs.table.clearSelection() |
||||
|
this.$refs.table.toggleRowSelection(row) // 单选选中 |
||||
|
}, |
||||
|
selectionChangeHandler(val) { |
||||
|
this.selections = val |
||||
|
}, |
||||
|
cell({ row }) { |
||||
|
if (row.isRead) { // 已读 |
||||
|
return 'read-color' |
||||
|
} |
||||
|
}, |
||||
|
// 每页条数改变 |
||||
|
sizeChangeHandler(e) { |
||||
|
this.loading = true |
||||
|
this.page.size = e |
||||
|
this.page.page = 1 |
||||
|
this.getTableData() |
||||
|
this.loading = false |
||||
|
}, |
||||
|
// 当前页改变 |
||||
|
pageChangeHandler(e) { |
||||
|
this.loading = true |
||||
|
this.page.page = e |
||||
|
this.getTableData() |
||||
|
this.loading = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/mixin.scss"; |
||||
|
|
||||
|
@mixin process-left-style{ |
||||
|
[data-theme="dark"] & { |
||||
|
box-shadow: 5px 2px 10px 1px rgba(15,164,222,.16); |
||||
|
color: #339cff; |
||||
|
li{ |
||||
|
&.active-li, |
||||
|
&:hover{ |
||||
|
color: #fff; |
||||
|
&::before{ |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
[data-theme="light"] & { |
||||
|
color: #0C0E1E; |
||||
|
box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.04); |
||||
|
li{ |
||||
|
&.active-li, |
||||
|
&:hover{ |
||||
|
color: #0348F3; |
||||
|
&::before{ |
||||
|
background-color: #0348F3; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[data-theme=dark] .process-center { |
||||
|
height: calc(100vh - 202px); |
||||
|
margin-top: -30px; |
||||
|
.process-right{ |
||||
|
padding-right: 20px; |
||||
|
width: calc(100vw - 944px); |
||||
|
} |
||||
|
} |
||||
|
[data-theme=light] .process-center { |
||||
|
height: calc(100vh - 193px); |
||||
|
.process-right{ |
||||
|
width: calc(100vw - 964px); |
||||
|
} |
||||
|
} |
||||
|
.process-center{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
.process-left{ |
||||
|
width: 240px; |
||||
|
padding: 26px 0; |
||||
|
@include process-left-style; |
||||
|
li{ |
||||
|
height: 28px; |
||||
|
line-height: 28px; |
||||
|
padding-left: 40px; |
||||
|
margin-bottom: 20px; |
||||
|
cursor: pointer; |
||||
|
&.active-li, |
||||
|
&:hover{ |
||||
|
position: relative; |
||||
|
&::before{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
content: ""; |
||||
|
width: 3px; |
||||
|
height: 28px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.head-container{ |
||||
|
margin: 20px 0 !important; |
||||
|
} |
||||
|
} |
||||
|
.deal-state, |
||||
|
.deal-off{ |
||||
|
display: block; |
||||
|
width: 50px; |
||||
|
height: 24px; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
.deal-state{ |
||||
|
color: #0348F3; |
||||
|
border: 1px solid #0348F3; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.deal-off{ |
||||
|
opacity: 0.4; |
||||
|
color: #0348F3; |
||||
|
border: 1px solid #0348F3; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,122 @@ |
|||||
|
<template> |
||||
|
<el-dialog class="detail-dialog" :visible.sync="detailVisible" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body title="流程处理"> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="detail-tab tab-content"> |
||||
|
<ul class="tab-nav"> |
||||
|
<li :class="{'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">流程表单</li> |
||||
|
<li :class="{'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">流程图</li> |
||||
|
<li :class="{'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">业务详情</li> |
||||
|
</ul> |
||||
|
<!-- <component :is="comName" class="component-cont" /> --> |
||||
|
</div> |
||||
|
<div v-if="activeIndex == 0"> |
||||
|
<div class="detail-info"> |
||||
|
<p><span>流程名称：</span>01-归档审批流程</p> |
||||
|
<p><span>启动时间：</span>2016-09-21 08:50:08</p> |
||||
|
<p><span>实例ID：</span>9af7f46a-ea52- 4aa3-b8c3-9fd484c2af12</p> |
||||
|
<p><span>发起人：</span>admin</p> |
||||
|
</div> |
||||
|
<div class="opinion"> |
||||
|
<h5>归档审批</h5> |
||||
|
<div> |
||||
|
<span>审批意见</span> |
||||
|
<el-input v-model="opinionTxt" type="textarea" :rows="4" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="detailVisible=false">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import processImg from './processImg/index.vue' |
||||
|
// import businessDetails from './businessDetails/index.vue' |
||||
|
// import taskList from './taskList/index.vue' |
||||
|
// import approvalList from './approvalList/index.vue' |
||||
|
export default { |
||||
|
name: 'Detail', |
||||
|
components: { |
||||
|
// processImg, |
||||
|
// businessDetails, |
||||
|
// taskList, |
||||
|
// approvalList |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
detailVisible: false, |
||||
|
activeIndex: 0, |
||||
|
opinionTxt: null |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
// comName: function() { |
||||
|
// if (this.activeIndex === 0) { |
||||
|
// return 'processImg' |
||||
|
// } else if (this.activeIndex === 1) { |
||||
|
// return 'businessDetails' |
||||
|
// } else if (this.activeIndex === 2) { |
||||
|
// return 'taskList' |
||||
|
// } |
||||
|
// return 'processImg' |
||||
|
// } |
||||
|
}, |
||||
|
methods: { |
||||
|
changeActiveTab(data) { |
||||
|
this.activeIndex = data |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.detail-dialog{ |
||||
|
.detail-info, |
||||
|
.detail-list{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex-wrap: wrap; |
||||
|
padding: 10px 18px; |
||||
|
font-size: 14px; |
||||
|
line-height: 30px; |
||||
|
color: #545B65; |
||||
|
background-color: #F6F8FC; |
||||
|
p{ |
||||
|
width: 50%; |
||||
|
span{ |
||||
|
display: inline-block; |
||||
|
width: 75px; |
||||
|
text-align: right; |
||||
|
color: #0C0E1E; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.service-detail{ |
||||
|
padding: 8px 12px; |
||||
|
background-color: #F6F8FC; |
||||
|
font-size: 14px; |
||||
|
h4{ |
||||
|
position: relative; |
||||
|
padding-left: 10px; |
||||
|
color: #0C0E1E; |
||||
|
&::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 50%; |
||||
|
width: 3px; |
||||
|
height: 14px; |
||||
|
background-color: #0348F3; |
||||
|
transform: translateY(-50%); |
||||
|
} |
||||
|
} |
||||
|
.detail-list{ |
||||
|
p{ |
||||
|
width: 33%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue