af-mobile-client-vue3 1.4.16 → 1.4.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.4.16",
+  "version": "1.4.18",
   "packageManager": "pnpm@10.13.1",
   "description": "Vue + Vite component lib",
   "engines": {

package/src/components/common/otherCharge/ChargePrintSelectorAndRemarks.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import CardContainer from '@af-mobile-client-vue3/components/data/CardContainer/CardContainer.vue'
 import CardHeader from '@af-mobile-client-vue3/components/data/CardContainer/CardHeader.vue'
+import {
+  Field as VanField,
+  Picker as VanPicker,
+  Popup as VanPopup,
+} from 'vant'
 import { ref, watch } from 'vue'
 
 const props = defineProps<{
@@ -55,7 +60,7 @@ watch(() => props.remarks, (newValue) => {
       <div class="charge-print-options__section">
         <label class="charge-print-options__label">收据打印选项</label>
         <div class="charge-print-options__selector">
-          <van-field
+          <VanField
             v-model="selectedOption"
             is-link
             readonly
@@ -68,7 +73,7 @@ watch(() => props.remarks, (newValue) => {
       <div class="charge-print-options__section">
         <label class="charge-print-options__label">备注</label>
         <div class="charge-print-options__selector">
-          <van-field
+          <VanField
             v-model="remarks"
             type="textarea"
             placeholder="可选填写备注信息"
@@ -80,15 +85,15 @@ watch(() => props.remarks, (newValue) => {
         </div>
       </div>
 
-      <van-popup v-model:show="showPicker" position="bottom" round teleport="body">
-        <van-picker
+      <VanPopup v-model:show="showPicker" position="bottom" round teleport="body">
+        <VanPicker
           :columns="printOptions"
           show-toolbar
           title="选择打印方式"
           @confirm="onConfirm"
           @cancel="showPicker = false"
         />
-      </van-popup>
+      </VanPopup>
     </div>
   </CardContainer>
 </template>

package/src/components/common/otherCharge/CodePayment.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { post } from '@af-mobile-client-vue3/services/restTools'
 import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
-import { showDialog, showToast } from 'vant'
+import {
+  showDialog,
+  showToast,
+  Button as VanButton,
+  Icon as VanIcon,
+  Popup as VanPopup,
+} from 'vant'
 import { defineEmits, defineProps, onMounted, onUnmounted, ref } from 'vue'
 
 const props = defineProps({
@@ -221,7 +227,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <van-popup
+  <VanPopup
     v-model:show="showCode"
     :close-on-click-overlay="false"
     :style="{ width: '90%', maxWidth: '400px' }"
@@ -229,7 +235,7 @@ onUnmounted(() => {
     <div class="qrcode-payment">
       <div class="qrcode-payment__header">
         <div class="qrcode-payment__title">
-          <van-icon name="scan" size="24" color="#1989fa" />
+          <VanIcon name="scan" size="24" color="#1989fa" />
           <span>请扫描下方二维码进行付款</span>
         </div>
 
@@ -254,16 +260,16 @@ onUnmounted(() => {
       </div>
 
       <div class="qrcode-payment__footer">
-        <van-button
+        <VanButton
           type="default"
           block
           @click="cancelPayment"
         >
           取消支付
-        </van-button>
+        </VanButton>
       </div>
     </div>
-  </van-popup>
+  </VanPopup>
 </template>
 
 <style lang="less" scoped>

package/src/components/common/otherCharge/FileUploader.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import CardHeader from '@af-mobile-client-vue3/components/data/CardContainer/CardHeader.vue'
 import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
-import { showFailToast, showImagePreview } from 'vant'
+import {
+  showFailToast,
+  showImagePreview,
+} from 'vant'
 import { computed } from 'vue'
 
 export interface FileItem {

package/src/components/common/otherCharge/GridFileUploader.vue

@@ -3,7 +3,13 @@ import type { FileItem } from './FileUploader.vue'
 import CardContainer from '@af-mobile-client-vue3/components/data/CardContainer/CardContainer.vue'
 import CardHeader from '@af-mobile-client-vue3/components/data/CardContainer/CardHeader.vue'
 import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
-import { showFailToast, showToast } from 'vant'
+import {
+  showFailToast,
+  showToast,
+  Button as VanButton,
+  Icon as VanIcon,
+  ImagePreview as VanImagePreview,
+} from 'vant'
 import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
 
 export interface FileTypeConfig {
@@ -406,7 +412,7 @@ defineExpose({
         >
           必
         </div>
-        <van-icon
+        <VanIcon
           v-else-if="isRequirementMet(config)"
           name="success"
           class="grid-file-uploader__item-success"
@@ -416,7 +422,7 @@ defineExpose({
         <div class="grid-file-uploader__item-content" @click="showFloatingMenu(config.userType)">
           <!-- 图标 -->
           <div class="grid-file-uploader__item-icon">
-            <Icon
+            <VanIcon
               :icon="getIcon(config)"
               class="grid-file-uploader__icon"
             />
@@ -447,7 +453,7 @@ defineExpose({
           class="grid-file-uploader__floating-buttons"
           @click.stop
         >
-          <van-button
+          <VanButton
             v-if="getUploadedCount(config.userType) > 0"
             type="primary"
             size="small"
@@ -456,8 +462,8 @@ defineExpose({
             @click="viewFiles(config.userType)"
           >
             查看
-          </van-button>
-          <van-button
+          </VanButton>
+          <VanButton
             type="success"
             size="small"
             :icon="isDev ? 'photograph' : 'camera-o'"
@@ -465,13 +471,13 @@ defineExpose({
             @click="uploadFiles(config.userType)"
           >
             {{ isDev ? '上传' : '拍照' }}
-          </van-button>
+          </VanButton>
         </div>
       </div>
     </div>
 
     <!-- 图片预览组件 -->
-    <van-image-preview
+    <VanImagePreview
       v-model:show="showPreview"
       :images="previewImages"
       :start-position="previewIndex"
@@ -482,7 +488,7 @@ defineExpose({
         <div class="preview-footer" style="text-align: center;">
           <span class="preview-index">第{{ previewIndex + 1 }}页</span>
           <br>
-          <van-button
+          <VanButton
             type="danger"
             size="small"
             icon="delete-o"
@@ -490,10 +496,10 @@ defineExpose({
             @click="deleteCurrentPreviewImage"
           >
             删除
-          </van-button>
+          </VanButton>
         </div>
       </template>
-    </van-image-preview>
+    </VanImagePreview>
   </CardContainer>
 </template>
 

package/src/components/common/otherCharge/ReceiptModal.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { runLogic } from '@af-mobile-client-vue3/services/api/common'
 import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
+import {
+  Button as VanButton,
+  Popup as VanPopup,
+} from 'vant'
 import { defineEmits, onUnmounted, ref, watch } from 'vue'
 
 interface PrintItem {
@@ -136,7 +140,7 @@ defineExpose({ printParams, close })
 </script>
 
 <template>
-  <van-popup
+  <VanPopup
     :show="show"
 
     :close-on-click-overlay="false"
@@ -173,20 +177,20 @@ defineExpose({ printParams, close })
         </template>
       </div>
       <div class="receipt-modal-footer">
-        <van-button
+        <VanButton
           v-if="showSaveButton"
           class="save-button"
           type="primary"
           @click="ok"
         >
           {{ saveButtonText }}
-        </van-button>
-        <van-button class="close-button" @click="close">
+        </VanButton>
+        <VanButton class="close-button" @click="close">
           {{ closeButtonText }}
-        </van-button>
+        </VanButton>
       </div>
     </div>
-  </van-popup>
+  </VanPopup>
 </template>
 
 <style lang="less">

package/src/components/core/XSelect/index.vue

@@ -172,7 +172,7 @@ watch(() => props.columns, () => {
     :border="props.border"
     @click="showPopu($attrs.readonly)"
   />
-  <VanPopup v-model:show="show" position="bottom">
+  <VanPopup v-model:show="show" position="bottom" teleport="body">
     <div class="x-select-popup">
       <!-- 搜索框 -->
       <VanSearch

package/src/components/data/OtherCharge/OtherChargeForm.vue

@@ -4,7 +4,14 @@ import CardContainer from '@af-mobile-client-vue3/components/data/CardContainer/
 import CardHeader from '@af-mobile-client-vue3/components/data/CardContainer/CardHeader.vue'
 import { getConfigByNameAsync, runLogic } from '@af-mobile-client-vue3/services/api/common'
 import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
-import { showDialog, showFailToast, showToast } from 'vant'
+import {
+  showDialog,
+  showFailToast,
+  showToast,
+  Button as VanButton,
+  Field as VanField,
+  Icon as VanIcon,
+} from 'vant'
 import { computed, onMounted, reactive, ref } from 'vue'
 // import { otherCharge } from '@/services/api/business'
 import ChargePrintSelectorAndRemarks from '../../common/otherCharge/ChargePrintSelectorAndRemarks.vue'
@@ -315,7 +322,7 @@ async function processPayment(tradeNo = ''): Promise<any> {
     const newChargeItems = chargeItems.value.map((item) => {
       return {
         f_work_order_id: item.workOrderId || '',
-        f_work_order_code: item.workOrderCode || '',
+        f_service_id: item.workOrderCode || '',
         f_brand_spec: item.type,
         f_typename: item.item,
         f_typenumber: item.model,
@@ -326,6 +333,7 @@ async function processPayment(tradeNo = ''): Promise<any> {
     })
     const param = {
       f_workflow_id: props.user.f_workflow_id,
+      f_userinfo_id: props.user.f_userinfo_id,
       // f_serial_id: this.model.f_serial_id,
       // nopay_id: this.model.nopay_id,
       f_collection: totalAmount.value,
@@ -403,7 +411,7 @@ function onFileRemoved(): void {
   <div id="other-charge-form" class="other-charge-form">
     <!-- 信息提示 -->
     <div class="other-charge-form__info-box">
-      <van-icon name="info-o" class="other-charge-form__info-icon" />
+      <VanIcon name="info-o" class="other-charge-form__info-icon" />
       <div class="other-charge-form__info-content">
         <p class="other-charge-form__info-text">
           请填写收费信息，系统将自动计算应收金额。
@@ -419,7 +427,7 @@ function onFileRemoved(): void {
       <CardContainer class="other-charge-form__section-margin">
         <CardHeader title="费用项目">
           <template #extra>
-            <van-button
+            <VanButton
               type="primary"
               size="small"
               icon="plus"
@@ -427,7 +435,7 @@ function onFileRemoved(): void {
               @click="showAddItemModal = true"
             >
               添加费用项
-            </van-button>
+            </VanButton>
           </template>
         </CardHeader>
 
@@ -455,7 +463,7 @@ function onFileRemoved(): void {
         <div class="other-charge-form__field">
           <label class="other-charge-form__label">应收金额</label>
           <div class="other-charge-form__amount-input">
-            <van-field
+            <VanField
               v-model="totalAmount"
               readonly
               input-align="right"
@@ -466,14 +474,14 @@ function onFileRemoved(): void {
               <template #suffix>
                 <span class="other-charge-form__suffix">元</span>
               </template>
-            </van-field>
+            </VanField>
           </div>
         </div>
 
         <div class="other-charge-form__field">
           <label class="other-charge-form__label">收费项目数</label>
           <div class="other-charge-form__count-input">
-            <van-field
+            <VanField
               :model-value="chargeItems.length.toString()"
               readonly
               input-align="right"
@@ -481,7 +489,7 @@ function onFileRemoved(): void {
               <template #suffix>
                 <span class="other-charge-form__suffix">项</span>
               </template>
-            </van-field>
+            </VanField>
           </div>
         </div>
       </CardContainer>
@@ -541,22 +549,22 @@ function onFileRemoved(): void {
 
       <!-- 按钮区域 -->
       <div class="other-charge-form__buttons">
-        <van-button
+        <VanButton
           plain
           type="default"
           class="other-charge-form__cancel-btn"
           @click="cancelOperation"
         >
           取消
-        </van-button>
-        <van-button
+        </VanButton>
+        <VanButton
           type="primary"
           native-type="submit"
           class="other-charge-form__confirm-btn"
           :disabled="chargeItems.length === 0"
         >
           确认收费
-        </van-button>
+        </VanButton>
       </div>
     </form>
 

package/src/components/data/OtherCharge/OtherChargeItem.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Icon as VanIcon } from 'vant'
+
 interface ChargeItem {
   id: number
   workOrderCode?: string
@@ -32,7 +34,7 @@ function formatPrice(price: number): string {
       <h5 class="other-charge-item__title">
         费用项 #{{ index + 1 }}
       </h5>
-      <van-icon
+      <VanIcon
         name="cross"
         class="other-charge-item__delete"
         @click="$emit('remove', item.id)"
@@ -42,7 +44,7 @@ function formatPrice(price: number): string {
     <div class="other-charge-item__info">
       <div v-if="isWorkOrder" class="other-charge-item__field">
         <p class="other-charge-item__label">
-          工单
+          所属工单
         </p>
         <p class="other-charge-item__value">
           {{ item.workOrderCode }}

package/src/components/data/OtherCharge/OtherChargeItemModal.vue

@@ -1,4 +1,12 @@
 <script setup lang="ts">
+import {
+  Button as VanButton,
+  Field as VanField,
+  Icon as VanIcon,
+  Picker as VanPicker,
+  Popup as VanPopup,
+  Stepper as VanStepper,
+} from 'vant'
 import { computed, reactive, ref, watch } from 'vue'
 
 // 型号接口
@@ -61,8 +69,14 @@ const showModal = computed({
   set: value => emit('update:show', value),
 })
 
+// 工单选项
+const workOrderOptions = computed(() => {
+  return props.workOrderData || []
+})
+
 const formData = reactive<FormData>({
-  workOrderId: '',
+  workOrderCode: workOrderOptions.value.length === 1 ? workOrderOptions.value[0].text : '',
+  workOrderId: workOrderOptions.value.length === 1 ? workOrderOptions.value[0].value : '',
   type: '',
   item: '',
   model: '', // 新增型号字段
@@ -78,11 +92,9 @@ const workOrderError = ref(false)
 const typeError = ref(false)
 const itemError = ref(false)
 const priceError = ref(false)
+const isWorkOrder = computed(() => props.isWorkOrder)
 
 // 分类选项
-const workOrderOptions = computed(() => {
-  return props.workOrderData || []
-})
 const typeOptions = computed(() => {
   return props.chargeTypes.value.map(category => ({ text: category.name, value: category.name }))
 })
@@ -179,7 +191,7 @@ function handleSubmit() {
   // 验证表单
   let isValid = true
   // 验证工单
-  if (props.isWorkOrder && !formData.workOrderId) {
+  if (isWorkOrder.value && !formData.workOrderId) {
     workOrderError.value = true
     isValid = false
   }
@@ -227,8 +239,14 @@ function handleSubmit() {
 }
 
 function resetForm() {
-  formData.workOrderId = ''
-  formData.workOrderCode = ''
+  if (isWorkOrder.value && workOrderOptions.value.length === 1) {
+    formData.workOrderId = workOrderOptions.value[0].value || ''
+    formData.workOrderCode = workOrderOptions.value[0].text || ''
+  }
+  else {
+    formData.workOrderId = ''
+    formData.workOrderCode = ''
+  }
   formData.type = ''
   formData.item = ''
   formData.model = '' // 重置型号
@@ -257,7 +275,7 @@ watch(() => formData.unitPrice, () => { priceError.value = false })
 </script>
 
 <template>
-  <van-popup
+  <VanPopup
     v-model:show="showModal"
     round
     position="center"
@@ -270,13 +288,13 @@ watch(() => formData.unitPrice, () => { priceError.value = false })
         <h3 class="other-charge-item-modal__title">
           添加费用项
         </h3>
-        <van-icon name="cross" @click="closeModal" />
+        <VanIcon name="cross" @click="closeModal" />
       </div>
 
       <form class="other-charge-item-modal__form" @submit.prevent="handleSubmit">
-        <div v-if="props.isWorkOrder" class="other-charge-item-modal__field">
-          <label class="other-charge-item-modal__label">工单</label>
-          <van-field
+        <div v-if="isWorkOrder" class="other-charge-item-modal__field">
+          <label class="other-charge-item-modal__label">所属工单</label>
+          <VanField
             v-model="formData.workOrderCode"
             placeholder="请选择工单"
             readonly
@@ -288,7 +306,7 @@ watch(() => formData.unitPrice, () => { priceError.value = false })
 
         <div class="other-charge-item-modal__field">
           <label class="other-charge-item-modal__label">收费类型</label>
-          <van-field
+          <VanField
             v-model="formData.type"
             placeholder="请选择收费类型"
             readonly
@@ -300,7 +318,7 @@ watch(() => formData.unitPrice, () => { priceError.value = false })
 
         <div class="other-charge-item-modal__field">
           <label class="other-charge-item-modal__label">具体项目</label>
-          <van-field
+          <VanField
             v-model="formData.item"
             placeholder="请选择具体项目"
             readonly
@@ -314,7 +332,7 @@ watch(() => formData.unitPrice, () => { priceError.value = false })
         <!-- 新增型号选择字段 -->
         <div v-if="hasModelOptions" class="other-charge-item-modal__field">
           <label class="other-charge-item-modal__label">型号</label>
-          <van-field
+          <VanField
             v-model="formData.model"
             placeholder="请选择型号"
             readonly
@@ -328,7 +346,7 @@ watch(() => formData.unitPrice, () => { priceError.value = false })
           <div class="other-charge-item-modal__field">
             <label class="other-charge-item-modal__label">单价 (元)</label>
             <div class="other-charge-item-modal__price-input">
-              <van-field
+              <VanField
                 v-model="formData.unitPrice"
                 type="digit"
                 placeholder="0.00"
@@ -337,13 +355,13 @@ watch(() => formData.unitPrice, () => { priceError.value = false })
                 <template #prefix>
                   <span class="other-charge-item-modal__prefix">¥</span>
                 </template>
-              </van-field>
+              </VanField>
             </div>
           </div>
 
           <div class="other-charge-item-modal__field">
             <label class="other-charge-item-modal__label">数量</label>
-            <van-stepper
+            <VanStepper
               v-model="formData.quantity"
               min="1"
               step="1"
@@ -355,7 +373,7 @@ watch(() => formData.unitPrice, () => { priceError.value = false })
         </div>
 
         <div class="other-charge-item-modal__buttons">
-          <van-button
+          <VanButton
             plain
             type="default"
             size="normal"
@@ -363,87 +381,87 @@ watch(() => formData.unitPrice, () => { priceError.value = false })
             @click="closeModal"
           >
             取消
-          </van-button>
-          <van-button
+          </VanButton>
+          <VanButton
             type="primary"
             size="normal"
             native-type="submit"
             class="other-charge-item-modal__confirm-btn"
           >
             添加
-          </van-button>
+          </VanButton>
         </div>
       </form>
     </div>
 
     <!-- 工单 -->
-    <van-popup
+    <VanPopup
       v-model:show="showWorkOrderSelector"
       position="bottom"
 
       teleport="#other-charge-form"
       round destroy-on-close
     >
-      <van-picker
+      <VanPicker
         :columns="workOrderOptions"
         show-toolbar
         title="选择工单"
         @confirm="onWorkOrderSelected"
         @cancel="showWorkOrderSelector = false"
       />
-    </van-popup>
+    </VanPopup>
 
     <!-- 收费类型选择器 -->
-    <van-popup
+    <VanPopup
       v-model:show="showTypeSelector"
       position="bottom"
       destroy-on-close
       teleport="#other-charge-form"
       round
     >
-      <van-picker
+      <VanPicker
         :columns="typeOptions"
         show-toolbar
         title="选择收费类型"
         @confirm="onTypeSelected"
         @cancel="showTypeSelector = false"
       />
-    </van-popup>
+    </VanPopup>
 
     <!-- 具体项目选择器 -->
-    <van-popup
+    <VanPopup
       v-model:show="showItemSelector"
       destroy-on-close
       position="bottom"
       round
       teleport="#other-charge-form"
     >
-      <van-picker
+      <VanPicker
         :columns="itemOptions"
         show-toolbar
         title="选择具体项目"
         @confirm="onItemSelected"
         @cancel="showItemSelector = false"
       />
-    </van-popup>
+    </VanPopup>
 
     <!-- 型号选择器 -->
-    <van-popup
+    <VanPopup
       v-model:show="showModelSelector"
       destroy-on-close
       position="bottom"
       round
       teleport="#other-charge-form"
     >
-      <van-picker
+      <VanPicker
         :columns="modelOptions"
         show-toolbar
         title="选择型号"
         @confirm="onModelSelected"
         @cancel="showModelSelector = false"
       />
-    </van-popup>
-  </van-popup>
+    </VanPopup>
+  </VanPopup>
 </template>
 
 <style scoped lang="less">

package/src/router/routes.ts

@@ -10,6 +10,7 @@ import NotFound from '@af-mobile-client-vue3/views/common/NotFound.vue'
 import EvaluateRecordView from '@af-mobile-client-vue3/views/component/EvaluateRecordView/index.vue'
 import IconifyView from '@af-mobile-client-vue3/views/component/IconifyView/index.vue'
 import ComponentView from '@af-mobile-client-vue3/views/component/index.vue'
+import OtherChargeForm from '@af-mobile-client-vue3/views/component/OtherCharge/index.vue'
 import UserDetailView from '@af-mobile-client-vue3/views/component/UserDetailView/index.vue'
 import UserDetailPage from '@af-mobile-client-vue3/views/component/UserDetailView/UserDetailPage.vue'
 import XCellDetailView from '@af-mobile-client-vue3/views/component/XCellDetailView/index.vue'
@@ -159,6 +160,11 @@ const routes: Array<RouteRecordRaw> = [
         name: 'XFormView',
         component: XFormView,
       },
+      {
+        path: '/Component/OtherCharge',
+        name: 'OtherChargeForm',
+        component: OtherChargeForm,
+      },
       {
         path: '/Component/EvaluateRecordView',
         name: 'EvaluateRecordView',

package/src/views/component/OtherCharge/index.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import OtherChargeForm from '@af-mobile-client-vue3/components/data/OtherCharge/OtherChargeForm.vue'
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const loading = ref(false)
+
+const workOrderData = ref([])
+
+const userinfo = {
+  f_workflow_id: '1',
+  f_userinfo_id: '1',
+  f_userinfo_code: '1',
+  f_user_name: '1',
+  f_userfiles_id: '1',
+  f_orgid: '1',
+}
+function backList() {
+  router.back()
+}
+onMounted(() => {
+  console.log('userinfo', userinfo)
+  workOrderData.value = [{ text: '1', value: '1' }, { text: '2', value: '2' }]
+  loading.value = true
+})
+</script>
+
+<template>
+  <OtherChargeForm
+    v-if="loading"
+    :user="userinfo"
+    :is-work-order="true"
+    :work-order-data="workOrderData"
+    @close-operation="backList"
+  />
+</template>
+
+<style scoped lang="less">
+
+</style>

package/src/views/component/index.vue

@@ -77,6 +77,10 @@ const list = ref([
     name: 'UserDetail 用户详情组件',
     to: '/Component/UserDetailView',
   },
+  {
+    name: '其他收费测试',
+    to: '/Component/OtherCharge',
+  },
 ])
 
 function cleanConfigCache() {