|
@@ -1,121 +1,127 @@
|
|
|
<template>
|
|
|
<!-- 左侧列表 -->
|
|
|
- <div class="flow-content">
|
|
|
- <!-- 搜索条件 -->
|
|
|
- <div class="search-box">
|
|
|
- <div class="search-segment" style="flex: 1 1 0%">
|
|
|
- <el-input v-model="searchParams.processName" placeholder="流程名称">
|
|
|
- <template #append>
|
|
|
- <el-button icon="Search" @click.stop="initList" />
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- <div class="search-segment">
|
|
|
- <el-tooltip effect="dark" content="重置" placement="top">
|
|
|
- <el-button icon="Refresh" @click.stop="resetSearch('external')" />
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div class="search-segment">
|
|
|
- <EditPopover :visible="searchMoreVisible" placement="right" :width="320" :show-footer="false">
|
|
|
- <template #reference>
|
|
|
- <el-button icon="Filter" @click="searchMoreVisible = true" />
|
|
|
- </template>
|
|
|
- <div class="title">高级筛选</div>
|
|
|
- <el-scrollbar max-height="400px">
|
|
|
- <!-- 创建人 -->
|
|
|
- <el-input v-model="searchParams.createBy" style="width: 240px; margin-bottom: 10px" placeholder="请输入创建人名称" clearable />
|
|
|
- <!-- 流程状态 -->
|
|
|
- <el-select v-model="searchParams.instanceState" placeholder="流程状态" style="margin-bottom: 10px; width: 240px" clearable>
|
|
|
- <el-option v-for="item in instanceStateOps" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-date-picker
|
|
|
- v-model="searchParams.beginTime"
|
|
|
- style="width: 240px; margin-bottom: 10px"
|
|
|
- type="date"
|
|
|
- format="YYYY-MM-DD"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- placeholder="开始时间"
|
|
|
- :disabled-date="disabledDateStart"
|
|
|
- />
|
|
|
- <el-date-picker
|
|
|
- v-model="searchParams.endTime"
|
|
|
- style="width: 240px; margin-bottom: 10px"
|
|
|
- type="date"
|
|
|
- format="YYYY-MM-DD"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- placeholder="结束时间"
|
|
|
- :disabled-date="disabledDateEnd"
|
|
|
- />
|
|
|
- </el-scrollbar>
|
|
|
- <div class="footer">
|
|
|
- <el-button plain @click="searchReset">重置</el-button>
|
|
|
- <el-button type="primary" plain @click="searchSubmit">检索</el-button>
|
|
|
- </div>
|
|
|
- </EditPopover>
|
|
|
- </div>
|
|
|
+ <div :class="['warp-left aside-wrap', isCollapsed ? 'aside-wrap--collapsed' : '']">
|
|
|
+ <div :class="['trigger-bar', isCollapsed ? 'trigger-bar--collapsed' : '']" @click="isCollapsed = !isCollapsed">
|
|
|
+ <div class="bar__top"></div>
|
|
|
+ <div class="bar__bottom"></div>
|
|
|
</div>
|
|
|
- <!-- 内容值 -->
|
|
|
- <div v-infinite-scroll="loadList" :infinite-scroll-disabled="disabledInfinite" class="flow-list-box">
|
|
|
- <div
|
|
|
- v-for="i in listData.list"
|
|
|
- :key="i.instanceId"
|
|
|
- class="item-box"
|
|
|
- :class="[i.instanceId === taskProcessInfo.currentTaskRow.instanceId ? 'item-box-choosed' : '']"
|
|
|
- @click="getTaskDetail(i)"
|
|
|
- >
|
|
|
- <div class="flow-card-box flow-card-box-hoverable">
|
|
|
- <!--头部-->
|
|
|
- <div class="header">
|
|
|
- <le-text class="flex-1" tag="b" :value="i.processName" />
|
|
|
- <div class="ml-1">
|
|
|
- <el-text v-if="['pendingApproval', 'pendingClaim'].indexOf(props.currentTaskType) !== -1" class="mr-0.5">{{
|
|
|
- i.performType == 2 ? '会签' : i.performType == 3 ? '或签' : i.performType == 4 ? '票签' : ''
|
|
|
- }}</el-text>
|
|
|
-
|
|
|
- <el-tag v-if="i.processType === 'child'" type="warning" class="mr-0.5">子流程</el-tag>
|
|
|
- <el-tag v-else-if="i.processType === 'business'" type="warning" class="mr-0.5">业务流程</el-tag>
|
|
|
- <el-tag v-if="currentTaskType === 'pendingApproval'">待审批</el-tag>
|
|
|
- <template v-else>
|
|
|
- <el-tag v-if="i.instanceState === 0">审批中</el-tag>
|
|
|
- <el-tag v-if="i.instanceState === 1" type="success">审批通过</el-tag>
|
|
|
- <el-tag v-if="i.instanceState === 2" type="danger">审批拒绝</el-tag>
|
|
|
- <el-tag v-if="i.instanceState === 3" type="warning">撤销审批</el-tag>
|
|
|
- <el-tag v-if="i.instanceState === 4" type="danger">超时结束</el-tag>
|
|
|
- <el-tag v-if="i.instanceState === 5" type="danger">强制终止</el-tag>
|
|
|
- </template>
|
|
|
+ <div class="flow-content">
|
|
|
+ <!-- 搜索条件 -->
|
|
|
+ <div class="search-box">
|
|
|
+ <div class="search-segment" style="flex: 1 1 0%">
|
|
|
+ <el-input v-model="searchParams.processName" placeholder="流程名称">
|
|
|
+ <template #append>
|
|
|
+ <el-button icon="Search" @click.stop="initList" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="search-segment">
|
|
|
+ <el-tooltip effect="dark" content="重置" placement="top">
|
|
|
+ <el-button icon="Refresh" @click.stop="resetSearch('external')" />
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="search-segment">
|
|
|
+ <EditPopover :visible="searchMoreVisible" placement="right" :width="320" :show-footer="false">
|
|
|
+ <template #reference>
|
|
|
+ <el-button icon="Filter" @click="searchMoreVisible = true" />
|
|
|
+ </template>
|
|
|
+ <div class="title">高级筛选</div>
|
|
|
+ <el-scrollbar max-height="400px">
|
|
|
+ <!-- 创建人 -->
|
|
|
+ <el-input v-model="searchParams.createBy" style="width: 240px; margin-bottom: 10px" placeholder="请输入创建人名称" clearable />
|
|
|
+ <!-- 流程状态 -->
|
|
|
+ <el-select v-model="searchParams.instanceState" placeholder="流程状态" style="margin-bottom: 10px; width: 240px" clearable>
|
|
|
+ <el-option v-for="item in instanceStateOps" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="searchParams.beginTime"
|
|
|
+ style="width: 240px; margin-bottom: 10px"
|
|
|
+ type="date"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="开始时间"
|
|
|
+ :disabled-date="disabledDateStart"
|
|
|
+ />
|
|
|
+ <el-date-picker
|
|
|
+ v-model="searchParams.endTime"
|
|
|
+ style="width: 240px; margin-bottom: 10px"
|
|
|
+ type="date"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="结束时间"
|
|
|
+ :disabled-date="disabledDateEnd"
|
|
|
+ />
|
|
|
+ </el-scrollbar>
|
|
|
+ <div class="footer">
|
|
|
+ <el-button plain @click="searchReset">重置</el-button>
|
|
|
+ <el-button type="primary" plain @click="searchSubmit">检索</el-button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!--操作类容-->
|
|
|
- <div class="summary-list">
|
|
|
- <template v-if="['myReceived', 'myApplication', 'approved'].indexOf(currentTaskType) !== -1">
|
|
|
- <div v-if="i.endTime" class="summary-item">
|
|
|
- <div class="label">结束时间:</div>
|
|
|
- <div class="value">{{ i.endTime }}</div>
|
|
|
- </div>
|
|
|
- <div v-if="i.duration" class="summary-item">
|
|
|
- <div class="label">处理耗时:</div>
|
|
|
- <div class="value">{{ millisecondsToMinutesAndSeconds(i.duration) }}</div>
|
|
|
+ </EditPopover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 内容值 -->
|
|
|
+ <div v-infinite-scroll="loadList" :infinite-scroll-disabled="disabledInfinite" class="flow-list-box">
|
|
|
+ <div
|
|
|
+ v-for="i in listData.list"
|
|
|
+ :key="i.instanceId"
|
|
|
+ class="item-box"
|
|
|
+ :class="[i.instanceId === taskProcessInfo.currentTaskRow.instanceId ? 'item-box-choosed' : '']"
|
|
|
+ @click="getTaskDetail(i)"
|
|
|
+ >
|
|
|
+ <div class="flow-card-box flow-card-box-hoverable">
|
|
|
+ <!--头部-->
|
|
|
+ <div class="header">
|
|
|
+ <le-text class="flex-1" tag="b" :value="i.processName" />
|
|
|
+ <div class="ml-1">
|
|
|
+ <el-text v-if="['pendingApproval', 'pendingClaim'].indexOf(props.currentTaskType) !== -1" class="mr-0.5">{{
|
|
|
+ i.performType == 2 ? '会签' : i.performType == 3 ? '或签' : i.performType == 4 ? '票签' : ''
|
|
|
+ }}</el-text>
|
|
|
+
|
|
|
+ <el-tag v-if="i.processType === 'child'" type="warning" class="mr-0.5">子流程</el-tag>
|
|
|
+ <el-tag v-else-if="i.processType === 'business'" type="warning" class="mr-0.5">业务流程</el-tag>
|
|
|
+ <el-tag v-if="currentTaskType === 'pendingApproval'">待审批</el-tag>
|
|
|
+ <template v-else>
|
|
|
+ <el-tag v-if="i.instanceState === 0">审批中</el-tag>
|
|
|
+ <el-tag v-if="i.instanceState === 1" type="success">审批通过</el-tag>
|
|
|
+ <el-tag v-if="i.instanceState === 2" type="danger">审批拒绝</el-tag>
|
|
|
+ <el-tag v-if="i.instanceState === 3" type="warning">撤销审批</el-tag>
|
|
|
+ <el-tag v-if="i.instanceState === 4" type="danger">超时结束</el-tag>
|
|
|
+ <el-tag v-if="i.instanceState === 5" type="danger">强制终止</el-tag>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
+ <!--操作类容-->
|
|
|
+ <div class="summary-list">
|
|
|
+ <template v-if="['myReceived', 'myApplication', 'approved'].indexOf(currentTaskType) !== -1">
|
|
|
+ <div v-if="i.endTime" class="summary-item">
|
|
|
+ <div class="label">结束时间:</div>
|
|
|
+ <div class="value">{{ i.endTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="i.duration" class="summary-item">
|
|
|
+ <div class="label">处理耗时:</div>
|
|
|
+ <div class="value">{{ millisecondsToMinutesAndSeconds(i.duration) }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
|
|
|
- <div v-if="i.currentNodeName !== 'complete' && i.endTime ==null" class="summary-item">
|
|
|
- <div class="label">当前所在节点:</div>
|
|
|
- <div class="value">{{ i.currentNodeName }}</div>
|
|
|
+ <div v-if="i.currentNodeName !== 'complete' && i.endTime == null" class="summary-item">
|
|
|
+ <div class="label">当前所在节点:</div>
|
|
|
+ <div class="value">{{ i.currentNodeName }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!--底部-->
|
|
|
- <div class="footer">
|
|
|
- <!-- 头像 -->
|
|
|
- <div class="initiator">
|
|
|
- <FlowNodeAvatar :name="i.createBy" />
|
|
|
+ <!--底部-->
|
|
|
+ <div class="footer">
|
|
|
+ <!-- 头像 -->
|
|
|
+ <div class="initiator">
|
|
|
+ <FlowNodeAvatar :name="i.createBy" />
|
|
|
+ </div>
|
|
|
+ <!-- 时间 -->
|
|
|
+ <div class="begin-time">提交于 {{ i.createTime }}</div>
|
|
|
</div>
|
|
|
- <!-- 时间 -->
|
|
|
- <div class="begin-time">提交于 {{ i.createTime }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div v-if="loading" class="flow-bottom-txt">加载中...</div>
|
|
|
+ <div v-if="noMore" class="flow-bottom-txt no-more">没有更多了</div>
|
|
|
</div>
|
|
|
- <div v-if="loading" class="flow-bottom-txt">加载中...</div>
|
|
|
- <div v-if="noMore" class="flow-bottom-txt no-more">没有更多了</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -188,7 +194,7 @@ const instanceStateOps = [
|
|
|
// const beginTime = ref(null) // 开始时间
|
|
|
// const endTime = ref(null) // 结束时间
|
|
|
const searchMoreVisible = ref(false)
|
|
|
-
|
|
|
+const isCollapsed = ref(false)
|
|
|
// store值
|
|
|
const taskProcessInfo = useTaskProcessStore()
|
|
|
// 下拉滚动属性值 start
|
|
@@ -494,4 +500,11 @@ const disabledInfinite = computed(() => loading.value || noMore.value)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.aside-wrap--collapsed {
|
|
|
+ margin-left: -10px;
|
|
|
+ .flow-content {
|
|
|
+ width: 0;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|