chengfei-test-system/src/views/modules/global-config/global-config.vue

<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);
};

//配置列表请求参数
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;
  });
};

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>
  <div class="global-config">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="仪器配置" name="仪器配置">
        <div class="global-config-pane">
          <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="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"
                    type="primary"
                    @click="globalHandledel(scope.$index, scope.row)"
                  >
                    删除
                  </el-button>
                  <el-button
                    text
                    size="small"
                    type="primary"
                    @click="globalHandleEdit(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="globalDataTotal"
              @change="globalHandleChange"
            />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <configAddVue ref="configChildRef" @save="configSaveFun"></configAddVue>
    <globalAddVue ref="globalChildRef" @save="globalSaveFun"></globalAddVue>
  </div>
</template>

<style scoped lang="scss">
.global-config {
  .demo-tabs {
    // background-color: red;
    ::v-deep .el-tabs__nav-scroll {
      padding: 0 20px;
    }
  }
  .global-config-pane {
    padding: 0 20px;
    .btns {
      text-align: right;
      margin-bottom: 12px;
    }
  }
  .add {
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 12px;
    text-align: center;
    background-color: #fff;
    color: #3b7cff;
    margin-right: 10px;
    vertical-align: middle;
  }
  .content-pag {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    padding-bottom: 30px;
  }
}
</style>