free-fe-core-modules 0.0.2 → 0.0.4

package/free-field/composible/readonlyContent.js

@@ -0,0 +1,36 @@
+import { defineComponent, h } from 'vue';
+import FieldLabel from './freeFieldLabel';
+
+export default defineComponent({
+  name: 'ReadOnlyContent',
+  props: {
+    Field: { type: Object },
+    Content: {},
+  },
+  setup(props){
+    if (!props.Field) return {};
+
+    const readonlyNode = () => h('span', {
+      class: 'full-width',
+    }, [
+      (props.Field.Label !== void 0) && h(FieldLabel, {
+        Field: props.Field,
+      }),
+      h('span', {
+        class: 'readonly-content'
+      }, [
+        props.Field.Options?.Prefix && h('span', {
+          class: 'prefix'
+        }, props.Field.Options.Prefix),
+        h('span', {
+          style: props.Field.Info?.Style,
+        }, props.Content),
+        props.Field.Options?.Postfix && h('span', {
+          class: 'postfix',
+        }, props.Field.Options.Postfix)
+      ]),
+    ]);
+
+    return readonlyNode;
+  },
+});

package/free-field/composible/useFileSizeUtils.js

@@ -0,0 +1,52 @@
+export function fileSizeStrToNumber (s) {
+  if (!s) return undefined;
+
+  const sizeMatch = s.match(/^([0-9]*)(k|m|g*)(b*)/);
+
+  if (sizeMatch) {
+    const num = Number(sizeMatch[1] || 0);
+    const unit = (sizeMatch[2]  || '').toLowerCase();
+    if (!num || !(num > -Infinity)) return '';
+
+    let multi = 1;
+    switch (unit) {
+      case 'k':
+        multi = 1024;
+        break;
+      case 'm':
+        multi = 1024 * 1024;
+        break;
+      case 'g':
+        multi = 1024 * 1024 * 1024;
+        break;
+      default:
+        multi = 1024;
+        break;
+    }
+
+    return Number(num) * multi;
+  }
+
+  return undefined;
+}
+
+export function fileSizeNumberToStr (s) {
+  if (!s) return '0K';
+
+  let sizeNum = Number(s) || 0;
+
+  if (!sizeNum || sizeNum <= 0) return '0K';
+
+  const unitList = ['B', 'K', 'M', 'G', 'T', 'P', 'E'];
+  let unit = 'B';
+  let unitIndex = 0;
+
+  while (sizeNum >= 1024) {
+    if (unit === 'E') break;
+
+    unit = unitList[++unitIndex];
+    sizeNum /= 1024;
+  }
+
+  return `${sizeNum.toFixed(2)}${unit}`;
+}

package/free-field/composible/useFreeField.js

@@ -0,0 +1,143 @@
+import { reactive, watch, watchEffect } from "vue";
+
+export const freeFieldProps = {
+  values: { type: Object },
+  Field: { type: Object },
+};
+
+export function useFreeField(props) {
+  const fieldData = reactive({});
+
+  watchEffect(() => {
+    fieldData.value = Object.nestValue(props.values, props.Field?.Name);
+
+    // TODO:following is from the old mixins, should we add more logic here accordingly?
+    // let realData;
+    // if (!this.Field) {
+    //   // return undefined;
+    // } else if (!this.Field.Name) {
+    //   // this.fieldData = this.Field.Value || this.Field.Default || undefined;
+    //   realData = this.Field.Value || this.Field.Default || undefined;
+    // } else {
+    //   let isnull = false;
+    //   if (this.Field && this.Field.Info && this.Field.Info.Dynamic && this.Field.Value) {
+    //     realData = this.Field.Value;
+    //     isnull = typeof realData === 'undefined';
+    //   } else {
+    //     realData = this.data;
+
+    //     if (this.Field.Name !== '.') {
+    //       const nameList = this.Field.Name.split('.');
+
+    //       for (let i = 0; i < nameList.length; i += 1) {
+    //         const name = nameList[i];
+
+    //         // if (!realData) return undefined;
+    //         if (typeof realData === 'undefined' || realData === null) {
+    //           isnull = true;
+    //           break;
+    //         } else {
+    //           realData = name ? realData[name] : realData;
+    //         }
+    //       }
+    //     }
+    //   }
+
+    //   if (!isnull) {
+    //     // for non-dynamic field, which have refer data, we should save this data into the field
+    //     if ((typeof realData === 'undefined') && (this.Field.Value || this.Field.Default)) {
+    //       realData = this.Field.Value || this.Field.Default;
+
+    //       if (this.Field && this.Field.ReferTo && (!this.Field.Info || !this.Field.Info.Dynamic)) {
+    //         this.$emit('input');
+    //       }
+    //     }
+
+    //     // realData = (typeof realData === 'undefined') ? (this.Field.Value || this.Field.Default) : realData;
+
+    //     if (this.Field.Options && this.Field.Options.Filters) {
+    //       let filters = [];
+    //       if (typeof this.Field.Options.Filters === 'string') {
+    //         // only one filter
+    //         filters.push(this.Field.Options.Filters);
+    //       } else if (Array.isArray(this.Field.Options.Filters)) {
+    //         filters = filters.concat(this.Field.Options.Filters);
+    //       }
+
+    //       for (let i = 0; i < filters.length; i += 1) {
+    //         const f = filters[i];
+    //         const filter = this.$options.filters[f];
+    //         if (filter) {
+    //           realData = filter(realData);
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
+
+    // if ((typeof realData === 'undefined' || realData === null || !realData) && this.Field.Info && this.Field.Info.ShowNaN) {
+    //   return this.ctx.config.nanPlaceholder || '';
+    // }
+
+    // return realData;
+  });
+
+  return {
+    fieldData,
+    getFieldData: (n) => Object.nestValue(props.values, n),
+    setFieldData: (v, emit, evt  = 'input') => {
+      fieldData.value = v;
+      Object.setValue(props.values, props.Field?.Name, v);
+
+      if (emit) emit(evt, v);
+    },
+    setData: (n, v) => {
+      Object.setValue(props.values, n, v);
+    },
+  }
+};
+
+
+// TODO: make function for validating all fields in the current component
+function validate() {
+  if (this.shouldHide) return true;
+
+  // could have customized validate function in component
+  if (this.selfValidate && typeof this.selfValidate === 'function' && !this.selfValidate()) {
+    return false;
+  }
+
+  const validators = Object.keys(this.$refs).filter((k) => k.startsWith('input_field_validator_'));
+  if (!validators || validators.length <= 0) {
+    return true;
+  }
+
+  let hasError = false;
+  for (let i = 0; i < validators.length; i += 1) {
+    const valid = validators[i];
+
+    if (this.$refs[valid]) {
+      if (Array.isArray(this.$refs[valid])) {
+        for (let j = 0; j < this.$refs[valid].length; j += 1) {
+          const sv = this.$refs[valid][j];
+
+          if (sv.shouldHide !== true) {
+            if (typeof sv.validate === 'function') {
+              hasError = !sv.validate() || hasError;
+            }
+          }
+        }
+      } else if (typeof this.$refs[valid].validate === 'function') {
+        if (this.$refs[valid].shouldHide !== true) {
+          hasError = !this.$refs[valid].validate() || hasError;
+        }
+      }
+    }
+  }
+
+  return !hasError;
+};
+
+export const useFreeFieldMethods = {
+  validate,
+};

package/{field-components → free-field}/index.js

@@ -1,6 +1,6 @@
 import fields from './Fields';
-import display from './Display';
-import FreeField from './components/FieldComponents.vue';
+import layout from './Layout';
+import FreeField from './composible/fieldWrapper.js';
 
 export default {
   components: {
@@ -8,6 +8,6 @@ export default {
   },
   fieldComponents: {
     ...fields,
-    ...display,
+    ...layout,
   },
 };

package/i18n/en-us/index.js

@@ -39,7 +39,7 @@ export default {
     validatorOnlyCNUDescription: "",
     validatorOnlyCNSName: "只能是中文或数字或特殊字符",
     validatorOnlyCNSDescription:
-      '只能是中文或数字或（"."、"@"、"<"、">"、"_"、"?"）',
+    `只能是中文或数字或（"."、{'@'}、"<"、">"、"_"、"?"）`,
 
     validatorOnlyIntegerName: "只能是整数",
     validatorOnlyIntegerDescription: "",

package/i18n/zh-cn/index.js

@@ -39,7 +39,7 @@ export default {
     validatorOnlyCNUDescription: "",
     validatorOnlyCNSName: "只能是中文或数字或特殊字符",
     validatorOnlyCNSDescription:
-      '只能是中文或数字或（"."、"@"、"<"、">"、"_"、"?"）',
+      `只能是中文或数字或（"."、{'@'}、"<"、">"、"_"、"?"）`,
 
     validatorOnlyIntegerName: "只能是整数",
     validatorOnlyIntegerDescription: "",

package/index.js

@@ -15,8 +15,7 @@ import ThemeSwitch from './components/ThemeSwitch/index.vue';
 
 import Mourning from './view/mourning/mourning.vue';
 
-import FieldComponents from './field-components';
-import FreeFields from './free-fields';
+import FieldComponents from './free-field';
 import routers from './router';
 
 // global filters
@@ -136,7 +135,6 @@ const filters = {
 };
 
 export default (app, root) => {
-  console.error('register dialog')
   root.use(MsgDialog);
 
   return {
@@ -278,7 +276,6 @@ export default (app, root) => {
       BreadCrumbs,
       ThemeSwitch,
       ...FieldComponents.components,
-      ...FreeFields,
       Mourning,
     },
     fieldComponents: FieldComponents.fieldComponents,

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "free-fe-core-modules",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "main": "index.js",
   "repository": "git@gitlab.com:eis-base/modules/free-fe-core-modules.git",
   "author": "zhiquan",
   "license": "UNLICENSED",
   "dependencies": {
-    "@tinymce/tinymce-vue": "^5.0.0"
+    "@tinymce/tinymce-vue": "^5.0.1"
   }
 }

package/router/error/data.js

@@ -1,6 +1,9 @@
 // import Vue from 'vue';
 import { getErrorCode } from './api';
 
+import { i18n } from '@/boot/i18n';
+const {global:{t}} = i18n;
+
 // const bus = new Vue();
 
 export default {
@@ -19,7 +22,7 @@ export default {
 
       d.summary = [
         {
-          text: '代码数',
+          text: t('代码数'),
           number: d.total || '0',
           number_color: 'red',
           icon: app.config.countIcon || 'fas fa-calculator',

package/view/dict/index.vue

@@ -82,13 +82,13 @@
 </template>
 
 <script>
-import mixins from 'free-fe-mixins';
 import { defineComponent } from 'vue';
+import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
   name: 'DictionaryPage',
-  mixins: [mixins.ObjectDataMixin],
   props: {
+    ...objectDataProps,
     addDict: { type: Function, default: () => {} },
     editDict: { type: Function, default: () => {} },
     deleteDict: { type: Function, default: () => {} },
@@ -100,6 +100,17 @@ export default defineComponent({
       dictFields: [],
     };
   },
+  setup(props, ctx) {
+    const {
+      data,
+      refreshData,
+    } = useObjectData(props, ctx);
+
+    return {
+      data, 
+      refreshData,
+    };
+  },
   watch: {
     // eslint-disable-next-line func-names
     'editingDict.Type': function (v) {

package/view/error/list.vue

@@ -2,6 +2,8 @@
   <div class="flow-list">
     <summary-head :values="data.summary" :Bus="Bus"></summary-head>
     <q-table
+      flat
+      bordered
       :rows="data ? data.docs : []"
       :columns="columns"
       row-key="id"
@@ -48,9 +50,9 @@
       </template>
 
       <template v-slot:top-row>
-        <q-tr class="persistant-top-row full-width">
+        <!-- <q-tr class="persistant-top-row full-width">
           <q-td class="full-width" colspan="100%"></q-td>
-        </q-tr>
+        </q-tr> -->
         <q-tr v-if="showFilters" class="table-row filter-row">
           <q-td colspan="100%" class="table-cell filter-cell">
             <free-field
@@ -87,16 +89,27 @@
 </template>
 
 <script>
-import mixins from 'free-fe-mixins';
-import { updateErrorCode, updateDescription } from '../../router/error/api';
 import { defineComponent } from 'vue';
+import { useObjectData, objectDataProps } from '../../composible/useObjectData';
+import { updateErrorCode, updateDescription } from '../../router/error/api';
 
 export default defineComponent({
   name: 'ErrorCodeList',
-  mixins: [mixins.ObjectDataMixin],
   props: {
+    ...objectDataProps,
     pagination: { type: Boolean, default: true },
   },
+  setup(props, ctx) {
+    const {
+      data,
+      refreshData,
+    } = useObjectData(props, ctx);
+
+    return {
+      data, 
+      refreshData,
+    };
+  },
   data() {
     return {
       queryFilter: {},
@@ -113,25 +126,25 @@ export default defineComponent({
         },
         {
           name: 'date',
-          label: '日期',
+          label: this.$t('日期'),
           field: 'LastUpdateDate',
           filters: 'normalDate',
           style: 'max-width: 200px;',
         },
         {
           name: 'code',
-          label: '代码',
+          label: this.$t('代码'),
           field: 'Code',
           style: 'max-width: 120px;',
         },
         {
           name: 'message',
-          label: '信息',
+          label: this.$t('信息'),
           field: 'Message',
         },
         {
           name: 'description',
-          label: '描述',
+          label: this.$t('描述'),
           field: 'Description',
         },
       ],
@@ -190,8 +203,3 @@ export default defineComponent({
   beforeUnmount() {},
 });
 </script>
-
-<style lang="sass" scoped>
-.persistant-top-row
-  display: none
-</style>

package/view/menu/index.vue

@@ -86,17 +86,29 @@
 </template>
 
 <script>
-import mixins from 'free-fe-mixins';
 import { defineComponent } from 'vue';
+import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
   name: 'MenuPage',
-  mixins: [mixins.ObjectDataMixin, mixins.InputFieldValidator],
+  // mixins: [mixins.InputFieldValidator],
   props: {
+    ...objectDataProps,
     addMenu: { type: Function, default: () => { } },
     editMenu: { type: Function, default: () => { } },
     deleteMenu: { type: Function, default: () => { } },
   },
+  setup(props, ctx) {
+    const {
+      data,
+      refreshData,
+    } = useObjectData(props, ctx);
+
+    return {
+      data, 
+      refreshData,
+    };
+  },
   data() {
     return {
       selectedMenuNode: {},
@@ -154,12 +166,12 @@ export default defineComponent({
 
         // add the customize input option
         m.Options.push({
-          Label: '自定义',
+          Label: this.$t('自定义'),
           Value: 'customize',
           Extra: [
             {
               Name: 'CustomizeRoute',
-              Label: '自定义路径',
+              Label: this.$t('自定义路径'),
             },
           ],
         });
@@ -322,6 +334,9 @@ export default defineComponent({
         this.onCancelClick();
       }
     },
+    fieldInput(e) {
+      console.log(e)
+    }
   },
 });
 </script>

package/view/system/index.vue

@@ -4,6 +4,8 @@
       class="step-left flow-step system-config-wrapper"
       v-if="data && data.StepsDefinition && data.StepsDefinition.length"
       v-model="currentStep"
+      flat
+      bordered
       animated
       header-nav
     >
@@ -77,16 +79,27 @@
 </template>
 
 <script>
-import mixins from 'free-fe-mixins';
 import { updateConfig } from '../../router/system/api';
 import { defineComponent } from 'vue';
+import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
   name: 'SystemConfigPage',
-  mixins: [mixins.ObjectDataMixin],
   props: {
+    ...objectDataProps,
     buttonsVisible: { type: Function, default: () => true },
   },
+  setup(props, ctx) {
+    const {
+      data,
+      refreshData,
+    } = useObjectData(props, ctx);
+
+    return {
+      data, 
+      refreshData,
+    };
+  },
   data() {
     return {
       currentStep: 1,