free-fe-core-modules 0.0.1

package/README.md

@@ -0,0 +1,7 @@
+# Free frontend core modules
+FreeEIS前端框架中的内置核心模块集合。
+
+TODO:
+ - VUE2 -> VUE3的迁移工作
+ - 多个模块合并到一起之后的清理工作
+ - 移出对free-fe-mixins的依赖并清理mixins的使用

package/components/Basic/BreadCrumbs.vue

@@ -0,0 +1,87 @@
+<template>
+  <q-breadcrumbs separator=" &gt; " class="breadcrumbs">
+    <q-breadcrumbs-el
+      v-for="(item, index) in meta"
+      :key="index"
+      @click="Bread(index)"
+      :label="item.title || item"
+      :class="{'cursor-pointer':!!item.route}"
+    />
+    <q-space></q-space>
+    <q-btn v-if="meta.length > 0 && canBack"
+      flat icon="keyboard_arrow_left" @click="back">{{backText}}</q-btn>
+  </q-breadcrumbs>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { mapWritableState } from 'pinia';
+import useAppStore from '@/stores/app';
+
+export default defineComponent({
+  name: 'BreadCrumbs',
+  props: {
+    canBack: { type: Boolean, default: true },
+    backText: { type: String, default: '返回' },
+  },
+  data() {
+    return {
+      nextFlag: false,
+      whiteList: [],
+      crumbNames: [],
+    };
+  },
+  computed: {
+    ...mapWritableState(useAppStore, ['crumbs']),
+    meta() {
+      let mt = [];
+      if (this.crumbs && this.crumbs.length) {
+        mt = this.crumbs;
+      } else if (this.$route.meta && this.$route.meta.length) {
+        mt = this.$route.meta;
+      } else {
+        for (let i = 0; i < this.$route.matched.length; i += 1) {
+          const rm = this.$route.matched[i];
+          if (rm.meta && rm.meta.length) mt = rm.meta;
+        }
+      }
+
+      return mt.map(m => {
+        if(typeof m === 'string') return this.$t(m);
+
+        return {
+          ...m,
+          ...(m.title ? {title: this.$t(m.title)} : {}),
+        };
+        }) || [];
+    },
+  },
+  created() {
+    this.crumbs = undefined;
+  },
+  methods: {
+    Bread(index) {
+      if (index === this.meta.length - 1 || index < 0 || !this.meta[index].route) {
+        return;
+      }
+
+      this.$router.push(this.meta[index].route);
+      // const backIndex = this.meta.length - 1 - index;
+      // window.history.go(-backIndex);
+    },
+    back() {
+      const URL = this.$route.fullPath.indexOf('?') === -1
+        ? this.$route.fullPath
+        : this.$route.fullPath.split('?')[0];
+      if (this.whiteList.indexOf(URL) === -1) {
+        window.history.go(-1);
+      } else {
+        // this.$store.state.watchData.refreshFlag = true;
+        window.history.go(-1);
+      }
+    },
+  },
+  beforeUnmount() {
+  },
+});
+</script>

package/components/Basic/EIcon.vue

@@ -0,0 +1,84 @@
+<template>
+  <span class="e-icon justify-center items-center">
+    <q-icon
+      v-if="isIcon"
+      class="full-width full-height"
+      :name="name"
+      v-bind="$attrs"
+    ></q-icon>
+    <q-img
+      v-else
+      class="full-width full-height"
+      style="display: block;"
+      :src="imgPath"
+      v-bind="$attrs"
+      round
+    >
+      <slot></slot>
+      <template v-slot:error v-if="!hideError">
+        <div class="error-slot column absolute-full justify-center text-center">
+          <span class="no-picture-text full-width">{{noImageText}}</span>
+        </div>
+      </template>
+    </q-img>
+    <!-- <q-icon v-else :name="ctx.config.defaultIcon">he</q-icon> -->
+  </span>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'EIcon',
+  props: {
+    name: { type: String, default: '' },
+    relative: { type: Boolean, default: true },
+    thumb: { type: Boolean, default: false },
+    noImageText: { type: String, default: '暂无图片' },
+    hideError: { type: Boolean, default: false },
+    defaultSize: { type: String, default: '@2x' },
+  },
+  computed: {
+    isIcon() {
+      return this.name && (typeof this.name === 'string') && (this.name.startsWith('img:') || this.name.indexOf('/') < 0);
+    },
+    imgPath() {
+      if (typeof this.name !== 'string' || !this.name) return '';
+
+      if (this.name.startsWith('data:')) return this.name;
+
+      if (this.name.startsWith('http://')) return this.name;
+
+      if (this.name.startsWith('https://')) return this.name;
+
+      // TODO:默认使用二倍图？
+      if (this.relative) return `images/${this.name}${this.defaultSize}.png`;
+      return this.thumb
+        ? this.$options.filters.serverThumb(this.name)
+        : this.$options.filters.serverImage(this.name);
+    },
+  },
+});
+</script>
+
+<style lang="sass" scoped>
+.e-icon
+  display: inline-block
+  position: relative
+  font-size: 24px
+  max-width: 100%
+  max-height: 100%
+  min-height: 24px
+  min-width: 24px
+  .q-icon
+    width: 24px
+    height: 24px
+  .error-slot
+    background: $grey-4
+    margin: 0
+    padding: 0
+    .no-picture-text
+      position: absolute
+      top: 50%
+      transform: translateY(-50%)
+</style>

package/components/Basic/LeveledMenus.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="leveled-menu">
+    <slot name="top"></slot>
+    <span v-for="(m,index) in menus" :key="index">
+      <q-expansion-item
+        v-if="!m.Sub || m.Sub.length <= 0"
+        clickable
+        class="simple"
+        :class="group"
+        :to="m.Route"
+        expand-icon-class="simple-expand-icon"
+        :ref="`menuItem_${group}_index`"
+      >
+        <template v-slot:header>
+          <div class="header row full-width">
+            <q-item-section v-if="showIcon && m.Icon" avatar>
+              <q-icon class="leaf-icon" :name="m.Icon"></q-icon>
+            </q-item-section>
+            <q-item-section>
+              <div class="q-item__label leaf-label">{{$t(m.Label)}}</div>
+            </q-item-section>
+            <q-item-section side
+              class="leaf-expand-icon">
+              <q-icon
+                v-if="leafIcon"
+                :name="leafIcon"
+              ></q-icon>
+            </q-item-section>
+          </div>
+        </template>
+      </q-expansion-item>
+
+      <q-expansion-item
+        v-if="m.Sub && m.Sub.length > 0"
+        :value="m.Sub.filter(s => $route.fullPath.startsWith(s.Route)).length > 0"
+        exact
+        class="expansion"
+        :class="group"
+        :dense-toggle="dense"
+        expand-icon-class="expansion-icon"
+        :expand-icon="expandIcon"
+        :expanded-icon="expandedIcon"
+        :group="group"
+        :content-inset-level="inset ? insetLevel || (showIcon ? 0.6 : 0.4) : undefined"
+        expand-separator
+        :icon="(showIcon && m.Icon) ? m.Icon : undefined"
+        :label="$t(m.Label)"
+        :to="m.Route"
+        :ref="`menuItem_${group}_index`"
+      >
+        <leveled-menus
+          :menus="m.Sub"
+          :group="`${group}_${index}`"
+          :showIcon="showIcon"
+          :insetLevel="insetLevel"
+          :dense="dense"
+          :leafIcon="leafIcon"
+          :leafExpandedIcon="leafExpandedIcon"
+          :expandedIcon="expandedIcon"
+          :expandIcon="expandIcon"
+        ></leveled-menus>
+      </q-expansion-item>
+    </span>
+    <slot name="bottom"></slot>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'LeveledMenus',
+  props: {
+    group: { type: String, default: 'DEFAULT' },
+    menus: { type: Array },
+    showIcon: { type: Boolean, default: true },
+    inset: { type: Boolean, default: true },
+    insetLevel: { type: Number, default: 0 },
+    dense: { type: Boolean, default: false },
+    leafIcon: { type: String, default: undefined },
+    leafExpandedIcon: { type: String, default: undefined },
+    expandIcon: { type: String, default: undefined },
+    expandedIcon: { type: String, default: undefined },
+  },
+});
+</script>
+
+<style lang="sass">
+.leveled-menu
+  .simple-expand-icon
+    display: none
+</style>

package/components/Basic/SummaryHead.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="summary-head-wrapper">
+    <div
+      v-for="(item, i) in data"
+      :key="i"
+      :class="
+        (item.is_count ? 'summary-head-count ' : '') +
+          (item.is_title
+            ? 'summary-head-title summary-head-item'
+            : 'summary-head-item') +
+            ((i < data.length && data[i + 1] && data[i + 1].button) ? ' last-summary' : '')
+      "
+      :style="'width: 20%;'"
+    >
+      <e-icon
+        v-if="item.icon && !item.button"
+        :relative="item.relative"
+        class="summary-head-icon"
+        :name="item.icon"
+      />
+      <div>
+        <div v-if="item.is_title" class="title">{{ item.title }}</div>
+        <div
+          v-if="item.is_title"
+          :class="'fund' + (has_multiple_head ? ' ' : ' single-fund')"
+        >
+          {{ item.fund }}
+          <span
+            v-if="has_multiple_head"
+            class="fund-selection-icon el-icon-caret-bottom"
+          ></span>
+        </div>
+        <q-btn
+          flat
+          round
+          class="summary-head-btn"
+          v-if="item.button"
+          @click="button_clicked(item)">
+
+          <e-icon
+            v-if="item.icon && item.button"
+            class="summary-head-btn-icon"
+            :relative="item.relative"
+            :name="item.icon"
+          />
+          <span class="text">{{ item.text }}</span>
+        </q-btn>
+        <span
+          v-if="typeof item.number !== 'undefined'"
+          :class="
+            item.number && Number(item.number).toString() !== 'NaN'
+              ? 'summary-head-number is-number highlight'
+              : 'summary-head-number'
+          "
+          :style="
+            item.action || item.event || item.route ? 'cursor: pointer;' : ''
+          "
+          @click="button_clicked(item)"
+          >{{ filteredValue(item) }}
+          <span v-if="item.warning" style="display: none;" class="warning">{{
+            item.warning
+          }}</span>
+          <span
+            v-if="item.unit && item.number && Number(item.number).toString() !== 'NaN'"
+            class="unit"
+            >{{ item.unit }}</span
+          >
+        </span>
+        <div v-if="item.text && !item.button" class="summary-head-label">
+          {{ item.text }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'SummaryHead',
+  mixins: [mixins.ArrayDataMixin],
+  props: {
+    has_multiple_head: { type: Boolean, default: false },
+  },
+  created() {
+    this.Bus?.$on('update_summary_head', this.refreshData);
+  },
+  methods: {
+    filteredValue(item) {
+      // use filter to the summary value
+      if (item && item.filters) {
+        let filters = [];
+        if (Array.isArray(item.filters)) {
+          filters = filters.concat(item.filters);
+        } else if (typeof item.filters === 'string') {
+          filters.push(item.filters);
+        }
+
+        for (let j = 0; j < filters.length; j += 1) {
+          const f = filters[j];
+
+          const filterFunc = this.$options.filters[f];
+          if (filterFunc) {
+            item.number = filterFunc(
+              item.number,
+            );
+          }
+        }
+
+        // remove the filter to avoid filter multiple times
+        delete item.filters;
+      }
+
+      return item.number;
+    },
+    button_clicked(item) {
+      Promise.resolve(typeof item.action === 'function' ? item.action(item) : '').then(() => {
+        if (item.event) {
+          if (item.event_params) {
+            this.Bus?.$emit(item.event, item.event_params);
+          } else {
+            this.Bus?.$emit(item.event);
+          }
+        }
+
+        if (item.route) {
+          // const rParams = { name: item.route };
+
+          // if (item.route_query) rParams.query = item.route_query;
+          // if (item.route_params) rParams.params = item.route_params;
+
+          this.$router.push(item.route);
+        }
+      });
+    },
+  },
+  beforeUnmount() {
+    this.Bus?.$off('update_summary_head', this.refreshData);
+  },
+});
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.summary-head-wrapper {
+  display: inline-flex;
+  align-items: flex-start;
+  /*justify-content: center;*/
+  height: 118px;
+  width: 100%;
+  // background: rgba(255, 255, 255, 1);
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  // border: 1px solid rgba(208, 208, 208, 1);
+
+  .summary-head-item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-width: 120px;
+    text-align: center;
+    /*margin: 0 auto;*/
+    /*margin-left: 37px;*/
+    /*margin-right: 5px;*/
+
+    .title {
+      margin: 8px;
+      height: 24px;
+      max-width: 90%;
+      font-size: 18px;
+      font-weight: bold;
+      // color: rgba(113, 152, 200, 1);
+      line-height: 24px;
+      -webkit-background-clip: text;
+      background-clip: text;
+      text-align: center;
+      overflow: hidden;
+      /*white-space: nowrap;*/
+      text-overflow: ellipsis;
+    }
+
+    .fund {
+      position: relative;
+      height: 34px;
+      min-width: 140px;
+      margin: 0 2px;
+      // background: rgba(255, 255, 255, 1);
+      border-radius: 18px;
+      // border: 1px solid rgba(151, 151, 151, 1);
+
+      font-size: 12px;
+      color: rgba(74, 74, 74, 1);
+      line-height: 34px;
+      text-align: center;
+      overflow: hidden;
+      /*white-space: nowrap;*/
+      text-overflow: ellipsis;
+
+      .fund-selection-icon {
+        display: inline;
+        position: absolute;
+        top: 10px;
+        right: 5px;
+      }
+    }
+
+    .single-fund {
+      border-width: 0;
+    }
+
+    .summary-head-icon {
+      display: inline-block;
+      // height: 36px;
+      // width: 36px;
+      margin: 0 5px;
+    }
+
+    .summary-head-number {
+      height: 34px;
+      /*font-size:28px;*/
+      font-size: 2.2vw;
+      font-weight: normal;
+      line-height: 34px;
+      text-align: center;
+
+      .warning {
+        font-size: 12px;
+        color: rgba(199, 199, 199, 1);
+        line-height: 16px;
+      }
+
+      .unit {
+        height: 16px;
+        font-size: 12px;
+        line-height: 16px;
+      }
+    }
+
+    .summary-head-label {
+      height: 16px;
+      font-size: 12px;
+      // color: rgba(155, 155, 155, 1);
+      line-height: 16px;
+      text-align: center;
+    }
+
+    .summary-head-btn {
+      cursor: pointer;
+
+      .summary-head-btn-icon {
+        display: block;
+        width: 52px;
+        height: 52px;
+        margin: 7px auto;
+      }
+
+      .text {
+        // font-size: 12px;
+        // color: rgba(0, 138, 183, 1);
+        line-height: 16px;
+        text-align: center;
+        margin: 0 auto;
+      }
+    }
+  }
+
+  .summary-head-title:after,
+  .summary-head-count:after {
+    position: absolute;
+    content: '';
+    display: inline-block;
+    width: 1px;
+    height: 80px;
+    // background: rgba(216, 216, 216, 1);
+    border-radius: 2px;
+    left: 16.67%;
+  }
+}
+
+@media screen and (min-width: 1240px) {
+  .summary-head-wrapper {
+    .summary-head-item {
+      .summary-head-number {
+        font-size: 28px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1080px) {
+  .summary-head-wrapper {
+    .summary-head-item {
+      .summary-head-number {
+        font-size: 22px;
+      }
+    }
+  }
+}
+
+.summary-head-wrapper {
+  .summary-head-count {
+    .summary-head-number {
+      font-size: 40px;
+      font-weight: normal;
+      color: rgba(245, 166, 35, 1);
+      line-height: 49px;
+    }
+  }
+}
+</style>