表格优化提交

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

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

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

@@ -95,6 +95,7 @@ const fiedType = {
   password: 'w-password',
   'option-group': 'w-option-group',
   optionGroup: 'w-option-group',
+  file: 'w-file',
 };
 
 const defaultValueHandler = (field) => {

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

@@ -0,0 +1,134 @@
+<template>
+  <div v-show="showIfComputed">
+    <q-file
+      ref="fileRef"
+      v-model="fileValue"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      :clearable="true"
+      v-bind="attrs"
+      :rules="rulesComputed"
+      :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="attachment" />
+      </template>
+    </q-file>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineProps, useAttrs, watch } from 'vue';
+import { FormValidators } from '@/platform/components';
+
+const fileRef = ref();
+const attrs = useAttrs();
+const rules = attrs.rules;
+const props = defineProps({
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
+  modelValue: { type: [File, Array], default: undefined },
+  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', 'change']);
+const fileValue = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (newVal, oldVal) => {
+    fileValue.value = newVal;
+  },
+);
+
+const rulesComputed = computed(() => {
+  let result = rules || <any>[];
+  if (showIfComputed.value && requiredIfComputed.value) {
+    result.push(FormValidators.required());
+  } else if (!showIfComputed.value) {
+    result = [];
+  }
+  if (fileRef?.value) {
+    fileRef.value.resetValidation();
+  }
+  return result;
+});
+
+const showIfComputed = computed(() => {
+  return props.showIf({
+    value: fileValue.value,
+    form: props.form,
+  });
+});
+const requiredIfComputed = computed(() => {
+  if (props.requiredIf) {
+    return (
+      props.requiredIf({
+        value: fileValue.value,
+        form: props.form,
+      }) || false
+    );
+  } else if (props.required) {
+    return true;
+  }
+  return false;
+});
+const readonlyIfComputed = computed(() => {
+  return props.readOnlyIf({
+    value: fileValue.value,
+    form: props.form,
+  });
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf({
+    value: fileValue.value,
+    form: props.form,
+  });
+});
+
+const updateModelValue = (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/index.ts

@@ -22,6 +22,7 @@ import WCheckbox from './form/elements/WCheckbox.vue';
 import WTextBtn from './form/elements/WTextBtn.vue';
 import WPassword from './form/elements/WPassword.vue';
 import WOptionGroup from './form/elements/WOptionGroup.vue';
+import WFile from './form/elements/WFile.vue';
 
 import WGrid from './grid/WGrid.vue';
 
@@ -65,6 +66,7 @@ export default {
     app.component('WTextBtn', WTextBtn);
     app.component('WPassword', WPassword);
     app.component('WOptionGroup', WOptionGroup);
+    app.component('WFile', WFile);
 
     app.component('WGrid', WGrid);
 
@@ -106,6 +108,7 @@ export {
   WTextBtn,
   WPassword,
   WOptionGroup,
+  WFile,
   WGrid,
   WIconEmpty,
   WVExpandDiv,