javascript - 避免删除子表正在使用的父表数据

Question

我有两个表，一个是国籍表(父表)，第二个是员工表(子表)我想在用户尝试删除子表正在使用的父表数据时弹出消息。( "您无法删除该记录，因为它正在被员工表使用”)我知道级联删除用于这种删除数据的操作，但我不希望数据被删除，它只能在原因之一是当它没有被子表使用时，我尝试了下面的代码，但我只能从表中获取一个ID。如果有人能帮助我，那就太好了。

我收到的错误是:

I get the first user nationality id for the second it pass the if function and jump to the delete section it means it does not show me the message I want it shows me the deleting conformation dialog box for deleting the data.

Nationality.vue 中的代码:

 <div class="card-body table-responsive p-0">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Nationality</th>
                  <th>Modify</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td colspan="3" align="center">
                    <p
                      v-if="Nationalities.data != undefined && Nationalities.data.length == 0"
                      class="text-center alert alert-danger"
                    >There is no data in the Table</p>
                  </td>
                </tr>
                <tr v-for="Nationality in Nationalities.data" :key="Nationality.id">
                  <td>{{Nationality.id}}</td>

                  <td>{{Nationality.nationality|UppCaseFirstLetter}}</td>

                  <!-- <td

                  >{{Nationality.nationality}}</td>-->

                  <td>
                    <a href="#" @click="editModal(Nationality)">
                      <i class="fa fa-edit"></i>
                    </a>|||
                    <a href="#" @click="deleteNationality(Nationality.id)">
                      <i class="fa fa-trash red"></i>
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

API 中的代码:

Route::get('chekemployeeNationality','API\EmployeeController@chekemployeeNationality'); 

 Route::apiResources(['nationality'=>'API\NationalityController']);

EmployeeController 中的代码:

public function chekemployeeNationality()
{
    return Employee::all();
}

NationalityController 中的代码:

public function index()
    {
         return Nationality::orderBy('nationality', 'ASC')->paginate(5);
    }

脚本中的代码:

export default {
  components: {
    Loading
  },
  data() {
    return {
      Nationalities: {},
      chekemployee: [],
      url: "api/chekemployeeNationality",
      form: new Form({
        id: "",
        nationality: ""
      })
    };
  },  
 methods: {
deleteNationality(id) {

      axios.get(this.url).then(response => {
        let data = response.data;

        data.forEach(element => {
          if (element.nationality_id == id) {
            toast.fire({
              type: "warning",
              title:

                "this id#" + element.nationality_id
            });
          } else {
            swal
              .fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, delete it!"
              })
              .then(result => {
                //Send request to the server
                if (result.value) {

                  this.form
                    .delete("api/nationality/" + id)
                    .then(() => {
                      swal.fire(
                        "Deleted!",
                        "Your file has been deleted.",
                        "success"
                      );
                      Fire.$emit("refreshPage");
                    })
                    .catch(e => {
                      console.log(e);
                    });
                }
              });
          }
        });

      });
},
loadNationalities() {
      if (this.$gate.isAdmin() || this.$gate.isUser()) {
        this.$Progress.start();
        axios
          .get("api/nationality")
          .then(({ data }) => (this.Nationalities = data));
        axios.get("api/employee").then(({ data }) => (this.employees = data));
        axios.get("api/chekemployeeNationality")
          .then(({ data }) => (this.chekemployeeNationality= data));

        this.$Progress.finish();
      }
    },
 created() {

    this.loadNationalities();

  }
}

Answer 1

三天后我终于找到了解决方案

del(id) {
      swal
        .fire({
          title: "Are you sure?",
          text: "You won't be able to revert this!",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "Yes, delete it!"
        })
        .then(result => {
          //Send request to the server
          if (result.value) {
            this.form
              .delete("api/nationality/" + id)
              .then(() => {
                swal.fire("Deleted!", "Your file has been deleted.", "success");
                Fire.$emit("refreshPage");
              })
              .catch(e => {
                console.log(e);
              });
          }
        });
},
deleteNationality(id) {
      this.data.forEach(element => {
        this.employees2.push(element.nationality_id);
        if (this.employees2.includes(id)) {
          toast.fire({
            type: "warning",
            title:
              " You Couldn't delete this Nationality because it is being used by employee"
          });
        } else {
          this.del(id);
        }

      });
    },