1、调整审批流程的显示和加载
2、完善详情根据待办获取数据信息
This commit is contained in:
ywyonui
parent
d46c17386d
commit
766e98da1e
10
src/api/base/lcglApi.ts
Normal file
10
src/api/base/lcglApi.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { get } from "@/utils/request";
|
||||
|
||||
/**
|
||||
* 获取审批流程
|
||||
* @param ywId 业务ID
|
||||
* @param ywType 业务类型
|
||||
*/
|
||||
export const getByYwIdAndYwTypeApi = (ywId: string, ywType: string) => {
|
||||
return get("/api/lcglSp/getByYwIdAndYwType", { ywId, ywType });
|
||||
};
|
||||
@ -64,12 +64,3 @@ export const jzXsQjListApi = (params: any) => {
|
||||
export const getXsQjDetailApi = (id: string) => {
|
||||
return get("/api/xsQj/getDetail", { id });
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取请假审批流程
|
||||
* @param ywId 业务ID
|
||||
* @param ywType 业务类型
|
||||
*/
|
||||
export const getXsQjApprovalProcessApi = (ywId: string, ywType: string = 'XS_QJ') => {
|
||||
return get("/api/lcglSp/getByYwIdAndYwType", { ywId, ywType });
|
||||
};
|
||||
|
||||
6
src/api/base/xxtsApi.ts
Normal file
6
src/api/base/xxtsApi.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { get } from "@/utils/request";
|
||||
|
||||
// 根据ID获取消息推送详情
|
||||
export const xxtsFindByIdApi = async (params: any) => {
|
||||
return await get("/api/xxts/findById", params);
|
||||
};
|
||||
@ -4,7 +4,7 @@
|
||||
<text class="applicant-name">审批进度</text>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="progress-list">
|
||||
<view class="progress-list" v-if="approvalList.length > 0">
|
||||
<view class="progress-item" v-for="(approver, index) in approvalList" :key="index">
|
||||
<view class="progress-item-row">
|
||||
<view class="item-avatar">
|
||||
@ -27,34 +27,57 @@
|
||||
<view class="progress-item-line" v-if="index < approvalList.length - 1"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty-state" v-else>
|
||||
<view class="empty-icon">
|
||||
<uni-icons type="info" size="40" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view class="empty-text">暂无审批进度信息</view>
|
||||
<view class="empty-subtext">可能审批流程尚未启动或数据加载失败</view>
|
||||
<view class="retry-button" @click="loadApprovalProcess" v-if="hasError">
|
||||
<text class="retry-text">重新加载</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import dayjs from "dayjs";
|
||||
import { getXsQjApprovalProcessApi } from "@/api/base/xsQjApi";
|
||||
import { getByYwIdAndYwTypeApi } from "@/api/base/lcglApi";
|
||||
|
||||
// 接收外部传入属性
|
||||
const props = withDefaults(defineProps<{
|
||||
qjId: string
|
||||
ywId: string,
|
||||
ywType: string,
|
||||
showSqr: boolean,
|
||||
showSpr: boolean,
|
||||
showCsr: boolean,
|
||||
}>(), {
|
||||
qjId: ''
|
||||
ywId: '',
|
||||
ywType: '',
|
||||
showSqr: true,
|
||||
showSpr: true,
|
||||
showCsr: false
|
||||
});
|
||||
|
||||
// 审批流程数据
|
||||
const approvalList = ref<any[]>([]);
|
||||
// 错误状态标识
|
||||
const hasError = ref(false);
|
||||
|
||||
// 获取审批流程
|
||||
const loadApprovalProcess = async () => {
|
||||
if (!props.qjId) return;
|
||||
if (!props.ywId || !props.ywType) return;
|
||||
|
||||
try {
|
||||
// 调用后端API获取审批流程数据
|
||||
const res = await getXsQjApprovalProcessApi(props.qjId, 'XS_QJ');
|
||||
// 重置错误状态
|
||||
hasError.value = false;
|
||||
|
||||
// 调用后端API获取审批流程数据
|
||||
const res = await getByYwIdAndYwTypeApi(props.ywId, props.ywType);
|
||||
approvalList.value = [];
|
||||
if (res.resultCode === 1 && res.result) {
|
||||
// 转换为前端显示格式（后端已按sort字段排序）
|
||||
approvalList.value = res.result.map((item: any) => ({
|
||||
const list = res.result.map((item: any) => ({
|
||||
userName: item.userName || getDefaultUserName(item.spType),
|
||||
spType: item.spType,
|
||||
approveStatus: item.approveStatus,
|
||||
@ -62,49 +85,34 @@ const loadApprovalProcess = async () => {
|
||||
approveRemark: item.approveRemark,
|
||||
avatar: item.avatar || '/static/base/home/11222.png'
|
||||
}));
|
||||
for (let item of list) {
|
||||
if ((item.spType === 'SQ' && !props.showSqr)
|
||||
|| (item.spType === 'SP' && !props.showSpr)
|
||||
|| (item.spType === 'CC' && !props.showCsr)) {
|
||||
continue;
|
||||
}
|
||||
approvalList.value.push(item);
|
||||
}
|
||||
} else {
|
||||
loadMockData();
|
||||
hasError.value = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取审批流程失败:', error);
|
||||
// 如果API调用失败，使用模拟数据
|
||||
loadMockData();
|
||||
approvalList.value = [];
|
||||
hasError.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取默认用户名
|
||||
const getDefaultUserName = (spType: string) => {
|
||||
switch (spType) {
|
||||
case 'SQ': return '学生';
|
||||
case 'SP': return '班主任';
|
||||
case 'SQ': return '家长';
|
||||
case 'SP': return '教师';
|
||||
case 'CC': return '家长';
|
||||
default: return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
// 加载模拟数据（备用方案）
|
||||
const loadMockData = () => {
|
||||
const mockData = [
|
||||
{
|
||||
userName: '学生',
|
||||
spType: 'SQ',
|
||||
approveStatus: 'approved',
|
||||
approveTime: new Date(),
|
||||
approveRemark: '申请人提交',
|
||||
avatar: '/static/base/home/11222.png'
|
||||
},
|
||||
{
|
||||
userName: '班主任',
|
||||
spType: 'SP',
|
||||
approveStatus: 'pending',
|
||||
approveTime: null,
|
||||
approveRemark: '待审批',
|
||||
avatar: '/static/base/home/11222.png'
|
||||
}
|
||||
];
|
||||
approvalList.value = mockData;
|
||||
};
|
||||
|
||||
// 获取审批类型文本
|
||||
const getSpTypeText = (spType: string) => {
|
||||
switch (spType) {
|
||||
@ -144,15 +152,15 @@ const formatTime = (time: string | Date) => {
|
||||
return dayjs(time).format('YYYY-MM-DD HH:mm');
|
||||
};
|
||||
|
||||
// 监听qjId变化
|
||||
watch(() => props.qjId, (newVal) => {
|
||||
// 监听ywId变化
|
||||
watch(() => props.ywId, (newVal) => {
|
||||
if (newVal) {
|
||||
loadApprovalProcess();
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化
|
||||
if (props.qjId) {
|
||||
if (props.ywId) {
|
||||
loadApprovalProcess();
|
||||
}
|
||||
</script>
|
||||
@ -272,5 +280,43 @@ if (props.qjId) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-subtext {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
padding: 8px 24px;
|
||||
background-color: #007AFF;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
.retry-text {
|
||||
color: #FFFFFF;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -36,7 +36,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 审批流程 -->
|
||||
<ProgressList :qjId="qjId" />
|
||||
<LcglSpList :yw-id="qjId" yw-type="XS_QJ" />
|
||||
</view>
|
||||
<template #bottom>
|
||||
<view class="white-bg-color py-5">
|
||||
@ -57,7 +57,7 @@
|
||||
import { navigateBack } from "@/utils/uniapp";
|
||||
import { useDataStore } from "@/store/modules/data";
|
||||
import { getXsQjDetailApi } from "@/api/base/xsQjApi";
|
||||
import ProgressList from "./components/progressList.vue";
|
||||
import LcglSpList from "@/components/LcglSpList/index.vue";
|
||||
|
||||
const { getData } = useDataStore();
|
||||
|
||||
|
||||
@ -1,276 +0,0 @@
|
||||
<template>
|
||||
<view class="approval-progress">
|
||||
<view class="progress-title">
|
||||
<text class="applicant-name">审批进度</text>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="progress-list">
|
||||
<view class="progress-item" v-for="(approver, index) in approvalList" :key="index">
|
||||
<view class="progress-item-row">
|
||||
<view class="item-avatar">
|
||||
<image
|
||||
:src="approver.avatar || '/static/base/home/11222.png'"
|
||||
class="w-full h-full"
|
||||
></image>
|
||||
</view>
|
||||
<view class="item-middle">
|
||||
<text class="item-name">{{ approver.userName }}</text>
|
||||
<text class="item-detail">{{ getSpTypeText(approver.spType) }}</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="item-time" v-if="approver.approveTime">{{ formatTime(approver.approveTime) }}</text>
|
||||
<text class="item-status" :class="getStatusClass(approver.approveStatus)">
|
||||
{{ getStatusText(approver.approveStatus) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="progress-item-line" v-if="index < approvalList.length - 1"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import dayjs from "dayjs";
|
||||
import { getXsQjApprovalProcessApi } from "@/api/base/xsQjApi";
|
||||
|
||||
// 接收外部传入属性
|
||||
const props = withDefaults(defineProps<{
|
||||
xkTfId: string
|
||||
}>(), {
|
||||
xkTfId: ''
|
||||
});
|
||||
|
||||
// 审批流程数据
|
||||
const approvalList = ref<any[]>([]);
|
||||
|
||||
// 获取审批流程
|
||||
const loadApprovalProcess = async () => {
|
||||
if (!props.xkTfId) return;
|
||||
|
||||
try {
|
||||
// 调用后端API获取审批流程数据
|
||||
const res = await getXsQjApprovalProcessApi(props.xkTfId, 'XK_TF');
|
||||
|
||||
if (res.resultCode === 1 && res.result) {
|
||||
// 转换为前端显示格式（后端已按sort字段排序）
|
||||
approvalList.value = res.result.map((item: any) => ({
|
||||
userName: item.userName || getDefaultUserName(item.spType),
|
||||
spType: item.spType,
|
||||
approveStatus: item.approveStatus,
|
||||
approveTime: item.approveTime,
|
||||
approveRemark: item.approveRemark,
|
||||
avatar: item.avatar || '/static/base/home/11222.png'
|
||||
}));
|
||||
} else {
|
||||
loadMockData();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取审批流程失败:', error);
|
||||
// 如果API调用失败，使用模拟数据
|
||||
loadMockData();
|
||||
}
|
||||
};
|
||||
|
||||
// 获取默认用户名
|
||||
const getDefaultUserName = (spType: string) => {
|
||||
switch (spType) {
|
||||
case 'SQ': return '学生';
|
||||
case 'SP': return '班主任';
|
||||
case 'CC': return '家长';
|
||||
default: return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
// 加载模拟数据（备用方案）
|
||||
const loadMockData = () => {
|
||||
const mockData = [
|
||||
{
|
||||
userName: '学生',
|
||||
spType: 'SQ',
|
||||
approveStatus: 'approved',
|
||||
approveTime: new Date(),
|
||||
approveRemark: '申请人提交',
|
||||
avatar: '/static/base/home/11222.png'
|
||||
},
|
||||
{
|
||||
userName: '班主任',
|
||||
spType: 'SP',
|
||||
approveStatus: 'pending',
|
||||
approveTime: null,
|
||||
approveRemark: '待审批',
|
||||
avatar: '/static/base/home/11222.png'
|
||||
}
|
||||
];
|
||||
approvalList.value = mockData;
|
||||
};
|
||||
|
||||
// 获取审批类型文本
|
||||
const getSpTypeText = (spType: string) => {
|
||||
switch (spType) {
|
||||
case 'SQ': return '申请人';
|
||||
case 'SP': return '审批人';
|
||||
case 'CC': return '抄送人';
|
||||
default: return '';
|
||||
}
|
||||
};
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'apply': return '已申请';
|
||||
case 'pending': return '待处理';
|
||||
case 'approved': return '已同意';
|
||||
case 'rejected': return '已拒绝';
|
||||
case 'cc_sent': return '已抄送';
|
||||
default: return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
// 获取状态样式类
|
||||
const getStatusClass = (status: string) => {
|
||||
switch (status) {
|
||||
case 'pending': return 'status-pending';
|
||||
case 'approved': return 'status-approved';
|
||||
case 'rejected': return 'status-rejected';
|
||||
case 'cc_sent': return 'status-cc';
|
||||
default: return '';
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (time: string | Date) => {
|
||||
if (!time) return '';
|
||||
return dayjs(time).format('YYYY-MM-DD HH:mm');
|
||||
};
|
||||
|
||||
// 监听xkTfId变化
|
||||
watch(() => props.xkTfId, (newVal) => {
|
||||
if (newVal) {
|
||||
loadApprovalProcess();
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化
|
||||
if (props.xkTfId) {
|
||||
loadApprovalProcess();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.approval-progress {
|
||||
margin: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.progress-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.applicant-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #eee;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.progress-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.progress-item {
|
||||
position: relative;
|
||||
|
||||
.progress-item-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
|
||||
.item-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-middle {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.item-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.item-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
.item-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.item-status {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
|
||||
&.status-pending {
|
||||
background-color: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.status-approved {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.status-rejected {
|
||||
background-color: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.status-cc {
|
||||
background-color: #f0f5ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-item-line {
|
||||
height: 20px;
|
||||
width: 2px;
|
||||
background-color: #e8e8e8;
|
||||
margin-left: 19px;
|
||||
margin-top: -10px;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -23,12 +23,12 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 审批流程 -->
|
||||
<ProgressList :qjId="xkTf.id" />
|
||||
<LcglSpList :yw-id="xkTf.id" yw-type="XK_TF" />
|
||||
</view>
|
||||
<template #bottom>
|
||||
<view class="white-bg-color py-5">
|
||||
<view class="flex-row items-center pb-10 pt-5">
|
||||
<u-button text="返回" class="ml-15 mr-7" :plain="true" @click="navigateBack" />
|
||||
<u-button text="返回" class="ml-15 mr-7" :plain="true" @click="goHome" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -37,19 +37,28 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { navigateBack } from "@/utils/uniapp";
|
||||
import { useDataStore } from "@/store/modules/data";
|
||||
import { imagUrl } from "@/utils";
|
||||
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 ProgressList from "./components/progressList.vue";
|
||||
import LcglSpList from "@/components/LcglSpList/index.vue";
|
||||
import PreviewImage from "@/components/PreviewImage/index.vue";
|
||||
import { getXkTfDetailByIdApi } from "@/api/base/xkApi";
|
||||
import { xxtsFindByIdApi } from "@/api/base/xxtsApi";
|
||||
const { loginByOpenId } = useUserStore();
|
||||
const { getTf } = useDataStore();
|
||||
|
||||
const xkTf = ref<any>({});
|
||||
const xkTfQdList = ref<any>([]);
|
||||
const jfPzList = ref<any>([]);
|
||||
|
||||
// 返回首页
|
||||
const goHome = () => {
|
||||
uni.reLaunch({
|
||||
url: "/pages/base/home/index"
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化数据
|
||||
const initData = (tf: any, tfQdList: any[]) => {
|
||||
xkTf.value = tf;
|
||||
@ -59,12 +68,41 @@ const initData = (tf: any, tfQdList: any[]) => {
|
||||
jfPzList.value = jfPz.split(',') || [];
|
||||
};
|
||||
|
||||
onLoad((options: any) => {
|
||||
// 表示包含了退费信息
|
||||
if (getTf && getTf.xkTf) {
|
||||
initData(getTf.xkTf, getTf.xkTfQdList);
|
||||
} else if (options.xkTfId) {
|
||||
// 从待办加载
|
||||
const loadByDb = async (data: any) => {
|
||||
// 检查登录状态
|
||||
const isLoggedIn = await loginByOpenId(data.openId);
|
||||
if (!isLoggedIn) {
|
||||
console.log("用户未登录，跳过处理");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// 优先从后端根据url中的id去查询Xxts
|
||||
const xxtsRes = await xxtsFindByIdApi({ id: data.id });
|
||||
if (xxtsRes && xxtsRes.result) {
|
||||
const xxts = xxtsRes.result;
|
||||
// 根据主表ID去查询学生请假信息
|
||||
const res = await getXkTfDetailByIdApi(xxts.xxzbId);
|
||||
if (!res.result) {
|
||||
uni.showToast({ title: '未找到数据', icon: 'none' });
|
||||
goHome();
|
||||
}
|
||||
nextTick(() => {
|
||||
initData(res.result.xkTf, res.result.xkTfQdList);
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取待办信息失败", error);
|
||||
}
|
||||
};
|
||||
|
||||
onLoad(async (data: any) => {
|
||||
// 从待办过来的，需要从后端获取数据
|
||||
if (data && data.from && data.from == "db") {
|
||||
loadByDb(data);
|
||||
} else if (getTf && getTf.xkTf) {
|
||||
// 表示包含了退费信息
|
||||
initData(getTf.xkTf, getTf.xkTfQdList);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user