af-mobile-client-vue3 1.3.28 → 1.3.30

package/package.json

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

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

@@ -16,7 +16,7 @@ const props = defineProps({
   attr: { type: Object as () => { addOrEdit?: string, acceptCount?: number, uploadImage?: boolean }, default: () => ({}) },
   mode: { default: '新增' }, // 预览
 })
-const emit = defineEmits(['updateFileList'])
+const emit = defineEmits(['updateFileList', 'updateAllFileList'])
 
 const imageList = ref<Array<any>>(props.imageList ?? [])
 
@@ -97,6 +97,8 @@ function handlePhotoUpload(photoData: any) {
         }
       }
 
+      emit('updateAllFileList', imageList.value.filter(item => item.status === 'done').map(item => item)) // 新增
+
       const doneIds = Object.values(imageList.value)
         .filter(item => item.status === 'done')
         .map(item => item.id)
@@ -117,6 +119,9 @@ function deleteFileFunction(file: any) {
         const targetIndex = imageList.value.findIndex(item => item.id === file.id)
         if (targetIndex !== -1) {
           imageList.value.splice(targetIndex, 1)
+
+          emit('updateAllFileList', imageList.value.filter(item => item.status === 'done').map(item => item)) // 新增
+
           const doneIds = Object.values(imageList.value)
             .filter(item => item.status === 'done')
             .map(item => item.id)
@@ -205,13 +210,15 @@ function handleActionSelect(option: any) {
 .uploader-container {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  // 该属性会影响表单布局
+  // gap: 16px;
 }
 .custom-upload-area {
   width: 100%;
   min-width: 220px;
   min-height: 100px;
-  margin: 0 auto 12px auto;
+  // 该属性会影响表单布局
+  // margin: 0 auto 12px auto;
   box-sizing: border-box;
   border: 1px dashed #d9d9d9;
   border-radius: 10px;

package/src/components/data/XCellList/XCellList.md

@@ -22,6 +22,7 @@
 - ✅ 卡片式布局
 - ✅ 批量操作
 - ✅ 自定义操作按钮
+- ✅ **长按多选功能** ✨
 
 ### 表单功能
 
@@ -33,6 +34,97 @@
 - ✅ 数据字典
 - ✅ 自定义校验规则
 
+## 多选功能 ✨
+
+### 功能概述
+
+XCellList 组件新增了强大的长按多选功能，支持以下特性：
+
+- **长按触发**：长按卡片 500ms 进入多选模式
+- **精确选择**：点击标题切换选中状态，点击卡片其他区域不触发选择
+- **视觉反馈**：选中项目有高亮边框和背景色变化
+- **操作面板**：底部 ActionSheet 显示自定义操作按钮
+- **智能提示**：启用多选功能时显示操作提示
+- **按钮禁用**：多选模式下自动禁用其他操作按钮
+
+### 使用方法
+
+#### 基础多选
+
+```vue
+<script setup lang="ts">
+const multiSelectActions = ref([
+  { name: '批量操作', key: 'batchOperation', color: '#000000', icon: 'records-o' }
+])
+
+function handleMultiSelectAction(action, selectedIds, selectedItems) {
+  console.log('多选操作:', action, selectedIds, selectedItems)
+  // 处理批量操作逻辑
+}
+
+function handleSelectionChange(selectedItems) {
+  console.log('选择变化:', selectedItems)
+}
+</script>
+
+<template>
+  <XCellList
+    config-name="listConfig"
+    :service-name="serviceName"
+    :enable-multi-select="true"
+    id-key="rr_id"
+    :multi-select-actions="multiSelectActions"
+    @multi-select-action="handleMultiSelectAction"
+    @selection-change="handleSelectionChange"
+  />
+</template>
+```
+
+#### 自定义多选操作
+
+```vue
+<script setup lang="ts">
+const multiSelectActions = ref([
+  { name: '标记已读', key: 'markRead', color: '#1989fa', icon: 'eye-o' },
+  { name: '移动到文件夹', key: 'moveToFolder', color: '#07c160', icon: 'folder-o' },
+  { name: '标记重要', key: 'markImportant', color: '#ff976a', icon: 'star-o' }
+])
+
+function handleMultiSelectAction(action, selectedIds, selectedItems) {
+  switch (action) {
+    case 'markRead':
+      // 标记已读逻辑
+      break
+    case 'moveToFolder':
+      // 移动到文件夹逻辑
+      break
+    case 'markImportant':
+      // 标记重要逻辑
+      break
+  }
+}
+</script>
+```
+
+### 多选功能提示
+
+当启用多选功能（`enableMultiSelect: true`）但未进入多选模式时，会在筛选条件下方显示一个提示条：
+
+- 提示内容："长按卡片可进入多选模式"
+- 样式：浅灰色背景，信息图标，友好的提示文字
+- 进入多选模式后，此提示自动消失，显示多选模式提示条
+
+### 多选模式下的按钮禁用
+
+在多选模式下，以下按钮会被自动禁用：
+
+- 新增按钮（add-action-btn）
+- 卡片内的操作按钮（action-button）
+- 卡片底部的操作按钮（action-btn）
+- 更多按钮（⋯）
+
+这样可以避免在多选过程中误触发其他操作。
+
 ## 使用示例
 
 ### 基础列表
@@ -110,22 +202,37 @@ function updateRow(item) {
 
 ### XCellList Props
 
-| 参数         | 说明                   | 类型    | 默认值 |
-| ------------ | ---------------------- | ------- | ------ |
-| configName   | 配置名称               | string  | -      |
-| serviceName  | 服务名称               | string  | -      |
-| fixQueryForm | 固定查询参数           | object  | null   |
-| idKey        | 主键字段               | string  | 'o_id' |
-| customAdd    | 是否采用自定义新增按钮 | boolean | false  |
-| customEdit   | 是否采用自定义修改按钮 | boolean | false  |
+| 参数                   | 说明                   | 类型        | 默认值    |
+| ---------------------- | ---------------------- | ----------- | --------- |
+| configName             | 配置名称               | string      | -         |
+| serviceName            | 服务名称               | string      | -         |
+| fixQueryForm           | 固定查询参数           | object      | null      |
+| idKey                  | 主键字段               | string      | 'o_id'    |
+| customAdd              | 是否采用自定义新增按钮 | boolean     | false     |
+| customEdit             | 是否采用自定义修改按钮 | boolean     | false     |
+| **enableMultiSelect**  | **是否启用多选功能**   | **boolean** | **false** |
+| **multiSelectActions** | **多选操作按钮配置**   | **Array**   | **[]**    |
 
 ### XCellList Events
 
-| 事件名   | 说明                                           | 回调参数         |
-| -------- | ---------------------------------------------- | ---------------- |
-| toDetail | 点击详情时触发                                 | item: 当前项数据 |
-| add      | 点击新增按钮时触发（customAdd为true才会触发）  | -                |
-| update   | 点击修改按钮时触发（customEdit为true才会触发） | item: 当前项数据 |
+| 事件名                | 说明                                           | 回调参数                                                                  |
+| --------------------- | ---------------------------------------------- | ------------------------------------------------------------------------- |
+| toDetail              | 点击详情时触发                                 | item: 当前项数据                                                          |
+| add                   | 点击新增按钮时触发（customAdd为true才会触发）  | -                                                                         |
+| update                | 点击修改按钮时触发（customEdit为true才会触发） | item: 当前项数据                                                          |
+| **multiSelectAction** | **多选操作时触发**                             | **action: 操作key, selectedIds: 选中ID数组, selectedItems: 选中项目数组** |
+| **selectionChange**   | **选择状态变化时触发**                         | **selectedItems: 选中项目数组**                                           |
+
+### 多选操作按钮配置
+
+```typescript
+interface MultiSelectAction {
+  name: string // 按钮显示名称
+  key?: string // 操作标识（可选，默认使用name）
+  color?: string // 按钮颜色（可选，默认黑色）
+  icon?: string // 按钮图标（可选，默认records-o）
+}
+```
 
 ### XFormGroup Props
 
@@ -278,6 +385,18 @@ const styleFunctionForValue = `function(value) {
 3. Q: 如何自定义列表样式?
    A: 使用 styleFunctionForValue 配置样式函数
 
+4. **Q: 多选功能如何触发？**
+   **A: 长按卡片 500ms 即可进入多选模式**
+
+5. **Q: 如何自定义多选操作按钮？**
+   **A: 通过 `multiSelectActions` 属性配置，支持自定义名称、颜色和图标**
+
+6. **Q: 多选模式下如何选择项目？**
+   **A: 点击项目标题可以切换选中状态，点击卡片其他区域不会触发选择**
+
+7. **Q: 如何获取选中的项目数据？**
+   **A: 监听 `selectionChange` 事件，或通过 `multiSelectAction` 事件获取**
+
 ## 更新日志
 
 ### v1.0.0

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 || undefined
   formGroupName.value = config.groupName || 'default'
   form.value = props.formData || {}
   // 清理并重新设置验证规则

package/src/router/routes.ts

@@ -122,7 +122,7 @@ const routes: Array<RouteRecordRaw> = [
         component: XFormAppraiseView,
       },
       {
-        path: '/Component/XFormView/:id/:openid',
+        path: '/Component/XFormView',
         name: 'XFormView',
         component: XFormView,
       },

package/src/utils/queryFormDefaultRangePicker.ts

@@ -1,57 +1,57 @@
-/**
- * 根据类型获取日期区间字符串
- * @param type '当年' | 'curMonth' | '当日'
- * @param show 区分实际值还是显示值, true为实际值, false为显示值
- * @returns [start, end] 例：['2024-01-01 00:00:00', '2024-12-31 23:59:59']
- */
-export function getRangeByType(type: string, show: boolean): [string, string] {
-  const now = new Date()
-  const year = now.getFullYear()
-  const month = (now.getMonth() + 1).toString().padStart(2, '0')
-  const day = now.getDate().toString().padStart(2, '0')
-
-  if (!show) {
-    if (type === 'curYear') {
-      return [
-        `${year}-01-01 00:00:00`,
-        `${year}-12-31 23:59:59`,
-      ]
-    }
-    if (type === 'curMonth') {
-      const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
-      return [
-        `${year}-${month}-01 00:00:00`,
-        `${year}-${month}-${lastDay.toString().padStart(2, '0')} 23:59:59`,
-      ]
-    }
-    if (type === 'curDay') {
-      return [
-        `${year}-${month}-${day} 00:00:00`,
-        `${year}-${month}-${day} 23:59:59`,
-      ]
-    }
-  }
-  if (show) {
-    if (type === 'curYear') {
-      return [
-        `${year}-01-01`,
-        `${year}-12-31`,
-      ]
-    }
-    if (type === 'curMonth') {
-      const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
-      return [
-        `${year}-${month}-01`,
-        `${year}-${month}-${lastDay.toString().padStart(2, '0')}`,
-      ]
-    }
-    if (type === 'curDay') {
-      return [
-        `${year}-${month}-${day}`,
-        `${year}-${month}-${day}`,
-      ]
-    }
-  }
-  // 兜底返回空字符串数组
-  return ['', '']
-}
+/**
+ * 根据类型获取日期区间字符串
+ * @param type '当年' | 'curMonth' | '当日'
+ * @param show 区分实际值还是显示值, true为实际值, false为显示值
+ * @returns [start, end] 例：['2024-01-01 00:00:00', '2024-12-31 23:59:59']
+ */
+export function getRangeByType(type: string, show: boolean): [string, string] {
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = (now.getMonth() + 1).toString().padStart(2, '0')
+  const day = now.getDate().toString().padStart(2, '0')
+
+  if (!show) {
+    if (type === 'curYear') {
+      return [
+        `${year}-01-01 00:00:00`,
+        `${year}-12-31 23:59:59`,
+      ]
+    }
+    if (type === 'curMonth') {
+      const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
+      return [
+        `${year}-${month}-01 00:00:00`,
+        `${year}-${month}-${lastDay.toString().padStart(2, '0')} 23:59:59`,
+      ]
+    }
+    if (type === 'curDay') {
+      return [
+        `${year}-${month}-${day} 00:00:00`,
+        `${year}-${month}-${day} 23:59:59`,
+      ]
+    }
+  }
+  if (show) {
+    if (type === 'curYear') {
+      return [
+        `${year}-01-01`,
+        `${year}-12-31`,
+      ]
+    }
+    if (type === 'curMonth') {
+      const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
+      return [
+        `${year}-${month}-01`,
+        `${year}-${month}-${lastDay.toString().padStart(2, '0')}`,
+      ]
+    }
+    if (type === 'curDay') {
+      return [
+        `${year}-${month}-${day}`,
+        `${year}-${month}-${day}`,
+      ]
+    }
+  }
+  // 兜底返回空字符串数组
+  return ['', '']
+}

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

@@ -1,19 +1,27 @@
 <script setup lang="ts">
 import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
 import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
 import { defineEmits, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 // 定义事件
 const emit = defineEmits(['deleteRow'])
+
+// 多选操作配置
+const multiSelectActions = ref([
+  { name: '批量审核', key: 'batchAudit', color: '#000000', icon: 'passed' },
+])
+
+const userInfo = useUserStore().getUserInfo()
 // 访问路由
 const router = useRouter()
 // 获取默认值
 const idKey = ref('o_id')
 
 // 简易crud表单测试
-const configName = ref('mobile_meterInfoManageCRUD')
-const serviceName = ref('af-revenue')
+const configName = ref('lngChargeAuditMobileCRUD')
+const serviceName = ref('af-gaslink')
 
 // 资源权限测试
 // const configName = ref('crud_sources_test')
@@ -48,7 +56,7 @@ const serviceName = ref('af-revenue')
 // 跳转到表单——以表单组来渲染纯表单
 function toDetail(item) {
   router.push({
-    name: 'XFormGroupView',
+    name: 'XFormView',
     query: {
       id: item[idKey.value],
       // id: item.rr_id,
@@ -87,18 +95,31 @@ function toDetail(item) {
 function deleteRow(result) {
   emit('deleteRow', result.o_id)
 }
+
+// 多选操作处理
+function handleMultiSelectAction(action: string, selectedItems: any[], selectedItemsArray: any[]) {
+  console.log('多选操作:', action, selectedItems, selectedItemsArray)
+}
+
+// 选择变化处理
+function handleSelectionChange(selectedItems: any[]) {
+  console.log('选择变化，当前选中:', selectedItems.length, '个项目')
+  // 可以在这里更新UI状态，比如显示选中数量等
+}
 </script>
 
 <template>
   <NormalDataLayout id="XCellListView" title="工作计划">
     <template #layout_content>
       <XCellList
-        :config-name="configName"
-        :service-name="serviceName"
-        :fix-query-form="{ o_f_oper_name: 'edu_test' }"
-        :id-key="idKey"
+        config-name="lngChargeAuditMobileCRUD"
+        service-name="af-gaslink"
+        :enable-multi-select="true"
+        id-key="rr_id"
+        :multi-select-actions="multiSelectActions"
         @to-detail="toDetail"
-        @delete-row="deleteRow"
+        @multi-select-action="handleMultiSelectAction"
+        @selection-change="handleSelectionChange"
       />
     </template>
   </NormalDataLayout>

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

@@ -5,16 +5,19 @@ import { showDialog } from 'vant'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
+// const configName = ref('reviewFormGroup')
+// const serviceName = ref('af-revenue')
+
 // 纯表单
-const configName = ref('form_check_test')
-const serviceName = ref('af-system')
+// const configName = ref('form_check_test')
+// const serviceName = ref('af-system')
 
 // const configName = ref("计划下发Form")
 // const serviceName = ref("af-linepatrol")
 
 // 表单组
-// const configName = ref('lngChargeAuditMobileFormGroup')
-// const serviceName = ref('af-gaslink')
+const configName = ref('lngChargeAuditMobileFormGroup')
+const serviceName = ref('af-gaslink')
 
 const formData = ref({})
 const formGroup = ref(null)
@@ -22,7 +25,8 @@ const route = useRoute()
 const isInit = ref(false)
 function submit(_result) {
   showDialog({ message: '提交成功' }).then(() => {
-    history.back()
+    console.log('12121')
+    // history.back()
   })
 }
 
@@ -63,8 +67,8 @@ function submit(_result) {
       <!--      v-if="isInit" -->
       <XFormGroup
         ref="formGroup"
-        :config-name="configName"
-        :service-name="serviceName"
+        config-name="ApplyAddContractFormGroup"
+        service-name="af-apply"
         :group-form-data="formData"
         mode="新增"
         @submit="submit"

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

@@ -3,8 +3,8 @@ import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
 import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
 import { ref } from 'vue'
 
-const configName = ref('AddConstructionForm')
-const serviceName = ref('af-linepatrol')
+const configName = ref('lngSecurityChecktestForm')
+const serviceName = ref('af-safecheck')
 
 const formGroupAddConstruction = ref(null)
 </script>

package/vite.config.ts

@@ -68,13 +68,6 @@ export default ({ mode }: ConfigEnv): UserConfig => {
           changeOrigin: true,
           rewrite: path => path.replace(/^\/linepatrol\/geoserver/, '/geoserver'),
         },
-        '/api/af-revenue': {
-          // target: v4Server,
-          rewrite: (path: string) => path.replace(/^\/api\/af-revenue\//, '/'),
-          target: 'http://127.0.0.1:9026',
-          ws: false,
-          changeOrigin: true,
-        },
         '/api': {
           // v3用
           // rewrite: (path: string) => path.replace(/^\/api\/af-system\//, '/rs/'),