af-mobile-client-vue3 1.2.27 → 1.2.28

package/CLAUDE.md

@@ -0,0 +1,184 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a Vue 3 mobile client application (`af-mobile-client-vue3`) built as a smart gas system (智慧燃气) mobile application. It serves as a micro-frontend main application with comprehensive business components and dynamic form capabilities.
+
+## Development Commands
+
+```bash
+# Install dependencies
+pnpm install
+
+# Development server (with mock server on port 8086)
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Build for development environment
+pnpm build:dev
+
+# Lint and type checking
+pnpm lint
+
+# Auto-fix linting issues
+pnpm lint:fix
+
+# Type checking only
+pnpm typecheck
+
+# Version release
+pnpm release
+```
+
+## Technology Stack
+
+- **Vue 3** with Composition API and `<script setup>` syntax
+- **TypeScript** for type safety
+- **Vite** as build tool (port 7190)
+- **Vant 4** as primary UI component library
+- **Pinia** for state management with persistence
+- **pnpm** as package manager (requires Node.js >=20.19.0)
+- **UnoCSS** for atomic CSS utilities
+- **@micro-zoe/micro-app** for micro-frontend architecture
+
+## Code Style & Standards
+
+From `.cursorrules`:
+
+- Use Composition API and `<script setup>` syntax
+- Component names: PascalCase (e.g., `UserProfile`)
+- Variables: camelCase (e.g., `userName`)
+- Boolean variables: use `is/has/should` prefix (e.g., `isLoading`)
+- Event handlers: use `handle` prefix (e.g., `handleSubmit`)
+- CSS classes: kebab-case (e.g., `user-profile`)
+- **Must explicitly import Vant components** - auto-import is disabled for this component library project
+- Use `interface` for type definitions, `type` for unions/intersections
+- Props must specify types
+
+## Architecture
+
+### Directory Structure
+
+```
+src/
+├── components/
+│   ├── core/           # Core UI components (NavBar, Tabbar, Uploader)
+│   ├── data/           # Business data components
+│   │   ├── XReportForm/     # Dynamic form with JSON configuration
+│   │   ├── XReportGrid/     # Data grid with reporting
+│   │   ├── XForm/           # General form components
+│   │   └── XOlMap/          # OpenLayers map integration
+│   └── layout/         # Layout components
+├── stores/             # Pinia state management
+├── utils/              # Utility functions
+├── views/              # Page components
+├── router/             # Vue Router configuration
+└── api/               # API layer
+```
+
+### Key Business Components
+
+**XReportForm Component** (`src/components/data/XReportForm/index.vue`):
+
+- Dynamic form generation from JSON configuration
+- Supports field types: `input`, `datePicker`, `timePicker`, `dateTimeSecondsPicker`, `curDateInput`, `signature`, `images`, `inputs`, `inputColumns`
+- Built-in validation with custom error messages
+- Slot-based extensibility for complex layouts
+- Integration with file upload and signature capture
+
+**XReportGrid Component**:
+
+- Data grid with reporting capabilities
+- Print functionality integration
+- Design mode for form configuration
+
+**XOlMap Component**:
+
+- OpenLayers integration for GIS functionality
+- Location picker with coordinate transformation
+
+### State Management
+
+- **Pinia stores** with persistence via `pinia-plugin-persistedstate`
+- **User store**: Authentication, permissions, user data
+- **Settings store**: Application configuration
+- **Route cache store**: Performance optimization
+
+### API Layer
+
+- **Axios-based HTTP client** with interceptors
+- **Request/Response transformers** for v3/v4 API compatibility
+- **Automatic token management** and error handling
+- **Mock server integration** for development
+
+## Development Workflow
+
+### Server Configuration
+
+- Development server runs on port 7190
+- Mock server runs on port 8086
+- Multiple API proxy endpoints configured in `vite.config.ts`
+
+### Build Process
+
+- Code splitting: `third` (node_modules), `views` (business pages)
+- Assets organized in `static/` directory with hashing
+- CSS code splitting disabled for mobile optimization
+- Legacy browser support via `@vitejs/plugin-legacy`
+
+### Git Hooks
+
+- Pre-commit: `pnpm lint-staged` (ESLint auto-fix)
+- Commit message: `pnpm commitlint` (conventional commits)
+
+## Micro-Frontend Integration
+
+This is a main application for micro-frontend architecture:
+
+- Uses `@micro-zoe/micro-app` for micro-app management
+- Child apps register in `microApps.ts`
+- Supports dynamic loading and routing
+- Unmount function available at `window.unmount`
+
+## Mobile-Specific Features
+
+- **@vant/touch-emulator** for desktop development
+- **postcss-mobile-forever** for viewport handling
+- **vite-plugin-pwa** for PWA capabilities
+- **VConsole** for mobile debugging
+- Dark mode support throughout the application
+
+## Common Patterns
+
+### Adding New Field Types to XReportForm
+
+1. Add type to `generateDefaultRequiredMessage()` function
+2. Add case in `formatConfigToForm()` switch statement
+3. Add template section in the component template
+4. Follow existing patterns for validation and data binding
+
+### Component Development
+
+- Use `<script setup lang="ts">` syntax
+- Explicitly import Vant components
+- Define props with TypeScript interfaces
+- Use `defineEmits` for events
+- Follow existing component structure patterns
+
+### API Integration
+
+- Use the existing HTTP client in `src/utils/http/`
+- Follow v3/v4 API patterns established in the codebase
+- Handle errors consistently with existing patterns
+
+## Testing & Quality
+
+- **ESLint** with `@antfu/eslint-config`
+- **TypeScript** strict mode
+- **Vue TSC** for type checking
+- **Commitlint** for commit message standards
+- **Lint-staged** for pre-commit hooks

package/package.json

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

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

@@ -146,6 +146,14 @@ const slots = useSlots()
 // 当前组件实例（不推荐使用，可能会在后续的版本更迭中调整，暂时用来绑定函数的上下文）
 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))))))
+    return '已加载全部内容，如需新增请点击右上角的 + 号'
+  else
+    return '已加载全部内容'
+}
+
 onBeforeMount(() => {
   initComponent()
 })
@@ -584,7 +592,7 @@ defineExpose({
             v-model:loading="loading"
             class="list_main"
             :finished="finished"
-            finished-text="已加载全部内容"
+            :finished-text="finishedBottomText()"
             :immediate-check="isInitQuery"
             @load="onLoad"
           >

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

@@ -1,12 +1,8 @@
 <script setup lang="ts">
 import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
 import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
-import {
-  Button as VanButton,
-  Tab as VanTab,
-  Tabs as VanTabs,
-} from 'vant'
-import { defineEmits, defineProps, onBeforeMount, ref, watch } from 'vue'
+import { Button as VanButton, Tab as VanTab, Tabs as VanTabs } from 'vant'
+import { defineEmits, defineProps, onBeforeMount, onMounted, ref, watch } from 'vue'
 
 const props = withDefaults(defineProps<{
   configName?: string
@@ -34,16 +30,12 @@ const submitGroup = ref(false)
 const submitSimple = ref(false)
 const isInit = ref(false)
 const initStatus = ref(false)
-const propsData = ref({})
+const propsData = ref<Form>({})
 
 // 组件初始化函数
 function init(params: Form) {
   initStatus.value = true
   propsData.value = {
-    // configName: '',
-    // serviceName: undefined,
-    // groupFormData: () => ({}),
-    // mode: '查询',
     configName: props.configName,
     serviceName: props.serviceName,
     groupFormData: props.groupFormData,
@@ -53,7 +45,6 @@ function init(params: Form) {
   formData.value = propsData.value.groupFormData
   getConfigByName(propsData.value.configName, (result) => {
     if (result?.groups) {
-      // submitGroup.value = true
       groupItems.value = result.groups
       result.groups.forEach((group) => {
         if (!formData.value[group.groupName])
@@ -63,7 +54,7 @@ function init(params: Form) {
       })
     }
     else {
-      submitSimple.value = result.showSubmitBtn
+      submitSimple.value = result?.showSubmitBtn
       groupItems.value = [{ ...result }]
     }
     isInit.value = true
@@ -85,24 +76,29 @@ async function submit() {
   emit('submit', formData.value)
 }
 
-// function initXForm(index: number) {
-// 获取自身示例
-// refs[`xFormListRef-${index}`].init({})
-// }
+// 动态计算 offsetTop = var(--van-nav-bar-height) + 10px
+const offsetTop = ref(0)
+onMounted(() => {
+  const root = document.documentElement
+  const navBarHeight = getComputedStyle(root).getPropertyValue('--van-nav-bar-height')
+  offsetTop.value = Number.parseInt(navBarHeight, 10) || 60 + 10
+})
 
 defineExpose({ init })
 </script>
 
 <template>
   <div v-if="isInit" id="x-form-group">
-    <VanTabs scrollspy sticky>
+    <VanTabs scrollspy sticky :offset-top="offsetTop">
       <VanTab
         v-for="(item, index) in groupItems"
         :key="item.groupName ? (item.groupName + index) : index"
         :title="item.describe ? item.describe : item.tableName "
       >
-        <div class="x-form-group-item">
-          <!--          :ref="`xFormListRef-${index}`" -->
+        <div
+          class="x-form-group-item"
+          :class="{ 'is-last': index === groupItems.length - 1 }"
+        >
           <XForm
             ref="xFormListRef"
             :is-group-form="true"
@@ -125,10 +121,23 @@ defineExpose({ init })
 
 <style scoped lang="less">
 #x-form-group {
+  display: flex;
+  flex-direction: column;
   background-color: rgb(247, 248, 250);
-  padding-bottom: 10px;
+  height: calc(100vh - var(--van-nav-bar-height) - 20px);
+  flex: 1;
+  overflow-y: auto;
+  // 让 Tabs 区域自适应剩余空间
+  .van-tabs {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
   .x-form-group-item {
-    margin: 20px 0;
+    margin-bottom: 20px;
   }
 }
+.x-form-group-item.is-last {
+  min-height: calc(100vh - var(--van-nav-bar-height) - 40px);
+}
 </style>

package/src/components/data/XReportForm/DateTimeSecondsPicker.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { Field as vanField, Picker as vanPicker, Popup as vanPopup } from 'vant'
+import { computed, ref, watch } from 'vue'
+
+interface Props {
+  modelValue?: string | number | Date
+  label?: string
+  placeholder?: string
+  title?: string
+  format?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: undefined,
+  label: '选择时间',
+  placeholder: '请选择时间',
+  title: '选择完整时间',
+  format: 'YYYY-MM-DD HH:mm:ss',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'confirm': [value: string]
+}>()
+
+const showPicker = ref(false)
+const columns = ref<any[]>([])
+const selectedValues = ref<string[]>([])
+
+const displayValue = computed(() => {
+  if (props.modelValue) {
+    const date = new Date(props.modelValue)
+    return formatDate(date, props.format)
+  }
+  return ''
+})
+
+watch(() => showPicker.value, (val) => {
+  if (val) {
+    columns.value = []
+    selectedValues.value = []
+    getColumns()
+  }
+}, { immediate: true })
+
+function formatDate(date: Date, format: string): string {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  const seconds = String(date.getSeconds()).padStart(2, '0')
+
+  return format
+    .replace('YYYY', String(year))
+    .replace('YY', String(year).slice(-2))
+    .replace('MM', month)
+    .replace('DD', day)
+    .replace('HH', hours)
+    .replace('mm', minutes)
+    .replace('ss', seconds)
+}
+
+function getColumns() {
+  const strtime = props.modelValue ? String(props.modelValue) : ''
+
+  let dateValues: Date
+  if (strtime) {
+    const date = new Date(strtime.replace(/-/g, '/'))
+    dateValues = date
+  }
+  else {
+    dateValues = new Date()
+  }
+
+  const Y = dateValues.getFullYear()
+  const M = dateValues.getMonth()
+  const D = dateValues.getDate()
+  const h = dateValues.getHours()
+  const m = dateValues.getMinutes()
+  const s = dateValues.getSeconds()
+
+  // 生成年份列 (前后10年)
+  const year: any[] = []
+  const currentYear = new Date().getFullYear()
+  for (let i = currentYear - 10; i < currentYear + 10; i++) {
+    year.push({ text: i.toString(), value: i.toString() })
+  }
+
+  // 生成月份列 (01-12)
+  const month: any[] = []
+  for (let i = 1; i <= 12; i++) {
+    const monthStr = i.toString().padStart(2, '0')
+    month.push({ text: monthStr, value: monthStr })
+  }
+
+  // 生成日期列 (01-31，根据当前年月动态计算)
+  const daysInMonth = getCountDays(Y, M + 1)
+  const day: any[] = []
+  for (let i = 1; i <= daysInMonth; i++) {
+    const dayStr = i.toString().padStart(2, '0')
+    day.push({ text: dayStr, value: dayStr })
+  }
+
+  // 生成小时列 (00-23)
+  const hour: any[] = []
+  for (let i = 0; i < 24; i++) {
+    const hourStr = i.toString().padStart(2, '0')
+    hour.push({ text: hourStr, value: hourStr })
+  }
+
+  // 生成分钟列 (00-59)
+  const minute: any[] = []
+  for (let i = 0; i < 60; i++) {
+    const minuteStr = i.toString().padStart(2, '0')
+    minute.push({ text: minuteStr, value: minuteStr })
+  }
+
+  // 生成秒钟列 (00-59)
+  const second: any[] = []
+  for (let i = 0; i < 60; i++) {
+    const secondStr = i.toString().padStart(2, '0')
+    second.push({ text: secondStr, value: secondStr })
+  }
+
+  columns.value = [year, month, day, hour, minute, second]
+
+  // 设置默认选中值
+  const _M = (M + 1).toString().padStart(2, '0')
+  const _D = D.toString().padStart(2, '0')
+  const _h = h.toString().padStart(2, '0')
+  const _m = m.toString().padStart(2, '0')
+  const _s = s.toString().padStart(2, '0')
+
+  selectedValues.value = [Y.toString(), _M, _D, _h, _m, _s]
+}
+
+function getCountDays(year: number, month: number): number {
+  const day = new Date(year, month, 0)
+  return day.getDate()
+}
+
+function onChange() {
+  // 当年月发生变化时，重新计算日期列
+  if (selectedValues.value.length >= 2) {
+    const year = Number.parseInt(selectedValues.value[0])
+    const month = Number.parseInt(selectedValues.value[1])
+    const currentDay = Number.parseInt(selectedValues.value[2])
+
+    const daysInMonth = getCountDays(year, month)
+
+    // 重新生成日期列
+    const dayColumn: any[] = []
+    for (let i = 1; i <= daysInMonth; i++) {
+      const dayStr = i.toString().padStart(2, '0')
+      dayColumn.push({ text: dayStr, value: dayStr })
+    }
+
+    // 如果当前选中的日期超过了新月份的最大天数，调整为最大天数
+    if (currentDay > daysInMonth) {
+      selectedValues.value[2] = daysInMonth.toString().padStart(2, '0')
+    }
+
+    // 更新列
+    columns.value[2] = dayColumn
+  }
+}
+
+function onCancel() {
+  showPicker.value = false
+}
+
+function onConfirm() {
+  const endval = `${selectedValues.value[0]}-${selectedValues.value[1]}-${selectedValues.value[2]} ${selectedValues.value[3]}:${selectedValues.value[4]}:${selectedValues.value[5]}`
+
+  emit('update:modelValue', endval)
+  emit('confirm', endval)
+  showPicker.value = false
+}
+</script>
+
+<template>
+  <div>
+    <van-field
+      v-model="displayValue"
+      :label="label"
+      :placeholder="placeholder"
+      readonly
+      is-link
+      @click="showPicker = true"
+    />
+
+    <van-popup v-model:show="showPicker" position="bottom" round @close="onCancel">
+      <van-picker
+        v-model="selectedValues"
+        :title="title"
+        :columns="columns"
+        @change="onChange"
+        @cancel="onCancel"
+        @confirm="onConfirm"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<style scoped>
+/* 可以根据需要添加自定义样式 */
+</style>

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import Uploader from '@af-mobile-client-vue3/components/core/Uploader/index.vue'
+import DateTimeSecondsPicker from '@af-mobile-client-vue3/components/data/XReportForm/DateTimeSecondsPicker.vue'
 import XReportFormJsonRender from '@af-mobile-client-vue3/components/data/XReportForm/XReportFormJsonRender.vue'
 import XSignature from '@af-mobile-client-vue3/components/data/XSignature/index.vue'
 import { getConfigByNameWithoutIndexedDB } from '@af-mobile-client-vue3/services/api/common'
 import {
   showFailToast,
-  Toast,
   Button as vanButton,
   Cell as vanCell,
   CellGroup as vanCellGroup,
@@ -17,9 +17,7 @@ import {
   Skeleton as vanSkeleton,
 } from 'vant'
 import { defineEmits, nextTick, reactive, ref, watch } from 'vue'
-// https://calendar.hxkj.vip/
-import VueHashCalendar from 'vue3-hash-calendar'
-import 'vue3-hash-calendar/es/index.css'
+// 移除 VueHashCalendar，使用自定义的 DateTimeSecondsPicker
 
 // -------------------------  类型定义  -------------------------
 interface configDefine {
@@ -66,12 +64,6 @@ let timer: NodeJS.Timeout
 const scanFinish = ref(false)
 // 折叠面板当前激活的值
 const activeCollapseName = ref('副标题')
-// 日期选择器显示状态
-const showDatePicker = ref(false)
-const showTimePicker = ref(false)
-// 当前操作的日期时间字段
-const currentDateField = ref('')
-const currentTimeField = ref('')
 
 watch(() => props.configName, () => {
   // 这里是你的处理逻辑
@@ -128,6 +120,8 @@ function generateDefaultRequiredMessage(field: any): string {
       return `请选择${label || '日期'}`
     case 'timePicker':
       return `请选择${label || '时间'}`
+    case 'dateTimeSecondsPicker':
+      return `请选择${label || '完整时间'}`
     case 'curDateInput':
       return `请设置${label || '时间'}`
     case 'signature':
@@ -564,6 +558,12 @@ function formatConfigToForm(config: configDefine): void {
           tempObj.type = 'timePicker'
           tempObj.required = row[j].required
           break
+        case 'dateTimeSecondsPicker' :
+          tempObj.dataIndex = row[j].dataIndex
+          tempObj.text = row[j].text
+          tempObj.type = 'dateTimeSecondsPicker'
+          tempObj.required = row[j].required
+          break
         case 'signature' :
           tempObj.dataIndex = row[j].dataIndex
           tempObj.text = row[j].text
@@ -855,45 +855,7 @@ function getNow() {
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
 }
 
-// 打开日期选择器
-function openDatePicker(dataIndex: string) {
-  console.log('打开日期选择器:', dataIndex)
-  currentDateField.value = dataIndex
-  showDatePicker.value = true
-  console.log('日期选择器状态:', showDatePicker.value)
-}
-
-// 打开时间选择器
-function openTimePicker(dataIndex: string) {
-  console.log('打开时间选择器:', dataIndex)
-  currentTimeField.value = dataIndex
-  showTimePicker.value = true
-  console.log('时间选择器状态:', showTimePicker.value)
-}
-
-// 确认选择日期
-function onConfirmDate(value: any) {
-  console.log('onConfirmDate', value)
-  activatedConfig.data[currentDateField.value] = value
-  showDatePicker.value = false
-  currentDateField.value = ''
-}
-
-// 确认选择时间
-function onConfirmTime(value: any) {
-  console.log('onConfirmTime', value)
-  activatedConfig.data[currentTimeField.value] = value
-  showTimePicker.value = false
-  currentTimeField.value = ''
-}
-
-// 取消选择
-function onCancelPicker() {
-  showDatePicker.value = false
-  showTimePicker.value = false
-  currentDateField.value = ''
-  currentTimeField.value = ''
-}
+// 移除了旧的日期时间选择器相关方法，现在使用 DateTimeSecondsPicker 组件
 </script>
 
 <template>
@@ -913,46 +875,46 @@ function onCancelPicker() {
       <!--  标题  -->
       <h2 v-if="activatedConfig.title" class="title" v-html="activatedConfig.title" />
       <!--  副标题  -->
-      <div v-if="activatedConfig.subTitle && activatedConfig.subTitle.length > 0" class="form_item">
-        <van-collapse v-model="activeCollapseName" accordion>
-          <van-collapse-item title="副标题" name="副标题">
-            <van-form>
-              <van-cell-group inset>
-                <template v-for="(subCell, cellIndex) in activatedConfig.subTitle" :key="cellIndex">
-                  <template v-if="subCell.type === 'inputs'">
-                    <template v-for="(item, itemIndex) in formatInputs(subCell)" :key="itemIndex">
-                      <van-field
-                        v-model="activatedConfig.data[subCell.dataIndex][itemIndex]"
-                        :label="`${item}:`"
-                        clearable
-                        type="textarea"
-                        rows="1"
-                        autosize
-                        :placeholder="`请输入${item}`"
-                      />
-                    </template>
-                  </template>
-                  <template v-else>
-                    <van-field
-                      v-model="activatedConfig.data[subCell.dataIndex]"
-                      :label="`${subCell.format}:`"
-                      clearable
-                      type="textarea"
-                      rows="1"
-                      autosize
-                      :placeholder="`请输入${subCell.format}`"
-                    />
-                  </template>
-                </template>
-              </van-cell-group>
-            </van-form>
-          </van-collapse-item>
-        </van-collapse>
-      </div>
+      <!--      <div v-if="activatedConfig.subTitle && activatedConfig.subTitle.length > 0" class="form_item"> -->
+      <!--        <van-collapse v-model="activeCollapseName" accordion> -->
+      <!--          <van-collapse-item title="副标题" name="副标题"> -->
+      <!--            <van-form> -->
+      <!--              <van-cell-group inset> -->
+      <!--                <template v-for="(subCell, cellIndex) in activatedConfig.subTitle" :key="cellIndex"> -->
+      <!--                  <template v-if="subCell.type === 'inputs'"> -->
+      <!--                    <template v-for="(item, itemIndex) in formatInputs(subCell)" :key="itemIndex"> -->
+      <!--                      <van-field -->
+      <!--                        v-model="activatedConfig.data[subCell.dataIndex][itemIndex]" -->
+      <!--                        :label="`${item}:`" -->
+      <!--                        clearable -->
+      <!--                        type="textarea" -->
+      <!--                        rows="1" -->
+      <!--                        autosize -->
+      <!--                        :placeholder="`请输入${item}`" -->
+      <!--                      /> -->
+      <!--                    </template> -->
+      <!--                  </template> -->
+      <!--                  <template v-else> -->
+      <!--                    <van-field -->
+      <!--                      v-model="activatedConfig.data[subCell.dataIndex]" -->
+      <!--                      :label="`${subCell.format}:`" -->
+      <!--                      clearable -->
+      <!--                      type="textarea" -->
+      <!--                      rows="1" -->
+      <!--                      autosize -->
+      <!--                      :placeholder="`请输入${subCell.format}`" -->
+      <!--                    /> -->
+      <!--                  </template> -->
+      <!--                </template> -->
+      <!--              </van-cell-group> -->
+      <!--            </van-form> -->
+      <!--          </van-collapse-item> -->
+      <!--        </van-collapse> -->
+      <!--      </div> -->
       <!--  表单项  -->
       <div class="form_item">
         <van-collapse v-model="activeCollapseName" accordion>
-          <van-collapse-item title="表单项" name="表单项">
+          <van-collapse-item title="操作卡内容" name="操作卡内容">
             <van-form>
               <template v-for="(row, index) in activatedConfig.columns" :key="index">
                 <!--     value属性      -->
@@ -1020,7 +982,7 @@ function onCancelPicker() {
                         {{ row.valueText || '当前时间' }}
                       </div>
                       <div class="cur-date-input-value">
-                        {{ activatedConfig.data[row.dataIndex] || '未设置' }}
+                        {{ activatedConfig.data[row.dataIndex] || '未操作' }}
                       </div>
                     </div>
                     <div class="cur-date-input-action">
@@ -1058,22 +1020,32 @@ function onCancelPicker() {
                 </van-cell-group>
                 <!--     datePicker      -->
                 <van-cell-group v-else-if="row.type === 'datePicker'" inset :title="row.label" :class="{ 'required-field': row.required }">
-                  <van-field
+                  <DateTimeSecondsPicker
                     v-model="activatedConfig.data[row.dataIndex]"
                     :label="`${row.label || '日期'}:`"
                     placeholder="请选择日期"
-                    readonly
-                    @click="openDatePicker(row.dataIndex)"
+                    title="选择日期"
+                    format="YYYY-MM-DD"
                   />
                 </van-cell-group>
                 <!--     timePicker      -->
                 <van-cell-group v-else-if="row.type === 'timePicker'" inset :title="row.label" :class="{ 'required-field': row.required }">
-                  <van-field
+                  <DateTimeSecondsPicker
                     v-model="activatedConfig.data[row.dataIndex]"
                     :label="`${row.label || '时间'}:`"
                     placeholder="请选择时间"
-                    readonly
-                    @click="openTimePicker(row.dataIndex)"
+                    title="选择时间"
+                    format="YYYY-MM-DD HH:mm:ss"
+                  />
+                </van-cell-group>
+                <!--     dateTimeSecondsPicker      -->
+                <van-cell-group v-else-if="row.type === 'dateTimeSecondsPicker'" inset :title="row.label" :class="{ 'required-field': row.required }">
+                  <DateTimeSecondsPicker
+                    v-model="activatedConfig.data[row.dataIndex]"
+                    :label="`${row.label || '完整时间'}:`"
+                    placeholder="请选择完整时间"
+                    title="选择完整时间"
+                    format="YYYY-MM-DD HH:mm:ss"
                   />
                 </van-cell-group>
                 <!--     inputs      -->
@@ -1235,31 +1207,29 @@ function onCancelPicker() {
     <van-skeleton title :row="5" />
   </div>
 
-  <!-- 日期选择器弹窗 -->
-  <VueHashCalendar v-model:visible="showDatePicker" format="YY-MM-DD" model="dialog" picker-type="date" @confirm="onConfirmDate" />
-  <VueHashCalendar v-model:visible="showTimePicker" format="YY-MM-DD hh:mm:ss" picker-type="datetime" model="dialog" @confirm="onConfirmTime" />
+  <!-- 已移除 VueHashCalendar，现在使用内置的 DateTimeSecondsPicker 组件 -->
 </template>
 
 <style scoped lang="less">
-.main{
+.main {
   padding-top: 4vh;
   width: 100vw;
   height: 100vh;
   background-color: #eff2f5;
 
-  .title{
+  .title {
     padding-bottom: 2vh;
     color: rgb(50, 50, 51);
     text-align: center;
     margin: 0 0 3vh;
   }
 
-  .text_box{
+  .text_box {
     margin-top: 2vh;
     margin-bottom: 2vh;
   }
 
-  .main_text{
+  .main_text {
     padding-left: 16px;
     font-weight: 400;
     line-height: 1.6;
@@ -1268,53 +1238,53 @@ function onCancelPicker() {
     font-size: 14px;
   }
 
-  .show_value_item{
+  .show_value_item {
     text-align: center;
     font-size: 1.2em;
   }
 
-  .cell_group{
+  .cell_group {
     //margin-top: 2vh;
     //margin-bottom: 2vh;
   }
 
-  .form_item{
+  .form_item {
     margin-top: 2vh;
   }
 
-  .button_group{
+  .button_group {
     text-align: center;
     margin-top: 3vh;
     margin-bottom: 3vh;
   }
 
-  .button_group>:first-child {
+  .button_group > :first-child {
     margin-right: 3vw;
   }
 
-  .divider{
+  .divider {
     color: #1989fa;
     border-color: #1989fa;
-    padding: 0 16px
+    padding: 0 16px;
   }
 
-  .submit_button{
+  .submit_button {
     background-color: #eff2f5;
     padding: 5vh;
   }
 }
 
-.skeleton{
-  margin-top: 5vh
+.skeleton {
+  margin-top: 5vh;
 }
-.my-cell-group{
-  margin: 0 0 10px 0
+.my-cell-group {
+  margin: 0 0 10px 0;
 }
 :deep(.van-collapse-item__content) {
   background-color: #eff2f5;
   padding: 10px 0;
 }
-:deep(.van-cell-group__title){
+:deep(.van-cell-group__title) {
   padding-top: 10px;
   padding-bottom: 10px;
 }
@@ -1325,7 +1295,7 @@ function onCancelPicker() {
 // 必填字段星号样式 - 只对星号生效
 :deep(.van-field__label) {
   // 将包含星号的文本进行特殊处理
-  &[style*="color"] {
+  &[style*='color'] {
     color: #323233 !important;
   }
 }
@@ -1340,7 +1310,7 @@ function onCancelPicker() {
     margin-right: 2px;
   }
 }
-:deep(.van-uploader__wrapper){
+:deep(.van-uploader__wrapper) {
   padding: 10px;
   display: flex;
   flex-wrap: wrap;
@@ -1371,7 +1341,7 @@ function onCancelPicker() {
       word-wrap: break-word;
       white-space: normal;
       display: -webkit-box;
-      -webkit-line-clamp: 2; // 最多显示2行
+      -webkit-line-clamp: 4; // 最多显示2行
       -webkit-box-orient: vertical;
       overflow: hidden;
     }

package/src/styles/app.less

@@ -29,3 +29,8 @@ html.dark {
 .van-tabbar--fixed {
   position: fixed !important;
 }
+
+// 所有按钮 添加圆角
+.van-button {
+  border-radius: 10px !important;
+}

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

@@ -6,9 +6,16 @@ import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 // 纯表单
-const configName = ref('ApplyAddContractFormGroup')
+const configName = ref('testFormGroup')
 const serviceName = ref('af-apply')
 
+// 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>