|
|
@@ -2,7 +2,7 @@
|
|
|
* @Author: tengmingxue 1473375109@qq.com
|
|
|
* @Date: 2023-08-30 17:25:03
|
|
|
* @LastEditors: tengmingxue 1473375109@qq.com
|
|
|
- * @LastEditTime: 2023-08-30 23:18:14
|
|
|
+ * @LastEditTime: 2023-08-31 16:00:09
|
|
|
* @FilePath: \xld-gis-admin\src\views\dataAdmin\dataAdmin\flowStep\index.vue
|
|
|
* @Description: 流程图表
|
|
|
-->
|
|
|
@@ -26,16 +26,25 @@
|
|
|
<template v-for="(step, index) in steps" :key="step.xh">
|
|
|
<!-- status 1:已完成,2:进行中,3:驳回,0:未开始 -->
|
|
|
<a-step :status="status[step.status]">
|
|
|
+ <template #title>
|
|
|
+ <div class="step-title">{{ step.stepName }}</div>
|
|
|
+ </template>
|
|
|
<template #icon>
|
|
|
<div class="cicle-out">
|
|
|
- <div class="cicle" style="border: 2px solid #67c23a">{{ index + 1 }}</div>
|
|
|
+ <div
|
|
|
+ class="cicle"
|
|
|
+ :style="`border: 2px solid ${colors[step.status]};color:${colors[step.status]};`"
|
|
|
+ >{{ index + 1 }}</div
|
|
|
+ >
|
|
|
</div>
|
|
|
</template>
|
|
|
<template #description>
|
|
|
- <div class="desc-step-name">{{ step.stepName }}</div>
|
|
|
+ <!-- <div class="desc-step-name">{{ step.stepName }}</div> -->
|
|
|
<div class="desc-handler">
|
|
|
<template v-for="user in step.handlers" :key="user.id">
|
|
|
- <span class="handler-name">{{ user.handler }}</span>
|
|
|
+ <span class="handler-name" :style="`background-color:${colors[user.status]};`">{{
|
|
|
+ user.handler
|
|
|
+ }}</span>
|
|
|
</template>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -43,6 +52,9 @@
|
|
|
</template>
|
|
|
</a-steps>
|
|
|
</div>
|
|
|
+ <div class="log-table">
|
|
|
+ <handle-log></handle-log>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -56,12 +68,13 @@ import { columns, searchFormSchema } from './flowData';
|
|
|
// 引入删除
|
|
|
import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
|
|
|
import { message, Popconfirm } from 'ant-design-vue';
|
|
|
+import HandleLog from './handleLog.vue'
|
|
|
const props = {
|
|
|
flowTitle: { type: String, require: true },
|
|
|
flowCode: { type: String, default: '' },
|
|
|
};
|
|
|
export default defineComponent({
|
|
|
- components: { BasicTable, Authority, Popconfirm, TableAction },
|
|
|
+ components: { BasicTable, Authority, Popconfirm, TableAction,HandleLog },
|
|
|
props,
|
|
|
setup(props, { emit }) {
|
|
|
const data = reactive({
|
|
|
@@ -73,21 +86,22 @@ export default defineComponent({
|
|
|
{ key: 3, name: '驳回', color: '#E6A23C' },
|
|
|
{ key: 4, name: '未开始', color: '#989898' },
|
|
|
],
|
|
|
+ colors: ['#989898', '#67C23A', '#2D74E7', '#E6A23C'],
|
|
|
status: ['wait', 'finish', 'process', 'back'],
|
|
|
steps: [
|
|
|
//status 1:已完成,2:进行中,3:驳回,0:未开始
|
|
|
{
|
|
|
xh: '1',
|
|
|
stepName: '地图资源上传',
|
|
|
- handlers: [{ handler: '张三', id: '1' }],
|
|
|
+ handlers: [{ handler: '张三', id: '1', status: '1' }],
|
|
|
status: '1',
|
|
|
},
|
|
|
{
|
|
|
xh: '2',
|
|
|
stepName: '审核1',
|
|
|
handlers: [
|
|
|
- { handler: '张三', id: '1' },
|
|
|
- { handler: '李斯', id: '2' },
|
|
|
+ { handler: '张三', id: '1', status: '1' },
|
|
|
+ { handler: '李斯', id: '2', status: '1' },
|
|
|
],
|
|
|
status: '1',
|
|
|
},
|
|
|
@@ -95,18 +109,23 @@ export default defineComponent({
|
|
|
xh: '3',
|
|
|
stepName: '审核2',
|
|
|
handlers: [
|
|
|
- { handler: '张三', id: '1' },
|
|
|
- { handler: '李斯', id: '2' },
|
|
|
+ { handler: '张三', id: '1', status: '1' },
|
|
|
+ { handler: '李斯', id: '2', status: '2' },
|
|
|
],
|
|
|
status: '2',
|
|
|
},
|
|
|
- { xh: '4', stepName: '审核3', handlers: [{ handler: '张三', id: '1' }], status: '3' },
|
|
|
+ {
|
|
|
+ xh: '4',
|
|
|
+ stepName: '审核3',
|
|
|
+ handlers: [{ handler: '张三', id: '1', status: '3' }],
|
|
|
+ status: '3',
|
|
|
+ },
|
|
|
{
|
|
|
xh: '5',
|
|
|
stepName: '审核4',
|
|
|
handlers: [
|
|
|
- { handler: '张三', id: '1' },
|
|
|
- { handler: '李斯', id: '2' },
|
|
|
+ { handler: '张三', id: '1', status: '0' },
|
|
|
+ { handler: '李斯', id: '2', status: '0' },
|
|
|
],
|
|
|
status: '0',
|
|
|
},
|
|
|
@@ -177,7 +196,7 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
.flow {
|
|
|
- height: 200px;
|
|
|
+ height: 140px;
|
|
|
width: 100%;
|
|
|
padding: 0 20px;
|
|
|
|
|
|
@@ -190,12 +209,20 @@ export default defineComponent({
|
|
|
margin-top: 20px;
|
|
|
height: 100%;
|
|
|
.ant-steps-item-content {
|
|
|
+ position: absolute;
|
|
|
height: 100%;
|
|
|
+ width: 100%;
|
|
|
margin-top: 20px;
|
|
|
+ left: 16px;
|
|
|
+ .ant-steps-item-title {
|
|
|
+ .step-title {
|
|
|
+ position: absolute;
|
|
|
+ top: -33px;
|
|
|
+ left: -16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.ant-steps-item-description {
|
|
|
- margin-top: -30px;
|
|
|
- margin-left: -15px;
|
|
|
- height: 100%;
|
|
|
+ margin-left: -16px;
|
|
|
.desc-step-name {
|
|
|
margin-top: 4px;
|
|
|
}
|
|
|
@@ -204,10 +231,10 @@ export default defineComponent({
|
|
|
.handler-name {
|
|
|
display: flex;
|
|
|
float: left;
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
- width: 58px;
|
|
|
- margin-right: 6px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ width: 44px;
|
|
|
+ margin-right: 3px;
|
|
|
justify-content: center;
|
|
|
color: #fff;
|
|
|
background-color: #2d74e7;
|
|
|
@@ -217,11 +244,11 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
.ant-steps-item-icon {
|
|
|
- margin-right: -15px;
|
|
|
margin-top: 20px;
|
|
|
+ margin-right: 0px;
|
|
|
.cicle-out {
|
|
|
- height: 50px;
|
|
|
- width: 30px;
|
|
|
+ height: 40px;
|
|
|
+ width: 40px;
|
|
|
.cicle {
|
|
|
height: 30px;
|
|
|
width: 30px;
|
|
|
@@ -234,6 +261,10 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .log-table{
|
|
|
+ height: calc(100% - 374px);
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
|