代码上传

src/components/customForm/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <a-form
+    ref="formRef"
+    name="advanced_search"
+    labelAlign="top"
+    :model="formState"
+    layout="vertical"
+    @finish="onFinish">
+      <a-row :gutter="20">
+        <a-col v-for="(i) in searchType" :key="i"  :span="i.span">
+          <a-form-item
+            class="formItemBottom"
+            :name="i.columnname"
+            :label="i. title"
+            :rules="[{ required: i.required, message: `${i.title}不正确`,pattern:regex(i.regex),}]"
+            layout="vertical"
+          >
+            <a-input v-if="i.type=='Input'" v-model:value="formState[i.columnname]" :placeholder="i. title"></a-input>
+            <a-textarea  v-else-if="i.type=='Textarea'" v-model:value="formState[i.columnname]"  :placeholder="i. title" :rows="4" />
+            <a-select :dropdownMenuStyle="{background:'#f7f8fa',borderColor:'#f7f8fa'}" v-else-if="i.type=='Select'" v-model:value="formState[i.columnname]" :options="i.dataSource" :placeholder="i. title" @change="selectChange(i.script,i.dataSource)" allowClear>
+            </a-select>
+            <a-date-picker style="width: 100%;" v-else-if="i.type == 'DatePicker'" v-model:value="formState[i.columnname]" value-format="YYYY-MM-DD" :placeholder="i. title" />
+            <a-range-picker v-else-if="i.type == 'DatepickerRange'" v-model:value="formState[i.columnname]" value-format="YYYY-MM-DD" @change="dateRangeChange(formState[i.columnname],i)"/>
+
+            <a-tree-select
+              class="cusSelect"
+              v-else
+              v-model:value="formState[i.columnname]"
+              style="width: 100%"
+              :tree-data="i.dataSource"
+              allow-clear
+              placeholder="请选择"
+              :fieldNames="{children:'subdep', label:'itemclassname', value: 'itemclassid' }"
+              tree-node-filter-prop="label"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+  </a-form>
+</template>
+<script setup>
+import { ref,defineProps,defineExpose,onBeforeMount} from 'vue';
+import { storeToRefs } from 'pinia'
+import { useAuthStore } from '@/stores/modules/auth'
+import Api from '@/api/api'
+const store = useAuthStore()
+let { app } = storeToRefs(store)
+
+const props = defineProps({
+  formName:String
+})
+
+const formRef = ref();
+let formState = ref({});
+
+const restForm = () =>{
+  Object.keys(formState.value).forEach(key => {
+    if (Array.isArray(formState.value[key])) {
+      formState.value[key] = []
+    } else if(typeof formState.value[key] === "object" && formState.value[key] !== null) {
+      formState.value[key] = {}
+    } else {
+      formState.value[key] = ''
+    }
+  });
+  emit('onSubmit',formState.value)
+}
+const onFinish = (values) => {
+  emit('onSubmit',formState.value)
+}
+const searchType = ref([])
+const formItemLayout = ()=>{
+  searchType.value = app.value.meta.forms[props.formName].formcols
+  searchType.value.forEach(async e=>{
+    if (e.request.id) {
+      const res = await Api.requested(e.request)
+      e.dataSource = res.data.map(rs=>{
+        return {
+          label:rs.remarks,
+          value:rs.value
+        }
+      })
+    }
+  })
+  console.log(searchType.value)
+}
+const validateFields = async ()=>{
+  const values = await formRef.value.validateFields();
+  return values
+}
+const selectChange = (fn,data)=>{
+  let func = new Function('data','formDt',fn);
+  console.log(formState.value)
+  // func(data,formState.value)
+  formState.value = Object.assign(formState.value,func(data,formState.value))
+}
+const regex = (str)=>{
+  let st =  atob(str)
+  return eval(st)
+}
+onBeforeMount(()=>{
+  formItemLayout()
+})
+defineExpose({
+  formState,
+  validateFields
+})
+</script>
+<style>
+</style>
+<style scoped>
+</style>