chengfei-test-system/src/views/modules/runTest/components/configDataAndDevice.vue

<script lang="ts" setup>
import type { TabsPaneContext } from "element-plus";
import SecondHeader from "@/views/modules/conmon/SecondHeader.vue";
import { selectInstrumentResource } from "@/api/config";

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

const emits = defineEmits(["close"]);

const devicesData = defineModel<any[]>("devicesData");
const dataList = defineModel<any[]>("dataList");

// =======================
const resourceList = ref<any[]>([]);
const openDrawer = () => {
  selectInstrumentResource({ instrumentProperty: "1" }).then((data) => {
    resourceList.value = data.data;
  });
};

defineExpose({
  openDrawer,
});
</script>

<template>
  <div class="global-config">
    <div class="second-header">
      <div class="left-text">数据配置</div>
      <div>
        <svg-icon
          icon-class="close"
          @click="emits('close')"
          style="cursor: pointer"
        />
      </div>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="仪器配置" name="仪器配置">
        <el-table :data="devicesData" style="width: 100%">
          <el-table-column label="序号" type="index" width="80" />

          <el-table-column label="执行仪器" prop="instrumentId">
            <template #default="scope">
              <el-select
                v-model="scope.row.instrumentId"
                placeholder="请选择执行仪器名称"
                size="large"
              >
                <el-option
                  v-for="item in resourceList.filter(
                    (item) => item.instrumentType === scope.row.instrumentType
                  )"
                  :key="item.id"
                  :label="item.instrumentName"
                  :value="item.id"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="配置名称" prop="configName" />
          <!--          <el-table-column label="仪器编码" prop="instrumentCode" />-->
          <el-table-column label="仪器类型" prop="typeLabel" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="全局数据" name="全局数据">
        <el-table :data="dataList" style="width: 100%">
          <el-table-column label="序号" type="index" width="80" />

          <!--          <el-table-column label="数据项编码" prop="dataItemCode" />-->
          <el-table-column label="数据项名称" prop="dataItemName" />
          <!--        <el-table-column label="测试工程id" prop="engineeringId" />-->
          <el-table-column label="设定值" prop="setValue">
            <template #default="scope">
              <el-input v-model="scope.row.setValue" />
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </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;
  }
}

.second-header {
  width: 100%;
  height: $main-header-height;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: black;
  padding: 0 20px;
  border-bottom: 1px solid $hj-white-3;

  .left-text {
    height: 18px;

    font-weight: bold;
    font-size: 14px;
    color: white;
    line-height: 16px;
    text-align: left;
  }
}
</style>