feat:更新账单记录组件

src/components/NumberInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="keyboard">
     <div class="display">
-      {{ model || '0' }}
+      {{ amount || '0' }}
     </div>
 
     <div class="keys">
@@ -19,22 +19,20 @@
 <script setup lang="ts">
 import { defineModel } from 'vue'
 
-const model = defineModel<string>({
-  default: ''
-})
+const amount = defineModel('amount', { type: String, default: '0' })
 
 const keys = [1, 2, 3, 4, 5, 6, 7, 8, 9, '.', 0] as const
 
 const press = (key: number | '.') => {
-  const pressValue = model.value
+  const pressValue = amount.value
 
   // 小数点
   if (key === '.') {
     if (pressValue.includes('.')) return
     if (pressValue === '') {
-      model.value = '0.'
+      amount.value = '0.'
     } else {
-      model.value += '.'
+      amount.value += '.'
     }
     return
   }
@@ -48,20 +46,20 @@ const press = (key: number | '.') => {
   }
 
   if (next.length > 1 && next.startsWith('0') && !next.startsWith('0.')) {
-    model.value = next.slice(1)
+    amount.value = next.slice(1)
   } else {
-    model.value = next
+    amount.value = next
   }
 }
 
 const removeLast = () => {
-  model.value = model.value.slice(0, -1)
+  amount.value = amount.value.slice(0, -1)
 }
 </script>
 
 <style lang="scss" scoped>
 .keyboard {
-  min-height: 320px;
+  min-height: 280px;
   width: 100%;
   background: #f7f8fa;
   border-radius: 16px;
@@ -74,8 +72,8 @@ const removeLast = () => {
   justify-content: space-between;
 
   .display {
-    height: 48px;
-    line-height: 48px;
+    height: 40px;
+    line-height: 40px;
     padding: 0 14px;
     margin-bottom: 12px;
     border-radius: 12px;
@@ -93,7 +91,7 @@ const removeLast = () => {
 
     .key {
       margin-left: 0;
-      height: 48px;
+      height: 40px;
       font-size: 20px;
       border-radius: 12px;
       border: none;

src/views/bill/data.vue

@@ -15,7 +15,6 @@ import BillDailyList from '@/components/Bill/BillDailyList.vue'
 import { onMounted } from 'vue'
 import { useBillStore } from '@/store/bill.ts'
 import { useRouter } from 'vue-router'
-import { getCurrentMonth, getCurrentYear } from 'vue3-common/utils/dateUtil'
 
 const billStore = useBillStore()
 const router = useRouter()
@@ -23,21 +22,12 @@ const router = useRouter()
 onMounted(async () => {
   await billStore.initBillInfo()
 
-  billStore.billQueryForm = {
-    billBook: 'all',
-    billYear: getCurrentYear(),
-    billMonth: getCurrentMonth()
-  }
-
   billStore.billSearchForm = {
     category: '',
     content: '',
     location: ''
   }
 
-  billStore.billType = 'expensive'
-  billStore.billDateType = 'month'
-
   await billStore.refreshInfo()
 })
 

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

@@ -3,7 +3,7 @@
     <el-form ref="formRef" :model="billStore.currentBillRecord"
              :rules="rules" label-position="top" label-width="80px"
              class="form-item bill-form">
-      <div style="display: flex;gap: 5px;">
+      <div class="item-list">
         <el-select v-model="billStore.currentBillRecord.bookName"
                    @change="changeBillBookNameEvent" style="width: 100px">
           <el-option
@@ -29,11 +29,7 @@
         </el-select>
       </div>
 
-<!--      <el-form-item label="账单分类" prop="category">-->
-<!--        -->
-<!--      </el-form-item>-->
-
-      <el-radio-group v-model="billStore.currentBillRecord.category">
+      <el-radio-group v-model="billStore.currentBillRecord.category" class="bill-category-group">
         <el-radio v-for="(item, index) in billInfo.billCategoryList"
                   :value="item.name" :key="index">
           <template #default>
@@ -45,30 +41,7 @@
 
       <div class="bill-gap"></div>
 
-<!--      <el-form-item label="账本类型" prop="bookName">-->
-<!--        <el-radio-group v-model="billStore.currentBillRecord.bookName"-->
-<!--                        @change="changeBillBookNameEvent">-->
-<!--          <el-radio v-for="(item, index) in billStore.billBookList"-->
-<!--                    :value="item.name" :key="index">-->
-<!--            <template #default>-->
-<!--              <i :class="item.icon" :style="{color: item.color}"/>-->
-<!--              <span style="margin-left: 5px;">{{ item.name }}</span>-->
-<!--            </template>-->
-<!--          </el-radio>-->
-<!--        </el-radio-group>-->
-<!--      </el-form-item>-->
-
-<!--      <el-form-item label="账单类别" prop="type">-->
-<!--        <el-radio-group v-model="billStore.currentBillRecord.type"-->
-<!--                        @change="changeBillCategoryEvent">-->
-<!--          <el-radio v-for="(item, index) in billInfo.billTypeList"-->
-<!--                    :value="item" :key="index">-->
-<!--            {{ getBillTypeName(item) }}-->
-<!--          </el-radio>-->
-<!--        </el-radio-group>-->
-<!--      </el-form-item>-->
-
-      <div style="display: flex;gap: 5px;">
+      <div class="item-list">
         <el-date-picker
             v-model="billStore.currentBillRecord.date"
             type="date" :editable="false" placeholder="请选择账单时间"
@@ -83,45 +56,6 @@
         </el-input>
       </div>
 
-<!--      <el-form-item label="账单时间" prop="date">-->
-<!--        <el-date-picker-->
-<!--            v-model="billStore.currentBillRecord.date"-->
-<!--            type="date" :editable="false" placeholder="请选择账单时间"-->
-<!--            value-format="YYYY-MM-DD"/>-->
-<!--      </el-form-item>-->
-
-<!--      <el-form-item label="账单地点" prop="location">-->
-<!--        <el-input v-model="billStore.currentBillRecord.location" autocomplete="off"-->
-<!--                  placeholder="请输入账单地点"  clearable-->
-<!--                  show-word-limit maxlength="10">-->
-<!--          <template #prefix>-->
-<!--            <el-icon class="el-input__icon"><location/></el-icon>-->
-<!--          </template>-->
-<!--        </el-input>-->
-<!--      </el-form-item>-->
-
-<!--      <el-form-item label="账单账户" prop="payAccount">-->
-<!--        <el-radio-group v-model="billStore.currentBillRecord.payAccount">-->
-<!--          <el-radio v-for="(item, index) in billStore.billPayList"-->
-<!--                    :value="item.name" :key="index">-->
-<!--            <template #default>-->
-<!--              <i :class="item.icon" :style="{color: item.color}"/>-->
-<!--              <span style="margin-left: 5px;">{{ item.name }}</span>-->
-<!--            </template>-->
-<!--          </el-radio>-->
-<!--        </el-radio-group>-->
-<!--      </el-form-item>-->
-
-<!--      <el-form-item label="账单内容" prop="content">-->
-<!--        <el-input v-model="billStore.currentBillRecord.content" autocomplete="off"-->
-<!--                  placeholder="请输入账单内容"  clearable-->
-<!--                  show-word-limit maxlength="10">-->
-<!--          <template #prefix>-->
-<!--            <el-icon class="el-input__icon"><document/></el-icon>-->
-<!--          </template>-->
-<!--        </el-input>-->
-<!--      </el-form-item>-->
-
       <el-input v-model="billStore.currentBillRecord.content" autocomplete="off"
                 placeholder="请输入账单内容"  clearable
                 show-word-limit maxlength="10">
@@ -135,14 +69,7 @@
                 :rows="3" show-word-limit maxlength="50">
       </el-input>
 
-<!--      <el-form-item label="账单备注">-->
-<!--        <el-input v-model="billStore.currentBillRecord.remark" type="textarea"-->
-<!--                  placeholder="请输入账单备注" clearable-->
-<!--                  :rows="5" show-word-limit maxlength="200">-->
-<!--        </el-input>-->
-<!--      </el-form-item>-->
-
-      <number-input :model-value="amountStr" class="amount-input" />
+      <number-input v-model:amount="billInfo.amountStr" class="amount-input" />
     </el-form>
 
     <div class="form-button">
@@ -155,13 +82,12 @@
 </template>
 
 <script lang="ts" setup>
-import { AmountInput } from 'vue3-common'
 import { useBillStore } from '@/store/bill.ts'
 import { useAppStore } from '@/store/app.ts'
 import { Location, Document } from '@element-plus/icons-vue'
-import { FormRules, UploadUserFile } from 'element-plus'
+import { ElMessage, FormRules, UploadUserFile } from 'element-plus'
 import { billRecordRules } from '@/utils/element/elRules.ts'
-import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { nextTick, onMounted, reactive, ref } from 'vue'
 import { IBillCategory } from '@/types/bill.ts'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import NumberInput from '@/components/NumberInput.vue'
@@ -174,7 +100,8 @@ const imageFileList = ref<UploadUserFile[]>([])
 
 const billInfo = reactive({
   billTypeList: [] as string[],
-  billCategoryList: [] as IBillCategory[]
+  billCategoryList: [] as IBillCategory[],
+  amountStr: ''
 })
 
 onMounted(async () => {
@@ -182,6 +109,8 @@ onMounted(async () => {
 
   await initBillRecord()
   initImageFileList()
+
+  billInfo.amountStr = billStore.currentBillRecord.amount.toString()
 })
 
 const initBillRecord = async () => {
@@ -218,8 +147,6 @@ const initImageFileList = () => {
   })
 }
 
-const amountStr = computed<string>(() => billStore.currentBillRecord.amount.toString())
-
 /**
  * 获取账单类型名称
  * @param type 账单类型
@@ -274,11 +201,16 @@ const getBillCategory = () => {
  * 点击确认按钮
  */
 const confirmClick = () => {
-  formRef.value.validate().then(async () => {
-    await billStore.handleBillApi(billStore.currentBillRecord)
-    history.back()
-    appStore.isShowMobileBack = false
-  })
+  if (billStore.currentBillRecord.content.trim()) {
+    formRef.value.validate().then(async () => {
+      billStore.currentBillRecord.amount = Number(billInfo.amountStr)
+      await billStore.handleBillApi(billStore.currentBillRecord)
+      history.back()
+      appStore.isShowMobileBack = false
+    })
+  } else {
+    ElMessage.error('请输入账单内容')
+  }
 }
 
 const cancelClick = () => {
@@ -305,6 +237,18 @@ const deleteClick = () => {
     flex-direction: column;
     gap: 10px;
 
+    .item-list {
+      display: flex;
+      justify-content: space-between;
+      gap: 5px;
+    }
+
+    .bill-category-group {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      column-gap: 10px;
+    }
+
     .bill-gap {
       flex-grow: 1;
     }

vite.config.ts

@@ -4,8 +4,8 @@ import path from 'path'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import { viteMockServe } from 'vite-plugin-mock'
 
-const API_HOST = '192.168.1.7'
-// const API_HOST = '127.0.0.1'
+// const API_HOST = '192.168.1.7'
+const API_HOST = '127.0.0.1'
 
 // https://vitejs.dev/config/
 export default defineConfig({