shanxia2.0/miniprogram/pages/bx/advance/apply.vue

<template>
  <view class="bx-page bx-page--form">
    <view class="topbar" :style="safeAreaStyle">
      <view class="topbar-left">
        <text class="topbar-back" @click="goBack">←</text>
        <text class="topbar-title">备用金申请</text>
      </view>
      <view class="topbar-right" />
    </view>

    <view class="page-padded">
      <view class="form-card">
        <view class="form-header">
          <text class="form-header-title">备用金信息</text>
          <text class="form-badge">{{ isEdit ? '编辑' : '新建' }}</text>
        </view>

        <view class="field">
          <text class="field-label">申请原因<text class="req">*</text></text>
          <textarea
            class="form-textarea"
            :class="{ error: fieldErr.reason }"
            :value="form.reason"
            placeholder="请输入申请原因"
            :maxlength="500"
            @input="onReasonInput"
          />
        </view>

        <view class="field">
          <text class="field-label">申请金额<text class="req">*</text></text>
          <view class="form-input-prefix">
            <input
              class="form-input"
              :class="{ error: fieldErr.amount }"
              type="digit"
              :value="form.amount"
              placeholder="请输入金额"
              @input="onAmountInput"
            />
          </view>
        </view>

        <view class="field">
          <text class="field-label">备注</text>
          <textarea
            class="form-textarea"
            :value="form.remark"
            placeholder="选填"
            :maxlength="500"
            @input="onRemarkInput"
          />
        </view>
      </view>

      <view class="form-card">
        <view class="form-header">
          <text class="form-header-title">附件</text>
        </view>
        <button
          class="btn btn-primary btn-sm"
          :disabled="uploading"
          @click="chooseAttachments"
        >
          {{ uploading ? '上传中…' : '上传图片' }}
        </button>
        <view v-if="files.length" class="att-grid">
          <view v-for="(file, idx) in files" :key="file.id" class="att-img">
            <image :src="file.previewUrl || file.localPath" mode="aspectFill" />
            <view v-if="!file._pending" class="del" @click.stop="removeFile(idx)">×</view>
          </view>
        </view>
        <view v-else class="detail-section-empty" style="margin-top: 8px">暂无附件（可选）</view>
      </view>
    </view>

    <view class="bottom-action-bar">
      <button class="btn btn-primary btn-block" :disabled="submitting" @click="onSubmit">
        {{ submitting ? '保存中…' : '保存' }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { PAGE_PATHS } from '@/config/api'
import { advanceApi, attachmentApi } from '@/api/bx'
import { getSafeAreaStyle } from '@/utils/safeArea'
const safeAreaStyle = getSafeAreaStyle()

const MAX_ATTACHMENTS = 10
const editId = ref('')
const savedId = ref('')
const submitting = ref(false)
const uploading = ref(false)
const files = ref([])

const form = reactive({
  reason: '',
  amount: '',
  remark: ''
})
const fieldErr = reactive({ reason: false, amount: false })

const isEdit = computed(() => !!editId.value || !!savedId.value)

function onReasonInput(e) {
  form.reason = e.detail.value
  fieldErr.reason = false
}
function onAmountInput(e) {
  form.amount = e.detail.value
  fieldErr.amount = false
}
function onRemarkInput(e) {
  form.remark = e.detail.value
}

function goBack() {
  uni.navigateBack({ fail: () => uni.redirectTo({ url: PAGE_PATHS.bxAdvanceApply }) })
}

function validate() {
  fieldErr.reason = false
  fieldErr.amount = false
  if (!form.reason?.trim()) {
    fieldErr.reason = true
    uni.showToast({ title: '请输入申请原因', icon: 'none' })
    return false
  }
  const raw = String(form.amount ?? '').trim()
  if (!raw) {
    fieldErr.amount = true
    uni.showToast({ title: '请输入申请金额', icon: 'none' })
    return false
  }
  const amt = Number(raw)
  if (Number.isNaN(amt) || amt <= 0) {
    fieldErr.amount = true
    uni.showToast({ title: '请输入大于 0 的申请金额', icon: 'none' })
    return false
  }
  return true
}

async function chooseAttachments() {
  const remain = MAX_ATTACHMENTS - files.value.length
  if (remain <= 0) {
    uni.showToast({ title: `最多上传 ${MAX_ATTACHMENTS} 个附件`, icon: 'none' })
    return
  }
  uni.chooseImage({
    count: remain,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: async (res) => {
      const paths = res.tempFilePaths || []
      for (const path of paths) {
        await uploadOne(path)
      }
    }
  })
}

async function uploadOne(filePath) {
  const pendingId = `pending_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`
  files.value.push({
    id: pendingId,
    previewUrl: filePath,
    localPath: filePath,
    _pending: true,
    _existing: false
  })
  uploading.value = true
  try {
    const res = await attachmentApi.upload(filePath, '', 0)
    const data = res?.data || {}
    const id = String(data.id || '')
    let previewUrl = filePath
    if (id) {
      try {
        const pRes = await attachmentApi.preview(id)
        if (pRes?.data?.url) previewUrl = pRes.data.url
      } catch (e) {
        // keep local
      }
    }
    const idx = files.value.findIndex((f) => f.id === pendingId)
    if (idx >= 0) {
      files.value[idx] = {
        id: id || pendingId,
        previewUrl,
        localPath: filePath,
        _pending: false,
        _existing: false
      }
    }
  } catch (e) {
    files.value = files.value.filter((f) => f.id !== pendingId)
  } finally {
    uploading.value = files.value.some((f) => f._pending)
  }
}

function removeFile(idx) {
  const file = files.value[idx]
  if (!file) return
  if (file._existing && file.id && !String(file.id).startsWith('pending_')) {
    attachmentApi.delete(file.id).catch(() => {})
  }
  files.value.splice(idx, 1)
}

async function bindNewAttachments(bizId) {
  const newIds = files.value
    .filter((f) => f.id && !f._existing && !f._pending && !String(f.id).startsWith('pending_'))
    .map((f) => f.id)
  if (!newIds.length) return
  await attachmentApi.bindBiz(newIds, 'advance', bizId)
  files.value.forEach((f) => {
    if (newIds.includes(f.id)) f._existing = true
  })
}

async function loadEditData(id) {
  try {
    const res = await advanceApi.getById(id)
    const data = res?.data || {}
    form.reason = data.reason || ''
    form.amount = data.amount != null ? String(data.amount) : ''
    form.remark = data.remark != null ? String(data.remark) : ''
    try {
      const attRes = await attachmentApi.listByBiz('advance', id)
      const list = attRes?.data || []
      const mapped = []
      for (const a of list) {
        let previewUrl = ''
        if ((a.fileType || '').startsWith('image/')) {
          try {
            const pRes = await attachmentApi.preview(a.id)
            previewUrl = pRes?.data?.url || ''
          } catch (e) {
            // skip
          }
        }
        mapped.push({
          id: String(a.id),
          previewUrl,
          _pending: false,
          _existing: true
        })
      }
      files.value = mapped
    } catch (e) {
      files.value = []
    }
  } catch (e) {
    uni.showToast({ title: '加载数据失败', icon: 'none' })
  }
}

async function onSubmit() {
  if (!validate()) return
  if (uploading.value) {
    uni.showToast({ title: '附件上传中，请稍候', icon: 'none' })
    return
  }
  submitting.value = true
  const isEditingAction = !!editId.value || !!savedId.value
  try {
    const data = {
      reason: form.reason.trim(),
      amount: Number(form.amount),
      remark: form.remark
    }
    let id
    if (editId.value || savedId.value) {
      id = savedId.value || editId.value
      await advanceApi.update(id, data)
      await bindNewAttachments(id)
    } else {
      const res = await advanceApi.create(data)
      id = String(res?.data?.id ?? res?.id ?? '')
      if (!id) throw new Error('保存成功但未返回申请单ID')
      await bindNewAttachments(id)
      savedId.value = id
      editId.value = id
    }
    uni.showModal({
      title: isEditingAction ? '保存成功' : '创建成功',
      content: '备用金申请已保存为草稿',
      confirmText: '提交审批',
      confirmColor: '#00a874',
      cancelText: '继续编辑',
      success: async (modalRes) => {
        if (!modalRes.confirm) return
        try {
          await advanceApi.submit(id)
          uni.showToast({ title: '提交成功', icon: 'success' })
          setTimeout(() => goBack(), 500)
        } catch (e) {
          // toasted
        }
      }
    })
  } catch (e) {
    // toasted by bxRequest when BizError
  } finally {
    submitting.value = false
  }
}

onLoad((query) => {
  const id = query?.id ? String(query.id) : ''
  if (id) {
    editId.value = id
    loadEditData(id)
  }
})
</script>

<style lang="scss">
@import '@/styles/bx-theme.scss';
</style>