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
-
178src/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> |
|||
<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> |
|||
|
|||
<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> |
|||
|
|||
<style lang='scss' scoped> |
|||
<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,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