af-mobile-client-vue3 1.2.1 → 1.2.3

package/package.json

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

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

@@ -13,6 +13,7 @@
 ## 功能特性
 
 ### 列表功能
+
 - ✅ 下拉刷新
 - ✅ 上拉加载
 - ✅ 搜索过滤
@@ -23,6 +24,7 @@
 - ✅ 自定义操作按钮
 
 ### 表单功能
+
 - ✅ 支持多种表单项类型
 - ✅ 表单分组
 - ✅ 表单验证
@@ -77,41 +79,71 @@ function handleSubmit(data) {
 </template>
 ```
 
+### 表单功能(琉璃配置中的需要勾选的新增和修改)
+
+```vue
+<script setup lang="ts">
+const configName = 'searchForm'
+const serviceName = 'userService'
+
+function addOption() {
+  console.log('新增表单')
+}
+function updateRow(item) {
+  console.log('修改表单:', item)
+}
+</script>
+
+<template>
+  <XCellList
+    :config-name="configName"
+    :service-name="serviceName"
+    :custom-add="true"
+    :custom-edit="true"
+    @update="updateRow"
+    @add="addOption"
+  />
+</template>
+```
+
 ## API 文档
 
 ### XCellList Props
 
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| configName | 配置名称 | string | - |
-| serviceName | 服务名称 | string | - |
-| fixQueryForm | 固定查询参数 | object | null |
-| idKey | 主键字段 | string | 'o_id' |
+| 参数         | 说明                   | 类型    | 默认值 |
+| ------------ | ---------------------- | ------- | ------ |
+| configName   | 配置名称               | string  | -      |
+| serviceName  | 服务名称               | string  | -      |
+| fixQueryForm | 固定查询参数           | object  | null   |
+| idKey        | 主键字段               | string  | 'o_id' |
+| customAdd    | 是否采用自定义新增按钮 | boolean | false  |
+| customEdit   | 是否采用自定义修改按钮 | boolean | false  |
 
 ### XCellList Events
 
-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| toDetail | 点击详情时触发 | item: 当前项数据 |
-| addOption | 点击新增按钮时触发 | - |
+| 事件名   | 说明                                           | 回调参数         |
+| -------- | ---------------------------------------------- | ---------------- |
+| toDetail | 点击详情时触发                                 | item: 当前项数据 |
+| add      | 点击新增按钮时触发（customAdd为true才会触发）  | -                |
+| update   | 点击修改按钮时触发（customEdit为true才会触发） | item: 当前项数据 |
 
 ### XFormGroup Props
 
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| configName | 配置名称 | string | '' |
-| serviceName | 服务名称 | string | - |
-| groupFormData | 表单数据 | object | {} |
-| mode | 表单模式 | '查询' \| '新增' \| '修改' | '查询' |
+| 参数          | 说明     | 类型                       | 默认值 |
+| ------------- | -------- | -------------------------- | ------ |
+| configName    | 配置名称 | string                     | ''     |
+| serviceName   | 服务名称 | string                     | -      |
+| groupFormData | 表单数据 | object                     | {}     |
+| mode          | 表单模式 | '查询' \| '新增' \| '修改' | '查询' |
 
 ### XFormItem Props
 
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| attr | 表单项配置 | FormItemAttr | - |
-| form | 表单数据对象 | object | - |
-| mode | 表单模式 | string | '查询' |
-| showLabel | 是否显示标签 | boolean | true |
+| 参数      | 说明         | 类型         | 默认值 |
+| --------- | ------------ | ------------ | ------ |
+| attr      | 表单项配置   | FormItemAttr | -      |
+| form      | 表单数据对象 | object       | -      |
+| mode      | 表单模式     | string       | '查询' |
+| showLabel | 是否显示标签 | boolean      | true   |
 
 ## 配置说明
 
@@ -219,9 +251,13 @@ const styleFunctionForValue = `function(value) {
 2. 表单验证规则需要按照规范配置
 3. 自定义函数需要使用字符串形式
 4. 数据源配置支持多种方式:
-  - logic@: 逻辑处理
-  - config@: 配置数据
-  - search@: 搜索数据
+
+- logic@: 逻辑处理
+- config@: 配置数据
+- search@: 搜索数据5.对于默认的新增和修改功能，单表已经实现（也可以自定义），多表关联及自定义sql请使用自定义按钮实现
+- 配置按钮状态（customAdd、customEdit）为 true
+- 监听 add 和 update 事件
+- 实现自定义逻辑
 
 ## 最佳实践
 
@@ -245,11 +281,13 @@ const styleFunctionForValue = `function(value) {
 ## 更新日志
 
 ### v1.0.0
+
 - 初始版本发布
 - 支持基础列表功能
 - 支持表单配置
 
 ### v1.1.0
+
 - 添加表单联动
 - 优化列表性能
 - 修复已知问题

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

@@ -23,7 +23,7 @@ import {
 import { computed, defineEmits, defineProps, getCurrentInstance, onBeforeMount, ref, useSlots, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
-const { configName, serviceName, fixQueryForm } = withDefaults(defineProps<{
+const { configName, serviceName, fixQueryForm, customAdd, customEdit } = withDefaults(defineProps<{
   configName?: string
   fixQueryForm?: object
   idKey?: string
@@ -33,17 +33,22 @@ const { configName, serviceName, fixQueryForm } = withDefaults(defineProps<{
     type?: string | string[] // 显示类型：可以是单个类型或类型数组 'nfc' / ['scan', 'nfc']
     defaultMode?: string // 默认模式
   }
+  // 是否自定义新增、编辑按钮
+  customAdd?: boolean
+  customEdit?: boolean
 }>(), {
   configName: '',
   fixQueryForm: null,
   idKey: 'o_id',
   serviceName: undefined,
   scanOptions: undefined,
+  customAdd: false,
+  customEdit: false,
 })
 
 const emit = defineEmits<{
   (e: 'toDetail', item: any): void
-  (e: 'update', item: any, handledByParent: any): void
+  (e: 'update', item: any): void
   (e: 'deleteRow', item: any): void
   (e: 'add'): void
   (e: string, item: any): void
@@ -406,35 +411,22 @@ function onSelectMenu(item: any, event: any) {
     })
   }
   else if (event.text === '修改') {
-    // 触发update事件，父组件可以监听并处理
-    // 使用isHandledByParent标志来跟踪是否已经被父组件处理
-    let isHandledByParent = false
-
-    // 使用一个自定义事件来获取父组件的处理结果
-    const handledByParent = (handled: boolean) => {
-      isHandledByParent = handled
+    if (customEdit) {
+      emit('update', item)
     }
-
-    // 触发update事件，将回调函数作为第二个参数传递给父组件
-    emit('update', item, handledByParent)
-
-    // 如果父组件已处理，则不执行默认行为
-    if (isHandledByParent) {
-      return
+    else {
+      // 默认行为 - 导航到XForm页面
+      router.push({
+        name: 'XForm',
+        // params: { id: item },
+        query: {
+          groupFormItems: JSON.stringify(groupFormItems.value),
+          serviceName,
+          formData: JSON.stringify(item),
+          mode: '修改',
+        },
+      })
     }
-
-    // 默认行为 - 导航到XForm页面
-    router.push({
-      name: 'XForm',
-      // params: { id: item },
-      query: {
-        groupFormItems: JSON.stringify(groupFormItems.value),
-        serviceName,
-        formData: JSON.stringify(item),
-        mode: '修改',
-      },
-    })
-    // emit('addOption', totalCount.value)
   }
   else {
     emit(event.func, item)
@@ -443,35 +435,21 @@ function onSelectMenu(item: any, event: any) {
 
 // 抛出新增按钮的事件
 function addOption() {
-  // 触发update事件，父组件可以监听并处理
-  // 使用isHandledByParent标志来跟踪是否已经被父组件处理
-  let isHandledByParent = false
-
-  // 使用一个自定义事件来获取父组件的处理结果
-  const handledByParent = (handled: boolean) => {
-    isHandledByParent = handled
+  if (customAdd) {
+    emit('add')
   }
-
-  // 触发update事件，将回调函数作为第二个参数传递给父组件
-  emit('add', handledByParent)
-
-  // 如果父组件已处理，则不执行默认行为
-  if (isHandledByParent) {
-    return
+  else {
+    // 默认行为 - 导航到XForm页面
+    router.push({
+      name: 'XForm',
+      query: {
+        groupFormItems: JSON.stringify(groupFormItems.value),
+        serviceName,
+        formData: JSON.stringify({}),
+        mode: '新增',
+      },
+    })
   }
-
-  // 默认行为 - 导航到XForm页面
-  router.push({
-    name: 'XForm',
-    // params: { id: totalCount.value },
-    query: {
-      groupFormItems: JSON.stringify(groupFormItems.value),
-      serviceName,
-      formData: JSON.stringify({}),
-      mode: '新增',
-    },
-  })
-  // emit('addOption', totalCount.value)
 }
 
 // 处理按钮点击

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

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import type { FormInstance } from 'vant'
 import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
+import { addOrModifyEntity } from '@af-mobile-client-vue3/services/api/common'
 import { post } from '@af-mobile-client-vue3/services/restTools'
 import {
+  showFailToast,
+  showSuccessToast,
   Button as VanButton,
   CellGroup as VanCellGroup,
   Form as VanForm,
@@ -21,6 +24,7 @@ interface GroupFormItems {
   formJson: any[] // 根据实际类型调整
   showSubmitBtn?: boolean
   groupName?: string
+  tableName?: string
 }
 const props = withDefaults(defineProps<{
   configName?: string
@@ -48,6 +52,7 @@ const formGroupName = ref<string | null>(null)
 const myServiceName = ref('')
 const loaded = ref(false)
 let myGetDataParams = reactive({})
+const tableName = ref('')
 
 const internalFormConfig = ref<GroupFormItems | null>(null)
 const internalSubmitButton = ref<boolean | undefined>(undefined)
@@ -71,6 +76,9 @@ const resolvedSubmitButton = computed(() => {
 
 onBeforeMount(() => {
   if (!props.configName && props.groupFormItems) {
+    if (props.groupFormItems && props.groupFormItems.tableName) {
+      tableName.value = props.groupFormItems.tableName.split(' ')[0] || ''
+    }
     init({ formItems: props.groupFormItems, serviceName: props.serviceName, formData: props.formData, formName: props.formName })
   }
 })
@@ -201,8 +209,36 @@ function setForm(obj) {
   Object.assign(form.value, obj)
 }
 
+// 获取表单字段实际值
+function getRealKey(form) {
+  const result = {}
+  for (const key in form) {
+    result[key.substring(key.indexOf('_') + 1)] = form[key]
+  }
+  return result
+}
+
 function onSubmit() {
-  emits('onSubmit', form.value)
+  if (!props.configName && props.groupFormItems) {
+    // 只有单表才可以成功，多表关联或者自定义sql不行
+    const params = getRealKey(form.value)
+    try {
+      addOrModifyEntity(params, tableName.value, 'af-gaslink').then(() => {
+        showSuccessToast('提交成功！')
+      })
+    }
+    catch (error) {
+      showFailToast('提交失败！')
+    }
+    finally {
+      setTimeout(() => {
+        history.back()
+      }, 1000)
+    }
+  }
+  else {
+    emits('onSubmit', form.value)
+  }
 }
 async function validate() {
   await formRef.value?.validate()

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,26 @@
 <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 userInfo = useUserStore().getUserInfo()
 // 访问路由
 const router = useRouter()
 // 获取默认值
 const idKey = ref('o_id')
 
 // 简易crud表单测试
-const configName = ref('lngChargeAuditMobileCRUD')
+// const configName = ref('orderCarInMobileCRUD')
+// const serviceName = ref('af-gaslink')
+// const configName = ref('lngPriceManageMobileCRUD')
+const configName = ref('测试2')
 const serviceName = ref('af-gaslink')
+// const configName = ref('mobile_liushuiQueryCRUD')
+// const serviceName = ref('af-revenue')
 
 // 资源权限测试
 // const configName = ref('crud_sources_test')
@@ -49,11 +56,11 @@ const serviceName = ref('af-gaslink')
 function toDetail(item) {
   router.push({
     name: 'XFormGroupView',
-    query: {
-      id: item[idKey.value],
-      // id: item.rr_id,
-      // o_id: item.o_id,
-    },
+    // query: {
+    //   id: item[idKey.value],
+    // id: item.rr_id,
+    // o_id: item.o_id,
+    // },
   })
 }
 
@@ -69,19 +76,35 @@ function toDetail(item) {
 //     },
 //   })
 // }
+function addOption() {
+  router.push({
+    name: 'XFormGroupView',
+    // params: { id: totalCount.value },
+    // query: {
+    //   configName: configName.value,
+    //   serviceName: serviceName.value,
+    //   mode: '新增',
+    // },
+  })
+  // 如果存在回调函数，调用它并传递true表示已处理
+  // if (typeof callback === 'function') {
+  //   callback(true)
+  // }
+}
 
 // 修改功能
-// 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 updateRow(result) {
+  console.log('用户----', userInfo)
+  router.push({
+    name: 'XFormGroupView',
+    // params: { id: result.o_id, openid: result.o_id },
+    // query: {
+    //   configName: configName.value,
+    //   serviceName: serviceName.value,
+    //   mode: '修改',
+    // },
+  })
+}
 
 // 删除功能
 function deleteRow(result) {
@@ -95,11 +118,25 @@ function deleteRow(result) {
       <XCellList
         :config-name="configName"
         :service-name="serviceName"
-        :fix-query-form="{ o_f_oper_name: 'edu_test' }"
+        :custom-add="true"
+        :custom-edit="true"
         :id-key="idKey"
         @to-detail="toDetail"
         @delete-row="deleteRow"
+        @update="updateRow"
+        @add="addOption"
       />
+
+      <!--      :fix-query-form="{ u_f_price_state: ['生效', '待生效'] }" -->
+
+      <!--      <XCellList -->
+      <!--        :config-name="configName" -->
+      <!--        :service-name="serviceName" -->
+      <!--        :fix-query-form="{ o_f_oper_name: 'edu_test' }" -->
+      <!--        :id-key="idKey" -->
+      <!--        @to-detail="toDetail" -->
+      <!--        @delete-row="deleteRow" -->
+      <!--      /> -->
     </template>
   </NormalDataLayout>
 </template>

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

@@ -100,8 +100,8 @@ function onSubmit(params) {
 }
 function closeWindows() {
   const ua = window.navigator.userAgent.toLowerCase()
-  if (ua.includes('micromessenger') && typeof WeixinJSBridge !== 'undefined') {
-    WeixinJSBridge.call('closeWindow')
+  if (ua.includes('micromessenger') && typeof (window as any).WeixinJSBridge !== 'undefined') {
+    (window as any).WeixinJSBridge.call('closeWindow')
   }
   else {
     // 关闭页面

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)

package/src/views/user/login/LoginForm.vue

@@ -142,7 +142,7 @@ function handleSubmit() {
 }
 function closeWindows() {
   if (isWechat()) {
-    WeixinJSBridge.call('closeWindow')
+    (window as any).WeixinJSBridge.call('closeWindow')
   }
   else {
     // 关闭页面