gaoluyang
2026-04-21 207c564c2b8d46fd86160c4f6583c2fc9d4a4e5c
src/pages/cooperativeOffice/collaborativeApproval/detail.vue
@@ -14,30 +14,37 @@
                 disabled
                 placeholder="自动编号" />
      </u-form-item>
      <!-- 审批标题(仅当 approveType 为 9 或 10 时显示) -->
      <u-form-item v-if="approveType === 9 || approveType === 10"
                   prop="approveTitle"
                   label="审批标题"
                   required>
        <u-input v-model="form.approveTitle"
                 placeholder="请输入审批标题"
                 clearable />
      </u-form-item>
      <u-form-item prop="approveReason"
                   :label="approveType === 5 ? '采购事由' : '申请事由'"
                   :label="getApproveReasonLabel()"
                   required>
        <u-input v-model="form.approveReason"
                 type="textarea"
                 rows="2"
                 auto-height
                 maxlength="200"
                 :placeholder="approveType === 5 ? '请输入采购事由' : '请输入申请事由'"
                 :placeholder="getApproveReasonPlaceholder()"
                 show-word-limit />
      </u-form-item>
      <u-form-item prop="approveDeptName"
                   label="申请部门"
                   required>
        <u-input v-model="form.approveDeptName"
                 placeholder="请选择申请部门" />
        <!-- <u-input v-model="form.approveDeptName"
                 readonly
                 placeholder="请选择申请部门"
                 @click="showPicker = true" />
        <template #right>
          <up-icon name="arrow-right"
                   @click="showPicker = true"></up-icon>
        </template> -->
        </template>
      </u-form-item>
      <u-form-item prop="approveUser"
                   label="申请人"
@@ -53,24 +60,36 @@
                 readonly
                 placeholder="请选择"
                 @click="showDatePicker" />
        <template #right>
          <up-icon name="arrow-right"
                   @click="showDatePicker"></up-icon>
        </template>
      </u-form-item>
      <!-- approveType=2 请假相关字段 -->
      <template v-if="approveType === 2">
        <u-form-item prop="startDate"
                     label="请假开始时间"
                     label="开始时间"
                     required>
          <u-input v-model="form.startDate"
                   readonly
                   placeholder="请选择开始时间"
                   placeholder="请假开始时间"
                   @click="showStartDatePicker" />
          <template #right>
            <up-icon name="arrow-right"
                     @click="showStartDatePicker"></up-icon>
          </template>
        </u-form-item>
        <u-form-item prop="endDate"
                     label="请假结束时间"
                     label="结束时间"
                     required>
          <u-input v-model="form.endDate"
                   readonly
                   placeholder="请选择结束时间"
                   placeholder="请假结束时间"
                   @click="showEndDatePicker" />
          <template #right>
            <up-icon name="arrow-right"
                     @click="showEndDatePicker"></up-icon>
          </template>
        </u-form-item>
      </template>
      <!-- approveType=3 出差相关字段 -->
@@ -91,6 +110,19 @@
                 type="number"
                 placeholder="请输入报销金额"
                 clearable />
      </u-form-item>
      <!-- 附件上传 -->
      <u-form-item label="附件材料">
        <view class="file-upload-area">
          <view v-for="(file, index) in fileList" :key="file.id || index" class="file-item">
            <text class="file-name">{{ file.name || file.fileName }}</text>
            <text class="file-delete" @click="removeFile(index)">×</text>
          </view>
          <view class="upload-btn" @click="chooseFile" v-if="operationType !== 'view'">
            <up-icon name="plus" size="20" color="#006cfb"></up-icon>
            <text class="upload-text">上传附件</text>
          </view>
        </view>
      </u-form-item>
    </u-form>
    <!-- 选择器弹窗 -->
@@ -215,6 +247,7 @@
      approveUserName: "",
      approveDeptName: "",
      approveDeptId: "",
      approveTitle: "", // 审批标题(自由协同审批使用)
      approveReason: "",
      checkResult: "",
      tempFileIds: [],
@@ -227,8 +260,9 @@
    rules: {
      approveTime: [{ required: false, message: "请输入", trigger: "change" }],
      approveId: [{ required: false, message: "请输入", trigger: "blur" }],
      approveDeptId: [{ required: true, message: "请输入", trigger: "blur" }],
      approveDeptId: [{ required: true, message: "请选择", trigger: "change" }],
      approveReason: [{ required: true, message: "请输入", trigger: "blur" }],
      approveTitle: [{ required: true, message: "请输入审批标题", trigger: "blur" }],
      checkResult: [{ required: false, message: "请输入", trigger: "blur" }],
      startDate: [
        { required: false, message: "请选择开始时间", trigger: "change" },
@@ -259,6 +293,32 @@
  const userStore = useUserStore();
  const approveType = ref(0);
  // 获取审批事由标签
  const getApproveReasonLabel = () => {
    const type = Number(approveType.value);
    if (type === 5) {
      return '采购计划说明';
    } else if (type === 9) {
      return '销售合同号';
    } else if (type === 10) {
      return '审批事由';
    }
    return '审批事由';
  };
  // 获取审批事由占位符
  const getApproveReasonPlaceholder = () => {
    const type = Number(approveType.value);
    if (type === 5) {
      return '请输入采购计划说明';
    } else if (type === 9) {
      return '请输入销售合同号';
    } else if (type === 10) {
      return '请输入审批事由';
    }
    return '请输入申请事由';
  };
  const getProductOptions = () => {
    getDept().then(res => {
      productOptions.value = res.data.map(item => ({
@@ -269,6 +329,76 @@
  };
  const fileList = ref([]);
  let nextApproverId = 2;
  // 处理部门选择变化
  const handleDeptChange = (deptIds) => {
    if (deptIds && deptIds.length > 0) {
      const selectedNames = productOptions.value
        .filter(dept => deptIds.includes(dept.value))
        .map(dept => dept.name);
      form.value.approveDeptName = selectedNames.join(',');
    } else {
      form.value.approveDeptName = '';
    }
  };
  // 选择审批人
  const addApprover = (stepIndex) => {
    uni.setStorageSync("stepIndex", stepIndex);
    uni.navigateTo({
      url: "/pages/cooperativeOffice/collaborativeApproval/contactSelect",
    });
  };
  // 添加审批节点
  const addApprovalStep = () => {
    approverNodes.value.push({ id: nextApproverId++, userId: null, nickName: null });
  };
  // 移除审批人
  const removeApprover = (stepIndex) => {
    approverNodes.value[stepIndex].userId = null;
    approverNodes.value[stepIndex].nickName = null;
  };
  // 移除审批节点
  const removeApprovalStep = (stepIndex) => {
    if (approverNodes.value.length > 1) {
      approverNodes.value.splice(stepIndex, 1);
    } else {
      showToast("至少需要一个审批步骤");
    }
  };
  // 处理联系人选择结果
  const handleSelectContact = (data) => {
    const { stepIndex, contact } = data;
    approverNodes.value[stepIndex].userId = contact.userId;
    approverNodes.value[stepIndex].nickName = contact.nickName;
  };
  // 选择文件上传
  const chooseFile = () => {
    uni.chooseMessageFile({
      count: 10,
      success: (res) => {
        const tempFilePaths = res.tempFiles;
        // 这里可以添加上传逻辑
        tempFilePaths.forEach(file => {
          fileList.value.push({
            name: file.name,
            path: file.path,
            size: file.size,
          });
        });
      }
    });
  };
  // 移除文件
  const removeFile = (index) => {
    fileList.value.splice(index, 1);
  };
  const getCurrentinfo = () => {
    userStore.getInfo().then(res => {
      form.value.approveDeptId = res.user.tenantId;
@@ -400,7 +530,21 @@
            .map(node => node.userId)
            .join(",");
          form.value.approveType = approveType.value;
          console.log("form.value---", form.value);
          form.value.approveDeptId = Number(form.value.approveDeptId);
          // const submitForm = {
          //   approveDeptId: form.value.approveDeptId,
          //   approveDeptName: form.value.approveDeptName,
          //   approveReason: form.value.approveReason,
          //   approveTime: form.value.approveTime,
          //   approveType: form.value.approveType,
          //   approveUser: form.value.approveUser,
          //   approveUserIds: form.value.approveUserIds,
          //   endDate: form.value.endDate,
          //   startDate: form.value.startDate,
          // };
          // console.log("form.value---", form.value);
          // console.log("submitForm", submitForm);
          if (operationType.value === "add" || currentApproveStatus.value == 3) {
            approveProcessAdd(form.value).then(res => {
              showToast("提交成功");
@@ -435,44 +579,6 @@
      });
  };
  // 处理联系人选择结果
  const handleSelectContact = data => {
    const { stepIndex, contact } = data;
    // 将选中的联系人设置为对应审批步骤的审批人
    approverNodes.value[stepIndex].userId = contact.userId;
    approverNodes.value[stepIndex].nickName = contact.nickName;
  };
  const addApprover = stepIndex => {
    // 跳转到联系人选择页面
    uni.setStorageSync("stepIndex", stepIndex);
    uni.navigateTo({
      url: "/pages/cooperativeOffice/collaborativeApproval/contactSelect",
    });
  };
  const addApprovalStep = () => {
    // 添加新的审批步骤
    approverNodes.value.push({ userId: null, nickName: null });
  };
  const removeApprover = stepIndex => {
    // 移除审批人
    approverNodes.value[stepIndex].userId = null;
    approverNodes.value[stepIndex].nickName = null;
  };
  const removeApprovalStep = stepIndex => {
    // 确保至少保留一个审批步骤
    if (approverNodes.value.length > 1) {
      approverNodes.value.splice(stepIndex, 1);
    } else {
      uni.showToast({
        title: "至少需要一个审批步骤",
        icon: "none",
      });
    }
  };
  // 显示日期选择器
  const showDatePicker = () => {
    showDate.value = true;
@@ -900,4 +1006,52 @@
    color: #3b82f6;
    font-size: 14px;
  }
  // 文件上传区域样式
  .file-upload-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    padding: 10px 12px;
    border-radius: 8px;
  }
  .file-name {
    font-size: 14px;
    color: #333;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .file-delete {
    font-size: 18px;
    color: #ff4d4f;
    margin-left: 8px;
    padding: 0 4px;
  }
  .upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed #d9d9d9;
    border-radius: 8px;
    padding: 16px;
    background: #fafafa;
  }
  .upload-text {
    font-size: 14px;
    color: #666;
  }
</style>