PC端和手机端端双端适配

src/views/erp/finance/bookkeeping/BookkeepingVoucherForm.vue

@@ -1,13 +1,52 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle" width="900px">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      :disabled="isDetail"
-      label-width="100px"
-    >
+  <!-- 移动端布局 -->
+  <el-drawer v-if="isMobile" v-model="dialogVisible" :title="dialogTitle" direction="rtl" size="100%" :close-on-press-escape="true" :destroy-on-close="true" :append-to-body="true" class="mobile-form-drawer">
+    <div class="mobile-form" v-loading="formLoading">
+      <el-form ref="formRef" :model="formData" :rules="formRules" :disabled="isDetail" label-position="top">
+        <div class="mobile-form__section">
+          <div class="mobile-form__section-title">基本信息</div>
+          <el-form-item label="凭证编号" prop="voucherNo"><el-input v-model="formData.voucherNo" disabled placeholder="系统自动生成" /></el-form-item>
+          <el-form-item v-if="!isDetail" label="制单日期" prop="voucherDate"><el-date-picker v-model="formData.voucherDate" type="date" placeholder="选择制单日期" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item>
+          <el-form-item label="系统名" prop="systemName"><el-input v-model="formData.systemName" placeholder="请输入系统名" /></el-form-item>
+          <el-form-item label="摘要" prop="summary"><el-input v-model="formData.summary" placeholder="请输入摘要" @input="syncSummaryToItems" /></el-form-item>
+          <el-form-item v-if="formType !== 'create'" label="审核状态" prop="status"><dict-tag :type="DICT_TYPE.ERP_AUDIT_STATUS" :value="formData.status" /></el-form-item>
+          <el-form-item label="备注" prop="remark"><el-input v-model="formData.remark" type="textarea" :rows="2" placeholder="请输入备注" /></el-form-item>
+        </div>
+        <div class="mobile-form__section">
+          <div class="mobile-form__section-title">凭证明细</div>
+          <div v-for="(item, index) in formData.items" :key="index" class="mobile-item-card">
+            <div class="mobile-item-card__header">
+              <span class="mobile-item-card__index">#{{ index + 1 }}</span>
+              <span class="mobile-item-card__name">{{ item.subjectName || '未选择科目' }}</span>
+              <el-button v-if="!isDetail" :disabled="isDetail" @click="removeItem(index)" link type="danger" size="small">删除</el-button>
+            </div>
+            <div class="mobile-item-card__body">
+              <el-form-item label="摘要"><el-input v-model="item.summary" placeholder="请输入摘要" :disabled="isDetail" /></el-form-item>
+              <el-form-item label="科目名称"><el-tree-select v-model="item.subjectId" :data="subjectTree" :props="{ label: 'name', value: 'id', children: 'children' }" placeholder="请选择科目名称" check-strictly filterable :disabled="isDetail" style="width:100%" @change="(val) => handleSubjectChange(item, val)" /></el-form-item>
+              <el-form-item label="借方金额"><el-input-number v-model="item.debitAmount" :precision="2" :min="0" :controls="false" placeholder="借方金额" :disabled="isDetail || (item.creditAmount > 0)" style="width:100%" @change="(val) => handleDebitChange(item, val)" /></el-form-item>
+              <el-form-item label="贷方金额"><el-input-number v-model="item.creditAmount" :precision="2" :min="0" :controls="false" placeholder="贷方金额" :disabled="isDetail || (item.debitAmount > 0)" style="width:100%" @change="(val) => handleCreditChange(item, val)" /></el-form-item>
+            </div>
+          </div>
+          <div class="mobile-item-add" v-if="!isDetail"><el-button @click="addItem" round>+ 添加明细</el-button></div>
+          <div class="mobile-item-summary">
+            <div class="mobile-item-summary__row"><span>借方合计</span><span class="text-red-500">{{ formatAmount(debitTotal) }}</span></div>
+            <div class="mobile-item-summary__row"><span>贷方合计</span><span class="text-blue-500">{{ formatAmount(creditTotal) }}</span></div>
+          </div>
+          <el-alert v-if="!isBalanced && formData.items.length > 0" title="借贷不平衡，请检查金额" type="warning" :closable="false" class="mt-10px" />
+        </div>
+      </el-form>
+    </div>
+    <template #footer>
+      <div class="mobile-form__footer">
+        <el-button @click="dialogVisible = false" style="flex:1">取 消</el-button>
+        <el-button v-if="!isDetail" type="primary" :disabled="formLoading" @click="submitForm" style="flex:2">确 定</el-button>
+      </div>
+    </template>
+  </el-drawer>
+
+  <!-- PC端布局 -->
+  <Dialog v-else v-model="dialogVisible" :title="dialogTitle" width="900px">
+    <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" :disabled="isDetail" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="8">
           <el-form-item label="凭证编号" prop="voucherNo">
@@ -146,13 +185,18 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, reactive, computed } from 'vue'
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import * as BookkeepingVoucherApi from '@/api/erp/finance/bookkeeping'
 import { SubjectApi } from '@/api/erp/finance/subject'
+import { useWindowSize } from '@vueuse/core'
 
 defineOptions({ name: 'BookkeepingVoucherForm' })
 
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗