表单设计器属性配置支持autocomplete自动匹配

app_web/src/components/avue-component/avue-component.vue

 <template>
-    <div class="avue-component">
-        <div v-if="type === 'DynamicForm'">
-            <avue-form-design class="app-form-design" style="height: 86vh;" :options="formOpt" @change="handleChange"></avue-form-design>
-        </div>
-        <div v-else-if="type === 'DynamicSubForm'">
-            <avue-form-design class="app-form-design" style="height: 86vh;" :options="formOpt" @change="handleChange"></avue-form-design>
-        </div>
-        <div v-else-if="type === 'DynamicGrid'">
-            <app-avue-crud :colOptions="tableOpt" @change="handleChange"></app-avue-crud>
-        </div>
+  <div class="avue-component">
+    <div v-if="type === 'DynamicForm'">
+      <avue-form-design
+        :widconfigProps="widconfigProps"
+        class="app-form-design"
+        style="height: 86vh;"
+        :options="formOpt"
+        @change="handleChange"
+      ></avue-form-design>
     </div>
+    <div v-else-if="type === 'DynamicSubForm'">
+      <avue-form-design
+        :widconfigProps="widconfigProps"
+        class="app-form-design"
+        style="height: 86vh;"
+        :options="formOpt"
+        @change="handleChange"
+      ></avue-form-design>
+    </div>
+    <div v-else-if="type === 'DynamicGrid'">
+      <app-avue-crud :colOptions="tableOpt" @change="handleChange"></app-avue-crud>
+    </div>
+  </div>
 </template>
 <script lang="ts">
-import {Vue,Component,Prop,Model,Emit,Watch,} from "vue-property-decorator";
+import {
+  Vue,
+  Component,
+  Prop,
+  Model,
+  Emit,
+  Watch,
+} from "vue-property-decorator";
 import { Subject, Subscription } from "rxjs";
 import { component } from "vue/types/umd";
-import './avue-component.less';
+import "./avue-component.less";
 
 @Component({})
 export default class AvueComponent extends Vue {
+  @Prop() public type?: string;
 
-    @Prop() public type?: string;
+  @Prop() public options?: any;
 
-    @Prop() public options?: any;
+  @Prop() public formState!: Subject<any>;
 
-    @Prop() public formState!: Subject<any>;
+  @Prop() public name: any;
 
-    @Prop() public name: any;
+  @Prop() public systemid: any;
 
-    public formOpt: any = {};
+  @Prop() public entityname: any;
 
-    public tableOpt: any = [];
+  public widconfigProps: Array<any> = [];
 
-    public handleChange(val: any){
-        let value: any;
-        if((typeof val) === 'string'){
-           value = val;
-        }else{
-            value = JSON.stringify(val);
-        }
-        let params: any = {name:this.name,value:value};
-        this.$emit('formitemvaluechange',params);
+  public formOpt: any = {};
+
+  public tableOpt: any = [];
+
+  public handleChange(val: any) {
+    let value: any;
+    if (typeof val === "string") {
+      value = val;
+    } else {
+      value = JSON.stringify(val);
     }
+    let params: any = { name: this.name, value: value };
+    this.$emit("formitemvaluechange", params);
+  }
 
-    /**
-     * 订阅对象
-     *
-     * @protected
-     * @type {(Subscription | undefined)}
-     * @memberof AvueComponent
-     */
-    protected formStateEvent: Subscription | undefined;
+  /**
+   * 订阅对象
+   *
+   * @protected
+   * @type {(Subscription | undefined)}
+   * @memberof AvueComponent
+   */
+  protected formStateEvent: Subscription | undefined;
 
-    public created(){
-        let that: any = this;
-        if (this.formState) {
-        this.formStateEvent = this.formState.subscribe(({ type, data }) => {
-            if (Object.is("load", type)) that.load();
-        });
-        }
+  public created() {
+    let that: any = this;
+    if (this.formState) {
+      this.formStateEvent = this.formState.subscribe(({ type, data }) => {
+        if (Object.is("load", type)) that.load();
+      });
     }
+  }
 
-    public load(){
-        if(this.options){
-            let opt: any = this.options.replace(/[\n\r]/g,"");
-            if(this.type)
-                if(this.type.indexOf('Form') > 0){
-                    this.formOpt = JSON.parse(opt);
-                }else{
-                    this.tableOpt = JSON.parse(opt);
-                }
+  public load() {
+    let that: any = this;
+    let url: string = "lite/Sample/entitys/CITY";
+    if (this.systemid && this.entityname) {
+      url = `lite/${this.systemid}/entitys/${this.entityname}`;
+    }
+    this.$http.get(url).then((response: any) => {
+      if (response && response.data) {
+        let arr: Array<any> = [];
+        let data: any = response.data;
+        data.fields.forEach((field: any) => {
+          arr.push({ value: field.codeName.toLowerCase(), label: field.showName, comment: field.comment });
+        });
+        that.widconfigProps = arr;
+        that.$forceUpdate();
+      }
+    });
+    if (this.options) {
+      let opt: any = this.options.replace(/[\n\r]/g, "");
+      if (this.type)
+        if (this.type.indexOf("Form") > 0) {
+          this.formOpt = JSON.parse(opt);
+        } else {
+          this.tableOpt = JSON.parse(opt);
         }
     }
-
+  }
 }
 </script>
\ No newline at end of file

app_web/src/widgets/dst-component/main-form/main-form.vue

@@ -6,8 +6,8 @@
 <i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :uiService="appUIService" :data="transformData(data)" :manageContainerStatus="detailsModel.group1.manageContainerStatus"  :isManageContainer="detailsModel.group1.isManageContainer" @managecontainerclick="manageContainerClick('group1')" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.dstcomponent.main_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <row>
-        <i-col v-show="detailsModel.cname.visible" :style="{}"  :sm="{ span: 12, offset: 0 }" :md="{ span: 12, offset: 0 }" :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
-    <app-form-item name='cname' :itemRules="this.rules().cname" class='' :caption="$t('entities.dstcomponent.main_form.details.cname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.cname.error" :isEmptyCaption="false" labelPos="LEFT">
+        <i-col v-show="detailsModel.cname.visible" :style="{}"  :sm="{ span: 6, offset: 0 }" :md="{ span: 6, offset: 0 }" :lg="{ span: 6, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+    <app-form-item name='cname' :itemRules="this.rules().cname" class='' :caption="$t('entities.dstcomponent.main_form.details.cname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.cname.error" :isEmptyCaption="false" labelPos="TOP">
     <input-box 
     v-model="data.cname"  
     @enter="onEnter($event)"  
@@ -20,8 +20,8 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.codename.visible" :style="{}"  :sm="{ span: 12, offset: 0 }" :md="{ span: 12, offset: 0 }" :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
-    <app-form-item name='codename' :itemRules="this.rules().codename" class='' :caption="$t('entities.dstcomponent.main_form.details.codename')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.codename.error" :isEmptyCaption="false" labelPos="LEFT">
+<i-col v-show="detailsModel.codename.visible" :style="{}"  :sm="{ span: 6, offset: 0 }" :md="{ span: 6, offset: 0 }" :lg="{ span: 6, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+    <app-form-item name='codename' :itemRules="this.rules().codename" class='' :caption="$t('entities.dstcomponent.main_form.details.codename')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.codename.error" :isEmptyCaption="false" labelPos="TOP">
     <input-box 
     v-model="data.codename"  
     @enter="onEnter($event)"  
@@ -34,8 +34,8 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ctype.visible" :style="{}"  :sm="{ span: 12, offset: 0 }" :md="{ span: 12, offset: 0 }" :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
-    <app-form-item name='ctype' :itemRules="this.rules().ctype" class='' :caption="$t('entities.dstcomponent.main_form.details.ctype')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ctype.error" :isEmptyCaption="false" labelPos="LEFT">
+<i-col v-show="detailsModel.ctype.visible" :style="{}"  :sm="{ span: 6, offset: 0 }" :md="{ span: 6, offset: 0 }" :lg="{ span: 6, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+    <app-form-item name='ctype' :itemRules="this.rules().ctype" class='' :caption="$t('entities.dstcomponent.main_form.details.ctype')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ctype.error" :isEmptyCaption="false" labelPos="TOP">
     
  <dropdown-list 
     v-model="data.ctype" 
@@ -54,8 +54,8 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.entityname.visible" :style="{}"  :sm="{ span: 12, offset: 0 }" :md="{ span: 12, offset: 0 }" :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
-    <app-form-item name='entityname' :itemRules="this.rules().entityname" class='' :caption="$t('entities.dstcomponent.main_form.details.entityname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.entityname.error" :isEmptyCaption="false" labelPos="LEFT">
+<i-col v-show="detailsModel.entityname.visible" :style="{}"  :sm="{ span: 6, offset: 0 }" :md="{ span: 6, offset: 0 }" :lg="{ span: 6, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+    <app-form-item name='entityname' :itemRules="this.rules().entityname" class='' :caption="$t('entities.dstcomponent.main_form.details.entityname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.entityname.error" :isEmptyCaption="false" labelPos="TOP">
     
 <app-picker 
   :formState="formState"
@@ -82,8 +82,9 @@
 
 </i-col>
 <i-col v-show="detailsModel.cfg.visible" :style="{}"  :sm="{ span: 24, offset: 0 }" :md="{ span: 24, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
-    <app-form-item name='cfg' :itemRules="this.rules().cfg" class='' :caption="$t('entities.dstcomponent.main_form.details.cfg')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.cfg.error" :isEmptyCaption="false" labelPos="LEFT">
-        <avue-component ref="avueCompont" @formitemvaluechange="onFormItemValueChange" name='cfg' :formState="formState" :options="data.cfg" :type="data.ctype"></avue-component>
+    <app-form-item name='cfg' :itemRules="this.rules().cfg" class='' :caption="$t('entities.dstcomponent.main_form.details.cfg')" uiStyle="DEFAULT" :labelWidth="0" :isShowCaption="false" :error="detailsModel.cfg.error" :isEmptyCaption="false" labelPos="NONE">
+                <avue-component :entityname="data.entityname" :systemid="data.systemid" ref="avueCompont" @formitemvaluechange="onFormItemValueChange" name='cfg' :formState="formState" :options="data.cfg" :type="data.ctype"></avue-component>
+
 </app-form-item>
 
 </i-col>