free-fe-core-modules 0.0.4 → 0.0.6

package/free-field/Fields/YearRange.vue

@@ -19,7 +19,7 @@
         :options="minYearOptions"
         :readonly="Field.ReadOnly"
         @input="rangeChanged"
-        :ref="`input_field_validator_first`"
+        ref="input_field_validator_first"
       >
         <template v-slot:before v-if="Field.Label !== void 0">
           <span
@@ -39,7 +39,7 @@
         :options="maxYearOptions"
         :readonly="Field.ReadOnly"
         @input="rangeChanged"
-        :ref="`input_field_validator_second`"
+        ref="input_field_validator_second"
       />
     </span>
 
@@ -48,8 +48,9 @@
 </template>
 
 <script>
-import { defineComponent, ref, getCurrentInstance } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import { useFormValidator} from '../../composible/useFormValidator';
 
 export default defineComponent({
   name: 'InputFieldYearRange',
@@ -85,11 +86,9 @@ export default defineComponent({
     ...freeFieldProps,
   },
   emits:['input'],
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     if (!props.Field) return () => null;
 
-    const { proxy:vm } = getCurrentInstance();
-
     const { fieldData, setFieldData } = useFreeField(props);
 
     const min = ref('');
@@ -163,6 +162,10 @@ export default defineComponent({
       return options;
     });
 
+    const { validate } = useFormValidator('input_field_validator_first', 'input_field_validator_second');
+    expose ({
+      validate,
+    })
 
     return {
       fieldData,

package/free-field/composible/fieldWrapper.js

@@ -3,7 +3,7 @@ import {
   getCurrentInstance,
   h,
   ref,
-  reactive,
+  shallowRef,
   watchEffect,
   computed,
   onMounted,
@@ -11,6 +11,8 @@ import {
   isRef,
 } from "vue";
 import { freeFieldProps } from "./useFreeField";
+import { useFormValidator } from '../../composible/useFormValidator';
+
 
 export default defineComponent({
   name: "FreeFieldWrapper",
@@ -111,7 +113,7 @@ export default defineComponent({
       return props.Field.Hidden;
     });
 
-    let realComponent = reactive({});
+    let realComponent = shallowRef(null);
 
     watchEffect(() => {
       const fComponents = vm.ctx.FieldComponents || {};
@@ -131,7 +133,7 @@ export default defineComponent({
         }
       }
 
-      realComponent = field;
+      realComponent.value = field;
     });
 
     if (props.Field && props.Field.Info && props.Field.Info.KeepChanged) {
@@ -153,20 +155,23 @@ export default defineComponent({
     const warningSlot = (!props.noWarning && localField.value.Warning)
       && h('span', {
         class: 'input-field-warning no-wrap',
-      },[
+      },
+      [
         h('span', { class: 'input-field-warning-icon' }),
         h('span', { class: 'input-field-warning-icon-sign-top' }),
         h('span', { class: 'input-field-warning-icon-sign-dot' }),
         h('span', { class: 'input-field-warning-text ellipsis' }, localField.value.Warning),
-      ]);
+      ]
+    );
 
-    if (realComponent) {
-      const compEmits = {};
-      (realComponent.emits || []).forEach((em) => {
-        if (!em || em === 'input') return;
 
+    const compEmits = ref({});
+    watchEffect(() => {
+      (realComponent?.value?.emits || []).forEach((em) => {
+        if (!em || em === 'input') return;
+  
         const captEm = `${em[0].toUpperCase()}${em.substring(1)}`;
-        compEmits[`on${captEm}`] = (...args) => {
+        compEmits.value[`on${captEm}`] = (...args) => {
           // should not emit event directly as we were not inlucde these events in the emits list
           // but we could get any matched handller from the parent component and then call that
           // handller directly
@@ -176,46 +181,49 @@ export default defineComponent({
             outerHandller(...args);
           }
         };
-      })
-
-      const emitsRef = ref(realComponent.emits);
-
-      expose ({
-        emits: emitsRef,
-      })
-
-
-      return () =>
-        h(
-          "div",
-          {
-            class: wrapperClass,
-          },
-          [
-            h(
-              realComponent,
-              {
-                Field: localField.value,
-                values: props.values,
-                style: shouldHide.value ? "display:none;" : "",
-                class: [
-                  props.Field.ReadOnly ? "free-field--readonly" : "",
-                  !shouldHide.value && hasError.value ? "hasError" : "",
-                ],
-                onInput: () => {
-                  emit("input", props.Field);
-                },
-                ...compEmits,
-              },
-              {
-                ...slots,
-                warning: slots.warning ? slots.warning : () => warningSlot,
-              }
-            ),
-          ]
-        );
-    } else {
-      return () => null;
-    }
+      });
+    })
+
+    const readComp = computed(() => realComponent.value && h(
+      realComponent.value,
+      {
+        Field: localField.value,
+        values: props.values,
+        style: shouldHide.value ? "display:none;" : "",
+        class: [
+          props.Field.ReadOnly ? "free-field--readonly" : "",
+          !shouldHide.value && hasError.value ? "hasError" : "",
+        ],
+        onInput: () => {
+          emit("input", props.Field);
+        },
+        ...compEmits,
+      },
+      {
+        ...slots,
+        warning: slots.warning ? slots.warning : () => warningSlot,
+      }
+    ));
+    
+    // const emitsRef = computed(() => realComponent?.value?.emits);
+
+    const {
+      validate,
+    } = useFormValidator(readComp);
+
+    expose ({
+      // emits: emitsRef.value,
+      validate: () => validate.value(props.Field.Name),
+    })
+
+    return realComponent.value ? () => h(
+      "div",
+      {
+        class: wrapperClass,
+      },
+      [
+        readComp.value,
+      ]
+    ) : () => null;
   },
 });

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,6 +1,6 @@
 {
   "name": "free-fe-core-modules",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "main": "index.js",
   "repository": "git@gitlab.com:eis-base/modules/free-fe-core-modules.git",
   "author": "zhiquan",

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>