free-fe-core-modules 0.0.2 → 0.0.3

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

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,

package/field-components/Fields/AgreementCheck.vue

@@ -1,161 +0,0 @@
-<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>