feat:重构模块

src/views/ledger/detail[id].vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="mobile-ledger-detail common-mobile-view">
+    <el-form ref="formRef" :model="ledgerStore.currentLedgerRecord"
+             :rules="rules" label-width="auto">
+      <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="供应商" prop="provider">
+        <el-input v-model="ledgerStore.currentLedgerRecord.provider"
+                  placeholder="请输入供应商" clearable
+                  show-word-limit :maxlength="10"/>
+      </el-form-item>
+
+      <el-form-item label="图片" prop="provider">
+        <upload-image v-model="ledgerStore.currentLedgerRecord.imageUrl"
+                      :image-limit="1"
+                      :service-url="fileServiceUrl"
+                      :service-file-root-path="serviceFileRootPath"
+                      :image-path="ledgerStore.ledgerImagePath"/>
+      </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 { UploadImage } from 'vue3-common'
+import { AmountInput } from 'vue3-common'
+import { useLedgerStore } from '@/store/ledger.ts'
+import { useAppStore } from '@/store/app.ts'
+import { FormRules } from 'element-plus'
+import { ledgerRules } from '@/utils/element/elRules.ts'
+import { onMounted, reactive, ref } from 'vue'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { fileServiceUrl, serviceFileRootPath } from '@/utils'
+
+const formRef = ref()
+const rules = reactive<FormRules>(ledgerRules)
+const ledgerStore = useLedgerStore()
+const appStore = useAppStore()
+
+onMounted(async () => {
+  appStore.isShowMobileBack = true
+})
+
+/**
+ * 点击确认按钮
+ */
+const confirmClick = () => {
+  formRef.value.validate().then(async () => {
+    await ledgerStore.handleLedgerApi(ledgerStore.currentLedgerRecord)
+    history.back()
+  })
+}
+
+const cancelClick = () => {
+  history.back()
+}
+
+const deleteClick = () => {
+  commonElMessageBox('是否确认删除该账本内容?').then(async () => {
+    ledgerStore.ledgerApiType = 'DELETE'
+    await ledgerStore.handleLedgerApi(ledgerStore.currentLedgerRecord)
+    history.back()
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.mobile-ledger-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .button-container {
+    align-self: center;
+  }
+}
+</style>