free-fe-core-modules 0.0.5 → 0.0.7

package/README.md

@@ -1,7 +1,132 @@
-# Free frontend core modules
-FreeEIS前端框架中的内置核心模块集合。
+<p align="center">
+  <a href="https://freeeis.aslancer.com" target="_blank">
+    <img
+      src="https://user-images.githubusercontent.com/33030594/227073920-03ed137f-c4f7-4ed7-ae05-d781dd1991f7.png"
+      alt="FreeEIS"
+      width="250"
+    />
+  </a>
+</p>
 
-TODO:
- - VUE2 -> VUE3的迁移工作
- - 多个模块合并到一起之后的清理工作
- - 移出对free-fe-mixins的依赖并清理mixins的使用
+<p align="center">
+  <a href="https://www.npmjs.com/package/free-fe-starter-kit">
+    <img src="https://img.shields.io/npm/v/free-fe-starter-kit" alt="Version">
+  </a>
+  <a href="https://www.npmjs.com/package/free-fe-starter-kit">
+    <img src="https://img.shields.io/npm/dm/free-fe-starter-kit" alt="Download">
+  </a>
+  <a href="https://github.com/didi/LogicFlow/blob/master/LICENSE">
+    <img src="https://img.shields.io/npm/l/free-fe-starter-kit" alt="LICENSE">
+  </a>
+</p>
+
+简体中文 | [English](https://github.com/freeeis/.github/blob/main/profile/README.en-us.md)
+
+[更多文档](https://freeeis.aslancer.com)（完善中……）
+
+FreeEIS，是一种可扩展的、企业级系统统一开发框架。FreeEIS旨在解决越来越流行的远程协作开发中，系统拆分及组装的问题。并且通过积累越来越多的功能模块，使得系统的搭建更快捷。
+
+## 特性
+
+
+- 🛠 高扩展性
+
+  “一切”皆可为模块，从一个漂亮的按钮、一个简单的运算工具函数，到一套完备的ERP系统，都可以做为FreeEIS中的模块。模块拆分灵活，模块间可零耦合，模块即插即用。同时考虑模块自身的扩展性，可开发模块做为另一模块的“插件”。
+
+- 🎯 聚焦业务逻辑
+
+  FreeEIS内核将与业务逻辑无关的功能预制，使得开发人员只需要考虑模块内部的业务逻辑，诸如模块加载、引用依赖、多语言支持、多样式支持、数据模型生成、权限管理与控制、路由生成、Mock功能等等都已经内置在FreeEIS内核中，模块开发过程中不需要再做考虑。特别是像数据模型生成、权限管理与控制，这类通常会消耗开发者大量精力的部分，也被剥离解耦，大大提高了开发效率。
+
+- 🚀 快速集成
+
+  FreeEIS中所有的功能都被拆分成大大小小的模块，在需要整合成为一整套系统的时候，只需要配置所需要的模块，或将模块代码（目录）放到统一的位置，FreeEIS内核将自动加载所有需要的模块，并整合为一套完整的系统。这使得系统级的组装更加灵活，可以根据需要极速集成成为大小和功能完全不同的完整系统。
+
+- 🍹 不改变开发习惯
+
+  FreeEIS尽力做到少封装，无SDK，避免改变现有的开发习惯。一个脚手架工程 + 一套简单的规范就可以实现快速的系统开发。
+
+
+- 🚪 代码安全
+
+  在某些场景下，我们不希望所有的开发人员拿到很多甚至所有功能模块的代码才可以运行调试自己的功能模块。FreeEIS的设计使得开发人员只关注自己所开发的模块也只需要访问到自己开发的功能模块的代码库，可以在不影响开发的情况下确保代码安全。
+
+
+## 使用
+
+### 前提条件
+
+当前版本中，前端使用了如下技术或框架，您需要已经对这些技术或框架有所了解甚至拥有相关经验：
+ - [VUE3](https://vuejs.org/)是我们整个前端部分的基础。
+ - [Quasar Framework](https://quasar.dev/)是一个基于VUE的框架，具有多种特性，如拥有丰富的组件，支持Material Design，支持跨平台等等。但FreeEIS中并禁止使用其他组件库，您依然可以根据自己的喜好选择，我们只是借助了Quasar Framework的脚手架和跨平台支持，甚至您也可以将FreeEIS放在与Quasar Framework无关的其他VUE工程中使用。
+
+当前版本中，后端使用了如下技术或框架，您需要已经对这些技术或框架有所了解甚至拥有相关经验：
+ - [NodeJS](https://nodejs.org/)是基础！
+ - [ExpressJS](http://expressjs.com/)是基础之上的基础😉。
+ - [MongoDB](https://www.mongodb.com/)、[Mongoose](http://www.mongoosejs.net/), 目前已经实现的数据库操作模块基于Mongoose，但我们期望后续逐步添加更多数据库的支持。
+ - [Redis](https://redis.io/)，建议使用Redis的docker镜像部署。
+
+### 前端
+
+```sh
+# 安装前端脚手架
+
+$ git clone https://github.com/freeeis/free-fe-starter-kit.git fe
+
+# 安装依赖包
+$ cd fe
+$ yarn install
+
+# 运行
+$ yarn start
+
+```
+
+
+### 后端
+
+在使用后端前，请先安装MongoDB和Redis，也可以使用远程部署的实例，FreeEIS的相关内置模块允许配置其地址和端口。另外，Redis不是必须的，如果无法连接到Redis，FreeEIS将使用[memory-cache](https://github.com/ptarjan/node-cache#readme)做为缓存，这不会影响开发或运行。
+
+```sh
+# 安装后端脚手架
+
+$ git clone https://github.com/freeeis/free-be-starter-kit.git be
+
+# 安装依赖包
+$ cd be
+$ yarn install
+
+# 创建存放机密数据的文件（也可手动创建）
+$ touch global.js
+
+# 运行
+$ yarn start
+
+```
+
+### 访问系统
+
+成功运行前后端工程后，通过链接[http://localhost:8080](http://localhost:8080/)来访问系统。也可通过修改配置，使前端运行后自动从浏览器中打开页面。
+
+## 内置功能模块
+
+我们期望通过提供一些内置的功能模块，来简化开发人员的工作，比如账号管理、权限控制这些在任何系统中都需要的功能，我们做成了模块，可以直接被引用。下面是一个列表，列出来目前我们所提供的内置功能模块，以及他们的功能。当然，根据我们的宗旨，我们不强制您使用任何一个内置模块，您可以根据自己的需要定制开发所有需要的模块，而只是使用FreeEIS的规范并用她来组装系统。并且我们鼓励您这么做，因为我们相信，在任何一个领域都有很多比我们更加专业的开发人员，我们希望有更多的人开发出越来越多的强大的功能模块供他人使用。
+
+| 模块      | 前端模块 | 后端模块 | 功能 | 说明|
+| :------- |------- |------- | ----|----: |
+| 内核 | [free-fe-core](https://github.com/freeeis/free-fe-core) | [free-be-core](https://github.com/freeeis/free-be-core) | 加载其他模块|默认添加在脚手架中|
+| 基础功能 | [free-fe-core-modules](https://github.com/freeeis/free-fe-core-modules) | [free-be-core-modules](https://github.com/freeeis/free-be-core-modules)| 数据字典、日志、菜单管理、系统配置、<br>错误代码管理、缓存管理、哀悼日、<br>文件处理、数据校验方法、<br>多语言支持、多皮肤支持等等 | 默认添加在脚手架中|
+| 账号管理 | [free-fe-account](https://github.com/freeeis/free-fe-account) | [free-be-account](https://github.com/freeeis/free-be-account) |账号管理、组织结构管理、权限管理、<br>角色管理、权限控制| 默认添加在脚手架中|
+| 数据库 | / | [free-be-mongodb](https://github.com/freeeis/free-be-mongodb) |数据库操作| 默认添加在脚手架中|
+| 演示模块 | [free-fe-demo](https://github.com/freeeis/free-fe-demo) | [free-be-demo](https://github.com/freeeis/free-be-demo) |演示模块内部结构和使用方法| 默认添加在脚手架中|
+
+
+## 联系我们
+
+扫码添加微信加入交流群
+
+<img width="120" alt="" style="margin-left:24px" src="https://user-images.githubusercontent.com/33030594/227093642-b38b7871-16eb-48b6-b96a-191433dc55c2.png">
+
+
+## 贡献
+
+FreeEIS虽然已经在多个大型项目中得到了验证，但做为开源项目她依然处于比较早期的阶段，需要各位大牛的帮助一起成长。我们欢迎任何建议或意见或贡献，小到一个字的修改，大到架构的调整建议。我们感谢您的任何捐赠、PR、Issue等等，有任何相关问题都可以发邮件给我们：【[freeeis@xixineis.com](mailto:freeeis@xixineis.com)】。感谢🙏🙏！！

package/components/Basic/BreadCrumbs.vue

@@ -9,12 +9,13 @@
     />
     <q-space></q-space>
     <q-btn v-if="meta.length > 0 && canBack"
-      flat icon="keyboard_arrow_left" @click="back">{{backText}}</q-btn>
+      flat icon="keyboard_arrow_left" @click="back">{{$t(backText)}}</q-btn>
   </q-breadcrumbs>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
+import { useRouter, useRoute } from 'vue-router'
 import { mapWritableState } from 'pinia';
 import useAppStore from '@/stores/app';
 
@@ -24,6 +25,14 @@ export default defineComponent({
     canBack: { type: Boolean, default: true },
     backText: { type: String, default: '返回' },
   },
+  setup() {
+    const router = useRouter();
+
+    return {
+      router,
+      route: useRoute(),
+    };
+  },
   data() {
     return {
       nextFlag: false,
@@ -37,11 +46,11 @@ export default defineComponent({
       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 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];
+        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;
         }
       }
@@ -65,14 +74,14 @@ export default defineComponent({
         return;
       }
 
-      this.$router.push(this.meta[index].route);
+      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];
+      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 {

package/components/Basic/LeveledMenus.vue

@@ -6,7 +6,7 @@
         v-if="!m.Sub || m.Sub.length <= 0"
         clickable
         class="simple"
-        :class="group"
+        :class="`${group} level_${level || 0}`"
         :to="m.Route"
         expand-icon-class="simple-expand-icon"
         :ref="`menuItem_${group}_index`"
@@ -17,7 +17,7 @@
               <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>
+              <div class="q-item__label leaf-label">{{translate ? $t(m.Label) : m.Label}}</div>
             </q-item-section>
             <q-item-section side
               class="leaf-expand-icon">
@@ -32,10 +32,10 @@
 
       <q-expansion-item
         v-if="m.Sub && m.Sub.length > 0"
-        :value="m.Sub.filter(s => $route.fullPath.startsWith(s.Route)).length > 0"
+        :modelValue="m.Sub.filter(s => $route.fullPath.startsWith(s.Route)).length > 0"
         exact
         class="expansion"
-        :class="group"
+        :class="`${group} level_${level || 0}`"
         :dense-toggle="dense"
         expand-icon-class="expansion-icon"
         :expand-icon="expandIcon"
@@ -44,13 +44,14 @@
         :content-inset-level="inset ? insetLevel || (showIcon ? 0.6 : 0.4) : undefined"
         expand-separator
         :icon="(showIcon && m.Icon) ? m.Icon : undefined"
-        :label="$t(m.Label)"
+        :label="translate ? $t(m.Label) : m.Label"
         :to="m.Route"
         :ref="`menuItem_${group}_index`"
       >
         <leveled-menus
           :menus="m.Sub"
           :group="`${group}_${index}`"
+          :level="level + 1"
           :showIcon="showIcon"
           :insetLevel="insetLevel"
           :dense="dense"
@@ -71,6 +72,7 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'LeveledMenus',
   props: {
+    level: { type: Number, default: 0 },
     group: { type: String, default: 'DEFAULT' },
     menus: { type: Array },
     showIcon: { type: Boolean, default: true },
@@ -81,7 +83,13 @@ export default defineComponent({
     leafExpandedIcon: { type: String, default: undefined },
     expandIcon: { type: String, default: undefined },
     expandedIcon: { type: String, default: undefined },
+    translate: { type: Boolean, default: false },
   },
 });
 </script>
 
+<style lang="sass">
+.leveled-menu
+  .simple-expand-icon
+    display: none
+</style>

package/components/Basic/SummaryHead.vue

@@ -76,6 +76,7 @@
 
 <script>
 import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router'
 import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
@@ -90,10 +91,12 @@ export default defineComponent({
       data,
       refreshData,
     } = useObjectData(props, ctx);
+    const router = useRouter();
 
     return {
-      data, 
+      data,
       refreshData,
+      router,
     };
   },
   created() {
@@ -150,7 +153,7 @@ export default defineComponent({
           // if (item.route_query) rParams.query = item.route_query;
           // if (item.route_params) rParams.params = item.route_params;
 
-          this.$router.push(item.route);
+          this.router.push(item.route);
         }
       });
     },

package/components/Dialog/BasicDialog.vue

@@ -66,6 +66,8 @@
             :Field="field"
             :values="fieldsData"
             ref="fieldsToValid"
+            @cancel="btnCancel"
+            @ok="onOKClick"
             @input="onInputFieldInput(field)"
           ></free-field>
         </div>
@@ -75,7 +77,7 @@
       <q-card-actions
         align="center"
         class="action-buttons full-width absolute"
-        v-if="canOK || canCancel"
+        v-if="(canOK || canCancel) && !hideActions"
       >
         <q-btn
           :label="cancelText"
@@ -126,6 +128,7 @@ export default defineComponent({
     needText: { type: Boolean, default: false },
     text_label: { type: String, default: '' },
     max_text_length: { type: Number, default: 100 },
+    hideActions: { type: Boolean, default: false },
     canOK: { type: Boolean, default: true },
     canCancel: { type: Boolean, default: false },
     canClose: { type: Boolean, default: false },
@@ -205,7 +208,6 @@ export default defineComponent({
     // following method is REQUIRED
     // (don't change its name --> "show")
     show() {
-      // debugger
       this.$refs.dialog.show();
       this.timeout_counter();
 

package/components/FloatingWindow/index.vue

@@ -15,6 +15,7 @@
 
 <script>
 import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
   name: 'FloatingWindow',
@@ -24,6 +25,13 @@ export default defineComponent({
     onlyIn: { type: Array, default: () => [] },
     top: { type: Number, default: 0 },
   },
+  setup() {
+    const router = useRouter();
+
+    return {
+      router,
+    };
+  },
   data() {
     return {
       x: 150,
@@ -53,7 +61,7 @@ export default defineComponent({
         if (/^(http|https):\/\/.*/.test(this.url)) {
           window.open(this.url);
         } else {
-          this.$router.push(this.url);
+          this.router.push(this.url);
         }
       }
     },

package/components/SelectLocales/index.vue

@@ -17,7 +17,7 @@
   </q-btn>
 </template>
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent, getCurrentInstance, computed } from 'vue';
 import useAppStore from '@/stores/app';
 
 export default defineComponent({
@@ -25,22 +25,25 @@ export default defineComponent({
   props: {
     icon: { type: String, default: 'translate' },
   },
-  computed: {
-    locales() {
-      return (this.ctx && this.ctx.config.locales) || [];
-    },
-  },
-  created() {
+  setup() {
+    const { proxy:vm } = getCurrentInstance();
+
     const appStore = useAppStore();
-    this.$i18n.locale = appStore.locale || (this.locales && (this.locales.length > 0) && this.locales[0]);
-  },
-  methods: {
-    localeChanged(l){
-      const store = useAppStore();
 
-      this.$i18n.locale = l;
-      store.SET_LOCALE(l);
+    const localeChanged = (l) => {
+      vm.$i18n.locale = l;
+      appStore.SET_LOCALE(l);
     }
-  }
+
+    const locales = computed(() => (vm.ctx.config.locales) || []);
+    const locale = appStore.locale || vm.ctx.config.defaultLocale || (locales.value && (locales.value.length > 0) && locales.value[0].locale) || 'zh-cn';
+
+    localeChanged(locale);
+
+    return {
+      locales,
+      localeChanged,
+    };
+  },
 });
 </script>

package/components/SlidingCarousel/index.vue

@@ -27,6 +27,7 @@
 
 <script>
 import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router'
 import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
@@ -48,9 +49,11 @@ export default defineComponent({
       refreshData,
     } = useObjectData(props, ctx);
 
+    const router = useRouter();
     return {
-      data, 
+      data,
       refreshData,
+      router,
     };
   },
   data() {
@@ -77,7 +80,7 @@ export default defineComponent({
         // window.location.href = l;
           window.open(carouse.url);
         } else {
-          this.$router.push(carouse.url);
+          this.router.push(carouse.url);
         }
       }
     },

package/components/SlidingNews/index.vue

@@ -2,7 +2,7 @@
   <div
     v-if="visible"
     class="row full-width sliding-news justify-center"
-    :class="(data && data.length) ? '' : 'empty'"
+    :class="(localData.length) ? '' : 'empty'"
   >
     <span class="sliding-news-label row items-center">
       <e-icon
@@ -26,23 +26,19 @@
       vertical
     >
       <q-carousel-slide
-        v-for="(carouse, index) in data"
+        v-for="(carouse, index) in localData"
         :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>
+        <div class="row no-wrap items-center justify-center full-height">
+          <div class="sliding-news-title col ellipsis">{{carouse.title}}</div>
           <q-space />
-          <span class="float-right sliding-news-right">
-            <span
-              class="sliding-news-date"
-              :style="`line-height: ${heightString}`"
-            >
+          <div class="sliding-news-right"
+            :style="`line-height: ${heightString}`">
               {{filter('normalDate',(carouse.PublishDate || carouse.LastUpdateDate))}}
-            </span>
-          </span>
+          </div>
         </div>
       </q-carousel-slide>
     </q-carousel>
@@ -65,6 +61,7 @@
 </template>
 
 <script>
+import { useRouter, useRoute } from 'vue-router'
 import { defineComponent } from 'vue';
 import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
@@ -72,6 +69,13 @@ export default defineComponent({
   name: 'SlidingNews',
   props: {
     ...objectDataProps,
+    fields: {
+      type: Object,
+      default: () => ({
+        title: 'Title',
+        date: 'LastUpdateDate'
+      }),
+    },
     interval: { type: Number, default: 3000 },
     height: { type: String, default: '40px' },
     width: { type: String, default: '100%' },
@@ -88,10 +92,13 @@ export default defineComponent({
       data,
       refreshData,
     } = useObjectData(props, ctx);
+    const router = useRouter();
 
     return {
-      data, 
+      data,
       refreshData,
+      router,
+      route: useRoute(),
     };
   },
   data() {
@@ -113,24 +120,26 @@ export default defineComponent({
       return this.height;
     },
   },
-  // watch: {
-  //   visible() {
-  //     if (!this.visible) {
-  //       clearInterval(this.timer);
-  //     }
-  //   },
-  // },
-  // created() {
-  //   this.timer = setInterval(this.carouselNext, this.interval);
-  // },
+  localData() {
+    const fks = Object.keys(this.fields || {});
+    return (this.data || []).map((dd) => {
+      const ret = {};
+      for (let i = 0; i < fks.length; i += 1) {
+        const fk = fks[i];
+        ret[fk] = dd[this.fields[fk]];
+      }
+
+      return { ...dd, ...ret };
+    });
+  },
   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 });
+      if (url && this.route.fullPath !== url) {
+        this.router.push({ path: url });
       }
     },
     // carouselNext() {

package/free-field/Fields/Category.js

@@ -1,4 +1,5 @@
 import { defineComponent, h } from 'vue';
+import { freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldCategory',
@@ -9,7 +10,7 @@ export default defineComponent({
     Description: '',
   },
   props: {
-    Field: { type: Object },
+    ...freeFieldProps,
   },
   methods: {
   },

package/free-field/Fields/Check.js

@@ -76,6 +76,7 @@ export default defineComponent({
     if (!props.Field) return {};
 
     const { fieldData, setFieldData } = useFreeField(props);
+    fieldData.value = fieldData.value || false;
 
     const before = (props.Field.showLabel && !props.Field.dense && props.Field.Label !== void 0) ? () => h(freeFieldLabel, {
       Field: props.Field,

package/free-field/Fields/DynamicList.js

@@ -463,7 +463,8 @@ export default defineComponent({
     );
 
     const bodyCell = (slotProps) => {
-      fieldsToValidate.value = slotProps.col?.List?.length > 1 ? slotProps.col.List.map((col) =>
+      const fields = ref([]);
+      fields.value = slotProps.col?.List?.length > 1 ? slotProps.col.List.map((col) =>
         h(FreeField, {
           Field: columnField(col, true, slotProps.col),
           values: slotProps.row,
@@ -478,7 +479,11 @@ export default defineComponent({
           onInput: cellChanged,
         }),
       ];
-      
+
+      // add fields from the current cell to validate list
+      fieldsToValidate.value.push(...fields.value);
+
+
       if (slotProps.col.name === "listActions") {
         return h(QTd, null, {
           default: () =>
@@ -503,15 +508,13 @@ export default defineComponent({
             rowspan: slotProps.value ? slotProps.value.rowspan || "1" : "1",
             class: "items-center justify-center",
           },
-          [
-            h(
-              "span",
-              {
-                class: "full-height full-width",
-              },
-              fieldsToValidate.value,
-            )
-          ]
+          () => h(
+            "span",
+            {
+              class: "full-height full-width",
+            },
+            fields.value,
+          )
         );
       }
     };

package/free-field/Fields/TimeRange.vue

@@ -96,7 +96,7 @@
 </template>
 
 <script>
-import { defineComponent, ref, getCurrentInstance } from 'vue';
+import { defineComponent, ref, getCurrentInstance, watch, watchEffect, computed } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import { useFormValidator} from '../../composible/useFormValidator';
 
@@ -300,7 +300,7 @@ export default defineComponent({
     const objOptions = computed(() => props.Field.Options || undefined);
 
     const timeOptions = computed(() => {
-      if (objOptions.values) return undefined;
+      if (objOptions.value) return undefined;
 
       if (!props.Field.MinValue && !props.Field.MaxValue) {
         return undefined;
@@ -349,6 +349,8 @@ export default defineComponent({
     })
 
     return {
+      min,
+      max,
       fieldData,
       locale,
 

package/free-field/composible/freeFieldLabel.js

@@ -1,4 +1,5 @@
 import { defineComponent, h } from 'vue';
+import { QTooltip } from 'quasar';
 
 export default defineComponent({
   name: 'FreeFieldLabel',
@@ -6,13 +7,19 @@ export default defineComponent({
     Field: { type: Object },
   },
   setup(props){
+    if (!props.Field) return () => null;
+
     return () => (props.Field?.Label === void 0) ? null : h('span', {
-      class:`field-label field-label-readonly ${(props.Field.Label && props.Field.Label.trim().length)
-          ? '' : 'field-label-empty'} ${props.Field.Required ? 'required' : ''}`,
+      class: {
+        'field-label': true,
+        'field-label-readonly': props.Field.ReadOnly,
+        'field-label-empty': props.Field.Label?.trim().length <= 0,
+        required: props.Field.Required,
+      },
     }, [
       props.Field.Description && h(QTooltip, {
         anchor: "top right",
-      }, props.Field.Description),
+      }, () => props.Field.Description),
       props.Field.Label || '',
       props.Field.Required && h('span', {
         class: 'required-mark',

package/index.js

@@ -1,5 +1,7 @@
-import { date } from 'quasar';
+
+import { date as quasarDate } from 'quasar';
 import config from '@/config';
+import useAppStore from '@/stores/app';
 import MsgDialog from './components/Dialog/index';
 
 import EIcon from './components/Basic/EIcon.vue';
@@ -20,12 +22,29 @@ import routers from './router';
 
 // global filters
 const filters = {
-  serverImage: url => (url ? `${config.imageUrlBase}${url}` : ''),
-  serverVideo: url => (url ? `${config.videoUrlBase}${url}` : ''),
-  serverThumb: url => (url ? `${config.thumbUrlBase}${url}` : ''),
-  serverDocument: url => (url ? `${config.documentUrlBase}${url}` : ''),
+  serverImage: (url) => {
+    if (typeof url === 'string' && url.startsWith('@')) return url.substring(1);
+
+    return url ? `${config.imageUrlBase}${url}` : '';
+  },
+  serverVideo: (url)  => {
+    if (typeof url === 'string' && url.startsWith('@')) return url.substring(1);
+
+    return url ? `${config.videoUrlBase}${url}` : '';
+  },
+  serverThumb: (url)  => {
+    if (typeof url === 'string' && url.startsWith('@')) return url.substring(1);
+
+    return url ? `${config.thumbUrlBase}${url}` : '';
+  },
+  serverDocument: (url)  => {
+    if (typeof url === 'string' && url.startsWith('@')) return url.substring(1);
+
+    return url ? `${config.documentUrlBase}${url}` : '';
+  },
   serverPath: (url) => {
     if (!url) return '';
+    if (typeof url === 'string' && url.startsWith('@')) return url.substring(1);
 
     const dotIndex = url.lastIndexOf('.');
     const ext = url.substring(dotIndex, url.length).toLowerCase();
@@ -100,117 +119,143 @@ const filters = {
     return filters.padding((date.getDate()));
   },
   ago: (d) => {
-    let date1 = new Date();
-    let date2 = new Date(d);
+    const date1 = new Date();
+    const date2 = new Date(d);
 
-    let diff = date.getDateDiff(date1, date2, 'seconds');
+    let diff = quasarDate.getDateDiff(date1, date2, 'seconds');
     if (diff < 1) {
-      return diff + this.$t('justNow');
-    } else if (diff < 60) {
-      return diff + this.$t('secondsAgo');
+      return diff + Vue.prototype.$t('justNow');
+    } if (diff < 60) {
+      return diff + Vue.prototype.$t('secondsAgo');
     }
 
-    diff = date.getDateDiff(date1, date2, 'minutes');
+    diff = quasarDate.getDateDiff(date1, date2, 'minutes');
     if (diff < 60) {
-      return diff + this.$t('minutesAgo');
+      return diff + Vue.prototype.$t('minutesAgo');
     }
 
     if (diff < 24) {
-      return diff + this.$t('hoursAgo');
+      return diff + Vue.prototype.$t('hoursAgo');
     }
 
-    diff = date.getDateDiff(date1, date2, 'days');
+    diff = quasarDate.getDateDiff(date1, date2, 'days');
     if (diff < 31) {
-      return diff + this.$t('daysAgo');
+      return diff + Vue.prototype.$t('daysAgo');
     }
 
-    diff = date.getDateDiff(date1, date2, 'months');
+    diff = quasarDate.getDateDiff(date1, date2, 'months');
     if (diff < 13) {
-      return diff + this.$t('monthsAgo');
+      return diff + Vue.prototype.$t('monthsAgo');
     }
 
-    diff = date.getDateDiff(date1, date2, 'years');
-    return diff + this.$t('yearsAgo');
+    diff = quasarDate.getDateDiff(date1, date2, 'years');
+    return diff + Vue.prototype.$t('yearsAgo');
   },
 };
 
 export default (app, root) => {
   root.use(MsgDialog);
 
+  const appStore = useAppStore();
+
   return {
     config: {
       backendDependencies: ["core-modules"],
       dictFields: [
         {
-          Type: "Category",
-          Label: "字典数据信息",
-        },
-        {
-          Name: "Index",
-          Label: "排序号",
-          Type: "Number",
+          Type: 'Category',
+          Label: '字典数据信息',
         },
         {
-          Name: "Name",
-          Label: "数据名称",
-          Type: "String",
-        },
-        {
-          Name: "Label",
-          Label: "显示名称",
-          Type: "String",
+          Name: 'Index',
+          Label: '排序号',
+          Type: 'Number',
         },
         {
-          Name: "Description",
-          Label: "说明",
-          Type: "Text",
+          Name: 'Name',
+          Label: '数据名称',
+          Type: 'String',
         },
+        // {
+        //   Name: 'Label',
+        //   Label: '显示名称',
+        //   Type: 'String',
+        // },
+        // {
+        //   Name: 'Description',
+        //   Label: '说明',
+        //   Type: 'Text',
+        // },
         {
-          Name: "Type",
-          Label: "类型",
-          Type: "Select",
-          Options: [
-            {
-              Label: "普通类型",
-              Value: "String",
-            },
+          Name: 'Labels',
+          Type: 'Tabs',
+          Label: '显示内容',
+          DataType: 'Array',
+          Default: [
             {
-              Label: "文件",
-              Value: "File",
+              Locale: appStore.locale || app.config.defaultLocale,
             },
           ],
+          Options: {
+            Dense: true,
+            LabelField: 'Name',
+            ValueField: 'Locale',
+            List: [
+              {
+                Name: 'Locale',
+                Label: '语言',
+                Type: 'String',
+                ReadOnly: true,
+              },
+              {
+                Name: 'Label',
+                Label: '显示名称',
+                Type: 'String',
+              },
+              {
+                Name: 'Description',
+                Label: '说明',
+                Type: 'Text',
+              },
+            ],
+          },
         },
         {
-          Name: "Value",
-          Label: "值",
-          Type: "String",
+          Name: 'Type',
+          Label: '类型',
+          Type: 'Select',
+          Options: [{
+            Label: '普通类型',
+            Value: 'String',
+          }, {
+            Label: '文件',
+            Value: 'File',
+          }],
         },
         {
-          Name: "Image",
-          Label: "图片/图标/文件",
-          Type: "File",
-          MaxValue: "100m",
-          Options: {
-            Dense: false,
-            AsLink: false,
-            Ext: "jpg,png,pdf,doc,docx,zip",
-          },
-          Tips: [
-            {
-              Text: "文件不可超过100M。格式支持：PNG、JPG、PDF、DOC、DOCX、ZIP。",
-            },
-          ],
+          Name: 'Value',
+          Label: '值',
+          Type: 'String',
         },
         {
-          Type: "Category",
-          Label: "高级设置",
+          Name: 'Image',
+          Label: '图片/图标/文件',
+          Type: 'File',
+          MaxValue: '100m',
+          Options: { Dense: false, AsLink: false, Ext: 'jpg,png,pdf,doc,docx,zip' },
+          Tips: [{
+            Text: '文件不可超过100M。格式支持：PNG、JPG、PDF、DOC、DOCX、ZIP。',
+          }],
         },
         {
-          Name: "Info",
-          Label: "附加信息",
-          Type: "Text",
+          Type: 'Category',
+          Label: '高级设置',
         },
-      ],
+        {
+          Name: 'Info',
+          Label: '附加信息',
+          Type: 'Text',
+        }],
       menuFields: [
         {
           Type: "Category",
@@ -275,29 +320,29 @@ export default (app, root) => {
       LeveledMenus,
       BreadCrumbs,
       ThemeSwitch,
-      ...FieldComponents.components,
       Mourning,
+      ...FieldComponents.components,
     },
     fieldComponents: FieldComponents.fieldComponents,
 
     validators: {
       validatorNotEmpty: (d) =>
-        d !== undefined && d.length > 0 && d.trim().length > 0,
+        d && d.length > 0 && d.trim().length > 0,
       validatorMobilePhone: (d) =>
-        /^(0|86|17951)?(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/.test(
+        !d || /^(0|86|17951)?(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/.test(
           d
         ),
       validatorEmail: (d) =>
-        /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+        !d || /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
           d
         ),
       validatorPhoneOrEmail: (d) =>
-        d !== undefined &&
+        d !== void 0 &&
         d.length > 0 &&
-        (this.validatorPhone(d) || this.validatorEmail(d)),
+        (this.validatorMobilePhone(d) || this.validatorEmail(d)),
       // validatorMinLength: (d, len = 0) => d !== undefined && d.length >= len,
       validatorChinaIDNumber: (d) =>
-        /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
+        !d || /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
           d
         ),
       // validatorSame: (d, to) => d === to,

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "free-fe-core-modules",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "main": "index.js",
-  "repository": "git@gitlab.com:eis-base/modules/free-fe-core-modules.git",
+  "repository": "https://github.com/freeeis/free-fe-core-modules.git",
   "author": "zhiquan",
   "license": "UNLICENSED",
   "dependencies": {

package/view/dict/index.vue

@@ -16,7 +16,7 @@
           style="border-bottom: solid 1px grey;"
         >
           <div>
-            {{ prop.node.Label }}
+            {{ dictLabel(prop.node) }}
             <span
               v-if="prop.node.level === 1 && prop.node.Name"
               class="dictionary-data-name"
@@ -78,11 +78,29 @@
         </div>
       </template>
     </q-tree>
+
+    <div class="row items-center justify-center q-my-md" v-if="canImport">
+      <q-btn flat @click="exportTranslates" class="btn-primary q-mr-md">导出翻译</q-btn>
+      <q-btn flat @click="importTranslates" class="btn-primary">导入翻译</q-btn>
+
+      <div class="row full-width q-mt-md">
+        <q-input v-if="showImportTextArea"
+          class="full-width"
+          type="textarea"
+          autogrow
+          v-model="importText"
+          placeholder="请输入要导入的内容(tab键分割)，如：
+    xxx类型 类型一  en-us Type One
+    xxx类型 类型二  en-us Type Two"></q-input>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
+import { copyToClipboard } from 'quasar';
+import { requests } from '@/boot/axios';
 import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
@@ -98,6 +116,9 @@ export default defineComponent({
       selectedDictNode: {},
       editingDict: {},
       dictFields: [],
+      canImport: false,
+      importText: '',
+      showImportTextArea: false,
     };
   },
   setup(props, ctx) {
@@ -124,9 +145,26 @@ export default defineComponent({
       }
     },
   },
+  beforeCreate() {
+    requests.canI('dict/import').then((r) => {
+      if (r) {
+        this.canImport = true;
+      }
+    });
+  },
   created() {
     this.dictFields = this.getModule('core-modules').config.dictFields;
   },
+  computed: {
+    dictLabel() {
+      return (d) => {
+        if (!d || !d.Labels) return '';
+
+        const lb = d.Labels.find((l) => l.Locale === this.$i18n.locale );
+        return lb && lb.Label;
+      }
+    }
+  },
   methods: {
     loadSubDicts({ key, done, node /* , fail */ }) {
       this.GetData(key, node.level)
@@ -153,6 +191,27 @@ export default defineComponent({
       }
     },
     editNode(n) {
+      if (!n) return;
+
+      n.Labels = n.Labels || [];
+      // check labels according to the locales
+      const locales = this.ctx.config.locales || [];
+      for(let i = 0; i < locales.length; i += 1) {
+        const locale = locales[i];
+        const existsLabel = n.Labels.find((l) => l.Locale === locale.locale);
+
+        if (!existsLabel) {
+          n.Labels.push({
+            Label: '',
+            Locale: locale.locale,
+            Description: '',
+            Name: locale.name,
+          });
+        } else {
+          existsLabel.Name = locale.name;
+        }
+      }
+
       if (this.selectedDictNode && this.selectedDictNode.id === n.id) {
         this.selectedDictNode = {};
         this.editingDict = {};
@@ -276,6 +335,31 @@ export default defineComponent({
         this.onCancelClick();
       }
     },
+    importTranslates() {
+      if (!this.showImportTextArea) {
+        this.showImportTextArea = true;
+        this.importText = '';
+      } else {
+        // do the i
+        this.postRequest('/dict/import/trans', {c: this.importText}).then((d) => {
+          const data = d && d.data;
+          if (d && d.msg === 'OK') {
+            this.$q.notify('导入成功！');
+          }
+        });
+      }
+    },
+    exportTranslates() {
+      this.showImportTextArea = false;
+      this.getRequest('/dict/export/trans').then((d) => {
+        const data = (d && d.data) || {};
+
+        if (d.data.c) {
+          copyToClipboard(d.data.c);
+          this.$q.notify('已拷贝到剪切板，可直接粘贴至excel等工具！');
+        }
+      });
+    },
   },
 });
 </script>

package/view/mourning/mourning.vue

@@ -8,6 +8,9 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'mourningNode',
+  setup() {
+    return {};
+  },
   mounted() {
     const mourningStore = useMourningStore();
 
@@ -18,8 +21,9 @@ export default defineComponent({
       }
       mourningStore.mourning = inMourning;
 
-      let classes = this.$root.$el.className.split(' ').filter((c) => !!c);
-
+      let bodyElem = document.getElementsByTagName('html')[0];
+      let classes = bodyElem.className.split(' ').filter((c) => !!c);
+    
       if (inMourning) {
         classes.push('mourning-site');
       } else {
@@ -27,19 +31,20 @@ export default defineComponent({
         classes = classes.filter((c) => c.trim() !== 'mourning-site');
       }
 
-      this.$root.$el.className = classes.join(' ');
+      bodyElem.className = classes.join(' ');
     });
   },
 });
 </script>
 
-<style lang="sass">
-.mourning-site
-  -webkit-filter: grayscale(100%)
-  -moz-filter: grayscale(100%)
-  -ms-filter: grayscale(100%)
-  -o-filter: grayscale(100%)
-  filter: grayscale(100%)
-  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
-  filter: gray
+<style lang="scss">
+.mourning-site {
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+  filter: grayscale(100%);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
+  filter: gray;
+}
 </style>