15 changed files with 374 additions and 331 deletions
-
2package.json
-
27src/api/system/flowable.js
-
35src/assets/styles/mixin.scss
-
12src/assets/styles/yxk-admin.scss
-
52src/views/system/metadata/dataList/index.vue
-
1src/views/system/metadata/index.vue
-
134src/views/system/processManage/historicalProcess/index.vue
-
18src/views/system/processManage/index.vue
-
33src/views/system/processManage/modelDesign/index.vue
-
26src/views/system/processManage/processDeployment/index.vue
-
127src/views/system/processManage/runningProcess/index.vue
-
30src/views/system/processManage/runningProcess/module/businessDetails/index.vue
-
113src/views/system/processManage/runningProcess/module/detail.vue
-
23src/views/system/processManage/runningProcess/module/processImg/index.vue
-
72src/views/system/processManage/runningProcess/module/taskList/index.vue
@ -1,147 +1,25 @@ |
|||||
<template> |
<template> |
||||
<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 label="发起时间" prop="startTime" align="center" width="160"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div>{{ scope.row.startTime | parseTime }}</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="发起人" prop="promoter" align="center" width="140" /> |
|
||||
<el-table-column label="流程名称" prop="flowableName" align="center" /> |
|
||||
<el-table-column label="当前节点" prop="currentNode" align="center" /> |
|
||||
<el-table-column label="下一节点" prop="nextNode" align="center" /> |
|
||||
<el-table-column label="结束时间" prop="endTime" align="center" width="160"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.endTime">{{ scope.row.endTime | parseTime }}</div> |
|
||||
<div v-else>-</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="流程状态" prop="status" align="center" width="140"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.endTime" class="row-state active-state">已完成</div> |
|
||||
<div v-else class="row-state disabled-state">已取消</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<!--分页组件--> |
|
||||
<pagination v-if="crud.data.length!==0" /> |
|
||||
<Detail ref="processDetail" /> |
|
||||
|
<Process ref="process" :is-histroy="true" /> |
||||
</div> |
</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 '../runningProcess/module/detail' |
|
||||
|
import Process from '../runningProcess/index' |
||||
|
|
||||
export default { |
export default { |
||||
name: 'RunningProcess', |
|
||||
components: { rrOperation, DateRangePicker, pagination, Detail }, |
|
||||
cruds() { |
|
||||
return CRUD({ title: '运行中流程', url: 'api/flowable/getFlowList', crudMethod: {}}) |
|
||||
}, |
|
||||
mixins: [presenter(), header(), crud()], |
|
||||
|
name: 'HistoricalProcess', |
||||
|
components: { Process }, |
||||
data() { |
data() { |
||||
return { |
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'] |
|
||||
} |
|
||||
} |
} |
||||
}, |
}, |
||||
|
mounted() { |
||||
|
}, |
||||
methods: { |
methods: { |
||||
[CRUD.HOOK.beforeRefresh]() { |
|
||||
this.crud.query.isEnd = true |
|
||||
}, |
|
||||
// table - 双击查看详情 |
|
||||
tableDoubleClick(row) { |
|
||||
this.$refs.processDetail.detailVisible = true |
|
||||
} |
|
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
@mixin table-fixed-status-style{ |
|
||||
[data-theme="dark"] & { |
|
||||
&.active-state{ |
|
||||
color: #1aae93; |
|
||||
border: 1px solid #1aae93; |
|
||||
} |
|
||||
&.disabled-state{ |
|
||||
color: #ED4A41; |
|
||||
border: 1px solid #FFA5A0; |
|
||||
opacity: 0.6; |
|
||||
} |
|
||||
} |
|
||||
[data-theme="light"] & { |
|
||||
&.active-state{ |
|
||||
color: #2ECAAC; |
|
||||
background-color: #E8F8F5; |
|
||||
border: 1px solid #B1EBDF; |
|
||||
} |
|
||||
&.disabled-state{ |
|
||||
color: #ED4A41; |
|
||||
background-color: #FFEBEA; |
|
||||
border: 1px solid #FFA5A0; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.row-state{ |
|
||||
display: inline-block; |
|
||||
padding: 0 4px; |
|
||||
height: 20px; |
|
||||
line-height: 20px; |
|
||||
text-align: center; |
|
||||
font-size: 12px; |
|
||||
border-radius: 3px; |
|
||||
@include table-fixed-status-style; |
|
||||
} |
|
||||
</style> |
</style> |
||||
@ -1,20 +1,37 @@ |
|||||
<template> |
<template> |
||||
<div class="tab-img"> |
<div class="tab-img"> |
||||
<img src="~@/assets/images/system/process-img.png" alt=""> |
|
||||
|
<img :src="'data:image/jpeg;base64,'+ srcImg" alt="" :onerror="defaultImg"> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
srcImg: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
defaultImg: 'this.src="' + require('@/assets/images/system/default-img.jpg') + '"' |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.tab-img{ |
.tab-img{ |
||||
max-height: 344px; |
|
||||
|
height: 440px; |
||||
overflow: hidden; |
overflow: hidden; |
||||
overflow-y: scroll; |
|
||||
img{ |
img{ |
||||
display: block; |
display: block; |
||||
width: 100%; |
width: 100%; |
||||
|
// height: 100%; |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue