表格优化提交

io.sc.platform.core.frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "platform-core",
-  "version": "8.1.141",
+  "version": "8.1.142",
   "description": "前端核心包,用于快速构建前端的脚手架",
   "//main": "库的主文件",
   "main": "dist/platform-core.js",

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

@@ -1,6 +1,13 @@
 <template>
   <div v-show="showIfComputed">
-    <q-checkbox v-model="checkboxValue" v-bind="attrs" :rules="rulesComputed" :disable="disableIfComputed" @update:model-value="updateModelValue"></q-checkbox>
+    <q-checkbox
+      v-model="checkboxValue"
+      v-bind="attrs"
+      :rules="rulesComputed"
+      :disable="disableIfComputed"
+      @update:model-value="updateModelValue"
+      @change="changeValue"
+    ></q-checkbox>
   </div>
 </template>
 
@@ -10,6 +17,10 @@ import { computed, defineProps, useAttrs, ref, watch } from 'vue';
 const attrs = useAttrs();
 const rules = attrs.rules;
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   modelValue: { type: Boolean, default: false },
   showIf: {
     type: Function,
@@ -28,7 +39,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 const checkboxValue = ref(props.modelValue);
 watch(
   () => props.modelValue,
@@ -46,13 +57,27 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf({
+    value: checkboxValue.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: checkboxValue.value,
+    form: props.form,
+  });
 });
 
 const updateModelValue = (value) => {
-  emit('update:modelValue', value);
+  emit('update:modelValue', value, props.form);
+  changeValue(value);
+};
+
+const changeValue = (value) => {
+  emit('change', {
+    value: value,
+    form: props.form,
+  });
 };
 </script>

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

@@ -16,6 +16,7 @@
       @focus.stop.prevent="focus"
       @blur.stop.prevent="blur"
       @update:model-value="updateModelValue"
+      @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
       <template #control>
@@ -63,6 +64,10 @@ const attrs = useAttrs();
 const rules = attrs.rules;
 const fieldRef = ref();
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   modelValue: { type: String, default: '' },
   lang: { type: String, default: 'json' },
   width: { type: [Number, String], default: '100%' },
@@ -100,7 +105,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emits = defineEmits(['update:modelValue']);
+const emits = defineEmits(['update:modelValue', 'change']);
 const codeMirrorValue = ref(props.modelValue);
 watch(
   () => props.modelValue,
@@ -123,21 +128,35 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf({
+    value: codeMirrorValue.value,
+    form: props.form,
+  });
 });
 const requiredIfComputed = computed(() => {
   if (props.requiredIf) {
-    return props.requiredIf(props.form) || false;
+    return (
+      props.requiredIf({
+        value: codeMirrorValue.value,
+        form: props.form,
+      }) || false
+    );
   } else if (props.required) {
     return true;
   }
   return false;
 });
 const readonlyIfComputed = computed(() => {
-  return props.readonlyIf(props.form);
+  return props.readonlyIf({
+    value: codeMirrorValue.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: codeMirrorValue.value,
+    form: props.form,
+  });
 });
 
 const basicSetup = [
@@ -223,7 +242,8 @@ onMounted(() => {
         }),
         // 以下代码可以添加内容变化后的操作, 为避免重复操作, 更新操作放到 blur 方法中了
         EditorView.updateListener.of(function (e) {
-          emits('update:modelValue', e.state.doc.toString());
+          // emits('update:modelValue', e.state.doc.toString());
+          updateModelValue(e.state.doc.toString());
         }),
       ],
       parent: codemirrorRef.value,
@@ -274,11 +294,21 @@ const configure = (values) => {
 };
 
 const updateModelValue = (value) => {
-  emits('update:modelValue', value);
+  emits('update:modelValue', value, props.form);
+  changeValue(value);
+};
+const changeValue = (value) => {
+  emits('change', {
+    value: value,
+    form: props.form,
+  });
 };
 const buttonClick = (button) => {
   if (button.click) {
-    button.click(toRaw(codeMirrorValue.value), props.form);
+    button.click({
+      value: codeMirrorValue.value,
+      form: props.form,
+    });
   }
 };
 

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

@@ -12,6 +12,7 @@
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
       @update:model-value="colorChanged"
+      @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
       <template #append>
@@ -34,6 +35,7 @@
               default-view="palette"
               style="max-width: 250px"
               @update:model-value="colorChanged"
+              @change="changeValue"
             />
           </q-popup-proxy>
         </q-btn>
@@ -63,6 +65,10 @@ const attrs = useAttrs();
 const rules = attrs.rules;
 const colorRef = ref();
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   modelValue: { type: String, default: '' },
   restore: { type: Boolean, default: false },
   showIf: {
@@ -96,7 +102,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 
 const isShow = ref(false);
 const defaultValue = '#000000';
@@ -117,14 +123,6 @@ const computedColorValue = computed(() => {
   return colorValueRef.value;
 });
 
-// const computedBackgroundColorValue = computed(() => {
-//   const color: string = toRaw(colorValueRef.value);
-//   if (color.toLowerCase() === 'white' || color.toLowerCase() === '#ffffff' || color.toLowerCase() === '#fff') {
-//     return '#eee';
-//   }
-//   return undefined;
-// });
-
 const rulesComputed = computed(() => {
   let result = rules || <any>[];
   if (showIfComputed.value && requiredIfComputed.value) {
@@ -139,21 +137,35 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf({
+    value: colorValueRef.value,
+    form: props.form,
+  });
 });
 const requiredIfComputed = computed(() => {
   if (props.requiredIf) {
-    return props.requiredIf(props.form) || false;
+    return (
+      props.requiredIf({
+        value: colorValueRef.value,
+        form: props.form,
+      }) || false
+    );
   } else if (props.required) {
     return true;
   }
   return false;
 });
 const readonlyIfComputed = computed(() => {
-  return props.readonlyIf(props.form);
+  return props.readonlyIf({
+    value: colorValueRef.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: colorValueRef.value,
+    form: props.form,
+  });
 });
 
 const computedStoreBackgroundColorValue = computed(() => {
@@ -165,12 +177,18 @@ const computedStoreBackgroundColorValue = computed(() => {
 });
 
 const colorChanged = (value) => {
-  emit('update:modelValue', value);
+  emit('update:modelValue', value, props.form);
   isShow.value = false;
 };
+const changeValue = (value) => {
+  emit('change', {
+    value: value,
+    form: props.form,
+  });
+};
 
 const restoreDefaultValue = () => {
   colorValueRef.value = restoreValue;
-  emit('update:modelValue', restoreValue);
+  emit('update:modelValue', restoreValue, props.form);
 };
 </script>

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

@@ -12,6 +12,7 @@
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
       @update:model-value="colorSelected"
+      @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
       <template #append>
@@ -34,7 +35,7 @@
                 :key="`${color}`"
                 :class="`bg-${color}`"
                 style="min-width: 20px; max-width: 20px; min-height: 20px; max-height: 20px"
-                @click="colorSelected(`${color}`)"
+                @click="colorClick(`${color}`)"
               >
                 <q-tooltip> {{ color }}</q-tooltip>
               </div>
@@ -68,6 +69,10 @@ const attrs = useAttrs();
 const rules = attrs.rules;
 const colorRef = ref();
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   modelValue: { type: String, default: '' },
   restore: { type: Boolean, default: false },
   showIf: {
@@ -101,7 +106,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 
 const quasarColors = [
   ['red', 'red-1', 'red-2', 'red-3', 'red-4', 'red-5', 'red-6', 'red-7', 'red-8', 'red-9', 'red-10', 'red-11', 'red-12', 'red-13', 'red-14'],
@@ -322,7 +327,10 @@ const isShow = ref(false);
 const defaultValue = 'black';
 const colorValueRef = ref(props.modelValue || defaultValue);
 if (Tools.isEmpty(props.modelValue)) {
-  emit('update:modelValue', colorValueRef.value);
+  emit('update:modelValue', {
+    value: colorValueRef.value,
+    form: props.form,
+  });
 }
 const restoreValue = toRaw(props.modelValue || defaultValue);
 
@@ -367,31 +375,55 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf({
+    value: colorValueRef.value,
+    form: props.form,
+  });
 });
 const requiredIfComputed = computed(() => {
   if (props.requiredIf) {
-    return props.requiredIf(props.form) || false;
+    return (
+      props.requiredIf({
+        value: colorValueRef.value,
+        form: props.form,
+      }) || false
+    );
   } else if (props.required) {
     return true;
   }
   return false;
 });
 const readonlyIfComputed = computed(() => {
-  return props.readonlyIf(props.form);
+  return props.readonlyIf({
+    value: colorValueRef.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: colorValueRef.value,
+    form: props.form,
+  });
 });
 
 const colorSelected = (value) => {
   colorValueRef.value = value;
-  emit('update:modelValue', value);
+  emit('update:modelValue', value, props.form);
   isShow.value = false;
 };
+const changeValue = (value) => {
+  emit('change', {
+    value: value,
+    form: props.form,
+  });
+};
+const colorClick = (value) => {
+  colorSelected(value);
+  changeValue(value);
+};
 
 const restoreDefaultValue = () => {
   colorValueRef.value = restoreValue;
-  emit('update:modelValue', restoreValue);
+  emit('update:modelValue', restoreValue, props.form);
 };
 </script>

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

@@ -12,6 +12,8 @@
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
       :v-bind="attrs"
+      @update:model-value="updateModelValue"
+      @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
       <template #append>
@@ -73,6 +75,10 @@ const attrs = useAttrs();
 const rules = attrs.rules;
 const cronRef = ref();
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   modelValue: { type: String, default: '' },
   showIf: {
     type: Function,
@@ -105,7 +111,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 
 const isShow = ref(false);
 const selectedTab = ref('second');
@@ -141,21 +147,35 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf({
+    value: valueRef.value,
+    form: props.form,
+  });
 });
 const requiredIfComputed = computed(() => {
   if (props.requiredIf) {
-    return props.requiredIf(props.form) || false;
+    return (
+      props.requiredIf({
+        value: valueRef.value,
+        form: props.form,
+      }) || false
+    );
   } else if (props.required) {
     return true;
   }
   return false;
 });
 const readonlyIfComputed = computed(() => {
-  return props.readonlyIf(props.form);
+  return props.readonlyIf({
+    value: valueRef.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: valueRef.value,
+    form: props.form,
+  });
 });
 
 const valueChanged = () => {
@@ -170,6 +190,18 @@ const valueChanged = () => {
 
   const result = Tools.join(values, ' ');
   valueRef.value = result;
-  emit('update:modelValue', result);
+  emit('update:modelValue', result, props.form);
+  changeValue(result);
+};
+
+const updateModelValue = (value) => {
+  valueRef.value = value;
+  emit('update:modelValue', value, props.form);
+};
+const changeValue = (value) => {
+  emit('change', {
+    value: value,
+    form: props.form,
+  });
 };
 </script>

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

@@ -12,12 +12,13 @@
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
       @update:model-value="updateModelValue"
+      @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
       <template #append>
         <q-icon :name="IconEnum.日期" class="cursor-pointer">
           <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-            <q-date v-model="dateValue" today-btn mask="YYYY-MM-DD" @update:model-value="updateModelValue">
+            <q-date v-model="dateValue" today-btn mask="YYYY-MM-DD" @update:model-value="dateSelected">
               <div class="row items-center justify-end">
                 <q-btn v-close-popup label="关闭" color="primary" flat />
               </div>
@@ -38,6 +39,10 @@ const dateRef = ref();
 const attrs = useAttrs();
 const rules = attrs.rules;
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   type: {
     type: String,
     default: 'w-date',
@@ -74,7 +79,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 const dateValue = ref(props.modelValue);
 watch(
   () => props.modelValue,
@@ -97,24 +102,49 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf({
+    value: dateValue.value,
+    form: props.form,
+  });
 });
 const requiredIfComputed = computed(() => {
   if (props.requiredIf) {
-    return props.requiredIf(props.form) || false;
+    return (
+      props.requiredIf({
+        value: dateValue.value,
+        form: props.form,
+      }) || false
+    );
   } else if (props.required) {
     return true;
   }
   return false;
 });
 const readonlyIfComputed = computed(() => {
-  return props.readonlyIf(props.form);
+  return props.readonlyIf({
+    value: dateValue.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: dateValue.value,
+    form: props.form,
+  });
 });
 
 const updateModelValue = (value) => {
-  emit('update:modelValue', value);
+  emit('update:modelValue', value, props.form);
+};
+const dateSelected = (value) => {
+  updateModelValue(value);
+  changeValue(value);
+};
+
+const changeValue = (value) => {
+  emit('change', {
+    value: value,
+    form: props.form,
+  });
 };
 </script>

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

@@ -11,7 +11,8 @@
       :rules="rulesComputed"
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
-      @update:model-value="valueChanged"
+      @update:model-value="updateModelValue"
+      @change="changeValue"
     >
       <template #prepend>
         <q-icon v-if="valueRef" :name="valueRef"> </q-icon>
@@ -91,7 +92,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, toRaw, onMounted, computed, useAttrs, watch } from 'vue';
+import { ref, toRaw, computed, useAttrs, watch } from 'vue';
 import { Tools } from '@/platform';
 import { FormValidators } from '@/platform/components';
 import bootstrap from './icons/bootstrap.json';
@@ -106,6 +107,10 @@ const attrs = useAttrs();
 const rules = attrs.rules;
 const iconRef = ref();
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   modelValue: { type: String, default: '' },
   restore: { type: Boolean, default: false },
   showIf: {
@@ -139,7 +144,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 
 const iconSets = [
   { name: 'bootstrap', label: 'Bootstrap', prefix: 'bi-', icons: bootstrap },
@@ -178,21 +183,35 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf({
+    value: valueRef.value,
+    form: props.form,
+  });
 });
 const requiredIfComputed = computed(() => {
   if (props.requiredIf) {
-    return props.requiredIf(props.form) || false;
+    return (
+      props.requiredIf({
+        value: valueRef.value,
+        form: props.form,
+      }) || false
+    );
   } else if (props.required) {
     return true;
   }
   return false;
 });
 const readonlyIfComputed = computed(() => {
-  return props.readonlyIf(props.form);
+  return props.readonlyIf({
+    value: valueRef.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: valueRef.value,
+    form: props.form,
+  });
 });
 
 if (Tools.isEmpty(valueRef.value)) {
@@ -216,21 +235,27 @@ if (Tools.isEmpty(valueRef.value)) {
 const iconItemClick = (icon: string) => {
   valueRef.value = icon;
   isShow.value = false;
+
+  changeValue(icon);
 };
 
-const valueChanged = (value) => {
+const updateModelValue = (value) => {
   valueRef.value = value;
-  emit('update:modelValue', value);
+  emit('update:modelValue', value, props.form);
   isShow.value = false;
 };
+const changeValue = (value) => {
+  emit('change', {
+    value: value,
+    form: props.form,
+  });
+};
 
 const restoreDefaultValue = () => {
   valueRef.value = restoreValue;
-  emit('update:modelValue', restoreValue);
+  emit('update:modelValue', restoreValue, props.form);
 };
 
-onMounted(() => {});
-
 const show = () => {
   searchRef.value = '';
   document.getElementById(valueRef.value)?.scrollIntoView(true);

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

@@ -90,27 +90,44 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(numberValue.value, props.form);
+  return props.showIf({
+    value: numberValue.value,
+    form: props.form,
+  });
 });
 const requiredIfComputed = computed(() => {
   if (props.requiredIf) {
-    return props.requiredIf(props.form) || false;
+    return (
+      props.requiredIf({
+        value: numberValue.value,
+        form: props.form,
+      }) || false
+    );
   } else if (props.required) {
     return true;
   }
   return false;
 });
 const readonlyIfComputed = computed(() => {
-  return props.readonlyIf(props.form);
+  return props.readonlyIf({
+    value: numberValue.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: numberValue.value,
+    form: props.form,
+  });
 });
 
 const updateModelValue = (value) => {
   emit('update:modelValue', Number(value), props.form);
 };
 const changeValue = (value) => {
-  emit('change', value, props.form);
+  emit('change', {
+    value: value,
+    form: props.form,
+  });
 };
 </script>

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

@@ -4,7 +4,14 @@
       {{ label }}
     </div>
     <q-separator />
-    <q-option-group v-model="optionGroupValue" v-bind="attrs" :type="optionType" :disable="disableIfComputed" @update:model-value="updateModelValue" />
+    <q-option-group
+      v-model="optionGroupValue"
+      v-bind="attrs"
+      :type="optionType"
+      :disable="disableIfComputed"
+      @update:model-value="updateModelValue"
+      @change="changeValue"
+    />
   </div>
 </template>
 
@@ -13,6 +20,10 @@ import { computed, defineProps, useAttrs, ref, watch } from 'vue';
 
 const attrs = useAttrs();
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   modelValue: { type: [Number, Boolean, String, Array], default: undefined },
   type: {
     type: String,
@@ -43,7 +54,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 const optionGroupValue = ref(props.modelValue);
 watch(
   () => props.modelValue,
@@ -53,13 +64,27 @@ watch(
 );
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf({
+    value: optionGroupValue.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: optionGroupValue.value,
+    form: props.form,
+  });
 });
 
 const updateModelValue = (value) => {
-  emit('update:modelValue', value);
+  emit('update:modelValue', value, props.form);
+  changeValue(value);
+};
+
+const changeValue = (value) => {
+  emit('change', {
+    value: value,
+    form: props.form,
+  });
 };
 </script>

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

@@ -14,6 +14,7 @@
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
       @update:model-value="updateModelValue"
+      @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
     </q-input>
@@ -28,6 +29,10 @@ const pwdRef = ref();
 const attrs = useAttrs();
 const rules = attrs.rules;
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   modelValue: { type: String, default: '' },
   showIf: {
     type: Function,
@@ -60,7 +65,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 const passwordValue = ref(props.modelValue);
 watch(
   () => props.modelValue,
@@ -83,24 +88,45 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf({
+    value: passwordValue.value,
+    form: props.form,
+  });
 });
 const requiredIfComputed = computed(() => {
   if (props.requiredIf) {
-    return props.requiredIf(props.form) || false;
+    return (
+      props.requiredIf({
+        value: passwordValue.value,
+        form: props.form,
+      }) || false
+    );
   } else if (props.required) {
     return true;
   }
   return false;
 });
 const readonlyIfComputed = computed(() => {
-  return props.readonlyIf(props.form);
+  return props.readonlyIf({
+    value: passwordValue.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: passwordValue.value,
+    form: props.form,
+  });
 });
 
 const updateModelValue = (value) => {
-  emit('update:modelValue', value);
+  emit('update:modelValue', value, props.form);
+};
+
+const changeValue = (value) => {
+  emit('change', {
+    value: value,
+    form: props.form,
+  });
 };
 </script>

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

@@ -12,6 +12,7 @@
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
       @update:model-value="positionChanged"
+      @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
       <template #append>
@@ -69,6 +70,10 @@ const attrs = useAttrs();
 const rules = attrs.rules;
 const positionRef = ref();
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   modelValue: { type: String, default: '' },
   restore: { type: Boolean, default: false },
   showIf: {
@@ -102,7 +107,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 
 const positionList = ['top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right'];
 
@@ -139,31 +144,52 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf({
+    value: positionValueRef.value,
+    form: props.form,
+  });
 });
 const requiredIfComputed = computed(() => {
   if (props.requiredIf) {
-    return props.requiredIf(props.form) || false;
+    return (
+      props.requiredIf({
+        value: positionValueRef.value,
+        form: props.form,
+      }) || false
+    );
   } else if (props.required) {
     return true;
   }
   return false;
 });
 const readonlyIfComputed = computed(() => {
-  return props.readonlyIf(props.form);
+  return props.readonlyIf({
+    value: positionValueRef.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: positionValueRef.value,
+    form: props.form,
+  });
 });
 
 const positionChanged = (value) => {
   positionValueRef.value = value;
-  emit('update:modelValue', value);
+  emit('update:modelValue', value, props.form);
   isShow.value = false;
+  changeValue(value);
 };
 
 const restoreDefaultValue = () => {
   positionValueRef.value = restoreValue;
-  emit('update:modelValue', restoreValue);
+  emit('update:modelValue', restoreValue, props.form);
+};
+const changeValue = (value) => {
+  emit('change', {
+    value: value,
+    form: props.form,
+  });
 };
 </script>

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

@@ -14,6 +14,7 @@
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
       @update:model-value="updateModelValue"
+      @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
     </q-select>
@@ -28,6 +29,10 @@ const selectRef = ref();
 const attrs = useAttrs();
 const rules = attrs.rules;
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   modelValue: { type: [String, Number, Boolean, Array], default: '' },
   showIf: {
     type: Function,
@@ -60,7 +65,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 const selectValue = ref(props.modelValue);
 watch(
   () => props.modelValue,
@@ -83,24 +88,46 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf({
+    value: selectValue.value,
+    form: props.form,
+  });
 });
 const requiredIfComputed = computed(() => {
   if (props.requiredIf) {
-    return props.requiredIf(props.form) || false;
+    return (
+      props.requiredIf({
+        value: selectValue.value,
+        form: props.form,
+      }) || false
+    );
   } else if (props.required) {
     return true;
   }
   return false;
 });
 const readonlyIfComputed = computed(() => {
-  return props.readonlyIf(props.form);
+  return props.readonlyIf({
+    value: selectValue.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: selectValue.value,
+    form: props.form,
+  });
 });
 
 const updateModelValue = (value) => {
-  emit('update:modelValue', value);
+  emit('update:modelValue', value, props.form);
+  changeValue(value);
+};
+
+const changeValue = (value) => {
+  emit('change', {
+    value: value,
+    form: props.form,
+  });
 };
 </script>

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

@@ -13,6 +13,7 @@
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
       @update:model-value="updateModelValue"
+      @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
     </q-input>
@@ -27,6 +28,10 @@ const textRef = ref();
 const attrs = useAttrs();
 const rules = attrs.rules;
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   modelValue: { type: String, default: '' },
   showIf: {
     type: Function,
@@ -59,7 +64,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue', 'changeValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 const textValue = ref(props.modelValue);
 watch(
   () => props.modelValue,
@@ -82,25 +87,45 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf({
+    value: textValue.value,
+    form: props.form,
+  });
 });
 const requiredIfComputed = computed(() => {
   if (props.requiredIf) {
-    return props.requiredIf(props.form) || false;
+    return (
+      props.requiredIf({
+        value: textValue.value,
+        form: props.form,
+      }) || false
+    );
   } else if (props.required) {
     return true;
   }
   return false;
 });
 const readonlyIfComputed = computed(() => {
-  return props.readonlyIf(props.form);
+  return props.readonlyIf({
+    value: textValue.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: textValue.value,
+    form: props.form,
+  });
 });
 
 const updateModelValue = (value) => {
-  emit('update:modelValue', value);
-  emit('changeValue', value, props.form);
+  emit('update:modelValue', value, props.form);
+};
+
+const changeValue = (value) => {
+  emit('change', {
+    value: value,
+    form: props.form,
+  });
 };
 </script>

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

@@ -14,6 +14,7 @@
       :disable="disableIfComputed"
       @focus="() => {}"
       @update:model-value="updateModelValue"
+      @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
       <template v-if="attrs.button && attrs.buttonPosition === 'prepend'" #prepend>
@@ -40,6 +41,10 @@ const textBtnRef = ref();
 const attrs = useAttrs();
 const rules = attrs.rules;
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   modelValue: { type: String, default: '' },
   showIf: {
     type: Function,
@@ -72,7 +77,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 const textBtnValue = ref(props.modelValue);
 watch(
   () => props.modelValue,
@@ -95,24 +100,45 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf({
+    value: textBtnValue.value,
+    form: props.form,
+  });
 });
 const requiredIfComputed = computed(() => {
   if (props.requiredIf) {
-    return props.requiredIf(props.form) || false;
+    return (
+      props.requiredIf({
+        value: textBtnValue.value,
+        form: props.form,
+      }) || false
+    );
   } else if (props.required) {
     return true;
   }
   return false;
 });
 const readonlyIfComputed = computed(() => {
-  return props.readonlyIf(props.form);
+  return props.readonlyIf({
+    value: textBtnValue.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: textBtnValue.value,
+    form: props.form,
+  });
 });
 
 const updateModelValue = (value) => {
-  emit('update:modelValue', value);
+  emit('update:modelValue', value, props.form);
+};
+
+const changeValue = (value) => {
+  emit('change', {
+    value: value,
+    form: props.form,
+  });
 };
 </script>

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

@@ -13,6 +13,7 @@
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
       @update:model-value="updateModelValue"
+      @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
     </q-input>
@@ -27,6 +28,10 @@ const textareaRef = ref();
 const attrs = useAttrs();
 const rules = attrs.rules;
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   modelValue: { type: String, default: '' },
   showIf: {
     type: Function,
@@ -59,7 +64,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 const textareaValue = ref(props.modelValue);
 watch(
   () => props.modelValue,
@@ -82,24 +87,45 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf({
+    value: textareaValue.value,
+    form: props.form,
+  });
 });
 const requiredIfComputed = computed(() => {
   if (props.requiredIf) {
-    return props.requiredIf(props.form) || false;
+    return (
+      props.requiredIf({
+        value: textareaValue.value,
+        form: props.form,
+      }) || false
+    );
   } else if (props.required) {
     return true;
   }
   return false;
 });
 const readonlyIfComputed = computed(() => {
-  return props.readonlyIf(props.form);
+  return props.readonlyIf({
+    value: textareaValue.value,
+    form: props.form,
+  });
 });
 const disableIfComputed = computed(() => {
-  return props.disableIf(props.form);
+  return props.disableIf({
+    value: textareaValue.value,
+    form: props.form,
+  });
 });
 
 const updateModelValue = (value) => {
-  emit('update:modelValue', value);
+  emit('update:modelValue', value, props.form);
+};
+
+const changeValue = (value) => {
+  emit('change', {
+    value: value,
+    form: props.form,
+  });
 };
 </script>

io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue

@@ -1057,6 +1057,7 @@ function findParents(arrData: any, name: any) {
 }
 
 const handlerMoreRowColumnTitle = () => {
+  console.info('columnTitleState======', columnTitleState);
   tableColumns.value.forEach((tableColumn: any) => {
     columnToMap(tableColumn);
   });
@@ -1115,6 +1116,8 @@ const handlerMoreRowColumnTitle = () => {
   arr.forEach((item) => {
     columnTitleState.columnTitleArr.push(item[1]);
   });
+
+  console.info('columnTitleState======', columnTitleState);
 };
 
 const selectionComputed = computed(() => {
@@ -2103,7 +2106,7 @@ const handlerQueryFormShowField = () => {
 };
 
 onMounted(() => {
-  if (extractTableColumns.value && extractTableColumns.value > tableColumns.value.length) {
+  if (extractTableColumns.value && extractTableColumns.value.length > tableColumns.value.length) {
     handlerMoreRowColumnTitle();
   }
   handlerQueryFormShowField();

io.sc.platform.core.frontend/src/platform/types/index.ts

@@ -17,3 +17,12 @@ export type { TagViewType } from './TagViewType';
 export type { UserSessionType } from './UserSessionType';
 export type { UserType } from './UserType';
 export type { MockType } from './MockType';
+export type {
+  ShowIfArgsType,
+  RequiredIfArgsType,
+  ReadonlyIfArgsType,
+  DisableIfArgsType,
+  UpdateModelValueEventArgsType,
+  ChangeEventArgsType,
+  CodeMirrorButtonClickEventArgsType
+} from './FormApiArgsType';