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

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

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

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

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