|
|
@@ -2,17 +2,16 @@
|
|
|
<view class="content" :style="`height: ${contentHeight}`">
|
|
|
<z-paging :fixed="false" @query="queryData" :value="list" :default-page-size="pSize" :default-page-no="pageNo"
|
|
|
ref="paging">
|
|
|
- <view @click="handleToDetail(process)" v-for="(process, index) in list" :key="index">
|
|
|
- <uni-card :isFull="true" padding="10px 0">
|
|
|
+ <view v-for="(process, index) in list" :key="index">
|
|
|
+ <uni-card @click="handleToDetail(process)" :isFull="true" padding="10px 0">
|
|
|
<uni-row>
|
|
|
<uni-col :xs="3" :sm="2">
|
|
|
<view class="icon_container">
|
|
|
- <text style="
|
|
|
- font-size: 2.5rem;" class="ygoa-icon" :class="iconDict[process.modelName]"></text>
|
|
|
+ <text style="font-size: 2.5rem;" class="ygoa-icon"
|
|
|
+ :class="iconDict[process.modelName]"></text>
|
|
|
</view>
|
|
|
</uni-col>
|
|
|
<uni-col :xs="21" :sm="22">
|
|
|
-
|
|
|
<uni-card padding="0" :isFull="true" :border="false" :is-shadow="false">
|
|
|
<template v-slot:title>
|
|
|
<uni-row>
|
|
|
@@ -39,7 +38,7 @@
|
|
|
<uni-row>
|
|
|
<uni-col :xs="8" :sm="7">流程类型:</uni-col>
|
|
|
<uni-col :xs="15" :sm="16" style="color: blue;">{{ process.typeName || '无'
|
|
|
- }}</uni-col>
|
|
|
+ }}</uni-col>
|
|
|
</uni-row>
|
|
|
<uni-row>
|
|
|
<uni-col :xs="8" :sm="7">创建时间:</uni-col>
|
|
|
@@ -50,6 +49,33 @@
|
|
|
</uni-col>
|
|
|
</uni-row>
|
|
|
</uni-card>
|
|
|
+ <uni-collapse :accordion="true" @change="handleCollapseChange($event, process, index)">
|
|
|
+ <uni-collapse-item :border="false">
|
|
|
+ <template v-slot:title>
|
|
|
+ <view class="flow_step_section">
|
|
|
+ <uni-section title="当前流程" type="line" titleFontSize="0.8rem"></uni-section>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view class="flow_step_container" v-if="process.flowStepItem != undefined">
|
|
|
+ <up-steps class="up_step_view" :current="process.flowStepItem.stepActive" activeColor="#18bc37" inactiveColor="#2979ff" direction="column">
|
|
|
+ <view v-for="(step, index) in process.flowStepItem.options">
|
|
|
+ <up-steps-item :contentClass="'redcontent'" v-if="step.state == 3" :title="step.title + ' 退回'"
|
|
|
+ :desc="step.desc" :key="index" error></up-steps-item>
|
|
|
+ <up-steps-item :contentClass="'redcontent'" v-else-if="step.state == 0" :title="step.title + ' 撤销'"
|
|
|
+ :desc="step.desc" :key="index" error></up-steps-item>
|
|
|
+ <up-steps-item v-else-if="index == process.flowStepItem.stepActive" :title="step.title" :desc="step.desc" :key="index">
|
|
|
+ <template #icon>
|
|
|
+ <view class="active_step_circle">
|
|
|
+ <text class="active_step_text">{{ index + 1 }}</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </up-steps-item>
|
|
|
+ <up-steps-item v-else :title="step.title" :desc="step.desc" :key="index"></up-steps-item>
|
|
|
+ </view>
|
|
|
+ </up-steps>
|
|
|
+ </view>
|
|
|
+ </uni-collapse-item>
|
|
|
+ </uni-collapse>
|
|
|
</view>
|
|
|
</z-paging>
|
|
|
</view>
|
|
|
@@ -57,6 +83,9 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref } from 'vue';
|
|
|
+import { getProcessFlow } from '@/api/process'
|
|
|
+import { useUserStore } from '@/store/user.js'
|
|
|
+const userStore = useUserStore()
|
|
|
const iconDict = ref({
|
|
|
'外协结算申请': 'icon-outsourcing',
|
|
|
'用车申请': 'icon-apply-car',
|
|
|
@@ -83,8 +112,36 @@ const emits = defineEmits([
|
|
|
|
|
|
const paging = ref(null)
|
|
|
// 加载完成 更新数据
|
|
|
-const list=ref([])
|
|
|
-const totalPage=ref(0)
|
|
|
+const list = ref([])
|
|
|
+const totalPage = ref(0)
|
|
|
+
|
|
|
+function handleCollapseChange(event, process, index) {
|
|
|
+ if (event) {
|
|
|
+ getProcessFlow(userStore.user.useId, process).then(({ returnParams }) => {
|
|
|
+ const flowStepItem = {
|
|
|
+ options: [],
|
|
|
+ stepActive: -1
|
|
|
+ }
|
|
|
+ flowStepItem.options = returnParams.list.map((item, index) => {
|
|
|
+ const { tmodelName, name, createdate, finishdate, remark, state } = item
|
|
|
+ if (state == 1) {
|
|
|
+ flowStepItem.stepActive = index
|
|
|
+ }
|
|
|
+ const title = tmodelName + (name == '' ? '' : ' ( ' + name + ' )')
|
|
|
+ const desc = (finishdate == '' ? '\n' : '办理时间: ' + finishdate)
|
|
|
+ return {
|
|
|
+ title,
|
|
|
+ desc,
|
|
|
+ state
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (flowStepItem.stepActive === -1) flowStepItem.stepActive = returnParams.list.length
|
|
|
+ list.value[index]['flowStepItem'] = flowStepItem
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
function complete(dataList, total, pageNo) {
|
|
|
totalPage.value = Math.ceil(total / props.pSize)
|
|
|
if (pageNo <= totalPage.value) {
|
|
|
@@ -149,10 +206,73 @@ defineExpose({
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
+<style lang="scss" scoped>
|
|
|
@import url("@/static/font/ygoa/iconfont.css");
|
|
|
|
|
|
+.flow_step_section {
|
|
|
+ .uni-section .uni-section-header {
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.flow_step_container {
|
|
|
+ min-height: 100px;
|
|
|
+ .up_step_view {
|
|
|
+ ::v-deep .u-steps {
|
|
|
+ .u-steps-item {
|
|
|
+ padding-bottom: 11px;
|
|
|
+ .redcontent {
|
|
|
+ .u-text__value--content {
|
|
|
+ color: #ff4500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active_step_circle {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 100px;
|
|
|
+ border-width: 1px;
|
|
|
+ border-color: #A78BFA;
|
|
|
+ background-color: #A78BFA;
|
|
|
+ border-style: solid;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transition: background-color .3s;
|
|
|
+
|
|
|
+ .active_step_text {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 11px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 11px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-steps-item view:last-of-type {
|
|
|
+ margin-top: 0 !important;
|
|
|
+
|
|
|
+ .u-text__value--content {
|
|
|
+ font-size: 16px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-text__value--main {
|
|
|
+ font-size: 16px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
.content {
|
|
|
+
|
|
|
.icon_container {
|
|
|
margin: 45% 0;
|
|
|
}
|
|
|
@@ -168,6 +288,7 @@ defineExpose({
|
|
|
margin: 5px 0;
|
|
|
color: #333;
|
|
|
}
|
|
|
+
|
|
|
.process_status {
|
|
|
margin: 5px 0;
|
|
|
height: 1.5rem;
|
wangpx