free-fe-core-modules 0.0.1

package/field-components/Fields/YearRange.vue

@@ -0,0 +1,188 @@
+<template>
+  <span class="input-field-year-range simple-field">
+    <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="Field.Label"
+      >
+        <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>
+    <span v-else class="row items-center no-wrap">
+      <q-select
+        v-model="range.min"
+        hide-bottom-space
+        :options="minYearOptions"
+        :readonly="Field.ReadOnly"
+        v-bind="$attrs"
+        @input="rangeChanged"
+        :ref="`input_field_validator_first`"
+      >
+        <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-select>
+      <span class="input-field-range-separator">{{`${Field.Separator || '~'}`}}</span>
+      <q-select
+        v-model="range.max"
+        hide-bottom-space
+        :options="maxYearOptions"
+        :readonly="Field.ReadOnly"
+        @input="rangeChanged"
+        v-bind="$attrs"
+        :ref="`input_field_validator_second`"
+      />
+    </span>
+
+    <slot name="warning"></slot>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldYearRange',
+  mixins: [mixins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'DateTime',
+    Label: '年份范围',
+    Value: 'YearRange',
+    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 {
+      range: {
+        min: '',
+        max: '',
+      },
+    };
+  },
+  watch: {
+    fieldData() {
+      const yl = (this.fieldData || '').split(this.Field.Separator || '~');
+      [this.range.min, this.range.max] = yl;
+
+      // if (!this.range.min) {
+      //   this.$set(this.range, 'min', Number(this.Field.MinValue) || 1900);
+      // }
+      // if (!this.range.max) {
+      //   this.$set(this.range, 'max', Number(this.Field.MaxValue)
+      //   || (this.Field.TillNow ? Date.now().year : 2050));
+      // }
+    },
+    range() {
+      if (this.range.min && this.range.max) return;
+      this.fieldData = [this.range.min, this.range.max].join(
+        this.Field.Separator || '~',
+      );
+      this.$emit('input');
+    },
+  },
+  created() {
+    // if (!this.range.min) {
+    //   this.$set(this.range, 'min', Number(this.Field.MinValue) || 1900);
+    // }
+    // if (!this.range.max) {
+    //   this.$set(this.range, 'max', Number(this.Field.MaxValue)
+    //     || (this.Field.TillNow ? Date.now().year : 2050));
+    // }
+  },
+  computed: {
+    minYearOptions() {
+      if (this.Field.Options && Array.isArray(this.Field.Options)) {
+        return this.Field.Options;
+      }
+
+      let minYear = 1900;
+      let maxYear = Date.now().year;
+
+      if (this.Field.MinValue && Number(this.Field.MinValue)) {
+        minYear = Number(this.Field.MinValue);
+      }
+      if (this.Field.MaxValue && Number(this.Field.MaxValue)) {
+        maxYear = Number(this.Field.MaxValue);
+      }
+
+      if (this.range.max && this.range.max < maxYear.toString()) {
+        maxYear = Number(this.range.max) - 1;
+      }
+
+      const options = [];
+      for (let i = minYear; i <= maxYear; i += 1) {
+        options.push(i.toString());
+      }
+
+      return options;
+    },
+    maxYearOptions() {
+      if (this.Field.Options && Array.isArray(this.Field.Options)) {
+        return this.Field.Options;
+      }
+
+      let minYear = 1900;
+      let maxYear = Date.now().year;
+
+      if (this.Field.MinValue && Number(this.Field.MinValue)) {
+        minYear = Number(this.Field.MinValue);
+      }
+      if (this.Field.MaxValue && Number(this.Field.MaxValue)) {
+        maxYear = Number(this.Field.MaxValue);
+      }
+
+      if (this.range.min && this.range.min > minYear.toString()) {
+        minYear = Number(this.range.min) + 1;
+      }
+
+      const options = [];
+      for (let i = minYear; i <= maxYear; i += 1) {
+        options.push(i.toString());
+      }
+
+      return options;
+    },
+  },
+  methods: {
+    rangeChanged() {
+      this.fieldData = [this.range.min, this.range.max].join(
+        this.Field.Separator || '~',
+      );
+      this.$emit('input');
+    },
+  },
+});
+</script>

package/field-components/Fields/components/FieldTypeOptions.vue

@@ -0,0 +1,248 @@
+<template>
+  <span v-if="Field" class="simple-field input-field-field-type-options row items-center no-wrap">
+    <q-input
+      :value="optionLabel"
+      hide-bottom-space
+      readonly
+      v-bind="$attrs"
+      :ref="`input_field_validator_date`"
+    >
+      <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-popup-proxy ref="qTypeProxy" transition-show="scale" transition-hide="scale">
+        <div class="row input-field-field-type-options-content" style="max-height: 320px">
+          <q-card class="full-height" style="min-width: 500px">
+            <q-separator />
+            <q-splitter v-model="splitter" style="height: 300px">
+              <template v-slot:before>
+                <q-tabs v-model="leftTab" vertical active-bg-color="grey-4">
+                  <q-tab
+                    v-for="(category, index) in categoryList"
+                    :key="index"
+                    ripple
+                    :name="category"
+                    :label="$t(`fieldCategory${category}`)"
+                  ></q-tab>
+                </q-tabs>
+              </template>
+
+              <template v-slot:after>
+                <q-tab-panels
+                  v-model="leftTab"
+                  animated
+                  transition-prev="slide-down"
+                  transition-next="slide-up"
+                  class="full-height"
+                >
+                  <q-tab-panel
+                    v-for="(category, index) in categoryList"
+                    :key="index"
+                    :name="category"
+                    class="row full-height"
+                    style="width: 800px;"
+                  >
+                    <q-list class="col full-height scroll" style="max-width: 180px">
+                      <q-item
+                        v-for="(option, index) in categoryFields(category)"
+                        :key="index"
+                        clickable
+                        v-ripple
+                        :active="fieldData === option.Value"
+                        @click="typeChanged(option)"
+                      >
+                        <q-item-section>
+                          <q-item-label>{{ option.Label }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                    <q-card
+                      class="col full-height scroll"
+                      flat
+                      style="min-width: 500px; margin-bottom: 10px; border: 1px solid grey"
+                    >
+                      <q-card-section>
+                        <free-field
+                          v-for="(field, index)
+                            in (Array.isArray(demoField) ? demoField : [demoField])"
+                          :key="index"
+                          :Field="field"
+                          :values="demoData"
+                        ></free-field>
+                      </q-card-section>
+                      <q-card-section></q-card-section>
+                    </q-card>
+                  </q-tab-panel>
+                </q-tab-panels>
+              </template>
+            </q-splitter>
+          </q-card>
+        </div>
+      </q-popup-proxy>
+      <template v-slot:append>
+        <q-icon name="event" class="cursor-pointer"></q-icon>
+      </template>
+    </q-input>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'FieldTypeOptions',
+  mixins: [mixins.InputFieldMixin],
+  emits: ['updateOptions'],
+  data() {
+    return {
+      leftTab: 'Static',
+      splitter: 10,
+      testData: {
+        Type: 'String',
+        Label: 'Label',
+        Name: 'value',
+        Required: true,
+        value: 'test value',
+        Options: [
+          {
+            Label: 'Option one',
+            Value: 'test value',
+          },
+        ],
+        Warning: 'This is some warning message.',
+        Description: 'This is some description',
+        Tips: [
+          {
+            Text: 'this is some tip',
+          },
+        ],
+      },
+      optionLabel: '',
+      fieldCategory: [],
+    };
+  },
+  computed: {
+    demoField() {
+      if (!this.Field || !this.Field.Options) return [];// this.testData;
+
+      const f = this.Field.Options.find((o) => o.Value === this.fieldData);
+
+      if (f && f.fieldInfo && f.fieldInfo.demoField) {
+        return f.demoField;
+      }
+
+      return [];// { ...this.testData, Type: this.fieldData };
+    },
+    demoData() {
+      if (!this.Field || !this.Field.Options) return {};// this.testData;
+
+      const f = this.Field.Options.find((o) => o.Value === this.fieldData);
+
+      if (f && f.fieldInfo && f.fieldInfo.demoData) {
+        return f.demoData;
+      }
+
+      return {};// this.testData;
+    },
+    categoryList() {
+      return this.fieldCategory.map((fc) => fc.Name);
+    },
+    categoryFields() {
+      return (c) => {
+        const cat = this.fieldCategory.find((fc) => fc.Name === c);
+        if (cat) return cat.Fields || [];
+        return [];
+      };
+    },
+  },
+  async created() {
+    this.getTypeOptions();
+    this.getFieldOptionLabel();
+  },
+  methods: {
+    async getTypeOptions() {
+      const typeOptions = [];
+      for (let i = 0; i < Object.keys(this.ctx.FieldComponents).length; i += 1) {
+        const fk = Object.keys(this.ctx.FieldComponents)[i];
+        let fc = this.ctx.FieldComponents[fk];
+
+        if (typeof fc === 'function') {
+        // eslint-disable-next-line no-await-in-loop
+          fc = await fc();
+          fc = fc.default || fc;
+        }
+
+        if (fc && fc.fieldInfo) {
+          typeOptions.push(fc.fieldInfo);
+
+          if (fc.fieldInfo.Value === this.fieldData) {
+            this.optionLabel = fc.fieldInfo.Label;
+          }
+
+          // category
+          const info = fc.fieldInfo;
+          if (info.Category) {
+            if (this.fieldCategory.findIndex((cl) => cl.Name === info.Category) < 0) {
+              this.fieldCategory.push({ Name: info.Category, Fields: [info] });
+            } else {
+              const c = this.fieldCategory.find((cat) => cat.Name === info.Category);
+              if (c) {
+                c.Fields = c.Fields || [];
+                c.Fields.push(info);
+              }
+            }
+          } else if (this.fieldCategory.findIndex((cl) => cl.Name === 'Others') < 0) {
+            this.fieldCategory.push({ Name: 'Others', Fields: [info] });
+          } else {
+            const c = this.fieldCategory.find((cat) => cat.Name === 'Others');
+            if (c) {
+              c.Fields = c.Fields || [];
+              c.Fields.push(info);
+            }
+          }
+        }
+      }
+
+      this.$emit('updateOptions', { Name: this.Field.Name, Options: typeOptions });
+    },
+    getFieldOptionLabel() {
+      const opt = this.Field.Options.find((op) => op.Value === this.fieldData);
+      if (opt) this.optionLabel = opt.Label;
+    },
+    typeChanged(option) {
+      this.fieldData = option.Value;
+      if (option.DataType) this.data.DataType = option.DataType;
+
+      this.$emit('input');
+      this.getFieldOptionLabel();
+    },
+  },
+});
+</script>
+
+<style lang="sass">
+.input-field-field-type-options
+  .q-field__control
+    padding: 0 8px
+  .input-field-field-type-options-content
+    .q-panel
+      overflow: hidden
+</style>

package/field-components/Fields/index.js

@@ -0,0 +1,117 @@
+import fStatic from './Static.vue';
+import fSelect from './Select.vue';
+import fString from './String.vue';
+import fPassword from './Password.vue';
+import fCategory from './Category.vue';
+import fCheck from './Check.vue';
+import fLabels from './Labels.vue';
+import fNumber from './Number.vue';
+import fPermission from './Permission.vue';
+import fSearch from './Search.vue';
+import fText from './Text.vue';
+import fTime from './Time.vue';
+import fTimeRange from './TimeRange.vue';
+import fDate from './Date.vue';
+import fDateRange from './DateRange.vue';
+import fYear from './Year.vue';
+import fYearRange from './YearRange.vue';
+import fRadioList from './RadioList.vue';
+import fBoolean from './Boolean.vue';
+import fFile from './File.vue';
+import fFileList from './FileList.vue';
+import fImage from './Image.vue';
+import fImageList from './ImageList.vue';
+import fFixedList from './FixedList.vue';
+import fDynamicList from './DynamicList.vue';
+import fSingleList from './SingleList.vue';
+import fSelectChain from './SelectionChain.vue';
+import fRich from './Rich.vue';
+import fFieldEditor from './FieldEditor.vue';
+import fFieldList from './InputFieldList.vue';
+import fMixedTable from './MixedTable.vue';
+import fCustomize from './Customize.vue';
+import fAgreementCheck from './AgreementCheck.vue';
+import fSeparator from './Separator.vue';
+import fQueryFilters from './QueryFilters.vue';
+import fFileListCombined from './FileListCombined.vue';
+import fImageListCombined from './ImageListCombined.vue';
+import fApiCall from './ApiCall.vue';
+
+export default {
+  Static: fStatic,
+  Select: fSelect,
+  String: fString,
+  Password: fPassword,
+  Category: fCategory,
+  Check: fCheck,
+  Labels: fLabels,
+  Number: fNumber,
+  Permission: fPermission,
+  Search: fSearch,
+  Text: fText,
+  Time: fTime,
+  TimeRange: fTimeRange,
+  Date: fDate,
+  DateRange: fDateRange,
+  Year: fYear,
+  YearRange: fYearRange,
+  RadioList: fRadioList,
+  Boolean: fBoolean,
+  File: fFile,
+  FileList: fFileList,
+  Image: fImage,
+  ImageList: fImageList,
+  FixedList: fFixedList,
+  DynamicList: fDynamicList,
+  SingleList: fSingleList,
+  SelectionChain: fSelectChain,
+  Rich: fRich,
+  FieldEditor: fFieldEditor,
+  FieldList: fFieldList,
+  MixedTable: fMixedTable,
+  Customize: fCustomize,
+  AgreementCheck: fAgreementCheck,
+  Separator: fSeparator,
+  QueryFilters: fQueryFilters,
+  FileListCombined: fFileListCombined,
+  ImageListCombined: fImageListCombined,
+  ApiCall: fApiCall,
+  // Static: () => import('./Static.vue'),
+  // Select: () => import('./Select.vue'),
+  // String: () => import('./String.vue'),
+  // Password: () => import('./Password.vue'),
+  // Category: () => import('./Category.vue'),
+  // Check: () => import('./Check.vue'),
+  // Labels: () => import('./Labels.vue'),
+  // Number: () => import('./Number.vue'),
+  // Permission: () => import('./Permission.vue'),
+  // Search: () => import('./Search.vue'),
+  // Text: () => import('./Text.vue'),
+  // Time: () => import('./Time.vue'),
+  // TimeRange: () => import('./TimeRange.vue'),
+  // Date: () => import('./Date.vue'),
+  // DateRange: () => import('./DateRange.vue'),
+  // Year: () => import('./Year.vue'),
+  // YearRange: () => import('./YearRange.vue'),
+  // RadioList: () => import('./RadioList.vue'),
+  // Boolean: () => import('./Boolean.vue'),
+  // File: () => import('./File.vue'),
+  // FileList: () => import('./FileList.vue'),
+  // Image: () => import('./Image.vue'),
+  // ImageList: () => import('./ImageList.vue'),
+  // FixedList: () => import('./FixedList.vue'),
+  // DynamicList: () => import('./DynamicList.vue'),
+  // SingleList: () => import('./SingleList.vue'),
+  // SelectionChain: () => import('./SelectionChain.vue'),
+  // Rich: () => import('./Rich.vue'),
+  // FieldEditor: () => import('./FieldEditor.vue'),
+  // FieldList: () => import('./InputFieldList.vue'),
+  // MixedTable: () => import('./MixedTable.vue'),
+  // Customize: () => import('./Customize.vue'),
+  // AgreementCheck: () => import('./AgreementCheck.vue'),
+  // Separator: () => import('./Separator.vue'),
+  // QueryFilters: () => import('./QueryFilters.vue'),
+  // FileListCombined: () => import('./FileListCombined.vue'),
+  // ImageListCombined: () => import('./ImageListCombined.vue'),
+  // ApiCall: () => import('./ApiCall.vue'),
+};