全局设置接口联调

.env.development

@@ -11,7 +11,7 @@ VITE_APP_BASE_API = '/dev-api'
 
 # 开发接口地址
 # VITE_APP_API_URL = 'http://192.168.101.4:8078'
-VITE_APP_API_URL = 'http://192.168.101.51:8078'
+VITE_APP_API_URL = 'http://192.168.1.43:7201'
 
 # 是否启用 Mock 服务
 VITE_MOCK_DEV_SERVER = true

src/api/config/index.ts

@@ -0,0 +1,21 @@
+import request from "@/utils/request";
+import { AxiosPromise } from "axios";
+// import {} from "./types";
+
+//测试仪器配置分页查询
+export function instrumentConfigPage(queryParams?: object): AxiosPromise<any> {
+  return request({
+    url: "/api/v1/instrumentConfig/page",
+    method: "post",
+    data: queryParams,
+  });
+}
+
+//测试全局数据分页查询
+export function globalDataPage(queryParams?: object): AxiosPromise<any> {
+  return request({
+    url: "/api/v1/globalData/page",
+    method: "post",
+    data: queryParams,
+  });
+}

src/views/modules/global-config/components/ConfigAdd.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="add">
+    <el-dialog
+      v-model="dialogVisible"
+      title="新建测试工程"
+      width="500"
+      @closed="emitHidden"
+    >
+      <el-form
+        :label-position="labelPosition"
+        label-width="auto"
+        :model="formLabelAlign"
+        style="max-width: 600px"
+      >
+        <el-form-item label="产品" :label-position="itemLabelPosition">
+          <el-input v-model="formLabelAlign.name" />
+        </el-form-item>
+        <el-form-item label="类型" :label-position="itemLabelPosition">
+          <el-input v-model="formLabelAlign.type" />
+        </el-form-item>
+        <el-form-item label="版本" :label-position="itemLabelPosition">
+          <el-input v-model="formLabelAlign.region" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="emitHidden">取消</el-button>
+          <el-button type="primary" @click="saveFun"> 保存 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, watch } from "vue";
+
+const dialogVisible = ref(false);
+
+import type { FormItemProps, FormProps } from "element-plus";
+
+const labelPosition = ref<FormProps["labelPosition"]>("right");
+const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
+
+interface VersionItem {
+  name: string;
+  type: string;
+  region: string;
+}
+
+const formLabelAlign = ref<VersionItem>({
+  name: "name1",
+  type: "实现基础框架搭建，包含权限管理、路由系统等核心功能。",
+  region: "v2.4.0",
+});
+
+// const handleClose = (done: () => void) => {};
+
+let { options } = defineProps({
+  options: {
+    type: Object,
+    required: false,
+  },
+});
+
+watch(
+  () => options,
+  (newVal, oldVal) => {
+    console.log(newVal);
+    // dialogVisible.value = newVal.show;
+  }
+);
+
+const emit = defineEmits(["handleCancel", "save"]);
+const emitHidden = () => {
+  emit("handleCancel", false);
+};
+
+const saveFun = () => {
+  emit("save", formLabelAlign.value);
+};
+</script>
+<style scoped lang="scss">
+// .add {
+//   // position: fixed;
+//   // width: 100%;
+//   // height: 100%;
+//   // z-index: 10;
+//   // background-color: #000;
+// }
+</style>

src/views/modules/global-config/global-config.vue

@@ -1,56 +1,109 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import type { TabsPaneContext } from "element-plus";
+import { instrumentConfigPage, globalDataPage } from "@/api/config";
 
 const activeName = ref("仪器配置");
 
+import ConfigAdd from "./components/ConfigAdd.vue";
+import { fa } from "element-plus/es/locale";
+import { dataTool } from "echarts";
+
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   // console.log(tab, event);
 };
 
-interface User {
-  date: string;
-  name: string;
-  address: string;
-}
+//
 
-const search = ref("");
-const filterTableData = computed(() =>
-  tableData.filter(
-    (data) =>
-      !search.value ||
-      data.name.toLowerCase().includes(search.value.toLowerCase())
-  )
-);
-const handleEdit = (index: number, row: User) => {
+const handleDelete = (index: number, row: any) => {
   console.log(index, row);
 };
-const handleDelete = (index: number, row: User) => {
-  console.log(index, row);
+//配置列表请求参数
+const configParams = ref({
+  orders: [
+    {
+      column: "",
+      isAsc: true,
+    },
+  ],
+  pageNo: 1,
+  pageSize: 10,
+});
+//分页
+const configHandleChange = (currentPage: number, pageSize: number) => {
+  console.log(currentPage);
+  configParams.value.pageNo = currentPage;
+  getInstrumentConfig();
+  // console.log(pageSize);
+};
+
+//测试仪器配置数组
+const instrumentConfigList = ref([]);
+//数据total
+const instrumentConfigTotal = ref(1);
+//请求数据
+const getInstrumentConfig = () => {
+  instrumentConfigPage(configParams.value).then((res) => {
+    console.log(res);
+    instrumentConfigList.value = res.data.records;
+    instrumentConfigTotal.value = res.data.totalCount;
+  });
+};
+
+//全局列表请求参数
+const globalParams = ref({
+  orders: [
+    {
+      column: "",
+      isAsc: true,
+    },
+  ],
+  pageNo: 1,
+  pageSize: 10,
+});
+//分页
+const globalHandleChange = (currentPage: number, pageSize: number) => {
+  console.log(currentPage);
+  globalParams.value.pageNo = currentPage;
+  getglobalData();
+};
+
+//测试仪器配置数组
+const globalDataList = ref([]);
+//数据total
+const globalDataTotal = ref(1);
+//请求数据
+const getglobalData = () => {
+  globalDataPage(globalParams.value).then((res) => {
+    console.log(res);
+    globalDataList.value = res.data.records;
+    globalDataTotal.value = res.data.totalCount;
+  });
 };
 
-const tableData: User[] = [
-  {
-    date: "2016-05-03",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-02",
-    name: "John",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-04",
-    name: "Morgan",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Jessy",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-];
+onMounted?.(() => {
+  getInstrumentConfig();
+  getglobalData();
+});
+
+//仪器配置弹框数据
+const configAdd = ref({
+  show: false,
+  type: "add", //add新增，edit修改
+  data: {},
+});
+
+const handleEdit = (index: number, row: any) => {
+  // console.log(index, row);
+  // console.log(row);
+  showConfigAdd("edit", row);
+};
+const showConfigAdd = (type: string, data: any) => {
+  console.log("1");
+  configAdd.value.show = true;
+  configAdd.value.type = type;
+  configAdd.value.data = data;
+};
 </script>
 
 <template>
@@ -58,40 +111,84 @@ const tableData: User[] = [
     <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
       <el-tab-pane label="仪器配置" name="仪器配置">
         <div class="global-config-pane">
-          <el-button type="primary">
-            <span class="add">+</span>
-            新增
-          </el-button>
+          <div class="btns">
+            <el-button type="primary">
+              <span class="add">+</span>
+              新增
+            </el-button>
+          </div>
+
           <div>
-            <el-table :data="filterTableData" style="width: 100%">
-              <el-table-column label="序号" type="index" />
-              <!-- <el-table-column label="Date" prop="date" /> -->
-              <el-table-column label="所需仪器类型" prop="date" />
-              <el-table-column label="名称" prop="name" />
-              <el-table-column label="仪器地址" prop="name" />
-              <el-table-column label="操作" prop="操作">
+            <el-table :data="instrumentConfigList" style="width: 100%">
+              <el-table-column label="序号" type="index" width="80" />
+              <el-table-column label="所需仪器类型" prop="instrumentType" />
+              <el-table-column label="名称" prop="configName" />
+              <el-table-column label="仪器地址" prop="configIp" />
+              <el-table-column label="操作" prop="操作" fixed="right">
                 <template #default="scope">
                   <el-button
+                    text
                     size="small"
-                    @click="handleEdit(scope.$index, scope.row)"
+                    type="primary"
+                    @click="handleDelete(scope.$index, scope.row)"
                   >
-                    Edit
+                    删除
                   </el-button>
                   <el-button
+                    text
                     size="small"
-                    type="danger"
-                    @click="handleDelete(scope.$index, scope.row)"
+                    type="primary"
+                    @click="handleEdit(scope.$index, scope.row)"
                   >
-                    Delete
+                    修改
                   </el-button>
                 </template>
               </el-table-column>
             </el-table>
+            <el-pagination
+              class="content-pag"
+              background
+              layout="prev, pager, next"
+              :page-size="10"
+              :total="instrumentConfigTotal"
+              @change="configHandleChange"
+            />
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="全局数据" name="全局数据">
+        <div class="global-config-pane">
+          <div class="btns">
+            <el-button type="primary" @click="">
+              <span class="add">+</span>
+              新增
+            </el-button>
+          </div>
+
+          <div>
+            <el-table :data="globalDataList" style="width: 100%">
+              <el-table-column label="序号" type="index" width="80" />
+              <el-table-column label="所需仪器类型" prop="instrumentType" />
+              <el-table-column label="名称" prop="configName" />
+              <el-table-column label="仪器地址" prop="configIp" />
+              <el-table-column label="操作" prop="操作" fixed="right">
+                <template #default="scope"> </template>
+              </el-table-column>
+            </el-table>
+            <el-pagination
+              class="content-pag"
+              background
+              layout="prev, pager, next"
+              :page-size="10"
+              :total="globalDataTotal"
+              @change="globalHandleChange"
+            />
           </div>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="全局数据" name="全局数据"> <div></div> </el-tab-pane>
     </el-tabs>
+
+    <ConfigAdd :options="configAdd"></ConfigAdd>
   </div>
 </template>
 
@@ -105,6 +202,10 @@ const tableData: User[] = [
   }
   .global-config-pane {
     padding: 0 20px;
+    .btns {
+      text-align: right;
+      margin-bottom: 12px;
+    }
   }
   .add {
     width: 12px;
@@ -117,5 +218,11 @@ const tableData: User[] = [
     margin-right: 10px;
     vertical-align: middle;
   }
+  .content-pag {
+    float: right;
+    margin-right: 20px;
+    margin-top: 20px;
+    padding-bottom: 30px;
+  }
 }
 </style>

src/views/modules/project-config/com/project-message.vue

@@ -51,14 +51,16 @@ const goGlobalConfig = () => {
     </div>
 
     <div class="project-list-cont">
-      <div
-        class="project-list-item"
-        v-for="item in 10"
-        :key="index"
-        @click="handleClickItem(item)"
-      >
-        {{ item }}
-      </div>
+      <el-scrollbar>
+        <div
+          class="project-list-item"
+          v-for="item in 20"
+          :key="index"
+          @click="handleClickItem(item)"
+        >
+          {{ item }}
+        </div>
+      </el-scrollbar>
     </div>
   </div>
 </template>
@@ -138,7 +140,7 @@ const goGlobalConfig = () => {
     }
   }
   .project-list-cont {
-    height: 300px;
+    height: calc(100vh - $main-header-height - 310px);
     overflow-y: auto;
     .project-list-item {
       cursor: pointer;