修改组件

gaoluyang

2 天以前 025e46e11cb2962fd7692adfa401333758cc779b

 src/pages/cooperativeOffice/collaborativeApproval/detail.vue

@@ -3,75 +3,68 @@
    <PageHeader title="审批流程" @back="goBack" />

    <!-- 表单区域 -->
    <view class="form-section">
      <van-form ref="formRef" @submit="submitForm" :rules="rules" input-align="right" error-message-align="right" scroll-to-error scroll-to-error-position="center">
            <van-cell-group style="margin-bottom: 16px;">
               <van-field
                  v-model="form.approveReason"
                  name="approveReason"
                  rows="2"
                  autosize
                  label="申请事由"
                  type="textarea"
                  maxlength="200"
                  :rules="[{ required: true, message: '申请事由不能为空' }]"
                  placeholder="请输入申请事由"
                  show-word-limit
                  required
               />
            </van-cell-group>
            <van-cell-group>
               <van-field
                  v-model="form.approveDeptName"
                  readonly
                  name="picker"
                  label="申请部门"
                  placeholder="请选择申请部门"
                  :rules="[{ required: true, message: '请选择申请部门' }]"
    <u-form ref="formRef" @submit="submitForm" :rules="rules" :model="form" label-width="140rpx">
      <u-form-item prop="approveReason" label="申请事由" required>
        <u-input
          v-model="form.approveReason"
          type="textarea"
          rows="2"
          auto-height
          maxlength="200"
          placeholder="请输入申请事由"
          show-word-limit
        />
      </u-form-item>
      <u-form-item prop="approveDeptName" label="申请部门" required>
        <u-input
          v-model="form.approveDeptName"
          readonly
          placeholder="请选择申请部门"
          @click="showPicker = true"
        />
        <template #right>
               <up-icon
                  name="arrow-right"
                  @click="showPicker = true"
                  required
               />
          <van-field
            v-model="form.approveUserName"
            name="taxPrice"
            label="申请人"
            placeholder="请输入申请人"
            :rules="[{ required: true, message: '申请人不能为空' }]"
            required
            readonly
          />
          <van-popup
            v-model:show="showPicker"
            position="bottom"
          >
            <van-picker
              :columns="productOptions"
              :model-value="pickerValue"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
               <van-field
                  v-model="form.approveTime"
                  label="申请日期"
                  placeholder="请选择"
                  readonly
                  required
                  @click="showDatePicker"
                  :rules="[{ required: true, message: '请选择来款日期' }]"
               />
               <!-- 日期选择器 -->
               <van-popup v-model:show="showDate" position="bottom">
                  <van-date-picker
                     v-model="currentDate"
                     title="选择日期"
                     @confirm="onDateConfirm"
                     @cancel="showDate = false"
                  />
               </van-popup>
        </van-cell-group>
      </van-form>
    </view>
               ></up-icon>
            </template>
      </u-form-item>
      <u-form-item prop="approveUser" label="申请人" required>
        <u-input
          v-model="form.approveUserName"
          placeholder="请输入申请人"
          readonly
        />
      </u-form-item>
      <u-form-item prop="approveTime" label="申请日期" required>
        <u-input
          v-model="form.approveTime"
          placeholder="请选择"
          readonly
          @click="showDatePicker"
        />
      </u-form-item>
    </u-form>

    <!-- 选择器弹窗 -->
    <up-action-sheet
      :show="showPicker"
      :actions="productOptions"
      title="选择部门"
      @select="onConfirm"
      @close="showPicker = false"
    />

    <!-- 日期选择器 -->
    <u-popup v-model="showDate" mode="bottom">
      <u-datetime-picker
        v-model="currentDate"
        title="选择日期"
        mode="date"
        @confirm="onDateConfirm"
        @cancel="showDate = false"
      />
    </u-popup>
    <!-- 审核流程区域 -->
    <view class="approval-process">
      <view class="approval-header">
@@ -107,14 +100,14 @@
      </view>

      <view class="add-step-btn">
            <van-button icon="plus" plain type="primary" style="width: 100%" @click="addApprovalStep">新增节点</van-button>
         <u-button icon="plus" plain type="primary" style="width: 100%" @click="addApprovalStep">新增节点</u-button>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer-btns">
      <van-button class="cancel-btn" @click="goBack">取消</van-button>
      <van-button class="save-btn" @click="submitForm">保存</van-button>
      <u-button class="cancel-btn" @click="goBack">取消</u-button>
      <u-button class="save-btn" @click="submitForm">保存</u-button>
    </view>
  </view>
</template>
@@ -123,8 +116,14 @@
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import PageHeader from "@/components/PageHeader.vue";
import useUserStore from "@/store/modules/user";
import { formatDateToYMD } from '@/utils/ruoyi'
import {getDept, approveProcessGetInfo, approveProcessAdd, approveProcessUpdate} from "@/api/collaborativeApproval/approvalProcess";
import { showToast } from 'vant'
const showToast = (message) => {
   uni.showToast({
      title: message,
      icon: 'none'
   })
}
import {userListNoPageByTenantId} from "@/api/system/user";

const data = reactive({
@@ -143,7 +142,6 @@
   rules: {
      approveTime: [{ required: false, message: "请输入", trigger: "change" },],
      approveId: [{ required: false, message: "请输入", trigger: "blur" }],
      approveUser: [{ required: false, message: "请输入", trigger: "blur" }],
      approveDeptId: [{ required: true, message: "请输入", trigger: "blur" }],
      approveReason: [{ required: true, message: "请输入", trigger: "blur" }],
      checkResult: [{ required: false, message: "请输入", trigger: "blur" }],
@@ -151,7 +149,6 @@
});
const { form, rules } = toRefs(data);
const result = ref("");
const pickerValue = ref([]);
const showPicker = ref(false);
const productOptions = ref([]);
const operationType = ref("");
@@ -168,7 +165,7 @@
   getDept().then((res) => {
      productOptions.value = res.data.map(item => ({
         value: item.deptId,
         text: item.deptName
         name: item.deptName
      }))
   });
};
@@ -188,7 +185,8 @@
      // 获取URL参数
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      operationType.value = currentPage.options.operationType || 'add';
      const options = currentPage && currentPage.options ? currentPage.options : {};
      operationType.value = options.operationType || 'add';
      
      // 如果是编辑模式，从本地存储获取数据
      if (operationType.value === 'edit') {
@@ -239,10 +237,15 @@
  uni.$off('selectContact', handleSelectContact);
});

const onConfirm = ({ selectedValues, selectedOptions }) => {
  form.value.approveDeptName = selectedOptions[0]?.text;
  form.value.approveDeptId = selectedOptions[0]?.value;
  pickerValue.value = selectedValues;
const onConfirm = (item) => {
  // 设置选中的部门
  form.value.approveDeptName = item.name;
  // 确保设置的是字符串类型的部门ID
  form.value.approveDeptId = String(item.value || '');
  console.log('部门选择后的值:', {
    approveDeptId: form.value.approveDeptId,
    approveDeptName: form.value.approveDeptName
  });
  showPicker.value = false;
};

@@ -260,38 +263,59 @@
    return;
  }
  
  formRef.value.validate().then(() => {
    // 表单校验通过，可以提交数据
      // 收集所有节点的审批人id
      console.log('approverNodes---', approverNodes.value)
      form.value.approveUserIds = approverNodes.value.map(node => node.userId).join(',')
      form.value.approveType = 0
      if (operationType.value === "add" || currentApproveStatus.value == 3) {
         approveProcessAdd(form.value).then(res => {
            showToast("提交成功");
            goBack()
         })
      } else {
         approveProcessUpdate(form.value).then(res => {
            showToast("提交成功");
            goBack()
         })
      }
  // 手动检查必填字段，防止因数据类型问题导致的校验失败
  if (!form.value.approveReason || !form.value.approveReason.trim()) {
    showToast('请输入申请事由');
    return;
  }
  
  if (!form.value.approveDeptId || String(form.value.approveDeptId).trim() === '') {
    showToast('请选择申请部门');
    return;
  }
  
  if (!form.value.approveTime) {
    showToast('请选择申请日期');
    return;
  }
  
  formRef.value.validate().then((valid) => {
    if (valid) {
      // 表单校验通过，可以提交数据
     // 收集所有节点的审批人id
     console.log('approverNodes---', approverNodes.value)
     form.value.approveUserIds = approverNodes.value.map(node => node.userId).join(',')
     form.value.approveType = 0
     if (operationType.value === "add" || currentApproveStatus.value == 3) {
      approveProcessAdd(form.value).then(res => {
        showToast("提交成功");
        goBack()
      })
     } else {
      approveProcessUpdate(form.value).then(res => {
        showToast("提交成功");
        goBack()
      })
     }
    }
  }).catch((error) => {
    console.error("表单校验失败:", error);
    // 显示具体的错误信息
    if (error.length > 0) {
      const firstError = error[0];
      uni.showToast({
        title: firstError.message || '表单校验失败',
        icon: 'none'
      });
    } else {
      uni.showToast({
        title: '表单校验失败，请检查必填项',
        icon: 'none'
      });
    // 尝试获取具体的错误字段
    if (error && error.errors) {
      const firstError = error.errors[0];
      if (firstError) {
        uni.showToast({
          title: firstError.message || '表单校验失败，请检查必填项',
          icon: 'none'
        });
        return;
      }
    }
    // 显示通用错误信息
    uni.showToast({
      title: '表单校验失败，请检查必填项',
      icon: 'none'
    });
  });
};

@@ -338,10 +362,10 @@
}

// 确认日期选择
const onDateConfirm = ({ selectedValues }) => {
   form.value.approveTime = selectedValues.join('-')
   currentDate.value = selectedValues
   showDate.value = false
const onDateConfirm = (e) => {
  form.value.approveTime = formatDateToYMD(e.value)
   currentDate.value = formatDateToYMD(e.value)
   showDate.value = false;
}
// 获取当前日期并格式化为 YYYY-MM-DD
function getCurrentDate() {
@@ -354,34 +378,7 @@
</script>

<style scoped lang="scss">
.account-detail {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 80px;
}

.header {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.form-section {
  margin-top: 16px;
}
@import '@/static/scss/form-common.scss';

.approval-process {
  background: #fff;