Загрузка данных из таблицы в базу данных? - PullRequest
Новая
       48

Загрузка данных из таблицы в базу данных?

0 голосов
/ 30 ноября 2018

У меня есть веб-приложение с таблицей отслеживания времени, где каждая строка представляет пользователя в базе данных, а в каждом столбце есть поле ввода, в котором пользователь будет указывать количество часов, отработанных в этот конкретный день.Скрипка, чтобы показать вам, как это выглядит: https://jsfiddle.net/L5u1fc0a/138/

По сути, как я могу быть уверен, что отправляю только новые данные в базу данных.Я хочу (очевидно) отобразить текущие значения в таблице, и я извлекаю эти данные и сохраняю их в Vue v-model (см. worklogs в скрипке) - эти данные в worklogs - это то, что заполняет таблицу,Моя проблема в том, что я не знаю, как справиться с дополнительными часами.Если пользователь добавляет еще один час к определенной дате и нажимает «Обновить» (в скрипте «Сохранить»), он отправит все значение данных worklogs, которое содержит все текущие значения + новое, так что если кто-точтобы добавить только один вход, он все равно отправит все в объекте worklogs.В скрипте, если вы введете новое значение где-нибудь и нажмете кнопку «Сохранить», вы увидите, что мой массив updateData также заполняет все существующие значения - как я могу отправлять только новые обновленные значения в базу данных?

1 Ответ

0 голосов
/ 01 декабря 2018

Вы не можете понять, что именно обновляется, если вы меняете данные по ходу работы.Вы должны держать их отдельно во время работы, а затем просто сохранить updateData.Поэтому я переименовал ваш worklogs в saved и сделал updateData объектом, который будет содержать записи того же типа, что и saved.

Я сделал вычисление, объединяющее saved иupdateData, и использовал это для границы value.Вы не можете использовать v-model здесь, потому что вы не можете записать отдельные элементы обратно в вычисляемый словарь.Но вам не нужно.При изменении вы обновляете updateData, а value остается согласованным.

(Примечание: если вы сделали каждый вход компонентом, вы могли бы использовать v-model, но все равно все было быдескриптор в родительском элементе.)

Функция save выполняет все вызовы внутреннего интерфейса, обновляет saved и очищает updateData. 

/* app instance */
new Vue({
  el: '#app',
    data() {
    	const currentDate = new Date();
    	return {
      saved: {
        "1,2018-11-01": "8", 
        "1,2018-11-02": "8",
        "2,2018-11-03": "10",
        "2,2018-11-04": "10"
				},
      updateData: {},
      users: [
          {id: 1, firstName: 'Jay', lastName: 'Carter', email: 'jayz@rocafella.com'},
          {id: 2, firstName: 'Day', lastName: 'Darter', email: 'dayz@rocafella.com'}
        ],
        secondHalf: false,
        selectedYear: currentDate.getFullYear(),
        selectedMonth: currentDate.getMonth() + 1,
        
    };
  },
  methods: {
    prevPeriod() {
      if (!this.secondHalf) {
        this.selectedMonth -= 1;
        this.secondHalf = !this.secondHalf;
      } else {
        this.secondHalf = !this.secondHalf;
      }
      if (this.selectedMonth < 1) {
        this.selectedYear -= 1;
        this.selectedMonth = 12;
      }
    },
    nextPeriod() {
      if (this.secondHalf) {
        this.selectedMonth += 1;
        this.secondHalf = !this.secondHalf;
      } else {
        this.secondHalf = !this.secondHalf;
      }
      if (this.selectedMonth > 12) {
        this.selectYear += 1;
        this.selectedMonth = 1;
      }
    },
    getMonth(date) {
      const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
      return months[date.getMonth()];
    },
    getWeekDay(date) {
      const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    	return days[date.getDay()];
    },
    setUpdateData(userId, day, event) {
      const key = this.dataKey(userId, day);
      const value = event.target.value;
      
      if (this.saved[key] !== value) {
      	this.$set(this.updateData, key, value);
      } else {
      	this.$delete(this.updateData, key);
      }
    },
    save() {
			// Presumably, this would go somewhere that would refresh saved, but
      // the ultimate effect is just to copy the updateData into saved and
      // empty updateData
			Object.assign(this.saved, this.updateData);
      this.updateData = {};
		},
    dataKey(userId, day) {
    	return `${userId},${this.convertDateString(day)}`;
    },
    convertDateString(date) {
      let isoWithTimezone = new Date(
        date.getTime() - date.getTimezoneOffset() * 60000
      ).toISOString();
      return isoWithTimezone.split("T")[0];
    }
  },
  
  computed: {
  	allData() {
    	return Object.assign({}, this.saved, this.updateData);
    },
    getDates() {
      const year = this.selectedYear;
      const month = this.selectedMonth;
      
      let currentDate = new Date(year, month - 1, 1);
      const dates = [];
      
      while (currentDate.getMonth() == month - 1) {
        dates.push(currentDate);
        currentDate = new Date(
        	currentDate.getFullYear(),
          currentDate.getMonth(),
        	currentDate.getDate() + 1
        );
      }
      
      if (this.secondHalf) {
        return dates.slice(15);
      } else {
        return dates.slice(0, 15);
			}
    },
  }
})
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
}


  
    {{this.selectedYear}} - {{this.selectedMonth}}
    
      
      
    
    
      
        
          
           {{getWeekDay(date)}}
        
        
          
           {{getMonth(date)}} {{date.getDate()}}
        
        
          
            
              {{user.firstName}}
            
            
              
            
          
        
      
    
    
  
  {{$data}}
...