free-fe-core-modules 0.0.2 → 0.0.3

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

@@ -12,7 +12,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"
@@ -45,14 +45,14 @@
         v-else
         popup-content-class="input-field-select-control"
         hide-bottom-space
-        v-model="fieldData"
+        :modelValue="fieldData.value"
+        @update:modelValue="setFieldData"
         :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}`"
@@ -63,7 +63,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"
@@ -109,7 +109,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"
@@ -154,12 +154,14 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { ref, computed, defineComponent, getCurrentInstance, watch, watchEffect } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldSelect',
-  mixins: [mixins.InputFieldMixin],
+  props: {
+    ...freeFieldProps,
+  },
   emits:['udpate:fieldData', 'input'],
   fieldInfo: {
     Category: 'Simple',
@@ -238,124 +240,151 @@ export default defineComponent({
       },
     ],
   },
-  data() {
-    return {
-      checked: [],
-      dependencies: {},
-    };
-  },
-  computed: {
-    readonlyContent() {
-      if (this.Field && this.Field.Options && Array.isArray(this.Field.Options)) {
+  setup(props, { emit, expose }) {
+    if (!props.Field) return () => null;
+
+    const { proxy:vm } = getCurrentInstance();
+
+    const { fieldData, getFieldData, setFieldData } = useFreeField(props);
+
+    const hasError = ref(false);
+    const checked = ref([]);
+    const dependencies = ref({});
+    const selectOptions = ref([]);
+
+    watchEffect(() => {
+      if (Array.isArray(props.Field.Options)) {
+        selectOptions.value = props.Field.Options;
+      }
+    });
+
+    const readonlyContent = computed(() => {
+      if (Array.isArray(props.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(',');
+        if (props.Field.Multiple) {
+          if (Array.isArray(fieldData.value)) {
+            valueList = fieldData.value;
+          } else if (typeof fieldData.value === 'string') {
+            valueList = fieldData.value.split(',');
           }
         } else {
-          valueList = [this.fieldData];
+          valueList = [fieldData.value];
         }
 
         const labelList = [];
         (valueList || []).forEach((vl) => {
-          const theOpt = this.Field.Options.find((opt) => opt.Value === vl);
-          if (theOpt) labelList.push(theOpt.Label || this.fieldData);
+          const theOpt = props.Field.Options.find((opt) => opt.Value === vl);
+          if (theOpt) labelList.push(theOpt.Label || fieldData.value);
         });
 
         return labelList.join(',');
       }
 
-      return this.fieldData;
-    },
-  },
-  watch: {
-    fieldData() {
-      if (this.Field.AsCheck) {
-        if (this.fieldData) {
-          this.checked = this.fieldData.toString().split(',');
+      return fieldData.value;
+    });
+
+
+    watch(fieldData, () => {
+      if (props.Field.AsCheck) {
+        if (fieldData.value) {
+          checked.value = `${fieldData.value}`.split(',');
         } else {
-          this.checked = [];
+          checked.value = [];
         }
       }
-      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;
+    });
+
+    const selfValidate = () => {
+      if (props.Field.AsCheck && props.Field.Required) {
+        const isValid = checked.value && checked.value.length > 0;
+        hasError.value = !isValid;
         return isValid;
       }
 
       return true;
-    },
-    checkChanged(v) {
-      this.selfValidate();
+    };
+
+    expose ({
+      selfValidate,
+    })
+
+    const checkChanged = (v) => {
+      selfValidate();
 
-      if (!this.Field.Multiple) {
-        this.checked = [v];
+      if (!props.Field.Multiple) {
+        checked.value = [v];
       }
-      this.fieldData = this.checked.join(',');
-      this.$emit('input');
-    },
-    apiCall() {
-      if (!this.Field.Info || !this.Field.Info.Url) {
+      setFieldData(checked.value.join(','));
+      emit('input');
+    };
+
+    const apiCall = () => {
+      if (!props.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(',');
+      const params = props.Field.Info.Params || '';
+      if (params.length > 0) {
+        if (typeof params === 'string') {
+          params = params.split(',');
         }
-        for (let i = 0; i < this.Field.Info.Params.length; i += 1) {
-          const param = this.Field.Info.Params[i];
+        for (let i = 0; i < params.length; i += 1) {
+          const param = params[i];
 
           if (param) {
-            Object.setValue(paramObj, param, Object.nestValue(this.data, param));
-            Object.setValue(this.dependencies, param, Object.nestValue(this.data, param));
+            paramObj[param] = getFieldData(param);
+            dependencies.value[param] = getFieldData(param);
           }
         }
       }
 
-      this.postRequest(this.Field.Info.Url, paramObj).then((d) => {
+      vm.postRequest(props.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;
+            selectOptions.value = d.data.options;
+            if (d.data.options.findIndex((o) => o.Value === fieldData.value) < 0) {
+              setFieldData(undefined);
+              emit('input');
             }
           } else {
-            this.Field.Options = [];
+            selectOptions.value = [];
           }
         }
       });
-    },
+    };
+
+    watchEffect(() => {
+      if (!props.Field.Info?.Url || !props.values) return;
+
+      const params = props.Field.Info?.Params || '';
+      if (params) {
+        const paramList = typeof params === 'string' ? params.split(',') : params;
+
+        for (let i = 0; i < paramList.length; i += 1) {
+          if (getFieldData(paramList[i]) !== Object.nestValue(dependencies.value, paramList[i])) {
+            // changed
+            apiCall();
+            return;
+          }
+        }
+      }
+    });
+
+    return {
+      fieldData,
+      setFieldData,
+
+      hasError,
+      checked,
+      dependencies,
+
+      selectOptions,
+
+      readonlyContent,
+
+      checkChanged,
+    };
   },
 });
 </script>

package/{field-components → free-field}/Fields/SelectionChain.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"
@@ -33,7 +33,6 @@
           map-options
           :label="valuesList[index] ? '' : option.Placeholder"
           emit-value
-          v-bind="$attrs"
           @input="selectionChanged(index)"
           :ref="`input_field_validator_${index}`"
         ></q-select>
@@ -55,12 +54,14 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { defineComponent, ref, watch, getCurrentInstance, } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldSelectChain',
-  mixins: [mixins.InputFieldMixin],
+  props: {
+    ...freeFieldProps,
+  },
   emits:['input'],
   fieldInfo: {
     Category: 'Advanced',
@@ -77,6 +78,11 @@ export default defineComponent({
         Label: '上级数据名',
         Name: 'Options.ParentName',
       },
+      {
+        Type: 'String',
+        Label: '数据名',
+        Name: 'Options.DataName',
+      },
       {
         Type: 'DynamicList',
         Label: '列',
@@ -107,92 +113,108 @@ export default defineComponent({
     ],
     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;
+  setup(props, { emit }) {
+    if (!props.Field) return () => null;
 
-      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];
+    const { proxy:vm } = getCurrentInstance();
 
-          if (this.fieldData) this.fieldData[fld.Name] = this.fieldData[fld.Name] || fld.Default || '';
+    const { fieldData, setFieldData } = useFreeField(props);
 
-          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) {
+    const optionsList = ref([]);
+    const valuesList = ref([]);
+
+    const getOptions = (index) => {
+      if (!props.Field.Options?.Fields) {
         return;
       }
 
-      if (index > 0 && !this.valuesList[index - 1]) return;
+      if (index > 0 && !valuesList.value[index - 1]) return;
 
-      if(this.Field.Options.Url){
+      if(props.Field.Options?.Url){
         const obj = {};
-        obj[this.Field.Options.ParentName] = this.Field.Options.Fields[index - 1]
-          ? this.valuesList.slice(0, index).join('.')
+        obj[props.Field.Options.ParentName] = props.Field.Options.Fields[index - 1]
+          ? valuesList.value.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;
+        vm.getRequest(props.Field.Options.Url, obj).then((d) => {
+          if (d && d.msg === 'OK') {
+            const dd = props.Field.Options?.DataName ? Object.nestValue(d.data, props.Field.Options.DataName) : d.data;
+
+            if (Array.isArray(dd)) {
+              optionsList.value[index] = dd;
+            }
           }
         });
-      } else if(this.Field.Options.Data){
-        let parent = this.Field.Options.Fields[index - 1]
-          ? this.valuesList.slice(0, index).join('.')
+      } else if(props.Field.Options.Data){
+        let parent = props.Field.Options.Fields[index - 1]
+          ? valuesList.value.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);
+        optionsList.value[index] = props.Field.Options.Data.filter(dd => dd[props.Field.Options.ParentName] === parent);
+      }
+    };
+
+    const initOptions = () => {
+      if (optionsList.value.length > 0) return;
+
+      if (props.Field.Options?.Fields) {
+        for (let i = 0; i < props.Field.Options.Fields.length; i += 1) {
+          const fld = props.Field.Options.Fields[i];
+
+          if (fieldData.value) {
+            fieldData.value[fld.Name] = fieldData.value[fld.Name] || fld.Default || '';
+          }
+
+          valuesList.value[i] = fieldData.value && fieldData.value[fld.Name];
+          if (i === 0 || valuesList.value[i - 1]) {
+            getOptions(i);
+          }
+        }
       }
-    },
-    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] = '';
+    };
+
+    const selectionChanged = (index) => {
+      setFieldData(fieldData.value || {});
+
+      if (index < props.Field.Options?.Fields?.length - 1) {
+        for (let i = index + 1; i < props.Field.Options.Fields.length; i += 1) {
+          delete valuesList.value[i];
+          delete optionsList.value[i];
+          fieldData.value[props.Field.Options.Fields[i].Name] = '';
         }
-        this.getOptions(index + 1);
+        getOptions(index + 1);
       }
 
-      this.fieldData[this.Field.Options.Fields[index].Name] = this.valuesList[
+      fieldData.value[props.Field.Options.Fields[index].Name] = valuesList.value[
         index
       ];
-      this.$emit('input');
-    },
+      emit('input');
+    };
+
+    watch(fieldData, () => {
+      if(typeof fieldData.value === 'undefined'){
+        valuesList.value = [];
+      }
+      initOptions();
+    });
+
+    return {
+      fieldData,
+      setFieldData,
+      initOptions,
+
+      optionsList,
+      valuesList,
+
+      selectionChanged,
+    };
+  },
+  created() {
+    this.initOptions();
   },
 });
 </script>

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

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

package/{field-components → free-field}/Fields/SingleList.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"
@@ -34,12 +34,11 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { defineComponent, ref, computed } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 
 export default defineComponent({
   name: 'InputFieldSingleList',
-  mixins: [mixins.InputFieldMixin],
   fieldInfo: {
     Category: 'Table',
     Label: '单列表',
@@ -71,27 +70,29 @@ export default defineComponent({
     ],
     Description: '',
   },
-  data() {
-    return {
-      tableData: [],
-    };
+  props: {
+    ...freeFieldProps,
   },
-  computed: {
-    localData() {
+  setup(props) {
+    if (!props.Field) return () => null;
+
+    const { fieldData } = useFreeField(props);
+
+    const localData = computed(() => {
       let list = [];
-      if (typeof this.fieldData !== 'undefined' && this.fieldData !== '') {
-        if (Array.isArray(this.fieldData)) {
-          list = this.fieldData;
-        } else if (typeof this.fieldData === 'string') {
-          const newStr = this.fieldData.replace(/，/g, ',');
+      if (fieldData.value !== void 0 && fieldData.value !== '') {
+        if (Array.isArray(fieldData.value)) {
+          list = fieldData.value;
+        } else if (typeof fieldData.value === 'string') {
+          const newStr = fieldData.value.replace(/，/g, ',');
           list = newStr.split(',');
         } else {
-          list = [this.fieldData];
+          list = [fieldData.value];
         }
       }
 
-      if (this.Field.Options) {
-        if (this.Field.Options.NoSpace) {
+      if (props.Field.Options) {
+        if (props.Field.Options.NoSpace) {
           for (let i = 0; i < list.length; i += 1) {
             const l = list[i];
 
@@ -101,11 +102,11 @@ export default defineComponent({
           }
         }
 
-        if (this.Field.Options.NoEmpty) {
+        if (props.Field.Options.NoEmpty) {
           list = list.filter((l) => !!l);
         }
 
-        if (this.Field.Options.NoDup) {
+        if (props.Field.Options.NoDup) {
           const newList = [];
           for (let i = 0; i < list.length; i += 1) {
             const l = list[i];
@@ -119,7 +120,12 @@ export default defineComponent({
       }
 
       return list;
-    },
+    });
+
+
+    return {
+      localData,
+    };
   },
 });
 </script>

package/free-field/Fields/Static.js

@@ -0,0 +1,27 @@
+import { defineComponent, h } from 'vue';
+import { useFreeField, freeFieldProps } from '../composible/useFreeField';
+
+export default defineComponent({
+  name: 'InputFieldStatic',
+  fieldInfo: {
+    Category: 'Static',
+    Label: '固定内容',
+    Value: 'Static',
+    Description: '',
+  },
+  props: {
+    ...freeFieldProps,
+  },
+  setup(props, { slots }){
+    if (!props.Field) return {};
+
+    const { fieldData } = useFreeField(props);
+
+    return () => h('div', {
+      class: 'input-field-static',
+    }, [
+      slots.warning && slots.warning(),
+      fieldData.value,
+    ]);
+  },
+});