表格优化提交

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

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

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

@@ -8,7 +8,6 @@
             v-if="field.name"
             v-model="formData[field.name]"
             v-bind="field"
-            :form-data="formData"
             :form="instance"
             :class="
               (field.colsFirst ? 'col-start-1 ' : ' ') +
@@ -46,7 +45,7 @@
 <script setup lang="ts">
 import { ref, reactive, watch, computed, toRaw, defineProps, useAttrs, getCurrentInstance } from 'vue';
 import { useQuasar } from 'quasar';
-import { VueTools } from '@/platform';
+import { VueTools, Tools } from '@/platform';
 import { PageStatusEnum } from '@/platform/components/utils';
 
 const $q = useQuasar();
@@ -74,8 +73,11 @@ const fiedType = {
   checkbox: 'w-checkbox',
   cron: 'w-cron',
   'color-input': 'w-color-input',
+  colorInput: 'w-color-input',
   'color-input-palette': 'w-color-input-palette',
+  colorInputPalette: 'w-color-input-palette',
   'code-mirror': 'w-code-mirror',
+  codeMirror: 'w-code-mirror',
   position: 'w-position',
   date: 'w-date',
   number: 'w-number',
@@ -83,23 +85,25 @@ const fiedType = {
   text: 'w-text',
   textarea: 'w-textarea',
   'text-btn': 'w-text-btn',
+  textBtn: 'w-text-btn',
   password: 'w-password',
   'option-group': 'w-option-group',
+  optionGroup: 'w-option-group',
 };
 
 const defaultValueHandler = (field) => {
-  if (field.hasOwnProperty('defaultValue') && field.defaultValue !== null && field.defaultValue !== undefined) {
+  if (!Tools.isEmpty(field.defaultValue)) {
     return field.defaultValue;
   } else if (field.type === 'checkbox' || field.type === 'w-checkbox') {
     return false;
   } else if (field.type === 'option-group' || field.type === 'w-option-group') {
     if (field.optionType === 'radio') {
-      return null;
+      return undefined;
     } else {
       return [];
     }
   }
-  return null;
+  return undefined;
 };
 
 watch(

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

@@ -1,16 +1,16 @@
 <template>
   <div v-show="showIfComputed">
-    <q-checkbox v-bind="attrs" :rules="rulesComputed" :disable="disableIfComputed"></q-checkbox>
+    <q-checkbox v-model="checkboxValue" v-bind="attrs" :rules="rulesComputed" :disable="disableIfComputed" @update:model-value="updateModelValue"></q-checkbox>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps, useAttrs } from 'vue';
-// import { FormValidators } from '@/platform/components';
+import { computed, defineProps, useAttrs, ref, watch } from 'vue';
 
 const attrs = useAttrs();
-const inRules = attrs.rules;
+const rules = attrs.rules;
 const props = defineProps({
+  modelValue: { type: Boolean, default: false },
   showIf: {
     type: Function,
     default: () => {
@@ -28,13 +28,21 @@ const props = defineProps({
     default: undefined,
   },
 });
+const emit = defineEmits(['update:modelValue']);
+const checkboxValue = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    checkboxValue.value = newVal;
+  },
+);
 
 const rulesComputed = computed(() => {
-  let rules = inRules || <any>[];
+  let result = rules || <any>[];
   if (!showIfComputed.value) {
-    rules = [];
+    result = [];
   }
-  return rules;
+  return result;
 });
 
 const showIfComputed = computed(() => {
@@ -43,4 +51,8 @@ const showIfComputed = computed(() => {
 const disableIfComputed = computed(() => {
   return props.disableIf(props.form);
 });
+
+const updateModelValue = (value) => {
+  emit('update:modelValue', value);
+};
 </script>

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

@@ -1,13 +1,48 @@
 <template>
-  <q-field v-bind="attrs" :stack-label="stackLabelRef" @focus="focus" @blur="blur">
+  <div v-show="showIfComputed">
+    <q-field
+      ref="fieldRef"
+      v-model="codeMirrorValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :stack-label="stackLabelRef"
+      :rules="rulesComputed"
+      :readonly="readonlyIfComputed"
+      :disable="disableIfComputed"
+      style="position: relative"
+      @focus.stop.prevent="focus"
+      @blur.stop.prevent="blur"
+      @update:model-value="updateModelValue"
+    >
+      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
       <template #control>
-      <div ref="codemirrorRef" style="width: 100%"></div>
+        <div ref="codemirrorRef" style="width: 100%" @focus.stop.prevent="() => {}" @click.stop.prevent="() => {}"></div>
+      </template>
+      <template #append>
+        <q-btn
+          round
+          dense
+          flat
+          v-bind="attrs.button"
+          :style="{
+            content: '',
+            position: 'absolute',
+            bottom: '5px',
+            right: '5px',
+          }"
+          @click.stop.prevent="buttonClick(attrs.button)"
+        />
       </template>
     </q-field>
+  </div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs, onMounted, onUnmounted, watch } from 'vue';
+import { ref, useAttrs, onMounted, onUnmounted, watch, computed, toRaw } from 'vue';
 import { Tools } from '@/platform';
+import { FormValidators } from '@/platform/components';
 import { EditorView } from '@codemirror/view';
 import { EditorState, Compartment } from '@codemirror/state';
 import * as view from '@codemirror/view';
@@ -25,7 +60,8 @@ import { sql } from '@codemirror/lang-sql';
 import { xml } from '@codemirror/lang-xml';
 
 const attrs = useAttrs();
-
+const rules = attrs.rules;
+const fieldRef = ref();
 const props = defineProps({
   modelValue: { type: String, default: '' },
   lang: { type: String, default: 'json' },
@@ -33,9 +69,76 @@ const props = defineProps({
   height: { type: [Number, String], default: undefined },
   rows: { type: Number, default: 4 },
   tabSize: { type: Number, default: 4 },
+  showIf: {
+    type: Function,
+    default: () => {
+      return true;
+    },
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  requiredIf: {
+    type: Function,
+    default: undefined,
+  },
+  readonlyIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  form: {
+    type: Object,
+    default: undefined,
+  },
 });
-
 const emits = defineEmits(['update:modelValue']);
+const codeMirrorValue = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    codeMirrorValue.value = newVal;
+  },
+);
+
+const rulesComputed = computed(() => {
+  let result = rules || <any>[];
+  if (showIfComputed.value && requiredIfComputed.value) {
+    result.push(FormValidators.required());
+  } else if (!showIfComputed.value) {
+    result = [];
+  }
+  if (fieldRef?.value) {
+    fieldRef.value.resetValidation();
+  }
+  return result;
+});
+
+const showIfComputed = computed(() => {
+  return props.showIf(props.form);
+});
+const requiredIfComputed = computed(() => {
+  if (props.requiredIf) {
+    return props.requiredIf(props.form) || false;
+  } else if (props.required) {
+    return true;
+  }
+  return false;
+});
+const readonlyIfComputed = computed(() => {
+  return props.readonlyIf(props.form);
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf(props.form);
+});
 
 const basicSetup = [
   EditorState.allowMultipleSelections.of(true),
@@ -96,7 +199,7 @@ const codemirrorRef = ref();
 // q-field 的 stack-label 属性是对 field 的 label 进行设置效果
 // 如果 field 有值时, 无论是否获得焦点 label 都缩小显示
 // 如果 field 无值时, 如果 field 获得焦点 label 就缩小显示, 否则 label 放大显示
-const stackLabelRef = ref(!Tools.isUndefinedOrNull(props.modelValue));
+const stackLabelRef = ref(!Tools.isUndefinedOrNull(codeMirrorValue.value));
 
 let editorView;
 let isFocus = false;
@@ -123,14 +226,14 @@ onMounted(() => {
         }),
       ],
       parent: codemirrorRef.value,
-      doc: props.modelValue,
+      doc: codeMirrorValue.value,
     });
     watch(
-      () => props.modelValue,
+      () => codeMirrorValue.value,
       () => {
         // 当未获得焦点时,更新变更, 当获得焦点时不能更新
         if (!isFocus) {
-          editorView.dispatch({ changes: { from: 0, to: editorView.state.doc.length, insert: props.modelValue } });
+          editorView.dispatch({ changes: { from: 0, to: editorView.state.doc.length, insert: codeMirrorValue.value } });
         }
       },
     );
@@ -165,6 +268,15 @@ const setValue = (value: string) => {
   editorView.dispatch({ changes: { from: 0, to: editorView.state.doc.length, insert: value } });
 };
 
+const updateModelValue = (value) => {
+  emits('update:modelValue', value);
+};
+const buttonClick = (button) => {
+  if (button.click) {
+    button.click(toRaw(codeMirrorValue), props.form);
+  }
+};
+
 defineExpose({
   getValue,
   setValue,

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

@@ -1,5 +1,19 @@
 <template>
-  <q-input v-model="colorValueRef" @update:model-value="colorChanged">
+  <div v-show="showIfComputed">
+    <q-input
+      ref="colorRef"
+      v-model="colorValueRef"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :rules="rulesComputed"
+      :readonly="readonlyIfComputed"
+      :disable="disableIfComputed"
+      @update:model-value="colorChanged"
+    >
+      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
       <template #append>
         <!-- 选择颜色按钮 -->
         <q-btn
@@ -38,30 +52,108 @@
         ></q-btn>
       </template>
     </q-input>
+  </div>
 </template>
 <script setup lang="ts">
-import { ref, toRaw, computed } from 'vue';
+import { ref, toRaw, computed, useAttrs, watch } from 'vue';
+import { Tools } from '@/platform';
+import { FormValidators } from '@/platform/components';
 
+const attrs = useAttrs();
+const rules = attrs.rules;
+const colorRef = ref();
 const props = defineProps({
-  modelValue: { type: String, default: '#000000' },
+  modelValue: { type: String, default: '' },
   restore: { type: Boolean, default: false },
+  showIf: {
+    type: Function,
+    default: () => {
+      return true;
+    },
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  requiredIf: {
+    type: Function,
+    default: undefined,
+  },
+  readonlyIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  form: {
+    type: Object,
+    default: undefined,
+  },
 });
 const emit = defineEmits(['update:modelValue']);
 
 const isShow = ref(false);
-const colorValueRef = ref(props.modelValue || '#000000');
-const restoreValue = toRaw(props.modelValue || '#000000');
+const defaultValue = '#000000';
+const colorValueRef = ref(props.modelValue || defaultValue);
+if (Tools.isEmpty(props.modelValue)) {
+  emit('update:modelValue', colorValueRef.value);
+}
+const restoreValue = toRaw(props.modelValue || defaultValue);
+
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    colorValueRef.value = newVal;
+  },
+);
 
 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';
+// 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) {
+    result.push(FormValidators.required());
+  } else if (!showIfComputed.value) {
+    result = [];
   }
-  return undefined;
+  if (colorRef?.value) {
+    colorRef.value.resetValidation();
+  }
+  return result;
+});
+
+const showIfComputed = computed(() => {
+  return props.showIf(props.form);
+});
+const requiredIfComputed = computed(() => {
+  if (props.requiredIf) {
+    return props.requiredIf(props.form) || false;
+  } else if (props.required) {
+    return true;
+  }
+  return false;
+});
+const readonlyIfComputed = computed(() => {
+  return props.readonlyIf(props.form);
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf(props.form);
 });
 
 const computedStoreBackgroundColorValue = computed(() => {

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

@@ -1,5 +1,19 @@
 <template>
-  <q-input v-model="colorValueRef" @update:model-value="colorSelected">
+  <div v-show="showIfComputed">
+    <q-input
+      ref="colorRef"
+      v-model="colorValueRef"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :rules="rulesComputed"
+      :readonly="readonlyIfComputed"
+      :disable="disableIfComputed"
+      @update:model-value="colorSelected"
+    >
+      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
       <template #append>
         <!-- 选择颜色按钮 -->
         <q-btn
@@ -43,18 +57,52 @@
         ></q-btn>
       </template>
     </q-input>
+  </div>
 </template>
 <script setup lang="ts">
-import { mdiConsoleLine } from '@quasar/extras/mdi-v4';
-import { ref, toRaw, computed } from 'vue';
+import { ref, toRaw, computed, useAttrs, watch } from 'vue';
+import { Tools } from '@/platform';
+import { FormValidators } from '@/platform/components';
 
+const attrs = useAttrs();
+const rules = attrs.rules;
+const colorRef = ref();
 const props = defineProps({
-  modelValue: { type: String, default: '#000000' },
+  modelValue: { type: String, default: '' },
   restore: { type: Boolean, default: false },
+  showIf: {
+    type: Function,
+    default: () => {
+      return true;
+    },
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  requiredIf: {
+    type: Function,
+    default: undefined,
+  },
+  readonlyIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  form: {
+    type: Object,
+    default: undefined,
+  },
 });
 const emit = defineEmits(['update:modelValue']);
 
-const htmlColors = ['white', 'black'];
 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'],
   ['pink', 'pink-1', 'pink-2', 'pink-3', 'pink-4', 'pink-5', 'pink-6', 'pink-7', 'pink-8', 'pink-9', 'pink-10', 'pink-11', 'pink-12', 'pink-13', 'pink-14'],
@@ -271,8 +319,19 @@ const quasarColors = [
 ];
 
 const isShow = ref(false);
-const colorValueRef = ref(props.modelValue || 'black');
-const restoreValue = toRaw(props.modelValue || 'black');
+const defaultValue = 'black';
+const colorValueRef = ref(props.modelValue || defaultValue);
+if (Tools.isEmpty(props.modelValue)) {
+  emit('update:modelValue', colorValueRef.value);
+}
+const restoreValue = toRaw(props.modelValue || defaultValue);
+
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    colorValueRef.value = newVal;
+  },
+);
 
 const computedColorValue = computed(() => {
   return colorValueRef.value;
@@ -294,6 +353,37 @@ const computedStoreBackgroundColorValue = computed(() => {
   return undefined;
 });
 
+const rulesComputed = computed(() => {
+  let result = rules || <any>[];
+  if (showIfComputed.value && requiredIfComputed.value) {
+    result.push(FormValidators.required());
+  } else if (!showIfComputed.value) {
+    result = [];
+  }
+  if (colorRef?.value) {
+    colorRef.value.resetValidation();
+  }
+  return result;
+});
+
+const showIfComputed = computed(() => {
+  return props.showIf(props.form);
+});
+const requiredIfComputed = computed(() => {
+  if (props.requiredIf) {
+    return props.requiredIf(props.form) || false;
+  } else if (props.required) {
+    return true;
+  }
+  return false;
+});
+const readonlyIfComputed = computed(() => {
+  return props.readonlyIf(props.form);
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf(props.form);
+});
+
 const colorSelected = (value) => {
   colorValueRef.value = value;
   emit('update:modelValue', value);

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

@@ -1,5 +1,19 @@
 <template>
-  <q-input v-model="valueRef" :v-bind="attrs">
+  <div v-show="showIfComputed">
+    <q-input
+      ref="cronRef"
+      v-model="valueRef"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :rules="rulesComputed"
+      :readonly="readonlyIfComputed"
+      :disable="disableIfComputed"
+      :v-bind="attrs"
+    >
+      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
       <template #append>
         <!-- 选择颜色按钮 -->
         <q-btn icon="bi-pencil-square" padding="2px" flat square unelevated :title="$t('select')">
@@ -41,10 +55,12 @@
         </q-btn>
       </template>
     </q-input>
+  </div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from 'vue';
+import { ref, useAttrs, watch, computed } from 'vue';
 import { Tools } from '@/platform';
+import { FormValidators } from '@/platform/components';
 import SecondSegment from './w-cron-segment/SecondSegment.vue';
 import MinuteSegment from './w-cron-segment/MinuteSegment.vue';
 import HourSegment from './w-cron-segment/HourSegment.vue';
@@ -54,9 +70,40 @@ import WeekSegment from './w-cron-segment/WeekSegment.vue';
 import YearSegment from './w-cron-segment/YearSegment.vue';
 
 const attrs = useAttrs();
-
+const rules = attrs.rules;
+const cronRef = ref();
 const props = defineProps({
   modelValue: { type: String, default: '' },
+  showIf: {
+    type: Function,
+    default: () => {
+      return true;
+    },
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  requiredIf: {
+    type: Function,
+    default: undefined,
+  },
+  readonlyIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  form: {
+    type: Object,
+    default: undefined,
+  },
 });
 const emit = defineEmits(['update:modelValue']);
 
@@ -73,6 +120,44 @@ const monthValueRef = ref(splits[4]);
 const weekValueRef = ref(splits[5]);
 const yearValueRef = ref(splits[6]);
 
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    valueRef.value = newVal;
+  },
+);
+
+const rulesComputed = computed(() => {
+  let result = rules || <any>[];
+  if (showIfComputed.value && requiredIfComputed.value) {
+    result.push(FormValidators.required());
+  } else if (!showIfComputed.value) {
+    result = [];
+  }
+  if (cronRef?.value) {
+    cronRef.value.resetValidation();
+  }
+  return result;
+});
+
+const showIfComputed = computed(() => {
+  return props.showIf(props.form);
+});
+const requiredIfComputed = computed(() => {
+  if (props.requiredIf) {
+    return props.requiredIf(props.form) || false;
+  } else if (props.required) {
+    return true;
+  }
+  return false;
+});
+const readonlyIfComputed = computed(() => {
+  return props.readonlyIf(props.form);
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf(props.form);
+});
+
 const valueChanged = () => {
   const values = [];
   values.push(secondValueRef.value ? secondValueRef.value : '*');

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

@@ -2,6 +2,7 @@
   <div v-show="showIfComputed">
     <q-input
       ref="dateRef"
+      v-model="dateValue"
       :hide-bottom-space="true"
       :hide-hint="true"
       :outlined="true"
@@ -10,12 +11,13 @@
       :rules="rulesComputed"
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
+      @update:model-value="updateModelValue"
     >
       <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="date" today-btn mask="YYYY-MM-DD">
+            <q-date v-model="dateValue" today-btn mask="YYYY-MM-DD" @update:model-value="updateModelValue">
               <div class="row items-center justify-end">
                 <q-btn v-close-popup label="关闭" color="primary" flat />
               </div>
@@ -33,10 +35,14 @@ import { FormValidators } from '@/platform/components';
 import { IconEnum } from '@/platform/enums';
 
 const dateRef = ref();
-const date = ref(null);
 const attrs = useAttrs();
-const inRules = attrs.rules;
+const rules = attrs.rules;
 const props = defineProps({
+  type: {
+    type: String,
+    default: 'w-date',
+  },
+  modelValue: { type: String, default: '' },
   showIf: {
     type: Function,
     default: () => {
@@ -68,25 +74,26 @@ const props = defineProps({
     default: undefined,
   },
 });
-
+const emit = defineEmits(['update:modelValue']);
+const dateValue = ref(props.modelValue);
 watch(
-  () => date.value,
+  () => props.modelValue,
   (newVal, oldVal) => {
-    attrs['form-data'][attrs.name] = newVal;
+    dateValue.value = newVal;
   },
 );
 
 const rulesComputed = computed(() => {
-  let rules = inRules || <any>[];
+  let result = rules || <any>[];
   if (showIfComputed.value && requiredIfComputed.value) {
-    rules.push(FormValidators.required());
+    result.push(FormValidators.required());
   } else if (!showIfComputed.value) {
-    rules = [];
+    result = [];
   }
   if (dateRef?.value) {
     dateRef.value.resetValidation();
   }
-  return rules;
+  return result;
 });
 
 const showIfComputed = computed(() => {
@@ -106,4 +113,8 @@ const readonlyIfComputed = computed(() => {
 const disableIfComputed = computed(() => {
   return props.disableIf(props.form);
 });
+
+const updateModelValue = (value) => {
+  emit('update:modelValue', value);
+};
 </script>

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

@@ -2,6 +2,7 @@
   <div v-show="showIfComputed">
     <q-input
       ref="numberRef"
+      v-model="numberValue"
       :hide-bottom-space="true"
       :hide-hint="true"
       :outlined="true"
@@ -12,6 +13,7 @@
       :rules="rulesComputed"
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
+      @update:model-value="updateModelValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
     </q-input>
@@ -19,13 +21,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, defineProps, useAttrs } from 'vue';
+import { ref, computed, defineProps, useAttrs, watch } from 'vue';
 import { FormValidators } from '@/platform/components';
 
 const numberRef = ref();
 const attrs = useAttrs();
-const inRules = attrs.rules;
+const rules = attrs.rules;
 const props = defineProps({
+  modelValue: { type: Number, default: undefined },
   precision: { type: Number, default: 0 },
   showIf: {
     type: Function,
@@ -58,19 +61,27 @@ const props = defineProps({
     default: undefined,
   },
 });
+const emit = defineEmits(['update:modelValue']);
+const numberValue = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    numberValue.value = newVal;
+  },
+);
 
 const rulesComputed = computed(() => {
-  let rules = inRules || <any>[];
-  rules.push(FormValidators.maxPrecision(props.precision));
+  let result = rules || <any>[];
+  result.push(FormValidators.maxPrecision(props.precision));
   if (showIfComputed.value && requiredIfComputed.value) {
-    rules.push(FormValidators.required());
+    result.push(FormValidators.required());
   } else if (!showIfComputed.value) {
-    rules = [];
+    result = [];
   }
   if (numberRef?.value) {
     numberRef.value.resetValidation();
   }
-  return rules;
+  return result;
 });
 
 const showIfComputed = computed(() => {
@@ -90,4 +101,8 @@ const readonlyIfComputed = computed(() => {
 const disableIfComputed = computed(() => {
   return props.disableIf(props.form);
 });
+
+const updateModelValue = (value) => {
+  emit('update:modelValue', Number(value));
+};
 </script>

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

@@ -4,15 +4,16 @@
       {{ label }}
     </div>
     <q-separator />
-    <q-option-group v-bind="attrs" :type="optionType" :disable="disableIfComputed" />
+    <q-option-group v-model="optionGroupValue" v-bind="attrs" :type="optionType" :disable="disableIfComputed" @update:model-value="updateModelValue" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps, useAttrs } from 'vue';
+import { computed, defineProps, useAttrs, ref, watch } from 'vue';
 
 const attrs = useAttrs();
 const props = defineProps({
+  modelValue: { type: [Number, Boolean, String, Array], default: undefined },
   type: {
     type: String,
     default: '',
@@ -42,6 +43,14 @@ const props = defineProps({
     default: undefined,
   },
 });
+const emit = defineEmits(['update:modelValue']);
+const optionGroupValue = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    optionGroupValue.value = newVal;
+  },
+);
 
 const showIfComputed = computed(() => {
   return props.showIf(props.form);
@@ -49,4 +58,8 @@ const showIfComputed = computed(() => {
 const disableIfComputed = computed(() => {
   return props.disableIf(props.form);
 });
+
+const updateModelValue = (value) => {
+  emit('update:modelValue', value);
+};
 </script>

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

@@ -2,6 +2,7 @@
   <div v-show="showIfComputed">
     <q-input
       ref="pwdRef"
+      v-model="passwordValue"
       :hide-bottom-space="true"
       :hide-hint="true"
       :outlined="true"
@@ -12,6 +13,7 @@
       :rules="rulesComputed"
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
+      @update:model-value="updateModelValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
     </q-input>
@@ -19,13 +21,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, defineProps, useAttrs } from 'vue';
+import { ref, computed, defineProps, useAttrs, watch } from 'vue';
 import { FormValidators } from '@/platform/components';
 
 const pwdRef = ref();
 const attrs = useAttrs();
-const inRules = attrs.rules;
+const rules = attrs.rules;
 const props = defineProps({
+  modelValue: { type: String, default: '' },
   showIf: {
     type: Function,
     default: () => {
@@ -57,18 +60,26 @@ const props = defineProps({
     default: undefined,
   },
 });
+const emit = defineEmits(['update:modelValue']);
+const passwordValue = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    passwordValue.value = newVal;
+  },
+);
 
 const rulesComputed = computed(() => {
-  let rules = inRules || <any>[];
+  let result = rules || <any>[];
   if (showIfComputed.value && requiredIfComputed.value) {
-    rules.push(FormValidators.required());
+    result.push(FormValidators.required());
   } else if (!showIfComputed.value) {
-    rules = [];
+    result = [];
   }
   if (pwdRef?.value) {
     pwdRef.value.resetValidation();
   }
-  return rules;
+  return result;
 });
 
 const showIfComputed = computed(() => {
@@ -88,4 +99,8 @@ const readonlyIfComputed = computed(() => {
 const disableIfComputed = computed(() => {
   return props.disableIf(props.form);
 });
+
+const updateModelValue = (value) => {
+  emit('update:modelValue', value);
+};
 </script>

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

@@ -1,5 +1,19 @@
 <template>
-  <q-input v-model="positionValueRef" readonly @update:model-value="positionChanged">
+  <div v-show="showIfComputed">
+    <q-input
+      ref="positionRef"
+      v-model="positionValueRef"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :rules="rulesComputed"
+      :readonly="readonlyIfComputed"
+      :disable="disableIfComputed"
+      @update:model-value="positionChanged"
+    >
+      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
       <template #append>
         <!-- 选择位置按钮 -->
         <q-btn
@@ -44,13 +58,49 @@
         ></q-btn>
       </template>
     </q-input>
+  </div>
 </template>
 <script setup lang="ts">
-import { ref, toRaw, computed } from 'vue';
+import { ref, toRaw, computed, useAttrs, watch } from 'vue';
+import { Tools } from '@/platform';
+import { FormValidators } from '@/platform/components';
 
+const attrs = useAttrs();
+const rules = attrs.rules;
+const positionRef = ref();
 const props = defineProps({
   modelValue: { type: String, default: '' },
   restore: { type: Boolean, default: false },
+  showIf: {
+    type: Function,
+    default: () => {
+      return true;
+    },
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  requiredIf: {
+    type: Function,
+    default: undefined,
+  },
+  readonlyIf: {
+    type: Function,
+    default: () => {
+      return true;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  form: {
+    type: Object,
+    default: undefined,
+  },
 });
 const emit = defineEmits(['update:modelValue']);
 
@@ -60,6 +110,13 @@ const isShow = ref(false);
 const positionValueRef = ref(props.modelValue || '');
 const restoreValue = toRaw(props.modelValue || '');
 
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    positionValueRef.value = newVal;
+  },
+);
+
 const computedStoreBackgroundColorValue = computed(() => {
   const color: string = restoreValue;
   if (color.toLowerCase() === 'white' || color.toLowerCase() === '#ffffff' || color.toLowerCase() === '#fff') {
@@ -68,6 +125,37 @@ const computedStoreBackgroundColorValue = computed(() => {
   return undefined;
 });
 
+const rulesComputed = computed(() => {
+  let result = rules || <any>[];
+  if (showIfComputed.value && requiredIfComputed.value) {
+    result.push(FormValidators.required());
+  } else if (!showIfComputed.value) {
+    result = [];
+  }
+  if (positionRef?.value) {
+    positionRef.value.resetValidation();
+  }
+  return result;
+});
+
+const showIfComputed = computed(() => {
+  return props.showIf(props.form);
+});
+const requiredIfComputed = computed(() => {
+  if (props.requiredIf) {
+    return props.requiredIf(props.form) || false;
+  } else if (props.required) {
+    return true;
+  }
+  return false;
+});
+const readonlyIfComputed = computed(() => {
+  return props.readonlyIf(props.form);
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf(props.form);
+});
+
 const positionChanged = (value) => {
   positionValueRef.value = value;
   emit('update:modelValue', value);

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

@@ -2,6 +2,7 @@
   <div v-show="showIfComputed">
     <q-select
       ref="selectRef"
+      v-model="selectValue"
       emit-value
       map-options
       :hide-bottom-space="true"
@@ -12,6 +13,7 @@
       :rules="rulesComputed"
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
+      @update:model-value="updateModelValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
     </q-select>
@@ -19,13 +21,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, defineProps, useAttrs } from 'vue';
+import { ref, computed, defineProps, useAttrs, watch } from 'vue';
 import { FormValidators } from '@/platform/components';
 
 const selectRef = ref();
 const attrs = useAttrs();
-const inRules = attrs.rules;
+const rules = attrs.rules;
 const props = defineProps({
+  modelValue: { type: [String, Number, Boolean, Array], default: '' },
   showIf: {
     type: Function,
     default: () => {
@@ -57,18 +60,26 @@ const props = defineProps({
     default: undefined,
   },
 });
+const emit = defineEmits(['update:modelValue']);
+const selectValue = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    selectValue.value = newVal;
+  },
+);
 
 const rulesComputed = computed(() => {
-  let rules = inRules || <any>[];
+  let result = rules || <any>[];
   if (showIfComputed.value && requiredIfComputed.value) {
-    rules.push(FormValidators.required());
+    result.push(FormValidators.required());
   } else if (!showIfComputed.value) {
-    rules = [];
+    result = [];
   }
   if (selectRef?.value) {
     selectRef.value.resetValidation();
   }
-  return rules;
+  return result;
 });
 
 const showIfComputed = computed(() => {
@@ -88,4 +99,8 @@ const readonlyIfComputed = computed(() => {
 const disableIfComputed = computed(() => {
   return props.disableIf(props.form);
 });
+
+const updateModelValue = (value) => {
+  emit('update:modelValue', value);
+};
 </script>

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

@@ -14,7 +14,6 @@
       :disable="disableIfComputed"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
-    </template>
     </q-input>
   </div>
 </template>

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

@@ -2,6 +2,7 @@
   <div v-show="showIfComputed">
     <q-input
       ref="textRef"
+      v-model="textValue"
       :hide-bottom-space="true"
       :hide-hint="true"
       :outlined="true"
@@ -11,6 +12,7 @@
       :rules="rulesComputed"
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
+      @update:model-value="updateModelValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
     </q-input>
@@ -18,13 +20,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, defineProps, useAttrs } from 'vue';
+import { ref, computed, defineProps, useAttrs, watch } from 'vue';
 import { FormValidators } from '@/platform/components';
 
 const textRef = ref();
 const attrs = useAttrs();
-const inRules = attrs.rules;
+const rules = attrs.rules;
 const props = defineProps({
+  modelValue: { type: String, default: '' },
   showIf: {
     type: Function,
     default: () => {
@@ -56,18 +59,26 @@ const props = defineProps({
     default: undefined,
   },
 });
+const emit = defineEmits(['update:modelValue']);
+const textValue = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    textValue.value = newVal;
+  },
+);
 
 const rulesComputed = computed(() => {
-  let rules = inRules || <any>[];
+  let result = rules || <any>[];
   if (showIfComputed.value && requiredIfComputed.value) {
-    rules.push(FormValidators.required());
+    result.push(FormValidators.required());
   } else if (!showIfComputed.value) {
-    rules = [];
+    result = [];
   }
   if (textRef?.value) {
     textRef.value.resetValidation();
   }
-  return rules;
+  return result;
 });
 
 const showIfComputed = computed(() => {
@@ -87,4 +98,8 @@ const readonlyIfComputed = computed(() => {
 const disableIfComputed = computed(() => {
   return props.disableIf(props.form);
 });
+
+const updateModelValue = (value) => {
+  emit('update:modelValue', value);
+};
 </script>

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

@@ -2,6 +2,7 @@
   <div v-show="showIfComputed">
     <q-input
       ref="textBtnRef"
+      v-model="textBtnValue"
       :hide-bottom-space="true"
       :hide-hint="true"
       :outlined="true"
@@ -11,6 +12,12 @@
       :rules="rulesComputed"
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
+      @focus="
+        () => {
+          console.info('ffffffff');
+        }
+      "
+      @update:model-value="updateModelValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
       <template v-if="attrs.button && attrs.buttonPosition === 'prepend'" #prepend>
@@ -30,13 +37,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, defineProps, useAttrs } from 'vue';
+import { ref, computed, defineProps, useAttrs, watch } from 'vue';
 import { FormValidators } from '@/platform/components';
 
 const textBtnRef = ref();
 const attrs = useAttrs();
-const inRules = attrs.rules;
+const rules = attrs.rules;
 const props = defineProps({
+  modelValue: { type: String, default: '' },
   showIf: {
     type: Function,
     default: () => {
@@ -68,18 +76,26 @@ const props = defineProps({
     default: undefined,
   },
 });
+const emit = defineEmits(['update:modelValue']);
+const textBtnValue = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    textBtnValue.value = newVal;
+  },
+);
 
 const rulesComputed = computed(() => {
-  let rules = inRules || <any>[];
+  let result = rules || <any>[];
   if (showIfComputed.value && requiredIfComputed.value) {
-    rules.push(FormValidators.required());
+    result.push(FormValidators.required());
   } else if (!showIfComputed.value) {
-    rules = [];
+    result = [];
   }
   if (textBtnRef?.value) {
     textBtnRef.value.resetValidation();
   }
-  return rules;
+  return result;
 });
 
 const showIfComputed = computed(() => {
@@ -99,4 +115,8 @@ const readonlyIfComputed = computed(() => {
 const disableIfComputed = computed(() => {
   return props.disableIf(props.form);
 });
+
+const updateModelValue = (value) => {
+  emit('update:modelValue', value);
+};
 </script>

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

@@ -2,6 +2,7 @@
   <div v-show="showIfComputed">
     <q-input
       ref="textareaRef"
+      v-model="textareaValue"
       :hide-bottom-space="true"
       :hide-hint="true"
       :outlined="true"
@@ -11,6 +12,7 @@
       :rules="rulesComputed"
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
+      @update:model-value="updateModelValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
     </q-input>
@@ -18,13 +20,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, defineProps, useAttrs } from 'vue';
+import { ref, computed, defineProps, useAttrs, watch } from 'vue';
 import { FormValidators } from '@/platform/components';
 
 const textareaRef = ref();
 const attrs = useAttrs();
-const inRules = attrs.rules;
+const rules = attrs.rules;
 const props = defineProps({
+  modelValue: { type: String, default: '' },
   showIf: {
     type: Function,
     default: () => {
@@ -56,18 +59,26 @@ const props = defineProps({
     default: undefined,
   },
 });
+const emit = defineEmits(['update:modelValue']);
+const textareaValue = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    textareaValue.value = newVal;
+  },
+);
 
 const rulesComputed = computed(() => {
-  let rules = inRules || <any>[];
+  let result = rules || <any>[];
   if (showIfComputed.value && requiredIfComputed.value) {
-    rules.push(FormValidators.required());
+    result.push(FormValidators.required());
   } else if (!showIfComputed.value) {
-    rules = [];
+    result = [];
   }
   if (textareaRef?.value) {
     textareaRef.value.resetValidation();
   }
-  return rules;
+  return result;
 });
 
 const showIfComputed = computed(() => {
@@ -87,4 +98,8 @@ const readonlyIfComputed = computed(() => {
 const disableIfComputed = computed(() => {
   return props.disableIf(props.form);
 });
+
+const updateModelValue = (value) => {
+  emit('update:modelValue', value);
+};
 </script>