修复部分问题

io.sc.platform.core.frontend/src/platform/components/form/WForm.vue

@@ -2,7 +2,7 @@
   <div>
     <q-form ref="formRef" :autofocus="false" :greedy="true" v-bind="attrs">
       <div class="grid" :class="formLayoutComputed">
-        <template v-for="(field, index) in fields as any" :key="String(index)">
+        <template v-for="(field, index) in fields_ as any" :key="String(index)">
           <div
             :class="
               (field.colsFirst ? 'col-start-1 ' : ' ') +
@@ -19,6 +19,7 @@
               v-model="formData[field.name]"
               v-bind="field"
               :form-data="formData"
+              @update:model-value="updateModelValue(field.name, formData[field.name])"
             ></component>
             <component :is="fiedType[field.type] || field.type" v-else :form-ref="formRef" v-bind="field" :form-data="formData"></component>
           </div>
@@ -51,7 +52,8 @@ const props = defineProps({
 const formRef = ref();
 const formStatus = ref(PageStatusEnum.新增);
 const formModel: any = {};
-const formFieldsMap = new Map();
+const formFields = {};
+const fields_ = ref([...props.fields]);
 // 不同屏幕尺寸下 colsNum 为 0 时一行显示的字段个数
 const screenCols = { xs: 1, sm: 2, md: 3, lg: 4, xl: 6 };
 const fiedType = {
@@ -75,23 +77,23 @@ const defaultValueHandler = (field) => {
 };
 
 watch(
-  () => props.fields,
+  () => fields_.value,
   (newVal, oldVal) => {
     if (newVal) {
-      for (const field of props.fields as any) {
+      for (const field of fields_.value as any) {
         if (field.name) {
           formModel[field.name] = defaultValueHandler(field);
-          formFieldsMap.set(field.name, field);
+          formFields[field.name] = field;
         }
       }
     }
   },
 );
 
-for (const field of props.fields as any) {
+for (const field of fields_.value as any) {
   if (field.name) {
     formModel[field.name] = defaultValueHandler(field);
-    formFieldsMap.set(field.name, field);
+    formFields[field.name] = field;
   }
 }
 
@@ -118,6 +120,13 @@ const formLayoutComputed = computed(() => {
   return className;
 });
 
+const updateModelValue = (name, value) => {
+  if (formFields[name].error) {
+    formFields[name].error = false;
+    formFields[name].errorMessage = undefined;
+  }
+};
+
 /**
  * 对外暴露方法-获取form所有数据
  */
@@ -130,7 +139,7 @@ const getData = () => {
  * @param data 数据对象(JSON格式)
  */
 const setData = (data) => {
-  for (const field of props.fields as any) {
+  for (const field of fields_.value as any) {
     formData[field.name] = data[field.name];
   }
 };
@@ -139,7 +148,7 @@ const setData = (data) => {
  */
 const reset = () => {
   Object.keys(formData).forEach((key) => {
-    formData[key] = defaultValueHandler(formFieldsMap.get(key));
+    formData[key] = defaultValueHandler(formFields[key]);
   });
 };
 const formValidate = async () => {
@@ -164,8 +173,7 @@ const validate = async () => {
  * @param value 字段值
  */
 const setFieldValue = (fieldName, value) => {
-  const field = formFieldsMap.get(fieldName);
+  formData[fieldName] = value;
-  formData[field.name] = value;
 };
 /**
  * 对外暴露方法-获取字段值
@@ -194,9 +202,44 @@ const getRowColsNum = () => {
   return screenColsNumComputed.value;
 };
 
+/**
+ * 错误消息类型
+ *
+ * @param fieldName 字段名
+ * @param errorMessage 错误消息
+ */
+type errorType = {
+  fieldName: string;
+  errorMessage: string;
+};
+
+/**
+ * 对外暴露方法-设置后台校验错误信息
+ * @param errors 错误消息集合
+ */
+const setValidationErrors = (errors: errorType[]) => {
+  if (errors && errors.length > 0) {
+    const grouped = {};
+    errors.map(({ fieldName, ...rest }) => {
+      grouped[fieldName] = grouped[fieldName] || [];
+      grouped[fieldName].push(rest);
+    });
+    for (let name in grouped) {
+      if (formFields[name]) {
+        formFields[name].error = true;
+        formFields[name].errorMessage = grouped[name]
+          .map((obj) => {
+            return obj.errorMessage;
+          })
+          .join('、');
+      }
+    }
+  }
+};
+
 defineExpose({
   data: formData,
-  fieldsMap: formFieldsMap,
+  fields: formFields,
   getData,
   setData,
   reset,
@@ -206,5 +249,6 @@ defineExpose({
   setStatus,
   getStatus,
   getRowColsNum,
+  setValidationErrors,
 });
 </script>

io.sc.platform.core.frontend/src/platform/components/form/elements/WCheckbox.vue

@@ -27,6 +27,9 @@ const props = defineProps({
 
 const rulesComputed = computed(() => {
   let rules = inRules || <any>[];
+  if (hideIfComputed.value) {
+    rules = [];
+  }
   return rules;
 });
 

io.sc.platform.core.frontend/src/platform/components/form/elements/WDate.vue

@@ -2,6 +2,7 @@
   <div>
     <q-input
       v-show="!hideIfComputed"
+      ref="dateRef"
       :hide-bottom-space="true"
       :hide-hint="true"
       :outlined="true"
@@ -32,6 +33,7 @@ import { ref, computed, defineProps, useAttrs, watch } from 'vue';
 import { FormValidators } from '@/platform/components';
 import { IconEnum } from '@/platform/enums';
 
+const dateRef = ref();
 const date = ref(null);
 const attrs = useAttrs();
 const inRules = attrs.rules;
@@ -42,11 +44,13 @@ const props = defineProps({
       return false;
     },
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
   requiredIf: {
     type: Function,
-    default: () => {
+    default: undefined,
-      return false;
-    },
   },
   readonlyIf: {
     type: Function,
@@ -73,8 +77,11 @@ const rulesComputed = computed(() => {
   let rules = inRules || <any>[];
   if (!hideIfComputed.value && requiredIfComputed.value) {
     rules.push(FormValidators.required());
-  } else {
+  } else if (hideIfComputed.value) {
-    rules.splice(rules.length - 1, 1);
+    rules = [];
+  }
+  if (dateRef?.value) {
+    dateRef.value.resetValidation();
   }
   return rules;
 });
@@ -83,7 +90,12 @@ const hideIfComputed = computed(() => {
   return props.hideIf();
 });
 const requiredIfComputed = computed(() => {
-  return props.requiredIf();
+  if (props.requiredIf) {
+    return props.requiredIf() || false;
+  } else if (props.required) {
+    return true;
+  }
+  return false;
 });
 const readonlyIfComputed = computed(() => {
   return props.readonlyIf();

io.sc.platform.core.frontend/src/platform/components/form/elements/WNumber.vue

@@ -2,6 +2,7 @@
   <div>
     <q-input
       v-show="!hideIfComputed"
+      ref="numberRef"
       :hide-bottom-space="true"
       :hide-hint="true"
       :outlined="true"
@@ -19,9 +20,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps, useAttrs } from 'vue';
+import { ref, computed, defineProps, useAttrs } from 'vue';
 import { FormValidators } from '@/platform/components';
 
+const numberRef = ref();
 const attrs = useAttrs();
 const inRules = attrs.rules;
 const props = defineProps({
@@ -32,11 +34,13 @@ const props = defineProps({
       return false;
     },
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
   requiredIf: {
     type: Function,
-    default: () => {
+    default: undefined,
-      return false;
-    },
   },
   readonlyIf: {
     type: Function,
@@ -57,8 +61,11 @@ const rulesComputed = computed(() => {
   rules.push(FormValidators.maxPrecision(props.precision));
   if (!hideIfComputed.value && requiredIfComputed.value) {
     rules.push(FormValidators.required());
-  } else {
+  } else if (hideIfComputed.value) {
-    rules.splice(rules.length - 1, 1);
+    rules = [];
+  }
+  if (numberRef?.value) {
+    numberRef.value.resetValidation();
   }
   return rules;
 });
@@ -67,7 +74,12 @@ const hideIfComputed = computed(() => {
   return props.hideIf();
 });
 const requiredIfComputed = computed(() => {
-  return props.requiredIf();
+  if (props.requiredIf) {
+    return props.requiredIf() || false;
+  } else if (props.required) {
+    return true;
+  }
+  return false;
 });
 const readonlyIfComputed = computed(() => {
   return props.readonlyIf();

io.sc.platform.core.frontend/src/platform/components/form/elements/WPassword.vue

@@ -2,12 +2,14 @@
   <div>
     <q-input
       v-show="!hideIfComputed"
+      ref="pwdRef"
       :hide-bottom-space="true"
       :hide-hint="true"
       :outlined="true"
       :dense="true"
       v-bind="attrs"
       type="password"
+      autocomplete="off"
       :rules="rulesComputed"
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
@@ -18,9 +20,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps, useAttrs } from 'vue';
+import { ref, computed, defineProps, useAttrs } from 'vue';
 import { FormValidators } from '@/platform/components';
 
+const pwdRef = ref();
 const attrs = useAttrs();
 const inRules = attrs.rules;
 const props = defineProps({
@@ -30,11 +33,13 @@ const props = defineProps({
       return false;
     },
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
   requiredIf: {
     type: Function,
-    default: () => {
+    default: undefined,
-      return false;
-    },
   },
   readonlyIf: {
     type: Function,
@@ -54,8 +59,11 @@ const rulesComputed = computed(() => {
   let rules = inRules || <any>[];
   if (!hideIfComputed.value && requiredIfComputed.value) {
     rules.push(FormValidators.required());
-  } else {
+  } else if (hideIfComputed.value) {
-    rules.splice(rules.length - 1, 1);
+    rules = [];
+  }
+  if (pwdRef?.value) {
+    pwdRef.value.resetValidation();
   }
   return rules;
 });
@@ -64,7 +72,12 @@ const hideIfComputed = computed(() => {
   return props.hideIf();
 });
 const requiredIfComputed = computed(() => {
-  return props.requiredIf();
+  if (props.requiredIf) {
+    return props.requiredIf() || false;
+  } else if (props.required) {
+    return true;
+  }
+  return false;
 });
 const readonlyIfComputed = computed(() => {
   return props.readonlyIf();

io.sc.platform.core.frontend/src/platform/components/form/elements/WSelect.vue

@@ -2,6 +2,7 @@
   <div>
     <q-select
       v-show="!hideIfComputed"
+      ref="selectRef"
       emit-value
       map-options
       :hide-bottom-space="true"
@@ -19,9 +20,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps, useAttrs } from 'vue';
+import { ref, computed, defineProps, useAttrs } from 'vue';
 import { FormValidators } from '@/platform/components';
 
+const selectRef = ref();
 const attrs = useAttrs();
 const inRules = attrs.rules;
 const props = defineProps({
@@ -31,11 +33,13 @@ const props = defineProps({
       return false;
     },
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
   requiredIf: {
     type: Function,
-    default: () => {
+    default: undefined,
-      return false;
-    },
   },
   readonlyIf: {
     type: Function,
@@ -55,8 +59,11 @@ const rulesComputed = computed(() => {
   let rules = inRules || <any>[];
   if (!hideIfComputed.value && requiredIfComputed.value) {
     rules.push(FormValidators.required());
-  } else {
+  } else if (hideIfComputed.value) {
-    rules.splice(rules.length - 1, 1);
+    rules = [];
+  }
+  if (selectRef?.value) {
+    selectRef.value.resetValidation();
   }
   return rules;
 });
@@ -65,7 +72,12 @@ const hideIfComputed = computed(() => {
   return props.hideIf();
 });
 const requiredIfComputed = computed(() => {
-  return props.requiredIf();
+  if (props.requiredIf) {
+    return props.requiredIf() || false;
+  } else if (props.required) {
+    return true;
+  }
+  return false;
 });
 const readonlyIfComputed = computed(() => {
   return props.readonlyIf();

io.sc.platform.core.frontend/src/platform/components/form/elements/WText.vue

@@ -2,6 +2,7 @@
   <div>
     <q-input
       v-show="!hideIfComputed"
+      ref="textRef"
       :hide-bottom-space="true"
       :hide-hint="true"
       :outlined="true"
@@ -18,9 +19,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps, useAttrs } from 'vue';
+import { ref, computed, defineProps, useAttrs } from 'vue';
 import { FormValidators } from '@/platform/components';
 
+const textRef = ref();
 const attrs = useAttrs();
 const inRules = attrs.rules;
 const props = defineProps({
@@ -30,11 +32,13 @@ const props = defineProps({
       return false;
     },
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
   requiredIf: {
     type: Function,
-    default: () => {
+    default: undefined,
-      return false;
-    },
   },
   readonlyIf: {
     type: Function,
@@ -54,8 +58,11 @@ const rulesComputed = computed(() => {
   let rules = inRules || <any>[];
   if (!hideIfComputed.value && requiredIfComputed.value) {
     rules.push(FormValidators.required());
-  } else {
+  } else if (hideIfComputed.value) {
-    rules.splice(rules.length - 1, 1);
+    rules = [];
+  }
+  if (textRef?.value) {
+    textRef.value.resetValidation();
   }
   return rules;
 });
@@ -64,7 +71,12 @@ const hideIfComputed = computed(() => {
   return props.hideIf();
 });
 const requiredIfComputed = computed(() => {
-  return props.requiredIf();
+  if (props.requiredIf) {
+    return props.requiredIf() || false;
+  } else if (props.required) {
+    return true;
+  }
+  return false;
 });
 const readonlyIfComputed = computed(() => {
   return props.readonlyIf();

io.sc.platform.core.frontend/src/platform/components/form/elements/WTextBtn.vue

@@ -2,6 +2,7 @@
   <div>
     <q-input
       v-show="!hideIfComputed"
+      ref="textBtnRef"
       :hide-bottom-space="true"
       :hide-hint="true"
       :outlined="true"
@@ -30,9 +31,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps, useAttrs } from 'vue';
+import { ref, computed, defineProps, useAttrs } from 'vue';
 import { FormValidators } from '@/platform/components';
 
+const textBtnRef = ref();
 const attrs = useAttrs();
 const inRules = attrs.rules;
 const props = defineProps({
@@ -42,11 +44,13 @@ const props = defineProps({
       return false;
     },
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
   requiredIf: {
     type: Function,
-    default: () => {
+    default: undefined,
-      return false;
-    },
   },
   readonlyIf: {
     type: Function,
@@ -66,8 +70,11 @@ const rulesComputed = computed(() => {
   let rules = inRules || <any>[];
   if (!hideIfComputed.value && requiredIfComputed.value) {
     rules.push(FormValidators.required());
-  } else {
+  } else if (hideIfComputed.value) {
-    rules.splice(rules.length - 1, 1);
+    rules = [];
+  }
+  if (textBtnRef?.value) {
+    textBtnRef.value.resetValidation();
   }
   return rules;
 });
@@ -76,7 +83,12 @@ const hideIfComputed = computed(() => {
   return props.hideIf();
 });
 const requiredIfComputed = computed(() => {
-  return props.requiredIf();
+  if (props.requiredIf) {
+    return props.requiredIf() || false;
+  } else if (props.required) {
+    return true;
+  }
+  return false;
 });
 const readonlyIfComputed = computed(() => {
   return props.readonlyIf();

io.sc.platform.core.frontend/src/platform/components/form/elements/WTextarea.vue

@@ -2,6 +2,7 @@
   <div>
     <q-input
       v-show="!hideIfComputed"
+      ref="textareaRef"
       :hide-bottom-space="true"
       :hide-hint="true"
       :outlined="true"
@@ -18,9 +19,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps, useAttrs } from 'vue';
+import { ref, computed, defineProps, useAttrs } from 'vue';
 import { FormValidators } from '@/platform/components';
 
+const textareaRef = ref();
 const attrs = useAttrs();
 const inRules = attrs.rules;
 const props = defineProps({
@@ -30,11 +32,13 @@ const props = defineProps({
       return false;
     },
   },
+  required: {
+    type: Boolean,
+    default: false,
+  },
   requiredIf: {
     type: Function,
-    default: () => {
+    default: undefined,
-      return false;
-    },
   },
   readonlyIf: {
     type: Function,
@@ -54,8 +58,11 @@ const rulesComputed = computed(() => {
   let rules = inRules || <any>[];
   if (!hideIfComputed.value && requiredIfComputed.value) {
     rules.push(FormValidators.required());
-  } else {
+  } else if (hideIfComputed.value) {
-    rules.splice(rules.length - 1, 1);
+    rules = [];
+  }
+  if (textareaRef?.value) {
+    textareaRef.value.resetValidation();
   }
   return rules;
 });
@@ -64,7 +71,12 @@ const hideIfComputed = computed(() => {
   return props.hideIf();
 });
 const requiredIfComputed = computed(() => {
-  return props.requiredIf();
+  if (props.requiredIf) {
+    return props.requiredIf() || false;
+  } else if (props.required) {
+    return true;
+  }
+  return false;
 });
 const readonlyIfComputed = computed(() => {
   return props.readonlyIf();

io.sc.platform.core.frontend/src/platform/components/utils/componentComm.ts

@@ -283,7 +283,7 @@ function columnChildrenHandler(item: any, gridColumns: any) {
 export function extractTableColumnsProps(props: any) {
   const gridColumns = <any>[];
   if (props.columns && props.columns.length > 0) {
-    if (props.showSortNo) {
+    if (props.sortNo && !props.tree) {
       gridColumns.push({ name: '_sortNo_', align: 'center', label: '序号', field: '_sortNo_' });
     }
     props.columns.forEach((item: any) => {

io.sc.platform.core.frontend/src/views/likm/Form.vue

@@ -8,36 +8,42 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
 import { FormValidators } from '@/platform/components';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 const formRef = ref();
 const aaaa = {
   fields: [
     {
-      label: '姓名',
+      label: t('theme.main'),
       name: 'name',
-      type: 'w-text',
+      type: 'password',
       // maxlength: 10,
-      rules: [FormValidators.lengthRange(5, 10, '22222')],
+      required: true,
-      defaultValue: '123',
+      // requiredIf: () => {
+      //   return false;
+      // },
       colspan: 2,
-      requiredIf: () => true,
+      // requiredIf: () => false,
-      'onUpdate:modelValue': () => {},
+      // 'onUpdate:modelValue': (value) => {
+      //   formRef.value.data.ah = '111';
+      // },
       onFocus: () => {
         // console.info('33333333');
       },
     },
-    {
+    // {
-      label: '机构',
+    //   label: '机构',
-      name: 'org',
+    //   name: 'org',
-      type: 'w-text-btn',
+    //   type: 'w-text-btn',
-      requiredIf: () => true,
+    //   requiredIf: () => true,
-      // buttonPosition: 'prepend',
+    //   // buttonPosition: 'prepend',
-      button: {
+    //   button: {
-        icon: 'home',
+    //     icon: 'home',
-        click: () => {
+    //     click: () => {
-          console.info('点击！！');
+    //       console.info('点击！！');
-        },
+    //     },
-      },
+    //   },
-    },
+    // },
     {
       label: '年龄',
       name: 'age',
@@ -56,6 +62,8 @@ const aaaa = {
       label: '爱好',
       name: 'ah',
       type: 'w-text',
+      rules: [],
+      reactiveRules: true,
       requiredIf: () => true,
     },
     {
@@ -75,9 +83,9 @@ const aaaa = {
       requiredIf: () => true,
       'onUpdate:modelValue': (value) => {
         if (value === 1) {
-          formRef.value.fieldsMap.get('addr').label = '地址2222';
+          formRef.value.fields.addr.label = '地址2222';
         } else {
-          formRef.value.fieldsMap.get('addr').label = '地址3333';
+          formRef.value.fields.addr.label = '地址3333';
         }
       },
     },
@@ -87,16 +95,16 @@ const aaaa = {
       rows: 2,
       colspan: 'full',
       type: 'w-textarea',
-      hideIf: () => {
+      // hideIf: () => {
-        if (formRef.value) {
+      //   if (formRef.value) {
-          if (formRef.value.data.sex && formRef.value.data.sex === 1) {
+      //     if (formRef.value.data.sex && formRef.value.data.sex === 1) {
-            return false;
+      //       return true;
-          } else {
+      //     } else {
-            return false;
+      //       return false;
-          }
+      //     }
-        }
+      //   }
-        return false;
+      //   return false;
-      },
+      // },
       requiredIf: () => true,
       // readonlyIf: () => {
       //   return true;
@@ -129,10 +137,19 @@ const aaaa = {
 };
 
 const submit = async () => {
-  aaaa.fields[1].required = false;
+  // aaaa.fields[1].required = false;
-  const validateResult = await formRef.value.validate();
+  // const validateResult = await formRef.value.validate();
-  console.info('表单验证结果：', validateResult);
+  // console.info('表单验证结果：', validateResult);
-  console.info('数据：', formRef.value.getData());
+  const errors = [
+    { fieldName: 'name', errorMessage: '个数必须在1和4之间' },
+    { fieldName: 'name', errorMessage: '不能包含@符号' },
+    { fieldName: 'age', errorMessage: '年龄不能为负数' },
+  ];
+  formRef.value.setValidationErrors(errors);
+  // console.info('数据：', formRef.value.getData());
+  // formRef.value.fieldsMap.get('name').required = false;
+  // console.info('xxx===', formRef.value.fieldsMap.get('ah'));
+  // const validateResult = await formRef.value.validate();
 };
 const reset = () => {
   formRef.value.reset();