sweet-hut-ui/src/views/ledger/detail[id].vue

<template>
  <div class="mobile-ledger-detail common-mobile-view">
    <el-form ref="formRef" :model="ledgerStore.currentLedgerRecord"
             :rules="rules" label-position="top" label-width="auto"
             class="form-item">
      <el-form-item label="账本" prop="book">
        <el-input v-model="ledgerStore.currentLedgerRecord.book"
                  placeholder="请输入账本名称" clearable
                  show-word-limit :maxlength="10"/>
      </el-form-item>

      <el-form-item label="类别" prop="category">
        <el-input v-model="ledgerStore.currentLedgerRecord.category"
                  placeholder="请输入类别" clearable
                  show-word-limit :maxlength="10"/>
      </el-form-item>

      <el-form-item label="内容" prop="content">
        <el-input v-model="ledgerStore.currentLedgerRecord.content"
                  placeholder="请输入内容" clearable
                  show-word-limit :maxlength="10"/>
      </el-form-item>

      <el-form-item label="金额" prop="price">
        <amount-input v-model="ledgerStore.currentLedgerRecord.price"/>
      </el-form-item>

      <el-form-item label="数量" prop="number">
        <el-input-number v-model="ledgerStore.currentLedgerRecord.number"/>
      </el-form-item>

      <el-form-item label="单位" prop="unit">
        <el-input v-model="ledgerStore.currentLedgerRecord.unit"
                  placeholder="请输入单位" clearable
                  show-word-limit :maxlength="5"/>
      </el-form-item>

      <el-form-item label="付款人" prop="payer">
        <el-input v-model="ledgerStore.currentLedgerRecord.payer"
                  placeholder="请输入付款人" clearable
                  show-word-limit :maxlength="10"/>
      </el-form-item>

      <el-form-item label="供应商">
        <el-input v-model="ledgerStore.currentLedgerRecord.provider"
                  placeholder="请输入供应商" clearable
                  show-word-limit :maxlength="10"/>
      </el-form-item>

      <el-form-item label="图片">
        <el-upload
            v-model:file-list="imageFileList"
            list-type="picture-card"
            :accept="acceptImageTypes"
            :limit="1"
            :before-upload="beforeUpload"
            :http-request="httpRequest"
            :on-success="handleSuccess"
            :on-exceed="handleExceed"
            :before-remove="beforeRemove"
            :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
          <template #tip>
            <div class="el-upload__tip">
              请上传小于10M的图片
            </div>
          </template>
        </el-upload>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="ledgerStore.currentLedgerRecord.remark" autocomplete="off"
                  placeholder="请输入备注" clearable
                  show-word-limit maxlength="10">
        </el-input>
      </el-form-item>
    </el-form>

    <div class="button-container">
      <el-button type="primary" @click="confirmClick">确认</el-button>
      <el-button v-if="ledgerStore.ledgerApiType === 'UPDATE'"
                 type="danger" @click="deleteClick">删除</el-button>
      <el-button type="info" @click="cancelClick">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { AmountInput } from 'vue3-common'
import { useLedgerStore } from '@/store/ledger.ts'
import { useAppStore } from '@/store/app.ts'
import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
import { ledgerRules } from '@/utils/element/elRules.ts'
import { onMounted, reactive, ref } from 'vue'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { AListUrl } from '@/utils'
import { acceptImageTypes } from '@/utils/file.ts'
import { Plus } from '@element-plus/icons-vue'
import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'

const formRef = ref()
const rules = reactive<FormRules>(ledgerRules)
const imageFileList = ref<UploadUserFile[]>([])

const ledgerStore = useLedgerStore()
const appStore = useAppStore()

onMounted(async () => {
  appStore.isShowMobileBack = true

  initImageFileList()
})

const initImageFileList = () => {
  imageFileList.value = []
  const { imageUrl } = ledgerStore.currentLedgerRecord
  if (imageUrl) {
    imageFileList.value.push({
      name: 'image',
      url: imageUrl
    })
  }
}

const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
  return beforeUploadImage(rawFile)
}

const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
  return await httpRequestFile(ledgerStore.ledgerImagePath, options)
}

const handleSuccess = (response: string) => {
  ledgerStore.currentLedgerRecord.imageUrl = response
}

const handleExceed: UploadProps['onExceed'] = () => {
  ElMessage.warning('最多上传1张图片')
}

const handleRemove: UploadProps['onRemove'] = () => {
  ledgerStore.currentLedgerRecord.imageUrl = ''
}

const beforeRemove: UploadProps['beforeRemove'] = () => {
  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
}

/**
 * 点击确认按钮
 */
const confirmClick = () => {
  formRef.value.validate().then(async () => {
    await ledgerStore.handleLedgerApi(ledgerStore.currentLedgerRecord)
    history.back()
    appStore.isShowMobileBack = false
  })
}

const cancelClick = () => {
  history.back()
  appStore.isShowMobileBack = false
}

const deleteClick = () => {
  commonElMessageBox('是否确认删除该账本内容?').then(async () => {
    ledgerStore.ledgerApiType = 'DELETE'
    await ledgerStore.handleLedgerApi(ledgerStore.currentLedgerRecord)
    history.back()
    appStore.isShowMobileBack = false
  })
}
</script>

<style scoped lang="scss">
.mobile-ledger-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .button-container {
    align-self: center;
  }
}
</style>