ChargEco/Strides-Admin/src/views/limit2/plans.vue

<template>
  <div class="plans-content">
    <div class="button-right">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="showAddPlan">
        Individual Plan
      </el-button>
    </div>
    <el-table
      v-loading="table.loading"
      :data="table.data">
      <el-table-column
        align="center"
        label="Amount"
        prop="planCredit"
        min-width="100"/>
      <el-table-column
        align="center"
        label="Date Created"
        prop="createTime"
        min-width="120"/>
      <el-table-column
        align="center"
        label="Assigned Users"
        prop="assignedUsers"
        min-width="120"/>
      <el-table-column
        align="center"
        label="Current Consumption"
        prop="currentConsumptionCredit"
        min-width="140"/>
      <el-table-column
        align="center"
        label="Action"
        min-width="80">
        <template slot-scope="{row, $index}">
          <el-dropdown
            class="action-dropdown"
            @command="(v) => handleCommand(v, row)">
            <i class="el-icon-more icon-action"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                command="assignPlan">
                Assign Users
              </el-dropdown-item>
              <el-dropdown-item
                command="deletePlan">
                Delete
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="right">
      <Pagination
        v-show="table.total"
        :total="table.total"
        :page.sync="filter.pageNum"
        :limit.sync="filter.pageSize"
        @pagination="getPlanList"/>
    </div>
    <el-dialog
      title="Individual Plan"
      :visible="addPlan.visible"
      :before-close="hideAddPlan"
      :close-on-click-modal="false"
      class="individual-plan-dialog">
      <div class="bold" style="padding-bottom: 15px;">Set Amount</div>
      <el-input
        class="add-text"
        v-model.number="addPlan.form.planCredit"
        maxlength="9"/>
      <div class="buttons">
        <el-button
          type="primary"
          class="cancel-button flex1"
          @click="hideAddPlan">
          Cancel
        </el-button>
        <el-button
          class="flex1"
          style="margin-left: 10px;"
          type="primary"
          :loading="addPlan.loading"
          @click="addPlanRow">
          Add
        </el-button>
      </div>
    </el-dialog>
    <assignment
      v-bind="dialogAssign"
      @hide="hideAssignDialog"/>
  </div>
</template>

<script>
import limit from '@/api/limit.js'
import Pagination from '@/components/Pagination'
import assignment from './assignment.vue'
export default {
  name: "plans",
  props: {
    id: {
      type: Number|String,
      default: ""
    },
    groupPk: {
      type: Number|String,
      default: ""
    }
  },
  data() {
    return {
      table: {
        total: 0,
        data: [],
        loading: false
      },
      filter: {
        pageNum: 1,
        pageSize: 10,
        pageCriteria: {
          criteria: "",
          groupCreditPk: ""
        }
      },
      addPlan: {
        visible: false,
        loading: false,
        form: {
          planCredit: "",
          groupCreditPk: ""
        }
      },
      dialogAssign: {
        item: {},
        groupPk: "",
        visible: false
      }
    };
  },
  components: {Pagination, assignment},
  mounted() {
    if (this.id) {
      this.addPlan.form.groupCreditPk = this.id;
      this.filter.pageCriteria.groupCreditPk =  this.id;
      this.getPlanList();
    }
  },
  methods: {
    getPlanList() {
      this.table.loading = true;
      limit.getCreditLimitPlanPages(this.filter).then(res => {
        if (res.data.totalRow && res.data.records) {
          this.table.data = res.data.records
          this.table.total = res.data.totalRow
        } else {
          this.table.data = []
          this.table.total = 0
        }
        this.table.loading = false;
      }).catch(err => {
        this.table.loading = false;
        this.table.data = [];
        this.table.total = 0;
      })
    },
    handleCommand(fuc, item) {
      this[fuc](item)
    },
    showAddPlan() {
      this.addPlan.visible = true;
    },
    hideAddPlan() {
      this.addPlan.visible = false;
      this.addPlan.form.planCredit = "";
    },
    addPlanRow() {
      this.addPlan.loading = true;
      limit.addCreditLimitPlan(this.addPlan.form).then(res => {
        this.$message.success("Added successfully.")
        this.hideAddPlan();
        this.getPlanList();
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
      }).finally(() => {
        this.addPlan.loading = false;
      });
    },
    assignPlan(item) {
      this.dialogAssign.item = item;
      this.dialogAssign.groupPk = this.groupPk;
      this.dialogAssign.visible = true;
    },
    deletePlan(item) {
      this.$confirm('Are you sure you want to delete this plan?', 'Delete', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(res => {
        this.handleDeletePlan(item.groupCreditPlanId)
      })
    },
    handleDeletePlan(id) {
      limit.deleteCreditLimitPlan(id).then(res => {
        this.$message({
          message: 'Delete successfully',
          type: 'success'
        });
        this.getPlanList();
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
      })
    },
    hideAssignDialog(e) {
      this.dialogAssign.item = {};
      this.dialogAssign.visible = false;
      if (e) {
        this.getPlanList();
        this.$emit("refresh");
      }
    }
  }
}
</script>

<style scoped>
.plans-content {
  position: relative;
}
.button-right {
  top: -55px;
  right: 0;
  position: absolute;
}
.individual-plan-dialog {
  padding-bottom: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.individual-plan-dialog >>> .el-dialog {
  width: 100%;
  max-width: 400px;
}
.buttons {
  display: flex;
  padding-top: 35px;
  align-items: center;
}
</style>