feat: 提交完善页面组件

src/components/PageData.vue

@@ -15,14 +15,17 @@
                   :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 style="margin-top: 5px;">
+          <slot name="button">
+
+          </slot>
         </div>
         <div style="margin-right: -10px">
           <el-button type="primary" class="add-search-btn" @click="handleSearch"
@@ -42,7 +45,7 @@
           :header-cell-class-name="tableHeaderClass"
           :row-class-name="tableBodyClass"
         >
-          <el-table-column label="序号" align="center" width="100" />
+          <!-- <el-table-column label="序号" align="center" width="100" /> -->
           <el-table-column
             v-for="(column, key) in props.columns"
             :key="key"
@@ -52,6 +55,37 @@
             :align="column.align"
           >
           </el-table-column>
+          <el-table-column label="操作" width="300">
+            <template #default="scope">
+              <template
+                v-for="(action, index) in actions"
+                :key="`${index}-${action.label}`"
+              >
+                <el-popconfirm
+                  v-if="action.popConfirm"
+                  v-bind="action.popConfirm"
+                >
+                  <template #reference>
+                    <el-button text size="mini" v-bind="action">{{
+                      action.label
+                    }}</el-button>
+                  </template>
+                </el-popconfirm>
+                <el-button
+                  v-else
+                  text
+                  size="mini"
+                  v-bind="action"
+                  @click="action.onClick(scope.row)"
+                  >{{ action.label }}</el-button
+                >
+                <el-divider
+                  direction="vertical"
+                  v-if="index < actions.length - 1"
+                />
+              </template>
+            </template>
+          </el-table-column>
         </el-table>
         <div class="pagination">
           <el-pagination
@@ -74,6 +108,14 @@
 import { defineProps, reactive, watch, ref } from "vue";
 import mitter from "@/utils/mitter";
 import components from "@/components/FormComponents/index"; // 将所有组件引入
+import {
+  View,
+  Delete,
+  Edit,
+  Message,
+  Search,
+  Star,
+} from "@element-plus/icons-vue";
 import http from "@/api/http";
 const emit = defineEmits(["DataChange"]);
 const props = defineProps({
@@ -93,13 +135,17 @@ const props = defineProps({
     type: Array,
     default: [],
   },
+  actions: {
+    type: Array,
+    default: [],
+  },
 });
 const PagePrarms = reactive({
   page: 1,
   limit: 10,
 });
 const loading = ref(false);
-const data = reactive([]);
+let data = ref([]);
 const total = ref(0);
 const searchForm = reactive({});
 const getData = () => {
@@ -110,8 +156,8 @@ const getData = () => {
   http
     .post(props.api, params)
     .then((res) => {
-      console.log(res);
-      if (res.data !== null) {
+      if (res.success) {
+        data.value = res.data;
       }
     })
     .catch(function (error) {
@@ -226,7 +272,7 @@ defineExpose({ formData: props.formData });
   display: flex;
   justify-content: space-between;
 }
-.pagination{
+.pagination {
   display: flex;
   justify-content: center;
   margin-top: 10px;

src/router/index.js

@@ -404,8 +404,8 @@ const routes = [
       {
         path: "/Scheduling/EnergyManage",
         name: "EnergyManagePage",
-        // component: () => import("@/views/SmartNumbers/PipeTemperature.vue"),
-        component: () => import("@/views/SchedulingPage/EnergyManagePage.vue"),
+        component: () => import("@/views/SmartNumbers/PipeTemperature.vue"),
+        // component: () => import("@/views/SchedulingPage/EnergyManagePage.vue"),
         meta: {
           title: "能源消耗",
         },

src/views/SmartNumbers/PipeTemperature.vue

@@ -3,18 +3,13 @@
     api="/api/Scheduling/WeatherCondition/Get"
     :schemas="schemas"
     :columns="columns"
+    :actions="actions"
     :formData="formData"
     @DataChange="formDataChange"
   >
-    <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 v-slot:button>
+      <el-button type="primary">添加</el-button>
+      <el-button type="primary">导入</el-button>
     </template>
   </PageData>
 </template>
@@ -23,11 +18,36 @@ import { ref } from "vue";
 import PageData from "@/components/PageData.vue";
 import { columns, schemas } from "./formSchems";
 const formData = ref({
-  name: "",
-  code: "",
-  date: "",
+  name: undefined,
+  code: undefined,
+  date: undefined,
 });
 const formDataChange = (val) => {
   formData.value = val;
 };
+const actions = [
+  {
+    label: "详情",
+    icon: "View",
+    onClick: (record) => {
+      console.log(record);
+    },
+  },
+  {
+    label: "编辑",
+    icon: "Edit",
+    onClick: () => {},
+  },
+  {
+    label: "删除",
+    type: "danger",
+    icon: "Delete",
+    popConfirm: {
+      title: "是否确认删除",
+      confirm: () => {
+        tableRef.value?.remove(record);
+      },
+    },
+  },
+];
 </script>

src/views/SmartNumbers/formSchems.js

@@ -2,13 +2,37 @@ import { ref } from "vue";
 export const columns = ref([
   {
     label: "设备名称",
-    prop: "name",
+    prop: "phenomenonName",
     align: "center",
     width: "200",
   },
   {
     label: "设备名称",
-    prop: "name",
+    prop: "phenomenonType",
+    align: "center",
+    width: "200",
+  },
+  {
+    label: "设备名称",
+    prop: "phenomenonName",
+    align: "center",
+    width: "200",
+  },
+  {
+    label: "设备名称",
+    prop: "phenomenonName",
+    align: "center",
+    width: "200",
+  },
+  {
+    label: "设备名称",
+    prop: "phenomenonType",
+    align: "center",
+    width: "200",
+  },
+  {
+    label: "设备名称",
+    prop: "phenomenonType",
     align: "center",
     width: "200",
   },