feat: 新增列表工具组件提交代码

src/components/FormComponents/dateTimePicker.vue

+<script setup>
+import mitter from "@/utils/mitter";
+import { ref } from "vue";
+const props = defineProps({
+  items: Object,
+  prop: String,
+});
+
+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>
+</template>

src/components/FormComponents/index.js

+import select from "./select.vue";
+import input from "./input.vue";
+import dateTimePicker from "./dateTimePicker.vue";
+
+export default {
+  select,
+  input,
+  dateTimePicker
+};

src/components/FormComponents/input.vue

+<script setup>
+import mitter from "@/utils/mitter";
+import { ref } from "vue";
+const props = defineProps({
+  items: Object,
+  prop: String,
+});
+
+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>
+</template>

src/components/FormComponents/select.vue

+<script setup>
+import { ref } from "vue";
+import emitter from "@/utils/mitter";
+const porps = defineProps({
+  items: Object,
+  prop: String,
+});
+
+const value = ref("");
+
+// 选择某一项之后触发changeVale事件
+const onChangeFirstValue = (val) => {
+  emitter.emit("changeVal", { name: porps.prop, value: value.value });
+};
+</script>
+
+<template>
+  <div>
+    <el-select
+      v-model="value"
+      :v-bind="items"
+      style="width: 240px"
+      @change="onChangeFirstValue(value)"
+    >
+      <el-option
+        v-for="item in items.options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+</template>
\ No newline at end of file

src/components/PageData.vue

+<template>
+  <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-col
+              v-for="(item, index) in props.schemas"
+              :key="index"
+              :span="20"
+            >
+              <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>
+          <el-button type="primary" class="add-search-btn" @click="handleSearch"
+            >查询</el-button
+          >
+          <el-button type="primary" class="add-search-btn" @click="handleReset"
+            >重置</el-button
+          >
+        </div>
+      </div>
+      <div class="table-wrapper">
+        <el-table
+          :data="data"
+          stripe
+          border
+          style="width: 100%"
+          :header-cell-class-name="tableHeaderClass"
+          :row-class-name="tableBodyClass"
+        >
+          <el-table-column
+            v-for="(column, key) in columns"
+            :key="key"
+            :v-bind="column"
+          ></el-table-column>
+        </el-table>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script setup>
+import { defineProps, reactive, watch } 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: () => {},
+  },
+  api: {
+    type: String,
+    default: "",
+  },
+  columns: {
+    type: Array,
+    default: [],
+  },
+});
+const data = reactive([]);
+const searchForm = reactive({});
+const handleSearch = () => {
+  console.log(handleSearch);
+};
+const handleReset = () => {
+  console.log(handleReset);
+};
+// 监听chageVal
+mitter.on("changeVal", (data) => {
+  console.log(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>
+<style scoped lang="less">
+.annual-param-container {
+  width: 100%;
+  margin: 4px;
+}
+
+.search-add-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: start;
+}
+
+.search-add-wrapper .el-row {
+  border: none;
+  display: flex;
+  align-items: center;
+  margin: 5px 10px 5px 5px;
+}
+
+.add-search-btn {
+  margin: 5px 10px 5px 0;
+}
+
+:deep(.table-header-class) {
+  text-align: center;
+  font-size: 12px;
+  background-color: #c4d8f1 !important;
+  color: #124c6a;
+}
+
+:deep(.table-body-class) {
+  font-size: 12px;
+  color: black;
+}
+
+.table-operate-column {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.table-operate-column .el-button {
+  font-size: 12px;
+}
+
+::v-deep .el-table__body tr:hover > td {
+  background: linear-gradient(
+    to top,
+    rgb(0, 198, 255),
+    rgb(255, 255, 255)
+  ) !important;
+}
+
+.pagination-wrapper {
+  padding: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.el-row[first] {
+  border-top: 1px solid #a6c3e9;
+}
+
+.el-row {
+  border-left: 1px solid #a6c3e9;
+  border-right: 1px solid #a6c3e9;
+  border-bottom: 1px solid #a6c3e9;
+  width: 100%;
+  height: 35px;
+  color: #124362;
+}
+
+.el-col[col-label] {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  border-right: 1px solid #a6c3e9;
+  background-color: #f2f6f8;
+  padding-right: 5px;
+}
+
+.el-col[col-value] {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  padding-left: 5px;
+}
+
+.el-input {
+  color: black;
+  height: 24px;
+}
+</style>

src/utils/mitter.js

+import mitt from "mitt";
+
+const emitter = mitt();
+
+export default emitter;
\ No newline at end of file

src/utils/request.js

@@ -3,5 +3,5 @@ const port='8001';
 
 //export const SERVEICE='http://218.69.97.198:8001'
 //'http://218.69.97.198:8001'
-//export const TEST_SERVEICE='http://localhost:5013'
-export const SERVEICE='http://localhost:5013'
+//export const TEST_SERVEICE='http://192.168.1.2:5013/'
+export const SERVEICE='http://192.168.1.2:5013/'

src/views/SmartNumbers/PipeTemperature.vue

+<template>
+  <PageData
+    api="/api/Scheduling/WeatherCondition/Get"
+    :schemas="schemas"
+    :columns="columns"
+    :formData="formData"
+    @DataChange="formDataChange"
+  ></PageData>
+</template>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import PageData from "@/components/PageData.vue";
+import { columns, schemas } from "./formSchems";
+const formData = ref({
+  name: "",
+  code: "",
+  date: "",
+});
+const formDataChange = (val) => {
+  formData.value = val;
+};
+</script>

src/views/SmartNumbers/formSchems.js

+import { ref } from "vue";
+export const columns = ref([
+  {
+    label: "设备名称",
+    prop: "name",
+    align: "center",
+    with: 200,
+  },
+  {
+    label: "设备名称",
+    prop: "name",
+    align: "center",
+    with: 200,
+  },
+  {
+    label: "设备名称",
+    prop: "name",
+    align: "center",
+    with: 200,
+  },
+]);
+export const schemas = ref([
+  {
+    label: "设备名称",
+    prop: "name",
+    type: "input",
+    componentProps: {
+      placeholder: "请输入设备名称",
+    },
+  },
+  {
+    label: "设备编号",
+    prop: "code",
+    type: "select",
+    componentProps: {
+      options: [
+        { label: "11111", value: 1 },
+        { label: "22222", value: 2 },
+      ],
+      placeholder: "请输入设备编号",
+    },
+  },
+  {
+    label: "设备名称",
+    prop: "date",
+    type: "dateTimePicker",
+    componentProps: {
+      type: "datetimerange",
+      startPlaceholder: "开始日起",
+      endPlaceholder: "结束日期",
+      format: "YYYY-MM-DD HH:mm:ss",
+      datFormat: "YYYY/MM/DD",
+      timeFormat: "HH:mm:ss",
+    },
+  },
+]);