free-fe-core-modules 0.0.16 → 0.0.18

package/free-field/composible/useUploader.js

@@ -0,0 +1,320 @@
+import { computed, getCurrentInstance, ref } from "vue";
+import { Notify } from 'quasar';
+
+
+function fileSizeStrToNumber (s) {
+  if (!s) return undefined;
+
+  const sizeMatch = s.match(/^([0-9]*)(k|m|g*)(b*)/);
+
+  if (sizeMatch) {
+    // eslint-disable-next-line no-unused-vars
+    // const [tmp, num, unit] = sizeMatch;
+    const num = sizeMatch[1];
+    const unit = sizeMatch[2];
+    if (!num || !Number(num)) 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;
+}
+
+function fileSizeNumberToStr (s) {
+  if (!s) return '0K';
+
+  let sizeNum = Number(s) || 0;
+
+  if (!sizeNum || sizeNum <= 0) return '0K';
+
+  const unitList = ['B', 'K', 'M', 'G'];
+  let unit = 'B';
+  let unitIndex = 0;
+
+  while (sizeNum > 1024) {
+    if (unit === 'G') break;
+
+    unitIndex += 1;
+    unit = unitList[unitIndex];
+    sizeNum /= 1024;
+  }
+
+  return `${sizeNum.toFixed(2)}${unit}`;
+}
+
+// eslint-disable-next-line no-underscore-dangle
+function _getFileType (f) {
+  if (!f) return {};
+
+  if (f.type) {
+    const fTypes = f.type.split('/');
+    const [fType, fExt] = fTypes;
+    return {
+      fType, fExt,
+    };
+  }
+
+  if (f.id) {
+    let extname = f.id.substr(f.id.lastIndexOf('.'));
+    if (extname.startsWith('.')) {
+      extname = extname.substr(1);
+    }
+
+    extname = extname && extname.toLowerCase();
+
+    switch (extname) {
+      case 'png':
+      case 'jpg':
+      case 'jpeg':
+      case 'bmp':
+      case 'gif':
+        return { fType: 'image', fExt: extname };
+      case 'wav':
+      case 'mp3':
+        return { fType: 'audio', fExt: extname };
+      case 'mp4':
+        return { fType: 'video', fExt: extname };
+      case 'txt':
+        return { fType: 'text', fExt: extname };
+      default:
+        return { fType: 'application', fExt: extname };
+    }
+  }
+
+  return {};
+}
+
+export function useUploader(props, ctx) {
+  const { proxy:vm } = getCurrentInstance();
+
+  const showPreview = ref(false);
+  const previewFile = ref(undefined);
+  const previewType = ref(undefined);
+
+  const maxFileSize = computed(() => {
+    return fileSizeStrToNumber(props.Field?.MaxValue || '10m') * 1.1;
+  });
+
+  const maxTotalSize = computed(() => {
+    return fileSizeStrToNumber((props.Field?.Options?.MaxTotal) || '10m') * 1.1;
+  });
+
+  const acceptedFileTypes = computed(() => {
+    if (!props.Field?.Options?.Ext) return '';
+
+    const extList = props.Field.Options.Ext.split(',') || [];
+    const typeList = [];
+
+    const MIME_TYPE_LIST = {
+      mp4: 'video/mp4',
+      avi: 'video/x-msvideo',
+      bmp: 'image/bmp',
+      doc: 'application/msword',
+      docx:
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      gif: 'image/gif',
+      jpe: 'image/jpeg',
+      jpeg: 'image/jpeg',
+      jpg: 'image/jpeg',
+      png: 'image/png',
+      mpeg: 'video/mpeg',
+      pdf: 'application/pdf',
+      ppt: 'application/vnd.ms-powerpoint',
+      pptx:
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+      svg: 'image/svg+xml',
+      txt: 'text/plain',
+      wav: 'audio/x-wav',
+      xls: 'application/vnd.ms-excel',
+      xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      zip: 'application/zip',
+    };
+
+    extList.forEach((ext) => {
+      let type = ext.trim().toLowerCase();
+      type = MIME_TYPE_LIST[type] || type;
+
+      if (type && typeList.indexOf(type) < 0) typeList.push(type);
+      if (ext && typeList.indexOf(ext) < 0) typeList.push(ext);
+    });
+
+    return typeList.join(',');
+  });
+
+  const fileThumb = computed(() => (file) => {
+    const unknownType = 'insert_drive_file';
+    if (!file) return unknownType;
+
+    let type = '';
+    // const fTypes = file.type.split('/');
+    // const [fType, fExt] = fTypes;
+    const { fType, fExt } = _getFileType(file);
+
+    switch (fType) {
+      case 'image':
+        // eslint-disable-next-line no-underscore-dangle
+        type = file.id || (file.__img ? file.__img.src : '');
+        break;
+      case 'audio':
+        type = 'far fa-file-audio';
+        break;
+      case 'video':
+        type = 'far fa-file-video';
+        break;
+      case 'text':
+        type = 'far fa-file-text';
+        break;
+      case 'application':
+        switch (fExt) {
+          case 'doc':
+          case 'docx':
+          case 'vnd.openxmlformats-officedocument.wordprocessingml.document':
+            type = 'far fa-file-word';
+            break;
+          case 'xls':
+          case 'xlsx':
+          case 'vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+            type = 'far fa-file-excel';
+            break;
+          case 'ppt':
+          case 'pptx':
+          case 'vnd.openxmlformats-officedocument.presentationml.presentation':
+            type = 'far fa-file-powerpoint';
+            break;
+          case 'pdf':
+            type = 'far fa-file-pdf';
+            // type = 'insert_drive_file';
+            break;
+          case 'zip':
+          case 'rar':
+          case '7z':
+          case 'x-zip-compressed':
+            type = 'far fa-file-archive';
+            break;
+          default:
+            break;
+        }
+        break;
+      default:
+        break;
+    }
+
+    return type || unknownType;
+  });
+
+  const filePreviewType = computed(() => (file) => {
+    if (!file) return '';
+
+    // const fTypes = file.type.split('/');
+    // const [fType, fExt] = fTypes;
+    const { fType, fExt } = _getFileType(file);
+
+    switch (fType) {
+      case 'image':
+        return 'image';
+      case 'application':
+        switch (fExt) {
+          case 'doc':
+          case 'docx':
+          case 'vnd.openxmlformats-officedocument.wordprocessingml.document':
+            return 'word';
+          case 'xls':
+          case 'xlsx':
+          case 'vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+            return 'excel';
+          case 'ppt':
+          case 'pptx':
+          case 'vnd.openxmlformats-officedocument.presentationml.presentation':
+            return 'ppt';
+          case 'pdf':
+            return 'pdf';
+          default:
+            break;
+        }
+        break;
+      default:
+        break;
+    }
+
+    return '';
+  });
+
+  const filePreview = computed(() => (file) => {
+    if (!file) return '';
+    let url = '';
+
+    const type = filePreviewType.value(file);
+    switch (type) {
+      case 'image':
+        if (file.id) {
+          url = vm.$filter('serverImage', file.id);
+        } else {
+          // eslint-disable-next-line no-underscore-dangle
+          url = file.__img ? file.__img.src : '';
+        }
+        break;
+      case 'pdf':
+        if (file.id) {
+          url = vm.$filter('serverDocument', file.id);
+        }
+        break;
+      default:
+        break;
+    }
+
+    return url;
+  });
+
+  return {
+    showPreview,
+    previewType,
+    previewFile,
+    maxFileSize,
+    maxTotalSize,
+    acceptedFileTypes,
+    fileThumb,
+    filePreviewType,
+    filePreview,
+
+    filesRejected (rejectedEntries) {
+      if (rejectedEntries && rejectedEntries.length > 0) {
+        const fName = rejectedEntries[0] && rejectedEntries[0].file && rejectedEntries[0].file.name;
+        const fSize = fileSizeNumberToStr(
+          rejectedEntries[0] && rejectedEntries[0].file && rejectedEntries[0].file.size,
+        );
+        // TODO: i18n
+        Notify.create({ message: `文件格式或大小不符合要求：${fName} （${fSize}）` });
+      }
+    },
+    preview (file) {
+      if (!file) return;
+
+      previewType.value = filePreviewType.value(file);
+
+      const url = filePreview.value(file);
+      if (!url) {
+        return;
+      }
+
+      previewFile.value = url;
+
+      showPreview.value = true;
+    },
+  }
+};

package/free-field/style.scss

@@ -0,0 +1,173 @@
+$freeFieldCategoryMargin: var(--free-field-category-margin, unset);
+$freeFieldWrapperMargin: var(--free-field-wrapper-margin, unset);
+$freeFieldMargin: var(--free-field-margin, unset);
+$simpleFieldHeight: var(--simple-field-height, unset);
+$simpleFieldWidth: var(--simple-field-width, 100%);
+$fieldLabelWidth: var(--field-label-width,120px);
+$fieldLabelFontSize: var(--field-label-font-size,12px);
+$fieldLabelColor: var(--field-label-color,unset);
+$fieldLabelAfter: var(--field-label-after,'');
+$fieldLabelRequiredColor: var(--field-label-required-color,#E33);
+$editorAreaBackground: var(--editor-area-background, unset);
+
+.free-field-wrapper {
+  width: 100%;
+  .free-field-wrapper {
+    width: unset
+  }
+  .simple-field {
+    // display: inline-block;
+    width: 100%;
+  }
+  .free-field-range-separator {
+    margin: 0 6px;
+  }
+  .field-label-empty {
+    display: inline-block;
+    margin-left: 0;
+    padding-left: 0;
+    width: $fieldLabelWidth;
+    min-width: $fieldLabelWidth;
+  }
+
+  .field-label {
+    display: inline-block;
+    margin-left: 0;
+    padding-left: 0;
+    font-size: $fieldLabelFontSize;
+    width: $fieldLabelWidth;
+    min-width: $fieldLabelWidth;
+    color: $fieldLabelColor;
+    text-align: right;
+    white-space: normal;
+  }
+
+  .field-label:after {
+    content: $fieldLabelAfter;
+  }
+
+  .required-mark {
+    color: $fieldLabelRequiredColor;
+    position: relative;
+    top: 3px;
+  }
+
+  .q-uploader {
+    flex: 1;
+    box-shadow: unset;
+  }
+
+  .free-field-warning {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(234,7,50,1);
+    margin-left: 15px;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    &-icon {
+      position: relative;
+      top: -7px;
+      display: inline-block;
+      border-width: 8px;
+      border-color: transparent transparent #FF8244 transparent;
+      border-style: dashed;
+      transform: scaleY(2.3);
+      &-sign-top {
+        position: relative;
+        top: -2px;
+        left: -9px;
+        background: $primary;
+        display: inline-block;
+        width: 2px;
+        height: 8px;
+      }
+      &-sign-dot {
+        position: relative;
+        top: 3px;
+        left: -10px;
+        background: $primary;
+        display: inline-block;
+        width: 3px;
+        height: 3px;
+        transform: translateX(-50%);
+        -moz-transform: translateX(-50%);
+        -webkit-transform: translateX(-50%);
+        -ms-transform: translateX(-50%);
+      }
+    }
+    &-text {
+      overflow: hidden;
+    }
+  }
+
+  .free-field-tips {
+    position: relative;
+    left: 10px;
+    margin-left: $fieldLabelWidth;
+    margin-top: 6px;
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(0,135,197,1);
+    padding-right: 20px;
+    .tips-list {
+      .free-field-tips-tip {
+        display: block;
+        .tip-link {
+          font-size: 12px;
+          font-weight: bold;
+          color: rgba(16,108,211,1);
+          a,a:visited {
+            color: rgba(16,108,211,1);
+          }
+          &-prefix::before {
+            content: '【';
+          }
+          &-postfix::after {
+            content: '】';
+          }
+          &-text {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+    &-prefix {
+      display: inline-block;
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      border: 2px solid;
+      border-radius: 50%;
+      margin-right: 4px;
+      top: 0px;
+      left: 0;
+      & + .tips-list {
+        position: relative;
+        left: 24px;
+      }
+    }
+    &-postfix {
+      display: inline-block;
+      position: absolute;
+      top: 0px;
+      left: 6px;
+      width: 6px;
+      height: 3px;
+      background: $background;
+      &::after {
+        display: inline-block;
+        position: absolute;
+        content: '!';
+        font-size: 16px;
+        font-weight: 700;
+        width: 3px;
+        top: -6px;
+        left: 2px;
+        transform: translateX(-50%);
+        -moz-transform: translateX(-50%);
+        -ms-transform: translateX(-50%);
+      }
+    }
+  }
+}

package/i18n/en-us/index.js

@@ -1,4 +1,7 @@
+import fields from '../fields/en-us';
+
 export default {
+  ...fields,
   justNow: 'just now',
   secondsAgo: 'seconds ago',
   minutesAgo: 'minutes ago',

package/i18n/fields/en-us/index.js

@@ -5,5 +5,6 @@ export default {
   fieldCategoryAdvanced: 'Advanced',
   fieldCategoryTable: 'Table',
   fieldCategoryUpload: 'Upload',
+  fieldCategoryContainer: 'Container',
   fieldCategoryOthers: 'Others',
 };

package/i18n/fields/zh-cn/index.js

@@ -5,5 +5,6 @@ export default {
   fieldCategoryAdvanced: '高级',
   fieldCategoryTable: '表格',
   fieldCategoryUpload: '上传',
+  fieldCategoryContainer: '容器',
   fieldCategoryOthers: '其他',
 };

package/i18n/zh-cn/index.js

@@ -1,4 +1,7 @@
+import fields from '../fields/zh-cn';
+
 export default {
+  ...fields,
   justNow: '刚刚',
   secondsAgo: '秒之前',
   minutesAgo: '分钟之前',

package/index.js

@@ -306,6 +306,13 @@ export default (app, root) => {
           clearable: true,
           Options: [],
         },
+        {
+          Name: 'CustomizeRoute',
+          Label: '自定义路径',
+          Info: {
+            ShowWhen: 'data.Route === "customize"',
+          },
+        },
         {
           Name: "Enabled",
           Label: "启用",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "free-fe-core-modules",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "main": "index.js",
   "repository": "https://github.com/freeeis/free-fe-core-modules.git",
   "author": "zhiquan",

package/view/menu/index.vue

@@ -172,12 +172,6 @@ export default defineComponent({
         m.Options.push({
           Label: this.$t('自定义'),
           Value: 'customize',
-          Extra: [
-            {
-              Name: 'CustomizeRoute',
-              Label: this.$t('自定义路径'),
-            },
-          ],
         });
 
         break;
@@ -341,3 +335,9 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+.admin-menu-mgmt-wrapper {
+  background: $background;
+}
+</style>

package/view/system/index.vue

@@ -58,7 +58,7 @@
           </span>
         </div>
 
-        <div class="flow-step-input-fields">
+        <div class="flow-step-free-fields">
           <free-field
             v-for="(field, fIndex) in step.Fields || []"
             :key="fIndex"

package/free-field/style.sass

@@ -1,11 +0,0 @@
-$inputFieldCategoryMargin: var(--input-field-category-margin, unset)
-$inputFieldWrapperMargin: var(--input-field-wrapper-margin, unset)
-$inputFieldMargin: var(--input-field-margin, unset)
-$simpleFieldHeight: var(--simple-field-height, unset)
-$simpleFieldWidth: var(--simple-field-width, 100%)
-$fieldLabelWidth: var(--field-label-width,120px)
-$fieldLabelFontSize: var(--field-label-font-size,12px)
-$fieldLabelColor: var(--field-label-color,unset)
-$fieldLabelAfter: var(--field-label-after,'')
-$fieldLabelRequiredColor: var(--field-label-required-color,#E33)
-$editorAreaBackground: var(--editor-area-background, unset)