阳光彩印 1.协同审批管理不再需要选择审批人 2.审批管理添加审批流联调 3.销售发货、采购台账、销售报价不再需要选择审批人

gaoluyang

8 小时以前 6bea4a03b32c48d72cee59e46c90accdf07b8b35

 src/views/collaborativeApproval/approvalProcess/index.vue

@@ -1,55 +1,114 @@
<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="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="search_form">
      <div>
        <span class="search_title">流程编号：</span>
    <!-- 搜索和操作区域 -->
    <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"
            style="width: 240px"
            placeholder="请输入流程编号搜索"
            @change="handleQuery"
              placeholder="请输入流程编号"
            clearable
            :prefix-icon="Search"
              @keyup.enter="handleQuery"
              class="search-input"
        />
        <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>
          <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"
        >新增</el-button>
        <el-button @click="handleOut">导出</el-button>
            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"
        >删除</el-button>
            class="action-btn danger"
          >
            <el-icon><Delete /></el-icon>
            删除
          </el-button>
      </div>
    </div>
    <div class="table_list">
    </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"
@@ -60,8 +119,11 @@
          :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 = '';
@@ -107,6 +193,13 @@
  },
});
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>