free-fe-core-modules 0.0.1 → 0.0.3

package/free-field/Fields/ApiCall.js

@@ -0,0 +1,123 @@
+import { defineComponent, getCurrentInstance, h, ref, watchEffect } from 'vue';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import ReadonlyContent from '../composible/readonlyContent';
+
+export default defineComponent({
+  name: 'InputFieldApiCall',
+  fieldInfo: {
+    Category: 'Advanced',
+    Label: '特定接口处理',
+    Value: 'ApiCall',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '数据获取地址',
+        Name: 'Options.Url',
+      },
+      {
+        Type: 'Select',
+        Label: '调用方法',
+        Name: 'Options.Method',
+        Options: [
+          'get',
+          'post',
+          'put',
+          'delete',
+          'patch',
+        ],
+      },
+      {
+        Type: 'String',
+        Label: '传送字段名',
+        Name: 'Options.Fields',
+        Placeholder: '逗号分割',
+        Tips: [
+          {
+            Text: '默认将传送当前字段数据，但可以指定相同数据层级下的其他字段。',
+          },
+        ],
+      },
+      {
+        Type: 'String',
+        Label: '附加字段名',
+        Name: 'Options.ExtraFieldNames',
+        Placeholder: '逗号分割',
+        Tips: [
+          {
+            Text: '如果接口返回值中有这些字段，他们将会被赋予当前父数据中。',
+          },
+        ],
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  methods: {
+    ...useFreeFieldMethods,
+  },
+  setup(props, { slots }){
+    if (!props.Field) return {};
+
+    const { proxy:vm } = getCurrentInstance();
+    const { fieldData } = useFreeField(props);
+
+    const callResult = ref('');
+
+    const apiCall = () => {
+      let Fields = props.Field.Options.Fields || props.Field.Name;
+
+      if (!props.Field.Options || !props.Field.Options.Fields) {
+        return;
+      }
+
+      const paramObj = {};
+      if (Fields.length > 0) {
+        if (typeof Fields === 'string') {
+          Fields = Fields.split(',');
+        }
+        for (let i = 0; i < Fields.length; i += 1) {
+          const fld = Fields[i];
+
+          if (fld) {
+            Object.setValue(paramObj, fld, Object.nestValue(fieldData.value, fld));
+          }
+        }
+      } else {
+        Object.setValue(paramObj, props.Field.Name, fieldData.value);
+      }
+
+      vm[`${props.Field.Options.Method || 'post'}Request`](props.Field.Options.Url, paramObj).then((d) => {
+        if (d && d.msg === 'OK') {
+          if (d.data && d.data.value) {
+            callResult.value = JSON.stringify(d.data.value);
+          } else {
+            callResult.value = JSON.stringify(d.data);
+          }
+
+          // other extra new fields
+          (props.Field.Options.ExtraFieldNames || '').split(',').forEach((fname) => {
+            Object.setValue(props.values, fname, d.data[fname]);
+          });
+        }
+      });
+    };
+
+    watchEffect(() => {
+      fieldData.value && apiCall();
+    })
+
+    const readonlyNode = () => h(ReadonlyContent, {
+      Field: props.Field,
+      Content: callResult.value,
+    });
+
+    return () => h('div', {
+      class: 'simple-field input-field-apicall row items-center no-wrap',
+    }, [
+      readonlyNode(),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});

package/{field-components/Fields/Boolean.vue → free-field/Fields/Boolean.js}

@@ -1,41 +1,10 @@
-<template>
-  <span class="simple-field input-field-boolean row items-center no-wrap">
-    <span
-      :class="`field-label ${(Field.Label && Field.Label.trim().length)
-        ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
-      v-if="Field.showLabel && !Field.dense && typeof Field.Label !== 'undefined'"
-    >
-      <q-tooltip
-        v-if="Field.Description"
-        anchor="top right"
-      >{{Field.Description}}</q-tooltip>
-      {{Field.Label || ''}}
-      <span
-        v-if="Field.Required"
-        class="required-mark"
-      >*</span>
-    </span>
-    <span v-else-if="!Field.showLabel && !Field.dense" class="field-label-empty"></span>
-
-    <q-toggle
-      v-model="fieldData"
-      :label="!Field.showLabel ? Field.Label : ''"
-      @input="$emit('input')"
-      :disable="Field.ReadOnly"
-      v-bind="$attrs">
-      <q-tooltip v-if="Field.Description">{{Field.Description}}</q-tooltip>
-    </q-toggle>
-    <slot name="warning"></slot>
-  </span>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { defineComponent, h, ref } from 'vue';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { QToggle } from 'quasar';
+import freeFieldLabel from '../composible/freeFieldLabel';
 
 export default defineComponent({
   name: 'InputFieldBoolean',
-  mixins: [mixins.InputFieldMixin],
   fieldInfo: {
     Category: 'Simple',
     Label: '开关',
@@ -96,17 +65,42 @@ export default defineComponent({
     ],
     Description: '',
   },
-  watch: {
-    fieldData() {
-      if (!this.fieldData) {
-        this.fieldData = false;
-      }
-    },
+  props: {
+    ...freeFieldProps,
+  },
+  emits: ['input'],
+  methods: {
+    ...useFreeFieldMethods,
   },
-  created() {
-    if (!this.fieldData) {
-      this.fieldData = false;
-    }
+  setup(props, { emit, slots }){
+    if (!props.Field) return {};
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const before = (props.Field.showLabel && !props.Field.dense && props.Field.Label !== void 0) ? () => h(freeFieldLabel, {
+      Field: props.Field,
+    }) : () => h('div', {
+      class: 'field-label-empty'
+    });
+
+    const toggleNode = () => h(QToggle, {
+      disable: props.Field?.ReadOnly,
+      label: props.Field?.showLabel ? props.Field?.Lable :  '',
+
+      style: props.Field.Info?.Style,
+
+      modelValue: fieldData.value,
+      'onUpdate:modelValue': (v) => {
+        setFieldData(v, emit);
+      },
+    })
+
+    return () => h('div', {
+      class: 'simple-field input-field-boolean row items-center no-wrap',
+    }, [
+      before(),
+      toggleNode(),
+      slots.warning && slots.warning(),
+    ]);
   },
 });
-</script>

package/free-field/Fields/Category.js

@@ -0,0 +1,28 @@
+import { defineComponent, h } from 'vue';
+
+export default defineComponent({
+  name: 'InputFieldCategory',
+  fieldInfo: {
+    Category: 'Static',
+    Label: '字段分类',
+    Value: 'Category',
+    Description: '',
+  },
+  props: {
+    Field: { type: Object },
+  },
+  methods: {
+  },
+  setup(props, { slots }){
+    if (!props.Field || (typeof props.Field.Label === 'undefined')) return;
+
+    return () => h('div', {
+      class: 'simple-field input-field-category row items-center no-wrap',
+    }, [
+      h('span', {
+        class: 'label'
+      }, props.Field.Label),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});

package/free-field/Fields/Check.js

@@ -0,0 +1,106 @@
+import { defineComponent, h, ref } from 'vue';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { QCheckbox } from 'quasar';
+import freeFieldLabel from '../composible/freeFieldLabel';
+
+export default defineComponent({
+  name: 'InputFieldCheck',
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '勾选',
+    Value: 'Check',
+    Extra: [
+      {
+        Type: 'FixedList',
+        Label: '选项',
+        Name: 'Options',
+        Options: {
+          Columns: [
+            {
+              Label: 'Label',
+              Name: 'Label',
+              ReadOnly: true,
+            },
+            {
+              Label: 'Value',
+              Name: 'Value',
+              ReadOnly: true,
+            },
+            {
+              Label: 'Extra',
+              Name: 'Extra',
+              Type: 'FieldList',
+              Options: {
+                Columns: [
+                  {
+                    Label: '#',
+                    Name: 'Index',
+                  },
+                  {
+                    Label: '名称',
+                    Name: 'Name',
+                  },
+                  {
+                    Label: '标题',
+                    Name: 'Label',
+                  },
+                ],
+              },
+            },
+          ],
+          Default: [
+            {
+              Label: '选中',
+              Value: true,
+              Extra: [],
+            },
+            {
+              Label: '未选',
+              Value: false,
+              Extra: [],
+            },
+          ],
+        },
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  emits: ['input'],
+  methods: {
+    ...useFreeFieldMethods,
+  },
+  setup(props, { emit, slots }){
+    if (!props.Field) return {};
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const before = (props.Field.showLabel && !props.Field.dense && props.Field.Label !== void 0) ? () => h(freeFieldLabel, {
+      Field: props.Field,
+    }) : () => h('div', {
+      class: 'field-label-empty'
+    });
+
+    const checkboxNode = () => h(QCheckbox, {
+      disable: props.Field?.ReadOnly,
+      label: props.Field?.showLabel ? '' : props.Field?.Label,
+
+      style: props.Field.Info?.Style,
+
+      modelValue: fieldData.value,
+      'onUpdate:modelValue': (v) => {
+        setFieldData(v, emit);
+      },
+    })
+
+    return () => h('div', {
+      class: 'simple-field input-field-check row items-center no-wrap',
+    }, [
+      before(),
+      checkboxNode(),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});

package/free-field/Fields/Customize.js

@@ -0,0 +1,87 @@
+import { defineComponent, h, computed } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import freeFieldLabel from '../composible/freeFieldLabel';
+
+export default defineComponent({
+  name: 'InputFieldCustomize',
+  fieldInfo: {
+    Category: 'Advanced',
+    Label: '自定义模板',
+    Value: 'Customize',
+    Extra: [
+      {
+        Type: 'Rich',
+        Label: '模板',
+        enableField: true,
+        Name: 'Options.Template',
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  setup(props, { slots }){
+    if (!props.Field) return {};
+
+    const { fieldData } = useFreeField(props);
+
+    const htmlContent = computed(() => {
+      const template = props.Field && props.Field.Options ? props.Field.Options.Template : '';
+      if (!template) return '';
+
+      if (!fieldData.value) return template;
+
+      const replaced = template.replace(
+        /<efield>{([^<]*)}<\/efield>/g,
+        (match, name) => {
+          if (fieldData.value[name]) {
+            // could be options
+            if (fieldData.value.StepsDefinition) {
+              const cStep = fieldData.value.StepsDefinition.find(
+                (s) => s.Index === fieldData.value.CurrentStep,
+              );
+              if (cStep && cStep.Fields) {
+                const fld = cStep.Fields.find((f) => f.Name === name);
+
+                if (fld && fld.Options && Array.isArray(fld.Options)) {
+                  const fVal = fld.Options.find(
+                    (o) => o.Value === fieldData.value[name],
+                  );
+
+                  if (fVal && fVal.Label) {
+                    return fVal.Label;
+                  }
+                }
+              }
+            }
+
+            // otherwise.
+            return fieldData.value[name];
+          }
+          return '';
+        },
+      );
+
+      return replaced;
+    });
+
+    const before = (props.Field.Label !== void 0) ? () => h(freeFieldLabel, {
+      Field: props.Field,
+    }) : () => h('div', {
+      class: 'field-label-empty'
+    });
+
+    const contentNode = () => h('span', {
+      innerHTML: htmlContent.value,
+    }, );
+
+    return () => h('div', {
+      class: 'input-field-customize',
+    }, [
+      before(),
+      contentNode(),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});

package/free-field/Fields/Date.js

@@ -0,0 +1,133 @@
+import { ref, defineComponent, getCurrentInstance, h, computed } from 'vue';
+import { useFreeField, freeFieldProps, useFreeFieldMethods } from '../composible/useFreeField';
+import { QInput, QIcon, QPopupProxy, QDate } from 'quasar';
+import freeFieldLabel from '../composible/freeFieldLabel';
+
+export default defineComponent({
+  name: 'InputFieldDate',
+  fieldInfo: {
+    Category: 'DateTime',
+    Label: '日期',
+    Value: 'Date',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '最小值',
+        Name: 'MinValue',
+      },
+      {
+        Type: 'String',
+        Label: '最大值',
+        Name: 'MaxValue',
+      },
+      {
+        Type: 'Boolean',
+        Label: '最大至“现在”',
+        Name: 'Info.TillNow',
+      },
+      {
+        Type: 'Boolean',
+        Label: '最小从“现在”',
+        Name: 'Info.FromNow',
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  emits: ['input'],
+  methods: {
+    ...useFreeFieldMethods,
+  },
+  setup(props, { emit, slots }){
+    if (!props.Field) return {};
+
+    const { proxy: vm } = getCurrentInstance();
+
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    const before = (props.Field.Label !== void 0) ? () => h(freeFieldLabel, {
+      Field: props.Field,
+    }) : () => h('div', {
+      class: 'field-label-empty'
+    });
+
+    const dateOptions = computed(() => {
+      if (props.Field.Options && (typeof props.Field.Options === 'function' || Array.isArray(props.Field.Options))) return props.Field.Options;
+
+      let minDate = '1900/01/01';
+      let maxDate = '2100/12/31';
+
+      if (props.Field.MinValue) {
+        minDate = props.Field.MinValue;
+      }
+
+      if (props.Field.MaxValue === 'now') {
+        maxDate = new Date().toLocaleDateString();
+      } else if (props.Field.MaxValue) {
+        maxDate = props.Field.MaxValue;
+      }
+
+      return (date) => date >= minDate && date <= maxDate;
+    });
+
+    const locale = vm.ctx.config.locales.find(
+      (l) => l.locale === (vm.ctx.config.locale || vm.ctx.config.defaultLocale),
+    )?.calendar;
+
+    const localDate = computed(() => vm.$filter('normalDate', fieldData.value));
+
+    const showPopup = ref(false);
+
+    const DateNode = () => h(QInput, {
+      hideBottomSpace: true,
+      readonly: props.Field?.ReadOnly,
+
+      style: props.Field.Info?.Style,
+
+      rules: props.Field.Rules,
+
+      modelValue: localDate.value,
+      'onUpdate:modelValue': (v) => {
+        setFieldData(v, emit);
+      },
+    }, {
+      default: () => h(QPopupProxy, {
+        transitionShow: "scale",
+        transitionHide: "scale",
+        modelValue: showPopup.value,
+      },() => h('span', {
+        class: 'row'
+      }, [
+        h(QDate, {
+          modelValue: localDate.value,
+
+          options: dateOptions.value,
+          todayTtn: true,
+          mask: 'YYYY-MM-DD',
+          locale,
+
+          'onUpdate:modelValue': (v) => {
+            setFieldData(v, emit);
+
+            // TODO: not working, should close the popup but not
+            showPopup.value = false;
+          },
+        })
+      ])),
+      before,
+      append: () => h(QIcon, {
+        class: 'cursor-pointer',
+        name: 'event'
+      }),
+    });
+
+    return () => h('div', {
+      class: 'simple-field input-field-date row items-center no-wrap',
+    }, [
+      props.Field.ReadOnly ? readonlyNode() : DateNode(),
+      slots.warning && slots.warning(),
+    ]);
+  },
+});