free-fe-core-modules 0.0.1 → 0.0.3

package/field-components/Fields/FieldEditor.vue

@@ -1,379 +0,0 @@
-<template>
-  <q-dialog
-    v-model="Field.show"
-    persistent
-    maximized
-    class="q-ma-xl"
-  >
-
-    <q-card
-      class="input-field-editor q-ma-xl"
-      style="height: calc(100% - 96px)"
-    >
-      <q-layout
-        view="lHh Lpr lFf"
-        container
-      >
-        <div>
-          <slot name="warning"></slot>
-        </div>
-        <q-footer>
-          <q-toolbar>
-            <q-space></q-space>
-            <q-btn
-              icon="cancel"
-              class="cancel-btn"
-              :label="$t('cancelButtonText')"
-              @click="$emit('cancel')"
-            />
-            <q-btn
-              icon="save"
-              class="save-btn"
-              :label="$t('saveButtonText')"
-              @click="$emit('save')"
-            />
-          </q-toolbar>
-        </q-footer>
-
-        <q-page-container>
-          <q-page padding>
-            <span
-              v-for="(field, fIndex) in Fields || []"
-              :key="fIndex"
-            >
-              <free-field
-                :values="data"
-                :Field="field"
-                @input="fieldChanged"
-                @updateOptions="fieldOptionsChanged"
-              ></free-field>
-            </span>
-          </q-page>
-        </q-page-container>
-      </q-layout>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
-import FieldTypeOptions from './components/FieldTypeOptions';
-
-export default defineComponent({
-  name: 'FieldEditor',
-  mixins: [mixins.InputFieldMixin],
-  emits: ['update:field', 'save', 'cancel'],
-  fieldInfo: {
-    Category: 'Advanced',
-    Label: '字段编辑器',
-    Value: 'FieldEditor',
-    Description: '',
-  },
-  data() {
-    return {
-      visible: true,
-      Fields: [
-        {
-          Label: '基本信息',
-          Type: 'Category',
-        },
-        {
-          Type: 'Number',
-          Label: '序号',
-          Name: 'Index',
-        },
-        {
-          Type: 'String',
-          Label: '名称',
-          Name: 'Name',
-        },
-        {
-          Type: 'String',
-          Label: '标签',
-          Name: 'Label',
-        },
-        {
-          Type: 'String',
-          Label: '占位内容',
-          Name: 'Placeholder',
-        },
-        {
-          Type: 'String',
-          Label: '默认值',
-          Name: 'Default',
-        },
-        {
-          Type: 'Check',
-          Label: '必须',
-          Name: 'Required',
-        },
-        {
-          Type: 'Check',
-          Label: '只读',
-          Name: 'ReadOnly',
-        },
-        {
-          Type: 'Select',
-          Label: '类型',
-          Name: 'Type',
-          Component: FieldTypeOptions,
-          Options: [],
-        },
-        {
-          Type: 'Text',
-          Label: '描述',
-          Name: 'Description',
-        },
-        {
-          Label: '高级设置',
-          Type: 'Category',
-        },
-        {
-          Type: 'Boolean',
-          Label: '保持回传',
-          Name: 'Info.KeepChanged',
-          Description: '保存时，不管用户有没有修改此字段，都当作已经修改',
-        },
-        {
-          Label: '数据校验规则',
-          Name: 'Rules',
-          Type: 'Select',
-          Placeholder: '请选择',
-          Multiple: true,
-          Options: Object.keys(this.ctx.validators).map((vlk) => {
-            const name = this.$t(`${vlk}Name`);
-            const desc = this.$t(`${vlk}Description`);
-            return {
-              Label: name === `${vlk}Name` ? vlk : name,
-              Value: vlk,
-              Tooltip: desc === `${vlk}Description` ? '' : desc,
-            };
-          }),
-        },
-        {
-          Label: '唯一',
-          Name: 'Info.Unique',
-          Type: 'Boolean',
-          Default: false,
-        },
-        {
-          Label: '样式类',
-          Name: 'Info.Classes',
-          Type: 'String',
-          Placeholder: '请填写附加样式类名，多个用空格分割。',
-        },
-        {
-          Label: '样式',
-          Name: 'Info.Style',
-          Type: 'Text',
-        },
-        {
-          Label: '不存在或为空时显示占位符',
-          Name: 'Info.ShowNaN',
-          Type: 'Check',
-        },
-        {
-          Type: 'Text',
-          Name: 'Info.ShowWhen',
-          Label: '当条件满足时显示',
-          Placeholder: '参数名为data的条件语句',
-          Warning: '请确保填写正确！！！',
-        },
-        {
-          Type: 'Boolean',
-          Label: '隐藏',
-          Name: 'Hidden',
-          Extra: [
-            {
-              Type: 'Check',
-              Label: '导出时包含',
-              Description: '默认情况下隐藏字段不会被导出，但可勾选此项导出此隐藏字段',
-              Name: 'Info.IncludedInExport',
-              Default: false,
-            },
-            {
-              Type: 'Check',
-              Label: '只当数据不存在时隐藏',
-              Name: 'Info.HideWhenUndefined',
-              Default: false,
-            },
-            {
-              Type: 'Check',
-              Label: '空对象或数组将被认为数据不存在',
-              Name: 'Info.IncludeEmptyObject',
-              Default: false,
-            },
-            {
-              Type: 'String',
-              Label: '哪些字段不存在时隐藏',
-              Name: 'Info.HideWhenUndefinedField',
-              Placeholder: '多个字段名用逗号分割',
-              Description: '默认为当前字段所关联的数据',
-            },
-          ],
-        },
-        {
-          Type: 'String',
-          Label: '警示信息',
-          Name: 'Warning',
-        },
-        {
-          Type: 'DynamicList',
-          Label: '提示信息',
-          Name: 'Tips',
-          Options: {
-            Columns: [
-              {
-                Label: '信息设置',
-                Name: 'Text',
-                Type: 'Text',
-                style: 'min-width: 300px',
-              },
-              {
-                Label: '超链接',
-                Name: 'Links',
-                Type: 'DynamicList',
-                Options: {
-                  Columns: [
-                    {
-                      Label: '显示的文字',
-                      Name: 'Text',
-                    },
-                    {
-                      Label: '超链接',
-                      Name: 'Link',
-                      style: 'min-width: 260px',
-                    },
-                  ],
-                },
-              },
-            ],
-          },
-        },
-        {
-          Type: 'Select',
-          Label: '引用类型',
-          Name: 'ReferType',
-          Default: '',
-          Options: [
-            {
-              Label: '无',
-              Value: '',
-            },
-            // {
-            //   Label: '固定引用',
-            //   Value: 'fixed',
-            //   Extra: [
-            //     {
-            //       Type: 'String',
-            //       Label: '引用内容',
-            //       Name: 'ReferTo',
-            //     },
-            //   ],
-            // },
-            {
-              Label: '字典引用',
-              Value: 'dict',
-              Extra: [
-                {
-                  Type: 'String',
-                  Label: '引用内容',
-                  Name: 'ReferTo',
-                },
-              ],
-            },
-            {
-              Label: '数据库引用',
-              Value: 'db',
-              Extra: [
-                {
-                  Type: 'String',
-                  Label: '引用内容',
-                  Name: 'ReferTo',
-                },
-                {
-                  Type: 'Check',
-                  Label: '动态内容',
-                  Name: 'Info.Dynamic',
-                  Description: '不保存，每次都重新计算获取',
-                },
-              ],
-            },
-          ],
-        },
-        {
-          Label: '外键',
-          Name: 'Info.Refer',
-          Type: 'String',
-        },
-        // {
-        //   Type: 'Text',
-        //   Label: '结构定义',
-        //   Name: 'Schema',
-        //
-        // },
-        // {
-        //   Type: 'Text',
-        //   Label: '自定义选项',
-        //   Name: 'Options',
-        //
-        // },
-        {
-          Type: 'Category',
-          Label: '所需权限',
-        },
-        {
-          Type: 'Permission',
-          Label: '需要的权限',
-          Name: 'Permission',
-          ServiceList: '_service_list',
-        },
-      ],
-    };
-  },
-  watch: {
-    // eslint-disable-next-line func-names
-    'Field.show': function (v) {
-      if (v) {
-        this.fieldChanged(this.Fields.find((f) => f.Name === 'Type'));
-      }
-    },
-  },
-  methods: {
-    fieldOptionsChanged(field) {
-      if (!field || !field.Name || !field.Options) return;
-
-      const fListField = this.Fields.find((f) => f.Name === field.Name);
-      if (fListField) {
-        fListField.Options = field.Options;
-      }
-    },
-    fieldChanged(field) {
-      if (!field || !field.Name) return;
-
-      if (field.Name === 'Type' || field.Name.startsWith('Options.')) {
-        // when the field is fixed list, we have to set columns for the default value list
-        this.data.Options = this.data.Options || {};
-        const fListField = this.Fields.find((f) => f.Name === 'Type');
-        if (fListField) {
-          const theOpt = fListField.Options.find((op) => op.Value === this.data.Type);
-          if (theOpt && theOpt.onOptionsChanged) {
-            theOpt.onOptionsChanged(this, this.data, theOpt);
-          }
-        }
-      }
-
-      this.$emit('update:field', field.Name);
-    },
-  },
-});
-</script>
-
-<style lang="sass" scoped>
-.q-dialog .fullscreen
-  background: white
-
-.cancel-btn
-  margin-right: 12px
-</style>

package/field-components/Fields/InputFieldList.vue

@@ -1,299 +0,0 @@
-<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>