af-mobile-client-vue3 1.3.1 → 1.3.2-2.1

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/XCellList/index.vue

@@ -31,6 +31,8 @@ const {
   scanOptions,
   customAdd = false,
   customEdit = false,
+  customDelete = false,
+  hideAllActions = false,
 } = defineProps<{
   configName?: string
   fixQueryForm?: object
@@ -41,15 +43,18 @@ const {
     type?: string | string[] // 显示类型：可以是单个类型或类型数组 'nfc' / ['scan', 'nfc']
     defaultMode?: string // 默认模式
   }
-  // 是否自定义新增、编辑按钮
+  // 是否自定义新增、编辑、删除按钮
   customAdd?: boolean
   customEdit?: boolean
+  customDelete?: boolean
+  // 是否隐藏所有操作按钮
+  hideAllActions?: boolean
 }>()
 
 const emit = defineEmits<{
   (e: 'toDetail', item: any): void
   (e: 'update', item: any): void
-  (e: 'deleteRow', item: any): void
+  (e: 'delete', item: any): void
   (e: 'add'): void
   (e: string, item: any): void
   (e: 'updateCondition', params: any): void
@@ -151,7 +156,7 @@ const currInst = getCurrentInstance()
 
 // 列表底部的文字显示
 function finishedBottomText() {
-  if (buttonState.value?.add && buttonState.value.add === true && (filterButtonPermissions('add').state === false || ((filterButtonPermissions('add').state === true && userState.f.resources.f_role_name.includes((filterButtonPermissions('add').roleStr))))))
+  if (!hideAllActions && buttonState.value?.add && buttonState.value.add === true && (filterButtonPermissions('add').state === false || ((filterButtonPermissions('add').state === true && userState.f.resources.f_role_name.includes((filterButtonPermissions('add').roleStr))))))
     return '已加载全部内容，如需新增请点击右上角的 + 号'
   else
     return '已加载全部内容'
@@ -231,9 +236,9 @@ function initComponent() {
       buttonState.value = result.buttonState
       buttonPermissions.value = result.buttonPermissions
       if (buttonState.value.edit && buttonState.value.edit === true && (filterButtonPermissions('edit').state === false || ((filterButtonPermissions('edit').state === true && userState.f.resources.f_role_name.includes((filterButtonPermissions('edit').roleStr))))))
-        allActions.value.push({ text: '修改', func: 'updateRow' })
+        allActions.value.push({ text: '修改', func: 'update' })
       if (buttonState.value.delete && buttonState.value.delete === true && (filterButtonPermissions('delete').state === false || ((filterButtonPermissions('delete').state === true && userState.f.resources.f_role_name.includes((filterButtonPermissions('delete').roleStr))))))
-        allActions.value.push({ text: '删除', func: 'deleteRow' })
+        allActions.value.push({ text: '删除', func: 'delete' })
     }
     splitArrayAt(allActions.value, 3)
 
@@ -426,14 +431,19 @@ const reversedMainActions = computed(() => {
 // 设置 Popover 的事件
 function onSelectMenu(item: any, event: any) {
   if (event.text === '删除') {
-    showConfirmDialog({
-      title: '删除',
-      message:
-        '请确认是否删除！！！',
-    }).then(() => {
-      emit(event.func, item)
-    }).catch(() => {
-    })
+    if (customDelete) {
+      emit('delete', item)
+    }
+    else {
+      showConfirmDialog({
+        title: '删除',
+        message:
+          '请确认是否删除！！！',
+      }).then(() => {
+        emit(event.func, item)
+      }).catch(() => {
+      })
+    }
   }
   else if (event.text === '修改') {
     if (customEdit) {
@@ -560,7 +570,7 @@ defineExpose({
         />
       </VanCol>
       <!-- 新增按钮，放在查询框后、查询条件下拉按钮前 -->
-      <VanCol v-if="buttonState?.add && buttonState.add === true && (filterButtonPermissions('add').state === false || ((filterButtonPermissions('add').state === true && userState.f.resources.f_role_name.includes((filterButtonPermissions('add').roleStr)))))" class="add-col">
+      <VanCol v-if="!hideAllActions && buttonState?.add && buttonState.add === true && (filterButtonPermissions('add').state === false || ((filterButtonPermissions('add').state === true && userState.f.resources.f_role_name.includes((filterButtonPermissions('add').roleStr)))))" class="add-col">
         <VanButton
           icon="add"
           type="primary"
@@ -629,7 +639,7 @@ defineExpose({
                         />
                       </p>
                     </div>
-                    <div class="action-buttons">
+                    <div v-if="!hideAllActions" class="action-buttons">
                       <VanButton
                         v-for="btn in btnList"
                         :key="btn.dataIndex"
@@ -704,14 +714,12 @@ defineExpose({
               </VanRow>
               <!-- 添加详情插槽 -->
               <slot name="item-detail" :item="item" />
-              <VanRow v-if="allActions.length > 0" gutter="20" class="card_item_bottom">
+              <VanRow v-if="!hideAllActions && allActions.length > 0" gutter="20" class="card_item_bottom">
                 <VanCol span="4">
                   <VanPopover
                     v-if="getActionGroups(item, index).more.length"
                     v-model:show="showPopover[index]"
                     placement="bottom-start"
-                    theme="dark"
-                    overlay
                     :actions="getActionGroups(item, index).more"
                     @select="onSelectMenu(item, $event)"
                   >
@@ -934,8 +942,8 @@ defineExpose({
         border-top: 1px solid rgba(0, 0, 0, 0.06);
 
         .more-button {
-          width: 28px;
-          height: 28px;
+          width: 37px;
+          height: 37px;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -946,6 +954,7 @@ defineExpose({
           border-radius: 6px;
           transition: all 0.2s ease;
           border: 1px solid rgba(0, 0, 0, 0.06);
+          margin: 2px 0 0 0;
           span {
             line-height: 1;
             margin-top: -2px;
@@ -963,6 +972,7 @@ defineExpose({
           min-width: 76px;
           height: 40px;
           border-radius: 10px;
+          padding: 0 14px;
           // font-size: var(--van-font-size-md);
           transition: all 0.2s ease;
           &:active {
@@ -978,6 +988,42 @@ defineExpose({
     height: 100%;
   }
 
+  :deep(.van-popup),
+  :deep(.van-popover) {
+    border: none !important;
+    outline: none !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+    background-color: #ffffff !important;
+
+    &::before,
+    &::after {
+      border: none !important;
+      outline: none !important;
+    }
+
+    .van-popover__content {
+      background-color: #ffffff !important;
+      border: none !important;
+      outline: none !important;
+      border-radius: 8px !important;
+    }
+
+    .van-popover__arrow,
+    .van-popover_arrow {
+      background-color: #ffffff !important;
+      border: none !important;
+      outline: none !important;
+    }
+
+    .van-popover__action {
+      color: #333 !important;
+
+      &:hover {
+        background-color: #f5f5f5 !important;
+      }
+    }
+  }
+
   .filter-condition {
     display: flex;
     align-items: center;

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

@@ -208,7 +208,7 @@ async function initWithGroupFormItems() {
 function setupFormConfig(config: GroupFormItems) {
   loadParamLogicNameData(config.paramLogicName)
   formConfig.value = config
-  myServiceName.value = props.serviceName || ''
+  myServiceName.value = props.serviceName
   formGroupName.value = config.groupName || 'default'
   form.value = props.formData || {}
   // 清理并重新设置验证规则

package/src/components/data/XFormGroup/doc/README.md

@@ -22,18 +22,21 @@ XFormGroup 是一个基于 Vue 3 + TypeScript + Vant 4 开发的表单组组件
 ## Props 参数详解
 
 ### configName
+
 - **类型**: `string`
 - **默认值**: `''`
 - **说明**: 表单配置名称，用于从后端获取表单配置信息
 - **示例**: `'appapplyuserinfoFormGroup'`
 
 ### serviceName
+
 - **类型**: `string | undefined`
 - **默认值**: `undefined`
 - **说明**: 服务名称，用于指定后端服务
 - **示例**: `'af-apply'`
 
 ### groupFormData
+
 - **类型**: `object`
 - **默认值**: `() => ({})`
 - **说明**: 表单组数据，用于初始化表单数据
@@ -47,6 +50,7 @@ XFormGroup 是一个基于 Vue 3 + TypeScript + Vant 4 开发的表单组组件
 ```
 
 ### mode
+
 - **类型**: `string`
 - **默认值**: `'查询'`
 - **说明**: `表单模式，控制表单的显示和操作模式`
@@ -136,7 +140,8 @@ async function submit() {
       if (formInstance.formGroupName && typeof formInstance.getFormData === 'function') {
         allFormData[formInstance.formGroupName] = formInstance.getFormData()
       }
-    } catch (error) {
+    }
+    catch (error) {
       console.error('表单验证失败:', error)
       return
     }
@@ -164,9 +169,11 @@ async function submit() {
 ## 事件
 
 ### submit
+
 - **参数**: `formData: object`
 - **说明**: 表单提交事件，当用户点击提交按钮时触发
 - **示例**:
+
 ```javascript
 function handleSubmit(formData) {
   console.log('表单数据:', formData)
@@ -177,42 +184,47 @@ function handleSubmit(formData) {
 ## 方法
 
 ### init(params: Form)
+
 - **参数**: `params` - 初始化参数对象
 - **说明**: 手动初始化组件，可以动态改变配置
 - **示例**:
+
 ```javascript
 formGroup.value.init({
   configName: 'newConfig',
   serviceName: 'newService',
-  groupFormData: { ... },
+  groupFormData: { ...any },
   mode: '新增'
 })
 ```
 
 ### setRef(refValue)
+
 - **参数**: `refValue` - 表单实例
 - **说明**: 注册表单实例到组件中，用于统一管理和提交
 
 ### removeRef(refValue)
+
 - **参数**: `refValue` - 表单实例
 - **说明**: 从组件中注销表单实例
 
 ## 配置结构说明
 
 ### 基础配置结构
-```javascript
+
+```json
 {
-  groups: [
+  "groups": [
     {
       "groupName": "userInfo",
       "describe": "用户信息",
       "tableName": "用户信息表",
-      "formGroupType": "form", // 或 "slot"
-      "slotName": "user", // 当 formGroupType 为 "slot" 时使用
+      "formGroupType": "form",
+      "slotName": "user",
       "showSubmitBtn": false
     },
     {
-      "groupName": "deviceInfo", 
+      "groupName": "deviceInfo",
       "describe": "设备信息",
       "tableName": "设备信息表",
       "formGroupType": "slot",
@@ -220,20 +232,20 @@ formGroup.value.init({
       "showSubmitBtn": true
     }
   ],
-    showSubmitBtn: true
+  "showSubmitBtn": true
 }
 ```
 
 ### 配置项说明
 
-| 字段名 | 类型 | 说明 |
-|--------|------|------|
-| groupName | string | 分组名称，用于数据分组 |
-| describe | string | 标签页显示标题 |
-| tableName | string | 表名，当 describe 为空时作为标题 |
-| formGroupType | string | 表单类型，'form' 为普通表单，'slot' 为插槽 |
-| slotName | string | 插槽名称，当 formGroupType 为 'slot' 时使用 |
-| showSubmitBtn | boolean | 是否显示提交按钮 |
+| 字段名        | 类型    | 说明                                        |
+| ------------- | ------- | ------------------------------------------- |
+| groupName     | string  | 分组名称，用于数据分组                      |
+| describe      | string  | 标签页显示标题                              |
+| tableName     | string  | 表名，当 describe 为空时作为标题            |
+| formGroupType | string  | 表单类型，'form' 为普通表单，'slot' 为插槽  |
+| slotName      | string  | 插槽名称，当 formGroupType 为 'slot' 时使用 |
+| showSubmitBtn | boolean | 是否显示提交按钮                            |
 
 ## 样式定制
 
@@ -243,16 +255,16 @@ formGroup.value.init({
 #x-form-group {
   background-color: #f7f8fa;
   padding-bottom: 10px;
-  
+
   .x-form-group-item {
     margin: 20px 0;
   }
-  
+
   // 自定义标签页样式
   :deep(.van-tabs__nav) {
     background-color: #fff;
   }
-  
+
   // 自定义按钮样式
   :deep(.van-button--primary) {
     background-color: #1989fa;
@@ -270,4 +282,5 @@ formGroup.value.init({
 
 ```
 
-## 这个文档详细介绍了 XFormGroup 组件的使用方法，特别是插槽的使用方式和各个参数的详细说明。开发者可以根据这个文档快速上手使用该组件。 
+## 这个文档详细介绍了 XFormGroup 组件的使用方法，特别是插槽的使用方式和各个参数的详细说明。开发者可以根据这个文档快速上手使用该组件。
+```