app_hub/src/components/MaterialMarkaKO.vue

<template>
  <v-container fluid id="HM_DC">
    <v-card-text class="text-center headline black--text">Материалы КО по маркам стали за период
      {{ computedDateFormatted }}</v-card-text>
    <v-divider class="mx-0"></v-divider>

    <v-row>
      <v-col style="min-width:250px; max-width:250px;" cols="12">
        <v-menu v-model="datePickerMenu" :close-on-content-click="false" :nudge-right="40" :nudge-top="-5"
          transition="scale-transition" offset-y min-width="290px">
          <template v-slot:activator="{ on }">
            <v-text-field id="datePicker" class="datePicker" v-model="computedDateFormatted" prepend-icon="event"
              readonly v-on="on" single-line :disabled="loading" />
          </template>
          <v-date-picker no-title scrollable popover-align="center" v-model="dates"
            @input="input($event) && datePickerMenu" @change="refreshData()" range></v-date-picker>
        </v-menu>
      </v-col>

      <v-spacer></v-spacer>
      <v-col cols="12" sm="2" md="2" lg="2" xl="2">
        <v-text-field v-model="search" append-icon="mdi-magnify" label="Поиск" single-line hide-details clearable
          :disabled="loading"></v-text-field>
      </v-col>
    </v-row>

    <v-data-table item-key="MATERIAL_NAME" :headers="headers" :items="data.items" :loading="loading" :search="search"
      @click:row="rowClick" disable-pagination hide-default-footer dense>
    </v-data-table>
  </v-container>
</template>

<style>
.datePicker input {
  text-align: center;
  cursor: pointer;
}
</style>

<script>
let jsDate = new Date();
import { mapGetters, mapActions, } from "vuex";
export default {
  data: () => ({
    value: [],
    search: "",
    dates: [
      new Date(jsDate.getFullYear(), jsDate.getMonth(), jsDate.getDate())
        .toISOString()
        .substr(0, 10),
      new Date().toISOString().substr(0, 10)
    ],
    datePickerMenu: false
  }),
  computed: {
    ...mapGetters("MaterialMarkaKO", {
      loading: "loading",
      data: "data"
    }),
    computedDateFormatted() {
      let formatDates = [];
      formatDates.push(this.formatDate(this.dates[0]));
      formatDates.push(this.formatDate(this.dates[1]));
      return formatDates.join(" ~ ");
    },
    headers() {

      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      ctx.font = "12px Roboto, sans-serif";


      this.data.headers.forEach(element => {
        var metrics = ctx.measureText(element.text);
        var cellWidth = metrics.width;
        element.width = cellWidth + 65;
        element.align = "center";
        element.divider = true;
        if (element.value === "id") {
          element.align = " d-none";
        }
      });
      return this.data.headers;
    }
  },
  methods: {
    ...mapActions("MaterialMarkaKO", {
      getData: "getData",

    }),
    rowClick: function (item, row) {
      let selectState = row.isSelected ? false : true;
      row.select(selectState);
    },
    input(e) {
      if (e.length == 2) {
        this.datePickerMenu = false;
      }
    },
    formatDate(date) {
      if (!date) return null;
      const [year, month, day] = date.split("-");
      return `${day}.${month}.${year}`;
    },
    refreshData() {
      this.getData([
        this.formatDate(this.dates[0]),
        this.formatDate(this.dates[1])
      ]);
    }
  },
  mounted() {
    this.getData([
      this.formatDate(this.dates[0]),
      this.formatDate(this.dates[1])
    ]);
  }
};
</script>
<style>
.datePicker input {
  text-align: center;
  cursor: pointer;
}

#HM_DC .v-data-table-header {
  background-color: #fafafa !important;
}


#HM_DC .spacer {
  margin-top: 3em;
}

#HM_DC .divider {
  border-right: rgba(0, 0, 0, 0.12) solid 1px;
}

#HM_DC .v-data-table {
  border-left: thin solid rgba(0, 0, 0, 0.12);
  border-top: thin solid rgba(0, 0, 0, 0.12);
  border-bottom: thin solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
}

#HM_DC .v-data-table table>tbody>tr>td {
  border-right: thin solid rgba(0, 0, 0, 0.12);
}

#HM_DC #datePicker {
  text-align: center;
}

.theme--light.v-data-table tbody tr.v-data-table__selected {
  background: #f5c17d70 !important;
}

.theme--dark.v-data-table tbody tr.v-data-table__selected {
  background: #a17b4970 !important;
}

.theme--dark.v-data-table tbody tr.v-data-table__selected:hover {
  background: #a17b49c2 !important;
}

.theme--light.v-data-table tbody tr.v-data-table__selected:hover {
  background: #ffd296d2 !important;
}
</style>