Browse Source

流程管理

master
xuhuajiao 10 months ago
parent
commit
66e6db2cd7
  1. 2
      src/api/collect/collect.js
  2. 39
      src/views/archiveUtilize/utillizeRecord/recordList.vue
  3. 6
      src/views/system/archivesCategory/processManage/index.vue
  4. 2
      src/views/system/archivesCategory/processManage/module/form.vue
  5. 24
      src/views/system/processManage/runningProcess/module/detail.vue
  6. 28
      src/views/system/user/center.vue
  7. 2
      src/views/system/user/messageCenter/module/list.vue
  8. 213
      src/views/system/user/processCenter/index.vue
  9. 137
      src/views/system/user/processCenter/module/detail.vue
  10. 179
      src/views/system/user/processCenter/module/form.vue

2
src/api/collect/collect.js

@ -232,7 +232,7 @@ export function FetchFourCheck(data) {
})
}
// 归档
// 归档确定
export function FetchBecomeDocumentConfirm(data) {
return request({
url: 'api/collect/becomeDocumentConfirm',

39
src/views/archiveUtilize/utillizeRecord/recordList.vue

@ -1,8 +1,9 @@
<template>
<div class="recordList-main">
<div :class="{'recordList-main': !isUserCenter, 'user-record': isUserCenter}">
<div class="head-container">
<div class="head-search">
<el-input
v-if="!isUserCenter"
v-model="typeValue"
size="small"
clearable
@ -23,6 +24,13 @@
</el-select>
</el-input>
<date-range-picker v-model="blurryTime" class="date-item" />
<el-select v-if="isUserCenter" v-model="status" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery">
<i slot="prefix" class="iconfont icon-zhuangtai" />
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-if="isUserCenter" v-model="isEntity" clearable size="small" class="filter-item" style="width: 100px" @change="crud.toQuery">
<el-option v-for="item in isEntityOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
<el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button>
</div>
@ -46,7 +54,7 @@
<div>{{ scope.row.giveEndTime | parseTime }}</div>
</template>
</el-table-column>
<el-table-column prop="nickName" label="利用人" align="center" width="120" />
<el-table-column v-if="!isUserCenter" prop="nickName" label="利用人" align="center" width="120" />
<el-table-column prop="borrowReason" label="利用事由" />
<el-table-column prop="isEntityBorrow" label="包含实体借阅" align="center" width="110">
<template slot-scope="scope">
@ -164,6 +172,10 @@ export default {
activeIndex: {
type: Number,
default: 0
},
isUserCenter: {
type: Boolean,
default: false
}
},
data() {
@ -195,6 +207,19 @@ export default {
value: 4,
label: '实体借阅'
}
],
statusOptions: [
{ value: 1, label: '利用中' },
{ value: 2, label: '即将到期' },
{ value: 3, label: '逾期' },
{ value: 4, label: '已完成' }
],
status: null,
isEntity: 1,
isEntityOptions: [
{ value: 1, label: '全部' },
{ value: 2, label: '包含实体' },
{ value: 3, label: '不包含实体' }
]
}
},
@ -259,6 +284,8 @@ export default {
this.crud.query.startTime = null
this.crud.query.endTime = null
}
this.crud.query.status = this.status
this.crud.query.isEntity = this.isEntity
},
resetQuery() {
this.clearInputValue()
@ -266,6 +293,10 @@ export default {
this.blurryTime = []
this.crud.query.startTime = null
this.crud.query.endTime = null
this.status = null
this.isEntity = 1
// this.crud.query.status = null
// this.crud.query.isEntity = 1
this.crud.toQuery()
},
getBusinessFlowDetails(row) {
@ -338,6 +369,10 @@ export default {
text-align: center;
}
}
.user-record{
padding: 0 0 0 20px;
height: calc(100vh - 320px);
}
.title-style{
span{
display: inline-block;

6
src/views/system/archivesCategory/processManage/index.vue

@ -5,7 +5,6 @@
<p>{{ item.flowName }}<i class="iconfont icon-shezhi" @click="toProcessSelected(item)" /></p>
<el-switch v-model="item.status" class="isEnable-chapter" @change="changeCategoryState(item)" />
</div>
<eForm ref="cuform" :selected-category="selectedCategory" :edit-info-flow="editInfoFlow" @refresh="getInitCategoryFlowBase" />
</div>
</template>
@ -60,7 +59,8 @@ export default {
})
},
getInitFlowByCategoryId() {
FetchInitFlowByCategoryId({ 'categoryId': this.selectedCategory.id }).then((res) => {
console.log(this.selectedCategory)
FetchInitFlowByCategoryId({ 'categoryId': this.selectedCategory.pid !== '0' ? this.selectedCategory.id : null }).then((res) => {
this.flowSetting = res
this.flowBaseList.forEach(item => {
this.flowSetting.forEach(v => {
@ -76,7 +76,7 @@ export default {
},
toProcessSelected(item) {
const params = {
'categoryId': this.selectedCategory.id,
'categoryId': this.selectedCategory.pid !== '0' ? this.selectedCategory.id : null,
'manageId': item.id
}
FetchgetCategoryFlow(params).then((res) => {

2
src/views/system/archivesCategory/processManage/module/form.vue

@ -206,7 +206,7 @@ export default {
return json
})
const params = {
'categoryId': this.selectedCategory.id,
'categoryId': this.selectedCategory.pid !== '0' ? this.selectedCategory.id : null,
'detailsDTOs': detailsDTOs,
'flowId': this.selectFlowVal.modelId,
'flowName': this.selectFlowVal.deployName,

24
src/views/system/processManage/runningProcess/module/detail.vue

@ -2,10 +2,18 @@
<el-dialog class="detail-dialog" :visible.sync="detailVisible" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="流程详情">
<div class="setting-dialog">
<ul class="detail-info">
<li><span>流程名称</span>{{ selectRow.flowableName }}</li>
<li><span>流程结果</span><p :class="['row-state', !isHistroy?'ing-state':(selectRow.endTime?'end-state':'cancel-state')]">{{ !isHistroy ? '进行中' : ( selectRow.endTime ? '已完成' : '已取消') }}</p></li>
<li><span>所属全宗</span>全宗A</li>
<li v-if="selectRow.endTime"><span>结束时间</span>{{ selectRow.endTime | parseTime }}</li>
<li><span>流程名称</span>{{ selectRow.flowableName || selectRow.title }}</li>
<li v-if="!isCenterProcess"><span>流程结果</span><p :class="['row-state', !isHistroy?'ing-state':(selectRow.endTime?'end-state':'cancel-state')]">{{ !isHistroy ? '进行中' : ( selectRow.endTime ? '已完成' : '已取消') }}</p></li>
<li v-if="isCenterProcess">
<span>流程结果</span>
<p v-if="selectRow.status === 1" class="row-state ing-state">运行中</p>
<p v-if="selectRow.status === 2" class="row-state case-cancel">已取消</p>
<p v-if="selectRow.status === 3" class="row-state end-state">已完成</p>
<p v-if="selectRow.status === 4" class="row-state cancel-state">不通过</p>
</li>
<!-- 等门类树更改之后再显示 -->
<!-- <li><span>所属全宗</span>全宗A</li> -->
<li v-if="selectRow.endTime || selectRow.complete_time"><span>结束时间</span>{{ (selectRow.endTime || selectRow.complete_time) | parseTime }}</li>
<li v-else><span>结束时间</span>-</li>
</ul>
<!-- 归档 / 退档 -->
@ -78,6 +86,10 @@ export default {
isHistroy: {
type: Boolean,
default: false
},
isCenterProcess: {
type: Boolean,
default: false
}
},
data() {
@ -113,7 +125,7 @@ export default {
},
getProcessImg() {
this.srcImg = ''
FetchGenProcessDiagram({ 'processId': this.selectRow.procinstId }).then((res) => {
FetchGenProcessDiagram({ 'processId': this.selectRow.procInstId }).then((res) => {
this.srcImg = res
}).catch(err => {
console.log(err)
@ -121,7 +133,7 @@ export default {
},
getTaskByProcinstId() {
this.taskTableList = []
FetchTaskByProcinstId({ 'procinstId': this.selectRow.procinstId }).then((res) => {
FetchTaskByProcinstId({ 'procinstId': this.selectRow.procInstId }).then((res) => {
this.taskTableList = res
}).catch(err => {
console.log(err)

28
src/views/system/user/center.vue

@ -40,7 +40,8 @@
<li :class="{'active-tab-nav': activeIndex == 0}" @click="handleClick(0)">用户资料<i /></li>
<li :class="{'active-tab-nav': activeIndex == 1}" @click="handleClick(1)">消息中心<i /></li>
<li :class="{'active-tab-nav': activeIndex == 2}" @click="handleClick(2)">流程中心<i /></li>
<li :class="{'active-tab-nav': activeIndex == 3}" @click="handleClick(3)">操作日志<i /></li>
<li :class="{'active-tab-nav': activeIndex == 3}" @click="handleClick(3)">我的利用<i /></li>
<li :class="{'active-tab-nav': activeIndex == 4}" @click="handleClick(4)">操作日志<i /></li>
<!-- 最右侧装饰img -->
<span class="tab-right-img" />
</ul>
@ -74,8 +75,10 @@
</div>
<!-- 流程中心 -->
<processCenter v-if="activeIndex == 2" />
<!-- 利用中心 -->
<utillizeList v-if="activeIndex == 3" :is-user-center="true" />
<!-- 操作日志 -->
<div v-if="activeIndex == 3" class="tab-item" style="padding-left: 20px;">
<div v-if="activeIndex == 4" class="tab-item" style="padding-left: 20px;">
<OperateLog :is-center="isCenter" />
</div>
</div>
@ -97,12 +100,13 @@ import { isvalidPhone } from '@/utils/validate'
// import crud from '@/mixins/crud'
import { editUser } from '@/api/system/user'
import Avatar from '@/assets/images/avatar.png'
import messageCenter from './messageCenter/index.vue'
import processCenter from './processCenter/index.vue'
import messageCenter from './messageCenter/index'
import processCenter from './processCenter/index'
import utillizeList from '@/views/archiveUtilize/utillizeRecord/recordList'
import OperateLog from '@/views/system/log/operateLog/index'
export default {
name: 'Center',
components: { updatePass, updateEmail, myUpload, messageCenter, processCenter, OperateLog },
components: { updatePass, updateEmail, myUpload, messageCenter, processCenter, utillizeList, OperateLog },
// mixins: [crud],
data() {
//
@ -171,14 +175,14 @@ export default {
},
handleClick(index) {
this.activeIndex = index
if (this.activeIndex === 2) {
this.init()
}
// if (this.activeIndex === 2) {
// this.init()
// }
},
beforeInit() {
this.url = 'api/logs/user'
return true
},
// beforeInit() {
// this.url = 'api/logs/user'
// return true
// },
cropUploadSuccess(jsonData, field) {
store.dispatch('GetInfo').then(() => {})
},

2
src/views/system/user/messageCenter/module/list.vue

@ -37,7 +37,7 @@
</template>
<script>
import detail from '../../processCenter/module/detail.vue'
import detail from '../../processCenter/module/form'
export default {
name: 'MessageList',
components: { detail },

213
src/views/system/user/processCenter/index.vue

@ -7,80 +7,94 @@
<li :class="{'active-li': listIndex == 3}" @click="handleClick(3)">赋权审批流程</li>
<li :class="{'active-li': listIndex == 4}" @click="handleClick(4)">内部移交流程</li>
<li :class="{'active-li': listIndex == 5}" @click="handleClick(5)">外部移交流程</li>
<li :class="{'active-li': listIndex == 6}" @click="handleClick(6)">外部接受流程</li>
<li :class="{'active-li': listIndex == 7}" @click="handleClick(7)">开放鉴定流程</li>
<li :class="{'active-li': listIndex == 8}" @click="handleClick(8)">销毁鉴定流程</li>
<li :class="{'active-li': listIndex == 6}" @click="handleClick(6)">开放鉴定流程</li>
<li :class="{'active-li': listIndex == 7}" @click="handleClick(7)">销毁鉴定流程</li>
</ul>
<div class="process-right">
<div class="head-container" style="display: flex; justify-content: space-between;">
<div>
<el-input v-model="title" clearable size="small" placeholder="输入关键字搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 225px;" @keyup.enter.native="crud.toQuery" />
<el-input v-model="title" clearable size="small" placeholder="输入关键字搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 225px;" @clear="crud.toQuery" @keyup.enter.native="crud.toQuery" />
<date-range-picker v-model="blurryTime" class="date-item" />
<el-button icon="el-icon-search" size="mini" class="user-search-btn" @click="crud.toQuery">搜索</el-button>
</div>
<el-select v-model="status" placeholder="请选择" style="width: 97px;" @change="crud.toQuery">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<div>
<el-select v-model="type" placeholder="请选择" style="width: 97px;" @change="crud.toQuery">
<el-option
v-for="item in dealOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select v-model="status" placeholder="请选择" style="width: 97px;" @change="crud.toQuery">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<el-table
ref="table"
v-loading="crud.loading"
:data="crud.data"
:row-class-name="cell"
height="500px"
@row-click="clickRowHandler"
@cell-dblclick="tableDoubleClick"
@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> -->
<el-table-column type="isHandle" label="处理" width="70" align="center">
<template slot-scope="scope">
<span v-if="type===1 && scope.row.status === 1" class="deal-state" @click="dealWithCont(scope.row)">处理</span>
<span v-else class="deal-off">处理</span>
</template>
</el-table-column>
<el-table-column prop="create_time" label="创建时间" align="center" min-width="180">
<el-table-column prop="createTime" label="创建时间" align="center" min-width="160">
<template slot-scope="scope">
<div>{{ scope.row.create_time | parseTime }}</div>
<div>{{ scope.row.createTime | 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">
<el-table-column prop="createBy" label="创建人" align="center" min-width="80" />
<el-table-column prop="title" :show-overflow-tooltip="true" label="所属流程" min-width="200" />
<el-table-column prop="currentNode" :show-overflow-tooltip="true" label="当前节点" align="center" min-width="120" />
<el-table-column prop="operator" :show-overflow-tooltip="true" label="可操作者" align="center" min-width="180" />
<!-- <el-table-column prop="approver" label="审批者" align="center" min-width="150" /> -->
<!-- 1.运行中 2.取消 3.完成 4.审核不通过 -->
<el-table-column prop="status" label="状态" align="center" min-width="80">
<template slot-scope="scope">
<div>{{ scope.row.end_time | parseTime }}</div>
<div v-if="scope.row.status === 1" class="row-state ing-state">运行中</div>
<div v-if="scope.row.status === 2" class="row-state case-cancel">已取消</div>
<div v-if="scope.row.status === 3" class="row-state end-state">已完成</div>
<div v-if="scope.row.status === 4" class="row-state cancel-state">不通过</div>
</template>
</el-table-column>
<el-table-column prop="complete_time" label="完成时间" align="center" min-width="160">
<template slot-scope="scope">
<div v-if="scope.row.complete_time">{{ scope.row.complete_time | parseTime }}</div>
<div v-else>-</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"
/>
<pagination />
</div>
<detail ref="detail" />
<eForm ref="eForm" />
<detial ref="processDetail" :is-center-process="true" />
</div>
</template>
<script>
import DateRangePicker from '@/components/DateRangePicker'
import CRUD, { presenter, header, crud } from '@crud/crud'
import detail from './module/detail.vue'
import pagination from '@crud/Pagination'
import eForm from './module/form.vue'
import detial from '@/views/system/processManage/runningProcess/module/detail'
export default {
name: 'ProcessCenter',
components: { DateRangePicker, detail },
components: { DateRangePicker, pagination, eForm, detial },
mixins: [presenter(), crud(), header()],
cruds() {
return CRUD({
@ -91,36 +105,44 @@ export default {
},
data() {
return {
tableData: [],
selections: [],
blurryTime: null,
title: null,
page: {
total: 0,
size: 10,
page: 1
},
isLoading: false,
dealOptions: [{
value: 1,
label: '我收到'
}, {
value: 2,
label: '我发起'
}],
options: [{
value: '选项1',
value: 1,
label: '待处理'
}, {
value: '选项2',
label: '已处理'
value: 2,
label: '已取消'
}, {
value: 3,
label: '已完成'
}, {
value: '选项3',
value: 4,
label: '未通过'
}, {
value: null,
label: '全部'
}],
status: '',
listIndex: 0
type: 1,
status: null,
listIndex: 0,
businessType: null
}
},
created() {
this.getTableData()
},
methods: {
[CRUD.HOOK.beforeRefresh]() {
this.crud.query.title = this.title
this.crud.query.type = this.type
this.crud.query.status = this.status
if (this.blurryTime) {
this.crud.query.startTime = this.blurryTime[0]
@ -132,32 +154,45 @@ export default {
},
handleClick(index) {
this.listIndex = index
},
dealWithCont() {
this.$refs.detail.detailVisible = true
},
getTableData() {
this.isLoading = true
// 1. index=1 2.退 index=2 3. index=6 4.index=7 5.index=3 6.index=4 7.index=5
switch (index) {
case 0:
this.businessType = null
break
case 1:
this.businessType = 1
break
case 2:
this.businessType = 2
break
case 3:
this.businessType = 5
break
case 4:
this.businessType = 6
break
case 5:
this.businessType = 7
break
case 6:
this.businessType = 3
break
case 7:
this.businessType = 4
break
}
this.crud.query.businessType = this.businessType
this.crud.toQuery()
// 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
dealWithCont(row) {
this.$refs.eForm.formVisible = true
this.$refs.eForm.selectRow = row
},
// table -
tableDoubleClick(row) {
this.$refs.processDetail.detailVisible = true
this.$refs.processDetail.selectRow = row
this.$refs.processDetail.activeIndex = 0
},
clickRowHandler(row) {
// this.$refs.table.clearSelection()
@ -165,26 +200,6 @@ export default {
},
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
}
}
}
@ -199,6 +214,7 @@ export default {
border-radius: 3px;
}
.deal-state{
margin: 0 auto;
color: #0348F3;
border: 1px solid #0348F3;
cursor: pointer;
@ -207,6 +223,7 @@ export default {
opacity: 0.4;
color: #0348F3;
border: 1px solid #0348F3;
cursor: not-allowed;
}
.el-pagination{
margin: 20px 0 10px 0 !important

137
src/views/system/user/processCenter/module/detail.vue

@ -1,137 +0,0 @@
<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>
</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 class="opinion-form">
<span>审批意见</span>
<el-input v-model="opinionTxt" placeholder="请输入" type="textarea" :rows="10" />
</div>
</div>
</div>
<div v-if="activeIndex == 1" class="detail-img">
<img src="~@/assets/images/system/process-img.png" alt="">
</div>
<div v-if="activeIndex == 2">
<div class="detail-list">
<p><span>业务类型</span>归档审批</p>
<p><span>原始位置</span>全宗A-整理库-门类A</p>
<p><span>目标位置</span>全宗A-整理库-门类A</p>
<p><span>赋权类型</span>-</p>
<p><span>起始时间</span>-</p>
<p><span>终止时间</span>-</p>
<p><span>利用目的</span>-</p>
<p><span>利用次数</span>-</p>
</div>
<businessDetails />
</div>
<div slot="footer" class="dialog-footer">
<el-button>驳回</el-button>
<el-button type="primary" @click="detailVisible=false">审批</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import businessDetails from '@/views/system/processManage/runningProcess/module/businessDetails/index.vue'
export default {
name: 'Detail',
components: {
businessDetails
},
data() {
return {
detailVisible: false,
activeIndex: 0,
opinionTxt: null
}
},
computed: {
},
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;
}
}
}
.opinion{
margin-top: 28px;
h5{
margin-bottom: 18px;
font-size: 16px;
color: #0C0E1E;
text-align: center;
}
.opinion-form{
display: flex;
justify-content: space-between;
span{
display: block;
width: 83px;
margin-right: 12px;
line-height: 30px;
text-align: right;
color: #545B65;
}
::v-deep .el-textarea__inner{
border-color: #E6E8ED;
}
}
}
.detail-img{
width: 818px;
height: 404px;
overflow: hidden;
overflow-y: scroll;
img{
display: block;
width: 100%;
}
}
.detail-list{
margin-bottom: 16px;
p{
width: 33%;
}
}
}
</style>

179
src/views/system/user/processCenter/module/form.vue

@ -0,0 +1,179 @@
<template>
<el-dialog class="detail-dialog" :visible.sync="formVisible" :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>
</div>
<div v-if="activeIndex == 0">
<div class="detail-info">
<p><span>流程名称</span>{{ selectRow && selectRow.title }}</p>
<p><span>启动时间</span>{{ selectRow && selectRow.createTime | parseTime }}</p>
<p><span>实例ID</span>{{ selectRow && selectRow.procInstId }}</p>
<p><span>发起人</span>{{ selectRow && selectRow.createBy }}</p>
</div>
<div class="detail-list">
<p><span>业务类型</span>归档审批</p>
<p><span>原始位置</span>全宗A-整理库-门类A</p>
<p><span>目标位置</span>全宗A-整理库-门类A</p>
<p><span>赋权类型</span>-</p>
<p><span>起始时间</span>-</p>
<p><span>终止时间</span>-</p>
<p><span>利用目的</span>-</p>
<p><span>利用次数</span>-</p>
</div>
<div class="opinion">
<!-- <h5>归档审批</h5> -->
<div class="opinion-form">
<!-- <span>审批意见</span>
<el-input v-model="opinionTxt" placeholder="请输入" type="textarea" :rows="2" /> -->
<el-form ref="form" :model="form" inline label-width="100px">
<el-form-item label="审批意见" prop="opinion" :rules="[{ required: true, message: '请输入审批意见', trigger: 'blur' }]">
<el-input v-model="form.opinion" type="textarea" :rows="3" style="width: 700px;" />
</el-form-item>
</el-form>
</div>
</div>
<businessDetails />
</div>
<div v-if="activeIndex == 1" class="detail-img">
<img src="~@/assets/images/system/process-img.png" alt="">
</div>
<!-- <div v-if="activeIndex == 2">
<div class="detail-list">
<p><span>业务类型</span>归档审批</p>
<p><span>原始位置</span>全宗A-整理库-门类A</p>
<p><span>目标位置</span>全宗A-整理库-门类A</p>
<p><span>赋权类型</span>-</p>
<p><span>起始时间</span>-</p>
<p><span>终止时间</span>-</p>
<p><span>利用目的</span>-</p>
<p><span>利用次数</span>-</p>
</div>
<businessDetails />
</div> -->
<div slot="footer" class="dialog-footer">
<el-button @click="submitOpinion(false)">驳回</el-button>
<el-button type="primary" @click="submitOpinion(true)">审批</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import { FetchBecomeDocumentConfirm } from '@/api/collect/collect'
import businessDetails from '@/views/system/processManage/runningProcess/module/businessDetails/index.vue'
export default {
name: 'Form',
components: {
businessDetails
},
data() {
return {
formVisible: false,
activeIndex: 0,
form: {
opinion: null
},
selectRow: null
}
},
computed: {
},
methods: {
changeActiveTab(data) {
this.activeIndex = data
},
submitOpinion(type) {
this.$refs['form'].validate((valid) => {
if (valid) {
const params = {
'id': this.selectRow.id,
'isPass': type,
'opinion': this.form.opinion
}
console.log(params)
if (this.selectRow.businessType === 1) {
FetchBecomeDocumentConfirm(params).then((res) => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
} else {
return false
}
})
}
}
}
</script>
<style lang='scss' scoped>
.detail-dialog{
.detail-info,
.detail-list{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 4px 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;
}
}
}
.opinion{
margin: 10px 0;
h5{
margin-bottom: 18px;
font-size: 16px;
color: #0C0E1E;
text-align: center;
}
.opinion-form{
display: flex;
justify-content: space-between;
span{
display: block;
width: 83px;
margin-right: 12px;
line-height: 30px;
text-align: right;
color: #545B65;
}
::v-deep .el-textarea__inner{
border-color: #E6E8ED;
}
}
}
.detail-img{
width: 818px;
height: 404px;
overflow: hidden;
overflow-y: scroll;
img{
display: block;
width: 100%;
}
}
.detail-list{
// margin-bottom: 16px;
padding: 0 18px 4px 18px;
p{
width: 33%;
}
}
}
</style>
Loading…
Cancel
Save