CMVR-BID/src/views/is/project/plan/FunctionSelection.vue

<template>
  <div>
    <div class="btn-container">
      <el-button type="primary" @click="openDialog">功能选择</el-button>
    </div>
    <el-table :data="selectList" height="260">
      <el-table-column
        label="功能名称"
        align="center"
        prop="dictLabel"
        show-overflow-tooltip />
      <el-table-column
        label="功能图片"
        align="center"
        prop="textContent"
        show-overflow-tooltip
      />
    </el-table>

    <el-dialog title="选择功能" v-model="open" width="700px">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="功能名称" prop="dictLabel">
          <el-input
            v-model="queryParams.dictLabel"
            placeholder="请输入功能名称"
            clearable
            @keyup.enter="getList"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getList"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="tableRef"
        :data="functionList"
        :tree-props="{ checkStrictly: true }"
        :row-key="rowKey"
        :height="400"
        @row-click="rowClick"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          v-show="false"
          :selectable="selectable"
        />
        <el-table-column
          label="功能名称"
          align="center"
          prop="dictLabel"
          min-width="100"
          show-overflow-tooltip
        />
      </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 { getDictList } from '@/api/is/project/index'

const props = defineProps({
  selectIds: {
    type: Array,
    default: () => []
  },
  funcIds: {
    type: String,
    default: ''
  }
});

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

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

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

const toggleRowSelection = () => {
  if (selectList.value.length > 0) {
    functionList.value.forEach((row) => {
      selectList.value.forEach((item) => {
       
      });
    });
  }
};

const rowKey = (row) => {
  return row.dictCode;
};

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

const queryParams = ref({
    pageNum: 1,
    pageSize: 100000,
    dictLabel: '',
    continuous: 1
})

const getList = async () => {
  const res = await getDictList({
    dictType: 'ti_function_config',
    dictLabel: queryParams.value.dictLabel
  })
  if (res.code === 200) {
    functionList.value = res.rows
  }
};

const resetForm = () => {
  queryParams.value.dictLabel = ''
  getList()
}

const tableRef = ref();
const submitForm = () => {
  const rows = tableRef.value.getSelectionRows();
  selectList.value = rows;
  open.value = false;
  emits("updateSelectRows", rows);
  resetForm()
};

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

const getSelectList = (corpusIds) => {
  
};

const rowClick = (row) => {
  tableRef.value.toggleRowSelection(row)
}

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