free-fe-core-modules 0.0.1

package/field-components/Fields/Labels.vue

@@ -0,0 +1,182 @@
+<template>
+  <span class="input-field-labels">
+    <span
+      v-if="Field.ReadOnly"
+      class="full-width"
+    >
+      <span
+        :class="`field-label field-label-readonly ${(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="readonly-content">
+        <span
+          class="prefix"
+          v-if="Field.Options && Field.Options.Prefix"
+        >
+          {{Field.Options.Prefix}}</span>
+        <span :style="(Field.Info && Field.Info.Style) ? Field.Info.Style : ''">
+          {{reaonlyContent}}</span>
+        <span
+          class="postfix"
+          v-if="Field.Options && Field.Options.Postfix"
+        >{{Field.Options.Postfix}}</span>
+      </span>
+    </span>
+    <q-input
+      v-else
+      :readonly="Field.ReadOnly"
+      hide-bottom-space
+      autogrow
+      v-model="newLabel"
+      @keydown.enter="addLabel"
+      ref="input_field_validator_label"
+    >
+      <template v-slot:prepend>
+        <q-chip
+          v-for="(label, index) in fieldData"
+          :key="index"
+          removable
+          :value="!!fieldData[index]"
+          @remove="fieldData.splice(index,1) && $emit('input')"
+          :color="Field.BgColor || 'primary'"
+          :text-color="Field.Color || 'white'"
+        >{{label}}</q-chip>
+      </template>
+      <template v-slot:before>
+        <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>
+      </template>
+      <template v-slot:append>
+        <q-btn
+          flat
+          round
+          dense
+          icon="add"
+          @click="addLabel"
+        ></q-btn>
+      </template>
+    </q-input>
+    <slot name="warning"></slot>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldLabels',
+  mixins: [mixins.InputFieldMixin],
+  emits:['input'],
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '标签',
+    Value: 'Labels',
+    Description: '',
+    Extra: [
+      {
+        Type: 'Boolean',
+        Label: '允许批量输入',
+        Name: 'Options.Batch',
+        Description:
+          '默认情况下，输入信息中的换行符会被忽略，但如果开户此选项，输入将以换行符分割为多个项，批量保存。',
+      },
+    ],
+  },
+  data() {
+    return {
+      newLabel: '',
+    };
+  },
+  created() {
+    // init labels
+    if (this.Field.Type === 'Labels') {
+      this.data[this.Field.Name] = this.data[this.Field.Name] || [];
+    }
+  },
+  computed: {
+    reaonlyContent() {
+      return (this.fieldData || []).filter((f) => !!f).join(',');
+    },
+  },
+  methods: {
+    addLabel() {
+      if (!this.newLabel) return;
+
+      let labelList = [];
+      if (this.Field && this.Field.Options && this.Field.Options.Batch) {
+        this.newLabel = this.newLabel.replace(/\r\n/g, /\n/);
+        this.newLabel = this.newLabel.replace(/\r/g, /\n/);
+        this.newLabel = this.newLabel.replace(/\n\n/g, /\n/);
+        labelList = this.newLabel.split(/\n/);
+      } else {
+        labelList = [this.newLabel.replace(/(\r\n|\r|\n)/g, '')];
+      }
+
+      if (!labelList || labelList.length <= 0) return;
+
+      let changed = false;
+
+      for (let i = 0; i < labelList.length; i += 1) {
+        const l = labelList[i];
+
+        if (
+          l
+          && (!this.data
+            || !this.data[this.Field.Name]
+            || this.data[this.Field.Name].indexOf(l) < 0)
+        ) {
+          this.data[this.Field.Name].push(l);
+          changed = true;
+        }
+      }
+
+      if (changed) {
+        this.$emit('input');
+      }
+
+      this.newLabel = '';
+      this.$refs.input_field_validator_label.focus();
+    },
+  },
+});
+</script>
+
+<style lang="sass">
+@import '../style.sass'
+
+.input-field-labels
+  .q-field__prepend
+    height: auto
+    flex-wrap: wrap
+  .q-field__control,.q-field__inner,.q-field__before
+    flex-wrap: wrap !important
+  .input-field-warning
+    display: block
+    margin-left: $fieldLabelWidth
+    left: 10px
+</style>

package/field-components/Fields/MixedTable.vue

@@ -0,0 +1,367 @@
+<template>
+  <div class="input-field-mixed-table row">
+    <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-table
+      class="q-ma-xs col"
+      :rows="[{}]"
+      :columns="columns"
+      row-key="auto__index"
+      hide-header
+      :hide-bottom="!summaryContent"
+      separator="cell"
+      :pagination="{rowsPerPage:100000}"
+    >
+      <template
+        v-slot:top
+        v-if="Field && Field.Warning"
+      >
+        <slot name="warning"></slot>
+      </template>
+      <template v-slot:body>
+        <q-tr
+          v-for="(r,index) in Field.Options.Rows"
+          :key="index"
+          :class="((index || 0) % 2) ? 'row-zebra-odd' : 'row-zebra-even'"
+        >
+          <q-td
+            v-for="(rk, rkIndex) in rowCells(r)"
+            :key="rkIndex"
+            :rowspan="r[rk].rowspan"
+            :colspan="r[rk].colspan"
+            class="items-center justify-center"
+          >
+            <span
+              v-if="r[rk].List && r[rk].List.length > 1"
+              class="full-width full-height"
+            >
+              <free-field
+                v-for="(f,fIndex) in r[rk].List"
+                :key="fIndex"
+                :Field="cellField(f)"
+                v-bind="cellField(f)"
+                :values="fieldData"
+                @input="cellChanged(f)"
+                :ref="`input_field_validator_${index}`"
+              ></free-field>
+            </span>
+            <span
+              v-else-if="r[rk].List && r[rk].List[0]"
+              class="full-width full-height"
+            >
+              <free-field
+                :Field="cellField(r[rk].List[0])"
+                :values="fieldData"
+                @input="cellChanged(r[rk].List[0])"
+                v-bind="cellField(r[rk].List[0])"
+                borderless
+                :ref="`input_field_validator_extra_${index}`"
+              ></free-field>
+            </span>
+          </q-td>
+        </q-tr>
+      </template>
+
+      <template
+        v-slot:bottom
+      >
+        <q-tr class="summary-tr">
+          <q-td
+            colspan="100%"
+            class="text-right summary-td"
+          >{{summaryContent}}
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldMixedTable',
+  mixins: [mixins.InputFieldMixin],
+  emits:['input'],
+  fieldInfo: {
+    Category: 'Table',
+    Label: '自由表格',
+    Value: 'MixedTable',
+    Extra: [
+      {
+        Type: 'Number',
+        Name: 'Options.ColumnNumber',
+        Label: '列数',
+      },
+      {
+        Type: 'DynamicList',
+        Label: '定义',
+        Name: 'Options.Rows',
+        Options: {
+          Columns: [{}],
+        },
+      },
+      {
+        Type: 'String',
+        Label: '统计信息模板',
+        Name: 'Options.Summary.Pattern',
+      },
+      {
+        Type: 'Number',
+        Label: '统计信息保留位数',
+        Name: 'Options.Summary.Digits',
+        Default: 2,
+      },
+      {
+        Type: 'DynamicList',
+        Label: '统计信息字段',
+        Name: 'Options.Summary.Fields',
+        Options: {
+          Columns: [
+            {
+              Label: '字段',
+              Name: 'Field',
+            },
+          ],
+        },
+      },
+    ],
+    Description: '',
+    onOptionsChanged: (editor, d, opt) => {
+      if (!editor || !d || !opt || !opt.Extra) return;
+
+      // auto set rows and columns
+      d.Options = d.Options || {};
+
+      const cols = d.Options.ColumnNumber || 0;
+
+      const mTableFieldRows = opt.Extra.find(
+        (e) => e.Name === 'Options.Rows',
+      );
+      if (mTableFieldRows) {
+        const mtfrColumns = [
+          {
+            Label: '',
+            Name: 'auto__index',
+            ReadOnly: true,
+          },
+        ];
+
+        for (let ii = 0; ii < cols; ii += 1) {
+          mtfrColumns.push({
+            Label: `${ii + 1}`,
+            Name: `${ii}`,
+            Type: 'FixedList',
+            List: [
+              {
+                Label: 'rowspan',
+                Name: 'rowspan',
+                Type: 'Number',
+              },
+              {
+                Label: 'colspan',
+                Name: 'colspan',
+                Type: 'Number',
+              },
+              {
+                Name: 'List',
+                Type: 'FieldList',
+                Options: {
+                  Columns: [
+                    {
+                      Label: '类型',
+                      Name: 'Type',
+                      style: 'max-width: 120px;',
+                    },
+                    {
+                      Label: '名称',
+                      Name: 'Name',
+                      style: 'max-width: 200px;',
+                    },
+                    {
+                      Label: '标题',
+                      Name: 'Label',
+                      style: 'max-width: 200px;',
+                    },
+                    {
+                      Label: '默认',
+                      Name: 'Default',
+                      style: 'max-width: 200px;',
+                    },
+                  ],
+                },
+              },
+            ],
+          });
+        }
+
+        //editor.$set(mTableFieldRows.Options, 'Columns', mtfrColumns);
+        mTableFieldRows.Options.Columns = mtfrColumns;
+
+        // table rows and columns correction
+        const rowColNumbers = [];
+        d.Options.Rows = d.Options.Rows || [];
+        for (let i = 0; i < d.Options.Rows.length; i += 1) {
+          d.Options.Rows[i] = d.Options.Rows[i] || {};
+
+          // set data row index
+          d.Options.Rows[i].auto__index = `${i + 1}`;
+
+          // limit rowspan and colspan
+          if (typeof rowColNumbers[i] === 'undefined') {
+            rowColNumbers[i] = d.Options.ColumnNumber;
+          } else {
+            rowColNumbers[i] += d.Options.ColumnNumber;
+          }
+
+          for (let j = 0; j < rowColNumbers[i]; j += 1) {
+            // col span
+            d.Options.Rows[i][j] = d.Options.Rows[i][j] || {};
+            let colSpan = d.Options.Rows[i][j].colspan || 1;
+            colSpan = colSpan || 1;
+            if (colSpan > rowColNumbers[i] - j) {
+              colSpan = rowColNumbers[i] - j;
+              d.Options.Rows[i][j].colspan = rowColNumbers[i] - j;
+            }
+
+            rowColNumbers[i] -= colSpan - 1;
+
+            // row span
+            let rowSpan = d.Options.Rows[i][j].rowspan || 1;
+            rowSpan = rowSpan || 1;
+            if (rowSpan > d.Options.Rows.length - i) {
+              rowSpan = d.Options.Rows.length - i;
+              d.Options.Rows[i][j].rowspan = d.Options.Rows.length - i;
+            }
+            for (let k = 1; k < rowSpan; k += 1) {
+              if (typeof rowColNumbers[i + k] === 'undefined') {
+                rowColNumbers[i + k] = 0;
+              }
+              rowColNumbers[i + k] -= colSpan;
+            }
+          }
+        }
+
+        for (let i = 0; i < d.Options.Rows.length; i += 1) {
+          // this.data.Options.Rows[i].rowSize = rowColNumbers[i];
+          // remove extra cells according to the span
+          const newRow = { rowSize: rowColNumbers[i] };
+          for (let j = 0; j < rowColNumbers[i]; j += 1) {
+            newRow[j] = d.Options.Rows[i][j];
+          }
+          // this.data.Options.Rows[i] = newRow;
+          //editor.$set(d.Options.Rows, i, newRow);
+          d.Options.Rows[i] = newRow;
+        }
+      }
+    },
+  },
+  computed: {
+    rowCells() {
+      return (r) => {
+        if (!r) return [];
+        return Object.keys(r).filter(
+          (rkk) => {
+            if (!rkk) return false;
+
+            // eslint-disable-next-line no-restricted-globals
+            return !isNaN(Number(rkk)) && Number(rkk) < r.rowSize;
+          },
+        );
+      };
+    },
+    cellField() {
+      return (f) => {
+        if (!f) return {};
+        f.ReadOnly = this.Field.ReadOnly || f.ReadOnly;
+
+        return f;
+      };
+    },
+    columns() {
+      if (!this.Field.Options || !this.Field.Options.Rows) return [];
+
+      let cols = 0;
+      for (let i = 0; i < this.Field.Options.Rows.length; i += 1) {
+        const r = this.Field.Options.Rows[i];
+
+        for (let j = 0; j < Object.keys(r).length; j += 1) {
+          const rk = Number(Object.keys(r)[j]);
+          if (rk > cols) cols = rk;
+
+          // sort list
+          if (r[rk] && r[rk].List && r[rk].List.length > 1) {
+            r[rk].List = (r[rk].List || []).sort((a, b) => a.Index - b.Index);
+          }
+        }
+      }
+
+      const ret = [];
+      for (let i = 0; i <= cols; i += 1) {
+        ret.push({});
+      }
+
+      return ret;
+    },
+    summaryContent() {
+      if (
+        !this.fieldData
+        || !this.Field
+        || !this.Field.Options
+        || !this.Field.Options.Summary
+        || !this.Field.Options.Summary.Pattern
+      ) {
+        return '';
+      }
+      let summaryText = this.Field.Options.Summary.Pattern;
+
+      for (let i = 0; i < this.Field.Options.Summary.Fields.length; i += 1) {
+        const sf = this.Field.Options.Summary.Fields[i];
+        const fList = (sf || '').Field.split(',');
+        let vi = 0;
+        for (let j = 0; j < fList.length; j += 1) {
+          const ff = fList[j];
+
+          vi += Number(Object.nestValue(this.fieldData, ff.trim())) || 0;
+        }
+
+        // round vi
+        vi = vi.toFixed(
+          (this.Field
+          && this.Field.Options
+          && this.Field.Options.Summary
+          && this.Field.Options.Summary.Digits)
+          || 2,
+        );
+
+        summaryText = summaryText.replace(`$\{${i + 1}}`, vi);
+      }
+      return summaryText;
+    },
+  },
+  created() {
+    this.fieldData = this.fieldData || {};
+  },
+  methods: {
+    cellChanged(f) {
+      this.$emit('input', f);
+      this.$emit('input');
+    },
+  },
+});
+</script>