free-fe-core-modules 0.0.1

package/components/SlidingCarousel/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <q-carousel
+    animated
+    v-model="slide"
+    ref="carousel"
+    infinite
+    :transition-prev="transitionPrev"
+    :transition-next="transitionNext"
+    v-bind="$attrs"
+    :height="heightString"
+    :autoplay="interval"
+    :arrows="data && data.length > 0"
+    :swipeable="swipeable"
+    :thumbnails="thumbnails"
+  >
+    <q-carousel-slide
+      v-for="(carouse, index) in data"
+      :key="index"
+      :name="index"
+      :img-src="`${ctx.config.imageUrlBase}${carouse.img}`"
+      @click="clicked(carouse)"
+    />
+    <q-carousel-slide v-if="!data || !data.length" :name="0">
+      <div class="no-images-label flex full-height full-width">{{noImageText}}</div>
+    </q-carousel-slide>
+  </q-carousel>
+</template>
+
+<script>
+import mixins from 'free-fe-mixins';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'SlidingCarousel',
+  mixins: [mixins.ArrayDataMixin],
+  props: {
+    interval: { type: Number, default: 3000 },
+    height: { type: String, default: '220px' },
+    width: { type: String, default: '100%' },
+    noImageText: { type: String, default: '暂无图片' },
+    transitionPrev: { type: String, default: 'slide-right' },
+    transitionNext: { type: String, default: 'slide-left' },
+    swipeable: { type: Boolean, default: true },
+    thumbnails: { type: Boolean, default: true },
+  },
+  data() {
+    return {
+      slide: 0,
+    };
+  },
+  computed: {
+    heightString() {
+      if (!this.height) return '220px';
+
+      const num = this.height.match(/^[0-9]*/g);
+      if (!num || num.length <= 0) return '220px';
+
+      if (num[0] === this.height) return `${this.height}px`;
+
+      return this.height;
+    },
+  },
+  methods: {
+    clicked(carouse) {
+      if (carouse && carouse.url) {
+        if (/^(http|https):\/\/.*/.test(carouse.url)) {
+        // window.location.href = l;
+          window.open(carouse.url);
+        } else {
+          this.$router.push(carouse.url);
+        }
+      }
+    },
+  },
+});
+</script>
+
+<style lang="sass" scoped>
+.no-images-label
+  font-size: 18px
+  font-weight: bold
+  justify-content: center
+  align-items: center
+  background: $grey-5
+  color: $background
+</style>

package/components/SlidingNews/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div
+    v-if="visible"
+    class="row full-width sliding-news justify-center"
+    :class="(data && data.length) ? '' : 'empty'"
+  >
+    <span class="sliding-news-label row items-center">
+      <e-icon
+        :name="icon"
+        class="sliding-news-label-icon"
+      ></e-icon>
+      <span>{{label}}</span>
+    </span>
+    <q-carousel
+      v-model="slide"
+      ref="carousel"
+      :transition-prev="transitionPrev"
+      :transition-next="transitionNext"
+      class="col"
+      :height="heightString"
+      :autoplay="interval"
+      :navigation="false"
+      v-bind="$attrs"
+      animated
+      infinite
+      padding
+      vertical
+    >
+      <q-carousel-slide
+        v-for="(carouse, index) in data"
+        :key="index"
+        :name="index"
+        @click="newsClicked(carouse)"
+        style="cursor: pointer; padding: 0; margin: 0;"
+      >
+        <div class="row items-center justify-center full-height">
+          <span class="sliding-news-title">{{carouse.Title}}</span>
+          <q-space />
+          <span class="float-right sliding-news-right">
+            <span
+              class="sliding-news-date"
+              :style="`line-height: ${heightString}`"
+            >
+              {{filter('normalDate',(carouse.PublishDate || carouse.LastUpdateDate))}}
+            </span>
+          </span>
+        </div>
+      </q-carousel-slide>
+    </q-carousel>
+    <q-space />
+    <span
+      class="float-right sliding-news-right full-height"
+      style="margin: auto 0"
+    >
+      <q-btn
+        v-if="closable"
+        icon="close"
+        flat
+        dense
+        round
+        @click.stop="visible=false"
+        class="sliding-news-close-btn"
+      ></q-btn>
+    </span>
+  </div>
+</template>
+
+<script>
+import mixins from 'free-fe-mixins';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'SlidingNews',
+  mixins: [mixins.ArrayDataMixin],
+  props: {
+    interval: { type: Number, default: 3000 },
+    height: { type: String, default: '40px' },
+    width: { type: String, default: '100%' },
+    lines: { type: Number, default: 1 },
+    icon: { type: String, default: 'menu' },
+    label: { type: String, default: 'News: ' },
+    closable: { type: Boolean, default: true },
+    url: { type: String, default: '' },
+    transitionPrev: { type: String, default: 'slide-up' },
+    transitionNext: { type: String, default: 'slide-down' },
+  },
+  data() {
+    return {
+      visible: true,
+      slide: 0,
+      timer: undefined,
+    };
+  },
+  computed: {
+    heightString() {
+      if (!this.height) return '40px';
+
+      const num = this.height.match(/^[0-9]*/g);
+      if (!num || num.length <= 0) return '40px';
+
+      if (num[0] === this.height) return `${this.height}px`;
+
+      return this.height;
+    },
+  },
+  // watch: {
+  //   visible() {
+  //     if (!this.visible) {
+  //       clearInterval(this.timer);
+  //     }
+  //   },
+  // },
+  // created() {
+  //   this.timer = setInterval(this.carouselNext, this.interval);
+  // },
+  methods: {
+    newsClicked(news) {
+      let url = '';
+      if (news.url) url += news.url;
+      else if (this.url) url += `${this.url}${news.id || ''}`;
+
+      if (url && this.$route.fullPath !== url) {
+        this.$router.push({ path: url });
+      }
+    },
+    // carouselNext() {
+    //   if (!this.data || this.data.length < 2 || !this.$refs.carousel) {
+    //     return;
+    //   }
+
+    //   this.$refs.carousel.next();
+    // },
+  },
+  // beforeUnmount() {
+  //   clearInterval(this.timer);
+  // },
+});
+</script>

package/components/StickyButtons/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <q-page-sticky
+    class="print-hide sticky-button"
+    :position="position"
+    :offset="stickyOffset"
+    v-if="visibleActions && visibleActions.length > 0"
+  >
+    <div v-if="!fab" class="column">
+      <q-btn
+        v-for="(action, index) in visibleActions"
+        :key="index"
+        fab
+        :icon="action.icon || ''"
+        :class="[action.class || '', `sticky-button-${action.Action}`]"
+        @click="$emit('click', action)"
+        :disable="draggingSticky"
+        v-touch-pan.prevent.mouse="moveSticky"
+        :label="showLabel ? action.Label : ''"
+      />
+    </div>
+    <q-fab
+      v-else
+      :icon="fabIcon"
+      :direction="direction"
+      :color="stickyColor"
+      :disable="draggingSticky"
+      v-touch-pan.prevent.mouse="moveSticky"
+    >
+      <q-fab-action
+        v-for="(action, index) in visibleActions"
+        :key="index"
+        @click="$emit('click', action)"
+        :class="[action.class || '', `sticky-button-${action.Action}`]"
+        :icon="action.icon || ''"
+        :disable="draggingSticky"
+        :label="showLabel ? action.Label : ''"
+      />
+    </q-fab>
+  </q-page-sticky>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'StickyButtons',
+  emits: ['click'],
+  props: {
+    position: { type: String, default: 'bottom-right' },
+    offset: { type: Array, default: () => [36, 128, 0, 0] },
+    fab: { type: Boolean, default: true },
+    fabIcon: { type: String, default: 'add' },
+    fabColor: { type: String, default: '' },
+    direction: { type: String, default: 'up' },
+    actions: { type: Array, default: () => [] },
+    showLabel: { type: Boolean, default: true },
+    buttonsVisible: { type: Function, default: () => true },
+  },
+  data() {
+    return {
+      stickyOffset: [36, 128, 0, 0],
+      draggingSticky: false,
+    };
+  },
+  created() {
+    if (this.offset) {
+      this.stickyOffset = this.offset;
+    }
+  },
+  computed: {
+    stickyColor() {
+      return this.fabColor || this.ctx.config.stickyColor;
+    },
+    visibleActions() {
+      let actions = [];
+      (this.actions || []).filter(act => this.buttonsVisible(act)).forEach((action) => {
+        if (Array.isArray(action)) {
+          actions = actions.concat(action);
+        } else {
+          actions.push(action);
+        }
+      });
+
+      return actions;
+    },
+  },
+  methods: {
+    moveSticky(ev) {
+      this.draggingSticky = ev.isFirst !== true && ev.isFinal !== true;
+
+      this.stickyOffset = [
+        this.stickyOffset[0] - ev.delta.x,
+        this.stickyOffset[1] - ev.delta.y,
+      ];
+    },
+  },
+});
+</script>

package/components/ThemeSwitch/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <component v-if="theme" :is="themeComponents[theme]"></component>
+    <q-btn
+      flat
+      :icon="icon"
+      v-if="themes && themes[1]"
+      :label="dense ? '' : $t('SwitchTheme')">
+      <q-menu>
+        <q-list>
+          <q-item
+            v-for="(tm, index) in themes"
+            :key="index"
+            clickable
+            v-close-popup
+            @click="theme = tm"
+          >
+            <q-item-section>{{$t(tm)}}</q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </q-btn>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'ThemeSwitch',
+  props: {
+    icon: { type: String, default: 'fas fa-palette' },
+    dense: { type: Boolean, default: true },
+  },
+  data() {
+    return {
+      theme: '',
+    };
+  },
+  computed: {
+    themeComponents() {
+      const components = {};
+
+      Object.keys(this.ctx.modules)
+        .filter((m) => this.ctx.modules[m].IsTheme)
+        .forEach((m) => {
+          Object.assign(components, this.ctx.modules[m].components || {});
+        });
+
+      return components;
+    },
+    themes() {
+      return Object.keys(this.themeComponents);
+    },
+  },
+  watch: {
+    theme(v) {
+      if (v) {
+        const appEle = document.getElementById('q-app');
+
+        let arr = appEle.className.split(' ');
+
+        arr = arr.filter(cl => !cl.startsWith('theme-'));
+
+        arr.push(`theme-${v}`);
+
+        appEle.className = arr.join(' ');
+      }
+    },
+  },
+  created() {
+    if (this.themes && this.themes.length > 0) {
+      this.theme = this.themes[0];
+    }
+  },
+});
+</script>

package/field-components/Display/index.js

@@ -0,0 +1,3 @@
+export default {
+
+};

package/field-components/Fields/AgreementCheck.vue

@@ -0,0 +1,161 @@
+<template>
+  <span :class="`input-field-agreement-check row items-center no-wrap ${(Field.Options
+    && Field.Options.Center) ? 'center full-width justify-center' : ''}`">
+    <span class="field-label-empty" v-if="!Field.Options || !Field.Options.Center"></span>
+    <div class="row no-wrap items-center relative-position"
+      :class="`check ${hasError ? 'input-field--error' : ''}`">
+      <q-checkbox
+        :class="`check`"
+        @input="validate(); $emit('input')"
+        v-bind="$attrs"
+        v-model="fieldData"
+      />
+
+      <div class="input-field-tips" v-if="Field.Tips && Field.Tips.length > 0">
+        <span class="input-field-tips-prefix"></span>
+        <span class="tips-list">
+          <span v-for="(tip, index) in Field.Tips"
+            :key="index" class="input-field-tips-tip">
+            <span class="input-field-tips-tip-prefix"></span>
+            <span v-for="(t, tindex) in fieldTip(tip)" :key="tindex">
+              <span v-if="t.Link" class="tip-link">
+                <span class="tip-link-prefix"></span>
+                <a :href="t.Link">{{t.Text}}</a>
+                <span class="tip-link-postfix"></span>
+              </span>
+              <span v-else class="tip-text">{{t.Text}}</span>
+            </span>
+            <span class="input-field-tips-tip-postfix"></span>
+          </span>
+        </span>
+        <span class="input-field-tips-postfix"></span>
+      </div>
+
+      <div class="input-field--error-tag" v-if="hasError">
+        <e-icon name="error"></e-icon>
+      </div>
+    </div>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldAgreementCheck',
+  mixins: [mixins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '协议同意勾选框',
+    Value: 'AgreementCheck',
+    Extra: [
+      {
+        Type: 'Check',
+        Label: '居中显示',
+        Name: 'Options.Center',
+      },
+    ],
+    Description: '',
+  },
+  data() {
+    return {
+      hasError: false,
+    };
+  },
+  watch: {
+    fieldData() {
+      if (!this.fieldData) {
+        this.fieldData = false;
+      }
+    },
+  },
+  created() {
+    if (!this.fieldData) {
+      this.fieldData = false;
+    }
+  },
+  computed: {
+    fieldTip() {
+      return (tip) => {
+        if (!tip || !tip.Text) return '';
+        if (!tip.Links || !Array.isArray(tip.Links) || tip.Links.length <= 0) {
+          return [{ Text: tip.Text }];
+        }
+
+        // process tip with links
+        let linkPos = [];
+        tip.Links.forEach((tl) => {
+          if (!tl || !tl.Text || !tl.Link) return;
+
+          const start = tip.Text.indexOf(tl.Text);
+          if (start >= 0) {
+            linkPos.push({
+              start,
+              end: start + tl.Text.length,
+              Link: tl.Link,
+              File: tl.File,
+            });
+          }
+        });
+
+        const textSplit = [];
+        let start = 0;
+        linkPos = linkPos.sort((a, b) => a.start - b.start);
+        for (let i = 0; i < linkPos.length; i += 1) {
+          const lp = linkPos[i];
+
+          const beforeText = tip.Text.substr(start, lp.start - start);
+          if (beforeText) {
+            textSplit.push({ Text: beforeText });
+          }
+
+          textSplit.push({
+            Text: tip.Text.substr(lp.start, lp.end - lp.start),
+            Link: lp.File
+              ? this.$options.filters.serverDocument(lp.File)
+              : lp.Link,
+          });
+
+          start += lp.end;
+        }
+
+        const afterText = tip.Text.substr(start);
+        if (afterText) {
+          textSplit.push({
+            Text: afterText,
+          });
+        }
+
+        if (textSplit.length > 0) return textSplit;
+
+        return [{ Text: tip.Text }];
+      };
+    },
+  },
+  methods: {
+    validate() {
+      if (this.Field.Required) {
+        this.hasError = typeof this.fieldData === 'undefined' || !this.fieldData;
+        return !this.hasError;
+      }
+
+      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);
+        }
+      }
+
+      this.hasError = !isValid;
+      return isValid;
+    },
+  },
+});
+</script>

package/field-components/Fields/ApiCall.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="simple-field input-field-apicall row items-start no-wrap">
+    <span
+      class="full-width"
+      v-if="Field"
+    >
+      <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">
+        <span class="prefix" v-if="Field.Options && Field.Options.Prefix">
+          {{Field.Options.Prefix}}
+        </span>
+        <span :style="(Field.Info && Field.Info.Style) ? Field.Info.Style : ''">
+          {{callResult}}
+        </span>
+        <span
+          class="postfix"
+          v-if="Field.Options && Field.Options.Postfix"
+        >{{Field.Options.Postfix}}</span>
+      </span>
+    </span>
+    <slot name="warning"></slot>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldApiCall',
+  mixins: [mixins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'Advanced',
+    Label: '特定接口处理',
+    Value: 'ApiCall',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '数据获取地址',
+        Name: 'Options.Url',
+      },
+      {
+        Type: 'String',
+        Label: '传送字段名',
+        Name: 'Options.Fields',
+        Placeholder: '逗号分割',
+        Tips: [
+          {
+            Text: '默认将传送当前字段数据，但可以指定相同数据层级下的其他字段。',
+          },
+        ],
+      },
+      {
+        Type: 'String',
+        Label: '附加字段名',
+        Name: 'Options.ExtraFieldNames',
+        Placeholder: '逗号分割',
+        Tips: [
+          {
+            Text: '如果接口返回值中有这些字段，他们将会被赋予当前父数据中。',
+          },
+        ],
+      },
+    ],
+    Description: '',
+  },
+  data() {
+    return {
+      callResult: '',
+    };
+  },
+  watch: {
+    fieldData() {
+      this.apiCall();
+    },
+  },
+  // created() {
+  //   this.apiCall();
+  // },
+  // updated() {
+  //   this.apiCall();
+  // },
+  methods: {
+    apiCall() {
+      this.Field.Options.Fields = this.Field.Options.Fields || this.Field.Name;
+
+      if (!this.Field || !this.Field.Options || !this.Field.Options.Fields) {
+        return;
+      }
+
+      const paramObj = {};
+      if (this.Field.Options.Fields.length > 0) {
+        if (typeof this.Field.Options.Fields === 'string') {
+          this.Field.Options.Fields = this.Field.Options.Fields.split(',');
+        }
+        for (let i = 0; i < this.Field.Options.Fields.length; i += 1) {
+          const fld = this.Field.Options.Fields[i];
+
+          if (fld) {
+            Object.setValue(paramObj, fld, Object.nestValue(this.data, fld));
+          }
+        }
+      } else {
+        Object.setValue(paramObj, this.Field.Name, this.fieldData);
+      }
+
+      this.postRequest(this.Field.Options.Url, paramObj).then((d) => {
+        if (d && d.msg === 'OK') {
+          if (d.data && d.data.value) {
+            this.callResult = d.data.value;
+          } else {
+            this.callResult = d.data;
+          }
+
+          // other extra new fields
+          (this.Field.Options.ExtraFieldNames || '').split(',').forEach((fname) => {
+            //this.$set(this.data, fname, d.data[fname]);
+            this.data[fname] = d.data[fname];
+          });
+        }
+      });
+    },
+  },
+});
+</script>