|
@@ -1,56 +1,169 @@
|
|
|
<script lang="ts" setup>
|
|
|
import { computed, ref } from "vue";
|
|
|
import type { TabsPaneContext } from "element-plus";
|
|
|
+import {
|
|
|
+ instrumentConfigPage,
|
|
|
+ globalDataPage,
|
|
|
+ configUpdate,
|
|
|
+ configAdd,
|
|
|
+ configDel,
|
|
|
+ globalDataAdd,
|
|
|
+ globalDataDel,
|
|
|
+ globalDataUpdate,
|
|
|
+} from "@/api/config";
|
|
|
|
|
|
const activeName = ref("仪器配置");
|
|
|
|
|
|
+import configAddVue from "./components/ConfigAdd.vue";
|
|
|
+import globalAddVue from "./components/globalDataAdd.vue";
|
|
|
+
|
|
|
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
|
|
// console.log(tab, event);
|
|
|
};
|
|
|
|
|
|
-interface User {
|
|
|
- date: string;
|
|
|
- name: string;
|
|
|
- address: string;
|
|
|
-}
|
|
|
+//配置列表请求参数
|
|
|
+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 search = ref("");
|
|
|
-const filterTableData = computed(() =>
|
|
|
- tableData.filter(
|
|
|
- (data) =>
|
|
|
- !search.value ||
|
|
|
- data.name.toLowerCase().includes(search.value.toLowerCase())
|
|
|
- )
|
|
|
-);
|
|
|
-const handleEdit = (index: number, row: User) => {
|
|
|
- console.log(index, row);
|
|
|
+//测试仪器配置数组
|
|
|
+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 handleDelete = (index: number, row: User) => {
|
|
|
- console.log(index, row);
|
|
|
+
|
|
|
+//全局列表请求参数
|
|
|
+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 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",
|
|
|
- },
|
|
|
-];
|
|
|
+//全局数据数组
|
|
|
+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;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+onMounted?.(() => {
|
|
|
+ getInstrumentConfig();
|
|
|
+ getglobalData();
|
|
|
+});
|
|
|
+
|
|
|
+const configChildRef = ref();
|
|
|
+const configHandleEdit = (index: number, row: any) => {
|
|
|
+ configChildRef.value && configChildRef.value.showDialog("change", row);
|
|
|
+};
|
|
|
+
|
|
|
+const addConfigFun = () => {
|
|
|
+ configChildRef.value && configChildRef.value.showDialog("add", {});
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+//新增或修改仪器配置
|
|
|
+ *
|
|
|
+ * @param {any} data - 要保存的仪器配置数据
|
|
|
+ * @param {string} flag - 操作标识,"add" 表示新增,其他值表示修改
|
|
|
+ *
|
|
|
+ * 根据 flag 的值调用相应的 API 进行新增或修改操作,
|
|
|
+ * 操作完成后关闭弹框并重新请求仪器配置数据。
|
|
|
+ */
|
|
|
+const configSaveFun = (data: any, flag: string) => {
|
|
|
+ if (flag === "add") {
|
|
|
+ configAdd(data).then((res) => {
|
|
|
+ configChildRef.value && configChildRef.value.hiddenDialog(); //关闭弹框
|
|
|
+ getInstrumentConfig(); //重新请求数据
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ configUpdate(data).then((res) => {
|
|
|
+ configChildRef.value && configChildRef.value.hiddenDialog(); //关闭弹框
|
|
|
+ getInstrumentConfig(); //重新请求数据
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 处理删除配置项的函数
|
|
|
+ * @param {number} index - 配置项在列表中的索引
|
|
|
+ * @param {any} row - 当前配置项的数据对象
|
|
|
+ *
|
|
|
+ * 此函数调用 configDel 方法删除指定的配置项,并在成功后重新请求配置数据。
|
|
|
+ */
|
|
|
+const configHandleDelete = (index: number, row: any) => {
|
|
|
+ configDel({ id: row.id }).then((res) => {
|
|
|
+ getInstrumentConfig(); //重新请求数据
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// =======================
|
|
|
+const globalChildRef = ref();
|
|
|
+
|
|
|
+const globalHandleEdit = (index: number, row: any) => {
|
|
|
+ globalChildRef.value && globalChildRef.value.showDialog("change", row);
|
|
|
+};
|
|
|
+
|
|
|
+const addglobalFun = () => {
|
|
|
+ globalChildRef.value && globalChildRef.value.showDialog("add", {});
|
|
|
+};
|
|
|
+
|
|
|
+const globalSaveFun = (data: any, flag: string) => {
|
|
|
+ if (flag === "add") {
|
|
|
+ globalDataAdd(data).then((res) => {
|
|
|
+ globalChildRef.value && globalChildRef.value.hiddenDialog(); //关闭弹框
|
|
|
+ getglobalData(); //重新请求数据
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ globalDataUpdate(data).then((res) => {
|
|
|
+ globalChildRef.value && globalChildRef.value.hiddenDialog(); //关闭弹框
|
|
|
+ getglobalData(); //重新请求数据
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const globalHandledel = (index: number, row: any) => {
|
|
|
+ globalDataDel({ id: row.id }).then((res) => {
|
|
|
+ getglobalData(); //重新请求数据
|
|
|
+ });
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
@@ -58,40 +171,101 @@ 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" @click="addConfigFun">
|
|
|
+ <span class="add">+</span>
|
|
|
+ 新增
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <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"
|
|
|
+ type="primary"
|
|
|
+ @click="configHandleDelete(scope.$index, scope.row)"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ text
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ @click="configHandleEdit(scope.$index, scope.row)"
|
|
|
+ >
|
|
|
+ 修改
|
|
|
+ </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="addglobalFun">
|
|
|
+ <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="globalDataList" style="width: 100%">
|
|
|
+ <el-table-column label="序号" type="index" width="80" />
|
|
|
+ <el-table-column label="数据项名称" prop="dataItemName" />
|
|
|
+ <el-table-column label="设定值" prop="setValue" />
|
|
|
+ <el-table-column label="操作" prop="操作" fixed="right">
|
|
|
<template #default="scope">
|
|
|
<el-button
|
|
|
+ text
|
|
|
size="small"
|
|
|
- @click="handleEdit(scope.$index, scope.row)"
|
|
|
+ type="primary"
|
|
|
+ @click="globalHandledel(scope.$index, scope.row)"
|
|
|
>
|
|
|
- Edit
|
|
|
+ 删除
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
+ text
|
|
|
size="small"
|
|
|
- type="danger"
|
|
|
- @click="handleDelete(scope.$index, scope.row)"
|
|
|
+ type="primary"
|
|
|
+ @click="globalHandleEdit(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="globalDataTotal"
|
|
|
+ @change="globalHandleChange"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane label="全局数据" name="全局数据"> <div></div> </el-tab-pane>
|
|
|
</el-tabs>
|
|
|
+
|
|
|
+ <configAddVue ref="configChildRef" @save="configSaveFun"></configAddVue>
|
|
|
+ <globalAddVue ref="globalChildRef" @save="globalSaveFun"></globalAddVue>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -105,6 +279,10 @@ const tableData: User[] = [
|
|
|
}
|
|
|
.global-config-pane {
|
|
|
padding: 0 20px;
|
|
|
+ .btns {
|
|
|
+ text-align: right;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
.add {
|
|
|
width: 12px;
|
|
@@ -117,5 +295,11 @@ const tableData: User[] = [
|
|
|
margin-right: 10px;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
+ .content-pag {
|
|
|
+ float: right;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|