free-fe-core-modules 0.0.1

package/field-components/Fields/QueryFilters.vue

@@ -0,0 +1,162 @@
+<template>
+  <div :class="`input-field-query-filters columns full-width full-height ${dense ? 'dense' : ''}`">
+    <div class="row col items-center justify-start full-width">
+      <free-field
+        v-for="(field, index) in localFields"
+        :key="index"
+        :Field="field"
+        :values="query"
+        noExtra
+        noWarning
+        noTips
+        @input="queryChanged = true"
+      ></free-field>
+
+      <free-field
+        v-if="hasKw && dense"
+        :Field="{
+          Type: 'String',
+          Name: 'kw',
+          Placeholder: `请输入 [${(kwFields && kwFields.length) ? kwFields.join('、') : ''}] 关键字进行查询`
+        }"
+        :values="query"
+        @input="queryChanged = true"
+        class="keyword"
+        @keydown.enter="search"
+      ></free-field>
+
+      <q-space v-if="!hasKw || dense"></q-space>
+      <div class="q-ma-xs query-btns" v-if="!hasKw || dense">
+        <q-btn class="clear-btn" icon="refresh" label="清空" @click="clear"></q-btn>
+        <q-btn class="query-btn q-ma-xs" icon="search" label="查询" @click="search"></q-btn>
+      </div>
+    </div>
+    <div class="row col items-center full-width" v-if="hasKw && !dense">
+      <free-field
+        :Field="{
+          Type: 'String',
+          Label: '关键字',
+          Name: 'kw',
+          Placeholder: `请输入 [${(kwFields && kwFields.length) ? kwFields.join('、') : ''}] 进行查询`
+         }"
+        :values="query"
+        @input="queryChanged = true"
+        class="keyword"
+        @keydown.enter="search"
+      ></free-field>
+      <q-space></q-space>
+      <div class="q-ma-xs query-btns">
+        <q-btn
+          v-if="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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldQueryFilters',
+  mixins: [mixins.InputFieldMixin],
+  emits:['search', 'export'],
+  fieldInfo: {
+    Category: 'Advanced',
+    Label: '筛选条件',
+    Value: 'QueryFilters',
+    Description: '',
+  },
+  props: {
+    dense: { type: Boolean, default: false },
+    canExport: { type: Boolean, default: false },
+    queryData: { type: Object, default: () => ({}) },
+    searchIcon: { type: String, default: 'search' },
+    clearIcon: { type: String, default: 'refresh' },
+  },
+  data() {
+    return {
+      query: {},
+      queryChanged: false,
+      hasKw: false,
+      kwFields: [],
+    };
+  },
+  computed: {
+    localFields() {
+      const fList = [];
+      let hasKw = false;
+      const kwFields = [];
+      if (this.fieldData) {
+        this.fieldData.forEach((fd) => {
+          if (
+            ['String', 'Text', 'Rich', 'Customize', 'Labels', 'Static'].indexOf(
+              fd.Type,
+            ) >= 0
+          ) {
+            if (!fd.Info || !fd.Info.Separate) {
+              hasKw = true;
+              if (fd.Label) {
+                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+                kwFields.push(fd.Label);
+              }
+            } else {
+            // separate string field as selection
+            // TODO: could be other types??
+              fd.Type = 'Select';
+              if (this.dense) {
+                delete fd.Label;
+              }
+              fList.push(fd);
+            }
+          } else {
+            if (this.dense) {
+              delete fd.Label;
+            }
+            fList.push(fd);
+          }
+        });
+      }
+
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.hasKw = hasKw;
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.kwFields = kwFields;
+
+      return fList;
+    },
+  },
+  watch: {
+    queryData() {
+      this.query = this.queryData;
+    },
+  },
+  created() {
+    if (this.queryData && Object.keys(this.queryData).length > 0) {
+      this.query = this.queryData;
+    }
+  },
+  methods: {
+    search() {
+      if (this.queryChanged) {
+        this.$emit('search', this.query);
+        this.queryChanged = false;
+      }
+    },
+    clear() {
+      if (Object.keys(this.query).length) {
+        this.query = {};
+        this.$emit('search', {});
+        this.queryChanged = false;
+      }
+    },
+  },
+});
+</script>

package/field-components/Fields/RadioList.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="`input-field-radio-list relative-position ${
+        this.hasError ? 'input-field--error' : ''}`">
+    <slot name="warning"></slot>
+    <q-list>
+      <q-item
+        tag="label"
+        :class="`items-center ${(oIndex % 2) ? 'zebra-odd' : 'zebra-even'}`"
+        v-ripple
+        v-for="(oValue, oIndex) in Field.Options"
+        :key="oIndex"
+      >
+        <q-item-section
+          class="icon-section"
+          avatar
+          top
+          v-if="oValue.Image"
+        >
+          <e-icon
+            :relative="!!oValue.relative"
+            :name="oValue.Image.id || oValue.Image"
+            class="icon"
+          ></e-icon>
+        </q-item-section>
+        <q-item-section class="label-section">
+          <q-item-label class="label ellipsis">{{oValue.Label}}</q-item-label>
+          <q-item-label
+            caption
+            class="description ellipsis-3-lines"
+          >{{oValue.Description}}</q-item-label>
+        </q-item-section>
+        <q-item-section
+          class="radio-section"
+          avatar
+          top
+        >
+          <q-radio
+            class="radio"
+            v-model="data[Field.Name]"
+            @input="validate(); $emit('input')"
+            :val="oValue.Value"
+            :disable="Field.ReadOnly"
+          />
+        </q-item-section>
+      </q-item>
+    </q-list>
+    <div
+      class="input-field--error-tag"
+      v-if="hasError"
+    >
+      <e-icon name="error"></e-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldRadioList',
+  mixins: [mixins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '展开单选',
+    Value: 'RadioList',
+    Description: '',
+  },
+  methods: {
+    validate() {
+      if (!this.data || !this.Field || !this.Field.Name) {
+        this.hasError = false;
+        return true;
+      }
+
+      this.hasError = typeof this.data[this.Field.Name] === 'undefined';
+      return !this.hasError;
+    },
+  },
+});
+</script>

package/field-components/Fields/Rich.vue

@@ -0,0 +1,369 @@
+<template>
+  <div class="input-field-rich row no-wrap">
+    <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>
+    <span class="content relative-position fit" :class="isValid ? '' : 'input-field--error'">
+      <slot name="warning"></slot>
+
+      <div class="input-field--error-tag" v-if="!isValid">
+        <e-icon name="error"></e-icon>
+      </div>
+
+      <span
+        v-if="Field.ReadOnly"
+        class="col readonly"
+        ref="readonlyContent"
+      ></span>
+      <tiny
+        v-if="!Field.ReadOnly"
+        ref="tiny"
+        api-key="wh7g3etkwrso25e0wcpqrx8uvoa51toag3j92mllkajtg1xb"
+        tinymce-script-src="tiny/tiny_bk.js"
+        :init="{
+        language_url: 'tiny/langs/zh_cn.js',
+        language: 'zh_cn',
+        plugins: Field.ReadOnly ? [] : this.plugins,
+        menubar: Field.ReadOnly ? [] : this.menubar,
+        toolbar: Field.ReadOnly ? '' : this.toolbar.join(' '),
+        toolbar_mode: 'wrap',
+        importcss_append: true,
+        height: 500,
+        image_caption: true,
+        quickbars_selection_toolbar: Field.ReadOnly
+          ? '' : this.quickbars_selection_toolbar.join(' '),
+        contextmenu: Field.ReadOnly ? '' : this.contextmenu.join(' '),
+        extended_valid_elements:'efield',
+        setup: tinySetup,
+        default_link_target: (Field && Field.Options && Field.Options.LinkTarget) || '_blank',
+      }"
+        initial-value
+        model-events
+        plugins
+        :disabled="Field.ReadOnly"
+        toolbar
+        value
+        v-model="fieldData"
+        @onChange="validate();$emit('input')"
+      />
+    </span>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+import tiny from '@tinymce/tinymce-vue';
+
+function fileSizeStrToNumber(s) {
+  if (!s) return undefined;
+
+  const sizeMatch = s.match(/^([0-9]*)(k|m|g*)(b*)/);
+
+  if (sizeMatch) {
+    // eslint-disable-next-line no-unused-vars
+    // const [tmp, num, unit] = sizeMatch;
+    const num = sizeMatch[1];
+    const unit = sizeMatch[2];
+    if (!num || !Number(num)) return '';
+
+    let multi = 1;
+    switch (unit) {
+      case 'k':
+        multi = 1024;
+        break;
+      case 'm':
+        multi = 1024 * 1024;
+        break;
+      case 'g':
+        multi = 1024 * 1024 * 1024;
+        break;
+      default:
+        multi = 1024;
+        break;
+    }
+
+    return Number(num) * multi;
+  }
+
+  return undefined;
+}
+
+export default defineComponent({
+  name: 'InputFieldRich',
+  mixins: [mixins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'Advanced',
+    Label: '所见即所得',
+    Value: 'Rich',
+    Description: '',
+    Extra: [
+      {
+        Type: 'Number',
+        Label: '最大长度',
+        Name: 'Options.MaxLength',
+        Default: '1000',
+      },
+      {
+        Type: 'Number',
+        Label: '最大内容大小',
+        Name: 'Options.MaxSize',
+        Default: '5m',
+      },
+      {
+        Type: 'Select',
+        Name: 'Options.LinkTarget',
+        Label: '默认链接打开方式',
+        Default: '_blank',
+        Options: [
+          {
+            Label: '新窗口',
+            Value: '_blank',
+          },
+          {
+            Label: '当前窗口',
+            Value: '_self',
+          },
+        ],
+      },
+    ],
+  },
+  components: {
+    tiny,
+  },
+  props: {
+    enableField: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      isValid: true,
+      plugins: [
+        'print',
+        // 'preview',
+        'paste',
+        // 'importcss',
+        // 'searchreplace',
+        // 'autolink',
+        // 'autosave',
+        // 'save',
+        // 'directionality',
+        'code',
+        // 'visualblocks',
+        // 'visualchars',
+        'fullscreen',
+        'image',
+        'link',
+        'media',
+        // 'template',
+        // 'codesample',
+        'table',
+        // 'charmap',
+        'hr',
+        // 'pagebreak',
+        // 'nonbreaking',
+        // 'anchor',
+        // 'toc',
+        // 'insertdatetime',
+        // 'advlist',
+        'lists',
+        'wordcount',
+        // 'imagetools',
+        // 'textpattern',
+        // 'noneditable',
+        // 'help',
+        // 'charmap',
+        'quickbars',
+        'emoticons',
+      ],
+      menubar: ['insert', 'format', 'table'],
+      toolbar: [
+        'undo',
+        'redo',
+        '|',
+        'bold',
+        'italic',
+        'underline',
+        'strikethrough',
+        '|',
+        // 'fontselect',
+        'fontsizeselect',
+        'formatselect',
+        '|',
+        'alignleft',
+        'aligncenter',
+        'alignright',
+        'alignjustify',
+        '|',
+        'numlist',
+        'bullist',
+        '|',
+        'charmap',
+        'emoticons',
+        '|',
+        'fullscreen',
+        '|',
+        'insertfile',
+        'image',
+        'media',
+        'link',
+        '|',
+        'code',
+        'insertFieldButton',
+      ],
+      quickbars_selection_toolbar: [
+        'bold',
+        'italic',
+        '|',
+        'quicklink',
+        'h2',
+        'h3',
+        'blockquote',
+        'quickimage',
+        'quicktable',
+        '|',
+        'insertFieldButton',
+      ],
+      contextmenu: ['link', 'image', 'table'],
+    };
+  },
+  watch: {
+    fieldData() {
+      if (this.$refs.readonlyContent && this.Field.ReadOnly && this.fieldData) {
+        this.$refs.readonlyContent.innerHTML = this.fieldData;
+      }
+    },
+  },
+  created() {
+    if (this.$refs.readonlyContent && this.Field.ReadOnly) {
+      this.$refs.readonlyContent.innerHTML = this.fieldData;
+    }
+
+    this.Field.Warning = this.Field.Warning
+    || `可嵌入图片、视频、超级链接。内容不可超过${(this.Field.Options && this.Field.Options.MaxLength) || 1000}字，内容总大小不可超过${(this.Field.Options && this.Field.Options.MaxSize) || '5m'}。较大图片或视频请使用超链接！`;
+  },
+  methods: {
+    validate() {
+      let isValid = true;
+      if (this.$refs.tiny) {
+        if (this.Field.Required) isValid = !!this.fieldData;
+
+        const rules = Array.isArray(typeof this.Field.Rules)
+          ? this.Field.Rules : [this.Field.Rules];
+
+        for (let i = 0; i < rules.length; i += 1) {
+          const r = rules[i];
+
+          if (typeof r === 'function') {
+            isValid = isValid && r(this.fieldData);
+          }
+        }
+      }
+
+      this.isValid = isValid;
+
+      return isValid;
+    },
+    tinySetup(editor) {
+      if (this.enableField) {
+        editor.ui.registry.addButton('insertFieldButton', {
+          text: '数据字段',
+          tooltip: '插入数据字段',
+          onAction() {
+            const selectedText = editor.selection.getContent({
+              format: 'html',
+            });
+            editor.insertContent(`<efield>{${selectedText}}</efield>`);
+          },
+        });
+      }
+
+      if (this.Field && this.Field.Options) {
+        if (this.Field.Options.MaxLength) {
+          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: 'text' }).length >= this.Field.Options.MaxLength) {
+              e.preventDefault();
+              e.stopPropagation();
+              return false;
+            }
+
+            return true;
+          });
+        }
+        if (this.Field.Options.MaxSize) {
+          const maxSize = fileSizeStrToNumber(this.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;
+            }
+
+            return true;
+          });
+        }
+      }
+    },
+  },
+});
+</script>
+
+<style lang="sass">
+// .tox.tox-tinymce
+//   z-index: 2000 !important
+.tox-tinymce-aux
+  z-index: 6001 !important
+  .tox-menu
+    z-index: 6002 !important
+
+.tox-fullscreen
+  z-index: 6000 !important
+  .tox-tinymce-aux
+    z-index: 6001 !important
+    .tox-tiered-menu
+      z-index: 6002 !important
+      .tox-menu
+        z-index: 6002 !important
+// .tox-tinymce-aux
+//   z-index: 6001 !important
+
+.input-field-rich
+  .tox-statusbar__branding
+    display: none
+  .tox-tinymce
+    width: auto
+    min-width: 0
+    max-width: 100%
+    flex: 10000 1 0%
+
+.tox-notifications-container,.tox-statusbar__branding
+  display: none
+</style>