af-mobile-client-vue3 1.4.14 → 1.4.16

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

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+interface ChargeItem {
+  id: number
+  workOrderCode?: string
+  workOrderId?: string
+  type: string
+  item: string
+  unitPrice: number
+  quantity: number
+  total: string
+}
+
+defineProps<{
+  item: ChargeItem
+  index: number
+  isWorkOrder?: boolean
+  workOrderData?: any
+}>()
+
+defineEmits<{
+  (e: 'remove', id: number): void
+}>()
+
+function formatPrice(price: number): string {
+  return price.toFixed(2)
+}
+</script>
+
+<template>
+  <div class="other-charge-item">
+    <div class="other-charge-item__header">
+      <h5 class="other-charge-item__title">
+        费用项 #{{ index + 1 }}
+      </h5>
+      <van-icon
+        name="cross"
+        class="other-charge-item__delete"
+        @click="$emit('remove', item.id)"
+      />
+    </div>
+
+    <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 }}
+        </p>
+      </div>
+      <div class="other-charge-item__field">
+        <p class="other-charge-item__label">
+          收费类型
+        </p>
+        <p class="other-charge-item__value">
+          {{ item.type }}
+        </p>
+      </div>
+      <div class="other-charge-item__field">
+        <p class="other-charge-item__label">
+          具体项目
+        </p>
+        <p class="other-charge-item__value">
+          {{ item.item }}
+        </p>
+      </div>
+    </div>
+
+    <div class="other-charge-item__details">
+      <div class="other-charge-item__field">
+        <p class="other-charge-item__label">
+          单价
+        </p>
+        <p class="other-charge-item__value">
+          ¥{{ formatPrice(item.unitPrice) }}
+        </p>
+      </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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.other-charge-item {
+  background-color: #f9fafb;
+  padding: 12px;
+  border-radius: 6px;
+  border: 1px solid #e5e7eb;
+  margin-bottom: 12px;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 8px;
+  }
+
+  &__title {
+    font-size: 12px;
+    font-weight: 500;
+    color: #374151;
+    margin: 0;
+  }
+
+  &__delete {
+    color: #ef4444;
+    font-size: 16px;
+
+    &:active {
+      color: #b91c1c;
+    }
+  }
+
+  &__info {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    margin-bottom: 8px;
+  }
+
+  &__details {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 12px;
+  }
+
+  &__field {
+    margin-bottom: 0;
+  }
+
+  &__label {
+    font-size: 12px;
+    color: #6b7280;
+    margin: 0 0 2px 0;
+  }
+
+  &__value {
+    font-size: 14px;
+    font-weight: 500;
+    color: #1f2937;
+    margin: 0;
+
+    &--highlight {
+      font-size: 14px;
+      font-weight: 500;
+      color: #2563eb;
+      margin: 0;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,529 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue'
+
+// 型号接口
+interface ModelItem {
+  name: string
+  price?: number
+}
+
+// 物品接口
+interface ItemType {
+  name: string
+  children?: ModelItem[]
+}
+
+// 分类接口
+interface CategoryItem {
+  name: string
+  children: ItemType[]
+}
+
+// 配置接口
+interface ChargeTypeConfig {
+  value: CategoryItem[]
+}
+
+interface FormData {
+  workOrderCode?: string
+  workOrderId?: string
+  type: string
+  item: string
+  model: string // 新增型号字段
+  unitPrice: string
+  quantity: number
+}
+
+const props = defineProps<{
+  isWorkOrder?: boolean
+  workOrderData?: any
+  show: boolean
+  chargeTypes: ChargeTypeConfig
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:show', value: boolean): void
+  (e: 'add', item: {
+    workOrderCode?: string
+    workOrderId?: string
+    id: number
+    type: string
+    item: string
+    model: string // 新增型号字段
+    unitPrice: number
+    quantity: number
+    total: string
+  }): void
+}>()
+
+const showModal = computed({
+  get: () => props.show,
+  set: value => emit('update:show', value),
+})
+
+const formData = reactive<FormData>({
+  workOrderId: '',
+  type: '',
+  item: '',
+  model: '', // 新增型号字段
+  unitPrice: '',
+  quantity: 1,
+})
+
+const showWorkOrderSelector = ref(false)
+const showTypeSelector = ref(false)
+const showItemSelector = ref(false)
+const showModelSelector = ref(false) // 新增型号选择器状态
+const workOrderError = ref(false)
+const typeError = ref(false)
+const itemError = ref(false)
+const priceError = ref(false)
+
+// 分类选项
+const workOrderOptions = computed(() => {
+  return props.workOrderData || []
+})
+const typeOptions = computed(() => {
+  return props.chargeTypes.value.map(category => ({ text: category.name, value: category.name }))
+})
+
+// 物品选项
+const itemOptions = computed(() => {
+  if (!formData.type)
+    return []
+
+  const category = props.chargeTypes.value.find(c => c.name === formData.type)
+  if (!category)
+    return []
+
+  return category.children.map(item => ({ text: item.name, value: item.name }))
+})
+
+// 型号选项
+const modelOptions = computed(() => {
+  if (!formData.type || !formData.item)
+    return []
+
+  const category = props.chargeTypes.value.find(c => c.name === formData.type)
+  if (!category)
+    return []
+
+  const item = category.children.find(i => i.name === formData.item)
+  if (!item || !item.children)
+    return []
+
+  return item.children.map(model => ({ text: model.name, value: model.name }))
+})
+
+// 是否有型号选项
+const hasModelOptions = computed(() => {
+  if (!formData.type || !formData.item)
+    return false
+
+  const category = props.chargeTypes.value.find(c => c.name === formData.type)
+  if (!category)
+    return false
+  console.log('category', category)
+  const item = category.children.find(i => i.name === formData.item)
+  console.log('item', item)
+  return !!(item && item.children && item.children.length > 0)
+})
+
+// 选择处理函数
+function onWorkOrderSelected({ selectedValues, selectedOptions }) {
+  formData.workOrderId = selectedValues[0]
+  formData.workOrderCode = selectedOptions[0].text
+  showWorkOrderSelector.value = false
+  workOrderError.value = false
+}
+function onTypeSelected({ selectedValues }) {
+  console.log('onTypeSelected', selectedValues)
+  formData.type = selectedValues[0]
+  formData.item = ''
+  formData.model = '' // 重置型号
+  formData.unitPrice = '' // 重置单价
+  showTypeSelector.value = false
+  typeError.value = false
+}
+
+function onItemSelected({ selectedValues }) {
+  formData.item = selectedValues[0]
+  formData.model = '' // 重置型号
+  formData.unitPrice = '' // 重置单价
+  showItemSelector.value = false
+  itemError.value = false
+}
+
+// 型号选择处理函数
+function onModelSelected({ selectedValues }) {
+  formData.model = selectedValues[0]
+
+  // 设置对应型号的单价
+  if (formData.type && formData.item && formData.model) {
+    const category = props.chargeTypes.value.find(c => c.name === formData.type)
+    if (category) {
+      const item = category.children.find(i => i.name === formData.item)
+      if (item && item.children) {
+        const model = item.children.find(m => m.name === formData.model)
+        if (model && model.price !== undefined) {
+          formData.unitPrice = model.price.toString()
+        }
+      }
+    }
+  }
+
+  showModelSelector.value = false
+}
+
+function handleSubmit() {
+  // 验证表单
+  let isValid = true
+  // 验证工单
+  if (props.isWorkOrder && !formData.workOrderId) {
+    workOrderError.value = true
+    isValid = false
+  }
+
+  if (!formData.type) {
+    typeError.value = true
+    isValid = false
+  }
+
+  if (!formData.item) {
+    itemError.value = true
+    isValid = false
+  }
+
+  if (!formData.unitPrice || Number.parseFloat(formData.unitPrice) <= 0) {
+    priceError.value = true
+    isValid = false
+  }
+
+  if (!isValid)
+    return
+
+  const unitPrice = Number.parseFloat(formData.unitPrice)
+  const quantity = formData.quantity
+  const total = (unitPrice * quantity).toFixed(2)
+
+  // 提交新费用项
+  emit('add', {
+    id: Date.now(),
+    workOrderId: formData.workOrderId || '',
+    workOrderCode: formData.workOrderCode || '',
+    type: formData.type,
+    item: formData.item,
+    model: formData.model, // 添加型号
+    unitPrice,
+    quantity,
+    total,
+  })
+
+  // 重置表单
+  resetForm()
+
+  // 关闭弹窗
+  closeModal()
+}
+
+function resetForm() {
+  formData.workOrderId = ''
+  formData.workOrderCode = ''
+  formData.type = ''
+  formData.item = ''
+  formData.model = '' // 重置型号
+  formData.unitPrice = ''
+  formData.quantity = 1
+  workOrderError.value = false
+  typeError.value = false
+  itemError.value = false
+  priceError.value = false
+}
+
+function closeModal() {
+  showModal.value = false
+  resetForm()
+}
+
+// 监听输入，清除错误状态
+// eslint-disable-next-line style/max-statements-per-line
+watch(() => formData.workOrderId, () => { workOrderError.value = false })
+// eslint-disable-next-line style/max-statements-per-line
+watch(() => formData.type, () => { typeError.value = false })
+// eslint-disable-next-line style/max-statements-per-line
+watch(() => formData.item, () => { itemError.value = false })
+// eslint-disable-next-line style/max-statements-per-line
+watch(() => formData.unitPrice, () => { priceError.value = false })
+</script>
+
+<template>
+  <van-popup
+    v-model:show="showModal"
+    round
+    position="center"
+    :style="{ width: '90%', maxWidth: '420px' }"
+    close-icon-position="top-right"
+    class="other-charge-item-modal"
+  >
+    <div class="other-charge-item-modal__container">
+      <div class="other-charge-item-modal__header">
+        <h3 class="other-charge-item-modal__title">
+          添加费用项
+        </h3>
+        <van-icon 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
+            v-model="formData.workOrderCode"
+            placeholder="请选择工单"
+            readonly
+            right-icon="arrow-down"
+            :error="workOrderError"
+            @click="showWorkOrderSelector = true"
+          />
+        </div>
+
+        <div class="other-charge-item-modal__field">
+          <label class="other-charge-item-modal__label">收费类型</label>
+          <van-field
+            v-model="formData.type"
+            placeholder="请选择收费类型"
+            readonly
+            right-icon="arrow-down"
+            :error="typeError"
+            @click="showTypeSelector = true"
+          />
+        </div>
+
+        <div class="other-charge-item-modal__field">
+          <label class="other-charge-item-modal__label">具体项目</label>
+          <van-field
+            v-model="formData.item"
+            placeholder="请选择具体项目"
+            readonly
+            right-icon="arrow-down"
+            :disabled="!formData.type"
+            :error="itemError"
+            @click="showItemSelector = true"
+          />
+        </div>
+
+        <!-- 新增型号选择字段 -->
+        <div v-if="hasModelOptions" class="other-charge-item-modal__field">
+          <label class="other-charge-item-modal__label">型号</label>
+          <van-field
+            v-model="formData.model"
+            placeholder="请选择型号"
+            readonly
+            right-icon="arrow-down"
+            :disabled="!formData.item"
+            @click="showModelSelector = true"
+          />
+        </div>
+
+        <div class="other-charge-item-modal__price-quantity">
+          <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
+                v-model="formData.unitPrice"
+                type="digit"
+                placeholder="0.00"
+                :error="priceError"
+              >
+                <template #prefix>
+                  <span class="other-charge-item-modal__prefix">¥</span>
+                </template>
+              </van-field>
+            </div>
+          </div>
+
+          <div class="other-charge-item-modal__field">
+            <label class="other-charge-item-modal__label">数量</label>
+            <van-stepper
+              v-model="formData.quantity"
+              min="1"
+              step="1"
+              input-width="60px"
+              button-size="28px"
+              theme="round"
+            />
+          </div>
+        </div>
+
+        <div class="other-charge-item-modal__buttons">
+          <van-button
+            plain
+            type="default"
+            size="normal"
+            class="other-charge-item-modal__cancel-btn"
+            @click="closeModal"
+          >
+            取消
+          </van-button>
+          <van-button
+            type="primary"
+            size="normal"
+            native-type="submit"
+            class="other-charge-item-modal__confirm-btn"
+          >
+            添加
+          </van-button>
+        </div>
+      </form>
+    </div>
+
+    <!-- 工单 -->
+    <van-popup
+      v-model:show="showWorkOrderSelector"
+      position="bottom"
+
+      teleport="#other-charge-form"
+      round destroy-on-close
+    >
+      <van-picker
+        :columns="workOrderOptions"
+        show-toolbar
+        title="选择工单"
+        @confirm="onWorkOrderSelected"
+        @cancel="showWorkOrderSelector = false"
+      />
+    </van-popup>
+
+    <!-- 收费类型选择器 -->
+    <van-popup
+      v-model:show="showTypeSelector"
+      position="bottom"
+      destroy-on-close
+      teleport="#other-charge-form"
+      round
+    >
+      <van-picker
+        :columns="typeOptions"
+        show-toolbar
+        title="选择收费类型"
+        @confirm="onTypeSelected"
+        @cancel="showTypeSelector = false"
+      />
+    </van-popup>
+
+    <!-- 具体项目选择器 -->
+    <van-popup
+      v-model:show="showItemSelector"
+      destroy-on-close
+      position="bottom"
+      round
+      teleport="#other-charge-form"
+    >
+      <van-picker
+        :columns="itemOptions"
+        show-toolbar
+        title="选择具体项目"
+        @confirm="onItemSelected"
+        @cancel="showItemSelector = false"
+      />
+    </van-popup>
+
+    <!-- 型号选择器 -->
+    <van-popup
+      v-model:show="showModelSelector"
+      destroy-on-close
+      position="bottom"
+      round
+      teleport="#other-charge-form"
+    >
+      <van-picker
+        :columns="modelOptions"
+        show-toolbar
+        title="选择型号"
+        @confirm="onModelSelected"
+        @cancel="showModelSelector = false"
+      />
+    </van-popup>
+  </van-popup>
+</template>
+
+<style scoped lang="less">
+.other-charge-item-modal {
+  &__container {
+    padding: 16px;
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  &__title {
+    font-size: 18px;
+    font-weight: 500;
+    color: #1f2937;
+    margin: 0;
+  }
+
+  &__form {
+    .van-field {
+      background-color: #f9fafb;
+      border-radius: 6px;
+    }
+  }
+
+  &__field {
+    margin-bottom: 16px;
+  }
+
+  &__label {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    color: #374151;
+    margin-bottom: 4px;
+  }
+
+  &__price-quantity {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+
+  &__price-input {
+    position: relative;
+  }
+
+  &__prefix {
+    color: #6b7280;
+    font-size: 14px;
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 24px;
+    gap: 12px;
+  }
+
+  &__cancel-btn {
+    border-color: #d1d5db;
+    color: #374151;
+  }
+
+  &__confirm-btn {
+    background-color: #2563eb;
+  }
+
+  :deep(.van-stepper__input) {
+    background-color: #f9fafb;
+  }
+
+  :deep(.van-stepper__minus),
+  :deep(.van-stepper__plus) {
+    background-color: #f3f4f6;
+    border: 1px solid #d1d5db;
+  }
+}
+</style>

package/src/components/data/XBadge/index.vue

@@ -4,7 +4,7 @@ import dayjs from 'dayjs/esm/index'
 import { ref } from 'vue'
 
 const { serviceName, dictName, dictValue, dictType } = defineProps<{
-  serviceName: string
+  serviceName?: string
   dictName: string | null | undefined
   dictValue: string | number | null | undefined
   // 用于非字典型的格式化展示：如日期/小数/整数等

package/src/components/data/XFormItem/index.vue

@@ -225,8 +225,6 @@ function checkModel(val = props.modelValue) {
  */
 function getDefaultValue() {
   const val = props.modelValue
-  console.warn('>>>>>props', props)
-  console.warn('>>>> attr', attr)
   // 如果有有效值，直接返回（datePicker 初始值需按 formValueFormat 归一）
   // 目的：外部通过 formData 传入的初始值在组件挂载即与配置格式一致
   if (checkModel(val)) {