free-fe-core-modules 0.0.1

package/field-components/Fields/ImageList.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="row input-field-image-list">
+    <span
+      :class="`field-label ${(Field.Label && Field.Label.trim().length)
+        ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
+      v-if="typeof Field.Label !== 'undefined'">
+      <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
+      @finish="uploaded"
+      @removed="uploaded"
+      @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 ? 'input-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>
+          <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>
+          <slot name="warning"></slot>
+        </div>
+
+        <div v-if="scope.files.length" class="file-list row items-start justify-start q-gutter-xl">
+          <q-card
+            flat
+            class="file-list-item"
+            v-for="(file, index) in scope.files" :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>
+
+              <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">
+          <q-item>
+            <q-item-section v-for="(file, index) in scope.files" :key="index">
+              <q-item-label class="full-width ellipsis">
+                {{ file.name }}
+                <q-tooltip>{{ file.name }}</q-tooltip>
+              </q-item-label>
+
+              <q-item-label caption>Size: {{ file.sizeLabel || file.__sizeLabel }}</q-item-label>
+
+              <q-item-section v-if="file.__img" thumbnail class="gt-xs">
+                <img :src="file.__img.src" />
+              </q-item-section>
+              <q-item-section v-if="file.id" thumbnail class="gt-xs">
+                <img :src="`${ctx.config.thumbUrlBase}${file.id}`" />
+              </q-item-section>
+
+              <q-item-section side>
+                <q-btn
+                  class="gt-xs"
+                  size="12px"
+                  flat
+                  dense
+                  round
+                  icon="delete"
+                  @click="scope.removeFile(file)"
+                  :disabled="Field.ReadOnly"
+                />
+              </q-item-section>
+            </q-item-section>
+          </q-item>
+        </q-list> -->
+        <!-- <div v-else class="text-center">no file selected yet</div> -->
+        <div class="input-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-img
+          v-if="previewType=== 'image'"
+          contain :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%;"
+        />
+      </div>
+    </q-dialog>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixnins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldImageList',
+  mixins: [mixnins.UploaderMixin, mixnins.InputFieldMixin],
+  emits:['input'],
+  fieldInfo: {
+    Category: 'Upload',
+    Label: '图片列表',
+    Value: 'ImageList',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '支持的文件类型',
+        Name: 'Options.Ext',
+        Default: 'jpg,png,bmp',
+      },
+      {
+        Type: 'String',
+        Label: '最大文件大小',
+        Name: 'MaxValue',
+        Default: '10m',
+      },
+      {
+        Type: 'String',
+        Label: '最大总大小',
+        Name: 'Options.MaxTotal',
+        Default: '50m',
+      },
+    ],
+    Description: '',
+  },
+  data() {
+    return {
+      hasError: false,
+    };
+  },
+  watch: {
+    fieldData() {
+      if (this.fieldData) {
+        this.$refs.uploader.files = this.fieldData;
+      }
+    },
+  },
+  mounted() {
+    if (this.fieldData) {
+      try {
+        this.$refs.uploader.files = this.fieldData;
+      } catch (ex) {
+        //
+      }
+    }
+  },
+  methods: {
+    validate() {
+      if (this.Field.Required) {
+        this.hasError = this.$refs.uploader.files.length <= 0;
+        return this.$refs.uploader.files.length > 0;
+      }
+
+      const rules = Array.isArray(typeof this.Field.Rules) ? this.Field.Rules : [this.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(this.$refs.uploader.files);
+        }
+      }
+
+      this.hasError = !isValid;
+      return isValid;
+    },
+    factoryFn() {
+      return {
+        url: this.Field.url || `${this.ctx.config.baseUrl}/upload`,
+        fieldName: 'file',
+      };
+    },
+    uploaded() {
+      const uploadedFiles = [];
+      for (let i = 0; i < this.$refs.uploader.files.length; i += 1) {
+        const file = this.$refs.uploader.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);
+        }
+      }
+
+      this.fieldData = uploadedFiles;
+      this.$emit('input');
+
+      this.validate();
+    },
+  },
+});
+</script>

package/field-components/Fields/ImageListCombined.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="row input-field-image-list combined input-field--readonly">
+    <span
+      :class="`field-label ${(Field.Label && Field.Label.trim().length)
+        ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
+      v-if="typeof Field.Label !== 'undefined'">
+      <q-tooltip v-if="Field.Description" anchor="top right">{{Field.Description}}</q-tooltip>
+      {{Field.Label || ''}}
+    </span>
+    <q-uploader
+      multiple
+      :class="`q-ma-xs `"
+      ref="uploader"
+    >
+      <template v-slot:list="scope">
+        <div v-if="scope.files.length" class="file-list row items-start justify-start q-gutter-xl">
+          <q-card
+            flat
+            class="file-list-item"
+            v-for="(file, index) in scope.files" :key="index">
+              <e-icon class="file-image" :name="fileThumb(file)" thumb :relative="false">
+                <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>
+          </q-card>
+        </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-img contain :src="previewFile"
+          @click="showPreview=false"
+          style="height: 100%; max-width: 100%;"></q-img>
+      </div>
+    </q-dialog>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixnins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldImageListCombined',
+  mixins: [mixnins.UploaderMixin, mixnins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'Upload',
+    Label: '合并图片列表',
+    Value: 'ImageListCombined',
+    Description: '',
+  },
+  watch: {
+    fieldData() {
+      if (this.fieldData) {
+        this.$refs.uploader.files = this.fieldData;
+      }
+    },
+  },
+});
+</script>

package/field-components/Fields/InputFieldList.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="input-field-list">
+    <dynamic-list
+      :Field="localField"
+      :values="data"
+      readonly
+      ref="fieldList"
+      selection="multiple"
+    >
+      <template v-slot:top>
+        <q-btn-group class="action-buttons">
+          <q-btn
+            icon="content_copy"
+            @click="copy"
+          >
+            <q-tooltip>拷贝选中</q-tooltip>
+          </q-btn>
+          <q-btn
+            icon="content_paste"
+            @click="paste"
+          >
+            <q-tooltip>粘贴</q-tooltip>
+          </q-btn>
+          <q-btn
+            icon="update"
+            @click="batch"
+            v-if="$refs.fieldList && $refs.fieldList.selected.length > 0"
+          >
+            <q-tooltip>批量修改</q-tooltip>
+          </q-btn>
+        </q-btn-group>
+      </template>
+      <template v-slot:header-actions>
+        <q-btn
+          flat
+          round
+          icon="add"
+          @click="addField"
+        ></q-btn>
+      </template>
+      <template v-slot:body-actions="props">
+        <q-btn
+          flat
+          round
+          icon="edit"
+          @click="editingField=props.row"
+        ></q-btn>
+        <q-btn
+          flat
+          round
+          icon="delete"
+          @click="deleteField(props)"
+        ></q-btn>
+      </template>
+      <template v-slot:warning>
+        <slot name="warning"></slot>
+      </template>
+    </dynamic-list>
+
+    <free-field
+      :Field="editingFieldField"
+      :values="editingField"
+      @cancel="editingField = undefined; $emit('cancel')"
+      @save="saveField"
+      @input="$emit('input')"
+      @update:field="editingFieldChanged"
+    ></free-field>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+import DynamicList from './DynamicList';
+
+const clipBoardStore = {
+  content: '',
+  items: [],
+};
+
+// const DynamicList = { ...DList };
+// DynamicList.mixins = (DynamicList.mixins || []).concat(InputFieldMixin.mixins);
+// DynamicList.props = { ...InputFieldMixin.props, ...DynamicList.props };
+// DynamicList.computed = {
+
+//   ...InputFieldMixin.computed,
+//   ...DynamicList.computed,
+// };
+// DynamicList.methods = {
+
+//   ...InputFieldMixin.methods,
+//   ...DynamicList.methods,
+// };
+// DynamicList.created = DynamicList.created || InputFieldMixin.created;
+
+export default defineComponent({
+  name: 'InputFieldList',
+  mixins: [mixins.InputFieldMixin],
+  emits:['save', 'delete', 'cancel','paste:fields', 'batch:fields'],
+  fieldInfo: {
+    Category: 'Advanced',
+    Label: '字段列表',
+    Value: 'FieldList',
+    Description: '',
+  },
+  components: {
+    DynamicList,
+  },
+  data() {
+    return {
+      editingField: undefined,
+      changedFields: [],
+    };
+  },
+  computed: {
+    editingFieldField() {
+      return {
+        Type: 'FieldEditor',
+        Name: '',
+        show: !!this.editingField,
+      };
+    },
+    localField() {
+      return {
+        Type: 'DynamicList',
+        showTop: true,
+        Name: this.Field && this.Field.Name ? this.Field.Name : 'Fields',
+        Options: {
+          Columns:
+            this.Field && this.Field.Options && this.Field.Options.Columns
+              ? this.Field.Options.Columns
+              : [
+                {
+                  Label: '#',
+                  Name: 'Index',
+                  sortable: true,
+                  style: 'max-width: 100px;',
+                },
+                // {
+                //   Label: '日期',
+                //   Name: 'LastUpdateDate',
+                //   style: 'max-width: 160px;',
+                //   sortable: true,
+                //   Options: {
+                //     Filters: 'normalDate',
+                //   },
+                // },
+                {
+                  Label: '名称',
+                  Name: 'Name',
+                  style: 'max-width: 300px; overflow: hidden',
+                  sortable: true,
+                },
+                {
+                  Label: '标题',
+                  Name: 'Label',
+                  style: 'max-width: 300px; min-width: 100px',
+                  sortable: true,
+                },
+                {
+                  Label: '类型',
+                  Name: 'Type',
+                  style: 'max-width: 200px; min-width: 100px',
+                  sortable: true,
+                },
+              ],
+        },
+      };
+    },
+  },
+  methods: {
+    addField() {
+      let newIndex = 1;
+
+      if (this.data) {
+        const fName = this.Field && this.Field.Name ? this.Field.Name : 'Fields';
+        const fData = this.data[fName];
+
+        if (fData && fData.length) {
+          newIndex = fData[fData.length - 1].Index + 1;
+        }
+      }
+
+      this.editingField = {
+        Index: newIndex,
+      };
+    },
+    saveField() {
+      if (!this.editingField) return;
+      const theField = { ...this.editingField };
+
+      if (theField.isBatchEditing) {
+        if (this.$refs.fieldList.selected.length > 0) {
+          const items = [];
+          for (let i = 0; i < this.$refs.fieldList.selected.length; i += 1) {
+            const item = this.$refs.fieldList.selected[i];
+
+            if (item && item.id) {
+              items.push(item.id);
+            }
+          }
+
+          const newFld = {};
+          for (let i = 0; i < this.changedFields.length; i += 1) {
+            const fld = this.changedFields[i];
+            if (fld && typeof theField[fld] !== 'undefined') {
+              newFld[fld] = theField[fld];
+            }
+          }
+          this.editingField = undefined;
+          this.$emit(
+            'batch:fields',
+            { ...newFld, ids: items.join(',') },
+          );
+        }
+      } else {
+        if (typeof theField.auto__index === 'undefined') {
+          // adding new
+          this.$refs.fieldList.addRow(theField);
+        }
+
+        this.editingField = undefined;
+
+        this.$emit('save', theField);
+      }
+    },
+    deleteField(p) {
+      this.$refs.fieldList.deleteRow(p);
+      this.$emit('delete', p.row);
+    },
+    copy() {
+      clipBoardStore.items = [];
+
+      if (
+        !this.$refs.fieldList
+        || !this.$refs.fieldList.selected
+        || this.$refs.fieldList.selected.length <= 0
+      ) {
+        return;
+      }
+
+      const items = [];
+      for (let i = 0; i < this.$refs.fieldList.selected.length; i += 1) {
+        const item = this.$refs.fieldList.selected[i];
+
+        if (item) {
+          items.push(item.id);
+        }
+        clipBoardStore.items.push(item);
+      }
+
+      if (items.length <= 0) return;
+
+      clipBoardStore.content = `EIS_FLOW_FIELD_COPY:${items.join(',')}`;
+    },
+    paste() {
+      // local paste
+      if (clipBoardStore.items && clipBoardStore.items.length > 0) {
+        const fName = (this.Field && this.Field.Name) ? this.Field.Name : 'Fields';
+        this.data[fName] = this.data[fName] || [];
+        this.data[fName] = this.data[fName].concat(clipBoardStore.items.map((i) => {
+          delete i.id;
+          delete i.auto__index;
+          return i;
+        })).sort((a, b) => a.Index - b.Index);
+      }
+
+      // emit to parent
+      if (
+        clipBoardStore.content
+        && clipBoardStore.content.startsWith('EIS_FLOW_FIELD_COPY:')
+      ) {
+        this.$emit(
+          'paste:fields',
+          clipBoardStore.content.substr('EIS_FLOW_FIELD_COPY:'.length),
+          clipBoardStore.items,
+        );
+      }
+    },
+    editingFieldChanged(f) {
+      if (!f) return;
+      this.changedFields.push(f);
+    },
+    batch() {
+      if (
+        !this.$refs.fieldList
+        || !this.$refs.fieldList.selected
+        || this.$refs.fieldList.selected.length <= 0
+      ) {
+        return;
+      }
+
+      this.editingField = {
+        isBatchEditing: true,
+      };
+    },
+  },
+});
+</script>