<!--
|
OA / 审批管理 / 审批模板
|
路由：/pages/oa/ApproveManage/approve-template/index
|
-->
|
<template>
|
<view class="approve-template-page sales-account">
|
<PageHeader title="审批模板"
|
@back="goBack" />
|
<view class="search-section">
|
<view class="search-bar">
|
<view class="search-input">
|
<up-input v-model="queryParams.templateName"
|
class="search-text"
|
placeholder="请输入模板名称"
|
clearable
|
@confirm="handleSearch" />
|
</view>
|
<view class="filter-button"
|
@click="handleSearch">
|
<up-icon name="search"
|
size="24"
|
color="#999" />
|
</view>
|
</view>
|
</view>
|
|
<scroll-view class="list-scroll"
|
scroll-y
|
:show-scrollbar="false"
|
@scrolltolower="loadMore">
|
<view v-if="list.length"
|
class="ledger-list">
|
<view v-for="item in list"
|
:key="item.id"
|
class="ledger-item">
|
<view class="item-header">
|
<view class="item-left">
|
<view class="document-icon">
|
<up-icon name="file-text"
|
size="16"
|
color="#ffffff" />
|
</view>
|
<text class="item-id">{{ item.templateName || "-" }}</text>
|
</view>
|
<u-tag :type="enabledTagType(item.enabled)"
|
:text="enabledText(item.enabled)" />
|
</view>
|
<up-divider />
|
<view class="item-details">
|
<view class="detail-row">
|
<text class="detail-label">审批类型</text>
|
<text class="detail-value">{{ businessTypeText(item.businessType) }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">审批节点</text>
|
<text class="detail-value">{{ nodeCount(item) }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">模板说明</text>
|
<text class="detail-value">{{ item.description || "-" }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">创建人</text>
|
<text class="detail-value">{{ item.createdUserName || "-" }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">创建时间</text>
|
<text class="detail-value">{{ item.createTime || "-" }}</text>
|
</view>
|
</view>
|
<view class="action-buttons">
|
<up-button class="action-btn"
|
size="small"
|
@click.stop="goDetail(item)">
|
详情
|
</up-button>
|
<up-button class="action-btn"
|
size="small"
|
type="primary"
|
@click.stop="goEdit(item)">
|
编辑
|
</up-button>
|
<up-button v-if="!isSystemTemplate(item)"
|
class="action-btn"
|
size="small"
|
type="error"
|
plain
|
@click.stop="handleDelete(item)">
|
删除
|
</up-button>
|
</view>
|
</view>
|
<up-loadmore :status="pageStatus" />
|
</view>
|
<view v-else
|
class="empty-wrap">
|
<up-empty mode="list"
|
text="暂无审批模板数据" />
|
</view>
|
</scroll-view>
|
|
<view class="fab-button"
|
@click="goAdd">
|
<up-icon name="plus"
|
size="28"
|
color="#ffffff" />
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { reactive, ref } from "vue";
|
import { onShow } from "@dcloudio/uni-app";
|
import PageHeader from "@/components/PageHeader.vue";
|
import {
|
deleteApprovalTemplate,
|
listApprovalTemplatePage,
|
} from "@/api/oa/approvalTemplate.js";
|
import {
|
buildTypeLabelMap,
|
fetchApprovalTemplateTypes,
|
getTemplateTypeLabel,
|
isSystemApprovalTemplate,
|
} from "../../_utils/approvalTemplateType.js";
|
|
const EDIT_STORAGE_KEY = "oa_approve_template_edit_row";
|
const typeLabelMap = ref({});
|
|
const queryParams = reactive({
|
templateName: "",
|
});
|
|
const list = ref([]);
|
const pageStatus = ref("loadmore");
|
|
const page = reactive({
|
current: 1,
|
size: 10,
|
total: 0,
|
});
|
|
const buildListParams = () => ({
|
page: {
|
current: page.current,
|
size: page.size,
|
},
|
approvalTemplateDto: {
|
templateName: queryParams.templateName?.trim() || undefined,
|
},
|
});
|
|
const enabledText = enabled => {
|
const val = String(enabled ?? "");
|
if (val === "1") return "启用";
|
if (val === "0") return "停用";
|
return "-";
|
};
|
|
const enabledTagType = enabled => {
|
const val = String(enabled ?? "");
|
if (val === "1") return "success";
|
if (val === "0") return "info";
|
return "info";
|
};
|
|
const businessTypeText = type =>
|
getTemplateTypeLabel(type, typeLabelMap.value);
|
|
const isSystemTemplate = isSystemApprovalTemplate;
|
|
const loadTemplateTypes = () =>
|
fetchApprovalTemplateTypes()
|
.then(opts => {
|
typeLabelMap.value = buildTypeLabelMap(opts);
|
})
|
.catch(() => {});
|
|
const nodeCount = item => {
|
const count = item?.nodes?.length;
|
return count != null ? `${count} 个` : "-";
|
};
|
|
const getList = () => {
|
if (pageStatus.value === "loading" || pageStatus.value === "nomore") return;
|
|
pageStatus.value = "loading";
|
listApprovalTemplatePage(buildListParams())
|
.then(res => {
|
const pageData = res?.data || {};
|
const records = pageData.records || [];
|
const total = pageData.total ?? 0;
|
|
if (page.current === 1) {
|
list.value = records;
|
} else {
|
list.value = [...list.value, ...records];
|
}
|
|
page.total = total;
|
if (list.value.length >= total || records.length < page.size) {
|
pageStatus.value = "nomore";
|
} else {
|
pageStatus.value = "loadmore";
|
page.current += 1;
|
}
|
})
|
.catch(() => {
|
if (page.current === 1) {
|
list.value = [];
|
}
|
pageStatus.value = "loadmore";
|
uni.showToast({ title: "查询失败", icon: "none" });
|
});
|
};
|
|
const handleSearch = () => {
|
page.current = 1;
|
pageStatus.value = "loadmore";
|
list.value = [];
|
getList();
|
};
|
|
const loadMore = () => {
|
if (pageStatus.value === "loadmore") {
|
getList();
|
}
|
};
|
|
const goBack = () => {
|
uni.navigateBack();
|
};
|
|
const goAdd = () => {
|
uni.removeStorageSync(EDIT_STORAGE_KEY);
|
uni.navigateTo({
|
url: "/pages/oa/ApproveManage/approve-template/edit",
|
});
|
};
|
|
const goDetail = item => {
|
if (!item?.id) return;
|
uni.navigateTo({
|
url: `/pages/oa/ApproveManage/approve-template/detail?id=${item.id}`,
|
});
|
};
|
|
const goEdit = item => {
|
if (!item?.id) return;
|
uni.setStorageSync(EDIT_STORAGE_KEY, item);
|
uni.navigateTo({
|
url: `/pages/oa/ApproveManage/approve-template/edit?id=${item.id}`,
|
});
|
};
|
|
const handleDelete = item => {
|
if (!item?.id) return;
|
if (isSystemTemplate(item)) {
|
uni.showToast({ title: "系统内置模板不可删除", icon: "none" });
|
return;
|
}
|
const name = item.templateName || "该模板";
|
uni.showModal({
|
title: "删除确认",
|
content: `确定删除「${name}」吗？删除后无法恢复。`,
|
confirmText: "删除",
|
confirmColor: "#f56c6c",
|
success: res => {
|
if (!res.confirm) return;
|
uni.showLoading({ title: "删除中...", mask: true });
|
deleteApprovalTemplate([item.id])
|
.then(() => {
|
uni.showToast({ title: "删除成功", icon: "success" });
|
handleSearch();
|
})
|
.catch(() => {
|
uni.showToast({ title: "删除失败", icon: "none" });
|
})
|
.finally(() => {
|
uni.hideLoading();
|
});
|
},
|
});
|
};
|
|
onShow(() => {
|
loadTemplateTypes();
|
handleSearch();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/styles/sales-common.scss";
|
|
.approve-template-page {
|
display: flex;
|
flex-direction: column;
|
min-height: 100vh;
|
}
|
|
.list-scroll {
|
flex: 1;
|
height: 0;
|
padding-bottom: calc(80px + env(safe-area-inset-bottom));
|
}
|
|
.empty-wrap {
|
padding: 48px 20px;
|
}
|
|
.action-buttons {
|
display: flex;
|
justify-content: flex-end;
|
gap: 10px;
|
margin-top: 12px;
|
padding-top: 12px;
|
border-top: 1px solid #f0f0f0;
|
}
|
|
.action-btn {
|
min-width: 72px;
|
}
|
</style>
|
