af-mobile-client-vue3 1.0.75 → 1.0.77

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

@@ -100,6 +100,12 @@ const showPicker = ref(false)
 const showDatePicker = ref(false)
 const showTimePicker = ref(false)
 const showArea = ref(false)
+const errorMessage = ref('')
+const formInputDefaultValue = ref('')
+const queryInputDefaultValue = ref('')
+const formSelectDefaultValue = ref([])
+const querySelectDefaultValue = ref([])
+// eslint-disable-next-line ts/no-use-before-define
 const currUser = computed(() => userState.f.resources.id)
 // 是否展示当前项
 const showItem = ref(true)
@@ -133,7 +139,7 @@ const localValue = computed({
     // if (props.modelValue !== undefined) {
     //   return props.modelValue
     // }
-    switch (props.attr.type) {
+    switch (attr.type) {
       case 'switch':
         return props.modelValue !== undefined ? props.modelValue : false
       case 'checkbox':
@@ -143,7 +149,14 @@ const localValue = computed({
       case 'datePicker':
       case 'timePicker':
       case 'select':
-        return props.modelValue !== undefined ? props.modelValue : []
+        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 'radio':
       case 'rate':
       case 'slider':
@@ -151,8 +164,12 @@ const localValue = computed({
       case 'citySelect':
       case 'calendar':
       case 'textarea':
+      case 'intervalPicker':
       case 'input':
-        return props.modelValue !== undefined ? props.modelValue : ''
+        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':
@@ -172,6 +189,126 @@ const localValue = computed({
   },
 })
 
+// 表单校验的类型校验
+function formTypeCheck(attr, value) {
+  switch (attr.rule.type) {
+    case 'string':
+      if (value.length === 0) {
+        errorMessage.value = `${attr.name}必须为有效的字符串`
+        return
+      }
+      break
+    case 'number':
+      if (!/^[+-]?(\d+(\.\d*)?|\.\d+)$/.test(value)) {
+        errorMessage.value = `${attr.name}必须为数字`
+        return
+      }
+      break
+    case 'boolean':
+    case 'array':
+    case 'regexp':
+      if (value) {
+        errorMessage.value = ''
+        return
+      }
+      break
+    case 'integer':
+      if (!/^-?\d+$/.test(value)) {
+        errorMessage.value = `${attr.name}必须为整数`
+        return
+      }
+      break
+    case 'float':
+      if (!/^-?\d+\.\d+$/.test(value)) {
+        errorMessage.value = `${attr.name}必须为小数`
+        return
+      }
+      break
+    case 'email':
+      if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {
+        errorMessage.value = `请输入正确的邮箱地址`
+        return
+      }
+      break
+    case 'idNumber':
+      if (!/^(^\d{15}$|^\d{17}([0-9]|X)$)$/.test(value)) {
+        errorMessage.value = `请输入正确的身份证号码`
+        return
+      }
+      break
+    case 'userPhone':
+      if (!/^1[3-9]\d{9}$/.test(value)) {
+        errorMessage.value = `请输入正确的手机号码`
+        return
+      }
+      break
+    case 'landlineNumber':
+      if (!/^(0\d{2,3}-\d{7,8})$|^(0\d{2,3}\d{7,8})$|^$0\d{2,3}$\s?\d{7,8}$/.test(value)) {
+        errorMessage.value = `请输入正确的座机号码`
+        return
+      }
+      break
+    case 'greaterThanZero':
+      if (!/^(?:[1-9]\d*(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/.test(value)) {
+        errorMessage.value = `请输入一个大于0的数字`
+        return
+      }
+      break
+    case 'greaterThanOrEqualZero':
+      if (!/^(?:\d+|\d*\.\d+)$/.test(value)) {
+        errorMessage.value = `请输入一个大于等于0的数字`
+        return
+      }
+      break
+    case 'stringLength':
+      if (!(value.length >= attr.rule.minLen && value.length < attr.rule.maxLen)) {
+        errorMessage.value = `长度必须在${attr.rule.minLen}~${attr.rule.maxLen}之间`
+        return
+      }
+      break
+    case 'customJs':
+      // eslint-disable-next-line no-case-declarations
+      const funcStr = attr.rule.customValidatorFunc
+      // 输入的数据是否符合条件
+      // eslint-disable-next-line no-case-declarations
+      const status = ref(true)
+      // 提取函数体部分
+      // eslint-disable-next-line no-case-declarations
+      const funcBodyMatch = funcStr.match(/function\s*\(.*?\)\s*{([\s\S]*)}/)
+      if (!funcBodyMatch)
+        throw new Error('自定义校验函数不合法')
+      // eslint-disable-next-line no-case-declarations
+      const funcBody = funcBodyMatch[1].trim() // 提取函数体
+      // 使用 new Function 创建函数
+      // eslint-disable-next-line no-new-func,no-case-declarations
+      const customValidatorFunc = new Function('rule', 'value', 'callback', 'form', 'attr', 'util', funcBody)
+      // 定义 callback 函数
+      // eslint-disable-next-line no-case-declarations
+      const callback = (error) => {
+        if (error) {
+          errorMessage.value = `${error}`
+          status.value = false // 表示有错误发生
+        }
+      }
+      // 调用自定义校验函数
+      customValidatorFunc(
+        attr.rule,
+        value,
+        callback,
+        form,
+        attr,
+        {}, // util 对象（可以根据需要传递）
+      )
+      if (!status.value)
+        return
+      break
+    default:
+      errorMessage.value = ''
+      break
+  }
+  errorMessage.value = ''
+}
+
 onBeforeMount(() => {
   init()
   showFormItemFunc()
@@ -246,6 +383,26 @@ function init() {
       initRadioValue()
     }
   }
+  if (attr.type === 'radio' || attr.type === 'rate' || attr.type === 'slider' || attr.type === 'area' || attr.type === 'citySelect' || attr.type === 'calendar' || attr.type === 'textarea' || attr.type === 'intervalPicker' || attr.type === 'input') {
+    if (attr.formDefault)
+      formInputDefaultValue.value = attr.formDefault
+    if (attr.queryFormDefault)
+      queryInputDefaultValue.value = attr.queryFormDefault
+  }
+
+  if (attr.type === 'checkbox' || attr.type === 'uploader' || attr.type === 'file' || attr.type === 'image' || attr.type === 'datePicker' || attr.type === 'timePicker' || attr.type === 'select') {
+    if (attr.formDefault) {
+      if (attr.type === 'checkbox')
+        formSelectDefaultValue.value = attr.formDefault
+      else
+        formSelectDefaultValue.value.push(attr.formDefault)
+    }
+    if (attr.queryFormDefault) {
+      // console.log(querySelectDefaultValue.value)
+      querySelectDefaultValue.value.push(attr.queryFormDefault)
+      // querySelectDefaultValue.value = attr.queryFormDefault
+    }
+  }
 }
 
 function getDataCallback(res) {
@@ -361,7 +518,7 @@ watch(() => form, (_oldVal, _newVal) => {
       v-if="attr.type === 'switch' && showItem"
       name="switch"
       :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: `未切换${attr.name}` }]"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
         <VanSwitch v-model="localValue" />
@@ -386,7 +543,7 @@ watch(() => form, (_oldVal, _newVal) => {
         v-if="attr.showMode === 'checkbox' && mode !== '查询'"
         name="checkboxGroup"
         :label="labelData"
-        :rules="[{ required: attr.rule.required === 'true', message: '至少选择一项' }]"
+        :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       >
         <template #input>
           <van-checkbox-group v-model="localValue as any[]" direction="horizontal" shape="square" :disabled="readonly">
@@ -400,7 +557,7 @@ watch(() => form, (_oldVal, _newVal) => {
         v-if="attr.showMode === 'checkbox' && mode === '查询'"
         name="checkboxGroup"
         :label="labelData"
-        :rules="[{ required: attr.rule.required === 'true', message: '至少选择一项' }]"
+        :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       >
         <template #input>
           <XGridDropOption
@@ -420,7 +577,7 @@ watch(() => form, (_oldVal, _newVal) => {
         :placeholder="placeholder"
         :columns="option"
         :option="attr.option ? attr.option : columnsField"
-        :rules="[{ required: attr.rule.required === 'true', message: '至少选择一项' }]"
+        :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       />
     </template>
 
@@ -430,7 +587,7 @@ watch(() => form, (_oldVal, _newVal) => {
       name="radio"
       :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
       :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: '必须选择一项' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
         <VanRadioGroup v-model="localValue" direction="horizontal" :disabled="readonly">
@@ -447,7 +604,7 @@ watch(() => form, (_oldVal, _newVal) => {
       name="radio"
       :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
       :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: '必须选择一项' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
         <XGridDropOption
@@ -464,7 +621,7 @@ watch(() => form, (_oldVal, _newVal) => {
       name="stepper"
       :label="labelData"
       :readonly="readonly"
-      :rules="[{ required: attr.rule.required === 'true', message: `未调整${attr.name}` }]"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
         <VanStepper v-model="(localValue as string)" />
@@ -477,7 +634,7 @@ watch(() => form, (_oldVal, _newVal) => {
       name="rate"
       :label="labelData"
       :readonly="readonly"
-      :rules="[{ required: attr.rule.required === 'true', message: `未进行${attr.name}评分` }]"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
         <VanRate v-model="(localValue as number)" />
@@ -490,7 +647,7 @@ watch(() => form, (_oldVal, _newVal) => {
       name="slider"
       :label="labelData"
       :readonly="readonly"
-      :rules="[{ required: attr.rule.required === 'true', message: `未移动${attr.name}滑块` }]"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
         <VanSlider v-model="(localValue as number)" />
@@ -502,7 +659,7 @@ watch(() => form, (_oldVal, _newVal) => {
       v-if="(attr.type === 'image' || attr.type === 'file') && showItem"
       name="uploader"
       :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: `未上传${attr.name}` }]"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
         <!--      <van-uploader v-model="localValue" /> -->
@@ -524,7 +681,7 @@ watch(() => form, (_oldVal, _newVal) => {
       :label="labelData"
       :readonly="readonly"
       is-link
-      :rules="[{ required: attr.rule.required === 'true', message: `未选择${attr.name}` }]"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       @click="showPicker = true"
     />
     <VanPopup v-model:show="showPicker" round position="bottom" teleport="body">
@@ -550,7 +707,7 @@ watch(() => form, (_oldVal, _newVal) => {
       name="rangePicker"
       :label="labelData"
       :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :rules="[{ required: attr.rule.required === 'true', message: '未选择日期' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       @click="calendarShow = true"
     />
     <VanCalendar
@@ -571,7 +728,7 @@ watch(() => form, (_oldVal, _newVal) => {
       readonly
       :is-link="true"
       :placeholder="placeholder"
-      :rules="[{ required: attr.rule.required === 'true', message: '未选择日期' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       @click="readonly ? null : showDatePicker = true"
     />
     <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body">
@@ -596,7 +753,7 @@ watch(() => form, (_oldVal, _newVal) => {
       readonly
       :is-link="true"
       :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :rules="[{ required: attr.rule.required === 'true', message: '未选择日期' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       @click="showDatePicker = true"
     />
     <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body">
@@ -622,7 +779,7 @@ watch(() => form, (_oldVal, _newVal) => {
       readonly
       :placeholder="attr.placeholder"
       :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: '未选择时间' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       @click="showTimePicker = true"
     />
     <VanPopup v-model:show="showTimePicker" position="bottom" teleport="body">
@@ -647,7 +804,7 @@ watch(() => form, (_oldVal, _newVal) => {
       is-link
       readonly
       :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: '未选择地区' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
       @click="readonly ? null : showArea = true"
     />
     <VanPopup v-model:show="showArea" position="bottom" teleport="body">
@@ -668,7 +825,7 @@ watch(() => form, (_oldVal, _newVal) => {
       :placeholder="placeholder"
       :columns="option"
       :option="attr.option ? attr.option : columnsField"
-      :rules="[{ required: attr.rule.required === 'true', message: '必须选择一项' }]"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     />
 
     <!-- 文本区域 -->
@@ -684,22 +841,22 @@ watch(() => form, (_oldVal, _newVal) => {
       :placeholder="attr.placeholder ? attr.placeholder : `请输入${attr.name}`"
       show-word-limit
       label-align="top"
-      :rules="[{ required: attr.rule.required === 'true', message: `必须填写${attr.name}` }]"
+      :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
     />
 
     <!-- 文本输入框 -->
     <VanField
-      v-if="attr.type === 'input' && showItem"
+      v-if="(attr.type === 'input' || attr.type === 'intervalPicker') && showItem"
       v-model="(localValue as string)"
       :label="labelData"
-      :required="attr.required"
       :type="attr.type"
       :readonly="readonly"
       :disabled="attr.disabled"
       :placeholder="placeholder"
-      :error-message="attr.errorMessage"
+      :error-message="errorMessage"
       :clearable="attr.clearable"
-      :rules="[{ required: attr.rule.required === 'true', message: `必须填写${attr.name}` }]"
+      :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
+      @blur="() => formTypeCheck(attr, localValue as string)"
     />
   </div>
 </template>

package/src/router/routes.ts

@@ -36,7 +36,7 @@ const routes: Array<RouteRecordRaw> = [
           formData: JSON.parse(decodeURIComponent(route.query.formData as string)),
           mode: route.query.mode,
         }),
-        meta:{ title: '新增/修改表单' }
+        meta: { title: '新增/修改表单' },
       },
     ],
   },

package/src/utils/dictUtil.ts

@@ -1,51 +1,52 @@
-/**
- * 字典工具
- */
-import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
-
-/**
- * 获取字典
- * @param configName 配置名
- * @param callback 获取到字典的回调
- */
-export function getDict(configName: string, callback: Function, serviceName = import.meta.env.VITE_APP_SYSTEM_NAME) {
-  getConfigByName(configName, (result) => {
-    if (result != null && result.value) {
-      callback(result.value)
-    }
-    else {
-      console.warn(`dict [${configName}] not found`)
-      callback(null)
-    }
-  }, serviceName)
-}
-
-export function getDictItemByValue(configName: string, value: string, callback: Function) {
-  getDict(configName, (result) => {
-    if (result != null) {
-      for (const item of result) {
-        if (item.value.toString() === value) {
-          callback(item)
-          return
-        }
-      }
-      console.warn(`dict [${configName}] 's value [${value}] not found`)
-    }
-    callback(null)
-  })
-}
-
-export function getDictItemByLabel(configName: string, label: string, callback: Function) {
-  getDict(configName, (result) => {
-    if (result != null) {
-      for (const item of result) {
-        if (item.label.toString() === label) {
-          callback(item)
-          return
-        }
-      }
-      console.warn(`dict [${configName}] 's label [${label}] not found`)
-    }
-    callback(null)
-  })
-}
+/**
+ * 字典工具
+ */
+import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
+
+/**
+ * 获取字典
+ * @param configName 配置名
+ * @param callback 获取到字典的回调
+ * @param serviceName 服务名
+ */
+export function getDict(configName: string, callback: Function, serviceName = import.meta.env.VITE_APP_SYSTEM_NAME) {
+  getConfigByName(configName, (result) => {
+    if (result != null && result.value) {
+      callback(result.value)
+    }
+    else {
+      console.warn(`dict [${configName}] not found`)
+      callback(null)
+    }
+  }, serviceName)
+}
+
+export function getDictItemByValue(configName: string, serviceName: string, value: string, callback: Function) {
+  getDict(configName, (result) => {
+    if (result != null) {
+      for (const item of result) {
+        if (item.value.toString() === value) {
+          callback(item)
+          return
+        }
+      }
+      console.warn(`dict [${configName}] 's value [${value}] not found`)
+    }
+    callback(null)
+  }, serviceName)
+}
+
+export function getDictItemByLabel(configName: string, serviceName: string, label: string, callback: Function) {
+  getDict(configName, (result) => {
+    if (result != null) {
+      for (const item of result) {
+        if (item.label.toString() === label) {
+          callback(item)
+          return
+        }
+      }
+      console.warn(`dict [${configName}] 's label [${label}] not found`)
+    }
+    callback(null)
+  }, serviceName)
+}

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

@@ -10,11 +10,19 @@ const emit = defineEmits(['deleteRow'])
 const router = useRouter()
 // 获取默认值
 const idKey = ref('o_id')
-// const configName = ref('crud_oper_log_manage')
-// const serviceName = ref('af-system')
-const configName = ref('crud_sources_test')
+
+// 简易crud表单测试
+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({
@@ -48,30 +56,30 @@ function toDetail(item) {
 }
 
 // 新增功能
-function addOption(totalCount) {
-  router.push({
-    name: 'XFormView',
-    params: { id: totalCount, openid: totalCount },
-    query: {
-      configName: configName.value,
-      serviceName: serviceName.value,
-      mode: '新增',
-    },
-  })
-}
+// 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 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) {
@@ -84,7 +92,8 @@ function deleteRow(result) {
     <template #layout_content>
       <XCellList
         :config-name="configName"
-        :fix-query-form="{o_f_oper_name:'edu_test1'}"
+        :service-name="serviceName"
+        :fix-query-form="{ o_f_oper_name: 'edu_test' }"
         :id-key="idKey"
         @to-detail="toDetail"
         @delete-row="deleteRow"

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

@@ -6,6 +6,9 @@ import { showDialog } from 'vant'
 // import {runLogic} from "@af-mobile-client-vue3/services/api/common";
 
 // 纯表单
+// const configName = ref("form_check_test")
+// const serviceName = ref("af-system")
+
 // const configName = ref("计划下发Form")
 // const serviceName = ref("af-linepatrol")
 
@@ -44,7 +47,7 @@ function submit(_result) {
         :config-name="configName"
         :service-name="serviceName"
         :group-form-data="formData"
-        mode="查询"
+        mode="新增"
         @submit="submit"
       />
     </template>