af-mobile-client-vue3 1.3.12 → 1.3.14

package/src/components/data/UserDetail/recordEntries.ts

@@ -0,0 +1,159 @@
+// 记录入口默认配置
+export interface RecordEntry {
+  id: string
+  title: string
+  icon: string
+  bgColor: string
+  textColor: string
+  dateLabel: string
+  route: string
+  path: string
+  forMeterTypes: string[]
+}
+
+// 默认记录入口配置
+export const defaultRecordEntries: RecordEntry[] = [
+  {
+    id: 'OperateRecords',
+    title: '操作记录',
+    icon: 'i-fa-solid-list',
+    bgColor: 'bg-gray-100',
+    textColor: 'text-gray-500',
+    dateLabel: '操作记录',
+    route: 'OperateRecords',
+    path: '/userRecords/operateRecords',
+    forMeterTypes: ['气量卡表', '金额卡表', '物联网表', '机表'],
+  },
+  {
+    id: 'payment',
+    title: '缴费记录',
+    icon: 'i-fa6-solid-money-bill-wave',
+    bgColor: 'bg-blue-100',
+    textColor: 'text-blue-500',
+    dateLabel: '缴费',
+    route: 'PaymentRecords',
+    path: '/userRecords/payment',
+    forMeterTypes: ['气量卡表', '金额卡表', '物联网表', '机表'],
+  },
+  {
+    id: 'meter',
+    title: '抄表记录',
+    icon: 'i-fa6-solid-chart-line',
+    bgColor: 'bg-green-100',
+    textColor: 'text-green-500',
+    dateLabel: '抄表',
+    route: 'MeterRecords',
+    path: '/userRecords/meter',
+    forMeterTypes: ['物联网表', '机表'],
+  },
+  {
+    id: 'transfer',
+    title: '过户记录',
+    icon: 'i-fa-solid-exchange-alt',
+    bgColor: 'bg-purple-100',
+    textColor: 'text-purple-500',
+    dateLabel: '过户',
+    route: 'TransferRecords',
+    path: '/userRecords/transfer',
+    forMeterTypes: ['气量卡表', '金额卡表', '物联网表', '机表'],
+  },
+  {
+    id: 'replacement',
+    title: '换表记录',
+    icon: 'i-fa-solid-sync-alt',
+    bgColor: 'bg-orange-100',
+    textColor: 'text-orange-500',
+    dateLabel: '换表',
+    route: 'ReplacementRecords',
+    path: '/userRecords/replacement',
+    forMeterTypes: ['气量卡表', '金额卡表', '物联网表', '机表'],
+  },
+  {
+    id: 'otherCharge',
+    title: '其他收费记录',
+    icon: 'i-fa-solid-receipt',
+    bgColor: 'bg-indigo-100',
+    textColor: 'text-indigo-500',
+    dateLabel: '其他收费',
+    route: 'OtherChargeRecords',
+    path: '/userRecords/otherCharge',
+    forMeterTypes: ['气量卡表', '金额卡表', '物联网表', '机表'],
+  },
+  {
+    id: 'abnormalAlarm',
+    title: '异常报警记录',
+    icon: 'i-fa-solid-exclamation-triangle',
+    bgColor: 'bg-red-100',
+    textColor: 'text-red-500',
+    dateLabel: '异常报警',
+    route: 'AbnormalAlarmRecords',
+    path: '/userRecords/abnormalAlarm',
+    forMeterTypes: ['物联网表', '机表'],
+  },
+  {
+    id: 'cardReplacement',
+    title: '补卡记录',
+    icon: 'i-fa-solid-sync-alt',
+    bgColor: 'bg-orange-100',
+    textColor: 'text-orange-500',
+    dateLabel: '补卡',
+    route: 'CardReplacementRecords',
+    path: '/userRecords/cardReplacement',
+    forMeterTypes: ['气量卡表', '金额卡表', '机表'],
+  },
+  {
+    id: 'change',
+    title: '变更记录',
+    icon: 'i-fa-solid-exchange-alt',
+    bgColor: 'bg-purple-100',
+    textColor: 'text-purple-500',
+    dateLabel: '变更',
+    route: 'ChangeRecords',
+    path: '/userRecords/change',
+    forMeterTypes: ['气量卡表', '金额卡表', '物联网表', '机表'],
+  },
+  {
+    id: 'commandView',
+    title: '指令查看记录',
+    icon: 'i-fa-solid-eye',
+    bgColor: 'bg-blue-100',
+    textColor: 'text-blue-500',
+    dateLabel: '指令查看',
+    route: 'CommandViewRecords',
+    path: '/userRecords/commandView',
+    forMeterTypes: ['物联网表', '机表'],
+  },
+  {
+    id: 'gasCompensation',
+    title: '补气记录',
+    icon: 'i-fa-solid-plus',
+    bgColor: 'bg-green-100',
+    textColor: 'text-green-500',
+    dateLabel: '流水',
+    route: 'GasCompensationRecords',
+    path: '/userRecords/gasCompensation',
+    forMeterTypes: ['气量卡表', '金额卡表', '物联网表', '机表'],
+  },
+  {
+    id: 'instrumentCollection',
+    title: '表具采集记录',
+    icon: 'i-fa-solid-list',
+    bgColor: 'bg-gray-100',
+    textColor: 'text-gray-500',
+    dateLabel: '表具采集',
+    route: 'InstrumentCollectionRecords',
+    path: '/userRecords/instrumentCollection',
+    forMeterTypes: ['物联网表', '机表'],
+  },
+  {
+    id: 'priceAdjustment',
+    title: '价格调整记录',
+    icon: 'i-fa-solid-dollar-sign',
+    bgColor: 'bg-red-100',
+    textColor: 'text-red-500',
+    dateLabel: '价格调整',
+    route: 'PriceAdjustmentRecords',
+    path: '/userRecords/priceAdjustment',
+    forMeterTypes: ['气量卡表', '金额卡表', '物联网表', '机表'],
+  },
+]

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

@@ -0,0 +1,26 @@
+// 通用用户类型定义
+export interface BaseUser {
+  f_userinfo_id: string
+  f_userinfo_code: string
+  f_user_name: string
+  f_user_phone?: string
+  f_address?: string
+  f_user_state?: string
+  f_user_type?: string
+  f_meter_type?: string
+  f_meternumber?: string
+  f_balance?: number
+  f_balance_amount?: number
+  f_userfiles_id?: string
+  [key: string]: any // 允许扩展其他字段
+}
+
+// 信息显示配置项
+export interface ConfigItem {
+  label: string
+  field: string
+  full?: boolean
+  format?: (value: string | number) => string
+  template?: string
+  condition?: (data: any) => boolean
+}

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

@@ -1,82 +1,82 @@
-<script setup lang="ts">
-import { getDictItemByValue } from '@af-mobile-client-vue3/utils/dictUtil'
-import { ref } from 'vue'
-
-const { serviceName, dictName, dictValue } = defineProps<{
-  serviceName: string
-  dictName: string | null | undefined
-  dictValue: string | null | undefined
-}>()
-
-// 字面值
-const label = ref('')
-
-// 样式类名
-const className = ref('')
-
-initComponent()
-
-// 组件初始化
-function initComponent() {
-  if (dictValue === null || dictValue === undefined) {
-    label.value = '--'
-    return
-  }
-  if (!dictName || dictName === '') {
-    label.value = dictValue.toString()
-    return
-  }
-  getDictItemByValue(dictName, serviceName, dictValue, (result) => {
-    if (result == null) {
-      label.value = dictValue.toString()
-    }
-    else {
-      label.value = result.label
-      className.value = `badge-${result.status}`
-    }
-  })
-}
-</script>
-
-<template>
-  <span :class="className !== '' ? className : undefined">{{ label }}</span>
-</template>
-
-<style scoped lang="less">
-.badge-blue {
-  color: #1890ff;
-}
-.badge-green {
-  color: #52c41a;
-}
-.badge-orange {
-  color: #fa8c16;
-}
-.badge-cyan {
-  color: #13c2c2;
-}
-.badge-yellow {
-  color: #fadb14;
-}
-.badge-red {
-  color: #f5222d;
-}
-.badge-pink {
-  color: #eb2f96;
-}
-.badge-purple {
-  color: #722ed1;
-}
-.badge-geekblue {
-  color: #2f54eb;
-}
-.badge-volcano {
-  color: #fa541c;
-}
-.badge-gold {
-  color: #faad14;
-}
-.badge-lime {
-  color: #a0d911;
-}
-</style>
+<script setup lang="ts">
+import { getDictItemByValue } from '@af-mobile-client-vue3/utils/dictUtil'
+import { ref } from 'vue'
+
+const { serviceName, dictName, dictValue } = defineProps<{
+  serviceName: string
+  dictName: string | null | undefined
+  dictValue: string | null | undefined
+}>()
+
+// 字面值
+const label = ref('')
+
+// 样式类名
+const className = ref('')
+
+initComponent()
+
+// 组件初始化
+function initComponent() {
+  if (dictValue === null || dictValue === undefined) {
+    label.value = '--'
+    return
+  }
+  if (!dictName || dictName === '') {
+    label.value = dictValue.toString()
+    return
+  }
+  getDictItemByValue(dictName, serviceName, dictValue, (result) => {
+    if (result == null) {
+      label.value = dictValue.toString()
+    }
+    else {
+      label.value = result.label
+      className.value = `badge-${result.status}`
+    }
+  })
+}
+</script>
+
+<template>
+  <span :class="className !== '' ? className : undefined">{{ label }}</span>
+</template>
+
+<style scoped lang="less">
+.badge-blue {
+  color: #1890ff;
+}
+.badge-green {
+  color: #52c41a;
+}
+.badge-orange {
+  color: #fa8c16;
+}
+.badge-cyan {
+  color: #13c2c2;
+}
+.badge-yellow {
+  color: #fadb14;
+}
+.badge-red {
+  color: #f5222d;
+}
+.badge-pink {
+  color: #eb2f96;
+}
+.badge-purple {
+  color: #722ed1;
+}
+.badge-geekblue {
+  color: #2f54eb;
+}
+.badge-volcano {
+  color: #fa541c;
+}
+.badge-gold {
+  color: #faad14;
+}
+.badge-lime {
+  color: #a0d911;
+}
+</style>

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

@@ -1,105 +1,105 @@
-<script setup lang="ts">
-import {
-  Col as VanCol,
-  Icon as VanIcon,
-  Row as VanRow,
-  Skeleton as VanSkeleton,
-} from 'vant'
-
-const { title, describe, extra, loading, statusBar } = defineProps<{
-  title?: string
-  describe?: string
-  extra?: string
-  loading?: boolean
-  statusBar?: { icon: string, color: string }
-}>()
-</script>
-
-<template>
-  <div class="main">
-    <VanSkeleton title :row="20" :loading="loading" class="skeleton-box">
-      <VanIcon
-        v-if="statusBar"
-        :color="statusBar.color"
-        :name="statusBar.icon"
-        class="status-icon animate__animated animate__rotateInDownRight"
-        size="70"
-      />
-      <VanRow class="detail-header">
-        <VanCol span="16">
-          <slot name="detailHeaderTitle">
-            <div class="detail-header-title">
-              {{ title }}
-            </div>
-          </slot>
-          <slot name="detailHeaderDescribe">
-            <div class="detail-header-describe">
-              {{ describe }}
-            </div>
-          </slot>
-        </VanCol>
-        <VanCol span="8">
-          <span class="detail-header-extra">
-            {{ extra }}
-          </span>
-        </VanCol>
-      </VanRow>
-      <div class="detail-content-box">
-        <slot name="detailContent" />
-      </div>
-      <slot name="extraAction" />
-    </VanSkeleton>
-  </div>
-</template>
-
-<style scoped lang="less">
-.main {
-  background-color: #f7f8fa;
-  overflow-y: auto;
-  height: 92vh;
-  .skeleton-box {
-    margin-top: 1vh;
-  }
-  .status-icon {
-    opacity: 0.5;
-    position: absolute;
-    top: 13vh;
-    right: 3vh;
-    transform: translate(-50%, -50%) rotate(-20deg);
-  }
-  .status-icon:before {
-    opacity: 0.5;
-    transform: rotate(-20deg);
-  }
-  .status-icon:after {
-    opacity: 0.5;
-    transform: rotate(-20deg);
-  }
-  .detail-header {
-    margin-top: 1vh;
-    padding: 1vh 2vh 1vh 2vh;
-    background-color: white;
-    .detail-header-title {
-      font-size: 15px;
-      margin-bottom: 5px;
-    }
-    .detail-header-describe {
-      font-size: 13px;
-      color: var(--van-text-color-2);
-    }
-    .detail-header-extra {
-      width: 100%;
-      display: inline-block;
-      text-align: right;
-      font-size: 28px;
-      color: #1989fa;
-      font-weight: bold;
-    }
-  }
-  .detail-content-box {
-    background-color: white;
-    margin-top: 1vh;
-    padding: 1vh 2vh 2vh 2vh;
-  }
-}
-</style>
+<script setup lang="ts">
+import {
+  Col as VanCol,
+  Icon as VanIcon,
+  Row as VanRow,
+  Skeleton as VanSkeleton,
+} from 'vant'
+
+const { title, describe, extra, loading, statusBar } = defineProps<{
+  title?: string
+  describe?: string
+  extra?: string
+  loading?: boolean
+  statusBar?: { icon: string, color: string }
+}>()
+</script>
+
+<template>
+  <div class="main">
+    <VanSkeleton title :row="20" :loading="loading" class="skeleton-box">
+      <VanIcon
+        v-if="statusBar"
+        :color="statusBar.color"
+        :name="statusBar.icon"
+        class="status-icon animate__animated animate__rotateInDownRight"
+        size="70"
+      />
+      <VanRow class="detail-header">
+        <VanCol span="16">
+          <slot name="detailHeaderTitle">
+            <div class="detail-header-title">
+              {{ title }}
+            </div>
+          </slot>
+          <slot name="detailHeaderDescribe">
+            <div class="detail-header-describe">
+              {{ describe }}
+            </div>
+          </slot>
+        </VanCol>
+        <VanCol span="8">
+          <span class="detail-header-extra">
+            {{ extra }}
+          </span>
+        </VanCol>
+      </VanRow>
+      <div class="detail-content-box">
+        <slot name="detailContent" />
+      </div>
+      <slot name="extraAction" />
+    </VanSkeleton>
+  </div>
+</template>
+
+<style scoped lang="less">
+.main {
+  background-color: #f7f8fa;
+  overflow-y: auto;
+  height: 92vh;
+  .skeleton-box {
+    margin-top: 1vh;
+  }
+  .status-icon {
+    opacity: 0.5;
+    position: absolute;
+    top: 13vh;
+    right: 3vh;
+    transform: translate(-50%, -50%) rotate(-20deg);
+  }
+  .status-icon:before {
+    opacity: 0.5;
+    transform: rotate(-20deg);
+  }
+  .status-icon:after {
+    opacity: 0.5;
+    transform: rotate(-20deg);
+  }
+  .detail-header {
+    margin-top: 1vh;
+    padding: 1vh 2vh 1vh 2vh;
+    background-color: white;
+    .detail-header-title {
+      font-size: 15px;
+      margin-bottom: 5px;
+    }
+    .detail-header-describe {
+      font-size: 13px;
+      color: var(--van-text-color-2);
+    }
+    .detail-header-extra {
+      width: 100%;
+      display: inline-block;
+      text-align: right;
+      font-size: 28px;
+      color: #1989fa;
+      font-weight: bold;
+    }
+  }
+  .detail-content-box {
+    background-color: white;
+    margin-top: 1vh;
+    padding: 1vh 2vh 2vh 2vh;
+  }
+}
+</style>