Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <table class="table table-striped">
- <tbody>
- <tr>
- <th style="width: 10px"><input type="checkbox" name="all_elements" id="all_elements" class="" v-model="allSelected"></th>
- <th style="width: 10px">ID</th>
- <th>Город</th>
- <th>Создан</th>
- <th>Название</th>
- <th>Количество</th>
- <th>Артикул</th>
- <th>Статус</th>
- <th>Тип</th>
- </tr>
- <tr v-for="(element, index) in elements" :key="element.id">
- <td><input type="checkbox" :name="'checked' + element.id" :id="'checked' + element.id" class="" v-model="checked[index]" :key="'checkbox' + element.id"></td>
- <td>{{ element.id }}.</td>
- <td>{{ element.returnable && element.returnable.location.name || element.regradingable.location.name }}</td>
- <td>{{ element.created_at }}</td>
- <td>{{ element.product.name_ikea }} {{ element.product.name }}</td>
- <td>
- <span v-if="!checked[index]" :key="'quantity' + element.id">{{ element.quantity }}</span>
- <input v-else v-model="element.quantity" :id="element.id" type="text" class="form-control" style="width:50px" :key="'input_quantity' + element.id">
- </td>
- <td>{{ element.product.code_dots }}</td>
- <td>
- <span v-if="!checked[index]" :key="'status' + element.id">{{ element.status.name }}</span>
- <select v-else v-model="element.status.id" class="form-control input-group-sm" :id="'statuses' + element.id" :key="'select_status' + element.id">
- <option v-for="status in statuses" :key="status.id" :value="status.id">{{
- status.name}}
- </option>
- </select>
- </td>
- <td>{{ element.returnable_type && element.returnable_type || element.regradingable_type }}</td>
- </tr>
- <tr>
- <td colspan="9">
- <button type="button" id="save" class="btn btn-primary" @click="saveChanges">Сохранить изменения</button>
- </td>
- </tr>
- </tbody>
- </table>
- </template>
- <script>
- export default {
- props: ['elements', 'statuses', 'type'],
- mounted() {
- this.elements.forEach((item, index) => {
- this.checked[index] = false
- })
- //console.log(order.status)
- },
- methods: {
- saveChanges(){
- this.checked.forEach((item, index) => {
- if (item === true) {
- axios.put('/' + this.type + '/' + this.elements[index].id, {
- quantity: this.elements[index].quantity,
- product_return_status_id: this.elements[index].status.id,
- product_regrading_status_id: this.elements[index].status.id,
- })
- .then(response => {
- console.log(this.checked[index])
- this.checked[index] = false
- console.log(this.checked[index])
- this.$toast.open({
- message: 'Элемент успешно сохранен!',
- type: 'success',
- position: 'top'
- })
- })
- .catch(function (error) {
- console.log(error)
- });
- }
- })
- },
- },
- computed: {
- },
- data() {
- return {
- checked: [],
- allSelected: false
- };
- },
- watch: {
- allSelected(newValue, oldValue){
- this.elements.forEach((item, index) => {
- this.checked[index] = newValue
- })
- },
- checked: {
- handler: function (after, before) {
- // Return the object that changed
- console.log(after)
- if (after.indexOf(true) == -1 ) this.allSelected = false
- if (after.indexOf(false) == -1 ) this.allSelected = true
- },
- deep: true,
- }
- }
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement