Javascript 避免在子表中使用父表数据时删除它
我有两个表，一个是国籍表（父表），另一个是员工表（子表）。当用户试图删除子表正在使用的父表数据时，我想弹出消息。（“您无法删除此记录，因为员工表正在使用它”）我知道级联删除用于此类删除数据的操作，但我不希望删除数据。只有一种原因可以删除数据。当子表未使用该数据时，我尝试了blow代码，但我只能从表中获取一个id。如果有人能帮我，他会很好的 我得到的错误是：Javascript 避免在子表中使用父表数据时删除它,javascript,mysql,laravel,vue.js,axios,Javascript,Mysql,Laravel,Vue.js,Axios,我有两个表，一个是国籍表（父表），另一个是员工表（子表）。当用户试图删除子表正在使用的父表数据时，我想弹出消息。（“您无法删除此记录，因为员工表正在使用它”）我知道级联删除用于此类删除数据的操作，但我不希望删除数据。只有一种原因可以删除数据。当子表未使用该数据时，我尝试了blow代码，但我只能从表中获取一个id。如果有人能帮我，他会很好的 我得到的错误是： <div class="card-body table-responsive p-0"> <ta
<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>
Route::get('chekemployeeNationality','API\EmployeeController@chekemployeeNationality');
Route::apiResources(['nationality'=>'API\NationalityController']);
public function chekemployeeNationality()
{
return Employee::all();
}
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();
}
}
<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>
Route::get('chekemployeeNationality','API\EmployeeController@chekemployeeNationality');
Route::apiResources(['nationality'=>'API\NationalityController']);
public function chekemployeeNationality()
{
return Employee::all();
}
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();
}
}
<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>
Route::get('chekemployeeNationality','API\EmployeeController@chekemployeeNationality');
Route::apiResources(['nationality'=>'API\NationalityController']);
public function chekemployeeNationality()
{
return Employee::all();
}
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();
}
}
<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>
Route::get('chekemployeeNationality','API\EmployeeController@chekemployeeNationality');
Route::apiResources(['nationality'=>'API\NationalityController']);
public function chekemployeeNationality()
{
return Employee::all();
}
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();
}
}
<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>
Route::get('chekemployeeNationality','API\EmployeeController@chekemployeeNationality');
Route::apiResources(['nationality'=>'API\NationalityController']);
public function chekemployeeNationality()
{
return Employee::all();
}
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();
}
}
三天后，我终于找到了解决方案
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);
}
});
},