free-fe-core-modules 0.0.2 → 0.0.4

package/{field-components → free-field}/Fields/FixedList.vue

@@ -3,7 +3,7 @@
     <span
       :class="`field-label ${(Field.Label && Field.Label.trim().length)
         ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
-      v-if="typeof Field.Label !== 'undefined'"
+      v-if="Field.Label !== void 0"
     >
       <q-tooltip v-if="Field.Description" anchor="top right">{{Field.Description}}</q-tooltip>
       {{Field.Label || ''}}
@@ -72,12 +72,11 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { defineComponent, watchEffect, ref, computed } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldFixedList',
-  mixins: [mixins.InputFieldMixin],
   emits:['input'],
   fieldInfo: {
     Category: 'Table',
@@ -203,35 +202,55 @@ export default defineComponent({
       }
     },
   },
-  data() {
-    return {
-      tableData: [],
-    };
+  props: {
+    ...freeFieldProps,
   },
-  computed: {
-    tableTdClass() {
-      return (index) => (((index || 0) % 2) ? 'col-zebra-even' : 'col-zebra-odd');
-    },
-    showCell() {
-      return (p) => {
+  setup(props, { emit }) {
+    if (!props.Field) return {};
+
+    const { fieldData, setFieldData } = useFreeField(props);
+    const tableData = ref(props.Field.Options?.Default || []);
+
+    watchEffect(() => {
+      if (fieldData.value) {
+        const dd = [];
+        for (let i = 0; i < fieldData.value.length; i += 1) {
+          const fd = fieldData.value[i];
+
+          dd[i] = fd;
+          if (fd.rowSize !== void 0) {
+            Object.keys(dd[i]).forEach((ddk) => {
+              if (Number(ddk) && Number(ddk) > fd.rowSize) {
+                delete dd[i][ddk];
+              }
+            });
+          }
+        }
+
+        tableData.value = dd;
+      }
+    })
+
+    const tableTdClass = (index) => (((index || 0) % 2) ? 'col-zebra-even' : 'col-zebra-odd');
+    const showCell = (p) => {
         const colNum = Number(p.col.name);
 
         // eslint-disable-next-line no-restricted-globals
         if (isNaN(colNum)) return true;
 
-        if (typeof p.row.rowSize !== 'undefined') {
+        if (p.row.rowSize !== void 0) {
           return colNum < p.row.rowSize && !!p.row[colNum];
         }
         return !!p.row[colNum];
-      };
-    },
-    columns() {
-      if (!this.Field || !this.Field.Options || !this.Field.Options.Columns) {
+    };
+
+    const columns = computed(() => {
+      if (!props.Field.Options?.Columns) {
         return [];
       }
 
       const cls = [];
-      this.Field.Options.Columns.forEach((c) => {
+      props.Field.Options.Columns.forEach((c) => {
         const newC = { ...c };
         newC.name = c.Name;
         newC.label = c.Label;
@@ -258,46 +277,43 @@ export default defineComponent({
       });
 
       return cls;
-    },
-    columnField() {
-      return (col, withLabel = false, pCol) => {
-        const field = { ...(col.List ? col.List[0] : col) };
-        field.Name = field.Name || field.name || field.field;
+    });
 
-        if (withLabel) {
-          field.Name = `${(pCol && pCol.field) ? `${pCol.field}.` : ''}${field.Name}`;
-        } else {
-          delete field.Label;
-          delete field.label;
-        }
+    const columnField  = (col, withLabel = false, pCol) => {
+      const field = { ...(col.List ? col.List[0] : col) };
+      field.Name = field.Name || field.name || field.field;
 
-        delete field.field;
+      if (withLabel) {
+        field.Name = `${(pCol && pCol.field) ? `${pCol.field}.` : ''}${field.Name}`;
+      } else {
+        delete field.Label;
+        delete field.label;
+      }
 
-        field.ReadOnly = this.Field.ReadOnly || field.ReadOnly;
+      delete field.field;
 
-        return field;
-      };
-    },
-    summaryContent() {
+      field.ReadOnly = props.Field.ReadOnly || field.ReadOnly;
+
+      return field;
+    };
+
+    const summaryContent = computed(() => {
       if (
-        !this.tableData
-        || !this.Field
-        || !this.Field.Options
-        || !this.Field.Options.Summary
-        || !this.Field.Options.Summary.Pattern
+        !tableData.value
+        || !props.Field.Options?.Summary?.Pattern
       ) {
         return '';
       }
-      let summaryText = this.Field.Options.Summary.Pattern;
+      let summaryText = props.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 fdList = this.tableData.filter((fd) => !!fd[sf.Field]);
+      for (let i = 0; i < props.Field.Options.Summary.Fields.length; i += 1) {
+        const sf = props.Field.Options.Summary.Fields[i];
+        const fdList = tableData.value.filter((fd) => !!fd[sf.Field]);
         let vi = 0;
 
         switch (sf.Way) {
           case 'count':
-            vi = this.tableData.filter((fd) => !!fd[sf.Field]).length;
+            vi = tableData.value.filter((fd) => !!fd[sf.Field]).length;
             break;
           case 'sum':
             if (fdList) {
@@ -312,50 +328,29 @@ export default defineComponent({
 
         // round vi
         vi = vi.toFixed(
-          (this.Field
-          && this.Field.Options
-          && this.Field.Options.Summary
-          && this.Field.Options.Summary.Digits)
+          (this.Field.Options?.Summary?.Digits)
           || 2,
         );
 
         summaryText = summaryText.replace(`$\{${i + 1}}`, vi);
       }
       return summaryText;
-    },
-  },
-  watch: {
-    fieldData() {
-      if (this.fieldData) {
-        this.tableData = this.fieldData;
-        const dd = [];
-        for (let i = 0; i < this.fieldData.length; i += 1) {
-          const fd = this.fieldData[i];
+    });
 
-          dd[i] = fd;
-          if (typeof fd.rowSize !== 'undefined') {
-            Object.keys(dd[i]).forEach((ddk) => {
-              if (Number(ddk) && Number(ddk) > fd.rowSize) {
-                delete dd[i][ddk];
-              }
-            });
-          }
-        }
+    const cellChanged = () => {
+      setFieldData(tableData.value, emit);
+    };
 
-        this.tableData = dd;
-      }
-    },
-  },
-  created() {
-    if (!this.fieldData && this.Field.Options) {
-      this.tableData = this.Field.Options.Default || [];
-    }
-  },
-  methods: {
-    cellChanged() {
-      this.fieldData = this.tableData;
-      this.$emit('input');
-    },
+    return {
+      fieldData,
+      tableData,
+      tableTdClass,
+      showCell,
+      columns,
+      columnField,
+      summaryContent,
+      cellChanged,
+    };
   },
 });
 </script>

package/free-field/Fields/InputFieldList.vue

@@ -0,0 +1,324 @@
+<template>
+  <div class="input-field-list">
+    <dynamic-list
+      :Field="localField"
+      :values="values"
+      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="fieldListLength > 1"
+          >
+            <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="editField(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="editorCancelled"
+      @save="saveField"
+      @input="editorInput"
+      @update:field="editingFieldChanged"
+    ></free-field>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, unref, computed, watchEffect } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+import DynamicList from './DynamicList';
+
+const clipBoardStore = {
+  content: '',
+  items: [],
+};
+
+export default defineComponent({
+  name: 'InputFieldList',
+  emits:['save', 'delete', 'cancel','paste:fields', 'batch:fields'],
+  fieldInfo: {
+    Category: 'Advanced',
+    Label: '字段列表',
+    Value: 'FieldList',
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  components: {
+    DynamicList,
+  },
+  setup(props, { emit }) {
+    if (!props.Field) return {};
+
+    const { fieldData, getFieldData, setData } = useFreeField(props);
+
+    const showEditor = ref(false);
+    const editingField = ref({});
+    const changedFields = ref([]);
+    const fieldList  = ref(null);
+
+    const editingFieldField = ref(undefined);
+
+    watchEffect(() => {
+      editingFieldField.value = {
+        Type: 'FieldEditor',
+        Name: '.',
+        show: showEditor.value,
+      };
+    });
+
+    const localField = computed(() => ({
+      Type: 'DynamicList',
+      showTop: true,
+      Name: props.Field.Name || 'Fields',
+      Options: {
+        Columns:
+          props.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,
+              },
+            ],
+      },
+    }));
+
+
+    const addField = () => {
+      let newIndex = 1;
+
+      const fData = props.Field.Name ? fieldData.value : getFieldData('Fields');
+
+      if (fData?.length) {
+        newIndex = fData.map((fd) => fd.Index).sort((a,b) => a.Index-b.Index).filter((fd) => !!fd).pop();
+        newIndex = (newIndex || 0) + 1;
+      }
+
+      editingField.value = {
+        Index: newIndex,
+      };
+
+      showEditor.value = true;
+    };
+    const saveField = () => {
+      if (!editingField.value) return;
+      const theField = { ...editingField.value };
+
+      if (theField.isBatchEditing) {
+        if (fieldList.value.selected.length > 0) {
+          const items = [];
+          for (let i = 0; i < fieldList.value.selected.length; i += 1) {
+            const item = fieldList.value.selected[i];
+
+            if (item && item.id) {
+              items.push(item.id);
+            }
+          }
+
+          const newFld = {};
+          for (let i = 0; i < changedFields.value.length; i += 1) {
+            const fld = changedFields.value[i];
+            if (fld && theField[fld] !== void 0) {
+              newFld[fld] = theField[fld];
+            }
+          }
+          editingField.value = undefined;
+          emit(
+            'batch:fields',
+            { ...newFld, ids: items.join(',') },
+          );
+        }
+      } else {
+        if (typeof theField.auto__index === 'undefined') {
+          // adding new
+          fieldList.value.addRow(theField);
+        }
+
+        editingField.value = undefined;
+
+        emit('save', theField);
+      }
+
+      showEditor.value = false;
+    };
+    const deleteField = (p) => {
+      fieldList.value.deleteRow(p);
+      emit('delete', p.row);
+    };
+    const copy = () => {
+      clipBoardStore.items = [];
+
+      if (
+        !fieldList.value
+        || !fieldList.value.selected
+        || fieldList.value.selected.length <= 0
+      ) {
+        return;
+      }
+
+      const items = [];
+      for (let i = 0; i < fieldList.value.selected.length; i += 1) {
+        const item = fieldList.value.selected[i];
+
+        if (item) {
+          items.push(item.id);
+        }
+        clipBoardStore.items.push({...unref(item)});
+      }
+
+      if (items.length <= 0) return;
+
+      clipBoardStore.content = `EIS_FLOW_FIELD_COPY:${items.join(',')}`;
+    };
+    const paste = () => {
+      // local paste
+      if (clipBoardStore.items && clipBoardStore.items.length > 0) {
+        const fName = props.Field.Name || 'Fields';
+        const fData = props.Field.Name ? fieldData.value : getFieldData('Fields');
+
+        setData(fName, fData.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:')
+      ) {
+        emit(
+          'paste:fields',
+          clipBoardStore.content.substring('EIS_FLOW_FIELD_COPY:'.length),
+          clipBoardStore.items,
+        );
+      }
+
+      fieldList.value.selected = [];
+    };
+    const editingFieldChanged = (f) => {
+      if (!f) return;
+      changedFields.value.push(f);
+    };
+    const batch = () => {
+      if (
+        !fieldList.value
+        || !fieldList.value.selected
+        || fieldList.value.selected.length <= 0
+      ) {
+        return;
+      }
+
+      editingField.value = {
+        isBatchEditing: true,
+      };
+    };
+
+    return {
+      fieldData,
+      editingField,
+      changedFields,
+      editingFieldField,
+      localField,
+      fieldList,
+      fieldListLength: computed(() => fieldList.value?.selected?.length),
+      addField,
+      saveField,
+      deleteField,
+      copy,
+      paste,
+      editingFieldChanged,
+      batch,
+
+      editField: (row) => {
+        editingField.value = row || {};
+        showEditor.value = true;
+      },
+      editorCancelled: () => {
+        editingField.value = undefined;
+        emit('cancel');
+        showEditor.value = false;
+      },
+      editorInput: () => {
+        emit('input');
+      },
+    };
+  },
+});
+</script>

package/{field-components → free-field}/Fields/Labels.vue

@@ -7,7 +7,7 @@
       <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'"
+        v-if="Field.Label !== void 0"
       >
         <q-tooltip
           v-if="Field.Description"
@@ -44,7 +44,7 @@
     >
       <template v-slot:prepend>
         <q-chip
-          v-for="(label, index) in fieldData"
+          v-for="(label, index) in fieldData.value"
           :key="index"
           removable
           :value="!!fieldData[index]"
@@ -57,7 +57,7 @@
         <span
           :class="`field-label ${(Field.Label && Field.Label.trim().length)
             ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
-          v-if="typeof Field.Label !== 'undefined'"
+          v-if="Field.Label !== void 0"
         >
           <q-tooltip
             v-if="Field.Description"
@@ -86,11 +86,13 @@
 
 <script>
 import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldLabels',
-  mixins: [mixins.InputFieldMixin],
+  props:  {
+    ...freeFieldProps,
+  },
   emits:['input'],
   fieldInfo: {
     Category: 'Simple',
@@ -112,15 +114,23 @@ export default defineComponent({
       newLabel: '',
     };
   },
-  created() {
-    // init labels
-    if (this.Field.Type === 'Labels') {
-      this.data[this.Field.Name] = this.data[this.Field.Name] || [];
+  setup(props) {
+    const { fieldData, setFieldData } = useFreeField(props);
+
+    return {
+      fieldData,
+      setFieldData,
     }
   },
+  // 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(',');
+      return (this.fieldData.value || []).filter((f) => !!f).join(',');
     },
   },
   methods: {
@@ -140,23 +150,22 @@ export default defineComponent({
       if (!labelList || labelList.length <= 0) return;
 
       let changed = false;
+      const currentList = this.fieldData.value || [];
 
       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)
+          && (currentList.indexOf(l) < 0)
         ) {
-          this.data[this.Field.Name].push(l);
+          currentList.push(l);
           changed = true;
         }
       }
 
       if (changed) {
-        this.$emit('input');
+        this.setFieldData(currentList);
       }
 
       this.newLabel = '';