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> |
|||
<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> |
|||
</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 '../runningProcess/module/detail' |
|||
import Process from '../runningProcess/index' |
|||
|
|||
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() { |
|||
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: { |
|||
[CRUD.HOOK.beforeRefresh]() { |
|||
this.crud.query.isEnd = true |
|||
}, |
|||
// table - 双击查看详情 |
|||
tableDoubleClick(row) { |
|||
this.$refs.processDetail.detailVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<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> |
|||
@ -1,20 +1,37 @@ |
|||
<template> |
|||
<div class="tab-img"> |
|||
<img src="~@/assets/images/system/process-img.png" alt=""> |
|||
<img :src="'data:image/jpeg;base64,'+ srcImg" alt="" :onerror="defaultImg"> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
srcImg: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
defaultImg: 'this.src="' + require('@/assets/images/system/default-img.jpg') + '"' |
|||
} |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.tab-img{ |
|||
max-height: 344px; |
|||
height: 440px; |
|||
overflow: hidden; |
|||
overflow-y: scroll; |
|||
img{ |
|||
display: block; |
|||
width: 100%; |
|||
// height: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue