feat: 完善组件

src/components/FormComponents/dateTimePicker.vue

@@ -9,14 +9,15 @@ const props = defineProps({
 const value = ref("");
 
 const input = () => {
-  console.log(props.items);
-
   mitter.emit("changeVal", { name: props.prop, value: value.value });
 };
 </script>
 
 <template>
-  <div>
-    <el-date-picker v-bind="items" v-model="value" @input="input" />
-  </div>
+  <el-date-picker
+    v-bind="items"
+    style="width: 100%"
+    v-model="value"
+    @input="input"
+  />
 </template>

src/components/FormComponents/input.vue

@@ -9,14 +9,10 @@ const props = defineProps({
 const value = ref("");
 
 const input = () => {
-  console.log(props.items);
-
   mitter.emit("changeVal", { name: props.prop, value: value.value });
 };
 </script>
 
 <template>
-  <div>
-    <el-input v-bind="items" v-model="value" @input="input" />
-  </div>
+  <el-input v-bind="items" v-model="value" style="width: 100%" @input="input" />
 </template>

src/components/FormComponents/select.vue

@@ -15,11 +15,10 @@ const onChangeFirstValue = (val) => {
 </script>
 
 <template>
-  <div>
     <el-select
       v-model="value"
       :v-bind="items"
-      style="width: 240px"
+      style="width: 100%;"
       @change="onChangeFirstValue(value)"
     >
       <el-option
@@ -29,5 +28,4 @@ const onChangeFirstValue = (val) => {
         :value="item.value"
       />
     </el-select>
-  </div>
 </template>
\ No newline at end of file

src/components/PageData.vue

@@ -2,12 +2,12 @@
   <div class="annual-param-container">
     <el-card>
       <div class="search-add-wrapper">
-        <el-form ref="searchForm" :inline="true" label-suffix=":">
-          <el-row :gutter="10">
+        <el-form ref="searchForm" label-suffix=":">
+          <el-row :gutter="20" justify="space-evenly">
             <el-col
               v-for="(item, index) in props.schemas"
               :key="index"
-              :span="20"
+              v-bind="item.colProps"
             >
               <el-form-item :label="item.label" :prop="item.prop">
                 <component
@@ -15,13 +15,16 @@
                   :prop="item.prop"
                   :items="item.componentProps"
                 ></component>
-                <!-- <el-input v-model="queryPrarms" placeholder="请选择" /> -->
               </el-form-item>
             </el-col>
           </el-row>
         </el-form>
-
+      </div>
+      <div class="btn-list">
         <div>
+          <slot name="btns"></slot>
+        </div>
+        <div style="margin-right: -10px">
           <el-button type="primary" class="add-search-btn" @click="handleSearch"
             >查询</el-button
           >
@@ -39,20 +42,39 @@
           :header-cell-class-name="tableHeaderClass"
           :row-class-name="tableBodyClass"
         >
+          <el-table-column label="序号" align="center" width="100" />
           <el-table-column
-            v-for="(column, key) in columns"
+            v-for="(column, key) in props.columns"
             :key="key"
-            :v-bind="column"
-          ></el-table-column>
+            :prop="column.prop"
+            :label="column.label"
+            :width="column.width"
+            :align="column.align"
+          >
+          </el-table-column>
         </el-table>
+        <div class="pagination">
+          <el-pagination
+            background
+            v-model:current-page="PagePrarms.page"
+            v-model:page-size="PagePrarms.limit"
+            :page-sizes="[30, 40, 50, 100, 200, 300]"
+            :small="true"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="getData"
+            @current-change="getData"
+          />
+        </div>
       </div>
     </el-card>
   </div>
 </template>
 <script setup>
-import { defineProps, reactive, watch } from "vue";
+import { defineProps, reactive, watch, ref } from "vue";
 import mitter from "@/utils/mitter";
 import components from "@/components/FormComponents/index"; // 将所有组件引入
+import http from "@/api/http";
 const emit = defineEmits(["DataChange"]);
 const props = defineProps({
   schemas: {
@@ -72,18 +94,40 @@ const props = defineProps({
     default: [],
   },
 });
+const PagePrarms = reactive({
+  page: 1,
+  limit: 10,
+});
+const loading = ref(false);
 const data = reactive([]);
+const total = ref(0);
 const searchForm = reactive({});
+const getData = () => {
+  let params = {
+    ...PagePrarms,
+    ...props.formData,
+  };
+  http
+    .post(props.api, params)
+    .then((res) => {
+      console.log(res);
+      if (res.data !== null) {
+      }
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+};
+getData();
 const handleSearch = () => {
-  console.log(handleSearch);
+  PagePrarms.page = 1;
+  getData();
 };
 const handleReset = () => {
   console.log(handleReset);
 };
 // 监听chageVal
 mitter.on("changeVal", (data) => {
-  console.log(data);
-
   const { name, value } = data;
   if (name) {
     props.formData[name] = value;
@@ -101,20 +145,26 @@ defineExpose({ formData: props.formData });
 <style scoped lang="less">
 .annual-param-container {
   width: 100%;
-  margin: 4px;
+  margin: 8px;
+  position: relative;
+  clear: both;
+  .el-card {
+    width: 100%;
+  }
 }
 
 .search-add-wrapper {
   width: 100%;
   display: flex;
   justify-content: start;
+  .el-form {
+    margin-bottom: -10px;
+    width: 100%;
+  }
 }
 
 .search-add-wrapper .el-row {
   border: none;
-  display: flex;
-  align-items: center;
-  margin: 5px 10px 5px 5px;
 }
 
 .add-search-btn {
@@ -167,28 +217,18 @@ defineExpose({ formData: props.formData });
   border-right: 1px solid #a6c3e9;
   border-bottom: 1px solid #a6c3e9;
   width: 100%;
-  height: 35px;
-  color: #124362;
+  .el-form-item {
+    width: 100%;
+    margin-bottom: 10px;
+  }
 }
-
-.el-col[col-label] {
+.btn-list {
   display: flex;
-  justify-content: end;
-  align-items: center;
-  border-right: 1px solid #a6c3e9;
-  background-color: #f2f6f8;
-  padding-right: 5px;
+  justify-content: space-between;
 }
-
-.el-col[col-value] {
+.pagination{
   display: flex;
-  justify-content: start;
-  align-items: center;
-  padding-left: 5px;
-}
-
-.el-input {
-  color: black;
-  height: 24px;
+  justify-content: center;
+  margin-top: 10px;
 }
 </style>

src/views/SmartNumbers/PipeTemperature.vue

@@ -5,10 +5,21 @@
     :columns="columns"
     :formData="formData"
     @DataChange="formDataChange"
-  ></PageData>
+  >
+    <template v-slot:bnts>
+      <el-row>
+        <el-col :span="1.5">
+          <el-button type="primary" class="add-search-btn" @click="handleSearch"
+            >查询</el-button
+          >
+        </el-col>
+        <el-col :span="1.5"></el-col>
+      </el-row>
+    </template>
+  </PageData>
 </template>
 <script setup>
-import { computed, onMounted, reactive, ref } from "vue";
+import { ref } from "vue";
 import PageData from "@/components/PageData.vue";
 import { columns, schemas } from "./formSchems";
 const formData = ref({

src/views/SmartNumbers/formSchems.js

@@ -4,34 +4,48 @@ export const columns = ref([
     label: "设备名称",
     prop: "name",
     align: "center",
-    with: 200,
+    width: "200",
   },
   {
     label: "设备名称",
     prop: "name",
     align: "center",
-    with: 200,
+    width: "200",
   },
   {
     label: "设备名称",
     prop: "name",
     align: "center",
-    with: 200,
+    width: "200",
   },
 ]);
 export const schemas = ref([
   {
-    label: "设备名称",
+    // label: "设备名称",
     prop: "name",
     type: "input",
+    colProps: {
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 6,
+      xl: 6,
+    },
     componentProps: {
       placeholder: "请输入设备名称",
     },
   },
   {
-    label: "设备编号",
+    // label: "设备编号",
     prop: "code",
     type: "select",
+    colProps: {
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 6,
+      xl: 6,
+    },
     componentProps: {
       options: [
         { label: "11111", value: 1 },
@@ -41,13 +55,38 @@ export const schemas = ref([
     },
   },
   {
-    label: "设备名称",
+    // label: "开始日期",
     prop: "date",
     type: "dateTimePicker",
+    colProps: {
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 6,
+      xl: 6,
+    },
+    componentProps: {
+      type: "datetime",
+      placeholder: "开始日期",
+      format: "YYYY-MM-DD HH:mm:ss",
+      datFormat: "YYYY/MM/DD",
+      timeFormat: "HH:mm:ss",
+    },
+  },
+  {
+    // label: "结束日起",
+    prop: "date",
+    type: "dateTimePicker",
+    colProps: {
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 6,
+      xl: 6,
+    },
     componentProps: {
-      type: "datetimerange",
-      startPlaceholder: "开始日起",
-      endPlaceholder: "结束日期",
+      type: "datetime",
+      placeholder: "结束日期",
       format: "YYYY-MM-DD HH:mm:ss",
       datFormat: "YYYY/MM/DD",
       timeFormat: "HH:mm:ss",