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 engrInstrumentConfig from "@/views/modules/global-config/components/engrInstrumentConfig.vue";
import engrGlobalData from "@/views/modules/global-config/components/engrGlobalData.vue";
import SecondHeader from "@/views/modules/conmon/SecondHeader.vue";

const route = useRoute();

const activeName = ref("仪器配置");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event);
};

// =======================
</script>

<template>
  <div class="global-config">
    <SecondHeader>全局配置</SecondHeader>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="仪器配置" name="仪器配置">
        <engrInstrumentConfig :property="1" tabName="仪器配置" />
      </el-tab-pane>
      <el-tab-pane label="全局数据" name="全局数据">
        <engrGlobalData />
      </el-tab-pane>
      <el-tab-pane label="执行终端" name="执行终端">
        <engrInstrumentConfig :property="2" tabName="执行终端" />
        <!-- 跟仪器配置一样只是 instrumentProperty 仪器属性(1工程仪器 2执行仪器)
        仪器类型是字典要选择 -->
      </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 {
  width: 100%;
  height: 100vh;
  .demo-tabs {
    // background-color: red;
    :deep(.el-tabs__nav-scroll) {
      padding: 0 20px;
    }
  }
  .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;
  }
  // .global-config-pane {
  //   padding: 0 20px;
  //   .btns {
  //     text-align: right;
  //     margin-bottom: 12px;
  //   }
  // }
  // .content-pag {
  //   float: right;
  //   margin-right: 20px;
  //   margin-top: 20px;
  //   padding-bottom: 30px;
  // }
}
</style>