From f670b79094c95d791fc43c8fc8b5858ebf8426dc Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 17 九月 2026 13:50:29 +0800
Subject: [PATCH] 一些向web对齐
---
src/pages/cooperativeOffice/collaborativeApproval/index.vue | 174 +++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 149 insertions(+), 25 deletions(-)
diff --git a/src/pages/cooperativeOffice/collaborativeApproval/index.vue b/src/pages/cooperativeOffice/collaborativeApproval/index.vue
index 910cdc3..dddd75a 100644
--- a/src/pages/cooperativeOffice/collaborativeApproval/index.vue
+++ b/src/pages/cooperativeOffice/collaborativeApproval/index.vue
@@ -4,6 +4,14 @@
<!-- 浣跨敤閫氱敤椤甸潰澶撮儴缁勪欢 -->
<PageHeader :title="pageTitle"
@back="goBack" />
+ <!-- 瀹℃壒绫诲瀷鍒囨崲锛堜粠鑿滃崟鐩存帴杩涘叆鏃跺彲鍒囨崲锛涚粡 index1~8 杩涘叆鏃朵笉灞曠ず锛� -->
+ <view v-if="showTypeTabs"
+ class="type-tabs-wrap">
+ <up-tabs :list="typeTabList"
+ :current="activeTypeIndex"
+ line-color="#ed8d05"
+ @click="onTypeTabClick" />
+ </view>
<!-- 鎼滅储鍜岀瓫閫夊尯鍩� -->
<view class="search-section">
<view class="search-bar">
@@ -13,6 +21,14 @@
v-model="searchForm.approveId"
clearable />
</view>
+ <view class="filter-chip"
+ :class="{ 'filter-chip--active': searchForm.approveStatus !== '' }"
+ @click="openStatusSheet">
+ <text class="filter-chip-text">{{ approveStatusText }}</text>
+ <up-icon name="arrow-down"
+ size="14"
+ color="#999"></up-icon>
+ </view>
<view class="search-button"
@click="getList">
<up-icon name="search"
@@ -21,6 +37,11 @@
</view>
</view>
</view>
+ <up-action-sheet :show="showStatusSheet"
+ title="瀹℃壒鐘舵��"
+ :actions="statusActions"
+ @select="onSelectStatus"
+ @close="showStatusSheet = false" />
<!-- 瀹℃壒鍒楄〃 -->
<view class="ledger-list"
v-if="ledgerList.length > 0">
@@ -105,7 +126,6 @@
缂栬緫
</u-button>
<u-button type="info"
- v-if="item.approveType == 5 || item.approveType == 6 || item.approveType == 7"
size="small"
class="action-btn detail"
@click="handleDetailClick(item)">
@@ -131,7 +151,7 @@
</view>
<!-- 娴姩鎿嶄綔鎸夐挳 -->
<view class="fab-button"
- v-if="props.approveType != 5 && props.approveType != 6 && props.approveType != 7"
+ v-if="activeApproveType != 5 && activeApproveType != 6 && activeApproveType != 7"
@click="handleAdd">
<up-icon name="plus"
size="24"
@@ -141,13 +161,23 @@
</template>
<script setup>
- import { ref, toRefs, reactive } from "vue";
+ import { ref, toRefs, reactive, computed } from "vue";
import PageHeader from "@/components/PageHeader.vue";
import { approveProcessListPage } from "@/api/collaborativeApproval/approvalProcess";
import { onLoad, onShow } from "@dcloudio/uni-app";
import useUserStore from "@/store/modules/user";
- // 鎺ユ敹鐖剁粍浠朵紶閫掔殑 approveType 鍙傛暟
+ /** 瀹℃壒鐘舵�佺瓫閫夛紙涓� Web approvalProcess 鍒楄〃涓�鑷达級 */
+ const APPROVE_STATUS_OPTIONS = [
+ { value: "", label: "鍏ㄩ儴鐘舵��" },
+ { value: 0, label: "寰呭鏍�" },
+ { value: 1, label: "瀹℃牳涓�" },
+ { value: 2, label: "瀹℃牳瀹屾垚" },
+ { value: 3, label: "瀹℃牳鏈�氳繃" },
+ { value: 4, label: "宸查噸鏂版彁浜�" },
+ ];
+
+ // 鎺ユ敹鐖剁粍浠朵紶閫掔殑 approveType 鍙傛暟锛坕ndex1~8 鍥哄畾绫诲瀷锛�0 琛ㄧず鏈寚瀹氾級
const props = defineProps({
approveType: {
type: Number,
@@ -155,22 +185,50 @@
},
});
- // 鏄犲皠 approveType 鍒板搴旂殑椤甸潰鏍囬
- const getPageTitle = type => {
- const titleMap = {
- 1: "鍏嚭绠＄悊",
- 2: "璇峰亣绠＄悊",
- 3: "鍑哄樊绠＄悊",
- 4: "鎶ラ攢绠＄悊",
- 5: "閲囪喘绠＄悊",
- 6: "鎶ヤ环绠＄悊",
- 7: "鍙戣揣瀹℃壒",
- 8: "鍗遍櫓浣滀笟瀹℃壒",
- };
- return titleMap[type] || "瀹℃壒绠＄悊";
+ // 瀹℃壒绫诲瀷鏍囬
+ const APPROVE_TYPE_LABELS = {
+ 1: "鍏嚭绠＄悊",
+ 2: "璇峰亣绠＄悊",
+ 3: "鍑哄樊绠＄悊",
+ 4: "鎶ラ攢绠＄悊",
+ 5: "閲囪喘瀹℃壒",
+ 6: "鎶ヤ环瀹℃壒",
+ 7: "鍙戣揣瀹℃壒",
+ 8: "鍗遍櫓浣滀笟瀹℃壒",
};
- const pageTitle = getPageTitle(props.approveType);
+ /** 鍙垏鎹㈢殑鍗忓悓瀹℃壒绫诲瀷锛堜笌 Web approvalProcess Tab 涓�鑷达級 */
+ const TYPE_TAB_VALUES = [1, 2, 3, 4, 5, 6, 7];
+
+ /** 鐖剁骇浼犲叆鐨勫浐瀹氱被鍨嬶紱0 琛ㄧず鏈寚瀹氾紝鍙敱椤靛唴 Tab 鍒囨崲 */
+ const fixedApproveType = computed(() => Number(props.approveType) || 0);
+ const activeApproveType = ref(fixedApproveType.value || 1);
+
+ const showTypeTabs = computed(() => fixedApproveType.value === 0);
+
+ const typeTabList = computed(() =>
+ TYPE_TAB_VALUES.map(value => ({ name: APPROVE_TYPE_LABELS[value] }))
+ );
+
+ const activeTypeIndex = computed(() => {
+ const idx = TYPE_TAB_VALUES.indexOf(activeApproveType.value);
+ return idx >= 0 ? idx : 0;
+ });
+
+ const pageTitle = computed(
+ () => APPROVE_TYPE_LABELS[activeApproveType.value] || "鍗忓悓瀹℃壒"
+ );
+
+ const onTypeTabClick = item => {
+ activeApproveType.value = TYPE_TAB_VALUES[item?.index ?? 0] || 1;
+ searchForm.value.approveId = "";
+ searchForm.value.approveStatus = "";
+ getList();
+ };
+
+ /** 鍒楄〃琛岃嚜甯� approveType锛岀己澶辨椂鍥為��褰撳墠 Tab */
+ const currentItemApproveType = item =>
+ Number(item?.approveType) || activeApproveType.value;
const userStore = useUserStore();
// 鏁版嵁
@@ -178,9 +236,33 @@
const data = reactive({
searchForm: {
approveId: "",
+ approveStatus: "",
},
});
const { searchForm } = toRefs(data);
+
+ const showStatusSheet = ref(false);
+
+ const statusActions = computed(() =>
+ APPROVE_STATUS_OPTIONS.map(opt => ({ name: opt.label, value: opt.value }))
+ );
+
+ const approveStatusText = computed(() => {
+ const hit = APPROVE_STATUS_OPTIONS.find(
+ opt => String(opt.value) === String(searchForm.value.approveStatus)
+ );
+ return hit?.label || "鍏ㄩ儴鐘舵��";
+ });
+
+ const openStatusSheet = () => {
+ showStatusSheet.value = true;
+ };
+
+ const onSelectStatus = action => {
+ searchForm.value.approveStatus = action?.value ?? "";
+ showStatusSheet.value = false;
+ getList();
+ };
// 杩斿洖涓婁竴椤�
const goBack = () => {
@@ -195,7 +277,7 @@
};
approveProcessListPage({
...page,
- approveType: props.approveType,
+ approveType: activeApproveType.value,
...searchForm.value,
})
.then(res => {
@@ -263,7 +345,7 @@
uni.setStorageSync("invoiceLedgerEditRow", JSON.stringify(item));
uni.setStorageSync("operationType", "edit");
uni.setStorageSync("approveId", item.approveId);
- uni.setStorageSync("approveType", props.approveType);
+ uni.setStorageSync("approveType", currentItemApproveType(item));
uni.navigateTo({
url: "/pages/cooperativeOffice/collaborativeApproval/detail",
});
@@ -274,7 +356,7 @@
uni.setStorageSync("invoiceLedgerEditRow", JSON.stringify(item));
uni.setStorageSync("operationType", "detail");
uni.setStorageSync("approveId", item.approveId);
- uni.setStorageSync("approveType", props.approveType);
+ uni.setStorageSync("approveType", currentItemApproveType(item));
uni.navigateTo({
url: "/pages/cooperativeOffice/collaborativeApproval/detail",
});
@@ -283,23 +365,27 @@
// 娣诲姞鏂拌褰�
const handleAdd = () => {
uni.setStorageSync("operationType", "add");
- uni.setStorageSync("approveType", props.approveType);
+ uni.setStorageSync("approveType", activeApproveType.value);
uni.navigateTo({
- url: `/pages/cooperativeOffice/collaborativeApproval/detail?approveType=${props.approveType}`,
+ url: `/pages/cooperativeOffice/collaborativeApproval/detail?approveType=${activeApproveType.value}`,
});
};
// 鐐瑰嚮瀹℃牳
const approve = item => {
+ const type = currentItemApproveType(item);
uni.setStorageSync("approveId", item.approveId);
- uni.setStorageSync("approveType", props.approveType);
+ uni.setStorageSync("approveType", type);
uni.navigateTo({
url:
"/pages/cooperativeOffice/collaborativeApproval/approve?approveType=" +
- props.approveType,
+ type,
});
};
onLoad(options => {
+ // index1~8 浼犲浐瀹氱被鍨嬶紱鑿滃崟鐩存帴杩涘叆鏃跺彲鐢� ?approveType= 鎸囧畾锛岄粯璁ゅ叕鍑虹鐞�
+ activeApproveType.value =
+ Number(options?.approveType) || fixedApproveType.value || 1;
// 瑙ｆ瀽approveId
if (options.approveId) {
searchForm.value.approveId = options.approveId;
@@ -319,11 +405,49 @@
margin: 0 !important;
}
+ // 瀹℃壒绫诲瀷鍒囨崲
+ .type-tabs-wrap {
+ background: #fff;
+ border-bottom: 1px solid #f0f0f0;
+ padding: 0 8px;
+ }
+
// 鏂囨。鍥炬爣鏍峰紡 - 瑕嗙洊鍏叡鏍峰紡涓殑鑳屾櫙鑹�
.document-icon {
background: #ed8d05;
}
+ // 鐘舵�佺瓫閫� chip
+ .filter-chip {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ flex-shrink: 0;
+ margin-left: 8px;
+ padding: 6px 10px;
+ background: #fff;
+ border: 1px solid #e5e7eb;
+ border-radius: 16px;
+
+ &--active {
+ border-color: #2979ff;
+ background: #f0f6ff;
+ }
+ }
+
+ .filter-chip-text {
+ font-size: 12px;
+ color: #606266;
+ max-width: 88px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .filter-chip--active .filter-chip-text {
+ color: #2979ff;
+ }
+
// 娴姩鎸夐挳鏍峰紡 - 瑕嗙洊鍏叡鏍峰紡涓殑鑳屾櫙鑹�
.fab-button {
background: #ed8d05;
--
Gitblit v1.9.3