CMVR-BID/src/views/vi/testProject/plan/setting.vue

<template>
  <div>
    <div class="btn-container">
      <el-button type="primary" @click="openDialog">配置语料</el-button>
    </div>
    <el-table :data="selectList">
      <el-table-column label="语料名称" align="center" prop="corpusName" />
      <el-table-column
        label="语音文本"
        align="center"
        prop="textContent"
        min-width="200"
        show-overflow-tooltip
      />
      <el-table-column label="音色" align="center" prop="voiceType" />
      <el-table-column label="语种" align="center" prop="dialect" />
    </el-table>

    <el-dialog title="选择语料" v-model="open" width="700px">
      <el-table
        ref="tableRef"
        :data="corpusList"
        :tree-props="{ checkStrictly: true }"
        :row-key="rowKey"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          v-show="false"
          :selectable="selectable"
        />
        <el-table-column
          label="语料名称"
          align="center"
          prop="corpusName"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          label="语音文本"
          align="center"
          prop="textContent"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column label="音色" align="center" prop="voiceType" />
        <el-table-column label="语种" align="center" prop="dialect" />
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import { listCorpus, getBatchCorpus } from "@/api/vi/corpus";

const props = defineProps({
  type: {
    type: String,
    default: "1",
  },
  corpusIds: {
    type: String,
    default: "",
  },
});

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

const selectList = ref([]);
const corpusList = ref([]);

const open = ref(false);
const openDialog = () => {
  open.value = true;
  setTimeout(() => {
    toggleRowSelection();
  }, 100);
};

const toggleRowSelection = () => {
  if (selectList.value.length > 0) {
    corpusList.value.forEach((row) => {
      selectList.value.forEach((item) => {
        if (
          item.parentId + (item?.corpusId || "") ===
          row.parentId + (row?.corpusId || "")
        ) {
          tableRef.value.toggleRowSelection(row, true);
        }
      });
    });
  }
};

const rowKey = (row) => {
  return row.parentId + (row?.corpusId || "");
};

const selectable = (row) => {
  if (row.continuous + "" === "0") {
    return false;
  } else {
    return true;
  }
};

const getList = () => {
  if (props.type === "1") {
    listCorpus({
      pageNum: 1,
      pageSize: 100000,
      type: "TEST",
      continuous: 1,
    })
      .then((response) => {
        corpusList.value = response.rows;
      })
      .catch((err) => {});
  } else {
    getBatchCorpus({
      pageNum: 1,
      pageSize: 100000,
      type: "TEST",
      continuous: 0,
    })
      .then((response) => {
        corpusList.value = response.rows;
      })
      .catch((err) => {});
  }
};
const tableRef = ref();
const submitForm = () => {
  const rows = tableRef.value.getSelectionRows();
  selectList.value = rows;
  open.value = false;
  emits("updateSelectRows", rows);
};

const cancel = () => {
  open.value = false;
};

const getSelectList = (corpusIds) => {
  if (props.type === "1") {
    listCorpus({
      pageNum: 1,
      pageSize: 100000,
      type: "TEST",
      continuous: 1,
      parentIds: corpusIds,
    })
      .then((response) => {
        selectList.value = response.rows;
      })
      .catch((err) => {});
  } else {
    getBatchCorpus({
      pageNum: 1,
      pageSize: 100000,
      type: "TEST",
      continuous: 0,
      parentIds: corpusIds,
    })
      .then((response) => {
        selectList.value = response.rows;
      })
      .catch((err) => {});
  }
};

onMounted(() => {
  getList();
  if (props.corpusIds) {
    getSelectList(props.corpusIds.split(","));
  }
});
</script>
<style lang="scss" scoped>
.btn-container {
  text-align: right;
  margin-bottom: 12px;
}
</style>