feat: 表单构建

src/components/FormBuilder.vue

+<template>
+  <div class="annual-param-container">
+    <el-form ref="searchForm" label-suffix=":">
+      <el-row :gutter="20" justify="space-evenly">
+        <el-col
+          v-for="(item, index) in props.schemas"
+          :key="index"
+          v-bind="item.colProps"
+        >
+          <el-form-item :label="item.label" :prop="item.prop">
+            <component
+              :is="components[item.type]"
+              :prop="item.prop"
+              :items="item.componentProps"
+            ></component>
+            <!-- <el-input v-model="queryPrarms" placeholder="请选择" /> -->
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+  
+</template>
+<script setup>
+import { defineProps, reactive, watch, ref } from "vue";
+import mitter from "@/utils/mitter";
+import components from "@/components/FormComponents/index"; // 将所有组件引入
+const emit = defineEmits(["DataChange"]);
+const props = defineProps({
+  schemas: {
+    type: Array,
+    default: [],
+  },
+  formData: {
+    type: Object,
+    default: () => {},
+  },
+});
+// 监听chageVal
+mitter.on("changeVal", (data) => {
+  const { name, value } = data;
+  if (name) {
+    props.formData[name] = value;
+  }
+});
+watch(
+  () => props.formData,
+  (newVal) => {
+    emit("DataChange", newVal);
+  },
+  { deep: true }
+);
+defineExpose({ formData: props.formData });
+</script>

src/components/PageData.vue

@@ -40,6 +40,7 @@
         <el-table
           :data="data"
           stripe
+          v-loading="loading"
           border
           style="width: 100%"
           :header-cell-class-name="tableHeaderClass"
@@ -55,7 +56,7 @@
             :align="column.align"
           >
           </el-table-column>
-          <el-table-column label="操作" width="300">
+          <el-table-column label="操作" fixed="right" width="300">
             <template #default="scope">
               <template
                 v-for="(action, index) in actions"
@@ -149,6 +150,7 @@ let data = ref([]);
 const total = ref(0);
 const searchForm = reactive({});
 const getData = () => {
+  loading.value = true
   let params = {
     ...PagePrarms,
     ...props.formData,
@@ -156,8 +158,10 @@ const getData = () => {
   http
     .post(props.api, params)
     .then((res) => {
+      loading.value = false
       if (res.success) {
         data.value = res.data;
+        total.value = res.data.length
       }
     })
     .catch(function (error) {