af-mobile-client-vue3 1.1.9 → 1.1.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "description": "Vue + Vite component lib",
   "license": "MIT",
   "engines": {

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

@@ -145,88 +145,91 @@ const showFormItemFunc = debounce(async () => {
   }
 }, 500)
 
-const localValue = computed({
-  get() {
-    switch (attr.type) {
-      case 'uploader':
-        if (mode === '查询') {
-          return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
-        }
-        else {
-          return props.modelValue !== undefined ? props.modelValue : formSelectDefaultValue.value
-        }
-      case 'switch':
-        return props.modelValue !== undefined ? props.modelValue : false
-      case 'checkbox':
-      case 'file':
-      case 'image':
-      case 'timePicker':
-      case 'datePicker':
-        if (mode === '查询') {
-          // console.log(querySelectDefaultValue.value)
-          return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
-        }
-        else {
-          // console.log(formSelectDefaultValue.value)
-          return props.modelValue !== undefined ? props.modelValue : formSelectDefaultValue.value
-        }
-      // case 'datePicker':
-      //   if (mode === '查询') {
-      //     // console.log(querySelectDefaultValue.value)
-      //     return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
-      //   }
-      //   else {
-      //     if (props.modelValue !== undefined) {
-      //       // 拆分日期和时间
-      //       const [dateStr, timeStr] = props.modelValue.split(' ')
-      //       // 拆分日期部分
-      //       const date = dateStr.split('-')
-      //       // 拆分时间部分
-      //       const time = timeStr.split(':')
-      //       // 赋值给 dateTimePickerValue
-      //       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      //       dateTimePickerValue.value = {
-      //         date,
-      //         time,
-      //       }
-      //       return dateTimePickerValue.value
-      //     }
-      //     return formSelectDefaultValue.value
-      //   }
-      case 'radio':
-      case 'rate':
-      case 'slider':
-      case 'area':
-      case 'citySelect':
-      case 'calendar':
-      case 'textarea':
-      case 'intervalPicker':
-      case 'input':
-      case 'select':
-        if (mode === '查询')
-          return props.modelValue !== undefined ? props.modelValue : queryInputDefaultValue.value
-        else
-          return props.modelValue !== undefined ? props.modelValue : formInputDefaultValue.value
-      case 'stepper':
-        return props.modelValue !== undefined ? props.modelValue : 1
-      case 'rangePicker':
-        if (props.modelValue && Array.isArray(props.modelValue) && props.modelValue.length > 1)
-          return `${props.modelValue[0]} ~ ${props.modelValue[1]}`
-
-        else
-          return props.modelValue
-      case 'addressSearch':
+// 获取默认值的函数
+function getDefaultValue() {
+  switch (attr.type) {
+    case 'uploader':
+    case 'checkbox':
+    case 'file':
+    case 'image':
+    case 'timePicker':
+    case 'datePicker':
+      if (mode === '查询')
+        return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
+      else
+        return props.modelValue !== undefined ? props.modelValue : formSelectDefaultValue.value
+    case 'switch':
+      return props.modelValue !== undefined ? props.modelValue : false
+    case 'radio':
+    case 'rate':
+    case 'slider':
+    case 'area':
+    case 'citySelect':
+    case 'calendar':
+    case 'textarea':
+    case 'intervalPicker':
+    case 'input':
+    case 'select':
+      if (mode === '查询')
+        return props.modelValue !== undefined ? props.modelValue : queryInputDefaultValue.value
+      else
+        return props.modelValue !== undefined ? props.modelValue : formInputDefaultValue.value
+    case 'stepper':
+      return props.modelValue !== undefined ? props.modelValue : 1
+    case 'rangePicker':
+      if (props.modelValue && Array.isArray(props.modelValue) && props.modelValue.length > 1)
+        return `${props.modelValue[0]} ~ ${props.modelValue[1]}`
+      else
         return props.modelValue
-      default:
-        return undefined
-    }
-  },
-  set(newValue) {
-    emits('update:modelValue', newValue)
-    dataChangeFunc()
-  },
+    case 'addressSearch':
+      return props.modelValue
+    default:
+      return undefined
+  }
+}
+
+// 改用 ref，并设置初始值
+const localValue = ref(getDefaultValue())
+
+// 监听 props.modelValue 的变化
+watch(() => props.modelValue, (newVal) => {
+  // 如果是文件上传类型，需要特殊处理
+  if (attr.type === 'image' || attr.type === 'file') {
+    localValue.value = Array.isArray(newVal) ? newVal : []
+  }
+  else {
+    localValue.value = newVal !== undefined ? newVal : getDefaultValue()
+  }
 })
 
+// 监听 localValue 的变化
+watch(localValue, (newVal) => {
+  if (attr.type === 'image' || attr.type === 'file') {
+    // 确保上传组件的值始终是数组
+    const value = Array.isArray(newVal) ? newVal : []
+    emits('update:modelValue', value)
+  }
+  else {
+    emits('update:modelValue', newVal)
+  }
+  dataChangeFunc()
+})
+
+function updateFile(files, _index) {
+  // 处理文件数据
+  // 更新本地值
+  localValue.value = files.map((file) => {
+    const newFile = { ...file }
+    if (newFile.content)
+      delete newFile.content
+    if (newFile.file)
+      delete newFile.file
+    if (newFile.objectUrl)
+      delete newFile.objectUrl
+    return newFile
+  })
+}
+
 // 表单校验的类型校验
 function formTypeCheck(attr, value) {
   switch (attr.rule.type) {
@@ -553,30 +556,6 @@ function onAreaConfirm({ selectedOptions }) {
   }])
 }
 
-function updateFile(files, _index) {
-  files.forEach((file) => {
-    if (file.content)
-      delete file.content
-    if (file.file)
-      delete file.file
-    if (file.objectUrl)
-      delete file.objectUrl
-  })
-  localValue.value = files
-  emits('update:modelValue', localValue.value)
-}
-// 监听表单发生变化后触发展示函数
-watch(() => form, (_oldVal, _newVal) => {
-  showFormItemFunc()
-  // 数据源来自人员联动时更新数据
-  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动人员'))
-    debouncedUserLinkFunc()
-
-  // 数据源来自部门联动时更新数据
-  if (attr?.keyName?.toString()?.startsWith('search@根据表单项[') && attr?.keyName?.toString().endsWith(']联动部门'))
-    debouncedDepLinkFunc()
-}, { deep: true })
-
 function onDateTimePickerConfirm() {
   showDatePicker.value = false
   const dateStr = dateTimePickerValue.value.date.join('-')

package/src/components/data/XOlMap/utils/wgs84ToGcj02.js

@@ -1,154 +1,154 @@
-// 导入proj控件
-import * as proj from 'ol/proj'
-
-function forEachPoint(func) {
-  return function (input, opt_output, opt_dimension) {
-    const len = input.length
-
-    const dimension = opt_dimension || 2
-    let output
-
-    if (opt_output) {
-      output = opt_output
-    }
-    else {
-      if (dimension !== 2) {
-        output = input.slice()
-      }
-      else {
-        output = [len]
-      }
-    }
-    for (let offset = 0; offset < len; offset += dimension) {
-      func(input, output, offset)
-    }
-    return output
-  }
-}
-
-const gcj02 = {}
-const PI = Math.PI
-const AXIS = 6378245.0
-// eslint-disable-next-line no-loss-of-precision
-const OFFSET = 0.00669342162296594323 // (a^2 - b^2) / a^2
-
-function delta(wgLon, wgLat) {
-  let dLat = transformLat(wgLon - 105.0, wgLat - 35.0)
-  let dLon = transformLon(wgLon - 105.0, wgLat - 35.0)
-  const radLat = (wgLat / 180.0) * PI
-  let magic = Math.sin(radLat)
-  magic = 1 - OFFSET * magic * magic
-  const sqrtMagic = Math.sqrt(magic)
-  dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI)
-  dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI)
-  return [dLon, dLat]
-}
-
-function outOfChina(lon, lat) {
-  if (lon < 72.004 || lon > 137.8347) {
-    return true
-  }
-  return lat < 0.8293 || lat > 55.8271
-}
-
-function transformLat(x, y) {
-  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
-  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
-  ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0
-  ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0
-  return ret
-}
-
-function transformLon(x, y) {
-  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
-  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
-  ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0
-  ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0
-  return ret
-}
-
-gcj02.toWGS84 = forEachPoint((input, output, offset) => {
-  let lng = input[offset]
-  let lat = input[offset + 1]
-  if (!outOfChina(lng, lat)) {
-    const deltaD = delta(lng, lat)
-    lng = lng - deltaD[0] // 改回减法
-    lat = lat - deltaD[1] // 改回减法
-  }
-  output[offset] = lng
-  output[offset + 1] = lat
-})
-
-gcj02.fromWGS84 = forEachPoint((input, output, offset) => {
-  let lng = input[offset]
-  let lat = input[offset + 1]
-  if (!outOfChina(lng, lat)) {
-    const deltaD = delta(lng, lat)
-    lng = lng + deltaD[0] // 改回加法
-    lat = lat + deltaD[1] // 改回加法
-  }
-  output[offset] = lng
-  output[offset + 1] = lat
-})
-
-const sphericalMercator = {}
-const RADIUS = 6378137
-const MAX_LATITUDE = 85.0511287798
-const RAD_PER_DEG = Math.PI / 180
-
-sphericalMercator.forward = forEachPoint((input, output, offset) => {
-  const lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE)
-  const sin = Math.sin(lat * RAD_PER_DEG)
-  output[offset] = RADIUS * input[offset] * RAD_PER_DEG
-  output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2
-})
-
-sphericalMercator.inverse = forEachPoint((input, output, offset) => {
-  output[offset] = input[offset] / RADIUS / RAD_PER_DEG
-  output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG
-})
-
-const projzh = {}
-
-projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
-  const output = gcj02.toWGS84(input, opt_output, opt_dimension) // 改用 toWGS84
-  return projzh.ll2smerc(output, output, opt_dimension)
-}
-
-projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
-  const output = projzh.smerc2ll(input, input, opt_dimension)
-  return gcj02.fromWGS84(output, opt_output, opt_dimension) // 改用 fromWGS84
-}
-
-// smerc2gmerc 需要修改
-
-projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
-  let output = projzh.smerc2ll(input, input, opt_dimension)
-  output = gcj02.toWGS84(output, output, opt_dimension) // 这里应该用 toWGS84
-  return projzh.ll2smerc(output, output, opt_dimension)
-}
-
-// gmerc2smerc 需要修改
-
-projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
-  let output = projzh.smerc2ll(input, input, opt_dimension)
-  output = gcj02.fromWGS84(output, output, opt_dimension) // 这里应该用 fromWGS84
-  return projzh.ll2smerc(output, output, opt_dimension)
-}
-
-projzh.ll2smerc = sphericalMercator.forward
-projzh.smerc2ll = sphericalMercator.inverse
-
-// 定义WGS84转GCJ02的投影
-const extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
-export const wgs84ToGcj02Projection = new proj.Projection({
-  code: 'WGS84-TO-GCJ02',
-  extent,
-  units: 'm',
-})
-
-// 添加投影和转换方法
-proj.addProjection(wgs84ToGcj02Projection)
-// 注意这里转换方法的顺序与原来相反
-proj.addCoordinateTransforms('EPSG:4326', wgs84ToGcj02Projection, projzh.ll2gmerc, projzh.gmerc2ll)
-proj.addCoordinateTransforms('EPSG:3857', wgs84ToGcj02Projection, projzh.smerc2gmerc, projzh.gmerc2smerc)
+// 导入proj控件
+import * as proj from 'ol/proj'
+
+function forEachPoint(func) {
+  return function (input, opt_output, opt_dimension) {
+    const len = input.length
+
+    const dimension = opt_dimension || 2
+    let output
+
+    if (opt_output) {
+      output = opt_output
+    }
+    else {
+      if (dimension !== 2) {
+        output = input.slice()
+      }
+      else {
+        output = [len]
+      }
+    }
+    for (let offset = 0; offset < len; offset += dimension) {
+      func(input, output, offset)
+    }
+    return output
+  }
+}
+
+const gcj02 = {}
+const PI = Math.PI
+const AXIS = 6378245.0
+// eslint-disable-next-line no-loss-of-precision
+const OFFSET = 0.00669342162296594323 // (a^2 - b^2) / a^2
+
+function delta(wgLon, wgLat) {
+  let dLat = transformLat(wgLon - 105.0, wgLat - 35.0)
+  let dLon = transformLon(wgLon - 105.0, wgLat - 35.0)
+  const radLat = (wgLat / 180.0) * PI
+  let magic = Math.sin(radLat)
+  magic = 1 - OFFSET * magic * magic
+  const sqrtMagic = Math.sqrt(magic)
+  dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI)
+  dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI)
+  return [dLon, dLat]
+}
+
+function outOfChina(lon, lat) {
+  if (lon < 72.004 || lon > 137.8347) {
+    return true
+  }
+  return lat < 0.8293 || lat > 55.8271
+}
+
+function transformLat(x, y) {
+  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
+  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
+  ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0
+  ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0
+  return ret
+}
+
+function transformLon(x, y) {
+  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
+  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
+  ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0
+  ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0
+  return ret
+}
+
+gcj02.toWGS84 = forEachPoint((input, output, offset) => {
+  let lng = input[offset]
+  let lat = input[offset + 1]
+  if (!outOfChina(lng, lat)) {
+    const deltaD = delta(lng, lat)
+    lng = lng - deltaD[0] // 改回减法
+    lat = lat - deltaD[1] // 改回减法
+  }
+  output[offset] = lng
+  output[offset + 1] = lat
+})
+
+gcj02.fromWGS84 = forEachPoint((input, output, offset) => {
+  let lng = input[offset]
+  let lat = input[offset + 1]
+  if (!outOfChina(lng, lat)) {
+    const deltaD = delta(lng, lat)
+    lng = lng + deltaD[0] // 改回加法
+    lat = lat + deltaD[1] // 改回加法
+  }
+  output[offset] = lng
+  output[offset + 1] = lat
+})
+
+const sphericalMercator = {}
+const RADIUS = 6378137
+const MAX_LATITUDE = 85.0511287798
+const RAD_PER_DEG = Math.PI / 180
+
+sphericalMercator.forward = forEachPoint((input, output, offset) => {
+  const lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE)
+  const sin = Math.sin(lat * RAD_PER_DEG)
+  output[offset] = RADIUS * input[offset] * RAD_PER_DEG
+  output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2
+})
+
+sphericalMercator.inverse = forEachPoint((input, output, offset) => {
+  output[offset] = input[offset] / RADIUS / RAD_PER_DEG
+  output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG
+})
+
+const projzh = {}
+
+projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
+  const output = gcj02.toWGS84(input, opt_output, opt_dimension) // 改用 toWGS84
+  return projzh.ll2smerc(output, output, opt_dimension)
+}
+
+projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
+  const output = projzh.smerc2ll(input, input, opt_dimension)
+  return gcj02.fromWGS84(output, opt_output, opt_dimension) // 改用 fromWGS84
+}
+
+// smerc2gmerc 需要修改
+
+projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
+  let output = projzh.smerc2ll(input, input, opt_dimension)
+  output = gcj02.toWGS84(output, output, opt_dimension) // 这里应该用 toWGS84
+  return projzh.ll2smerc(output, output, opt_dimension)
+}
+
+// gmerc2smerc 需要修改
+
+projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
+  let output = projzh.smerc2ll(input, input, opt_dimension)
+  output = gcj02.fromWGS84(output, output, opt_dimension) // 这里应该用 fromWGS84
+  return projzh.ll2smerc(output, output, opt_dimension)
+}
+
+projzh.ll2smerc = sphericalMercator.forward
+projzh.smerc2ll = sphericalMercator.inverse
+
+// 定义WGS84转GCJ02的投影
+const extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
+export const wgs84ToGcj02Projection = new proj.Projection({
+  code: 'WGS84-TO-GCJ02',
+  extent,
+  units: 'm',
+})
+
+// 添加投影和转换方法
+proj.addProjection(wgs84ToGcj02Projection)
+// 注意这里转换方法的顺序与原来相反
+proj.addCoordinateTransforms('EPSG:4326', wgs84ToGcj02Projection, projzh.ll2gmerc, projzh.gmerc2ll)
+proj.addCoordinateTransforms('EPSG:3857', wgs84ToGcj02Projection, projzh.smerc2gmerc, projzh.gmerc2smerc)

package/src/layout/PageLayout.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import Tabbar from '@af-mobile-client-vue3/components/core/Tabbar/index.vue'
-import useCachedViewStore from '@af-mobile-client-vue3/stores/modules/cachedView'
+import useRouteCache from '@af-mobile-client-vue3/stores/modules/routeCache'
 import useRouteTransitionNameStore from '@af-mobile-client-vue3/stores/modules/routeTransitionName'
 import { getFunction } from '@af-mobile-client-vue3/utils/common'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
-const cachedViews = computed(() => {
-  return useCachedViewStore().cachedViewList
+const keepAliveRouteNames = computed(() => {
+  return useRouteCache().routeCaches as string[]
 })
-
 const routeTransitionNameStore = useRouteTransitionNameStore()
 const { routeTransitionName } = storeToRefs(routeTransitionNameStore)
 
@@ -32,7 +31,7 @@ const routeState = useRoute()
     <!--  transition 包裹 router-view 控制台会有警告，router-view在外层会导致动画开始时会闪过一帧上一级页面。先忽略警告这样写 -->
     <transition :name="routeTransitionName">
       <router-view v-slot="{ Component, route }">
-        <keep-alive :include="cachedViews">
+        <keep-alive :include="keepAliveRouteNames">
           <div :key="route.name" class="app-wrapper">
             <component :is="Component" />
           </div>

package/src/layout/SingleLayout.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import useCachedViewStore from '@af-mobile-client-vue3/stores/modules/cachedView'
+import useRouteCache from '@af-mobile-client-vue3/stores/modules/routeCache'
 import useRouteTransitionNameStore from '@af-mobile-client-vue3/stores/modules/routeTransitionName'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
-const cachedViews = computed(() => {
-  return useCachedViewStore().cachedViewList
+const keepAliveRouteNames = computed(() => {
+  return useRouteCache().routeCaches as string[]
 })
-
 const routeTransitionNameStore = useRouteTransitionNameStore()
 const { routeTransitionName } = storeToRefs(routeTransitionNameStore)
 </script>
@@ -16,7 +15,7 @@ const { routeTransitionName } = storeToRefs(routeTransitionNameStore)
   <div class="pageLayout">
     <router-view v-slot="{ Component, route }">
       <transition :name="routeTransitionName">
-        <keep-alive :include="cachedViews">
+        <keep-alive :include="keepAliveRouteNames">
           <div :key="route.name" class="app-wrapper">
             <component :is="Component" />
           </div>

package/src/router/index.ts

@@ -1,11 +1,11 @@
 import type { RouteLocationNormalized } from 'vue-router'
 import routes from '@af-mobile-client-vue3/router/routes'
-import useCachedViewStore from '@af-mobile-client-vue3/stores/modules/cachedView'
 import useRouteTransitionNameStore from '@af-mobile-client-vue3/stores/modules/routeTransitionName'
 import setPageTitle from '@af-mobile-client-vue3/utils/set-page-title'
 // https://router.vuejs.org/zh/
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import 'nprogress/nprogress.css'
+import useRouteCache from "@af-mobile-client-vue3/stores/modules/routeCache";
 
 const baseUrl = import.meta.env.VITE_APP_PUBLIC_PATH
 // 创建路由实例并传递 `routes` 配置
@@ -49,7 +49,7 @@ router.beforeEach((to: toRouteType, _from: toRouteType, next) => {
   }
   routeTransitionNameStore.setName(name)
   // 路由缓存
-  useCachedViewStore().addCachedView(to)
+  useRouteCache.addRoute(to)
   // 页面 title
   setPageTitle(to.meta.title)
   next()

package/src/router/types.ts

@@ -0,0 +1,9 @@
+import type { RouteLocationNormalized } from 'vue-router'
+
+export type EnhancedRouteLocation = RouteLocationNormalized & {
+  meta: {
+    level?: number | unknown
+    name?: string
+    keepAlive?: boolean
+  }
+}

package/src/stores/modules/routeCache.ts

@@ -0,0 +1,23 @@
+import type { EnhancedRouteLocation } from '@af-mobile-client-vue3//router/types'
+import type { RouteRecordName } from 'vue-router'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+const useRouteCacheStore = defineStore('route-cache', () => {
+  const routeCaches = ref<RouteRecordName[]>([])
+
+  const addRoute = (route: EnhancedRouteLocation) => {
+    if (routeCaches.value.includes(route.name))
+      return
+
+    if (route?.meta?.keepAlive)
+      routeCaches.value.push(route.name)
+  }
+
+  return {
+    routeCaches,
+    addRoute,
+  }
+})
+
+export default useRouteCacheStore

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

@@ -1,11 +1,92 @@
 <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 { ref } from 'vue'
+import { defineEmits, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+// 定义事件
+const emit = defineEmits(['deleteRow'])
+// 访问路由
+const router = useRouter()
+// 获取默认值
+const idKey = ref('o_id')
 
 // 简易crud表单测试
-const configName = ref('defectDispatchPhoneCRUD')
-const serviceName = ref('af-linepatrol')
+const configName = ref('crud_oper_log_manage')
+const serviceName = ref('af-system')
+
+// 资源权限测试
+// const configName = ref('crud_sources_test')
+// const serviceName = ref('af-system')
+
+// 实际业务测试
+// const configName = ref('lngChargeAuditMobileCRUD')
+// const serviceName = ref('af-gaslink')
+
+// 跳转到详情页面
+// function toDetail(item) {
+//   router.push({
+//     name: 'XCellDetailView',
+//     params: { id: item[idKey.value] }, // 如果使用命名路由，推荐使用路由参数而不是直接构建 URL
+//     query: {
+//       operName: item[operNameKey.value],
+//       method:item[methodKey.value],
+//       requestMethod:item[requestMethodKey.value],
+//       operatorType:item[operatorTypeKey.value],
+//       operUrl:item[operUrlKey.value],
+//       operIp:item[operIpKey.value],
+//       costTime:item[costTimeKey.value],
+//       operTime:item[operTimeKey.value],
+//
+//       title: item[titleKey.value],
+//       businessType: item[businessTypeKey.value],
+//       status:item[statusKey.value]
+//     }
+//   })
+// }
+
+// 跳转到表单——以表单组来渲染纯表单
+function toDetail(item) {
+  router.push({
+    name: 'XFormGroupView',
+    query: {
+      id: item[idKey.value],
+      // id: item.rr_id,
+      // o_id: item.o_id,
+    },
+  })
+}
+
+// 新增功能
+// function addOption(totalCount) {
+//   router.push({
+//     name: 'XFormView',
+//     params: { id: totalCount, openid: totalCount },
+//     query: {
+//       configName: configName.value,
+//       serviceName: serviceName.value,
+//       mode: '新增',
+//     },
+//   })
+// }
+
+// 修改功能
+// 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 deleteRow(result) {
+  emit('deleteRow', result.o_id)
+}
 </script>
 
 <template>
@@ -14,6 +95,10 @@ const serviceName = ref('af-linepatrol')
       <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>

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

@@ -9,6 +9,13 @@ import { useRoute } from 'vue-router'
 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 formData = ref({})
 const formGroup = ref(null)
 const route = useRoute()
@@ -18,6 +25,36 @@ function submit(_result) {
     history.back()
   })
 }
+
+// 表单组——数据
+// function initComponents () {
+//   runLogic('getlngChargeAuditMobileFormGroupData', {id: 29}, 'af-gaslink').then((res) => {
+//     formData.value = {...res}
+//   })
+// }
+
+// 纯表单——数据
+// function initComponents() {
+//   formData.value = { plan_name: 'af-llllll', plan_point: '1号点位', plan_single: '1号点位', plan_range: '2024-12-12' }
+// }
+
+// function initComponents() {
+//   runLogic('getlngChargeAuditMobileFormGroupData', { id: route.query?.id, o_id: route.query?.o_id }, 'af-gaslink').then((res) => {
+//     console.log('res------', res)
+//     formData.value = { ...res }
+// formGroup.value.init({
+//   configName: configName.value,
+//   serviceName: serviceName.value,
+//   groupFormData: { ...res },
+//   mode: "新增"
+// })
+//     isInit.value = true
+//   })
+// }
+
+// onBeforeMount(() => {
+//   initComponents()
+// })
 </script>
 
 <template>

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

@@ -1,44 +1,133 @@
 <script setup lang="ts">
-import XFormGroup from '@af-mobile-client-vue3/components/data/XFormGroup/index.vue'
+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('PointBindingForm')
-const serviceName = ref('af-linepatrol')
-
-const formData = ref({
-  t1_f_number: '点位编号>>',
-  t2_f_name: '所属区域>>',
-  t1_f_address: '地址信息>>',
-  t1_f_address_lon_lat: '118.842054,39.246094',
-  t1_f_describe: '点位描述>>',
-  t1_f_state: '点位状态>>',
+import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
+import { post } from '@af-mobile-client-vue3/services/restTools'
+import {
+  showDialog,
+  NavBar as VanNavBar,
+  Space as VanSpace,
+} from 'vant'
+import { defineEmits, getCurrentInstance, onBeforeMount, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const emit = defineEmits(['onSumbit'])
+const xForm = ref(null)
+const id = ref(-1)
+const openid = ref('')
+const instance = getCurrentInstance()
+const xFormInit = ref(false)
+const route = useRoute()
+const configName = route.query.configName as string
+const serviceName = route.query.serviceName as string
+const mode = route.query.mode as string
+const updateData = ref({})
+const title = ref('')
+const groupFormItems = ref({})
+const api = ref('/af-system/logic/commonQuery')
+const updateId = {
+  queryParamsName: 'crud_oper_log_manage',
+  pageNo: 1,
+  pageSize: 20,
+  conditionParams: { o_id: route.params.id as string },
+}
+const loadUpdate = ref(false)
+// const serviceName = ref('af-revenue')
+const _currentEvaluate = {
+  id: null,
+  f_business_name: '',
+  f_evaluate_state: '',
+}
+
+// 组件挂载前获取数据
+onBeforeMount(async () => {
+  if (instance) {
+    id.value = route.params.id as unknown as number
+    openid.value = route.params.openid as string
+    formInit()
+  }
 })
-const formGroup = ref(null)
-function submit(result) {
-  console.log('>>>> result: ', result)
-  // showDialog({ message: '提交成功' }).then(() => {
-  //   history.back()
+
+// 组件初始化前的判断
+async function formInit() {
+  getConfigByName(configName, (result) => {
+    groupFormItems.value = result
+    title.value = result.title
+    if (mode === '修改')
+      getUpdateData()
+    xFormInit.value = true
+  }, serviceName)
+}
+
+// 获取配置信息
+function queryData() {
+
+}
+
+// 提交操作
+function onSubmit(params) {
+  // const data = {
+  //   id: currentEvaluate.id,
+  //   f_json: params,
+  //   f_evaluate_date: formatDate(new Date()),
+  //   f_evaluate_state: '已评价',
+  //   f_evaluate_type: '用户评价',
+  //   f_evaluate_userid: openid.value,
+  // }
+  // openApiLogic(data, 'saveEvaluate', formServiveName).then((_res: any) => {
+  //     showDialog({ message: '评价成功了' }).then(() => {history.back()})
+  // }).catch(() => {
+  //   showDialog({ message: '评价失败了' })
   // })
+  if (params) {
+    emit('onSumbit', params)
+    showDialog({ message: '评价成功了' }).then(() => {
+      history.back()
+    })
+  }
+  else {
+    showDialog({ message: '评价失败了' }).then(() => {
+      history.back()
+    })
+  }
+}
+
+// 查询需要修改的数据
+async function getUpdateData() {
+  if (api.value && updateId) {
+    const res = await post(api.value, updateId)
+    updateData.value = res.data[0]
+  }
 }
 </script>
 
 <template>
-  <NormalDataLayout id="XFormGroupView" title="纯表单">
+  <NormalDataLayout id="XFormView" title="XForm表单">
     <template #layout_content>
-      <!--      v-if="isInit" -->
-      <XFormGroup
-        ref="formGroup"
-        :config-name="configName"
-        :service-name="serviceName"
-        :group-form-data="formData"
-        mode="新增"
-        @submit="submit"
-      />
+      <VanSpace direction="vertical" fill>
+        <VanNavBar :title="title ? mode.concat(title) : null" />
+        <XForm
+          v-if="xFormInit"
+          ref="xForm"
+          :group-form-items="JSON.parse(JSON.stringify(groupFormItems))"
+          :service-name="serviceName"
+          :form-data="updateData"
+          :mode="mode"
+          style="margin-bottom: 14px;"
+          @on-submit="onSubmit"
+        />
+      </VanSpace>
     </template>
   </NormalDataLayout>
 </template>
 
-<style scoped lang="less">
-
+<style scoped>
+.van-doc-demo-block__title {
+  margin: 0;
+  padding: 32px 16px 16px;
+  color: black;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+}
 </style>

package/src/views/component/XOlMapView/XLocationPicker/index.vue

@@ -1,118 +1,118 @@
-<script setup lang="ts">
-import type { LocationResult } from '@af-mobile-client-vue3/components/data/XOlMap/types'
-import LocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/index.vue'
-import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
-import { showNotify } from 'vant'
-import { ref } from 'vue'
-
-const selectedLocation = ref<LocationResult>()
-
-// 处理位置选择
-function handleLocationConfirm(location: LocationResult) {
-  // console.log('选择的位置:', location)
-  // selectedLocation.value = location
-  showNotify({ type: 'success', message: '位置已选择' })
-}
-</script>
-
-<template>
-  <NormalDataLayout id="XLocationPicker" title="XOlMap地址选择器">
-    <template #layout_content>
-      <div class="location-picker-demo">
-        <!-- 页面标题 -->
-        <div class="page-header">
-          <div class="title">
-            位置选择
-          </div>
-        </div>
-
-        <!-- 选择结果展示 -->
-        <div v-if="selectedLocation" class="location-result">
-          <div class="label">
-            已选位置:
-          </div>
-          <div class="value">
-            {{ selectedLocation.address }}
-          </div>
-          <div class="coordinates">
-            经度: {{ selectedLocation.longitude.toFixed(6) }},
-            纬度: {{ selectedLocation.latitude.toFixed(6) }}
-          </div>
-        </div>
-
-        <!-- 地图组件 -->
-        <div class="map-container">
-          <LocationPicker
-            v-model="selectedLocation"
-            :default-center="[108.948024, 34.263161]"
-            :default-zoom="12"
-            @confirm="handleLocationConfirm"
-          />
-        </div>
-      </div>
-    </template>
-  </NormalDataLayout>
-</template>
-
-<style scoped lang="less">
-.location-picker-demo {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: #f7f8fa;
-}
-
-.page-header {
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: white;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-  position: relative;
-  z-index: 1;
-
-  .title {
-    font-size: 16px;
-    color: #333;
-    font-weight: 500;
-  }
-}
-
-.location-result {
-  background: white;
-  padding: 12px 16px;
-  margin: 10px;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-
-  .label {
-    font-size: 14px;
-    color: #666;
-    margin-bottom: 4px;
-  }
-
-  .value {
-    font-size: 16px;
-    color: #333;
-    margin-bottom: 8px;
-    word-break: break-all;
-  }
-
-  .coordinates {
-    font-size: 12px;
-    color: #999;
-  }
-}
-
-.map-container {
-  flex: 1;
-  position: relative;
-  margin: 0 10px 10px 10px;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-</style>
+<script setup lang="ts">
+import type { LocationResult } from '@af-mobile-client-vue3/components/data/XOlMap/types'
+import LocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/index.vue'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { showNotify } from 'vant'
+import { ref } from 'vue'
+
+const selectedLocation = ref<LocationResult>()
+
+// 处理位置选择
+function handleLocationConfirm(location: LocationResult) {
+  // console.log('选择的位置:', location)
+  // selectedLocation.value = location
+  showNotify({ type: 'success', message: '位置已选择' })
+}
+</script>
+
+<template>
+  <NormalDataLayout id="XLocationPicker" title="XOlMap地址选择器">
+    <template #layout_content>
+      <div class="location-picker-demo">
+        <!-- 页面标题 -->
+        <div class="page-header">
+          <div class="title">
+            位置选择
+          </div>
+        </div>
+
+        <!-- 选择结果展示 -->
+        <div v-if="selectedLocation" class="location-result">
+          <div class="label">
+            已选位置:
+          </div>
+          <div class="value">
+            {{ selectedLocation.address }}
+          </div>
+          <div class="coordinates">
+            经度: {{ selectedLocation.longitude.toFixed(6) }},
+            纬度: {{ selectedLocation.latitude.toFixed(6) }}
+          </div>
+        </div>
+
+        <!-- 地图组件 -->
+        <div class="map-container">
+          <LocationPicker
+            v-model="selectedLocation"
+            :default-center="[108.948024, 34.263161]"
+            :default-zoom="12"
+            @confirm="handleLocationConfirm"
+          />
+        </div>
+      </div>
+    </template>
+  </NormalDataLayout>
+</template>
+
+<style scoped lang="less">
+.location-picker-demo {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: #f7f8fa;
+}
+
+.page-header {
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 1;
+
+  .title {
+    font-size: 16px;
+    color: #333;
+    font-weight: 500;
+  }
+}
+
+.location-result {
+  background: white;
+  padding: 12px 16px;
+  margin: 10px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+  .label {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 4px;
+  }
+
+  .value {
+    font-size: 16px;
+    color: #333;
+    margin-bottom: 8px;
+    word-break: break-all;
+  }
+
+  .coordinates {
+    font-size: 12px;
+    color: #999;
+  }
+}
+
+.map-container {
+  flex: 1;
+  position: relative;
+  margin: 0 10px 10px 10px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+</style>

package/src/stores/modules/cachedView.ts

@@ -1,31 +0,0 @@
-import type { toRouteType } from '@af-mobile-client-vue3/router'
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-
-const useCachedViewStore = defineStore('cached-view', () => {
-  // 缓存页面 keepAlive
-  const cachedViewList = ref([] as string[])
-  const addCachedView = (view: toRouteType) => {
-    // 不重复添加
-    if (cachedViewList.value.includes(view.name as string))
-      return
-    if (!view?.meta?.noCache)
-      cachedViewList.value.push(view.name as string)
-  }
-  const delCachedView = (view: toRouteType) => {
-    const index = cachedViewList.value.indexOf(view.name as string)
-    index > -1 && cachedViewList.value.splice(index, 1)
-  }
-  const delAllCachedViews = () => {
-    cachedViewList.value = [] as string[]
-  }
-
-  return {
-    cachedViewList,
-    addCachedView,
-    delCachedView,
-    delAllCachedViews,
-  }
-})
-
-export default useCachedViewStore

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

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-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 { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
-import { nextTick, onMounted, ref } from 'vue'
-
-const xForm = ref(null)
-const serviceName = 'af-linepatrol'
-
-onMounted(() => {
-  const modifyModelData = {
-    t1_f_number: '点位编号',
-    t2_f_name: '所属区域',
-    t1_f_address: '116.450355,40.057394',
-    t1_f_describe: '点位描述',
-    t1_f_state: '点位状态',
-  }
-  getConfigByName('PointBindingForm', async (res) => {
-    const initData = {
-      formItems: res, // 琉璃配置
-      serviceName, // 服务名称
-      formData: JSON.stringify(modifyModelData), // 数据
-      mode: '修改', // 修改
-    }
-    console.log('>>>> initData: ', JSON.stringify(initData))
-    await nextTick()
-    xForm.value.init(initData)
-  }, 'af-linepatrol')
-})
-
-// 提交操作
-function onSubmit(params) {
-  console.log('>>>> params: ', JSON.stringify(params))
-}
-</script>
-
-<template>
-  <NormalDataLayout id="XFormView" title="XForm表单">
-    <template #layout_content>
-      <XForm
-        ref="xForm"
-        service-name="af-linepatrol"
-        @on-submit="onSubmit"
-      />
-    </template>
-  </NormalDataLayout>
-</template>
-
-<style scoped>
-</style>