free-fe-core-modules 0.0.1

package/field-components/Fields/SingleList.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="input-field-single-list row" v-if="Field">
+    <span
+      :class="`field-label ${(Field.Label && Field.Label.trim().length)
+        ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
+      v-if="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>
+
+    <table flat>
+        <thead v-if="Field && Field.Options && Field.Options.Header">
+            <tr>
+                <td>{{Field.Options.Header}}</td>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(row, index) in localData" :key="index">
+                <td>
+                    {{row}}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldSingleList',
+  mixins: [mixins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'Table',
+    Label: '单列表',
+    Value: 'SingleList',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '列头',
+        Name: 'Options.Header',
+      },
+      {
+        Type: 'Check',
+        Label: '没有空格',
+        Name: 'Options.NoSpace',
+        Default: false,
+      },
+      {
+        Type: 'Check',
+        Label: '去空',
+        Name: 'Options.NoEmpty',
+        Default: false,
+      },
+      {
+        Type: 'Check',
+        Label: '去重',
+        Name: 'Options.NoDup',
+        Default: false,
+      },
+    ],
+    Description: '',
+  },
+  data() {
+    return {
+      tableData: [],
+    };
+  },
+  computed: {
+    localData() {
+      let list = [];
+      if (typeof this.fieldData !== 'undefined' && this.fieldData !== '') {
+        if (Array.isArray(this.fieldData)) {
+          list = this.fieldData;
+        } else if (typeof this.fieldData === 'string') {
+          const newStr = this.fieldData.replace(/，/g, ',');
+          list = newStr.split(',');
+        } else {
+          list = [this.fieldData];
+        }
+      }
+
+      if (this.Field.Options) {
+        if (this.Field.Options.NoSpace) {
+          for (let i = 0; i < list.length; i += 1) {
+            const l = list[i];
+
+            if (typeof l === 'string') {
+              list[i] = l.trim();
+            }
+          }
+        }
+
+        if (this.Field.Options.NoEmpty) {
+          list = list.filter((l) => !!l);
+        }
+
+        if (this.Field.Options.NoDup) {
+          const newList = [];
+          for (let i = 0; i < list.length; i += 1) {
+            const l = list[i];
+
+            if (newList.indexOf(l) < 0) {
+              newList.push(l);
+            }
+          }
+          list = newList;
+        }
+      }
+
+      return list;
+    },
+  },
+});
+</script>

package/field-components/Fields/Static.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="input-field-static">
+    <slot name="warning"></slot>
+    {{fieldData}}
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldStatic',
+  mixins: [mixins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'Static',
+    Label: '固定内容',
+    Value: 'Static',
+    Description: '',
+  },
+});
+</script>

package/field-components/Fields/String.vue

@@ -0,0 +1,185 @@
+<template>
+  <span
+    class="simple-field input-field-string row items-center no-wrap"
+    v-if="Field"
+  >
+    <span
+      v-if="Field.ReadOnly"
+      class="full-width"
+    >
+      <span
+        :class="`field-label field-label-readonly ${(Field.Label && Field.Label.trim().length)
+            ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
+        v-if="Field.Label !== void 0">
+        <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 class="readonly-content">
+        <span
+          class="prefix"
+          v-if="Field.Options && Field.Options.Prefix"
+        >{{Field.Options.Prefix}}
+        </span>
+        <span :style="(Field.Info && Field.Info.Style) ? Field.Info.Style : ''">{{modelValue}}
+        </span>
+        <span
+          class="postfix"
+          v-if="Field.Options && Field.Options.Postfix"
+        >{{Field.Options.Postfix}}</span>
+      </span>
+    </span>
+    <q-input
+      v-else
+      v-model="localData"
+      @update:model-value="inputEvent"
+      autocomplete="off"
+      v-bind="$attrs"
+      hide-bottom-space
+      :readonly="Field.ReadOnly"
+      :ref="`input_field_validator_${Field.Name || Field.Label}`"
+      :maxlength="maxlength"
+      :style="(Field.Info && Field.Info.Style) ? Field.Info.Style : ''"
+    >
+      <template v-slot:before>
+        <span
+          :class="`field-label ${(Field.Label && Field.Label.trim().length)
+            ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
+          v-if="Field.Label !== void 0"
+        >
+          <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>
+      </template>
+
+      <template
+        v-slot:prepend
+        v-if="Field && ((Field.Slots && Field.Slots.indexOf('prepend') >= 0)
+        || (Field.Options && Field.Options.Prefix))"
+      >
+        <slot name="prepend"
+          v-if="Field && Field.Slots && Field.Slots.indexOf('prepend') >= 0"></slot>
+        <span
+          class="prefix"
+          v-if="Field && Field.Options && Field.Options.Prefix"
+        >{{Field.Options.Prefix}}</span>
+      </template>
+
+      <template
+        v-slot:append
+        v-if="Field && ((Field.Slots && Field.Slots.indexOf('append') >= 0)
+        || (Field.Options && Field.Options.Postfix))"
+      >
+        <slot v-if="Field && Field.Slots && Field.Slots.indexOf('append') >= 0"
+          name="append"></slot>
+        <span
+          class="postfix"
+          v-if="Field && Field.Options && Field.Options.Postfix"
+        >{{Field.Options.Postfix}}</span>
+      </template>
+    </q-input>
+    <slot name="warning"></slot>
+  </span>
+</template>
+
+<script>
+import { defineComponent, ref, computed, watch } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldString',
+  emits: ['update:modelValue'],
+  mixins: [mixins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '字符串',
+    Value: 'String',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '前缀',
+        Name: 'Options.Prefix',
+      },
+      {
+        Type: 'String',
+        Label: '后缀',
+        Name: 'Options.Postfix',
+      },
+      {
+        Type: 'String',
+        Label: '最小值',
+        Name: 'MinValue',
+      },
+      {
+        Type: 'String',
+        Label: '最大值',
+        Name: 'MaxValue',
+      },
+      {
+        Type: 'Number',
+        Label: '最大长度',
+        Name: 'Options.MaxLength',
+      },
+      {
+        Type: 'Labels',
+        Label: '类型检查',
+        Name: 'rules',
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    // modelValue: {},
+    // Field: Object
+  },
+  setup(props, { emit }){
+    let localData = ref(props.fieldData || '');
+
+    watch(() => props.fieldData, (v) => {
+      localData.value = v.value;
+    })
+
+    const maxlength = computed(() => {
+      if (props.Field && props.Field.Options
+        && props.Field.Options.MaxLength) {
+        return props.Field.Options.MaxLength;
+      }
+      return '';
+    });
+
+    watch(localData, () => {
+      let v = localData.value;
+      if (typeof props.Field.MinValue !== 'undefined' && props.Field.MinValue > v) {
+        v = props.Field.MinValue;
+      }
+      if (typeof props.Field.MaxValue !== 'undefined' && props.Field.MaxValue < v) {
+        v = props.Field.MaxValue;
+      }
+
+      localData.value = v;
+    })
+
+    const inputEvent = (e) => {
+      emit('update:modelValue', e);
+    }
+
+    return {
+      localData,
+      maxlength,
+      inputEvent
+    }
+  },
+});
+</script>

package/field-components/Fields/Text.vue

@@ -0,0 +1,89 @@
+<template>
+  <span class="input-field-text">
+    <div :class="Field.Label ? 'warning-with-label' : 'warning-without-label'" >
+      <slot name="warning"></slot>
+    </div>
+    <span v-if="Field.ReadOnly" class="row no-wrap">
+      <span
+        :class="`field-label field-label-readonly ${(Field.Label && Field.Label.trim().length)
+            ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
+        v-if="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 class="readonly-content" style="white-space: pre-wrap">{{fieldData}}</span>
+    </span>
+    <q-input
+      v-else
+      type="textarea"
+      v-model="fieldData"
+      @input="$emit('input')"
+      v-bind="$attrs"
+      hide-bottom-space
+      :readonly="Field.ReadOnly"
+      :rows="rows"
+      :ref="`input_field_validator_${Field.Name || Field.Label}`"
+      :maxlength="maxlength"
+    >
+      <template v-slot:before>
+        <span
+          :class="`field-label ${(Field.Label && Field.Label.trim().length)
+            ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
+          v-if="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>
+      </template>
+    </q-input>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldText',
+  mixins: [mixins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '文本',
+    Value: 'Text',
+    Extra: [
+      {
+        Type: 'Number',
+        Label: '最大长度',
+        Name: 'Options.MaxLength',
+      },
+    ],
+    Description: '',
+  },
+  computed: {
+    rows() {
+      const contentLines = (this.fieldData && typeof this.fieldData === 'string') ? Math.max((this.fieldData.match(/\n/g) || '').length + 1, this.fieldData.length / 20) : 8;
+      return (this.Field && this.Field.ReadOnly) ? Math.min(contentLines, 20) : 8;
+    },
+    maxlength() {
+      if (this.Field && this.Field.Options
+        && this.Field.Options.MaxLength) {
+        return this.Field.Options.MaxLength;
+      }
+
+      return '';
+    },
+  },
+});
+</script>
+
+<style lang="sass" scoped>
+@import '../style.sass'
+
+.q-field__native
+  min-height: 160px
+
+.warning-with-label
+  margin-left: $fieldLabelWidth
+</style>

package/field-components/Fields/Time.vue

@@ -0,0 +1,160 @@
+<template>
+  <span class="simple-field input-field-time row items-center no-wrap">
+    <span v-if="Field.ReadOnly">
+      <span
+        :class="`field-label field-label-readonly ${(Field.Label && Field.Label.trim().length)
+          ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
+        v-if="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 class="readonly-content">{{fieldData}}</span>
+    </span>
+    <q-input v-else v-model="fieldData" hide-bottom-space
+      :readonly="Field.ReadOnly"
+      v-bind="$attrs" @input="$emit('input')"
+      :ref="`input_field_validator_${Field.Name || Field.Label}`">
+      <template v-slot:before v-if="typeof Field.Label !== 'undefined'">
+        <span
+          :class="`field-label ${(Field.Label && Field.Label.trim().length)
+            ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`">
+          <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>
+      </template>
+      <q-popup-proxy v-if="!Field.ReadOnly" transition-show="scale" transition-hide="scale">
+        <span class="row">
+          <q-date
+            v-model="fieldData"
+            mask="YYYY-MM-DD HH:mm:ss"
+            :hour-options="hourOptions"
+            :minute-options="minuteOptions"
+            :second-options="secondOptions"
+            :options="timeOptions"
+            @input="$emit('input')"
+            :locale="locale"
+          />
+          <q-time
+            v-model="fieldData"
+            mask="YYYY-MM-DD HH:mm:ss"
+            format24h
+            @input="$emit('input')"
+          />
+        </span>
+      </q-popup-proxy>
+      <template v-slot:append>
+        <q-icon name="event" class="cursor-pointer">
+        </q-icon>
+      </template>
+    </q-input>
+    <slot name="warning"></slot>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldTime',
+  mixins: [mixins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'DateTime',
+    Label: '时间',
+    Value: 'Time',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '最小值',
+        Name: 'MinValue',
+      },
+      {
+        Type: 'String',
+        Label: '最大值',
+        Name: 'MaxValue',
+      },
+      {
+        Type: 'Boolean',
+        Label: '最大至“现在”',
+        Name: 'Info.TillNow',
+      },
+      {
+        Type: 'Boolean',
+        Label: '最小从“现在”',
+        Name: 'Info.FromNow',
+      },
+    ],
+    Description: '',
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    locale() {
+      return this.ctx.config.locales.find(
+        (l) => l.locale === (this.ctx.config.locale || this.ctx.config.defaultLocale),
+      ).calendar;
+    },
+    hourOptions() {
+      return this.objOptions ? this.objOptions[0] : undefined;
+    },
+    minuteOptions() {
+      return this.objOptions ? this.objOptions[1] : undefined;
+    },
+    secondOptions() {
+      return this.objOptions ? this.objOptions[2] : undefined;
+    },
+    objOptions() {
+      if (this.Field.Options) {
+        return this.Field.Options;
+      }
+      return undefined;
+    },
+    timeOptions() {
+      if (this.objOptions) return undefined;
+
+      if (!this.Field.MinValue && !this.Field.MaxValue) {
+        return undefined;
+      }
+
+      let minH;
+      let minM;
+      let minS;
+
+      if (this.Field.MinValue) {
+        [minH, minM, minS] = this.Field.MinValue;
+      }
+
+      let maxH;
+      let maxM;
+      let maxS;
+      if (this.Field.MaxValue) {
+        [maxH, maxM, maxS] = this.Field.MaxValue;
+      }
+
+      minH = minH || 0;
+      minM = minM || 0;
+      minS = minS || 0;
+
+      maxH = maxH || 24;
+      maxM = maxM || 60;
+      maxS = maxS || 60;
+
+      return (hr, min, sec) => {
+        if (hr < minH || hr > maxH) {
+          return false;
+        }
+        if (min < minM || min > maxM) {
+          return false;
+        }
+        if (sec < minS || sec > maxS) {
+          return false;
+        }
+        return true;
+      };
+    },
+  },
+});
+</script>