14 changed files with 778 additions and 54 deletions
-
BINsrc/assets/images/icon/arrow.png
-
14src/assets/styles/archives-manage.scss
-
12src/assets/styles/mixin.scss
-
23src/assets/styles/yxk-admin.scss
-
5src/views/system/processManage/index.vue
-
11src/views/system/processManage/modelDesign/index.vue
-
190src/views/system/processManage/processDeployment/index.vue
-
139src/views/system/processManage/processDeployment/module/form.vue
-
93src/views/system/processManage/runningProcess/index.vue
-
52src/views/system/processManage/runningProcess/module/approvalList/index.vue
-
52src/views/system/processManage/runningProcess/module/businessDetails/index.vue
-
172src/views/system/processManage/runningProcess/module/detail.vue
-
17src/views/system/processManage/runningProcess/module/processImg/index.vue
-
52src/views/system/processManage/runningProcess/module/taskList/index.vue
|
After Width: 9 | Height: 5 | Size: 217 B |
@ -0,0 +1,139 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
class="dialog-middle" |
||||
|
append-to-body |
||||
|
:close-on-click-modal="false" |
||||
|
:before-close="handleClose" |
||||
|
:visible="uploadVisible" |
||||
|
:title="title" |
||||
|
> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" :model="form" inline :rules="rules" size="small" label-width="90px"> |
||||
|
<el-row> |
||||
|
<el-form-item label="流程名称" prop="name"> |
||||
|
<el-input v-model="form.name" /> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-form-item label="上传模型" prop="model" class="upload-wm"> |
||||
|
<el-input v-model="form.model" style="width:300px;" /> |
||||
|
<el-upload |
||||
|
class="upload-btn" |
||||
|
:action="upload_qiniu_url" |
||||
|
:show-file-list="false" |
||||
|
:on-success="handleAvatarSuccess" |
||||
|
:on-error="handleError" |
||||
|
:before-upload="beforeAvatarUpload" |
||||
|
:data="qiniuData" |
||||
|
> |
||||
|
<el-button size="small" type="primary"><i class="iconfont icon-shangchuan" />上传</el-button> |
||||
|
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> --> |
||||
|
</el-upload> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="uploadVisible = false"> |
||||
|
取消 |
||||
|
</el-button> |
||||
|
<el-button type="primary" @click="confirmHandle"> |
||||
|
确定 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
title: '新增流程', |
||||
|
uploadVisible: false, |
||||
|
form: { |
||||
|
id: null, |
||||
|
name: '', |
||||
|
model: '' |
||||
|
}, |
||||
|
qiniuData: { |
||||
|
key: '', |
||||
|
token: '' |
||||
|
}, |
||||
|
// 七牛云的上传地址 |
||||
|
upload_qiniu_url: 'https://upload.qiniup.com/', |
||||
|
// 这是七牛云空间的外链默认域名 |
||||
|
upload_qiniu_addr: 'qiniu.aiyxlib.com', |
||||
|
rules: { |
||||
|
name: [{ required: true, message: '请输入名称', trigger: 'blur' }], |
||||
|
model: [{ required: true, message: '请上传模型', trigger: 'blur' }] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleChange(file, fileList) { |
||||
|
this.fileList = fileList.slice(-3) |
||||
|
}, |
||||
|
handleClose() { |
||||
|
this.uploadVisible = false |
||||
|
}, |
||||
|
// 验证文件合法性 |
||||
|
beforeAvatarUpload(file) { |
||||
|
this.qiniuData.key = file.name |
||||
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' |
||||
|
const isLt2M = file.size / 1024 / 1024 < 2 |
||||
|
if (!isJPG) { |
||||
|
this.$message.error('图片只支持bmp、jpg、png、gif格式的文件 !') |
||||
|
} |
||||
|
if (!isLt2M) { |
||||
|
this.$message.error('图片大小不能超过 2MB !') |
||||
|
} |
||||
|
return isJPG && isLt2M |
||||
|
}, |
||||
|
handleAvatarSuccess: function(res, file) { |
||||
|
this.form.imageUrl = 'http://' + this.upload_qiniu_addr + '/' + res.key |
||||
|
console.log(this.form.imageUrl) |
||||
|
}, |
||||
|
handleError: function(res) { |
||||
|
this.$message({ |
||||
|
message: '上传失败', |
||||
|
duration: 2000, |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
}, |
||||
|
confirmHandle() { |
||||
|
this.$refs['form'].validate(valid => { |
||||
|
if (valid) { |
||||
|
alert('submit!') |
||||
|
this.uploadVisible = false |
||||
|
} else { |
||||
|
console.log('error submit!!') |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.upload-wm{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
::v-deep .el-form-item__content{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.upload-btn{ |
||||
|
margin-right: 0; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-upload { |
||||
|
.el-button{ |
||||
|
color: #fff !important; |
||||
|
background-color: #1F55EB !important; |
||||
|
border: none !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,9 +1,98 @@ |
|||||
<template> |
<template> |
||||
<div>运行中流程</div> |
|
||||
|
<div> |
||||
|
<!--工具栏--> |
||||
|
<div class="head-container"> |
||||
|
<div class="head-search"> |
||||
|
<el-input v-model="query.name" clearable size="small" placeholder="输入发起人名" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
||||
|
<el-select |
||||
|
v-model="query.value1" |
||||
|
multiple |
||||
|
collapse-tags |
||||
|
placeholder="请选择" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
<date-range-picker v-model="query.createTime" class="date-item" /> |
||||
|
<rrOperation /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!--表格渲染--> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
v-loading="crud.loading" |
||||
|
:data="crud.data" |
||||
|
row-key="id" |
||||
|
@select="crud.selectChange" |
||||
|
@select-all="crud.selectAllChange" |
||||
|
@cell-dblclick="tableDoubleClick" |
||||
|
@selection-change="crud.selectionChangeHandler" |
||||
|
> |
||||
|
<el-table-column type="selection" align="center" width="55" /> |
||||
|
<el-table-column label="流程名称" prop="name" /> |
||||
|
<el-table-column label="实列ID" prop="instanceID" /> |
||||
|
<el-table-column label="业务ID" prop="serviceID " /> |
||||
|
<el-table-column label="发起人" prop="initiators" /> |
||||
|
<el-table-column prop="createTime" label="启动时间"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination v-if="crud.data.length!==0" /> |
||||
|
<Detail ref="processDetail" /> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import CRUD, { presenter, header, crud } from '@crud/crud' |
||||
|
import rrOperation from '@crud/RR.operation' |
||||
|
import DateRangePicker from '@/components/DateRangePicker' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import Detail from './module/detail' |
||||
|
|
||||
|
export default { |
||||
|
name: 'RunningProcess', |
||||
|
components: { rrOperation, DateRangePicker, pagination, Detail }, |
||||
|
cruds() { |
||||
|
return CRUD({ title: '运行中流程', url: 'api/dept', crudMethod: {}}) |
||||
|
}, |
||||
|
mixins: [presenter(), header(), crud()], |
||||
|
data() { |
||||
|
return { |
||||
|
options: [{ |
||||
|
value: '选项1', |
||||
|
label: '流程A' |
||||
|
}, { |
||||
|
value: '选项2', |
||||
|
label: '流程B' |
||||
|
}, { |
||||
|
value: '选项3', |
||||
|
label: '流程C' |
||||
|
}, { |
||||
|
value: '选项4', |
||||
|
label: '流程D' |
||||
|
}], |
||||
|
permission: { |
||||
|
add: ['admin', 'dept:add'], |
||||
|
edit: ['admin', 'dept:edit'], |
||||
|
del: ['admin', 'dept:del'] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// table - 双击查看详情 |
||||
|
tableDoubleClick(row) { |
||||
|
this.$refs.processDetail.detailVisible = true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
|
||||
|
<style lang="scss" scoped> |
||||
</style> |
</style> |
||||
@ -0,0 +1,52 @@ |
|||||
|
<template> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
style="width: 100%" |
||||
|
> |
||||
|
<el-table-column |
||||
|
prop="date" |
||||
|
label="日期" |
||||
|
width="180" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="姓名" |
||||
|
width="180" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
prop="address" |
||||
|
label="地址" |
||||
|
/> |
||||
|
</el-table> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
tableData: [{ |
||||
|
date: '2016-05-02', |
||||
|
name: '王小虎', |
||||
|
address: '上海市普陀区金沙江路 1518 弄' |
||||
|
}, { |
||||
|
date: '2016-05-04', |
||||
|
name: '王小虎', |
||||
|
address: '上海市普陀区金沙江路 1517 弄' |
||||
|
}, { |
||||
|
date: '2016-05-01', |
||||
|
name: '王小虎', |
||||
|
address: '上海市普陀区金沙江路 1519 弄' |
||||
|
}, { |
||||
|
date: '2016-05-03', |
||||
|
name: '王小虎', |
||||
|
address: '上海市普陀区金沙江路 1516 弄' |
||||
|
}] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
</style> |
||||
@ -0,0 +1,52 @@ |
|||||
|
<template> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
style="width: 100%" |
||||
|
> |
||||
|
<el-table-column |
||||
|
prop="date" |
||||
|
label="日期" |
||||
|
width="180" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="姓名" |
||||
|
width="180" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
prop="address" |
||||
|
label="地址" |
||||
|
/> |
||||
|
</el-table> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
tableData: [{ |
||||
|
date: '2016-05-02', |
||||
|
name: '王小虎', |
||||
|
address: '上海市普陀区金沙江路 1518 弄' |
||||
|
}, { |
||||
|
date: '2016-05-04', |
||||
|
name: '王小虎', |
||||
|
address: '上海市普陀区金沙江路 1517 弄' |
||||
|
}, { |
||||
|
date: '2016-05-01', |
||||
|
name: '王小虎', |
||||
|
address: '上海市普陀区金沙江路 1519 弄' |
||||
|
}, { |
||||
|
date: '2016-05-03', |
||||
|
name: '王小虎', |
||||
|
address: '上海市普陀区金沙江路 1516 弄' |
||||
|
}] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
</style> |
||||
@ -0,0 +1,172 @@ |
|||||
|
<template> |
||||
|
<el-dialog class="detail-dialog" :visible.sync="detailVisible" :modal-append-to-body="false" :close-on-click-modal="false" title="流程详情"> |
||||
|
<div class="setting-dialog"> |
||||
|
<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="detail-arrow" @click="isExpend = !isExpend"><i :class="[ isExpend ? 'arrow-up':'']" /></div> |
||||
|
<el-collapse-transition> |
||||
|
<div v-show="isExpend" class="service-detail"> |
||||
|
<h4>业务详情</h4> |
||||
|
<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> |
||||
|
<p><span>审批状态：</span>通过</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-collapse-transition> |
||||
|
<div class="detail-tab"> |
||||
|
<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> |
||||
|
<li :class="{ 'active-tab-nav': activeIndex == 3 }" @click="changeActiveTab(3)">审批列表</li> |
||||
|
</ul> |
||||
|
<component :is="comName" class="component-cont" /> |
||||
|
</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, |
||||
|
isExpend: false, |
||||
|
activeIndex: 0 |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
comName: function() { |
||||
|
if (this.activeIndex === 0) { |
||||
|
return 'processImg' |
||||
|
} else if (this.activeIndex === 1) { |
||||
|
return 'businessDetails' |
||||
|
} else if (this.activeIndex === 2) { |
||||
|
return 'taskList' |
||||
|
} else if (this.activeIndex === 3) { |
||||
|
return 'approvalList' |
||||
|
} |
||||
|
return 'processImg' |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeActiveTab(data) { |
||||
|
this.activeIndex = data |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.detail-dialog{ |
||||
|
::v-deep .el-dialog{ |
||||
|
width: 860px; |
||||
|
.el-dialog__body{ |
||||
|
padding: 0 0 30px 0; |
||||
|
} |
||||
|
} |
||||
|
.detail-info, |
||||
|
.detail-list{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex-wrap: wrap; |
||||
|
padding-top: 10px; |
||||
|
font-size: 14px; |
||||
|
line-height: 30px; |
||||
|
color: #545B65; |
||||
|
p{ |
||||
|
width: 50%; |
||||
|
span{ |
||||
|
display: inline-block; |
||||
|
width: 75px; |
||||
|
text-align: right; |
||||
|
color: #0C0E1E; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.detail-arrow{ |
||||
|
position: relative; |
||||
|
width: 64px; |
||||
|
height: 16px; |
||||
|
margin: 10px auto; |
||||
|
background-color:#E8F2FF; |
||||
|
border-radius: 3px; |
||||
|
cursor: pointer; |
||||
|
i{ |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
display: block; |
||||
|
width: 9px; |
||||
|
height: 5px; |
||||
|
margin-top: -2px; |
||||
|
margin-left: -4px; |
||||
|
background: url('~@/assets/images/icon/arrow.png') no-repeat center center; |
||||
|
transition: all ease-in 0.5s; |
||||
|
&.arrow-up { |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.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%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.tab-nav{ |
||||
|
margin: 25px 0 18px 0; |
||||
|
} |
||||
|
.component-cont{ |
||||
|
max-height: 344px; |
||||
|
overflow: hidden; |
||||
|
overflow-y: scroll; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,17 @@ |
|||||
|
<template> |
||||
|
<div class="tab-img"> |
||||
|
<img src="~@/assets/images/system/process-img.png" alt=""> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.tab-img{ |
||||
|
img{ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,52 @@ |
|||||
|
<template> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
style="width: 100%" |
||||
|
> |
||||
|
<el-table-column |
||||
|
prop="date" |
||||
|
label="日期" |
||||
|
width="180" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
label="姓名" |
||||
|
width="180" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
prop="address" |
||||
|
label="地址" |
||||
|
/> |
||||
|
</el-table> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
tableData: [{ |
||||
|
date: '2016-05-02', |
||||
|
name: '王小虎', |
||||
|
address: '上海市普陀区金沙江路 1518 弄' |
||||
|
}, { |
||||
|
date: '2016-05-04', |
||||
|
name: '王小虎', |
||||
|
address: '上海市普陀区金沙江路 1517 弄' |
||||
|
}, { |
||||
|
date: '2016-05-01', |
||||
|
name: '王小虎', |
||||
|
address: '上海市普陀区金沙江路 1519 弄' |
||||
|
}, { |
||||
|
date: '2016-05-03', |
||||
|
name: '王小虎', |
||||
|
address: '上海市普陀区金沙江路 1516 弄' |
||||
|
}] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue