代码上传

src/demo/customForm copy.vue → src/demo/customForm copy 2.vue

@@ -15,34 +15,13 @@
               :label="i.label"
               :rules="[{ required: i.required == 1 ? true:false, message: `${i.label}不能为空`}]"
             >
-              <a-input v-if="i.type=='input'" v-model:value="formState[i.key]" :placeholder="i.label"></a-input>
-              <a-select v-if="i.type=='select'" v-model:value="formState[i.key]" :defaultActiveFirstOption="true" :options="i.mapping" :placeholder="i.label" @dropdownVisibleChange="onVisibleChange(i)" :getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}">
-              </a-select>
-              <a-date-picker style="width:100%" v-if="i.type == 'datepicker'" v-model:value="formState[i.key]" value-format="YYYY-MM-DD" :placeholder="i.label"/>
-              <a-range-picker style="width:100%" v-if="i.type == 'datepickerRange'" v-model:value="formState[i.key]" value-format="YYYY-MM-DD" @change="dateRangeChange(formState[i.key],i)"/>
-              <a-tree-select
-                v-if="i.type == 'treeselect'"
-                v-model:value="formState[i.key]"
-                style="width: 100%"
-                :tree-data="i.dataSource"
-                allow-clear
-                placeholder="请选择"
-                :fieldNames="{children:'subdep', label:'itemclassname', value: 'itemclassid' }"
-                tree-node-filter-prop="label"
-                @change="onTest"
-              />
-              <a-input v-if="i.type=='dialogselect'" v-model:value="formState[i.key]" placeholder="选择企业信息">
-                <template #addonAfter>
-                  <selectEnterprise v-if="i.dialogname == 'selectEnterprise'" :select_labelfield="i.select_labelfield" :select_valuefield="i.select_valuefield" ref="enterprise" :autoComplete="true" :param="i.request" @onSelect="onSelect"></selectEnterprise>
-                </template>
-              </a-input>
-              <a-textarea
-                v-if="i.type == 'textarea'"
-                v-model:value="formState[i.key]"
-                :rows="4"
-                placeholder="输入备注信息"
-              />
-              
+            <component 
+              :is="comp[i.type]" 
+              v-model="formState[i.key]" 
+              :placeholder="i.label" 
+              :options="i.mapping" 
+              @dropdownVisibleChange="onVisibleChange(i)">
+            </component>
             </a-form-item>
           </a-col>
         </a-row>
@@ -60,18 +39,28 @@ import { defineComponent,defineExpose, reactive, ref,defineEmits,onMounted,watch
 
 import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
 import { useRouter,onBeforeRouteLeave } from "vue-router";
+import { Textarea } from 'ant-design-vue';
+import { Select } from 'ant-design-vue';
+import { Input } from 'ant-design-vue';
 
 const router = useRouter()
 const props = defineProps({
   layoutData:Array
 })
-
+const comp = {
+  Select:Select,
+  Input:Input,
+  Textarea:Textarea,
+  DialogSelect:selectEnterprise
+}
 const expand = ref(false);
 const formRef = ref();
 let formState = ref({});
 
 const emit = defineEmits(['onSubmit'])
-
+const getComponent = (i)=>{
+  console.log(i)
+}
 const onSubmit = async (values) => {
   try {
     const values = await formRef.value.validateFields();

src/demo/customForm.vue

@@ -15,7 +15,34 @@
               :label="i.label"
               :rules="[{ required: i.required == 1 ? true:false, message: `${i.label}不能为空`}]"
             >
-              <component :is="i.type"></component>
+              <a-input v-if="i.type=='Input'" v-model:value="formState[i.key]" :placeholder="i.label"></a-input>
+              <a-select v-else-if="i.type=='Select'" v-model:value="formState[i.key]" :defaultActiveFirstOption="true" :options="i.mapping" :placeholder="i.label" @dropdownVisibleChange="onVisibleChange(i)" :getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}">
+              </a-select>
+              <a-date-picker style="width:100%" v-else-if="i.type == 'datepicker'" v-model:value="formState[i.key]" value-format="YYYY-MM-DD" :placeholder="i.label"/>
+              <a-range-picker style="width:100%" v-else-if="i.type == 'datepickerRange'" v-model:value="formState[i.key]" value-format="YYYY-MM-DD" @change="dateRangeChange(formState[i.key],i)"/>
+              <a-tree-select
+                v-else-if="i.type == 'treeselect'"
+                v-model:value="formState[i.key]"
+                style="width: 100%"
+                :tree-data="i.dataSource"
+                allow-clear
+                placeholder="请选择"
+                :fieldNames="{children:'subdep', label:'itemclassname', value: 'itemclassid' }"
+                tree-node-filter-prop="label"
+                @change="onTest"
+              />
+              <a-input v-else-if="i.type=='DialogSelect'" v-model:value="formState[i.key]" placeholder="选择企业信息">
+                <template #addonAfter>
+                  <selectEnterprise v-if="i.dialogname == 'selectEnterprise'" :select_labelfield="i.select_labelfield" :select_valuefield="i.select_valuefield" ref="enterprise" :autoComplete="true" :param="i.request" @onSelect="onSelect"></selectEnterprise>
+                </template>
+              </a-input>
+              <a-textarea
+                v-else
+                v-model:value="formState[i.key]"
+                :rows="4"
+                placeholder="输入备注信息"
+              />
+              
             </a-form-item>
           </a-col>
         </a-row>
@@ -29,12 +56,10 @@
 </template>
 <script setup>
 import selectEnterprise from '@/template/selectEnterprise/index.vue'
-import { defineComponent,defineExpose, reactive, ref,defineEmits,onMounted,watch,computed} from 'vue';
+import { defineComponent,defineExpose, reactive, ref,defineEmits,onMounted,watch,nextTick} from 'vue';
 
 import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
 import { useRouter,onBeforeRouteLeave } from "vue-router";
-import { Textarea } from 'ant-design-vue';
-import { Select } from 'ant-design-vue';
 
 const router = useRouter()
 const props = defineProps({
@@ -46,9 +71,7 @@ const formRef = ref();
 let formState = ref({});
 
 const emit = defineEmits(['onSubmit'])
-const getComponent = (i)=>{
-  console.log(i)
-}
+
 const onSubmit = async (values) => {
   try {
     const values = await formRef.value.validateFields();
@@ -80,7 +103,7 @@ const dateRangeChange = (dates,i)=>{
 }
 // 获取下拉数据源
 const onVisibleChange = async (val)=>{
-  if (val.opttype == 'option') {
+  if (val.opttype == 'option' && val.mapping.length == 0) {
     val.mapping = await val.dataSource(formState.value)
   }
 }