fe-accone/test/vuex/one-accone-list-task/components/oneApproveListData.vue

<template>
  <div>
    <!-- main layout -->
    <v-toolbar color="primary" dark>
      <v-toolbar-title class="white--text"
        >DAFTAR TUGAS KEUANGAN</v-toolbar-title
      >
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-card class="pa-2 mt-2">
      <div>
        <v-data-table
          :headers="headers"
          :items="listdata"
          :loading="loading"
          hide-actions
          class="elevation-1"
        >
          <template v-slot:items="props">
            <td class="text-xs-center">{{ props.item.type }}</td>
            <td class="text-xs-center">Jumlah pending bayar : <span class="font-weight-bold">{{ props.item.total }}</span></td>
            <td class="text-xs-center">{{ props.item.number }}</td>
            <td class="text-xs-center">{{ deFormatedDate(props.item.date) }}</td>
            <td class="text-xs-center">
                <v-btn color="blue" @click="openPaid(props.item)" title="Menuju ke halaman bayar" dark>Bayar
                    <v-icon dark right>forward</v-icon>
                </v-btn>
            </td>
          </template>
        </v-data-table>
      </div>
    </v-card>
  </div>
</template>

<style scoped>
  .date-type-table {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .flex-items-center {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .table.v-table tbody td,
  .table.v-table tbody tr {
    height: 40px;
  }

  .table.v-table thead tr {
    height: 40px;
  }
</style>

<script>
  module.exports = {
    components: {},
    data() {
      return {
        menuSelectedDate: false,
        menuSelectedEndDate: false,
        headers: [
          {
            text: "TIPE",
            align: "center",
            sortable: false,
            value: "no",
            width: "20%",
            class: "blue lighten-3 white--text",
          },
          {
            text: "JUMLAH TRANSAKSI",
            align: "center",
            sortable: false,
            value: "no",
            width: "20%",
            class: "blue lighten-3 white--text",
          },
          {
            text: "INFO NUMBER",
            align: "center",
            sortable: false,
            value: "no",
            width: "30%",
            class: "blue lighten-3 white--text",
          },
          {
            text: "TANGGAL",
            align: "center",
            sortable: false,
            value: "no",
            width: "15%",
            class: "blue lighten-3 white--text",
          },
          {
            text: "AKSI",
            align: "center",
            sortable: false,
            value: "action",
            width: "15%",
            class: "blue lighten-3 white--text",
          },
        ]
      };
    },
    mounted() {
        this.$store.dispatch("approve/search")
    },
    computed: {
      listdata() {
        return this.$store.state.approve.listdata;
      },
      loading: {
        get() {
          return this.$store.state.approve.loading;
        },
        set(val) {
          this.$store.commit("approve/update_loading", val);
        },
      },
      current_page: {
        get() {
          return this.$store.state.approve.current_page;
        },
        set(val) {
          this.$store.commit("approve/update_current_page", val);
        },
      },
      total_page: {
        get() {
          return this.$store.state.approve.total_page;
        },
        set(val) {
          this.$store.commit("approve/update_total_page", val);
        },
      },
      xsearch: {
        get() {
          return this.$store.state.approve.xsearch;
        },
        set(val) {
          this.$store.commit("approve/update_xsearch", val);
        },
      }
    },
    methods: {
    //   isSelected(p) {
    //     return (
    //       p.PurchaseRequestDirectNumber ==
    //       this.$store.state.prkacab.selectedMainTable
    //         .PurchaseRequestDirectNumber
    //     );
    //   },
      formatDate(date) {
        if (!date) return null;

        const [year, month, day] = date.split("-");
        return `${day}-${month}-${year}`;
      },
      deFormatedDate(date) {
        if (!date) return null;

        const [day, month, year] = date.split("-");
        return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
      },
      openPaid(val) {
        let status = val.status;
        let date = val.date

        if (val.flag === 'p') {
          location.href = "/one-ui/test/vuex/acc-one-cashier-v2/" + "?status=" + status + "&startdate=" + date
        } else if (val.flag === 'pc') {
          location.href = "/one-ui/test/vuex/acc-one-supplier-payment-cashier-v3/" + "?status=" + status + "&startdate=" + date
        } 
      }
    },
    watch: {

    },
  };
</script>