vue el-table 判断数据重复问题？

Question

如上图，选择应用名称关联角色和资源分类，选择资源分类显示它下面拥有的“操作”，我提交授权之后，再次选择同样的会重复，怎么判断重复数据，然后将复选框禁用，

<template>
  <div class="role-perm">
    <div class="content">
      <fin-form :model="form" ref="form">
        <fin-form-item prop="appId" label="应用名称">
          <fin-select v-model="form.appId" placeholder="请选择应用" @change="handleAppChange">
            <fin-option
              v-for="item in appList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></fin-option>
          </fin-select>
        </fin-form-item>
        <fin-form-item prop="roleId" label="选择角色">
          <fin-select
            v-model="form.roleId"
            clearable
            placeholder="请选择角色"
            @change="handleRoleChange"
          >
            <fin-option
              v-for="item in roleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></fin-option>
          </fin-select>
        </fin-form-item>
        <fin-form-item prop="typeId" label="资源分类">
          <fin-select
            v-model="form.typeId"
            clearable
            placeholder="请选择资源"
            @change="handleResourceTypeChange"
          >
            <fin-option
              v-for="([value, label], index) in Object.entries(TYPE_MAP)"
              :label="label"
              :value="value"
              :key="`app-auth-type-${index}`"
            />
          </fin-select>
        </fin-form-item>
        <fin-form-item label="选择操作">
          <div class="operate-table">
            <form-search :elements="forms" @search="search"></form-search>
            <app-table
              ref="tableOperate"
              :service="tableOperateService"
              :columnTypes="columnTypes"
              :columns="columns"
              :beforeSearch="handleParams"
              :selectAble="handleIsSelect"
              rowKey="id"
              :pageOpt="{ layout: 'prev, pager, next', limit: 5 }"
              @selection-change="changeOperate"
              :immediateSearch="false"
            >
            </app-table>
          </div>
        </fin-form-item>
      </fin-form>
      <div class="add-organ-btn">
        <fin-button
          type="primary"
          :disabled="appList.length === 0 || roleList.length === 0 || checkedRows.length === 0"
          @click="addOperateAuth"
        >
          添加到权限
        </fin-button>
      </div>
      <perm-list :permissions="checkOperateAuths" @perm-delete="handleDeletePerm"></perm-list>
    </div>
    <div class="footer">
      <fin-button @click="goBack">取 消</fin-button>
      <fin-button type="primary" :disabled="checkOperateAuths.length === 0" @click="updateOrSave"
        >确 定</fin-button
      >
    </div>
  </div>
</template>
<script>
// import PermOperate from './components/PermOperate.vue';
// import PermScopeValue from './components/PermScopeValue.vue';
import AppTable from '@/components/appTable';
import PermList from './components/PermList.vue';
import FormSearch from '@/components/formSearch';
import {
  getUsersApps,
  getRoleAppid,
  getOperateList,
  createOperateAuth,
  getOperateAuthList,
} from '../../service';
export default {
  components: {
    PermList,
    AppTable,
    FormSearch,
  },
  data() {
    return {
      appList: [],
      roleList: [],
      resourceTypes: [],
      params: {},
      forms: [
        {
          prop: 'url',
          placeholder: '请输入资源地址',
        },
      ],
      form: {
        appId: '',
        roleId: '',
        typeId: '',
        roleName: '',
        appName: '',
        typeName: '',
      },
      checkOperateAuths: [],
      roleName: [],
      checkedRows: [],
      apiNames: [],
      disabledCheck: [],
      authList: [],
      appIdList: [],
    };
  },
  created() {
    const { TYPE_MAP } = this.$const;
    this.TYPE_MAP = TYPE_MAP;

    this.columnTypes = ['selection'];
    this.tableOperateService = getOperateList;
    this.columns = [
      { prop: 'name', label: '操作名称' },
      { prop: 'code', label: '操作编码' },
      { prop: 'type', label: '资源类型', formatter: (row) => TYPE_MAP[row.type] },
      { prop: 'url', label: '资源地址' },
    ];
    getUsersApps().then((res) => {
      this.appList = res.map((item) => ({
        label: item.name,
        value: item.id,
      }));
    });
    this.operateMap = {};
  },
  methods: {
    search(params) {
      if (params) {
        const obj = {};
        Object.entries(params).forEach(([key, value]) => {
          if (value) {
            obj[key] = value;
          }
        });
        this.params = obj;
      }
      this.$refs.tableOperate.search();
    },
    // 选择应用
    handleAppChange() {
      if (this.form.appId) {
        getRoleAppid({
          appId: this.form.appId,
        }).then((res) => {
          this.roleList = res.map((item) => ({
            label: item.name,
            value: item.id,
          }));
        });
      } else {
        this.roleList = [];
      }
      this.form.roleId = '';
      this.$nextTick(() => {
        this.$refs.tableOperate.search();
      });
    },
    // 选择角色
    handleRoleChange() {},
    // 选择资源
    handleResourceTypeChange() {
      if (this.form.appId) {
        this.$refs.tableOperate.search();
        getOperateList({ appId: this.form.appId }).then((res) => {
          this.appIdList = res.list;
          console.log('----appIdList', res.list);
        });
        getOperateAuthList({ roleId: this.form.roleId }).then((res) => {
          this.authList = res.list;
          console.log('----authList', res.list);
        });
      }
    },
    // 如果有重复数据则禁用复选框
    handleIsSelect(row) {
      console.log(row);
      if (this.disabledCheck.length) {
        return this.disabledCheck.indexOf(row.id) === -1;
      }
      return true;
    },
    changeOperate(rows) {
      this.checkedRows = rows;
    },
    addOperateAuth() {
      if (!this.form.roleId) {
        return this.$message.warning('请选择角色！');
      }
      if (!this.form.typeId) {
        return this.$message.warning('请选择资源分类！');
      }
      const app = this.appList.find((item) => item.value === this.form.appId);
      const appName = app.label;
      const role = this.roleList.find((item) => item.value === this.form.roleId);
      const roleName = role.label;
      this.checkedRows.forEach((item) => {
        let obj = {};
        obj.appId = this.form.appId;
        obj.appName = appName;
        obj.roleId = this.form.roleId;
        obj.roleName = roleName;
        obj.apiId = item.id;
        obj.operateName = item.name;
        obj.typeId = this.form.typeId;
        obj.typeName = this.TYPE_MAP[item.type];
        obj.url = item.url;
        const uid = `${obj.apiId}-${obj.typeId}`;
        if (!this.operateMap[uid]) {
          this.operateMap[uid] = true;
          this.checkOperateAuths.push(obj);
        } else {
          this.$message.success('已存在，请重新选择！');
        }
        this.$refs.tableOperate.clearSelections();
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    handleDeletePerm(index) {
      this.checkOperateAuths.splice(index, 1);
    },
    updateOrSave() {
      let params = [];
      this.checkOperateAuths.forEach((item) => {
        let obj = {};
        obj.apiId = item.apiId;
        obj.appId = item.appId;
        obj.roleId = item.roleId;
        params.push(obj);
      });
      createOperateAuth(params).then(() => {
        this.$message.success('创建角色资源权限成功！');
        this.goBack();
      });
    },
    handleParams(params) {
      const data = {
        ...params,
        ...this.params,
        appId: this.form.appId,
      };
      if (this.form.typeId) {
        data['type'] = this.form.typeId;
      }
      return data;
    },
  },
};
</script>