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

gaoluyang

14 小时以前 6bea4a03b32c48d72cee59e46c90accdf07b8b35

 src/views/collaborativeApproval/approvalProcess/index.vue

@@ -1,161 +1,358 @@
<template>
  <div class="app-container">
    <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"
        />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
        >搜索</el-button
        >
      </div>
      <div>
        <el-button type="primary" @click="openForm('add')">新增</el-button>
<!--        <el-button @click="handleOut">导出</el-button>-->
        <el-button type="danger" plain @click="handleDelete">删除</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="tableColumn"
          :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>
    <info-form-dia ref="infoFormDia" @close="handleQuery"></info-form-dia>
    <approval-dia ref="approvalDia" @close="handleQuery"></approval-dia>
    </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" />
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import FileList from "./fileList.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';
import InfoFormDia from "@/views/collaborativeApproval/approvalProcess/components/infoFormDia.vue";
import ApprovalDia from "@/views/collaborativeApproval/approvalProcess/components/approvalDia.vue";
import {approveProcessDelete, approveProcessListPage} from "@/api/collaborativeApproval/approvalProcess.js";
import useUserStore from "@/store/modules/user";

const userStore = useUserStore();
const route = useRoute();

// 当前选中的标签页，默认为公出管理
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 = () => {
  // 切换标签页时重置搜索条件和分页，并重新加载数据
  searchForm.value.approveId = '';
  searchForm.value.approveStatus = '';
  page.current = 1;
  getList();
};


const data = reactive({
  searchForm: {
      approveId: "",
    approveId: "",
    approveStatus: "",
  },
});
const { searchForm } = toRefs(data);
const tableColumn = ref([
  {
    label: "审批状态",
    prop: "approveStatus",
    dataType: "tag",
      width: 100,
    formatData: (params) => {
      if (params == 0) {
        return "待审核";
      } else if (params == 1) {
        return "审核中";
      } else if (params == 2) {
        return "审核完成";
      } else if (params == 4) {
        return "已重新提交";
      } else {
        return '不通过';
      }

// 重置搜索
const resetQuery = () => {
  searchForm.value.approveId = '';
  searchForm.value.approveStatus = '';
  handleQuery();
};

// 动态表格列配置，根据审批类型生成列
const tableColumnCopy = computed(() => {
  const isLeaveType = currentApproveType.value === 2; // 请假管理
  const isReimburseType = currentApproveType.value === 4; // 报销管理
  const isQuotationType = currentApproveType.value === 6; // 报价审批
  const isPurchaseType = currentApproveType.value === 5; // 采购审批
  
  // 基础列配置
  const baseColumns = [
    {
      label: "审批状态",
      prop: "approveStatus",
      dataType: "tag",
      width: 100,
      formatData: (params) => {
        if (params == 0) {
          return "待审核";
        } else if (params == 1) {
          return "审核中";
        } else if (params == 2) {
          return "审核完成";
        } else if (params == 4) {
          return "已重新提交";
        } else {
          return '不通过';
        }
      },
      formatType: (params) => {
        if (params == 0) {
          return "warning";
        } else if (params == 1) {
          return "primary";
        } else if (params == 2) {
          return "success";
        } else if (params == 4) {
          return "info";
        } else {
          return 'danger';
        }
      },
    },
    formatType: (params) => {
      if (params == 0) {
        return "warning";
      } else if (params == 1) {
        return "primary";
      } else if (params == 2) {
        return "success";
      } else if (params == 4) {
        return "";
      } else {
        return 'danger';
      }
    {
      label: "流程编号",
      prop: "approveId",
      width: 170
    },
  },
  {
    label: "流程编号",
    prop: "approveId",
    width: 170
  },
  {
    label: "申请部门",
    prop: "approveDeptName",
      width: 220
  },
  {
    label: "审批事由",
    prop: "approveReason",
      width: 200
  },
  {
    label: "申请人",
    prop: "approveUserName",
  },
  {
    label: "申请日期",
    prop: "approveTime",
      width: 120
  },
  {
    label: "结束日期",
    prop: "approveOverTime",
    width: 120
  },
  {
    {
      label: "申请部门",
      prop: "approveDeptName",
      width: 220
    },
    {
      label: isQuotationType ? "报价单号" : isPurchaseType ? "采购合同号" : "审批事由",
      prop: "approveReason",
    },
    {
      label: "申请人",
      prop: "approveUserName",
      width: 120
    }
  ];
  
  // 金额列（仅报销管理显示）
  if (isReimburseType) {
    baseColumns.push({
      label: "金额（元）",
      prop: "price",
      width: 120
    });
  }
  
  // 日期列（根据类型动态配置）
  baseColumns.push(
    {
      label: isLeaveType ? "开始日期" : "申请日期",
      prop: isLeaveType ? "startDate" : "approveTime",
      width: 200
    },
    {
      label: "结束日期",
      prop: isLeaveType ? "endDate" : "approveOverTime",
      width: 120
    }
  );
  
  // 当前审批人列
  baseColumns.push({
    label: "当前审批人",
    prop: "approveUserCurrentName",
    width: 120
  },
  {
  });
  
  // 操作列
  const actionOperations = [
    {
      name: "编辑",
      type: "text",
      clickFun: (row) => {
        openForm("edit", row);
      },
      disabled: (row) =>
        currentApproveType.value === 5 ||
        currentApproveType.value === 6 ||
        currentApproveType.value === 7 ||
        row.approveStatus == 2 ||
        row.approveStatus == 1 ||
        row.approveStatus == 4
    },
    {
      name: "审核",
      type: "text",
      clickFun: (row) => {
        openApprovalDia("approval", row);
      },
      disabled: (row) =>
        row.approveUserCurrentId == null ||
        row.approveStatus == 2 ||
        row.approveStatus == 3 ||
        row.approveStatus == 4 ||
        row.approveUserCurrentId !== userStore.id
    },
    {
      name: "详情",
      type: "text",
      clickFun: (row) => {
        openApprovalDia("view", row);
      },
    },
  ];

  // 报价审批（类型 6）不展示"附件"操作
  if (!isQuotationType) {
    actionOperations.push({
      name: "附件",
      type: "text",
      clickFun: (row) => {
        downLoadFile(row);
      },
    });
  }

  baseColumns.push({
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 150,
    operation: [
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          openForm("edit", row);
        },
            disabled: (row) => row.approveStatus == 2 || row.approveStatus == 1 || row.approveStatus == 4
      },
      {
        name: "审核",
        type: "text",
        clickFun: (row) => {
          openApprovalDia("approval", row);
        },
            disabled: (row) => row.approveUserCurrentId == null || row.approveStatus == 2 || row.approveStatus == 3 || row.approveStatus == 4 || row.approveUserCurrentId !== userStore.id
      },
      {
        name: "详情",
        type: "text",
        clickFun: (row) => {
          openApprovalDia('view', row);
        },
      },
    ],
  },
]);
    width: 230,
    operation: actionOperations,
  });
  
  return baseColumns;
});
const tableData = ref([]);
const selectedRows = ref([]);
const tableLoading = ref(false);
@@ -174,6 +371,11 @@
  page.current = 1;
  getList();
};
const fileListRef = ref(null)
const downLoadFile = (row) => {
  fileListRef.value.open(row.commonFileList)

}
const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
@@ -181,14 +383,43 @@
};
const getList = () => {
  tableLoading.value = true;
  approveProcessListPage({...page, ...searchForm.value,}).then(res => {
  approveProcessListPage({...page, ...searchForm.value, approveType: currentApproveType.value}).then(res => {
    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;
  })
};
// 导出
const handleOut = () => {
  const type = currentApproveType.value
  const urlMap = {
    0: "/approveProcess/exportZero",
    1: "/approveProcess/exportOne",
    2: "/approveProcess/exportTwo",
    3: "/approveProcess/exportThree",
    4: "/approveProcess/exportFour",
    5: "/approveProcess/exportFive",
    6: "/approveProcess/exportSix",
    7: "/approveProcess/exportSeven",
  }
  const url = urlMap[type] || urlMap[0]
  const nameMap = {
    0: "协同审批管理表",
    1: "公出管理审批表",
    2: "请假管理审批表",
    3: "出差管理审批表",
    4: "报销管理审批表",
    5: "采购申请审批表",
    6: "报价审批表",
    7: "发货审批表",
  }
  const fileName = nameMap[type] || nameMap[0]
  proxy.download(url, {}, `${fileName}.xlsx`)
}
// 表格选择数据
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
@@ -232,8 +463,276 @@
      });
};
onMounted(() => {
  // 根据URL参数设置标签页和查询条件
  const approveType = route.query.approveType;
  const approveId = route.query.approveId;
  
  if (approveType) {
    // 设置标签页（approveType 对应 activeTab 的 name）
    activeTab.value = String(approveType);
  }
  
  if (approveId) {
    // 设置流程编号查询条件
    searchForm.value.approveId = String(approveId);
  }
  
  // 查询列表
  getList();
});
</script>

<style scoped></style>
<style scoped>
.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>