PC端和手机端端双端适配

src/views/erp/finance/receipt/index.vue

@@ -1,27 +1,63 @@
 <template>
-  <doc-alert
-    title="【财务】采购付款、销售收款"
-    url="https://doc.iocoder.cn/sale/finance-payment-receipt/"
-  />
+  <!-- 移动端布局 -->
+  <div v-if="isMobile" class="mobile-receipt">
+    <div class="mobile-header">
+      <div class="mobile-header__search"><el-input v-model="queryParams.no" placeholder="搜索收款单号" clearable @keyup.enter="handleQuery" :prefix-icon="Search" /></div>
+      <div class="mobile-header__actions">
+        <el-button :icon="Filter" circle @click="filterVisible = true" />
+        <el-button type="primary" :icon="Plus" circle @click="openForm('create')" v-hasPermi="['erp:finance-receipt:create']" />
+      </div>
+    </div>
+    <div class="mobile-header__quick-filter">
+      <div class="quick-filter-item" :class="{ active: queryParams.status === undefined }" @click="handleQuickFilter(undefined)">全部</div>
+      <div class="quick-filter-item" :class="{ active: queryParams.status === 10 }" @click="handleQuickFilter(10)">待审核</div>
+      <div class="quick-filter-item" :class="{ active: queryParams.status === 20 }" @click="handleQuickFilter(20)">已审核</div>
+    </div>
+    <div class="mobile-list" v-loading="loading">
+      <div v-if="list.length === 0 && !loading" class="mobile-empty"><el-empty description="暂无收款记录" /></div>
+      <div v-for="item in list" :key="item.id" class="mobile-card" @click="handleRowClickMobile(item)">
+        <div class="mobile-card__header">
+          <span class="mobile-card__no">{{ item.no }}</span>
+          <dict-tag :type="DICT_TYPE.ERP_AUDIT_STATUS" :value="item.status" />
+        </div>
+        <div class="mobile-card__body">
+          <div class="mobile-card__row"><span class="mobile-card__label">客户</span><span class="mobile-card__value">{{ item.customerName || '-' }}</span></div>
+          <div class="mobile-card__row"><span class="mobile-card__label">收款时间</span><span class="mobile-card__value">{{ formatDate2(item.receiptTime) }}</span></div>
+          <div class="mobile-card__row"><span class="mobile-card__label">财务人员</span><span class="mobile-card__value">{{ item.financeUserName || '-' }}</span></div>
+          <div class="mobile-card__nums">
+            <div class="mobile-card__num-item"><div class="mobile-card__num-val">{{ erpPriceTableColumnFormatter(null,null,item.totalPrice,null) }}</div><div class="mobile-card__num-label">合计收款</div></div>
+            <div class="mobile-card__num-item"><div class="mobile-card__num-val mobile-card__num-val--price">{{ erpPriceTableColumnFormatter(null,null,item.receiptPrice,null) }}</div><div class="mobile-card__num-label">实际收款</div></div>
+          </div>
+        </div>
+        <div class="mobile-card__footer">
+          <el-button size="small" @click.stop="openForm('detail', item.id)" v-hasPermi="['erp:finance-receipt:query']">详情</el-button>
+          <el-button size="small" type="primary" @click.stop="openForm('update', item.id)" v-hasPermi="['erp:finance-receipt:update']" :disabled="item.status === 20">编辑</el-button>
+          <el-button size="small" type="primary" @click.stop="handleUpdateStatus(item.id, 20)" v-hasPermi="['erp:finance-receipt:update-status']" v-if="item.status === 10">审批</el-button>
+          <el-button size="small" type="danger" @click.stop="handleUpdateStatus(item.id, 10)" v-hasPermi="['erp:finance-receipt:update-status']" v-else>反审批</el-button>
+          <el-button size="small" type="danger" @click.stop="handleDelete([item.id])" v-hasPermi="['erp:finance-receipt:delete']">删除</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="mobile-pagination" v-if="total > 0"><Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" :page-sizes="[10, 20]" layout="total, prev, pager, next" :pager-count="5" @pagination="getList" /></div>
+    <el-drawer v-model="filterVisible" title="筛选条件" direction="btt" size="70%">
+      <el-form :model="queryParams" ref="queryFormRef" label-position="top">
+        <el-form-item label="客户" prop="customerId"><el-select v-model="queryParams.customerId" clearable filterable placeholder="请选择客户" style="width:100%"><el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item>
+        <el-form-item label="收款时间" prop="receiptTime"><el-date-picker v-model="queryParams.receiptTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange" start-placeholder="开始" end-placeholder="结束" :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" style="width:100%" /></el-form-item>
+        <el-form-item label="收款账户" prop="accountId"><el-select v-model="queryParams.accountId" clearable filterable placeholder="请选择收款账户" style="width:100%"><el-option v-for="item in accountList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item>
+        <el-form-item label="状态" prop="status"><el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width:100%"><el-option v-for="dict in getIntDictOptions(DICT_TYPE.ERP_AUDIT_STATUS)" :key="dict.value" :label="dict.label" :value="dict.value" /></el-select></el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="resetQuery">重置</el-button>
+        <el-button type="primary" @click="handleFilterConfirm">确认筛选</el-button>
+      </template>
+    </el-drawer>
+  </div>
 
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="收款单号" prop="no">
-        <el-input
-          v-model="queryParams.no"
-          placeholder="请输入收款单号"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
+  <!-- PC端布局 -->
+  <template v-else>
+    <ContentWrap>
+      <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+        <el-form-item label="收款单号" prop="no"><el-input v-model="queryParams.no" placeholder="请输入收款单号" clearable @keyup.enter="handleQuery" class="!w-240px" /></el-form-item>
       <el-form-item label="收款时间" prop="receiptTime">
         <el-date-picker
           v-model="queryParams.receiptTime"
@@ -252,22 +288,18 @@
         </template>
       </el-table-column>
     </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
+      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </ContentWrap>
+  </template>
 
   <!-- 表单弹窗：添加/修改 -->
   <FinanceReceiptForm ref="formRef" :fetch-invoice-page="fetchInvoicePage" @success="getList" />
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
-import { dateFormatter2 } from '@/utils/formatTime'
+import { dateFormatter2, formatDate2 } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { FinanceReceiptApi, FinanceReceiptVO } from '@/api/erp/finance/receipt'
 import FinanceReceiptForm from './FinanceReceiptForm.vue'
@@ -277,9 +309,14 @@ import * as UserApi from '@/api/system/user'
 import { erpPriceTableColumnFormatter } from '@/utils'
 import { CustomerApi, CustomerVO } from '@/api/erp/sale/customer'
 import { AccountApi, AccountVO } from '@/api/erp/finance/account'
+import { useWindowSize } from '@vueuse/core'
+import { Search, Plus, Filter } from '@element-plus/icons-vue'
 
 /** ERP 收款单列表 */
-defineOptions({ name: 'ErpPurchaseOrder' })
+defineOptions({ name: 'ErpFinanceReceipt' })
+
+const { width } = useWindowSize()
+const isMobile = computed(() => width.value < 768)
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
@@ -302,6 +339,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const filterVisible = ref(false) // 筛选抽屉
 const customerList = ref<CustomerVO[]>([]) // 客户列表
 const userList = ref<UserVO[]>([]) // 用户列表
 const accountList = ref<AccountVO[]>([]) // 账户列表
@@ -329,10 +367,29 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  queryFormRef.value?.resetFields()
   handleQuery()
 }
 
+/** 筛选确认 */
+const handleFilterConfirm = () => {
+  filterVisible.value = false
+  handleQuery()
+}
+
+/** 快捷筛选 */
+const handleQuickFilter = (status: number | undefined) => {
+  queryParams.status = status
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 移动端行点击 */
+const handleRowClickMobile = (row: FinanceReceiptVO) => {
+  if (row.status === 20) openForm('detail', row.id)
+  else if (row.status === 10) openForm('update', row.id)
+}
+
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
@@ -420,6 +477,30 @@ onMounted(async () => {
   userList.value = await UserApi.getSimpleUserList()
   accountList.value = await AccountApi.getAccountSimpleList()
 })
-// TODO 芋艿：可优化功能：列表界面，支持导入
-// TODO 芋艿：可优化功能：详情界面，支持打印
 </script>
+
+<style lang="scss" scoped>
+.mobile-receipt { padding: 12px; background: #f5f5f5; min-height: 100vh; }
+.mobile-header { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
+.mobile-header__search { flex: 1; }
+.mobile-header__actions { display: flex; gap: 4px; }
+.mobile-header__quick-filter { display: flex; gap: 12px; margin: 8px 0; }
+.quick-filter-item { padding: 4px 12px; font-size: 14px; border-radius: 20px; cursor: pointer; color: #909399; background: transparent; transition: all 0.2s; }
+.quick-filter-item.active { color: #fff; background: #409eff; }
+.mobile-list { display: flex; flex-direction: column; gap: 10px; }
+.mobile-empty { padding: 40px 0; }
+.mobile-card { background: #fff; border-radius: 10px; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
+.mobile-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+.mobile-card__no { font-weight: 600; font-size: 15px; color: #303133; }
+.mobile-card__body { font-size: 13px; }
+.mobile-card__row { display: flex; justify-content: space-between; padding: 3px 0; }
+.mobile-card__label { color: #909399; flex-shrink: 0; margin-right: 12px; }
+.mobile-card__value { color: #606266; text-align: right; }
+.mobile-card__nums { display: flex; justify-content: space-around; margin-top: 10px; padding: 10px 0; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
+.mobile-card__num-item { text-align: center; }
+.mobile-card__num-val { font-size: 15px; font-weight: 600; color: #303133; }
+.mobile-card__num-val--price { color: #67c23a; }
+.mobile-card__num-label { font-size: 11px; color: #909399; margin-top: 2px; }
+.mobile-card__footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+.mobile-pagination { margin-top: 12px; display: flex; justify-content: center; :deep(.el-pagination) { flex-wrap: wrap; justify-content: center; } }
+</style>