实现多选功能

<template>
  <div>
    <el-dialog
      title="添加个人标签"
      width="800px"
      top="6vh"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      @close="closeCallback(addRef, false)"
    >
      <el-form label-position="left" label-width="auto" :model="formData" :rules="rules" ref="addRef">
        <el-form-item label="标签分类" prop="labelTypeIdList">
          <el-tree-select
            v-model="formData.labelTypeIdList"
            :data="typeOptions"
            clearable
            multiple
            show-checkbox
            check-strictly
            placeholder="请选择"
            :fit-input-width="true"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="标签名称" prop="name">
          <el-input v-model="formData.name" clearable />
        </el-form-item>
        <el-form-item label="标签说明" prop="description">
          <el-input v-model="formData.description" clearable />
        </el-form-item>
        <el-form-item label="标签规则" prop="labelRuleIdList">
          <div class="tagBox" @click="tagClick">
            <el-tag
              v-for="(item, index) in tagList"
              @close="closeTag(index)"
              :key="index"
              style="margin: 5px"
              closable
              type="success"
            >
              {{ item.name }}
            </el-tag>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="saveData(addRef)">添加</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 个人标签规则列表弹窗 -->
    <el-dialog title="选择个人标签规则" width="50%" top="6vh" v-model="dialogVisibleRule" :close-on-click-modal="false">
      <el-form style="margin-top: 10px" :inline="true">
        <el-form-item label="规则名称">
          <el-input v-model="nameLabel" style="width: 200px" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table border :data="ruleList" style="width: 100%" ref="tableRef" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="name" label="规则名称" />
        <el-table-column prop="createUserName" label="创建人名称" />
        <el-table-column prop="operateTime" label="最后操作时间" />
      </el-table>
      <Pagination
        :pageable="pageable"
        style="display: flex; justify-content: flex-end; margin-top: 10px"
        :handle-size-change="handleSizeChange"
        :handle-current-change="handleCurrentChange"
      />
      <template #footer>
        <el-button @click="dialogVisibleRule = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { addLabelPerson } from "@/api/modules/label/personLabelApi";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { loadLabelRulePersonListApi } from "@/api/modules/label/labelrulepersonApi";
import Pagination from "@/components/ProTable/components/Pagination.vue";
// 获取 form 表单的 DOM
const addRef = ref<FormInstance>();
// 窗口是否可见
const dialogVisible = ref(false);
const dialogVisibleRule = ref(false);
const typeOptions = ref();
const ruleList = ref([]);
const tagList = ref<any>([]);
// 打开新增窗口
const openDialogCallBack = (val: any) => {
  dialogVisible.value = true;
  typeOptions.value = val;
  tagList.value = [];
};
const tableRef = ref<any>();
//打开规则窗口
const tagClick = () => {
  dialogVisibleRule.value = true;
  pageable.value.pageNum = 1;
  pageable.value.pageSize = 10;
  getRuleList();
};
const nameLabel = ref<any>("");
const pageable = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
});
//获取个人标签规则列表数据
const getRuleList = () => {
  const params: any = {
    pageNum: pageable.value.pageNum,
    pageSize: pageable.value.pageSize,
    name: nameLabel.value
  };
  loadLabelRulePersonListApi(params).then((res: any) => {
    ruleList.value = res.data.records;
    pageable.value.total = res.data.total;
    pageable.value.pageNum = res.data.current;
    pageable.value.pageSize = res.data.size;
    nextTick(() => {
      const checkIds = tagList.value.map((item: any) => item.id);
      ruleList.value.forEach((item: any) => {
        if (checkIds.includes(item.id)) {
          tableRef.value!.toggleRowSelection(item, true);
        } else {
          tableRef.value!.toggleRowSelection(item, false);
        }
      });
    });
  });
};
//搜索查询
const onSearch = () => {
  pageable.value.pageNum = 1;
  getRuleList();
};
//重置表单
const reset = () => {
  nameLabel.value = "";
  getRuleList();
};
// getRuleList();
//选择的列表数据
const multipleSelection = ref<any[]>([]);
//选择的数据
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};
const submit = () => {
  dialogVisibleRule.value = false;
  tagList.value = [...multipleSelection.value];
};
const handleSizeChange = (val: number) => {
  pageable.value.pageSize = val;
  getRuleList();
};
const handleCurrentChange = (val: number) => {
  pageable.value.pageNum = val;
  getRuleList();
};
//删除标签
const closeTag = (index: any) => {
  tableRef.value!.toggleRowSelection(tagList.value[index], undefined);
  tagList.value.splice(index, 1);
};
// 把openDialog方法暴露给父组件
defineExpose({ openDialogCallBack });

//表单数据
const formData = reactive<any>({
  labelTypeIdList: [],
  name: "",
  description: "",
  labelRuleIdList: []
});

// 表单校验规则
const rules = reactive<FormRules>({
  labelTypeIdList: [{ required: true, message: "【标签分类】不能为空", trigger: "change" }],
  name: [{ required: true, message: "【标签名称】不能为空", trigger: "blur" }]
});

/**
 * 保存数据
 * @param formEl
 */
const saveData = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  // 表单校验
  formEl.validate(async valid => {
    if (valid) {
      formData.labelRuleIdList = tagList.value.map((item: any) => item.id);
      const res: any = await addLabelPerson(formData);
      if (res.code === 200) {
        ElMessage.success(res.msg);
        dialogVisible.value = false;
        closeCallback(formEl, true);
      }
    }
  });
};

// 定义关闭窗口方法对象
interface FilterEmits {
  (e: "closeCallback", value: boolean): void;
}
// 定义给父组件的方法
const emit = defineEmits<FilterEmits>();

/**
 * 关闭窗口回调方法
 * @param formEl form表单的DOM
 * @param flag 是否刷新
 */
const closeCallback = (formEl: FormInstance | undefined, flag: boolean) => {
  if (!formEl) return;
  // 重置表单
  formEl.resetFields();
  // 执行父组件的方法
  emit("closeCallback", flag);
};
</script>
<style lang="scss" scoped>
.tagBox {
  min-height: 30px;
  width: 100%;
  border: 1px solid #eeeeee;
}
</style>