free-fe-core-modules 0.0.44 → 0.0.46

package/components/Basic/SummaryHead.vue

@@ -3,7 +3,7 @@
     <div
       v-for="(item, i) in data"
       :key="i"
-      :class="
+      :class="(item.classes ? (item.classes + ' ') : '') +
         (item.is_count ? 'summary-head-count ' : '') +
           (item.is_title
             ? 'summary-head-title summary-head-item'

package/free-field/Fields/File.vue

@@ -192,13 +192,12 @@
         >
         </q-img>
 
-        <q-pdfviewer
+        <pdf-viewer
           v-if="previewType === 'pdf'"
           v-model="showPreview"
           @click="showPreview=false"
-          @error="pdfError"
-          @load="pdfLoad"
           :src="previewFile"
+          :version="Field?.Options?.PdfViewerVersion"
           type="pdfjs"
           style="height: 100%; max-width: 100%;"
         />
@@ -212,6 +211,7 @@ import { computed, defineComponent, getCurrentInstance, ref } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import { useFormValidator} from '../../composible/useFormValidator';
 import { useUploader } from '../composible/useUploader';
+import PdfViewer from './pdfviewer';
 
 export default defineComponent({
   name: 'InputFieldFile',
@@ -247,9 +247,18 @@ export default defineComponent({
         Name: 'Options.AsLink',
         Default: false,
       },
+      {
+        Type: 'String',
+        Label: 'PDF查看器版本',
+        Name: 'Options.PdfViewerVersion',
+        Default: '',
+      },
     ],
     Description: '',
   },
+  components: {
+    PdfViewer,
+  },
   emits: ['input'],
   setup(props, { expose, emit }) {
     const { proxy:vm } = getCurrentInstance();

package/free-field/Fields/FileList.vue

@@ -215,11 +215,12 @@
         >
         </q-img>
 
-        <q-pdfviewer
+        <pdf-viewer
           v-if="previewType === 'pdf'"
           v-model="showPreview"
           @click="showPreview=false"
           :src="previewFile"
+          :version="Field?.Options?.PdfViewerVersion"
           type="pdfjs"
           style="height: 100%; max-width: 100%;"
         />
@@ -233,6 +234,7 @@ import { computed, defineComponent, getCurrentInstance, ref } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import { useFormValidator} from '../../composible/useFormValidator';
 import { useUploader } from '../composible/useUploader';
+import PdfViewer from './pdfviewer';
 
 export default defineComponent({
   name: 'InputFieldFileList',
@@ -286,9 +288,18 @@ export default defineComponent({
         Name: 'Options.AsLink',
         Default: false,
       },
+      {
+        Type: 'String',
+        Label: 'PDF查看器版本',
+        Name: 'Options.PdfViewerVersion',
+        Default: '',
+      },
     ],
     Description: '',
   },
+  components: {
+    PdfViewer,
+  },
   props: {
     ...freeFieldProps,
   },

package/free-field/Fields/Rich.vue

@@ -33,6 +33,7 @@
         api-key="wh7g3etkwrso25e0wcpqrx8uvoa51toag3j92mllkajtg1xb"
         tinymce-script-src="tiny/tiny7.js"
         :init="{
+          placeholder: Field.Placeholder || '',
           language_url: 'tiny/langs/zh_cn.js',
           language: 'zh_cn',
           plugins: Field.ReadOnly ? [] : this.plugins,
@@ -49,7 +50,7 @@
           setup: tinySetup,
           default_link_target: (Field && Field.Options && Field.Options.LinkTarget) || '_blank',
 
-          automatic_uploads: true,
+          automatic_uploads: (Field && Field.Options && Field.Options.NoUpload) ? false : true,
           images_upload_url: '/api/upload',
           images_reuse_filename: true,
           images_upload_handler,
@@ -114,6 +115,12 @@ export default defineComponent({
           },
         ],
       },
+      {
+        Type: 'Boolean',
+        Name: 'Options.NoUpload',
+        Label: '禁止上传',
+        Default: false,
+      },
     ],
   },
   components: {
@@ -298,43 +305,25 @@ export default defineComponent({
       }
 
       if (props.Field.Options?.MaxLength) {
-        editor.on('keydown', (e) => {
-          const allowedKeys = [8, 37, 38, 39, 40, 46];
-          if (allowedKeys.indexOf(e.keyCode) >= 0) return true;
+        editor.on('input', () => {
+          const ctLen = editor.plugins.wordcount.body.getWordCount();
 
-          const selectedText = editor.selection.getContent({
-            format: 'text',
-          });
-
-          if (selectedText.length <= 0
-          && editor.getContent({ format: 'text' }).length >= props.Field.Options.MaxLength) {
-            e.preventDefault();
-            e.stopPropagation();
-            return false;
+          if (ctLen > props.Field.Options.MaxLength) {
+            // 如果超过了限制，则撤销最后的更改
+            // TODO: 撤销不是最好的处理方式，应该是从最后输入的内容开始删除
+            editor.undoManager.undo();
           }
-
-          return true;
         });
       }
       if (props.Field.Options?.MaxSize) {
         const maxSize = fileSizeStrToNumber(props.Field.Options.MaxSize);
 
-        editor.on('keydown', (e) => {
-          const allowedKeys = [8, 37, 38, 39, 40, 46];
-          if (allowedKeys.indexOf(e.keyCode) >= 0) return true;
-
-          const selectedText = editor.selection.getContent({
-            format: 'text',
-          });
-
-          if (selectedText.length <= 0
-          && editor.getContent({ format: 'html' }).length >= maxSize) {
-            e.preventDefault();
-            e.stopPropagation();
-            return false;
+        editor.on('input', () => {
+          if (editor.getContent({ format: 'html' }).length > maxSize) {
+            // 如果超过了限制，则撤销最后的更改
+            // TODO: 撤销不是最好的处理方式，应该是从最后输入的内容开始删除
+            editor.undoManager.undo();
           }
-
-          return true;
         });
       }
     };

package/free-field/Fields/Select.vue

@@ -17,8 +17,8 @@
           <q-tooltip
             v-if="Field.Description"
             anchor="top right"
-          >{{Field.Description}}</q-tooltip>
-          {{Field.Label || ''}}
+          >{{$t(Field.Description)}}</q-tooltip>
+          {{$t(Field.Label) || ''}}
           <span
             v-if="Field.Required"
             class="required-mark"
@@ -27,17 +27,22 @@
         <span class="readonly-content">
           <span
             class="prefix"
-            v-if="Field.Options && Field.Options.Prefix"
+            v-if="Field.Info && Field.Info.Prefix"
           >
-            {{Field.Options.Prefix}}
+          {{Field.Info.Prefix}}
           </span>
-          <span :style="(Field.Info && Field.Info.Style) ? Field.Info.Style : ''">
+          <div v-if="Field.Info && Field.Info.Chip">
+            <q-chip v-bind="Field.Info.ChipOptions || {}" v-for="(opt, idx) in readonlyContent || []" :key="idx">
+              {{opt}}
+            </q-chip>
+          </div>
+          <span v-else :style="(Field.Info && Field.Info.Style) ? Field.Info.Style : ''">
             {{readonlyContent}}
           </span>
           <span
             class="postfix"
-            v-if="Field.Options && Field.Options.Postfix"
-          >{{Field.Options.Postfix}}</span>
+            v-if="Field.Info && Field.Info.Postfix"
+          >{{Field.OptiInfons.Postfix}}</span>
         </span>
       </span>
 
@@ -51,8 +56,8 @@
         option-value="Value"
         option-label="Label"
         map-options
-        :label="Field.Placeholder"
         emit-value
+        :label="Field.Placeholder || $t(getModule('core-modules').config['defaultSelectFieldPlaceholder'])"
         :multiple="Field.Multiple"
         :readonly="Field.ReadOnly"
         ref="fieldToValid"
@@ -61,7 +66,6 @@
         :use-chips="Field && (Field.UseChip || (Field.Info && Field.Info.Chip))"
         v-bind="inputControlSettings"
         :rules="Field.Rules"
-
         :new-value-mode="Field?.NewValueMode ? 'add' : undefined"
       >
         <template v-slot:before>
@@ -73,8 +77,8 @@
             <q-tooltip
               v-if="Field.Description"
               anchor="top right"
-            >{{Field.Description}}</q-tooltip>
-            {{Field.Label || ''}}
+            >{{$t(Field.Description)}}</q-tooltip>
+            {{$t(Field.Label) || ''}}
             <span
               v-if="Field.Required"
               class="required-mark"
@@ -85,6 +89,7 @@
         <template v-slot:option="scope">
           <q-item
             v-bind="scope.itemProps"
+            v-on="scope.itemEvents"
           >
             <q-item-section
               avatar
@@ -94,7 +99,7 @@
             </q-item-section>
 
             <q-item-section>
-              <q-item-label>{{ scope.opt.Label }}</q-item-label>
+              <q-item-label v-html="scope.opt.Label" />
               <q-tooltip v-if="scope.opt.Tooltip">
                 {{scope.opt.Tooltip}}
               </q-tooltip>
@@ -119,8 +124,8 @@
         <q-tooltip
           v-if="Field.Description"
           anchor="top right"
-        >{{Field.Description}}</q-tooltip>
-        {{Field.Label || ''}}
+        >{{$t(Field.Description)}}</q-tooltip>
+        {{$t(Field.Label) || ''}}
         <span
           v-if="Field.Required"
           class="required-mark"
@@ -144,14 +149,30 @@
 
           <q-checkbox
             v-for="(option, index) in Field.Options"
+            :class="{
+              checked: checked.includes(option.Value),
+              'with-inner-extra': option.InnerExtra?.length,
+            }"
             :key="index"
             hide-bottom-space
             :label="option.Label || ''"
             v-model="checked"
             :val="option.Value"
             :disable="Field.ReadOnly"
-            @update:modelValue="checkChanged(option.Value)"
-          ></q-checkbox>
+            @input="checkChanged(option.Value)"
+            :checked-icon="checkedIcon(option)"
+          >
+            <q-tooltip v-if="option.opt?.Tooltip"
+              anchor="bottom middle">
+              {{$t(option.opt.Tooltip) || ''}}
+            </q-tooltip>
+            <div class="option-inner-extra" v-if="option.InnerExtra?.length">
+              <input-field
+                v-for="(fld, idx) in option.InnerExtra || []" :key="idx"
+                :Field="fld"
+                :values="data"></input-field>
+            </div>
+          </q-checkbox>
         </div>
       </span>
     </span>
@@ -163,6 +184,13 @@ import { ref, computed, defineComponent, getCurrentInstance, watchEffect } from
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import { useFormValidator} from '../../composible/useFormValidator';
 
+const NUM_ICONS = [
+  '①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩',
+  '⑪', '⑫', '⑬', '⑭', '⑮','⑯','⑰','⑱','⑲','⑳',
+  '㉑','㉒','㉓','㉔','㉕','㉖','㉗','㉘','㉙','㉚',
+  '㉛','㉜','㉝','㉞','㉟','㊱','㊲','㊳','㊴','㊵',
+  '㊶','㊷','㊸','㊹','㊺','㊻','㊼','㊽','㊾','㊿'];
+
 export default defineComponent({
   name: 'InputFieldSelect',
   props: {
@@ -175,6 +203,16 @@ export default defineComponent({
     Value: 'Select',
     Description: '',
     Extra: [
+      {
+        Type: 'String',
+        Label: '前缀',
+        Name: 'Info.Prefix',
+      },
+      {
+        Type: 'String',
+        Label: '后缀',
+        Name: 'Info.Postfix',
+      },
       {
         Type: 'Check',
         Label: '展开单选',
@@ -190,6 +228,11 @@ export default defineComponent({
         Label: '可多选',
         Name: 'Multiple',
       },
+      {
+        Type: 'Check',
+        Label: '显示为顺序号',
+        Name: 'Info.AsOrderNumber',
+      },
       {
         Type: 'Check',
         Label: '显示为碎屑',
@@ -211,6 +254,12 @@ export default defineComponent({
         Label: '获取选项的参数字段',
         Placeholder: '逗号分割多个参数字段名',
       },
+      {
+        Type: 'String',
+        Name: 'Info.TriggerTo',
+        Label: '选择后激活字段',
+        Placeholder: '逗号分割多个参数字段名',
+      },
       {
         Type: 'DynamicList',
         Label: '选项',
@@ -225,6 +274,10 @@ export default defineComponent({
               Label: 'Value',
               Name: 'Value',
             },
+            {
+              Label: 'Tooltip',
+              Name: 'opt.Tooltip',
+            },
             {
               Label: 'Extra',
               Name: 'Extra',
@@ -251,6 +304,32 @@ export default defineComponent({
                 ],
               },
             },
+            {
+              Label: 'InnerExtra',
+              Name: 'InnerExtra',
+              Type: 'FieldList',
+              Options: {
+                Columns: [
+                  {
+                    Label: '#',
+                    Name: 'Index',
+                    sortable: true,
+                  },
+                  {
+                    Label: '名称',
+                    Name: 'Name',
+                    style: 'max-width: 200px;',
+                    sortable: true,
+                  },
+                  {
+                    Label: '标题',
+                    Name: 'Label',
+                    style: 'max-width: 200px;',
+                    sortable: true,
+                  },
+                ],
+              },
+            },
           ],
         },
       },
@@ -299,6 +378,25 @@ export default defineComponent({
       return fieldData.value;
     });
 
+    const checkedIcon = computed(() => {
+      // only when ascheck and multiple and as order number
+      if (props.Field?.AsCheck && props.Field?.Multiple && props.Field?.Info?.AsOrderNumber) {
+        return (opt) => {
+          if (!opt?.Value) return undefined;
+
+          const idx = (checked.value || []).findIndex((v) => v === opt.Value);
+
+          if (idx >= 0 && idx < NUM_ICONS.length) {
+            return NUM_ICONS[idx];
+          }
+
+          return undefined;
+        };
+      }
+
+      return () => undefined;
+    });
+
 
     watchEffect(() => {
       if (props.Field.AsCheck) {
@@ -407,6 +505,7 @@ export default defineComponent({
       selectOptions,
 
       readonlyContent,
+      checkedIcon,
 
       selectChanged,
       checkChanged,

package/free-field/Fields/pdfviewer.js

@@ -0,0 +1,120 @@
+import ModelToggleMixin from 'quasar/src/mixins/model-toggle.js';
+
+export default {
+  name: 'QPdfviewer',
+
+  mixins: [ModelToggleMixin],
+
+  props: {
+    version: { type: String, default: '' },
+    src: String,
+    type: {
+      type: String,
+      default: 'html5',
+      validator: (v) => ['html5', 'pdfjs'].indexOf(v) !== -1,
+    },
+    errorString: {
+      type: String,
+      default:
+        'This browser does not support PDFs. Download the PDF to view it:',
+    },
+    contentStyle: [String, Object, Array],
+    contentClass: [String, Object, Array],
+    innerContentStyle: [String, Object, Array],
+    innerContentClass: [String, Object, Array],
+  },
+
+  data() {
+    return {
+      hashId: `q-pdfviewer-${Math.random()
+        .toString(36)
+        .substring(2, 9)}`,
+      height: '1200',
+    };
+  },
+  mounted() {
+    window.addEventListener('message', (event) => {
+      this.height = event.data;
+    });
+  },
+  methods: {
+    // eslint-disable-next-line no-underscore-dangle
+    __renderObject(h) {
+      return h(
+        'object',
+        {
+          class: this.innerContentClass,
+          style: this.innerContentStyle,
+          attrs: {
+            id: this.hashId,
+            data: this.src,
+            type: 'application/pdf',
+            width: '100%',
+            height: '100%',
+          },
+          on: {
+            ...this.$listeners,
+          },
+        },
+        [
+          // browser object not supported, try iframe
+          // eslint-disable-next-line no-underscore-dangle
+          this.__renderIFrame(h),
+        ],
+      );
+    },
+
+    // eslint-disable-next-line no-underscore-dangle
+    __renderIFrame(h) {
+      return h(
+        'iframe',
+        {
+          staticClass: 'q-pdfviewer__iframe',
+          attrs: {
+            src: this.src,
+            width: '100%',
+            height: '100%',
+          },
+        },
+      );
+    },
+
+    // eslint-disable-next-line no-underscore-dangle
+    __renderIFramePDFJS(h) {
+      return h(
+        'iframe',
+        {
+          staticClass: 'q-pdfviewer__iframe',
+          attrs: {
+            src: `pdfjs${this.version ? `_${this.version}` : ''}/web/viewer.html?file=${encodeURIComponent(this.src)}`,
+            width: '100%',
+            height: '100%',
+          },
+        },
+      );
+    },
+  },
+
+  render(h) {
+    if (this.value === true && this.src !== undefined && this.src.length > 0) {
+      return h(
+        'div',
+        {
+          staticClass: 'q-pdfviewer',
+          class: this.contentClass,
+          style: this.contentStyle,
+          attrs: {
+          },
+        },
+        [
+          this.$q.platform.is.electron || this.type === 'pdfjs'
+            // eslint-disable-next-line no-underscore-dangle
+            ? this.__renderIFramePDFJS(h)
+            // eslint-disable-next-line no-underscore-dangle
+            : this.__renderObject(h),
+        ],
+      );
+    }
+    return '';
+  },
+};

package/free-field/composible/fieldWrapper.js

@@ -30,7 +30,8 @@ export default defineComponent({
     const { proxy: vm } = getCurrentInstance();
 
     const localField = computed(() => {
-      const lField = { ...props.Field };
+      const lField = Object.clone(props.Field);
+      
       lField.Rules = lField.Rules || [];
       for (let i = 0; i < lField.Rules.length; i += 1) {
         const rule = lField.Rules[i];
@@ -205,6 +206,7 @@ export default defineComponent({
           emit("input", fld || props.Field);
         },
         ...compEmits.value,
+        ...localField.value.attrs,
       },
       {
         ...slots,

package/package.json

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