lis8.0-vue3/src/views/liswork/xtwh/comopt/components/sysChannel/index.vue

<template>
  <!-- 通道号配置 -->
  <div class="table-container">
    <el-row :gutter="10" class="table-toolbar">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Check" @click="handleSave">保存</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" @click="addItem">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Delete" @click="delItem">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Delete" @click="allClear">清除所有项目接口号</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="table-row">
      <el-col :span="12" class="table-box">
        <el-table :data="tableData" height="100%" border highlight-current-row>
          <el-table-column label="通道号" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.channel" placeholder="请输入通道号" class="full-width-input" />
            </template>
          </el-table-column>
          <el-table-column label="项目" align="center">
            <template #default="scope">
              <SelectTable v-model:data="scope.row.xmid" :tableData="xmList" class="full-width-input" />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="6">
        <div class="tips">
          说明：
          “通道号”又称“接口代号”，是指仪器向电脑传送结果时项目的
          标识符
          接口代号对于一个仪器不可重复。
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { queryXmInfoNewService } from '@/api/liswork/labItem/labItemApi';
const yq = defineModel<string>();

const tableData = ref<Array<{ channel: string }>>([]);
const handleSave = () => {
};

const addItem = () => {
  tableData.value.push({ channel: '' })
};

const delItem = () => {
}

const allClear = () => {
}
const xmList = ref<Array<{ xmmc: string, xmid: string }>>([]);
const getXmList = () => {
  queryXmInfoNewService({ yq: yq.value }).then((res: any) => {
    xmList.value = res.rows.map((item: any) => {
      return {
        label: item.xmmc,
        value: item.xmid.toString(),
      }
    })
  })
};

watch(() => yq.value, (val) => {
  if (val) {
    getXmList();
  }
}, { immediate: true });
</script>

<style scoped lang="scss">
.table-container {
  height: calc(100% - 58px);
}

.table-toolbar {
  margin-bottom: 8px;
  height: 36px;
  line-height: 36px;
}

.tips {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-size: 16px;
  color: #409eff;
  font-weight: 600;
}

.table-row {
  height: calc(100% - 45px);

  .table-box {
    height: 100%;

  }
}
</style>