af-mobile-client-vue3 1.1.40 → 1.1.41

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

@@ -4,6 +4,8 @@ import XReportFormJsonRender from '@af-mobile-client-vue3/components/data/XRepor
 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,
@@ -15,6 +17,9 @@ 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'
 
 // -------------------------  类型定义  -------------------------
 interface configDefine {
@@ -61,6 +66,12 @@ 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, () => {
   // 这里是你的处理逻辑
@@ -107,8 +118,128 @@ function onClickLeft(): void {
   history.back()
 }
 
+function generateDefaultRequiredMessage(field: any): string {
+  const label = field.label || field.text || field.valueText || ''
+
+  switch (field.type) {
+    case 'input':
+      return `请填写${label || '此项'}`
+    case 'datePicker':
+      return `请选择${label || '日期'}`
+    case 'timePicker':
+      return `请选择${label || '时间'}`
+    case 'curDateInput':
+      return `请设置${label || '时间'}`
+    case 'signature':
+      return `请完成${label || '签名'}`
+    case 'images':
+      return `请上传${label || '图片'}`
+    case 'inputs':
+      return `请完成${label || '此项'}的填写`
+    default:
+      return `请完成${label || '此项'}的填写`
+  }
+}
+
+// 检查字段值是否为空
+function isFieldEmpty(value: any): boolean {
+  if (value === null || value === undefined || value === '') {
+    return true
+  }
+  if (Array.isArray(value) && value.length === 0) {
+    return true
+  }
+  if (typeof value === 'object' && Object.keys(value).length === 0) {
+    return true
+  }
+  return false
+}
+
+// 表单校验
+function validateForm(): boolean {
+  const errors: string[] = []
+
+  // 校验主表单字段
+  activatedConfig.columns.forEach((row: any) => {
+    if (row.required === true) {
+      const dataIndex = row.dataIndex
+      let value
+
+      if (dataIndex.includes('@@@')) {
+        value = activatedConfig.tempData?.[dataIndex]
+      }
+      else {
+        if (row.type === 'images') {
+          value = activatedConfig.data.images?.[dataIndex]
+        }
+        else {
+          value = activatedConfig.data[dataIndex]
+        }
+      }
+
+      if (isFieldEmpty(value)) {
+        const message = row.requiredMessage || generateDefaultRequiredMessage(row)
+        errors.push(message)
+      }
+    }
+
+    // 校验动态行中的字段
+    if (row.type === 'inputColumns' && row.definition) {
+      const dynamicData = activatedConfig.data[row.dataIndex]
+      if (Array.isArray(dynamicData)) {
+        dynamicData.forEach((item: any, index: number) => {
+          row.definition.forEach((def: any) => {
+            if (def.required === true) {
+              const value = item[def.dataIndex]
+              if (isFieldEmpty(value)) {
+                const message = def.requiredMessage || generateDefaultRequiredMessage(def)
+                errors.push(`第${index + 1}行：${message}`)
+              }
+            }
+          })
+        })
+      }
+    }
+  })
+
+  // 校验副标题字段（如果有的话）
+  if (activatedConfig.subTitle) {
+    activatedConfig.subTitle.forEach((subCell: any) => {
+      if (subCell.required === true) {
+        const value = activatedConfig.data[subCell.dataIndex]
+        if (isFieldEmpty(value)) {
+          const message = subCell.requiredMessage || generateDefaultRequiredMessage(subCell)
+          errors.push(message)
+        }
+      }
+    })
+  }
+
+  if (errors.length > 0) {
+    // 显示第一个错误信息
+    showFailToast(errors[0])
+
+    return false
+  }
+
+  return true
+}
+
 // 提交按钮
 function onSubmit(): void {
+  // 调试：打印所有字段的required状态
+  console.log('所有字段配置:', activatedConfig.columns.map(row => ({
+    type: row.type,
+    label: row.label,
+    required: row.required,
+    dataIndex: row.dataIndex,
+  })))
+
+  // 先进行表单校验
+  if (!validateForm()) {
+    return
+  }
+
   if (activatedConfig.tempData) {
     const keys = Object.keys(activatedConfig.tempData)
     keys.forEach((key) => {
@@ -339,6 +470,8 @@ function formatConfigToForm(config: configDefine): void {
       inputReadOnly?: boolean
       content?: Array<any>
       text?: string
+      required?: boolean
+      requiredMessage?: string
     } = {
       label: '',
       type: undefined,
@@ -411,16 +544,31 @@ function formatConfigToForm(config: configDefine): void {
           tempObj.type = 'input'
           if (row[j].inputReadOnly)
             tempObj.inputReadOnly = true
+          tempObj.required = row[j].required
           break
         case 'curDateInput' :
           tempObj.dataIndex = row[j].dataIndex
           tempObj.text = row[j].text
           tempObj.type = 'curDateInput'
+          tempObj.required = row[j].required
+          break
+        case 'datePicker' :
+          tempObj.dataIndex = row[j].dataIndex
+          tempObj.text = row[j].text
+          tempObj.type = 'datePicker'
+          tempObj.required = row[j].required
+          break
+        case 'timePicker' :
+          tempObj.dataIndex = row[j].dataIndex
+          tempObj.text = row[j].text
+          tempObj.type = 'timePicker'
+          tempObj.required = row[j].required
           break
         case 'signature' :
           tempObj.dataIndex = row[j].dataIndex
           tempObj.text = row[j].text
           tempObj.type = 'signature'
+          tempObj.required = row[j].required
           break
         case 'inputs' :
           if (!tempObj.format)
@@ -598,21 +746,33 @@ function initComponent() {
         Object.assign(activatedConfig.data, props.configData)
 
       activatedConfig.columns.forEach((row) => {
-        row.forEach((item) => {
-          if (item.dataIndex && item.dataIndex.includes('@@@')) {
-            if (!activatedConfig.tempData) {
-              activatedConfig.tempData = {}
-              activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data, item.dataIndex)
-              if (item.type === 'images')
-                activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data.images, item.dataIndex)
-            }
-            else {
-              activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data, item.dataIndex)
-              if (item.type === 'images')
+        if (row.dataIndex && row.dataIndex.includes('@@@')) {
+          if (!activatedConfig.tempData) {
+            activatedConfig.tempData = {}
+          }
+          if (row.type === 'images') {
+            activatedConfig.tempData[row.dataIndex] = getDeepObject(activatedConfig.data.images, row.dataIndex)
+          }
+          else {
+            activatedConfig.tempData[row.dataIndex] = getDeepObject(activatedConfig.data, row.dataIndex)
+          }
+        }
+        // 为了兼容旧的结构，保留原有的逻辑
+        if (row.forEach) {
+          row.forEach((item) => {
+            if (item.dataIndex && item.dataIndex.includes('@@@')) {
+              if (!activatedConfig.tempData) {
+                activatedConfig.tempData = {}
+              }
+              if (item.type === 'images') {
                 activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data.images, item.dataIndex)
+              }
+              else {
+                activatedConfig.tempData[item.dataIndex] = getDeepObject(activatedConfig.data, item.dataIndex)
+              }
             }
-          }
-        })
+          })
+        }
       })
       console.warn('初始化完成，配置：', activatedConfig)
     }
@@ -694,6 +854,46 @@ function getNow() {
   const seconds = String(date.getSeconds()).padStart(2, '0')
   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 = ''
+}
 </script>
 
 <template>
@@ -760,7 +960,7 @@ function getNow() {
                   <van-cell center :title="row.label" :value="row.valueText" />
                 </van-cell-group>
                 <!--     input      -->
-                <van-cell-group v-else-if="row.type === 'input'" inset class="cell_group" :title="row.label">
+                <van-cell-group v-else-if="row.type === 'input'" inset class="cell_group" :title="row.label" :class="{ 'required-field': row.required }">
                   <template v-if="row.inputReadOnly === true">
                     <template v-if="row.dataIndex.includes('@@@')">
                       <van-field
@@ -814,21 +1014,34 @@ function getNow() {
                 </van-cell-group>
                 <!--     curDateInput      -->
                 <van-cell-group v-else-if="row.type === 'curDateInput'" inset style="margin-top: 4vh">
-                  <van-field
-                    v-model="activatedConfig.data[row.dataIndex]"
-                    :label="row.valueText ? `${row.valueText}:` : ''"
-                    :placeholder="row.valueText ? `请点击右侧按钮设置${row.valueText}` : '请点击右侧按钮设置数据'"
-                    readonly
-                    type="textarea"
-                    rows="1"
-                    autosize
-                  >
-                    <template #button>
-                      <van-button v-if="!activatedConfig.data[row.dataIndex]" size="small" type="primary" @click="activatedConfig.data[row.dataIndex] = getNow()">
-                        {{ row.text }}
+                  <div class="cur-date-input-container">
+                    <div class="cur-date-input-content">
+                      <div class="cur-date-input-label">
+                        {{ row.valueText || '当前时间' }}
+                      </div>
+                      <div class="cur-date-input-value">
+                        {{ activatedConfig.data[row.dataIndex] || '未设置' }}
+                      </div>
+                    </div>
+                    <div class="cur-date-input-action">
+                      <van-button
+                        v-if="!activatedConfig.data[row.dataIndex]"
+                        size="small"
+                        type="primary"
+                        @click="activatedConfig.data[row.dataIndex] = getNow()"
+                      >
+                        {{ row.text || '设置时间' }}
                       </van-button>
-                    </template>
-                  </van-field>
+                      <van-button
+                        v-else
+                        size="small"
+                        type="default"
+                        @click="activatedConfig.data[row.dataIndex] = getNow()"
+                      >
+                        {{ row.text || '重新设置' }}
+                      </van-button>
+                    </div>
+                  </div>
                 </van-cell-group>
                 <!--     signature      -->
                 <van-cell-group v-else-if="row.type === 'signature'" inset style="margin-top: 4vh">
@@ -843,8 +1056,28 @@ function getNow() {
                     </template>
                   </van-field>
                 </van-cell-group>
+                <!--     datePicker      -->
+                <van-cell-group v-else-if="row.type === 'datePicker'" inset :title="row.label" :class="{ 'required-field': row.required }">
+                  <van-field
+                    v-model="activatedConfig.data[row.dataIndex]"
+                    :label="`${row.label || '日期'}:`"
+                    placeholder="请选择日期"
+                    readonly
+                    @click="openDatePicker(row.dataIndex)"
+                  />
+                </van-cell-group>
+                <!--     timePicker      -->
+                <van-cell-group v-else-if="row.type === 'timePicker'" inset :title="row.label" :class="{ 'required-field': row.required }">
+                  <van-field
+                    v-model="activatedConfig.data[row.dataIndex]"
+                    :label="`${row.label || '时间'}:`"
+                    placeholder="请选择时间"
+                    readonly
+                    @click="openTimePicker(row.dataIndex)"
+                  />
+                </van-cell-group>
                 <!--     inputs      -->
-                <van-cell-group v-else-if="row.type === 'inputs'" inset :title="row.label">
+                <van-cell-group v-else-if="row.type === 'inputs'" inset :title="row.label || ''" :class="{ 'required-field': row.required }">
                   <template v-if="row.inputReadOnly === true">
                     <template v-for="(item, _index) in formatInputs(row)" :key="_index">
                       <van-field
@@ -902,22 +1135,36 @@ function getNow() {
                   <van-cell-group inset :title="row.label" style="background-color: #eff2f5">
                     <van-cell-group v-for="(_item, _index) in activatedConfig.data[row.dataIndex]" :key="_index" inset class="my-cell-group" style="margin: 0 0 10px 0">
                       <div v-for="(def, defIndex) in row.definition" :key="defIndex">
-                        <van-field
-                          v-if="def.type === 'curDateInput'"
-                          v-model="activatedConfig.data[row.dataIndex][_index][def.dataIndex]"
-                          :label="`${def.label}:`"
-                          type="textarea"
-                          rows="1"
-                          autosize
-                          :placeholder="`请点击右侧按钮设置${def.label}`"
-                          readonly
-                        >
-                          <template #button>
-                            <van-button v-show="activatedConfig.data[row.dataIndex][_index][def.dataIndex] === ''" size="small" type="primary" @click="activatedConfig.data[row.dataIndex][_index][def.dataIndex] = getNow()">
-                              {{ def.text }}
-                            </van-button>
-                          </template>
-                        </van-field>
+                        <template v-if="def.type === 'curDateInput'">
+                          <div class="cur-date-input-container">
+                            <div class="cur-date-input-content">
+                              <div class="cur-date-input-label">
+                                {{ def.label }}
+                              </div>
+                              <div class="cur-date-input-value">
+                                {{ activatedConfig.data[row.dataIndex][_index][def.dataIndex] || '未设置' }}
+                              </div>
+                            </div>
+                            <div class="cur-date-input-action">
+                              <van-button
+                                v-if="!activatedConfig.data[row.dataIndex][_index][def.dataIndex]"
+                                size="small"
+                                type="primary"
+                                @click="activatedConfig.data[row.dataIndex][_index][def.dataIndex] = getNow()"
+                              >
+                                {{ def.text || '设置时间' }}
+                              </van-button>
+                              <van-button
+                                v-else
+                                size="small"
+                                type="default"
+                                @click="activatedConfig.data[row.dataIndex][_index][def.dataIndex] = getNow()"
+                              >
+                                {{ def.text || '重新设置' }}
+                              </van-button>
+                            </div>
+                          </div>
+                        </template>
                         <van-field
                           v-else
                           v-model="activatedConfig.data[row.dataIndex][_index][def.dataIndex]"
@@ -927,6 +1174,7 @@ function getNow() {
                           autosize
                           :placeholder="`请输入${def.label}`"
                           clearable
+                          :class="{ 'required-field': def.required }"
                         />
                       </div>
                     </van-cell-group>
@@ -986,6 +1234,10 @@ function getNow() {
   <div v-else class="skeleton">
     <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" />
 </template>
 
 <style scoped lang="less">
@@ -1069,6 +1321,25 @@ function getNow() {
 :deep(.van-field__label) {
   font-weight: 600;
 }
+
+// 必填字段星号样式 - 只对星号生效
+:deep(.van-field__label) {
+  // 将包含星号的文本进行特殊处理
+  &[style*="color"] {
+    color: #323233 !important;
+  }
+}
+
+// 使用自定义类名来处理必填字段
+.required-field :deep(.van-field__label) {
+  color: #323233;
+
+  &::before {
+    content: '*';
+    color: #ee0a24;
+    margin-right: 2px;
+  }
+}
 :deep(.van-uploader__wrapper){
   padding: 10px;
   display: flex;
@@ -1076,4 +1347,68 @@ function getNow() {
   justify-content: space-between; /* 水平方向上左右分散对齐 */
   align-items: center; /* 垂直方向上上下中心对齐 */
 }
+
+// 自定义的当前日期输入框样式
+.cur-date-input-container {
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  background: white;
+  border-radius: 8px;
+
+  .cur-date-input-content {
+    flex: 1;
+    margin-right: 12px;
+    min-width: 0; // 防止flex子元素撑破容器
+
+    .cur-date-input-label {
+      font-size: 14px;
+      font-weight: 600;
+      color: #323233;
+      line-height: 1.4;
+      margin-bottom: 4px;
+      word-wrap: break-word;
+      white-space: normal;
+      display: -webkit-box;
+      -webkit-line-clamp: 2; // 最多显示2行
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    .cur-date-input-value {
+      font-size: 15px;
+      font-weight: 600;
+      color: #666;
+      line-height: 1.3;
+      word-wrap: break-word;
+      white-space: normal;
+    }
+  }
+
+  .cur-date-input-action {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+}
+
+// 动态行中的当前日期输入框样式调整
+.my-cell-group .cur-date-input-container {
+  padding: 12px;
+  margin: 8px 0;
+
+  .cur-date-input-content {
+    margin-right: 8px;
+
+    .cur-date-input-label {
+      font-size: 13px;
+      margin-bottom: 2px;
+    }
+
+    .cur-date-input-value {
+      font-size: 12px;
+    }
+  }
+}
 </style>

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 ['', '']
+}