NUXT_FRONTEND/components/Admin/Module.vue

<template>
  <v-form max-width="400px" class="form-module">
    <h4>Список новостей</h4>
    <v-row class="mt-1 mb-5">
      <v-col cols="3" v-for="news in module.news" :key="news.id">
        <SectionNews
          @update="$emit('update')"
          :news="news"
          :news_container_id="module.id"
        />
      </v-col>
    </v-row>

    <v-text-field v-model="module.name" label="Название модуля"> </v-text-field>
    <v-text-field v-model="module.sorting" label="Сортировка модуля"> </v-text-field>

    <v-checkbox
      max-width="400"
      v-model="module.activity"
      label="Показывать модуль"
    ></v-checkbox>
    <v-img
      :src="
        img.relative_path
          ? 'https://api.amic.ru/' + img.relative_path
          : module.background_image_for_site
          ? 'https://api.amic.ru/uploads/news/images/' +
            module.background_image_for_site.file_name
          : ''
      "
    ></v-img>
    <v-file-input
      @change="handleFile('img', 1200, 800)"
      label="Картинка:"
      type="file"
      accept="image/*"
      ref="input"
    ></v-file-input>
    <v-row>
      <v-col>
        <h4>Начало активности</h4>
        <v-date-picker v-model="date" no-title scrollable>
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="menu = false"> Cancel </v-btn>
          <v-btn text color="primary" @click="$refs.menu.save(date)">
            OK
          </v-btn>
        </v-date-picker>
        <vue-timepicker v-model="time" format="HH:mm:ss"></vue-timepicker>
      </v-col>
      <v-col>
        <h4>Конец активности</h4>
        <v-date-picker v-model="endDate" no-title scrollable>
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="menu = false"> Cancel </v-btn>
          <v-btn text color="primary" @click="$refs.menu.save(date)">
            OK
          </v-btn>
        </v-date-picker>
        <vue-timepicker v-model="endTime" format="HH:mm:ss"></vue-timepicker>
      </v-col>
    </v-row>
    <v-btn @click="createModule">Обновить модуль</v-btn>
    <v-btn @click="deleteModule">Удалить модуль</v-btn>
  </v-form>
</template>

<script>
import VueTimepicker from "vue2-timepicker";
import "vue2-timepicker/dist/VueTimepicker.css";
export default {
  layout: "admin",
  components: {
    VueTimepicker,
  },
  props: {
    module: {
      type: Object,
    },
  },
  data() {
    return {
      img: {},
      endTime: "",
      endDate: "",
      date: "",
      time: "",
    };
  },
  mounted() {
    this.date = this.module.start_activity.split(" ")[0];
    this.time = this.module.start_activity.split(" ")[1];
    this.endTime = this.module.end_activity.split(" ")[1];
    this.endDate = this.module.end_activity.split(" ")[0];
  },
  methods: {
    handleFile(type, width, height) {
      let formData = new FormData();
      console.log(this.$refs.input.$refs.input.files[0]);
      formData.append("file", this.$refs.input.$refs.input.files[0]);
      formData.append("destination_width", width);
      formData.append("destination_height", height);
      formData.append("title", "example img");
      this.$axios
        .$post("authorized/admin/files/upload/image/news/raw", formData, {
          headers: {
            "Content-Type": `multipart/form-data;`,
          },
        })
        .then((res) => {
          this.img = res.data;
          return res;
        })
        .catch((err) => console.log(err));
    },
    createModule() {
      this.$axios.post("admin/containers/update", {
        type: "module",
        id: this.module.id,
        name: this.module.name,
        start_activity: this.start_activity,
        end_activity: this.end_activity,
        background_image_id: this.img.image_id,
        activity: this.module.activity,
        sorting: this.module.sorting
      });
    },
    deleteModule() {
      this.$axios.post("admin/containers/remove", {
        id: this.module.id,
      });
    },
  },
  computed: {
    start_activity() {
      return this.date + " " + this.time;
    },
    end_activity() {
      return this.endDate + " " + this.endTime;
    },
  },
};
</script>

<style lang="less">
.form-module {
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}
</style>