free-fe-core-modules 0.0.54 → 0.1.1

package/free-field/Fields/Image.vue

@@ -1,153 +1,89 @@
 <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">
+    <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
+          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 ?
+    <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' : '')"
-    >
+        + (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-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>
+          <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 || !fieldData.value.id)"
-          type="a"
-          :icon="fieldData?.value?.length ? 'check' : 'cloud_upload'"
-          dense
-          flat
-          :disabled="Field.ReadOnly"
-        >
+        <q-btn v-if="(Field.onlyIcon || onlyIcon) && (!fieldData.value || !fieldData.value || !fieldData.value.id)"
+          type="a" :icon="fieldData?.value?.id ? '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?.id">
-          <q-img
-            :src="$filter(Field?.Options?.NoThumb ? 'serverImage' : 'serverThumb', `${fieldData.value.id}`)"
-            style="width:32px; max-height:32px;min-height:32px;"
-          >
+          <q-img :src="$filter(Field?.Options?.NoThumb ? 'serverImage' : 'serverThumb', `${fieldData.value.id}`)"
+            style="width:32px; max-height:32px;min-height:32px;">
           </q-img>
-          <q-uploader-add-trigger/>
+          <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.id" thumbnail>
-            <q-img
-              :src="`${ctx.config.thumbUrlBase}${fieldData.value.id}`"
-              style="width: 48px; max-height: 48px;"
-            >
+          <q-item-section v-if="fieldData.value.id" thumbnail>
+            <q-img :src="`${ctx.config.thumbUrlBase}${fieldData.value.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.__img" thumbnail class="gt-xs">
+          <q-item-section v-if="fieldData.value.__img" thumbnail class="gt-xs">
             <q-img :src="fieldData.value.__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-item-section v-if="!fieldData.value?.id">
+            <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="Array.isArray(fieldData.value) && 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="!Field?.Options?.NoThumb"
-                :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>
+        <div v-else-if="fieldData.value?.id" class="file-list row items-start justify-start">
+          <q-card flat class="file-list-item">
+            <e-icon class="file-image" :name="fileThumb(fieldData.value)" :thumb="!Field?.Options?.NoThumb"
+              :relative="filePreviewType(fieldData.value) !== 'image'" @click="preview(fieldData.value)">
+              <div class="view-btn-wrapper absolute-full justify-center text-center">
+                <q-btn flat class="view-btn full-height full-width" @click="preview(fieldData.value)">查看</q-btn>
+              </div>
+            </e-icon>
+            <span class="file-name full-width ellipsis">
+              <a v-if="fieldData.value && fieldData.value.id" target="_blank"
+                :href="$filter('serverPath', fieldData.value.id)" :download="fieldData.value.name">
+                {{ fieldData.value.name }}
+              </a>
+              <span v-else-if="fieldData.value && fieldData.value.name">
+                {{ fieldData.value.name }}
               </span>
+              <q-tooltip>{{ fieldData.value.name }}</q-tooltip>
+            </span>
 
-              <span class="file-size full-width ellipsis">
-                Size: {{ file.sizeLabel || file.__sizeLabel }}
-              </span>
+            <span class="file-size full-width ellipsis">
+              Size: {{ fieldData.value.sizeLabel || fieldData.value.__sizeLabel }}
+            </span>
 
-              <q-btn
-                flat
-                dense
-                round
-                class="delete-btn"
-                icon="close"
-                @click="scope.removeFile(file)"
-                :disabled="Field.ReadOnly"
-              />
+            <q-btn flat dense round class="delete-btn" icon="close" @click="scope.removeFile(fieldData.value)"
+              :disabled="Field.ReadOnly" />
           </q-card>
         </div>
 
@@ -156,32 +92,18 @@
         </div>
       </template>
     </q-uploader>
-    <q-dialog class="image-preview-dialog"
-      flat
-      full-width full-height v-model="showPreview"
+    <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
-          fit="contain"
-          v-if="previewType === 'image'"
-          contain :src="previewFile"
-          @click="showPreview=false"
+        <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 fit="contain" v-if="previewType === 'image'" :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%;"
-        />
+        <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>
@@ -189,9 +111,9 @@
 
 <script>
 import { defineComponent, getCurrentInstance, ref } from 'vue';
-import { useFreeField, freeFieldProps } from 'free-fe-core-modules/free-field/composible/useFreeField';
-import { useFormValidator} from 'free-fe-core-modules/composible/useFormValidator';
-import { useUploader } from 'free-fe-core-modules/free-field/composible/useUploader';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField.js';
+import { useFormValidator} from '../../composible/useFormValidator.js';
+import { useUploader } from '../composible/useUploader.js';
 
 export default defineComponent({
   name: 'InputFieldImage',
@@ -249,7 +171,7 @@ export default defineComponent({
 
     const selfValidate = () => {
       if (props.Field?.Required) {
-        hasError.value = !!fieldData.value?.id;
+        hasError.value = !fieldData.value?.id;
         return !!fieldData.value?.id;
       }
 
@@ -298,7 +220,6 @@ export default defineComponent({
         if (res && res.msg === 'OK') {
           setFieldData({
             id: res.data.id,
-            // eslint-disable-next-line no-underscore-dangle
             sizeLabel: file.__sizeLabel,
             name: file.name,
             size: file.size,

package/free-field/Fields/ImageList.vue

@@ -1,99 +1,49 @@
 <template>
   <div class="row free-field-image-list" v-if="Field">
-    <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 :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>
-    <q-uploader
-      @added="localFiles.push(...$event)"
-      @uploaded="uploaded"
-      @removed="removeFile"
-      @rejected="filesRejected"
-      :factory="factoryFn"
-      multiple
-      :max-files="Field.Options && Field.Options.MaxCount"
-      :max-file-size="maxFileSize"
-      :max-total-size="maxTotalSize"
-      :class="`q-ma-xs ${hasError ? 'free-field--error' : ''}`"
-      ref="uploader"
-    >
+    <q-uploader @added="localFiles.push(...$event)" @uploaded="uploaded" @removed="removeFile" @rejected="filesRejected"
+      :factory="factoryFn" multiple :max-files="Field.Options && Field.Options.MaxCount" :max-file-size="maxFileSize"
+      :max-total-size="maxTotalSize" :class="`q-ma-xs ${hasError ? 'free-field--error' : ''}`" ref="uploader">
       <template v-slot:list="scope">
         <div class="uploader-btns row no-wrap items-center">
           <q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
-          <q-btn
-            v-if="scope.canAddFiles"
-            type="a"
-            icon="add_box"
-            label="点击添加"
-            class="add-btn"
-            dense
-            flat
-            :disabled="Field.ReadOnly"
-          >
-            <q-uploader-add-trigger v-if="!Field.ReadOnly"/>
+          <q-btn v-if="scope.canAddFiles" type="a" icon="add_box" label="点击添加" class="add-btn" dense flat
+            :disabled="Field.ReadOnly">
+            <q-uploader-add-trigger v-if="!Field.ReadOnly" />
           </q-btn>
-          <q-btn
-            v-if="scope.canUpload"
-            icon="cloud_upload"
-            @click="scope.upload"
-            class="upload-btn"
-            label="点击上传"
-            dense
-            flat
-            :disabled="Field.ReadOnly"
-          ></q-btn>
+          <q-btn v-if="scope.canUpload" icon="cloud_upload" @click="scope.upload" class="upload-btn" label="点击上传" dense
+            flat :disabled="Field.ReadOnly"></q-btn>
 
-          <q-btn
-            v-if="scope.isUploading"
-            icon="clear"
-            @click="scope.abort"
-            class="abort-btn"
-            round
-            dense
-            flat
-            :disabled="Field.ReadOnly"
-          ></q-btn>
+          <q-btn v-if="scope.isUploading" icon="clear" @click="scope.abort" class="abort-btn" round dense flat
+            :disabled="Field.ReadOnly"></q-btn>
           <slot name="warning"></slot>
         </div>
 
-        <div v-if="Array.isArray(allFiles) && allFiles.length" class="file-list row items-start justify-start q-gutter-xl">
-          <q-card
-            flat
-            class="file-list-item"
-            v-for="(file, index) in allFiles" :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">
-                {{ file.name }}
-                <q-tooltip>{{ file.name }}</q-tooltip>
-              </span>
+        <div v-if="Array.isArray(allFiles) && allFiles.length"
+          class="file-list row items-start justify-start q-gutter-xl">
+          <q-card flat class="file-list-item" v-for="(file, index) in allFiles" :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">
+              {{ file.name }}
+              <q-tooltip>{{ file.name }}</q-tooltip>
+            </span>
 
-              <span class="file-size full-width ellipsis">
-                Size: {{ file.sizeLabel || file.__sizeLabel }}
-              </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-btn flat dense round class="delete-btn" icon="close" @click="scope.removeFile(file)"
+              :disabled="Field.ReadOnly" />
           </q-card>
         </div>
         <!-- <q-list separator v-if="scope.files.length">
@@ -134,31 +84,18 @@
         </div>
       </template>
     </q-uploader>
-    <q-dialog class="image-preview-dialog"
-      flat
-      full-width full-height v-model="showPreview"
+    <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"
+        <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 fit="contain" v-if="previewType === 'image'" :src="previewFile" @click="showPreview = false"
           style="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%;"
-        />
+        <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>
@@ -166,9 +103,9 @@
 
 <script>
 import { computed, defineComponent, getCurrentInstance, ref } from 'vue';
-import { useFreeField, freeFieldProps } from '../composible/useFreeField';
-import { useFormValidator} from '../../composible/useFormValidator';
-import { useUploader } from '../composible/useUploader';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField.js';
+import { useFormValidator} from '../../composible/useFormValidator.js';
+import { useUploader } from '../composible/useUploader.js';
 
 export default defineComponent({
   name: 'InputFieldImageList',
@@ -273,7 +210,6 @@ export default defineComponent({
           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,

package/free-field/Fields/MixedTable.vue

@@ -165,7 +165,7 @@ export default defineComponent({
             Label: `${ii + 1}`,
             Name: `${ii}`,
             Type: 'FixedList',
-            List: [
+            Fields: [
               {
                 Label: 'rowspan',
                 Name: 'rowspan',

package/free-field/Fields/Number.js

@@ -104,7 +104,6 @@ export default defineComponent({
   props: {
     ...freeFieldProps,
   },
-  emits: ['input'],
   setup(props, { emit, slots , expose }){
     if (!props.Field) return {};
 

package/free-field/Fields/Permission.vue

@@ -3,38 +3,26 @@
     <slot name="warning"></slot>
     <div class="buttons relative-position" v-if="Field && Field.ShowButtons">
       <span class="q-ml-lg select-all-btn">
-        <q-btn round icon="check" @click="setFieldData(Object.assign({},serviceList))"></q-btn>
+        <q-btn round icon="check" @click="setFieldData(Object.assign({}, serviceList))"></q-btn>
       </span>
       <span class="q-ml-md clear-btn">
         <q-btn round icon="clear" @click="setFieldData({})"></q-btn>
       </span>
     </div>
     <div class="roles relative-position row items-center">
-      <q-radio
-        class="role"
-        v-model="currentRole"
-        v-for="(r, idx) in (Field && Field.Roles) || []"
-        :key="idx"
-        :val="r.Name"
-        :label="r.Name || idx"
-        @update:modelValue="setFieldData(r.Permission || {})"/>
+      <q-radio class="role" v-model="currentRole" v-for="(r, idx) in (Field && Field.Roles) || []" :key="idx"
+        :val="r.Name" :label="r.Name || idx" @update:modelValue="setFieldData(r.Permission || {})" />
     </div>
-    <permission-editor
-      v-if="Field && !Field.HideEditor"
-      class="permission-editor"
-      :Permission="fieldData.value"
-      :Service="serviceList"
-      :readonly="Field.ReadOnly"
-      @changed="permissionChanged"
-      :noDataScope="Field.NoDataScope"
-    ></permission-editor>
+    <permission-editor v-if="Field && !Field.HideEditor" class="permission-editor" :Permission="fieldData.value"
+      :Service="serviceList" :readonly="Field.ReadOnly" @changed="permissionChanged"
+      :noDataScope="Field.NoDataScope"></permission-editor>
   </span>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
-import { useFreeField, freeFieldProps } from '../composible/useFreeField';
-import PermissionEditor from './PermissionEditor';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField.js';
+import PermissionEditor from './PermissionEditor.vue';
 
 export default defineComponent({
   name: 'InputFieldPermission',

package/free-field/Fields/QueryFilters.vue

@@ -47,14 +47,14 @@
       <q-space></q-space>
       <div class="q-ma-xs query-btns">
         <q-btn
-          v-if="canExport"
+          v-if="Field.canExport"
           class="export-btn"
           icon="fa fa-list"
           label="导出"
           @click="$emit('export')"
         />
-        <q-btn class="clear-btn" :icon="clearIcon" label="清空" @click="clear"></q-btn>
-        <q-btn class="query-btn q-ma-xs" :icon="searchIcon" label="查询" @click="search"></q-btn>
+        <q-btn class="clear-btn" :icon="Field.clearIcon || 'refresh'" label="清空" @click="clear"></q-btn>
+        <q-btn class="query-btn q-ma-xs" :icon="Field.searchIcon || 'search'" label="查询" @click="search"></q-btn>
       </div>
     </div>
   </div>
@@ -76,10 +76,6 @@ export default defineComponent({
   props: {
     ...freeFieldProps,
     dense: { type: Boolean, default: false },
-    canExport: { type: Boolean, default: false },
-    queryData: { type: Object, default: () => ({}) },
-    searchIcon: { type: String, default: 'search' },
-    clearIcon: { type: String, default: 'refresh' },
   },
   setup(props, { emit }) {
     if (!props.Field) return {};
@@ -92,7 +88,7 @@ export default defineComponent({
     const kwFields = ref([]);
 
     watchEffect(()  => {
-      query.value = props.queryData;
+      query.value = props.Field.queryData;
     })
 
     watchEffect(() => {