加班申请模块和审批流程公共组件

yyb

18 小时以前 04b1a9cfde4049be9a38b9832d5289d4a192c883

 src/views/procurementManagement/procurementLedger/index.vue

@@ -44,7 +44,8 @@
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="handleQuery"> 搜索 </el-button>
                       @click="handleQuery"> 搜索
            </el-button>
          </el-form-item>
        </el-form>
      </div>
@@ -53,11 +54,14 @@
      <div style="display: flex;justify-content: flex-end;margin-bottom: 20px;">
        <el-button type="primary"
                   @click="openForm('add')">新增台账</el-button>
        <el-button type="primary" plain @click="handleImport">导入</el-button>
        <el-button type="primary"
                   plain
                   @click="handleImport">导入</el-button>
        <el-button @click="handleOut">导出</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
                   @click="handleDelete">删除
        </el-button>
      </div>
      <el-table :data="tableData"
                border
@@ -94,7 +98,6 @@
                               prop="availableQuality" />
              <el-table-column label="退货数量"
                               prop="returnQuality" />
                               
              <el-table-column label="税率(%)"
                               prop="taxRate" />
              <el-table-column label="含税单价(元)"
@@ -119,11 +122,11 @@
                         show-overflow-tooltip />
        <el-table-column label="销售合同号"
                         prop="salesContractNo"
                          width="160"
                         width="160"
                         show-overflow-tooltip />
        <el-table-column label="供应商名称"
                         prop="supplierName"
                          width="160"
                         width="160"
                         show-overflow-tooltip />
        <el-table-column label="项目名称"
                         prop="projectName"
@@ -134,9 +137,8 @@
                         width="100"
                         show-overflow-tooltip>
          <template #default="scope">
            <el-tag 
              :type="getApprovalStatusType(scope.row.approvalStatus)"
              size="small">
            <el-tag :type="getApprovalStatusType(scope.row.approvalStatus)"
                    size="small">
              {{ approvalStatusText[scope.row.approvalStatus] || '未知状态' }}
            </el-tag>
          </template>
@@ -174,7 +176,8 @@
            <el-button link
                       type="primary"
                       @click="openForm('edit', scope.row)"
                       :disabled="scope.row.approvalStatus !== 1 && scope.row.approvalStatus !== 4">编辑</el-button>
                       :disabled="scope.row.approvalStatus !== 1 && scope.row.approvalStatus !== 4">编辑
            </el-button>
            <el-button link
                       type="primary"
                       @click="openFileDialog(scope.row)">附件</el-button>
@@ -189,12 +192,12 @@
                  @pagination="paginationChange" />
    </div>
    <FormDialog v-model="dialogFormVisible"
               :title="operationType === 'add' ? '新增采购台账页面' : '编辑采购台账页面'"
               :width="'70%'"
               :operation-type="operationType"
               @close="closeDia"
               @confirm="submitForm"
               @cancel="closeDia">
                :title="operationType === 'add' ? '新增采购台账页面' : '编辑采购台账页面'"
                :width="'70%'"
                :operation-type="operationType"
                @close="closeDia"
                @confirm="submitForm"
                @cancel="closeDia">
      <el-form :model="form"
               label-width="140px"
               label-position="top"
@@ -236,7 +239,8 @@
                <el-option v-for="item in supplierList"
                           :key="item.id"
                           :label="item.supplierName"
                                        :value="item.id" >{{item.supplierName + '---' + item.supplierType}}</el-option>
                           :value="item.id">{{ item.supplierName + '---' + item.supplierType }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
@@ -274,7 +278,15 @@
          <el-col :span="12">
            <el-form-item label="录入人："
                          prop="recorderId">
              <el-input v-model="form.recorderName" placeholder="自动填充" disabled />
              <el-select v-model="form.recorderId"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="item in userList"
                           :key="item.userId"
                           :label="item.nickName"
                           :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -294,10 +306,12 @@
          <el-form-item label="产品信息："
                        prop="entryDate">
            <el-button type="primary"
                       @click="openProductForm('add')">添加</el-button>
                       @click="openProductForm('add')">添加
            </el-button>
            <el-button plain
                       type="danger"
                       @click="deleteProduct">删除</el-button>
                       @click="deleteProduct">删除
            </el-button>
          </el-form-item>
          <div class="select-button-group"
               style="width: 500px; margin: 20px 0;"
@@ -321,11 +335,10 @@
                         :value="item.templateName">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                  <span>{{ item.templateName }}</span>
                  <el-icon 
                    v-if="item.id"
                    class="delete-icon"
                    @click.stop="handleDeleteTemplate(item)"
                    style="cursor: pointer; color: #f56c6c; font-size: 14px; margin-left: 8px;">
                  <el-icon v-if="item.id"
                           class="delete-icon"
                           @click.stop="handleDeleteTemplate(item)"
                           style="cursor: pointer; color: #f56c6c; font-size: 14px; margin-left: 8px;">
                    <Delete />
                  </el-icon>
                </div>
@@ -397,7 +410,8 @@
            <template #default="scope">
              <el-button link
                         type="primary"
                         @click="openProductForm('edit', scope.row, scope.$index)">编辑</el-button>
                         @click="openProductForm('edit', scope.row, scope.$index)">编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
@@ -417,52 +431,31 @@
          <el-col :span="24">
            <el-form-item label="附件材料："
                          prop="purchaseLedgerFiles">
              <el-upload v-model:file-list="fileList"
                         :action="upload.url"
                         multiple
                         ref="fileUpload"
                         auto-upload
                         :headers="upload.headers"
                         :before-upload="handleBeforeUpload"
                         :on-error="handleUploadError"
                         :on-success="handleUploadSuccess"
                         :on-remove="handleRemove">
                <el-button type="primary">上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    文件格式支持
                    doc，docx，xls，xlsx，ppt，pptx，pdf，txt，xml，jpg，jpeg，png，gif，bmp，rar，zip，7z
                  </div>
                </template>
              </el-upload>
              <FileUpload v-model:file-list="fileList" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </FormDialog>
    <!-- 导入弹窗 -->
    <FormDialog
      v-model="importUpload.open"
      :title="importUpload.title"
      :width="'600px'"
      @close="importUpload.open = false"
      @confirm="submitImportFile"
      @cancel="importUpload.open = false"
    >
      <el-upload
        ref="importUploadRef"
        :limit="1"
        accept=".xlsx,.xls"
        :action="importUpload.url"
        :headers="importUpload.headers"
        :before-upload="importUpload.beforeUpload"
        :on-success="importUpload.onSuccess"
        :on-error="importUpload.onError"
        :on-progress="importUpload.onProgress"
        :on-change="importUpload.onChange"
        :auto-upload="false"
        drag
      >
    <FormDialog v-model="importUpload.open"
                :title="importUpload.title"
                :width="'600px'"
                @close="importUpload.open = false"
                @confirm="submitImportFile"
                @cancel="importUpload.open = false">
      <el-upload ref="importUploadRef"
                 :limit="1"
                 accept=".xlsx,.xls"
                 :action="importUpload.url"
                 :headers="importUpload.headers"
                 :before-upload="importUpload.beforeUpload"
                 :on-success="importUpload.onSuccess"
                 :on-error="importUpload.onError"
                 :on-progress="importUpload.onProgress"
                 :on-change="importUpload.onChange"
                 :auto-upload="false"
                 drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或<em>点击上传</em>
@@ -470,18 +463,20 @@
        <template #tip>
          <div class="el-upload__tip">
            仅支持 xls/xlsx，大小不超过 10MB。
            <el-button link type="primary" @click="downloadTemplate">下载导入模板</el-button>
            <el-button link
                       type="primary"
                       @click="downloadTemplate">下载导入模板</el-button>
          </div>
        </template>
      </el-upload>
    </FormDialog>
    <FormDialog v-model="productFormVisible"
               :title="productOperationType === 'add' ? '新增产品' : '编辑产品'"
               :width="'40%'"
               :operation-type="productOperationType"
               @close="closeProductDia"
               @confirm="submitProduct"
               @cancel="closeProductDia">
                :title="productOperationType === 'add' ? '新增产品' : '编辑产品'"
                :width="'40%'"
                :operation-type="productOperationType"
                @close="closeProductDia"
                @confirm="submitProduct"
                @cancel="closeProductDia">
      <el-form :model="productForm"
               label-width="140px"
               label-position="top"
@@ -536,12 +531,10 @@
                         placeholder="请选择"
                         clearable
                         @change="mathNum">
                <el-option label="1"
                           value="1" />
                <el-option label="6"
                           value="6" />
                <el-option label="13"
                           value="13" />
                <el-option v-for="dict in tax_rate"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
@@ -640,11 +633,16 @@
        </el-row>
      </el-form>
    </FormDialog>
    <FileList v-if="fileDialogVisible"  v-model:visible="fileDialogVisible" record-type="purchase_ledger" :record-id="recordId"  />
    <FileList v-if="fileListDialogVisible"
              v-model:visible="fileListDialogVisible"
              record-type="purchase_ledger"
              :record-id="recordId" />
  </div>
</template>

<script setup>
  import FormDialog from "@/components/Dialog/FormDialog.vue";
  import FileListDialog from "@/components/Dialog/FileListDialog.vue";
  import { getToken } from "@/utils/auth";
  import pagination from "@/components/PIMTable/Pagination.vue";
  import {
@@ -657,8 +655,8 @@
  } from "vue";
  import { Search, Delete } from "@element-plus/icons-vue";
  import { ElMessageBox, ElMessage } from "element-plus";
  import { userListNoPage } from "@/api/system/user.js";
  import {
    getSalesLedgerWithProducts,
    addOrUpdateSalesLedgerProduct,
    delProduct,
    delLedgerFile,
@@ -679,18 +677,23 @@
    delPurchaseTemplate,
  } from "@/api/procurementManagement/procurementLedger.js";
  import useFormData from "@/hooks/useFormData.js";
  const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue"));
  const FileList = defineAsyncComponent(() =>
    import("@/components/Dialog/FileList.vue")
  );

  const { proxy } = getCurrentInstance();
  const { tax_rate } = proxy.useDict("tax_rate");
  const tableData = ref([]);
  const productData = ref([]);
  const selectedRows = ref([]);
  const productSelectedRows = ref([]);
  const modelOptions = ref([]);
  const userList = ref([]);
  const productOptions = ref([]);
  const salesContractList = ref([]);
  const supplierList = ref([]);
  const tableLoading = ref(false);
  const fileListDialogVisible = ref(false);
  const page = reactive({
    current: 1,
    size: 100,
@@ -700,6 +703,7 @@
  import useUserStore from "@/store/modules/user";
  import { modelList, productTreeList } from "@/api/basicData/product.js";
  import dayjs from "dayjs";
  import FileUpload from "@/components/AttachmentUpload/file/index.vue";

  const userStore = useUserStore();

@@ -712,12 +716,12 @@
  };

  // 获取审批状态标签类型
  const getApprovalStatusType = (status) => {
  const getApprovalStatusType = status => {
    const typeMap = {
      1: "info",      // 待审核 - 灰色
      2: "warning",   // 审批中 - 橙色
      3: "success",   // 审批通过 - 绿色
      4: "danger",    // 审批失败 - 红色
      1: "info", // 待审核 - 灰色
      2: "warning", // 审批中 - 橙色
      3: "success", // 审批通过 - 绿色
      4: "danger", // 审批失败 - 红色
    };
    return typeMap[status] || "";
  };
@@ -799,7 +803,8 @@
        form.value.paymentMethod = matchedTemplate.paymentMethod;
      }
      // 模板数据中的产品字段是 productList，需要转换为 productData
      productData.value = matchedTemplate.productList || matchedTemplate.productData || [];
      productData.value =
        matchedTemplate.productList || matchedTemplate.productData || [];
    } else {
      // 未匹配到已有模板，视为新模板
      currentTemplateId.value = null;
@@ -841,7 +846,6 @@
      salesLedgerId: "",
      projectName: "",
      recorderId: "",
         recorderName: "",
      entryDate: "",
      productData: [],
      supplierName: "",
@@ -931,7 +935,7 @@
    url: import.meta.env.VITE_APP_BASE_API + "/purchase/ledger/import",
    headers: { Authorization: "Bearer " + getToken() },
    isUploading: false,
    beforeUpload: (file) => {
    beforeUpload: file => {
      const isExcel = file.name.endsWith(".xlsx") || file.name.endsWith(".xls");
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isExcel) {
@@ -980,7 +984,11 @@

  // 下载导入模板（如后端路径不同，可在此处调整）
  const downloadTemplate = () => {
    proxy.download("/purchase/ledger/exportTemplate", {}, "采购台账导入模板.xlsx");
    proxy.download(
      "/purchase/ledger/exportTemplate",
      {},
      "采购台账导入模板.xlsx"
    );
  };

  const submitImportFile = () => {
@@ -1045,8 +1053,8 @@
    // 检查是否有产品数据
    if (!productData.value || productData.value.length === 0) {
      ElMessage({
        message: '请先添加产品信息',
        type: 'warning',
        message: "请先添加产品信息",
        type: "warning",
      });
      return;
    }
@@ -1057,11 +1065,15 @@
        supplierId: form.value.supplierId,
        paymentMethod: form.value.paymentMethod,
        recorderId: form.value.recorderId,
            recorderName: form.value.recorderName,
        projectName: form.value.projectName,
        templateName: templateName.value.trim(),
      };
      console.log("template params ===>", params, "currentTemplateId:", currentTemplateId.value);
      console.log(
        "template params ===>",
        params,
        "currentTemplateId:",
        currentTemplateId.value
      );

      // 如果 currentTemplateId 有值，说明当前是“编辑已有模板” → 调用更新接口
      // 否则为“新建模板” → 调用新增接口
@@ -1200,8 +1212,11 @@
        return;
      }
    }
    

    await getTemplateList();
    await userListNoPage().then(res => {
      userList.value = res.data;
    });
    operationType.value = type;
    form.value = {};
    productData.value = [];
@@ -1222,8 +1237,6 @@
        item => item.isWhite === 0
      );

      // 设置默认值
      form.value.recorderName = userStore.nickName;
      form.value.entryDate = getCurrentDate();

      if (type === "add") {
@@ -1244,7 +1257,7 @@
          const purchaseRes = await getPurchaseById({ id: row.id, type: 2 });
          form.value = { ...purchaseRes };
          productData.value = purchaseRes.productData || [];
          fileList.value = purchaseRes.salesLedgerFiles || [];
          fileList.value = purchaseRes.storageBlobVOS || [];
        } catch (error) {
          console.error("加载采购台账数据失败:", error);
          proxy.$modal.msgError("加载数据失败");
@@ -1262,6 +1275,7 @@
      proxy.$modal.msgError("加载基础数据失败");
    }
  };

  // 上传前校检
  function handleBeforeUpload(file) {
    // 校检文件大小
@@ -1272,11 +1286,13 @@
    proxy.$modal.loading("正在上传文件，请稍候...");
    return true;
  }

  // 上传失败
  function handleUploadError(err) {
    proxy.$modal.msgError("上传文件失败");
    proxy.$modal.closeLoading();
  }

  // 上传成功回调
  function handleUploadSuccess(res, file, uploadFiles) {
    proxy.$modal.closeLoading();
@@ -1288,6 +1304,7 @@
      proxy.$refs.fileUpload.handleRemove(file);
    }
  }

  // 移除文件
  async function handleRemove(file) {
    if (!file?.id) {
@@ -1309,6 +1326,7 @@
      }
    }
  }

  // 提交表单
  const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
@@ -1327,11 +1345,7 @@
          proxy.$modal.msgWarning("请添加产品信息");
          return;
        }
        let tempFileIds = [];
        if (fileList.value.length > 0) {
          tempFileIds = fileList.value.map(item => item.tempId);
        }
        form.value.tempFileIds = tempFileIds;
        form.value.storageBlobDTOS = fileList.value;
        form.value.type = 2;

        // 如果salesLedgerId为空，则不传递salesContractNo
@@ -1365,13 +1379,13 @@
    productForm.value = {};
    proxy.resetForm("productFormRef");
    productFormVisible.value = true;
    

    // 先获取产品选项，确保数据加载完成
    await getProductOptions();
    

    // 等待 DOM 更新
    await nextTick();
    

    if (type === "add") {
      productForm.value.isChecked = false;
    }
@@ -1379,7 +1393,7 @@
    if (type === "edit") {
      // 复制行数据
      productForm.value = { ...row };
      

      // 如果是从模板加载的数据，可能没有 productId 和 productModelId
      // 需要根据 productCategory 和 specificationModel 来查找对应的 ID
      if (!productForm.value.productId && productForm.value.productCategory) {
@@ -1390,25 +1404,34 @@
              return nodes[i].value;
            }
            if (nodes[i].children && nodes[i].children.length > 0) {
              const found = findProductIdByCategory(nodes[i].children, categoryName);
              const found = findProductIdByCategory(
                nodes[i].children,
                categoryName
              );
              if (found) return found;
            }
          }
          return null;
        };
        
        const productId = findProductIdByCategory(productOptions.value, productForm.value.productCategory);

        const productId = findProductIdByCategory(
          productOptions.value,
          productForm.value.productCategory
        );
        if (productId) {
          productForm.value.productId = productId;
          // 获取型号列表并等待完成
          const modelRes = await modelList({ id: productId });
          modelOptions.value = modelRes;
          

          // 等待 DOM 更新
          await nextTick();
          

          // 根据 specificationModel 查找 productModelId
          if (productForm.value.specificationModel && modelOptions.value.length > 0) {
          if (
            productForm.value.specificationModel &&
            modelOptions.value.length > 0
          ) {
            const modelItem = modelOptions.value.find(
              item => item.model === productForm.value.specificationModel
            );
@@ -1422,15 +1445,15 @@
      } else if (productForm.value.productId) {
        // 如果有 productId，正常加载型号列表
        await getModels(productForm.value.productId);
        

        // 等待 DOM 更新
        await nextTick();
        

        if (productForm.value.productModelId) {
          getProductModel(productForm.value.productModelId);
        }
      }
      

      // 最后再等待一次 DOM 更新，确保所有数据都已设置
      await nextTick();
    }
@@ -1479,6 +1502,7 @@
    }
    return null; // 没有找到节点，返回null
  };

  function convertIdToValue(data) {
    return data.map(item => {
      const { id, children, ...rest } = item;
@@ -1493,6 +1517,7 @@
      return newItem;
    });
  }

  // 提交产品表单
  const submitProduct = () => {
    proxy.$refs["productFormRef"].validate(valid => {
@@ -1553,11 +1578,9 @@
          delProduct(ids).then(res => {
            proxy.$modal.msgSuccess("删除成功");
            closeProductDia();
            getPurchaseById({ id: currentId.value, type: 2 }).then(
              res => {
                productData.value = res.productData;
              }
            );
            getPurchaseById({ id: currentId.value, type: 2 }).then(res => {
              productData.value = res.productData;
            });
          });
        })
        .catch(() => {
@@ -1588,7 +1611,9 @@
  const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
      ids = selectedRows.value.filter(item => item.salesLedgerId === null).map(item => item.id);
      ids = selectedRows.value
        .filter(item => item.salesLedgerId === null)
        .map(item => item.id);
    } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
@@ -1608,6 +1633,7 @@
        proxy.$modal.msg("已取消");
      });
  };

  // 获取当前日期并格式化为 YYYY-MM-DD
  function getCurrentDate() {
    const today = new Date();
@@ -1616,6 +1642,7 @@
    const day = String(today.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }

  const mathNum = () => {
    if (!productForm.value.taxRate) {
      proxy.$modal.msgWarning("请先选择税率");
@@ -1748,16 +1775,6 @@
    }
  };

  // 打开附件弹窗
  const recordId =ref(0)
  const fileDialogVisible = ref(false)

  // 打开附件弹框
  const openFileDialog = async (row) => {
    recordId.value = row.id
    fileDialogVisible.value = true
  }

  // 获取模板信息
  const getTemplateList = async () => {
    let res = await getPurchaseTemplateList();
@@ -1766,13 +1783,19 @@
    }
  };

  // 打开附件弹框
  const openFileDialog = async row => {
    recordId.value = row.id;
    fileListDialogVisible.value = true;
  };

  // 删除模板
  const handleDeleteTemplate = async (item) => {
  const handleDeleteTemplate = async item => {
    if (!item.id) {
      proxy.$modal.msgWarning("无法删除该模板");
      return;
    }
    

    try {
      await ElMessageBox.confirm(
        `确定要删除模板"${item.templateName}"吗？`,
@@ -1783,7 +1806,7 @@
          type: "warning",
        }
      );
      

      const res = await delPurchaseTemplate([item.id]);
      if (res && res.code === 200) {
        ElMessage({
@@ -1825,18 +1848,21 @@
    opacity: 0.6;
    background-color: #f5f7fa;
  }

  .el-row {
    justify-content: space-between;
    align-items: center;
  }

  .no-arrow-select {
    --el-select-suffix-icon-color: transparent; /* 隐藏默认下拉箭头 */
  }

  .select-button-group {
    display: flex;
    align-items: center;
  }
  

  // 审批人节点容器样式
  .approver-nodes-container {
    display: flex;
@@ -1847,7 +1873,7 @@
    border-radius: 4px;
    border: 1px solid #e4e7ed;
  }
  

  .approver-node-item {
    flex: 0 0 calc(33.333% - 12px);
    min-width: 200px;
@@ -1856,41 +1882,42 @@
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    transition: all 0.3s;
    

    &:hover {
      border-color: #409eff;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
    }
  }
  

  .approver-node-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  

  .approver-node-label {
    font-size: 13px;
    font-weight: 500;
    color: #606266;
  }
  

  @media (max-width: 1200px) {
    .approver-node-item {
      flex: 0 0 calc(50% - 8px);
    }
  }
  

  @media (max-width: 768px) {
    .approver-node-item {
      flex: 0 0 100%;
    }
  }
  

  // 删除图标样式
  .delete-icon {
    transition: all 0.3s;

    &:hover {
      color: #f56c6c !important;
      transform: scale(1.2);