free-fe-core-modules 0.0.55 → 0.1.2

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,32 +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
-          fit="contain"
-          v-if="previewType=== 'image'"
-          :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>
@@ -167,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',
@@ -274,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/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/Search.vue

@@ -4,68 +4,48 @@
       <q-card class="free-field-search-dialog-card">
         <q-toolbar>
           <div class="simple-field full-width">
-            <q-input
-              autofocus
-              v-model="searchKey"
-              hide-bottom-space
-              :placeholder="Field &&
-              ((Field.Options?.SearchPlaceholder) || Field.Placeholder)"
-              @keydown.enter="search()"
-              class="full-width"
-              v-bind="inputControlSettings"
-            >
+            <q-input autofocus v-model="searchKey" hide-bottom-space :placeholder="Field &&
+              ((Field.Options?.SearchPlaceholder) || Field.Placeholder)" @keydown.enter="search()" class="full-width"
+              v-bind="inputControlSettings">
               <template v-slot:append>
-                <q-btn :class="Field.Options?.SearchBtnClasses" :flat="!Field.Options?.SearchBtn3D" :round="!Field.Options?.SearchBtnRect" icon="search" @click="search()" :disabled="Field.ReadOnly">{{Field.Options.SearchBtnText}}</q-btn>
+                <q-btn :class="Field.Options?.SearchBtnClasses" :flat="!Field.Options?.SearchBtn3D"
+                  :round="!Field.Options?.SearchBtnRect" icon="search" @click="search()" :disabled="Field.ReadOnly">{{
+                    Field.Options.SearchBtnText }}</q-btn>
               </template>
             </q-input>
           </div>
         </q-toolbar>
 
         <q-card-section :style="`
-          width: ${Field.Options?.Width|| '800px'};
-          max-width: ${Field.Options?.MaxWidth|| '80vw'};
+          width: ${Field.Options?.Width || '800px'};
+          max-width: ${Field.Options?.MaxWidth || '80vw'};
           overflow-y: scroll`">
-          <q-table
-            :flat="Field.Options?.Flat"
-            :bordered="Field.Options?.Bordered"
-            :rows="searchData.docs || []"
-            :columns="searchColumns"
-            row-key="id"
-            :pagination="searchPagination"
-            :selection="Field.Multiple ? 'multiple' : 'single'"
-            :selected="searchSelected"
-            @update:selected="searchSelected = $event"
-          >
+          <q-table :flat="Field.Options?.Flat" :bordered="Field.Options?.Bordered" :rows="searchData.docs || []"
+            :columns="searchColumns" row-key="id" :pagination="searchPagination"
+            :selection="Field.Multiple ? 'multiple' : 'single'" :selected="searchSelected"
+            @update:selected="searchSelected = $event">
             <template v-slot:header="props">
               <q-tr :props="props">
-                <q-th auto-width v-if="!Field.Options?.checkOnRight"/>
-                <q-th
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                >
+                <q-th auto-width v-if="!Field.Options?.checkOnRight" />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   {{ col.label }}
                 </q-th>
-                <q-th auto-width v-if="Field.Options?.checkOnRight"/>
+                <q-th auto-width v-if="Field.Options?.checkOnRight" />
               </q-tr>
             </template>
             <template v-slot:body="props">
               <q-tr class="table-row">
                 <q-td auto-width v-if="!Field.Options?.checkOnRight">
-                   <q-toggle v-model="props.selected" v-if="Field.Options?.useToggle"/>
-                   <q-checkbox v-else v-model="props.selected"></q-checkbox>
+                  <q-toggle v-model="props.selected" v-if="Field.Options?.useToggle" />
+                  <q-checkbox v-else v-model="props.selected"></q-checkbox>
                 </q-td>
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                  :class="`col-${col.name} col-${col.value}`"
-                >
-                {{col.value}}
+                <q-td v-for="col in props.cols" :key="col.name" :props="props"
+                  :class="`col-${col.name} col-${col.value}`">
+                  {{ col.value }}
                 </q-td>
                 <q-td auto-width v-if="Field.Options?.checkOnRight">
-                   <q-toggle v-model="props.selected" v-if="Field.Options?.useToggle"/>
-                   <q-checkbox v-else v-model="props.selected"></q-checkbox>
+                  <q-toggle v-model="props.selected" v-if="Field.Options?.useToggle" />
+                  <q-checkbox v-else v-model="props.selected"></q-checkbox>
                 </q-td>
               </q-tr>
             </template>
@@ -77,97 +57,59 @@
 
             <template v-slot:bottom>
               <div class="full-width row flex-center">
-                共{{searchData.total}}条
-                <q-pagination
-                  v-model="searchData.page"
-                  :max="searchData.pages"
-                  @update:modelValue="searchPaginationChanged"
-                  boundary-numbers
-                  direction-links
-                  :max-pages="2"
-                ></q-pagination>
+                共{{ searchData.total }}条
+                <q-pagination v-model="searchData.page" :max="searchData.pages"
+                  @update:modelValue="searchPaginationChanged" boundary-numbers direction-links
+                  :max-pages="2"></q-pagination>
               </div>
             </template>
           </q-table>
         </q-card-section>
         <q-card-actions>
           <div class="buttons row full-width justify-center q-ma-sm">
-            <q-btn
-              :icon="(Field.Options?.CancelIcon) || 'cancel'"
-              class="cancel-btn q-mr-md"
-              @click="showSearch = false; searchSelected=originalSelected; $emit('input')"
-            >{{$t('cancelButtonText')}}</q-btn>
-            <q-btn
-              :icon="(Field.Options?.OkIcon) || 'check'"
-              class="ok-btn" @click="searchOK">{{$t('okButtonText')}}</q-btn>
+            <q-btn :icon="(Field.Options?.CancelIcon) || 'cancel'" class="cancel-btn q-mr-md"
+              @click="showSearch = false; searchSelected = originalSelected; $emit('input')">{{ $t('cancelButtonText')
+              }}</q-btn>
+            <q-btn :icon="(Field.Options?.OkIcon) || 'check'" class="ok-btn" @click="searchOK">{{ $t('okButtonText')
+            }}</q-btn>
           </div>
         </q-card-actions>
       </q-card>
     </q-dialog>
 
     <span v-if="Field.ReadOnly" class="simple-field row">
-      <span
-        :class="`field-label field-label-readonly ${
-          (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-readonly ${(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>
       <span class="readonly-content">
-        <span :style="(Field.Info?.Style) ? Field.Info.Style : ''">{{searchDisplay}}</span>
+        <span :style="(Field.Info?.Style) ? Field.Info.Style : ''">{{ searchDisplay }}</span>
       </span>
     </span>
-    <q-input
-      v-else
-      modelValue=""
-      :type="`${Field?.Multiple ? 'textarea' : ''}`"
-      rows="1"
-      hide-bottom-space
-      readonly
+    <q-input v-else modelValue="" :type="`${Field?.Multiple ? 'textarea' : ''}`" rows="1" hide-bottom-space readonly
       :class="`${Field?.Multiple
-        ? '' : 'simple-field'} ${searchDisplay ? 'has-data' : 'empty'}`"
-      ref="fieldToValid"
-      @click="searchKey = '';searchData = {}; showSearch = true"
-    >
+        ? '' : 'simple-field'} ${searchDisplay ? 'has-data' : 'empty'}`" ref="fieldToValid"
+      @click="searchKey = ''; searchData = {}; showSearch = true">
       <template v-slot:prepend>
-        <q-chip
-          v-for="(selected, index) in searchSelected"
-          :key="index"
-          removable
-          :value="!!searchSelected[index]"
-          @remove="removeSelected(selected)"
-          :color="Field.BgColor || 'primary'"
-          :text-color="Field.Color || 'white'"
-        >
-          <q-tooltip
-            anchor="top right"
-          >{{selected[(Field.Options?.SearchDisplayField) || 'id']}}</q-tooltip>
-          {{selected[(Field.Options?.SearchDisplayField) || 'id']}}
+        <q-chip v-for="(selected, index) in searchSelected" :key="index" removable :value="!!searchSelected[index]"
+          @remove="removeSelected(selected)" :color="Field.BgColor || 'primary'" :text-color="Field.Color || 'white'">
+          <q-tooltip anchor="top right">{{ selected[(Field.Options?.SearchDisplayField) || 'id'] }}</q-tooltip>
+          {{ selected[(Field.Options?.SearchDisplayField) || 'id'] }}
         </q-chip>
       </template>
       <template v-slot:before>
-        <span
-          :class="`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?.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>
       </template>
       <template v-slot:append>
-        <q-btn
-          flat
-          dense
-          icon="search"
-          class="search-btn"
-          style="width: 36px"
-          @click="searchKey = '';searchData = {}; showSearch = true"
-        ></q-btn>
+        <q-btn flat dense icon="search" class="search-btn" style="width: 36px"
+          @click="searchKey = ''; searchData = {}; showSearch = true"></q-btn>
       </template>
     </q-input>
     <slot name="warning"></slot>
@@ -176,8 +118,8 @@
 
 <script>
 import { defineComponent, getCurrentInstance, watch, ref, computed } from 'vue';
-import { useFreeField, freeFieldProps } from 'free-fe-core-modules/free-field/composible/useFreeField';
-import { useFormValidator} from 'free-fe-core-modules/composible/useFormValidator';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField.js';
+import { useFormValidator} from '../../composible/useFormValidator.js';
 
 export default defineComponent({
   name: 'InputFieldSearch',