free-fe-core-modules 0.0.1

package/field-components/Fields/Number.vue

@@ -0,0 +1,247 @@
+<template>
+  <span
+    class="simple-field input-field-number row items-center no-wrap"
+    v-if="Field"
+  >
+    <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 : ''">{{fieldData}}</span>
+        <span
+          class="postfix"
+          v-if="Field.Options && Field.Options.Postfix"
+        >{{Field.Options.Postfix}}</span>
+      </span>
+    </span>
+    <q-input
+      v-else
+      :readonly="Field.ReadOnly"
+      v-bind="$attrs"
+      hide-bottom-space
+      @input="valueChanged"
+      type="number"
+      v-model.number="localData"
+      :ref="`input_field_validator_${Field.Name || Field.Label}`"
+      :maxlength="maxlength"
+    >
+      <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:prepend
+        v-if="Field.Options && Field.Options.Prefix"
+      >
+        <span class="prefix">{{Field.Options.Prefix}}</span>
+      </template>
+
+      <template
+        v-slot:append
+        v-if="Field.Options && Field.Options.Postfix"
+      >
+        <span class="postfix">{{Field.Options.Postfix}}</span>
+      </template>
+    </q-input>
+    <slot name="warning"></slot>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldNumber',
+  mixins: [mixins.InputFieldMixin],
+  emits:['input'],
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '数字',
+    Value: 'Number',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '前缀',
+        Name: 'Options.Prefix',
+      },
+      {
+        Type: 'String',
+        Label: '后缀',
+        Name: 'Options.Postfix',
+      },
+      {
+        Type: 'Number',
+        Label: '最小值',
+        Name: 'MinValue',
+      },
+      {
+        Type: 'Number',
+        Label: '最大值',
+        Name: 'MaxValue',
+      },
+      {
+        Type: 'Number',
+        Label: '最大长度',
+        Name: 'Options.MaxLength',
+      },
+      {
+        Type: 'DynamicList',
+        Label: '附加字段',
+        Name: 'Options.Extra',
+        Options: {
+          Columns: [
+            {
+              Label: '值范围',
+              Name: 'Value',
+              Type: 'Labels',
+              Options: {
+                Batch: true,
+              },
+            },
+            {
+              Label: '不在其中时',
+              Type: 'Boolean',
+              Name: 'WhenNotIn',
+              Default: false,
+            },
+            {
+              Label: '字段',
+              Name: 'List',
+              Type: 'FieldList',
+              Options: {
+                Columns: [
+                  {
+                    Label: '#',
+                    Name: 'Index',
+                    sortable: true,
+                  },
+                  {
+                    Label: '名称',
+                    Name: 'Name',
+                    style: 'max-width: 200px;',
+                    sortable: true,
+                  },
+                  {
+                    Label: '标题',
+                    Name: 'Label',
+                    style: 'max-width: 200px;',
+                    sortable: true,
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+    Description: '',
+  },
+  data() {
+    return {
+      localData: 0,
+    };
+  },
+  watch: {
+    fieldData() {
+      this.localData = this.fieldData;
+    },
+  },
+  created() {
+    this.localData = this.fieldData;
+  },
+  computed: {
+    maxlength() {
+      if (this.Field && this.Field.Options && this.Field.Options.MaxLength) {
+        return this.Field.Options.MaxLength;
+      }
+
+      return '';
+    },
+  },
+  methods: {
+    valueChanged(d) {
+      if (!d) return;
+
+      if (!Number(d) && Number(d) !== 0) return;
+
+      let v = d;
+      if (typeof this.Field.MinValue !== 'undefined' && Number(this.Field.MinValue) > v) {
+        v = Number(this.Field.MinValue);
+      }
+      if (typeof this.Field.MaxValue !== 'undefined' && Number(this.Field.MaxValue) < v) {
+        v = Number(this.Field.MaxValue);
+      }
+
+      this.localData = v;
+      this.fieldData = v;
+
+      this.$emit('input');
+    },
+    initExtra() {
+      if (
+        this.Field
+        && this.Field.Options
+        && this.Field.Options.Extra
+        && this.Field.Options.Extra.length > 0
+        && this.fieldData
+      ) {
+        const extraList = [];
+        const dataValue = this.fieldData ? this.fieldData.toString() : '';
+        for (let i = 0; i < this.Field.Options.Extra.length; i += 1) {
+          const extra = this.Field.Options.Extra[i];
+
+          if (extra.Value && extra.Value.length > 0) {
+            const hasIndex = extra.Value.indexOf(dataValue);
+            if ((extra.WhenNotIn && hasIndex < 0)
+              || (!extra.WhenNotIn && hasIndex >= 0)) {
+              for (let j = 0; j < extra.List.length; j += 1) {
+                const fld = extra.List[j];
+                // if (extraList.findIndex(f => f.Name === fld.Name && f.Label === fld.Label) < 0) {
+                extraList.push(fld);
+                // }
+              }
+            }
+          }
+        }
+        return extraList;
+      }
+      return [];
+    },
+  },
+});
+</script>

package/field-components/Fields/Password.vue

@@ -0,0 +1,79 @@
+<template>
+  <span class="simple-field input-field-password row items-center no-wrap">
+    <q-input
+      v-model="fieldData"
+      v-bind="$attrs"
+      hide-bottom-space
+      :readonly="Field.ReadOnly"
+      :type="isPwd ? 'password' : 'text'"
+      :autocomplete="(Field.Options && Field.Options.autocomplete) ? '' : 'new-password'"
+      @input="$emit('input')"
+      :ref="`input_field_validator_${Field.Name || Field.Label}`"
+      :maxlength="maxlength"
+    >
+      <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>
+        <e-icon
+          :name="isPwd ? 'visibility_off' : 'visibility'"
+          class="cursor-pointer"
+          @click="isPwd = !isPwd"
+        />
+      </template>
+    </q-input>
+    <slot name="warning"></slot>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldPassword',
+  mixins: [mixins.InputFieldMixin],
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '密码',
+    Value: 'Password',
+    Description: '',
+    Extra: [
+      {
+        Type: 'Boolean',
+        Label: '自动填入',
+        Name: 'Options.autocomplete',
+        Default: 'false',
+      },
+      {
+        Type: 'Number',
+        Label: '最大长度',
+        Name: 'Options.MaxLength',
+      },
+    ],
+  },
+  data() {
+    return {
+      isPwd: true,
+    };
+  },
+  computed: {
+    maxlength() {
+      if (this.Field && this.Field.Options
+        && this.Field.Options.MaxLength) {
+        return this.Field.Options.MaxLength;
+      }
+
+      return '';
+    },
+  },
+});
+</script>

package/field-components/Fields/Permission.vue

@@ -0,0 +1,83 @@
+<template>
+  <span class="input-field-permission">
+    <slot name="warning"></slot>
+    <div class="buttons relative-position" v-if="Field && Field.ShowButtons">
+      <span class="q-ml-lg select-all-btn">
+        <q-btn round icon="check" @click="fieldData = Object.assign({},serviceList)"></q-btn>
+      </span>
+      <span class="q-ml-md clear-btn">
+        <q-btn round icon="clear" @click="fieldData = {}"></q-btn>
+      </span>
+    </div>
+    <div class="roles relative-position row items-center">
+      <q-radio
+        class="role"
+        v-model="currentRole"
+        v-for="(r, idx) in (Field && Field.Roles) || []"
+        :key="idx"
+        :val="r.Name"
+        :label="r.Name || idx"
+        @input="fieldData = r.Permission || {};$emit('input')"/>
+    </div>
+    <permission-editor
+      v-if="Field && !Field.HideEditor"
+      class="permission-editor"
+      :Permission="fieldData"
+      :Service="serviceList"
+      :readonly="Field.ReadOnly"
+      @changed="permissionChanged"
+      :noDataScope="Field.NoDataScope"
+    ></permission-editor>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+import PermissionEditor from './PermissionEditor';
+
+export default defineComponent({
+  name: 'InputFieldPermission',
+  mixins: [mixins.InputFieldMixin],
+  emits:['input'],
+  fieldInfo: {
+    Category: 'Advanced',
+    Label: '权限编辑器',
+    Value: 'Permission',
+    Description: '',
+  },
+  components: { PermissionEditor },
+  data() {
+    return {
+      serviceList: {},
+      currentRole: null
+    };
+  },
+  created() {
+    // get all service list
+    if (this.Field.Type === 'Permission' && !!this.Field.ServiceList) {
+      this.getRequest(this.Field.ServiceList).then((d) => {
+        if (d && d.msg === 'OK') {
+          this.serviceList = d.data;
+        }
+      });
+    }
+  },
+  methods: {
+    permissionChanged(v) {
+      if (!v && this.data) {
+        this.data[this.Field.Name] = {};
+      } else if (v) {
+        this.data[this.Field.Name] = v;
+      }
+
+      this.$emit('input');
+    },
+  },
+});
+</script>
+<style lang="sass" scoped>
+.input-field-permission
+  .buttons
+    height: 48px
+</style>

package/field-components/Fields/PermissionEditor.vue

@@ -0,0 +1,205 @@
+<template>
+  <q-card dense flat v-if="Service" class="input-field-permission-editor">
+    <q-card-section
+      v-if="Service.Title"
+      class="input-field-permission-title q-pa-none no-wrap"
+      :class="!!Service.Scope && Service.Scope.length > 0 && !readonly
+        ? 'with-scope' : 'without-scope'">
+      <q-checkbox v-model="hasThis" :readonly="readonly">
+        <div class="row no-wrap">
+          <span class="step-number-icon-wrapper" v-if="Step">
+            <span class="step-number-icon">{{Step}}</span>
+          </span>
+          <span class="step-title no-wrap" style="white-space: nowrap; overflow: hidden;">
+            {{Service.Title}}
+            <span v-if="Code" class="permission-code">({{Code}})</span>
+          </span>
+        </div>
+      </q-checkbox>
+      <div v-if="!noDataScope && !!Service.Scope && Service.Scope.length > 0 && !readonly"
+          class="data-scope">
+        <free-field
+          v-for="(scope, index) in Service.Scope"
+          :key="index"
+          :Field="{
+            Type: 'Select',
+            Label: scope.Label,
+            Name: `Scope.${scope.Field}`,
+            Options: scope.Options || [],
+          }"
+          :values="data"
+          @input="scopeChanged"
+        />
+      </div>
+    </q-card-section>
+
+    <q-card-section v-if="childrenNormalService.length" class="permission-field-children">
+      <permission-editor
+        v-for="(service, index) in childrenNormalService"
+        :key="index"
+        :Service="Service[service]"
+        :Code="service"
+        :readonly="readonly"
+        :Permission="permissionData(service)"
+        @changed="childUpdated($event, service)"
+        :noDataScope="noDataScope"
+      ></permission-editor>
+    </q-card-section>
+
+    <div v-if="childrenStepService.length" class="permission-field-steps-label">步骤:</div>
+    <q-card-section v-if="childrenStepService.length"
+      horizontal class="permission-field-steps">
+      <permission-editor
+        v-for="(service, index) in childrenStepService"
+        :key="index"
+        :Step="service"
+        :Service="Service[service]"
+        style="border: 1px solid grey;"
+        :Permission="permissionData(service)"
+        :readonly="readonly"
+        @changed="childUpdated($event, service)"
+        :noDataScope="noDataScope"
+      ></permission-editor>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+// import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'PermissionEditor',
+  // mixins: [mixins.InputFieldMixin],
+  emits:['changed'],
+  components: {},
+  props: {
+    Code: { type: String, default: '' },
+    Service: { type: Object },
+    Permission: { type: Object },
+    Step: { type: String, default: '' },
+    readonly: { type: Boolean, default: false },
+    noDataScope: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      data: undefined,
+      hasThis: false,
+      permScope: {},
+    };
+  },
+  watch: {
+    data() {
+      this.hasThis = !!this.data;
+    },
+    hasThis() {
+      if (this.hasThis) {
+        // checked from unchecked
+        this.data = this.data || {};
+
+        this.$emit('changed', this.data);
+      } else {
+        // unchecked from checked
+        this.data = undefined;
+        this.$emit('changed', this.data);
+      }
+    },
+    Permission() {
+      this.data = this.Permission;
+    },
+  },
+  computed: {
+    permissionData() {
+      return (service) => (this.data ? this.data[service] : undefined);
+    },
+    childrenService() {
+      if (!this.Service) return [];
+      const children = [];
+
+      for (let i = 0; i < Object.keys(this.Service).length; i += 1) {
+        const sk = Object.keys(this.Service)[i];
+        const service = this.Service[sk];
+
+        if (
+          typeof service === 'object'
+          && !Array.isArray(service)
+          && ['scope'].indexOf(service) < 0
+        ) {
+          children.push({ Name: sk, Index: this.Service[sk].Index || 0 });
+        }
+      }
+      return children.sort(
+        (a, b) => (a ? a.Index : 0) - (b ? b.Index : 0),
+      ).map((cdn) => cdn.Name);
+    },
+    childrenStepService() {
+      return this.childrenService.filter((s) => Number(s));
+    },
+    childrenNormalService() {
+      return this.childrenService.filter((s) => !Number(s));
+    },
+  },
+  created() {
+    this.data = this.Permission;
+  },
+  methods: {
+    childUpdated(v, f) {
+      if (!v && this.data && this.data[f]) {
+        // this.$set(this.data, f, undefined);
+        this.data[f] = undefined;
+      } else if (v) {
+        this.data = this.data || {};
+        // this.$set(this.data, f, v);
+        this.data[f] = v;
+      }
+
+      this.$emit('changed', this.data);
+    },
+    scopeChanged() {
+      this.$emit('changed', this.data);
+    },
+  },
+});
+</script>
+<style lang="sass" scoped>
+.input-field-permission-editor
+  font-size: 12px
+  padding: 4px
+  .input-field-permission-title
+    &.without-scope
+      height: 35px
+    .data-scope
+      margin-left: 32px
+  .step-number-icon-wrapper
+    border-radius: 50%
+    border: 1px solid $grey-7
+    height: 20px
+    width: 20px
+    display: inline-block
+    vertical-align: top
+    padding: 0
+    margin: 0
+    margin-right: 4px
+    .step-number-icon
+      display: block
+      height: 20px
+      line-height: 20px
+      text-align: center
+  .permission-field
+    &-steps
+      margin-left: 32px
+      &>.input-field-permission-editor
+        min-height: 180px
+        min-width: 128px
+      &-label
+        margin-left: 32px
+    &-children
+      padding: 0
+      margin-left: 16px
+</style>
+
+<style lang="sass">
+.input-field-permission-editor
+  .permission-field-steps.q-card__section
+    flex-wrap: wrap !important
+</style>