Пользователь пока ничего не рассказал о себе

Наибольший вклад в теги

Все теги (5)

Лучшие ответы пользователя

Все ответы (4)
  • Как убрать боковые полосы?

    @ajderha
    Полосы? Которые от body? Если я правильно поняла вопрос, то:
    body {
      margin: 0;
    }

    Если речь о классе .intro
    Ответ написан
    3 комментария
  • Как возвращать значение поля input в исходное состояние после нажатия кнопки отмены?

    @ajderha
    Компонент - 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>
    Ответ написан
    1 комментарий