af-mobile-client-vue3 1.4.27 → 1.4.29

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Icon as VanIcon } from 'vant'
+import { Field as VanField, Icon as VanIcon } from 'vant'
+import { computed, ref, watch } from 'vue'
 
 interface ChargeItem {
   id: number
@@ -7,24 +8,101 @@ interface ChargeItem {
   workOrderId?: string
   type: string
   item: string
+  model?: string
   unitPrice: number
   quantity: number
   total: string
 }
 
-defineProps<{
+const props = defineProps<{
   item: ChargeItem
   index: number
   isWorkOrder?: boolean
   workOrderData?: any
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'remove', id: number): void
+  (e: 'update', item: ChargeItem): void
 }>()
 
-function formatPrice(price: number): string {
-  return price.toFixed(2)
+// 本地状态，用于双向绑定
+const localUnitPrice = ref(props.item.unitPrice.toString())
+const localQuantity = ref(props.item.quantity.toString())
+const item = computed(() => props.item)
+
+// 监听 props 变化，同步本地状态
+watch(() => props.item.unitPrice, (newVal) => {
+  localUnitPrice.value = newVal.toString()
+})
+
+watch(() => props.item.quantity, (newVal) => {
+  localQuantity.value = newVal.toString()
+})
+
+// 计算小计
+const total = computed(() => {
+  const price = Number.parseFloat(localUnitPrice.value) || 0
+  const qty = Number.parseInt(localQuantity.value) || 0
+  return (price * qty).toFixed(2)
+})
+
+// 处理单价变化 - 限制9位整数2位小数
+function handleUnitPriceChange(value: string) {
+  // 移除非数字和小数点的字符
+  let cleaned = value.replace(/[^\d.]/g, '')
+
+  // 限制小数点后最多2位
+  const parts = cleaned.split('.')
+  if (parts.length > 2) {
+    cleaned = `${parts[0]}.${parts.slice(1).join('')}`
+  }
+  if (parts[1] && parts[1].length > 2) {
+    cleaned = `${parts[0]}.${parts[1].slice(0, 2)}`
+  }
+
+  // 限制整数部分最多9位
+  if (parts[0] && parts[0].length > 9) {
+    cleaned = parts[0].slice(0, 9) + (parts[1] ? `.${parts[1]}` : '')
+  }
+
+  // 更新值
+  localUnitPrice.value = cleaned
+  updateItem()
+}
+
+// 处理数量变化 - 限制5位整数
+function handleQuantityChange(value: string) {
+  // 只允许数字，限制最多5位
+  let cleaned = value.replace(/\D/g, '')
+  if (cleaned.length > 5) {
+    cleaned = cleaned.slice(0, 5)
+  }
+
+  // 更新值
+  localQuantity.value = cleaned
+  updateItem()
+}
+
+// 更新费用项
+function updateItem() {
+  const price = Number.parseFloat(localUnitPrice.value) || 0
+  const qty = Number.parseInt(localQuantity.value) || 0
+
+  // 只有当价格和数量都大于0时才更新
+  if (price > 0 && qty > 0) {
+    const updatedItem: ChargeItem = {
+      ...props.item,
+      unitPrice: price,
+      quantity: qty,
+      total: total.value,
+    }
+    emit('update', updatedItem)
+  }
+  else if (localUnitPrice.value === '' || localQuantity.value === '') {
+    // 如果输入为空，不更新，保持原值
+
+  }
 }
 </script>
 
@@ -50,6 +128,14 @@ function formatPrice(price: number): string {
           {{ item.workOrderCode }}
         </p>
       </div>
+      <div class="other-charge-item__field">
+        <p class="other-charge-item__label">
+          小计
+        </p>
+        <p class="other-charge-item__value--info">
+          ￥{{ total }}
+        </p>
+      </div>
       <div class="other-charge-item__field">
         <p class="other-charge-item__label">
           收费类型
@@ -73,25 +159,27 @@ function formatPrice(price: number): string {
         <p class="other-charge-item__label">
           单价
         </p>
-        <p class="other-charge-item__value">
-          ¥{{ formatPrice(item.unitPrice) }}
-        </p>
+        <VanField
+          :model-value="localUnitPrice"
+          type="number"
+          placeholder="限制9位整数2位小数"
+          @update:model-value="handleUnitPriceChange"
+        >
+          <template #prefix>
+            <span class="other-charge-item__prefix">¥</span>
+          </template>
+        </VanField>
       </div>
       <div class="other-charge-item__field">
         <p class="other-charge-item__label">
           数量
         </p>
-        <p class="other-charge-item__value">
-          {{ item.quantity }}
-        </p>
-      </div>
-      <div class="other-charge-item__field">
-        <p class="other-charge-item__label">
-          小计
-        </p>
-        <p class="other-charge-item__value--highlight">
-          ¥{{ item.total }}
-        </p>
+        <VanField
+          :model-value="localQuantity"
+          type="number"
+          placeholder="限制5位整数"
+          @update:model-value="handleQuantityChange"
+        />
       </div>
     </div>
   </div>
@@ -108,8 +196,9 @@ function formatPrice(price: number): string {
   &__header {
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
     margin-bottom: 8px;
+    gap: 8px;
   }
 
   &__title {
@@ -117,17 +206,40 @@ function formatPrice(price: number): string {
     font-weight: 500;
     color: #374151;
     margin: 0;
+    flex-shrink: 0;
+  }
+  &__value--info {
+    font-size: 14px;
+    font-weight: 500;
+    color: #2563eb;
   }
-
   &__delete {
     color: #ef4444;
     font-size: 16px;
+    flex-shrink: 0;
+    cursor: pointer;
 
     &:active {
       color: #b91c1c;
     }
   }
 
+  :deep(.van-field) {
+    background-color: #ffffff;
+    border-radius: 4px;
+    padding: 8px 12px;
+  }
+
+  :deep(.van-field__control) {
+    background-color: #ffffff;
+    color: #1f2937;
+    font-size: 14px;
+  }
+
+  :deep(.van-field__label) {
+    display: none;
+  }
+
   &__info {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -137,18 +249,14 @@ function formatPrice(price: number): string {
 
   &__details {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
     gap: 12px;
   }
 
-  &__field {
-    margin-bottom: 0;
-  }
-
   &__label {
     font-size: 12px;
     color: #6b7280;
-    margin: 0 0 2px 0;
+    margin: 0 0 4px 0;
   }
 
   &__value {
@@ -156,13 +264,12 @@ function formatPrice(price: number): string {
     font-weight: 500;
     color: #1f2937;
     margin: 0;
+  }
 
-    &--highlight {
-      font-size: 14px;
-      font-weight: 500;
-      color: #2563eb;
-      margin: 0;
-    }
+  &__prefix {
+    color: #6b7280;
+    font-size: 14px;
+    margin-right: 4px;
   }
 }
 </style>

package/src/components/data/XOlMap/types.ts

@@ -188,4 +188,4 @@ export interface PolygonLayerConfig {
   onClick?: (polygon: PolygonData, event: any) => void
   /** 多边形数据提供者 */
   dataProvider?: () => PolygonData[] | Promise<PolygonData[]>
-}
+}

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

@@ -13,83 +13,7 @@ const router = useRouter()
 
 // 简易crud表单测试
 const configName = ref('ceshiCRUD')
-const serviceName = ref('af-safecheck')
-
-// 资源权限测试
-// const configName = ref('crud_sources_test')
-// const serviceName = ref('af-system')
-
-// 实际业务测试
-// const configName = ref('lngChargeAuditMobileCRUD')
-// const serviceName = ref('af-gaslink')
-
-// 跳转到详情页面
-// function toDetail(item) {
-//   router.push({
-//     name: 'XCellDetailView',
-//     params: { id: item[idKey.value] }, // 如果使用命名路由，推荐使用路由参数而不是直接构建 URL
-//     query: {
-//       operName: item[operNameKey.value],
-//       method:item[methodKey.value],
-//       requestMethod:item[requestMethodKey.value],
-//       operatorType:item[operatorTypeKey.value],
-//       operUrl:item[operUrlKey.value],
-//       operIp:item[operIpKey.value],
-//       costTime:item[costTimeKey.value],
-//       operTime:item[operTimeKey.value],
-//
-//       title: item[titleKey.value],
-//       businessType: item[businessTypeKey.value],
-//       status:item[statusKey.value]
-//     }
-//   })
-// }
-
-// 跳转到表单——以表单组来渲染纯表单
-// function toDetail(item) {
-//   router.push({
-//     name: 'XFormGroupView',
-//     query: {
-//       id: item[idKey.value],
-//       // id: item.rr_id,
-//       // o_id: item.o_id,
-//     },
-//   })
-// }
-
-// 新增功能
-// function addOption(totalCount) {
-//   router.push({
-//     name: 'XFormView',
-//     params: { id: totalCount, openid: totalCount },
-//     query: {
-//       configName: configName.value,
-//       serviceName: serviceName.value,
-//       mode: '新增',
-//     },
-//   })
-// }
-
-// 修改功能
-// function updateRow(result) {
-//   router.push({
-//     name: 'XFormView',
-//     params: { id: result.o_id, openid: result.o_id },
-//     query: {
-//       configName: configName.value,
-//       serviceName: serviceName.value,
-//       mode: '修改',
-//     },
-//   })
-// }
-
-// 删除功能
-// function deleteRow(result) {
-//   emit('deleteRow', result.o_id)
-// }
-// const fixQueryForm = ref({
-//   f_operator_id: '487184754014158848',
-// })
+const serviceName = ref('af-linepatrol')
 </script>
 
 <template>
@@ -97,7 +21,6 @@ const serviceName = ref('af-safecheck')
     <template #layout_content>
       <XCellList
         :config-name="configName"
-        :service-name="serviceName"
       />
     </template>
   </NormalDataLayout>

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

@@ -28,7 +28,6 @@ function onSubmit(data: any) {
         ref="formGroupAddConstruction"
         mode="修改"
         :config-name="configName"
-        :service-name="serviceName"
         :form-data="formData"
         @on-submit="onSubmit"
       />

package/src/views/component/XOlMapView/XLocationPicker/index.vue

@@ -1,118 +1,118 @@
-<script setup lang="ts">
-import type { LocationResult } from '@af-mobile-client-vue3/components/data/XOlMap/types'
-import LocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/index.vue'
-import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
-import { showNotify } from 'vant'
-import { ref } from 'vue'
-
-const selectedLocation = ref<LocationResult>()
-
-// 处理位置选择
-function handleLocationConfirm(location: LocationResult) {
-  // console.log('选择的位置:', location)
-  // selectedLocation.value = location
-  showNotify({ type: 'success', message: '位置已选择' })
-}
-</script>
-
-<template>
-  <NormalDataLayout id="XLocationPicker" title="XOlMap地址选择器">
-    <template #layout_content>
-      <div class="location-picker-demo">
-        <!-- 页面标题 -->
-        <div class="page-header">
-          <div class="title">
-            位置选择
-          </div>
-        </div>
-
-        <!-- 选择结果展示 -->
-        <div v-if="selectedLocation" class="location-result">
-          <div class="label">
-            已选位置:
-          </div>
-          <div class="value">
-            {{ selectedLocation.address }}
-          </div>
-          <div class="coordinates">
-            经度: {{ selectedLocation.longitude.toFixed(6) }},
-            纬度: {{ selectedLocation.latitude.toFixed(6) }}
-          </div>
-        </div>
-
-        <!-- 地图组件 -->
-        <div class="map-container">
-          <LocationPicker
-            v-model="selectedLocation"
-            :default-center="[108.948024, 34.263161]"
-            :default-zoom="12"
-            @confirm="handleLocationConfirm"
-          />
-        </div>
-      </div>
-    </template>
-  </NormalDataLayout>
-</template>
-
-<style scoped lang="less">
-.location-picker-demo {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: #f7f8fa;
-}
-
-.page-header {
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: white;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-  position: relative;
-  z-index: 1;
-
-  .title {
-    font-size: 16px;
-    color: #333;
-    font-weight: 500;
-  }
-}
-
-.location-result {
-  background: white;
-  padding: 12px 16px;
-  margin: 10px;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-
-  .label {
-    font-size: 14px;
-    color: #666;
-    margin-bottom: 4px;
-  }
-
-  .value {
-    font-size: 16px;
-    color: #333;
-    margin-bottom: 8px;
-    word-break: break-all;
-  }
-
-  .coordinates {
-    font-size: 12px;
-    color: #999;
-  }
-}
-
-.map-container {
-  flex: 1;
-  position: relative;
-  margin: 0 10px 10px 10px;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-</style>
+<script setup lang="ts">
+import type { LocationResult } from '@af-mobile-client-vue3/components/data/XOlMap/types'
+import LocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/index.vue'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { showNotify } from 'vant'
+import { ref } from 'vue'
+
+const selectedLocation = ref<LocationResult>()
+
+// 处理位置选择
+function handleLocationConfirm(location: LocationResult) {
+  // console.log('选择的位置:', location)
+  // selectedLocation.value = location
+  showNotify({ type: 'success', message: '位置已选择' })
+}
+</script>
+
+<template>
+  <NormalDataLayout id="XLocationPicker" title="XOlMap地址选择器">
+    <template #layout_content>
+      <div class="location-picker-demo">
+        <!-- 页面标题 -->
+        <div class="page-header">
+          <div class="title">
+            位置选择
+          </div>
+        </div>
+
+        <!-- 选择结果展示 -->
+        <div v-if="selectedLocation" class="location-result">
+          <div class="label">
+            已选位置:
+          </div>
+          <div class="value">
+            {{ selectedLocation.address }}
+          </div>
+          <div class="coordinates">
+            经度: {{ selectedLocation.longitude.toFixed(6) }},
+            纬度: {{ selectedLocation.latitude.toFixed(6) }}
+          </div>
+        </div>
+
+        <!-- 地图组件 -->
+        <div class="map-container">
+          <LocationPicker
+            v-model="selectedLocation"
+            :default-center="[108.948024, 34.263161]"
+            :default-zoom="12"
+            @confirm="handleLocationConfirm"
+          />
+        </div>
+      </div>
+    </template>
+  </NormalDataLayout>
+</template>
+
+<style scoped lang="less">
+.location-picker-demo {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: #f7f8fa;
+}
+
+.page-header {
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 1;
+
+  .title {
+    font-size: 16px;
+    color: #333;
+    font-weight: 500;
+  }
+}
+
+.location-result {
+  background: white;
+  padding: 12px 16px;
+  margin: 10px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+  .label {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 4px;
+  }
+
+  .value {
+    font-size: 16px;
+    color: #333;
+    margin-bottom: 8px;
+    word-break: break-all;
+  }
+
+  .coordinates {
+    font-size: 12px;
+    color: #999;
+  }
+}
+
+.map-container {
+  flex: 1;
+  position: relative;
+  margin: 0 10px 10px 10px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+</style>