表格优化提交

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

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

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

@@ -24,7 +24,6 @@
             v-else
             :form-ref="formRef"
             v-bind="field"
-            :form-data="formData"
             :form="instance"
             :class="
               (field.colsFirst ? 'col-start-1 ' : ' ') +
@@ -51,6 +50,12 @@ import { PageStatusEnum } from '@/platform/components/utils';
 const $q = useQuasar();
 const attrs = useAttrs();
 const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
   colsNum: { type: [Number, Object], default: 0 },
   colsXGap: { type: Number, default: 8 },
   colsYGap: { type: Number, default: 4 },
@@ -131,7 +136,13 @@ for (const field of fields_.value as any) {
   }
 }
 
-const formData = reactive(formModel);
+let formData = reactive(Object.keys(props.modelValue).length > 0 ? props.modelValue : formModel);
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    formData = reactive(Object.keys(props.modelValue).length > 0 ? props.modelValue : formModel);
+  },
+);
 
 const screenColsNumComputed = computed(() => {
   if (typeof props.colsNum === 'number' && props.colsNum > 0) {

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

@@ -1,5 +1,18 @@
 <template>
-  <q-input v-model="valueRef" @update:model-value="valueChanged">
+  <div v-show="showIfComputed">
+    <q-input
+      ref="iconRef"
+      v-model="valueRef"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      :rules="rulesComputed"
+      :readonly="readonlyIfComputed"
+      :disable="disableIfComputed"
+      @update:model-value="valueChanged"
+    >
       <template #prepend>
         <q-icon v-if="valueRef" :name="valueRef"> </q-icon>
         <w-icon-empty v-else></w-icon-empty>
@@ -75,10 +88,12 @@
         ></q-btn>
       </template>
     </q-input>
+  </div>
 </template>
 <script setup lang="ts">
-import { ref, toRaw, onMounted } from 'vue';
+import { ref, toRaw, onMounted, computed, useAttrs, watch } from 'vue';
 import { Tools } from '@/platform';
+import { FormValidators } from '@/platform/components';
 import bootstrap from './icons/bootstrap.json';
 import materialIcons from './icons/material-icons.json';
 import materialSymbolsOutlined from './icons/material-symbols-outlined.json';
@@ -87,9 +102,42 @@ import fontawesomeBrands from './icons/fontawesome-v6-icons-brands.json';
 import fontawesomeRegular from './icons/fontawesome-v6-icons-regular.json';
 import fontawesomeSolid from './icons/fontawesome-v6-icons-solid.json';
 
+const attrs = useAttrs();
+const rules = attrs.rules;
+const iconRef = 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 false;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  form: {
+    type: Object,
+    default: undefined,
+  },
 });
 const emit = defineEmits(['update:modelValue']);
 
@@ -108,8 +156,45 @@ const selectedTab = ref('bootstrap');
 const isShow = ref(false);
 const searchRef = ref('');
 const valueRef = ref(props.modelValue || 'bi-arrow-up-left-square');
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    valueRef.value = newVal;
+  },
+);
 const restoreValue = toRaw(props.modelValue || '');
 
+const rulesComputed = computed(() => {
+  let result = rules || <any>[];
+  if (showIfComputed.value && requiredIfComputed.value) {
+    result.push(FormValidators.required());
+  } else if (!showIfComputed.value) {
+    result = [];
+  }
+  if (iconRef?.value) {
+    iconRef.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);
+});
+
 if (Tools.isEmpty(valueRef.value)) {
   selectedTab.value = 'bootstrap';
 } else if (valueRef.value.startsWith('bi')) {

io.sc.platform.core.frontend/src/platform/components/form/elements/WNumber.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 numberRef = ref();
 const attrs = useAttrs();
 const rules = attrs.rules;
 const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
   modelValue: { type: Number, default: undefined },
   precision: { type: Number, default: 0 },
   showIf: {
@@ -61,7 +66,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 const numberValue = ref(props.modelValue);
 watch(
   () => props.modelValue,
@@ -85,7 +90,7 @@ const rulesComputed = computed(() => {
 });
 
 const showIfComputed = computed(() => {
-  return props.showIf(props.form);
+  return props.showIf(numberValue.value, props.form);
 });
 const requiredIfComputed = computed(() => {
   if (props.requiredIf) {
@@ -103,6 +108,9 @@ const disableIfComputed = computed(() => {
 });
 
 const updateModelValue = (value) => {
-  emit('update:modelValue', Number(value));
+  emit('update:modelValue', Number(value), props.form);
+};
+const changeValue = (value) => {
+  emit('change', value, props.form);
 };
 </script>

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

@@ -59,7 +59,7 @@ const props = defineProps({
     default: undefined,
   },
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'changeValue']);
 const textValue = ref(props.modelValue);
 watch(
   () => props.modelValue,
@@ -101,5 +101,6 @@ const disableIfComputed = computed(() => {
 
 const updateModelValue = (value) => {
   emit('update:modelValue', value);
+  emit('changeValue', value, props.form);
 };
 </script>

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

@@ -12,11 +12,7 @@
       :rules="rulesComputed"
       :readonly="readonlyIfComputed"
       :disable="disableIfComputed"
-      @focus="
+      @focus="() => {}"
-        () => {
-          console.info('ffffffff');
-        }
-      "
       @update:model-value="updateModelValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>

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

@@ -24,7 +24,7 @@
       <template #top="scope">
         <q-resize-observer @resize="onResize" />
         <div class="col">
-          <w-form ref="queryFormRef" v-bind="props.queryFormAttrs" :fields="props.queryFormFields" :cols-num="queryFormColsNum"></w-form>
+          <w-form ref="queryFormRef" v-bind="props.queryFormAttrs" :fields="table.queryFormFields" :cols-num="queryFormColsNum"></w-form>
           <div
             v-if="title || buttons_.length > 0 || configButton || table.queryFormFields.length > 0"
             class="flex flex-nowrap items-end"
@@ -2090,11 +2090,11 @@ const handlerQueryFormShowField = () => {
       }
       if (currRowColsNum <= rowColsNum) {
         table.queryFormFields.push(item);
-        item.showIf = () => {
+        item.showIf = (form) => {
           return true;
         };
       } else {
-        item.showIf = () => {
+        item.showIf = (form) => {
           return false;
         };
       }