Компонент - teacher
<template>
<div>
<table_prepod
v-for="(value, key) in dayNames"
:key="key"
ref="table_prepod"
:dayName="value"
:dayData="daysData[key]"
@save="onSave($event, key)"
@remove="onRemove($event, key)"
/>
</div>
</template>
<script>
import table_prepod from "./table_prepod";
const dayNames = {
Monday: 'Понедельник',
Tuesday: 'Вторник' // и т.д.
}
export default {
components:{
table_prepod
},
data() {
return {
dayNames,
id_prepod: 0, fio_prepod: "", name_predmet: "", id_user: "", now_time: new Date(""),
daysData: {
Monday: [
[1, "2021-02-01 08:15:00", "21-Э-95", "Проектирование баз данных", "Тема", 1, "Д.З."],
[1, "2021-02-01 09:55:00", "11-А-96", "Проектирование баз данных", "Тема", 2, "Д.З."],
[1, "2021-02-01 11:35:00", "13-С-94", "Проектирование баз данных", "Тема", 3, "Д.З."]
],
Tuesday:[],
Wednesday:[],
Thursday:[],
Friday:[]
}
}
},
methods: {
// async
onSave(data, dayName) {
console.log('onSave::data', data.model)
console.log('onSave::dayName', dayName)
// await saving
this.daysData[dayName] = data.model
// then
data.cb()
},
// async
onRemove(data, dayName) {
console.log('onDelete::data', data.rowsIndex)
console.log('onDelete::dayName', dayName)
// await saving
this.daysData[dayName] = this.daysData[dayName].filter((_, i) => !data.rowsIndex.includes(i))
// then
data.cb()
}
}
}
</script>
Компонент - table_prepod
<template>
<div>
<p class="p_table1">{{ dayName }}</p>
<table cellspacing="0">
<tr>
<th>Время</th>
<th>Группа</th>
<th>Название предмета</th>
<th>Тема</th>
<th>Аудитория</th>
<th>Д.З.</th>
</tr>
<tr v-for="(row, rowIndex) in model" :key="row[1]">
<td
v-for="(field, index) in row.filter((_, i) => (i !== 0))"
:key="`${field}-${index}`"
>
<input
v-model="row[index]"
@input="onInputField(rowIndex, index, $event.target.value)"
/>
</td>
</tr>
</table>
<div v-if="changedRowsIndex.length">
<button v-on:click="save()">Сохранить изменения</button>
<button v-on:click="remove()">Удалить изменённые записи</button>
<button v-on:click="back()">Отмена изменений</button>
</div>
</div>
</template>
<script>
export default {
props: {
dayName: {
type: String,
default: "",
},
dayData: {
type: Array,
},
},
data() {
return {
model: [],
changedRowsIndex: []
};
},
watch: {
dayData: {
immediate: true,
deep: true,
handler(to) {
this.setModel();
},
},
},
methods: {
setModel() {
this.model = this.dayData.map((x) => x.map((y) => y));
},
back() {
this.setModel();
this.changedRowsIndex = []
},
onInputField(rowIndex, fieldIndex, value) {
if (this.dayData[rowIndex][fieldIndex] !== value) {
if (this.changedRowsIndex.indexOf(rowIndex) === -1) {
this.changedRowsIndex.push(rowIndex)
}
} else {
const isRowChanged = this.dayData[rowIndex].map((x, i) => x === this.model[rowIndex][i]).some((x) => !x)
if (!isRowChanged) {
this.changedRowsIndex = this.changedRowsIndex.filter((i) => i !== rowIndex)
}
}
},
clearChanges() {
this.changedRowsIndex = []
},
save() {
// если нужно - выкидываем наверх
this.$emit("save", {
model: this.model,
cb: () => this.clearChanges()
});
// либо из этого компонента отправляем - тогда затем this.clearChanges()
},
remove() {
// если нужно - выкидываем наверх
this.$emit('remove', {
rowsIndex: this.changedRowsIndex,
cb: () => this.clearChanges()
})
// либо из этого компонента отправляем - тогда затем this.clearChanges()
}
},
};
</script>
