From 6bea4a03b32c48d72cee59e46c90accdf07b8b35 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 23 四月 2026 17:59:22 +0800
Subject: [PATCH] 阳光彩印 1.协同审批管理不再需要选择审批人 2.审批管理添加审批流联调 3.销售发货、采购台账、销售报价不再需要选择审批人
---
src/views/collaborativeApproval/approvalProcess/index.vue | 474 +++++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 409 insertions(+), 65 deletions(-)
diff --git a/src/views/collaborativeApproval/approvalProcess/index.vue b/src/views/collaborativeApproval/approvalProcess/index.vue
index 33bde47..dba6bc1 100644
--- a/src/views/collaborativeApproval/approvalProcess/index.vue
+++ b/src/views/collaborativeApproval/approvalProcess/index.vue
@@ -1,67 +1,129 @@
<template>
<div class="app-container">
- <!-- 鏍囩椤靛垏鎹笉鍚岀殑瀹℃壒绫诲瀷 -->
- <el-tabs v-model="activeTab" @tab-change="handleTabChange" class="approval-tabs">
- <el-tab-pane label="鍏嚭绠＄悊" name="1"></el-tab-pane>
- <el-tab-pane label="璇峰亣绠＄悊" name="2"></el-tab-pane>
- <el-tab-pane label="鍑哄樊绠＄悊" name="3"></el-tab-pane>
- <el-tab-pane label="鎶ラ攢绠＄悊" name="4"></el-tab-pane>
- <el-tab-pane label="閲囪喘瀹℃壒" name="5"></el-tab-pane>
- <el-tab-pane label="鎶ヤ环瀹℃壒" name="6"></el-tab-pane>
- <el-tab-pane label="鍙戣揣瀹℃壒" name="7"></el-tab-pane>
- </el-tabs>
-
- <div class="search_form">
- <div>
- <span class="search_title">娴佺▼缂栧彿锛�</span>
- <el-input
- v-model="searchForm.approveId"
- style="width: 240px"
- placeholder="璇疯緭鍏ユ祦绋嬬紪鍙锋悳绱�"
- @change="handleQuery"
- clearable
- :prefix-icon="Search"
- />
- <span class="search_title ml10">瀹℃壒鐘舵�侊細</span>
- <el-select v-model="searchForm.approveStatus" clearable @change="handleQuery" style="width: 240px">
- <el-option label="寰呭鏍�" :value="0" />
- <el-option label="瀹℃牳涓�" :value="1" />
- <el-option label="瀹℃牳瀹屾垚" :value="2" />
- <el-option label="瀹℃牳鏈�氳繃" :value="3" />
- <el-option label="宸查噸鏂版彁浜�" :value="4" />
- </el-select>
- <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
- >鎼滅储</el-button
- >
- </div>
- <div>
- <el-button
- type="primary"
- @click="openForm('add')"
- v-if="currentApproveType !== 5 && currentApproveType !== 6 && currentApproveType !== 7"
- >鏂板</el-button>
- <el-button @click="handleOut">瀵煎嚭</el-button>
- <el-button
- type="danger"
- plain
- @click="handleDelete"
- v-if="currentApproveType !== 5 && currentApproveType !== 6 && currentApproveType !== 7"
- >鍒犻櫎</el-button>
+ <!-- 瀹℃壒绫诲瀷鍒囨崲 - 绱у噾鏍囩寮� -->
+ <div class="type-tabs">
+ <div
+ v-for="type in approveTypes"
+ :key="type.value"
+ class="type-tab"
+ :class="{ active: activeTab === type.value }"
+ @click="activeTab = type.value; handleTabChange()"
+ >
+ <el-icon :size="14" :style="{ color: activeTab === type.value ? type.color : '#909399' }">
+ <component :is="type.icon" />
+ </el-icon>
+ <span class="tab-name">{{ type.label }}</span>
</div>
</div>
- <div class="table_list">
+
+ <!-- 鎼滅储鍜屾搷浣滃尯鍩� -->
+ <el-card class="search-card" shadow="never">
+ <div class="search-content">
+ <div class="search-filters">
+ <div class="filter-item">
+ <span class="filter-label">娴佺▼缂栧彿</span>
+ <el-input
+ v-model="searchForm.approveId"
+ placeholder="璇疯緭鍏ユ祦绋嬬紪鍙�"
+ clearable
+ :prefix-icon="Search"
+ @keyup.enter="handleQuery"
+ class="search-input"
+ />
+ </div>
+ <div class="filter-item">
+ <span class="filter-label">瀹℃壒鐘舵��</span>
+ <el-select
+ v-model="searchForm.approveStatus"
+ clearable
+ @change="handleQuery"
+ placeholder="璇烽�夋嫨鐘舵��"
+ class="search-select"
+ >
+ <el-option label="寰呭鏍�" :value="0">
+ <el-tag size="small" type="warning">寰呭鏍�</el-tag>
+ </el-option>
+ <el-option label="瀹℃牳涓�" :value="1">
+ <el-tag size="small" type="primary">瀹℃牳涓�</el-tag>
+ </el-option>
+ <el-option label="瀹℃牳瀹屾垚" :value="2">
+ <el-tag size="small" type="success">瀹℃牳瀹屾垚</el-tag>
+ </el-option>
+ <el-option label="瀹℃牳鏈�氳繃" :value="3">
+ <el-tag size="small" type="danger">瀹℃牳鏈�氳繃</el-tag>
+ </el-option>
+ <el-option label="宸查噸鏂版彁浜�" :value="4">
+ <el-tag size="small" type="info">宸查噸鏂版彁浜�</el-tag>
+ </el-option>
+ </el-select>
+ </div>
+ <el-button type="primary" @click="handleQuery" class="search-btn">
+ <el-icon><Search /></el-icon>
+ 鎼滅储
+ </el-button>
+ <el-button @click="resetQuery" class="reset-btn">
+ <el-icon><RefreshRight /></el-icon>
+ 閲嶇疆
+ </el-button>
+ </div>
+ <div class="search-actions">
+ <el-button
+ type="primary"
+ @click="openForm('add')"
+ v-if="currentApproveType !== 5 && currentApproveType !== 6 && currentApproveType !== 7"
+ class="action-btn primary"
+ >
+ <el-icon><Plus /></el-icon>
+ 鏂板
+ </el-button>
+ <el-button @click="handleOut" class="action-btn">
+ <el-icon><Download /></el-icon>
+ 瀵煎嚭
+ </el-button>
+ <el-button
+ type="danger"
+ plain
+ @click="handleDelete"
+ v-if="currentApproveType !== 5 && currentApproveType !== 6 && currentApproveType !== 7"
+ class="action-btn danger"
+ >
+ <el-icon><Delete /></el-icon>
+ 鍒犻櫎
+ </el-button>
+ </div>
+ </div>
+ </el-card>
+
+ <!-- 鏁版嵁琛ㄦ牸 -->
+ <el-card class="table-card" shadow="never" v-loading="tableLoading">
+ <template #header>
+ <div class="table-header">
+ <div class="table-title">
+ <div class="type-tag" :style="{ backgroundColor: currentTypeInfo.color }">
+ <el-icon color="#fff" :size="16"><component :is="currentTypeInfo.icon" /></el-icon>
+ </div>
+ <span>{{ currentTypeInfo.label }}鍒楄〃</span>
+ <el-tag type="info" size="small" effect="plain" class="count-tag">
+ 鍏� {{ page.total }} 鏉�
+ </el-tag>
+ </div>
+ </div>
+ </template>
<PIMTable
- rowKey="id"
- :column="tableColumnCopy"
- :tableData="tableData"
- :page="page"
- :isSelection="true"
- @selection-change="handleSelectionChange"
- :tableLoading="tableLoading"
- @pagination="pagination"
- :total="page.total"
+ rowKey="id"
+ :column="tableColumnCopy"
+ :tableData="tableData"
+ :page="page"
+ :isSelection="true"
+ @selection-change="handleSelectionChange"
+ :tableLoading="tableLoading"
+ @pagination="pagination"
+ :total="page.total"
+ class="custom-table"
></PIMTable>
- </div>
+ </el-card>
+
+ <!-- 寮圭獥缁勪欢 -->
<info-form-dia ref="infoFormDia" @close="handleQuery" :approveType="currentApproveType"></info-form-dia>
<approval-dia ref="approvalDia" @close="handleQuery" :approveType="currentApproveType"></approval-dia>
<FileList ref="fileListRef" />
@@ -70,7 +132,7 @@
<script setup>
import FileList from "./fileList.vue";
-import { Search } from "@element-plus/icons-vue";
+import { Search, Plus, Delete, Download, RefreshRight, DocumentChecked } from "@element-plus/icons-vue";
import {onMounted, ref, computed, reactive, toRefs, nextTick, getCurrentInstance} from "vue";
import {ElMessageBox} from "element-plus";
import { useRoute } from 'vue-router';
@@ -85,13 +147,37 @@
// 褰撳墠閫変腑鐨勬爣绛鹃〉锛岄粯璁や负鍏嚭绠＄悊
const activeTab = ref('1');
+// 鍚勭被鍨嬫暟閲忕粺璁�
+const typeCounts = ref({});
+
+// 瀹℃壒绫诲瀷閰嶇疆
+const approveTypes = [
+ { value: '1', label: '鍏嚭绠＄悊', icon: 'Suitcase', color: '#409EFF' },
+ { value: '2', label: '璇峰亣绠＄悊', icon: 'Calendar', color: '#67C23A' },
+ { value: '3', label: '鍑哄樊绠＄悊', icon: 'Location', color: '#E6A23C' },
+ { value: '4', label: '鎶ラ攢绠＄悊', icon: 'Money', color: '#F56C6C' },
+ { value: '5', label: '閲囪喘瀹℃壒', icon: 'ShoppingCart', color: '#909399' },
+ { value: '6', label: '鎶ヤ环瀹℃壒', icon: 'DocumentChecked', color: '#9B59B6' },
+ { value: '7', label: '鍙戣揣瀹℃壒', icon: 'Van', color: '#1ABC9C' },
+];
+
+// 褰撳墠瀹℃壒绫诲瀷淇℃伅
+const currentTypeInfo = computed(() => {
+ return approveTypes.find(t => t.value === activeTab.value) || approveTypes[0];
+});
+
+// 鑾峰彇绫诲瀷鏁伴噺
+const getTypeCount = (value) => {
+ return typeCounts.value[value] || 0;
+};
+
// 褰撳墠瀹℃壒绫诲瀷锛屾牴鎹�変腑鐨勬爣绛鹃〉璁＄畻
const currentApproveType = computed(() => {
return Number(activeTab.value);
});
// 鏍囩椤靛垏鎹㈠鐞�
-const handleTabChange = (tabName) => {
+const handleTabChange = () => {
// 鍒囨崲鏍囩椤垫椂閲嶇疆鎼滅储鏉′欢鍜屽垎椤碉紝骞堕噸鏂板姞杞芥暟鎹�
searchForm.value.approveId = '';
searchForm.value.approveStatus = '';
@@ -102,11 +188,18 @@
const data = reactive({
searchForm: {
- approveId: "",
- approveStatus: "",
+ approveId: "",
+ approveStatus: "",
},
});
const { searchForm } = toRefs(data);
+
+// 閲嶇疆鎼滅储
+const resetQuery = () => {
+ searchForm.value.approveId = '';
+ searchForm.value.approveStatus = '';
+ handleQuery();
+};
// 鍔ㄦ�佽〃鏍煎垪閰嶇疆锛屾牴鎹鎵圭被鍨嬬敓鎴愬垪
const tableColumnCopy = computed(() => {
@@ -238,7 +331,7 @@
},
];
- // 鎶ヤ环瀹℃壒锛堢被鍨� 6锛変笉灞曠ず鈥滈檮浠垛�濇搷浣�
+ // 鎶ヤ环瀹℃壒锛堢被鍨� 6锛変笉灞曠ず"闄勪欢"鎿嶄綔
if (!isQuotationType) {
actionOperations.push({
name: "闄勪欢",
@@ -294,6 +387,8 @@
tableLoading.value = false;
tableData.value = res.data.records
page.total = res.data.total;
+ // 鏇存柊褰撳墠绫诲瀷鏁伴噺
+ typeCounts.value[activeTab.value] = res.data.total;
}).catch(err => {
tableLoading.value = false;
})
@@ -388,7 +483,256 @@
</script>
<style scoped>
-.approval-tabs {
- margin-bottom: 10px;
+.page-header {
+ margin-bottom: 20px;
+}
+
+.header-title {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.title-icon {
+ font-size: 28px;
+ color: var(--el-color-primary, #409EFF);
+}
+
+.header-text {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.main-title {
+ font-size: 20px;
+ font-weight: 600;
+ color: var(--el-text-color-primary, #303133);
+}
+
+.sub-title {
+ font-size: 13px;
+ color: var(--el-text-color-secondary, #909399);
+}
+
+/* 瀹℃壒绫诲瀷鍒囨崲 - 绱у噾鏍囩寮� */
+.type-tabs {
+ display: flex;
+ gap: 4px;
+ margin-bottom: 16px;
+ padding: 4px;
+ background: var(--el-fill-color-light, #f5f7fa);
+ border-radius: 8px;
+ overflow-x: auto;
+}
+
+.type-tab {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 8px 14px;
+ border-radius: 6px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ white-space: nowrap;
+ font-size: 13px;
+ color: var(--el-text-color-regular, #606266);
+}
+
+.type-tab:hover {
+ background: var(--el-color-primary-light-9, rgba(64, 158, 255, 0.1));
+ color: var(--el-color-primary, #409EFF);
+}
+
+.type-tab.active {
+ background: var(--el-bg-color, #fff);
+ color: var(--el-color-primary, #409EFF);
+ font-weight: 600;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.tab-name {
+ font-size: 13px;
+}
+
+.tab-count {
+ min-width: 16px;
+ height: 16px;
+ padding: 0 5px;
+ background: var(--el-color-success, #67C23A);
+ color: #fff;
+ border-radius: 8px;
+ font-size: 11px;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* 鎼滅储鍗＄墖 */
+.search-card {
+ margin-bottom: 16px;
+ border-radius: 12px;
+}
+
+:deep(.el-card__body) {
+ padding: 20px;
+}
+
+.search-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 16px;
+}
+
+.search-filters {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ flex-wrap: wrap;
+}
+
+.filter-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.filter-label {
+ font-size: 14px;
+ color: var(--el-text-color-regular, #606266);
+ font-weight: 500;
+ white-space: nowrap;
+}
+
+.search-input,
+.search-select {
+ width: 200px;
+}
+
+.search-btn {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.reset-btn {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.search-actions {
+ display: flex;
+ gap: 10px;
+}
+
+.action-btn {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.action-btn.primary {
+ background: var(--el-color-primary, #409EFF);
+ border: none;
+}
+
+.action-btn.danger {
+ transition: all 0.3s;
+}
+
+.action-btn.danger:hover {
+ background: #f56c6c;
+ color: #fff;
+}
+
+/* 琛ㄦ牸鍗＄墖 */
+.table-card {
+ border-radius: 12px;
+}
+
+:deep(.el-card__header) {
+ padding: 16px 20px;
+ border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
+}
+
+.table-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.table-title {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--el-text-color-primary, #303133);
+}
+
+.type-tag {
+ width: 32px;
+ height: 32px;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.count-tag {
+ margin-left: 8px;
+}
+
+.custom-table {
+ margin-top: 8px;
+}
+
+/* 鍝嶅簲寮� */
+@media (max-width: 1200px) {
+ .search-content {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .search-filters {
+ justify-content: flex-start;
+ }
+
+ .search-actions {
+ justify-content: flex-end;
+ }
+}
+
+@media (max-width: 768px) {
+ .type-tabs {
+ padding: 3px;
+ }
+
+ .type-tab {
+ padding: 6px 10px;
+ font-size: 12px;
+ }
+
+ .tab-name {
+ font-size: 12px;
+ }
+
+ .search-filters {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .filter-item {
+ width: 100%;
+ }
+
+ .search-input,
+ .search-select {
+ width: 100%;
+ }
}
</style>
--
Gitblit v1.9.3