hebo/zhxy-jzd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整审批流程的显示问题

Browse Source
This commit is contained in:
ywyonui 2025-09-20 23:06:15 +08:00
parent 6f927ac65e
commit 1e99b1ef23
3 changed files with 74 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
src/components/LcglSp/index.vue
View File

@ -6,32 +6,32 @@
<view class="sp-list">
<view class="sp-item">
<view class="sp-info">
<text class="name">{{ sqr.userName }}</text>
<text class="dept">{{ sqr.deptName }}</text>
<text class="status" :class="getSqrStatusClass(sqr.approveStatus)">
{{ getSqrStatusText(sqr.approveStatus) }}
<text class="name">{{ sqrSp.userName }}</text>
<text class="dept">{{ sqrSp.deptName }}</text>
<text class="status" :class="getSqrStatusClass(sqrSp.approveStatus)">
{{ getSqrStatusText(sqrSp.approveStatus) }}
</text>
</view>
<!-- 显示审批意见和审批时间 -->
<view class="sp-detail" v-if="sqr.approveRemark || sqr.approveTime">
<view class="approval-info" v-if="sqr.approveRemark">
<view class="sp-detail" v-if="sqrSp.approveRemark || sqrSp.approveTime">
<view class="approval-info" v-if="sqrSp.approveRemark">
<text class="info-label">申请意见：</text>
<text class="info-value">{{ sqr.approveRemark }}</text>
<text class="info-value">{{ sqrSp.approveRemark }}</text>
</view>
<view class="approval-info" v-if="sqr.approveTime">
<view class="approval-info" v-if="sqrSp.approveTime">
<text class="info-label">申请时间：</text>
<text class="info-value">{{ formatTime(sqr.approveTime) }}</text>
<text class="info-value">{{ formatTime(sqrSp.approveTime) }}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 审批人 -->
<view class="info-section spr" v-if="sprList.length > 0">
<view class="info-section spr" v-if="sprSpList.length > 0">
<view class="section-title">审批人</view>
<view class="sp-list">
<view v-for="spr in sprList" :key="spr.id" class="sp-item">
<view class="sp-info">
<view v-for="spr in sprSpList" :key="spr.id" class="sp-item">
<view class="sp-info">
<text class="name">{{ spr.userName }}</text>
<text class="dept">{{ spr.deptName }}</text>
<text class="status" :class="getSprStatusClass(spr.approveStatus)">
@ -53,11 +53,11 @@
</view>
</view>
<!-- 抄送人 -->
<view class="info-section csr" v-if="csrList.length > 0">
<view class="info-section csr" v-if="csrSpList.length > 0">
<view class="section-title">抄送人</view>
<view class="sp-list">
<view v-for="csr in displayedcsrList" :key="csr.id" class="sp-item">
<view class="sp-info">
<view class="sp-info">
<text class="name">{{ csr.userName }}</text>
<text class="dept">{{ csr.deptName }}</text>
<text class="status" :class="getSprStatusClass(csr.approveStatus)">
@ -67,9 +67,9 @@
</view>
</view>
<!-- 更多按钮 -->
<view v-if="csrList.length > 2" class="more-button" @click="toggleCsrExpanded">
<view v-if="csrSpList.length > 2" class="more-button" @click="toggleCsrExpanded">
<text class="more-text">
{{ csrExpanded ? '收起' : `更多(${csrList.length - 2})` }}
{{ csrExpanded ? '收起' : `更多(${csrSpList.length - 2})` }}
</text>
<text class="more-icon" :class="{ expanded: csrExpanded }">▼</text>
</view>
@ -129,6 +129,9 @@
<script setup lang="ts">
import dayjs from "dayjs";
import { getLcglApi } from "@/api/base/lcglSpApi";
import { useDataStore } from "@/store/modules/data";
const { setLcgl } = useDataStore();
// 接收外部传入属性
const props = withDefaults(defineProps<{
@ -139,9 +142,9 @@ const props = withDefaults(defineProps<{
ywType: ''
});
const sqr = ref<any>({});
const sprList = ref<any>([]);
const csrList = ref<any>([]);
const sqrSp = ref<any>({});
const sprSpList = ref<any>([]);
const csrSpList = ref<any>([]);
const logList = ref<any>([]);
// 抄送人展开状态
@ -151,10 +154,10 @@ const logExpanded = ref(false);
// 计算属性：显示的抄送人列表
const displayedcsrList = computed(() => {
if (csrExpanded.value || csrList.value.length <= 2) {
return csrList.value;
if (csrExpanded.value || csrSpList.value.length <= 2) {
return csrSpList.value;
}
return csrList.value.slice(0, 2);
return csrSpList.value.slice(0, 2);
});
// 计算属性：显示的操作记录列表
@ -184,28 +187,6 @@ const toggleLogExpanded = () => {
logExpanded.value = !logExpanded.value;
};
// 获取状态样式类
const getStatusClass = (status: any) => {
const statusMap: Record<string, string> = {
draft: "status-draft",
pending: "status-pending",
approved: "status-approved",
rejected: "status-rejected",
};
return statusMap[status] || "status-default";
};
// 获取状态文本
const getStatusText = (status: any) => {
const statusMap: Record<string, string> = {
draft: "草稿",
pending: "待审批",
approved: "已通过",
rejected: "已驳回",
};
return statusMap[status] || "未知";
};
// 获取审批人状态文本
const getSqrStatusText = (status: any) => {
const statusMap: Record<string, string> = {
@ -217,8 +198,7 @@ const getSqrStatusText = (status: any) => {
// 获取抄送人状态样式类
const getSqrStatusClass = (status: any) => {
const statusMap: Record<string, string> = {
unread: "status-unread",
read: "status-read",
apply: "status-read",
};
return statusMap[status] || "status-default";
};
@ -230,6 +210,8 @@ const getSprStatusClass = (status: any) => {
approved: "status-approved",
rejected: "status-rejected",
skipped: "status-skipped",
stop: "status-stop",
transfer: "status-transfer",
};
return statusMap[status] || "status-default";
};
@ -241,12 +223,14 @@ const getSprStatusText = (status: any) => {
approved: "已同意",
rejected: "已驳回",
skipped: "已跳过",
stop: "已终止",
transfer: "已转办",
};
return statusMap[status] || "未知";
};
// 获取抄送人状态样式类
const getCCStatusClass = (status: any) => {
const getCsrStatusClass = (status: any) => {
const statusMap: Record<string, string> = {
unread: "status-unread",
read: "status-read",
@ -255,7 +239,7 @@ const getCCStatusClass = (status: any) => {
};
// 获取抄送人状态文本
const getCCStatusText = (status: any) => {
const getCsrStatusText = (status: any) => {
const statusMap: Record<string, string> = {
unread: "未读",
read: "已读",
@ -275,14 +259,15 @@ const loadLcgl = async () => {
}
// 调用后端API获取审批流程数据
const res = await getLcglApi(params);
sqr.value = {};
sprList.value = [];
csrList.value = [];
sqrSp.value = {};
sqrSp.value = [];
csrSpList.value = [];
logList.value = [];
setLcgl(res.result || {});
if (res.resultCode === 1 && res.result) {
sqr.value = res.result.sqrSp || {};
sprList.value = res.result.sprSpList || [];
csrList.value = res.result.csrSpList || [];
sqrSp.value = res.result.sqrSp || {};
sprSpList.value = res.result.sprSpList || [];
csrSpList.value = res.result.csrSpList || [];
logList.value = res.result.logList || [];
}
} catch (error) {
@ -311,27 +296,29 @@ if (props.ywId) {
<style lang="scss" scoped>
.lcgl-info {
padding: 0 30rpx;
.info-section {
margin-bottom: 30rpx;
padding: 30rpx;
background: #fff;
border-radius: 16rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
&.sqr {
/* 申请人区域特殊样式可以在这里添加 */
background-color: white;
}
&.spr {
/* 审批人区域特殊样式可以在这里添加 */
background-color: white;
}
&.csr {
/* 抄送人区域特殊样式可以在这里添加 */
background-color: white;
}
&.log {
margin-bottom: 80rpx; // 操作记录区域增加底部间距
}
@ -381,38 +368,43 @@ if (props.ywId) {
margin-left: auto;
&.status-pending {
background: #fff7e6;
background-color: #fff7e6;
color: #fa8c16;
}
&.status-approved {
background: #f6ffed;
background-color: #f6ffed;
color: #52c41a;
}
&.status-rejected {
background: #fff2f0;
color: #ff4d4f;
background-color: #fff1f0;
color: #f5222d;
}
&.status-withdrawn {
background-color: #f9f9f9;
color: #8c8c8c;
}
&.status-skipped {
background: #f0f0f0;
color: #666;
background-color: #f0f5ff;
color: #2f54eb;
}
&.status-unread {
background: #fff7e6;
color: #fa8c16;
&.status-stop {
background-color: #fff1f0;
color: #ff4d4f;
}
&.status-read {
background: #f6ffed;
color: #52c41a;
&.status-transfer {
background-color: #f9f0ff;
color: #722ed1;
}
&.status-default {
background: #f0f0f0;
color: #666;
background-color: #fafafa;
color: #595959;
}
}
}

4
src/pages/base/xk/tf/detail.vue
View File

@ -23,7 +23,7 @@
</view>
</view>
<!-- 审批流程 -->
<LcglSpList :yw-id="xkTf.id" yw-type="XK_TF" />
<LcglSp :yw-id="xkTf.id" yw-type="XK_TF" />
</view>
<template #bottom>
<view class="white-bg-color py-5">
@ -41,7 +41,7 @@ import { useDataStore } from "@/store/modules/data";
import { useUserStore } from "@/store/modules/user";
import XkPayXs from "@/pages/base/xk/components/XkPayXs/index.vue"
import XkPaySuccessXkkc from "@/pages/base/xk/components/XkPaySuccessXkkc/index.vue"
import LcglSpList from "@/components/LcglSpList/index.vue";
import LcglSp from "@/components/LcglSp/index.vue";
import PreviewImage from "@/components/PreviewImage/index.vue";
import { getXkTfDetailByIdApi } from "@/api/base/xkApi";
import { xxtsFindByIdApi } from "@/api/base/xxtsApi";

11
src/store/modules/data.ts
View File

@ -11,7 +11,8 @@ export const useDataStore = defineStore({
params: {},
appCode: "JZ",
qk: {},
tf: {}
tf: {},
lcgl: {}
}),
getters: {
getData(): any {
@ -40,7 +41,10 @@ export const useDataStore = defineStore({
},
getTf(): any {
return this.tf;
}
},
getLcgl(): any {
return this.lcgl;
},
},
actions: {
cleanData() {
@ -77,6 +81,9 @@ export const useDataStore = defineStore({
setTf(data: any) {
this.tf = data;
},
setLcgl(data: any) {
this.lcgl = data;
},
},
persist: {
enabled: true,