MaterialMarkaKO

src/components/MaterialMarkaKO.vue

@@ -0,0 +1,169 @@
+<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>