free-fe-core-modules 0.0.1

package/field-components/Fields/Select.vue

@@ -0,0 +1,376 @@
+<template>
+  <span :class="(Field && Field.AsCheck) ? 'input-field-select' :
+    'input-field-select simple-field row'">
+    <span
+      v-if="!Field.AsCheck"
+      class="row no-wrap items-center full-width inline-block"
+    >
+      <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 : ''">
+            {{readonlyContent}}
+          </span>
+          <span
+            class="postfix"
+            v-if="Field.Options && Field.Options.Postfix"
+          >{{Field.Options.Postfix}}</span>
+        </span>
+      </span>
+
+      <q-select
+        v-else
+        popup-content-class="input-field-select-control"
+        hide-bottom-space
+        v-model="fieldData"
+        :options="Field.Options || []"
+        option-value="Value"
+        option-label="Label"
+        map-options
+        :label="Field.Placeholder"
+        emit-value
+        v-bind="$attrs"
+        :multiple="Field.Multiple"
+        :readonly="Field.ReadOnly"
+        :ref="`input_field_validator_${Field.Name || Field.Label}`"
+        :use-input="Field && Field.UseInput"
+        :use-chip="Field && Field.UseChip"
+      >
+        <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:option="scope">
+          {{scope.itemProps}}
+          <q-item
+            v-bind="scope.itemProps"
+          >
+            <q-item-section
+              avatar
+              v-if="scope.opt.Icon"
+            >
+              <e-icon :name="scope.opt.Icon" />
+            </q-item-section>
+
+            <q-item-section>
+              <q-item-label>{{ scope.opt.Label }}</q-item-label>
+              <q-tooltip v-if="scope.opt.Tooltip">
+                {{scope.opt.Tooltip}}
+              </q-tooltip>
+              <!-- <q-item-label caption v-if="scope.opt.Description" class="ellipsis">
+                {{ scope.opt.Description }}
+              </q-item-label> -->
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <slot name="warning"></slot>
+    </span>
+    <span
+      v-else
+      class="input-field-select-ascheck row items-start 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="column items-start no-wrap">
+        <div>
+          <slot name="warning"></slot>
+        </div>
+        <div
+          class="checkbox-list"
+          :class="hasError ? 'input-field--error' : ''"
+        >
+
+          <div
+            class="input-field--error-tag"
+            v-if="hasError"
+          >
+            <e-icon name="error"></e-icon>
+          </div>
+
+          <q-checkbox
+            v-for="(option, index) in Field.Options"
+            :key="index"
+            hide-bottom-space
+            :label="option.Label || ''"
+            v-model="checked"
+            :val="option.Value"
+            :disable="Field.ReadOnly"
+            @input="checkChanged(option.Value)"
+          ></q-checkbox>
+        </div>
+      </span>
+    </span>
+  </span>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldSelect',
+  mixins: [mixins.InputFieldMixin],
+  emits:['udpate:fieldData', 'input'],
+  fieldInfo: {
+    Category: 'Simple',
+    Label: '选择',
+    Value: 'Select',
+    Description: '',
+    Extra: [
+      {
+        Type: 'Check',
+        Label: '展开单选',
+        Name: 'AsRadio',
+      },
+      {
+        Type: 'Check',
+        Label: '展开勾选',
+        Name: 'AsCheck',
+      },
+      {
+        Type: 'Check',
+        Label: '可多选',
+        Name: 'Multiple',
+      },
+      {
+        Type: 'String',
+        Name: 'Info.Url',
+        Label: '获取选项的url',
+      },
+      {
+        Type: 'String',
+        Name: 'Info.Params',
+        Label: '获取选项的参数字段',
+        Placeholder: '逗号分割多个参数字段名',
+      },
+      {
+        Type: 'DynamicList',
+        Label: '选项',
+        Name: 'Options',
+        Options: {
+          Columns: [
+            {
+              Label: 'Label',
+              Name: 'Label',
+            },
+            {
+              Label: 'Value',
+              Name: 'Value',
+            },
+            {
+              Label: 'Extra',
+              Name: 'Extra',
+              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,
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  },
+  data() {
+    return {
+      checked: [],
+      dependencies: {},
+    };
+  },
+  computed: {
+    readonlyContent() {
+      if (this.Field && this.Field.Options && Array.isArray(this.Field.Options)) {
+        let valueList;
+        if (this.Field.Multiple) {
+          if (Array.isArray(this.fieldData)) {
+            valueList = this.fieldData;
+          } else if (typeof this.fieldData === 'string') {
+            valueList = this.fieldData.split(',');
+          }
+        } else {
+          valueList = [this.fieldData];
+        }
+
+        const labelList = [];
+        (valueList || []).forEach((vl) => {
+          const theOpt = this.Field.Options.find((opt) => opt.Value === vl);
+          if (theOpt) labelList.push(theOpt.Label || this.fieldData);
+        });
+
+        return labelList.join(',');
+      }
+
+      return this.fieldData;
+    },
+  },
+  watch: {
+    fieldData() {
+      if (this.Field.AsCheck) {
+        if (this.fieldData) {
+          this.checked = this.fieldData.toString().split(',');
+        } else {
+          this.checked = [];
+        }
+      }
+      this.$emit('update:fieldData');
+    },
+    data: {
+      handler() {
+        if (!this.Field || !this.Field.Info || !this.Field.Info.Url || !this.data) return;
+
+        this.Field.Info.Params = this.Field.Info.Params || '';
+        if (this.Field.Info.Params) {
+          const paramList = typeof this.Field.Info.Params === 'string' ? this.Field.Info.Params.split(',') : this.Field.Info.Params;
+
+          for (let i = 0; i < paramList.length; i += 1) {
+            if (Object.nestValue(this.data, paramList[i])
+              !== Object.nestValue(this.dependencies, paramList[i])) {
+              // changed
+              this.apiCall();
+              return;
+            }
+          }
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    selfValidate() {
+      if (this.Field && this.Field.AsCheck && this.Field.Required) {
+        const isValid = this.checked && this.checked.length > 0;
+        this.hasError = !isValid;
+        return isValid;
+      }
+
+      return true;
+    },
+    checkChanged(v) {
+      this.selfValidate();
+
+      if (!this.Field.Multiple) {
+        this.checked = [v];
+      }
+      this.fieldData = this.checked.join(',');
+      this.$emit('input');
+    },
+    apiCall() {
+      if (!this.Field.Info || !this.Field.Info.Url) {
+        return;
+      }
+
+      const paramObj = {};
+      this.Field.Info.Params = this.Field.Info.Params || '';
+      if (this.Field.Info.Params.length > 0) {
+        if (typeof this.Field.Info.Params === 'string') {
+          this.Field.Info.Params = this.Field.Info.Params.split(',');
+        }
+        for (let i = 0; i < this.Field.Info.Params.length; i += 1) {
+          const param = this.Field.Info.Params[i];
+
+          if (param) {
+            Object.setValue(paramObj, param, Object.nestValue(this.data, param));
+            Object.setValue(this.dependencies, param, Object.nestValue(this.data, param));
+          }
+        }
+      }
+
+      this.postRequest(this.Field.Info.Url, paramObj).then((d) => {
+        if (d && d.msg === 'OK') {
+          if (d.data && d.data.options) {
+            this.Field.Options = d.data.options;
+            if (d.data.options.findIndex((o) => o.Value === this.fieldData) < 0) {
+              this.fieldData = undefined;
+            }
+          } else {
+            this.Field.Options = [];
+          }
+        }
+      });
+    },
+  },
+});
+</script>
+
+<style lang="sass">
+.input-field-select
+  .q-field__native
+    white-space: nowrap
+    &>span
+      white-space: nowrap
+      overflow: hidden
+  .checkbox-list
+    position: relative
+    margin-left: 12px
+    &.input-field--error
+      padding-right: 24px
+</style>

package/field-components/Fields/SelectionChain.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="input-field-select-chain row items-start 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 style="margin-left: 12px;">
+      <slot name="warning"></slot>
+      <span
+        v-if="Field && Field.Options && Field.Options.Fields && !Field.ReadOnly"
+        class="row q-gutter-sm no-wrap"
+      >
+        <q-select
+          class="simple-field"
+          hide-bottom-space
+          v-for="(option, index) in Field.Options.Fields"
+          :key="index"
+          v-model="valuesList[index]"
+          :options="optionsList[index]"
+          option-value="Value"
+          option-label="Label"
+          map-options
+          :label="valuesList[index] ? '' : option.Placeholder"
+          emit-value
+          v-bind="$attrs"
+          @input="selectionChanged(index)"
+          :ref="`input_field_validator_${index}`"
+        ></q-select>
+      </span>
+      <span v-if="Field && Field.ReadOnly">
+        <span
+          class="readonly-content"
+          v-for="(option, index) in Field.Options.Fields"
+          :key="index"
+        >
+          <span v-if="valuesList[index] && !option.Hide">
+            {{optionsList[index] ?
+                (optionsList[index].find(o => o.Value === valuesList[index]) || {}).Label : ''}}
+          </span>
+        </span>
+      </span>
+    </span>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import mixins from 'free-fe-mixins';
+
+export default defineComponent({
+  name: 'InputFieldSelectChain',
+  mixins: [mixins.InputFieldMixin],
+  emits:['input'],
+  fieldInfo: {
+    Category: 'Advanced',
+    Label: '选择链',
+    Value: 'SelectionChain',
+    Extra: [
+      {
+        Type: 'String',
+        Label: '数据获取地址',
+        Name: 'Options.Url',
+      },
+      {
+        Type: 'String',
+        Label: '上级数据名',
+        Name: 'Options.ParentName',
+      },
+      {
+        Type: 'DynamicList',
+        Label: '列',
+        Name: 'Options.Fields',
+        Options: {
+          Columns: [
+            {
+              Label: 'Name',
+              Name: 'Name',
+            },
+            {
+              Label: 'Placeholder',
+              Name: 'Placeholder',
+            },
+            {
+              Label: 'Default',
+              Name: 'Default',
+            },
+            {
+              Label: 'Hide',
+              Name: 'Hide',
+              Type: 'Boolean',
+              Default: false,
+            },
+          ],
+        },
+      },
+    ],
+    Description: '',
+  },
+  data() {
+    return {
+      optionsList: [],
+      valuesList: [],
+    };
+  },
+  watch: {
+    Field() {
+      this.initOptions();
+    },
+    fieldData(v) {
+      if(typeof v === 'undefined'){
+        this.valuesList = [];
+      }
+      this.initOptions();
+    },
+  },
+  created() {
+    this.fieldData = this.fieldData || {};
+    this.initOptions();
+  },
+  methods: {
+    initOptions() {
+      if (this.optionsList.length > 0) return;
+
+      if (this.Field && this.Field.Options && this.Field.Options.Fields) {
+        for (let i = 0; i < this.Field.Options.Fields.length; i += 1) {
+          const fld = this.Field.Options.Fields[i];
+
+          if (this.fieldData) this.fieldData[fld.Name] = this.fieldData[fld.Name] || fld.Default || '';
+
+          this.valuesList[i] = this.fieldData[fld.Name];
+          if (i === 0 || this.valuesList[i - 1]) {
+            this.getOptions(i);
+          }
+        }
+      }
+    },
+    getOptions(index) {
+      if (!this.Field || !this.Field.Options || !this.Field.Options.Fields) {
+        return;
+      }
+
+      if (index > 0 && !this.valuesList[index - 1]) return;
+
+      if(this.Field.Options.Url){
+        const obj = {};
+        obj[this.Field.Options.ParentName] = this.Field.Options.Fields[index - 1]
+          ? this.valuesList.slice(0, index).join('.')
+          : '';
+
+        this.getRequest(this.Field.Options.Url, obj).then((d) => {
+          if (d && d.msg === 'OK' && Array.isArray(d.data)) {
+            //this.$set(this.optionsList, index, d.data);
+            this.optionsList[index] = d.data;
+          }
+        });
+      } else if(this.Field.Options.Data){
+        let parent = this.Field.Options.Fields[index - 1]
+          ? this.valuesList.slice(0, index).join('.')
+          : '';
+
+        parent = parent && parent.split('.');
+        parent = parent && parent.pop();
+        parent = parent || '';
+
+        //this.$set(this.optionsList, index, this.Field.Options.Data.filter(dd => dd[this.Field.Options.ParentName] === parent));
+        this.optionsList[index] = this.Field.Options.Data.filter(dd => dd[this.Field.Options.ParentName] === parent);
+      }
+    },
+    selectionChanged(index) {
+      this.fieldData = this.fieldData || {};
+      if (index < this.Field.Options.Fields.length - 1) {
+        for (let i = index + 1; i < this.Field.Options.Fields.length; i += 1) {
+          delete this.valuesList[i];
+          delete this.optionsList[i];
+          this.fieldData[this.Field.Options.Fields[i].Name] = '';
+        }
+        this.getOptions(index + 1);
+      }
+
+      this.fieldData[this.Field.Options.Fields[index].Name] = this.valuesList[
+        index
+      ];
+      this.$emit('input');
+    },
+  },
+});
+</script>

package/field-components/Fields/Separator.vue

@@ -0,0 +1,26 @@
+<template>
+   <q-separator :inset="inset" class="input-field-separator"/>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'InputFieldSeparator',
+  props: {
+    inset: { type: Boolean, default: true },
+  },
+  fieldInfo: {
+    Category: 'Static',
+    Label: '分割线',
+    Value: 'Separator',
+    Description: '',
+  },
+});
+</script>
+
+<style lang="sass" scoped>
+.input-field-separator
+  height: 1px
+  background: $grey-4
+</style>