free-fe-core-modules 0.0.1

package/field-components/Fields/Boolean.vue

@@ -0,0 +1,112 @@
+<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';
+
+export default defineComponent({
+  name: 'InputFieldBoolean',
+  mixins: [mixins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '开关',
+    Value: 'Boolean',
+    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: '',
+  },
+  watch: {
+    fieldData() {
+      if (!this.fieldData) {
+        this.fieldData = false;
+      }
+    },
+  },
+  created() {
+    if (!this.fieldData) {
+      this.fieldData = false;
+    }
+  },
+});
+</script>

package/field-components/Fields/Category.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    v-if="typeof Field.Label !== 'undefined'"
+    v-bind="$attrs"
+    class="input-field-category simple-field row items-center no-wrap">
+    <span class="label">{{Field.Label}}</span>
+    <slot name="warning"></slot>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldCategory',
+  mixins: [mixins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'Static',
+    Label: '字段分类',
+    Value: 'Category',
+    Description: '',
+  },
+});
+</script>
+
+<style lang="sass" scoped>
+.field-category
+    font-size: 14px
+    font-weight: bold
+    margin-top: 12px
+    margin-bottom: 12px
+</style>

package/field-components/Fields/Check.vue

@@ -0,0 +1,131 @@
+<template>
+  <span class="simple-field input-field-check row items-center no-wrap">
+    <span>
+      <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-checkbox
+        @input="$emit('input')"
+        :disable="Field.ReadOnly"
+        v-bind="$attrs"
+        :label="!Field.showLabel ? Field.Label : ''"
+        v-model="fieldData"
+      />
+    </span>
+    <slot name="warning"></slot>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldCheck',
+  mixins: [mixins.InputFieldMixin],
+  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: '',
+  },
+  watch: {
+    fieldData() {
+      if (!this.fieldData) {
+        this.fieldData = false;
+      }
+    },
+  },
+  created() {
+    if (!this.fieldData) {
+      this.fieldData = false;
+    }
+  },
+  methods: {
+    validate() {
+      if (this.Field.Required) return typeof this.fieldData !== 'undefined';
+
+      const rules = Array.isArray(typeof this.Field.Rules) ? this.Field.Rules : [this.Field.Rules];
+
+      let isValid = true;
+      for (let i = 0; i < rules.length; i += 1) {
+        const r = rules[i];
+
+        if (typeof r === 'function') {
+          isValid = isValid && r(this.fieldData);
+        }
+      }
+
+      return isValid;
+    },
+  },
+});
+</script>

package/field-components/Fields/Customize.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="input-field-customize">
+    <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 ref="content"></span>
+
+    <slot name="warning"></slot>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldCustomize',
+  mixins: [mixins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'Advanced',
+    Label: '自定义模板',
+    Value: 'Customize',
+    Extra: [
+      {
+        Type: 'Rich',
+        Label: '模板',
+        enableField: true,
+        Name: 'Options.Template',
+      },
+    ],
+    Description: '',
+  },
+  watch: {
+    htmlContent() {
+      this.$refs.content.innerHTML = this.htmlContent;
+    },
+    // fieldData() {
+    //   if (this.fieldData && this.$refs.content) {
+    //     this.$refs.content.innerHTML = this.generateContent(this.fieldData);
+    //   }
+    // },
+  },
+  mounted() {
+    if (this.htmlContent) {
+      this.$refs.content.innerHTML = this.htmlContent;
+    }
+  },
+  computed: {
+    htmlContent() {
+      const template = this.Field && this.Field.Options ? this.Field.Options.Template : '';
+      if (!template) return '';
+
+      if (!this.fieldData) return template;
+
+      const replaced = template.replace(
+        /<efield>{([^<]*)}<\/efield>/g,
+        (match, name) => {
+          if (this.fieldData[name]) {
+            // could be options
+            if (this.fieldData.StepsDefinition) {
+              const cStep = this.fieldData.StepsDefinition.find(
+                (s) => s.Index === this.fieldData.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 === this.fieldData[name],
+                  );
+
+                  if (fVal && fVal.Label) {
+                    return fVal.Label;
+                  }
+                }
+              }
+            }
+
+            // otherwise.
+            return this.fieldData[name];
+          }
+          return '';
+        },
+      );
+
+      return replaced;
+    },
+  },
+});
+</script>

package/field-components/Fields/Date.vue

@@ -0,0 +1,142 @@
+<template>
+  <span class="simple-field input-field-date 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">{{localData}}</span>
+    </span>
+    <q-input
+      v-else
+      v-model="localData"
+      hide-bottom-space
+      :readonly="Field.ReadOnly"
+      v-bind="$attrs"
+      @input="$emit('input')"
+      :ref="`input_field_validator_date`"
+    >
+      <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"
+        ref="qDateProxy"
+        transition-show="scale"
+        transition-hide="scale"
+      >
+        <span class="row">
+          <q-date
+            v-model="localData"
+            v-bind="$attrs"
+            :options="dateOptions"
+            today-btn
+            mask="YYYY-MM-DD"
+            :locale="locale"
+            @input="() => {$refs.qDateProxy.hide();$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: 'InputFieldDate',
+  mixins: [mixins.InputFieldMixin],
+  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: '',
+  },
+  data() {
+    return {
+      localData: '',
+    };
+  },
+  watch: {
+    fieldData() {
+      if (!this.fieldData) {
+        this.localData = '';
+        return;
+      }
+      this.localData = this.$options.filters.normalDate(this.fieldData);
+    },
+    localData() {
+      this.fieldData = this.localData;
+    },
+  },
+  computed: {
+    locale() {
+      return this.ctx.config.locales.find(
+        (l) => l.locale === (this.ctx.config.locale || this.ctx.config.defaultLocale),
+      ).calendar;
+    },
+    dateOptions() {
+      if (this.Field.Options && (typeof this.Field.Options === 'function' || Array.isArray(this.Field.Options))) return this.Field.Options;
+
+      let minDate = '1900/01/01';
+      let maxDate = '2100/12/31';
+
+      if (this.Field.MinValue) {
+        minDate = this.Field.MinValue;
+      }
+
+      if (this.Field.MaxValue === 'now') {
+        maxDate = new Date().toLocaleDateString();
+      } else if (this.Field.MaxValue) {
+        maxDate = this.Field.MaxValue;
+      }
+
+      return (date) => date >= minDate && date <= maxDate;
+    },
+  },
+});
+</script>
+
+<style lang="sass" scoped>
+.q-field--with-bottom
+  padding-bottom: 0
+</style>