free-fe-core-modules 0.0.16 → 0.0.17

package/free-field/Fields/{InputFieldList.vue → FreeFieldList.vue}

@@ -1,6 +1,23 @@
 <template>
-  <div class="input-field-list">
+  <div class="free-field-list row full-width">
+    <span
+      :class="`field-label ${(Field.Label && Field.Label.trim().length)
+        ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
+      v-if="Field.Label !== void 0"
+    >
+      <q-tooltip
+        v-if="Field.Description"
+        anchor="top right"
+      >{{Field.Description}}</q-tooltip>
+      {{Field.Label || ''}}
+      <span
+        v-if="Field.Required"
+        class="required-mark"
+      >*</span>
+    </span>
+
     <dynamic-list
+      class="col"
       :Field="localField"
       :values="values"
       readonly
@@ -79,9 +96,10 @@ const clipBoardStore = {
 };
 
 export default defineComponent({
-  name: 'InputFieldList',
+  name: 'FreeFieldList',
   emits:['save', 'delete', 'cancel','paste:fields', 'batch:fields'],
   fieldInfo: {
+    DataType: 'Array',
     Category: 'Advanced',
     Label: '字段列表',
     Value: 'FieldList',
@@ -103,15 +121,20 @@ export default defineComponent({
     const changedFields = ref([]);
     const fieldList  = ref(null);
 
-    const editingFieldField = ref(undefined);
+    const editingFieldField = computed(() => ({
+      Type: 'FieldEditor',
+      Name: '.',
+      show: showEditor.value,
+    }));
 
-    watchEffect(() => {
-      editingFieldField.value = {
-        Type: 'FieldEditor',
-        Name: '.',
-        show: showEditor.value,
-      };
-    });
+    // watchEffect(() => {
+    // });
+
+    // editingFieldField.value = {
+    //   Type: 'FieldEditor',
+    //   Name: '.',
+    //   show: showEditor.value,
+    // };
 
     const localField = computed(() => ({
       Type: 'DynamicList',
@@ -166,7 +189,7 @@ export default defineComponent({
 
       if (fData?.length) {
         newIndex = fData.map((fd) => fd.Index).sort((a,b) => a.Index-b.Index).filter((fd) => !!fd).pop();
-        newIndex = (newIndex || 0) + 1;
+        newIndex = (Number(newIndex) || 0) + 1;
       }
 
       editingField.value = {

package/free-field/Fields/Image.vue

@@ -0,0 +1,361 @@
+<template>
+  <div class="row free-field-image" v-if="Field">
+    <span
+      :class="`field-label ${(Field.Label && Field.Label.trim().length)
+        ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
+      v-if="Field.Label && !Field.dense">
+      <q-tooltip v-if="Field.Description" anchor="top right">
+        {{
+        Field.Description
+        }}
+      </q-tooltip>
+      {{ Field.Label || '' }}
+      <span v-if="Field.Required" class="required-mark">*</span>
+    </span>
+    <q-uploader
+      @uploaded="uploaded"
+      @removed="removeFile"
+      @rejected="filesRejected"
+      ref="uploader"
+      :factory="factoryFn"
+      auto-upload
+      :max-file-size="maxFileSize"
+      :class="(Field.dense ?
+        `no-shadow dense` : `${Field.onlyIcon ? 'only-icon' : ''}`)
+          + (hasError ? ' free-field--error' : '')"
+    >
+      <template v-slot:list="scope">
+        <div class="uploader-btns row no-wrap items-center" v-if="!Field.dense && !(Field.onlyIcon || onlyIcon)">
+          <q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
+          <q-btn
+            v-if="!scope.isUploading"
+            type="a"
+            icon="cloud_upload"
+            dense
+            flat
+            class="upload-btn"
+            label="点击上传"
+            :disabled="Field.ReadOnly"
+          >
+            <q-uploader-add-trigger v-if="!Field.ReadOnly" />
+          </q-btn>
+          <q-btn
+            v-if="scope.isUploading"
+            icon="clear"
+            @click="scope.abort"
+            round
+            class="clear-btn"
+            dense
+            flat
+            :disabled="Field.ReadOnly"
+          ></q-btn>
+          <slot name="warning"></slot>
+        </div>
+
+        <q-btn
+          v-if="(Field.onlyIcon || onlyIcon) && (!fieldData.value || !fieldData.value[0] || !fieldData.value[0].id)"
+          type="a"
+          :icon="fieldData?.value?.length ? 'check' : 'cloud_upload'"
+          dense
+          flat
+          :disabled="Field.ReadOnly"
+        >
+          <q-uploader-add-trigger />
+        </q-btn>
+        
+        <div v-else-if="(Field.onlyIcon || onlyIcon) && fieldData.value && fieldData.value[0]?.id">
+          <q-img
+            :src="$filter('serverThumb', `${fieldData.value[0].id}`)"
+            style="width:32px; max-height:32px;min-height:32px;"
+          >
+          </q-img>
+          <q-uploader-add-trigger/>
+        </div>
+
+        <q-item v-else-if="Field.dense" class="items-center q-pa-none">
+          <q-item-section v-if="fieldData?.value?.length && fieldData.value[0].id" thumbnail>
+            <q-img
+              :src="`${ctx.config.thumbUrlBase}${fieldData.value[0].id}`"
+              style="width: 48px; max-height: 48px;"
+            >
+            </q-img>
+            <q-uploader-add-trigger v-if="!Field.ReadOnly" />
+          </q-item-section>
+
+          <q-item-section v-if="fieldData.value?.length && fieldData.value[0].__img" thumbnail class="gt-xs">
+            <q-img :src="fieldData.value[0].__img.src">
+            </q-img>
+            <q-uploader-add-trigger v-if="!Field.ReadOnly" />
+          </q-item-section>
+
+          <q-item-section v-if="!fieldData.value?.length">
+            <q-btn
+              v-if="!scope.isUploading"
+              type="a"
+              icon="cloud_upload"
+              class="upload-btn"
+              dense
+              flat
+              :disabled="Field.ReadOnly"
+            >
+              <q-uploader-add-trigger v-if="!Field.ReadOnly" />
+            </q-btn>
+          </q-item-section>
+        </q-item>
+
+        <div v-else-if="fieldData.value?.length" class="file-list row items-start justify-start">
+          <q-card
+            flat
+            class="file-list-item"
+            v-for="(file, index) in fieldData.value" :key="index">
+              <e-icon class="file-image" :name="fileThumb(file)" thumb
+                :relative="filePreviewType(file) !== 'image'"
+                @click="preview(file)">
+                <div class="view-btn-wrapper absolute-full justify-center text-center">
+                  <q-btn
+                    flat
+                    class="view-btn full-height full-width"
+                    @click="preview(file)"
+                  >查看</q-btn>
+                </div>
+              </e-icon>
+              <span class="file-name full-width ellipsis">
+                <a
+                  v-if="file && file.id"
+                  target="_blank"
+                  :href="$filter('serverPath', file.id)"
+                  :download="file.name">
+                    {{ file.name }}
+                </a>
+                <span v-else-if="file && file.name">
+                  {{file.name}}
+                </span>
+                <q-tooltip>{{ file.name }}</q-tooltip>
+              </span>
+
+              <span class="file-size full-width ellipsis">
+                Size: {{ file.sizeLabel || file.__sizeLabel }}
+              </span>
+
+              <q-btn
+                flat
+                dense
+                round
+                class="delete-btn"
+                icon="close"
+                @click="scope.removeFile(file)"
+                :disabled="Field.ReadOnly"
+              />
+          </q-card>
+        </div>
+
+        <div class="free-field--error-tag" v-if="hasError">
+          <e-icon name="error"></e-icon>
+        </div>
+      </template>
+    </q-uploader>
+    <q-dialog class="image-preview-dialog"
+      flat
+      full-width full-height v-model="showPreview"
+      style="background: rgba(0,0,0,0)">
+      <div class="image-preview">
+        <q-icon name="close"
+          class="absolute cursor-pointer bg-white text-primary"
+          style="border-radius: 6px;border: 1px solid primary;right: 0;"
+          round size="20px"
+          @click="showPreview=false"></q-icon>
+        <q-img
+          v-if="previewType === 'image'"
+          contain :src="previewFile"
+          @click="showPreview=false"
+          style="max-height: 100%; max-width: 100%;">
+        </q-img>
+
+        <q-pdfviewer
+          v-if="previewType === 'pdf'"
+          v-model="showPreview"
+          @click="showPreview=false"
+          :src="previewFile"
+          type="pdfjs"
+          style="height: 100%; max-width: 100%;"
+        />
+      </div>
+    </q-dialog>
+  </div>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance, ref } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import { useFormValidator} from '../../composible/useFormValidator';
+import { useUploader } from '../composible/useUploader';
+
+export default defineComponent({
+  name: 'InputFieldImage',
+  fieldInfo: {
+    Category: 'Upload',
+    Label: '图片',
+    Value: 'Image',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '支持的文件类型',
+        Name: 'Options.Ext',
+        Default: 'jpg,png,bmp',
+      },
+      {
+        Type: 'String',
+        Label: '最大文件大小',
+        Name: 'MaxValue',
+        Default: '10m',
+      },
+    ],
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+    dense: { type: Boolean, default: false },
+    onlyIcon: { type: Boolean, default: false },
+  },
+  emits: ['input'],
+  setup(props, { expose, emit }) {
+    const { proxy:vm } = getCurrentInstance();
+    const { fieldData, setFieldData } = useFreeField(props);
+    const {
+      showPreview,
+      previewType,
+      previewFile,
+      maxFileSize,
+      maxTotalSize,
+      acceptedFileTypes,
+      fileThumb,
+      filePreviewType,
+      filePreview,
+      filesRejected,
+      preview,
+    } = useUploader(props);
+
+    const uploader = ref(null);
+    const hasError = ref(false);
+
+    const selfValidate = () => {
+      if (props.Field?.Required) {
+        hasError.value = fieldData.value?.length <= 0;
+        return fieldData.value?.length > 0;
+      }
+
+      const rules = Array.isArray(typeof props.Field.Rules) ? props.Field.Rules : [props.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(fieldData.value);
+        }
+      }
+
+      hasError.value = !isValid;
+      return isValid;
+    };
+
+    const factoryFn = () => {
+      return {
+        url: props.Field.url || `${vm.ctx.config.baseUrl}/upload`,
+        fieldName: 'file',
+      };
+    };
+
+    const uploaded = (info) => {
+      const uploadedFiles = [];
+      for (let i = 0; i < info.files.length; i += 1) {
+        const file = info.files[i];
+
+        const { xhr } = file;
+        let res;
+        if (xhr && xhr.response) {
+          if (typeof xhr.response === 'string') {
+            //
+            res = JSON.parse(xhr.response);
+          } else if (typeof xhr.response === 'object') {
+            //
+            res = xhr.response;
+          } else {
+            //
+            return;
+          }
+
+          if (res && res.msg === 'OK') {
+            uploadedFiles.push({
+              id: res.data.id,
+              // eslint-disable-next-line no-underscore-dangle
+              sizeLabel: file.__sizeLabel,
+              name: file.name,
+              size: file.size,
+              type: file.type,
+            });
+          }
+        } else if (file.id) {
+          // old files
+          uploadedFiles.push(file);
+        }
+      }
+
+      setFieldData(uploadedFiles, emit);
+      selfValidate();
+    }
+
+    const { validate } = useFormValidator();
+    expose({
+      validate,
+    });
+
+    return {
+      fieldData,
+      setFieldData,
+
+      maxFileSize,
+      maxTotalSize,
+      acceptedFileTypes,
+      fileThumb,
+      filePreviewType,
+      filePreview,
+      filesRejected,
+      preview,
+      showPreview,
+      previewType,
+      previewFile,
+      uploader,
+
+      hasError,
+      selfValidate,
+      factoryFn,
+      uploaded,
+
+      removeFile: () => {
+        setFieldData([], emit);
+        selfValidate();
+      },
+    };
+  },
+  // methods: {
+  //   fileAdded(files) {
+  //     this.$refs.uploader.files = files;
+  //   },
+  // },
+});
+</script>
+
+<style lang="sass">
+.free-field-image
+  .only-icon
+    text-align: center
+    width: 32px
+    .q-btn
+      max-width: 32px
+    .q-uploader__header
+      display: none
+    .q-uploader__list
+      min-height: 32px
+      padding: 0
+</style>