Develop Idle Fee Config page

https://dev.wormwood.com.sg/zentao/task-view-436.html

Strides-Admin/src/views/idle-fee/AssignmentDialog.vue

@@ -0,0 +1,311 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible="visible"
+    :before-close="onHide"
+    custom-class="points-assign-dialog">
+    <div class="filter-container filter-view">
+      <el-select
+        style="min-width: 70px; max-width: 120px;"
+        clearable
+        v-model="filter.pageCriteria.assignmentStatus"
+        placeholder="Status"
+        @change="onSearch">
+        <el-option
+          v-for="(item, index) in statusOptions"
+          :key="index"
+          :label="item"
+          :value="item"/>
+      </el-select>
+      <div style="flex: 1; min-width: 150px; max-width: 300px;">
+        <el-input
+          clearable
+          v-model="filter.pageCriteria.criteria"
+          placeholder="Search by Site Name or Service Provider"
+          @keyup.enter.native="onSearch"/>
+      </div>
+      <el-button
+        type="primary"
+        @click="onSearch">
+        Search
+      </el-button>
+    </div>
+    <div class="assign-table-actions">
+      <el-button
+        type="danger"
+        :disabled="selectRow.length == 0"
+        :loading="loading.unassign"
+        @click="unassignSites">
+        Batch Un-assign
+      </el-button>
+      <el-button
+        type="accent"
+        :disabled="selectRow.length == 0"
+        :loading="loading.assign"
+        @click="assignSites">
+        Batch Assign
+      </el-button>
+    </div>
+    <div class="table-view" v-loading="table.loading">
+      <el-table
+        :data="table.data"
+        height="100%"
+        class="no-border"
+        @selection-change="changeSelection"
+        v-if="visible">
+        <el-table-column
+          align="center"
+          label="Site Name"
+          prop="siteName"
+          min-width="130"/>
+        <el-table-column
+          align="center"
+          label="Address"
+          prop="address"
+          min-width="120"/>
+        <el-table-column
+          align="center"
+          label="Service Provider"
+          min-width="140">
+          <template slot-scope="{row}">
+            <div v-for="item in row.serviceProviders" :key="item">{{item}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          label="Assignment Status"
+          prop="assignmentStatus"
+          min-width="150"/>
+        <el-table-column
+          align="center"
+          label="Select"
+          type="selection"/>
+      </el-table>
+    </div>
+    <div class="center" style="margin-bottom: -20px;">
+      <Pagination
+        v-show="table.total"
+        :total="table.total"
+        :page.sync="filter.pageNum"
+        :limit.sync="filter.pageSize"
+        @pagination="getTableData"/>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import apiBase from '@/api/apiBase';
+import api from '@/api/apiIdle.js';
+import Pagination from '@/components/Pagination'
+export default {
+  name: "AssignmentDialog",
+  props: {
+    title: {
+      type: String,
+      default: "ASSIGN SITES"
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    item: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  components: {Pagination},
+  data() {
+    return {
+      filter: {
+        pageNum: 1,
+        pageSize: 10,
+        pageCriteria: {
+          criteria: "",
+          dynamicIdleFeeId: "",
+          assignmentStatus: ""
+        }
+      },
+      table: {
+        data: [],
+        total: 0,
+        loading: false
+      },
+      loading: {
+        assign: false,
+        unassign: false
+      },
+      selectRow: [],
+      statusOptions:[]
+    };
+  },
+  mounted() {
+    this.getStatusOptions();
+  },
+  watch: {
+    visible: {
+      handler(n, o) {
+        if (n) {
+          this.filter.pageCriteria.dynamicIdleFeeId = this.item.dynamicIdleFeeId;
+          this.onSearch();
+        }
+      }
+    }
+  },
+  methods: {
+    onHide() {
+      this.$emit("hide");
+    },
+    onSearch() {
+      this.filter.pageNo = 1;
+      this.getTableData();
+    },
+    getStatusOptions() {
+      apiBase.getAssignStatusOptions().then(res => {
+        if (res.data) {
+          this.statusOptions = res.data
+        }
+      }).catch(error => {
+        this.$message({
+          type: 'error',
+          message: error
+        })
+      })
+    },
+    getTableData() {
+      this.selectRow = []
+      this.table.loading = true;
+      api.getAssignIdleConfigPages(this.filter).then(res => {
+        if (res.data.totalRow && res.data.records) {
+          this.table.total = res.data.totalRow;
+          this.table.data = res.data.records;
+        } else {
+          this.table.total = 0;
+          this.table.data = [];
+        }
+        this.table.loading = false;
+      }).catch(error => {
+        this.$message({
+          type: 'error',
+          message: error
+        })
+        this.table.total = 0;
+        this.table.data = [];
+        this.table.loading = false;
+      })
+    },
+    changeSelection(val) {
+      this.selectRow = val;
+    },
+    getSelectIds() {
+      const ids = [];
+      this.selectRow.forEach(item => {
+        ids.push(item.sitePk)
+      })
+      return ids;
+    },
+    assignSites() {
+      const params = {
+        dynamicIdleFeeId: this.item.dynamicIdleFeeId,
+        sitePks: this.getSelectIds()
+      }
+      this.loading.assign = true;
+      api.assignIdleConfig(params).then(res => {
+        this.$message({
+          type: 'success',
+          message: res.msg || "Success"
+        })
+        this.getTableData()
+      }).catch(error => {
+        this.$message({
+          type: 'error',
+          message: error
+        })
+      }).finally(() => {
+        this.loading.assign = false;
+      })
+    },
+    unassignSites() {
+      const params = {
+        dynamicIdleFeeId: this.item.dynamicIdleFeeId,
+        sitePks: this.getSelectIds()
+      }
+      this.loading.unassign = true;
+      api.unassignIdleConfig(params).then(res => {
+        this.$message({
+          type: 'success',
+          message: res.msg || "Success"
+        })
+        this.getTableData()
+      }).catch(error => {
+        this.$message({
+          type: 'error',
+          message: error
+        })
+      }).finally(() => {
+        this.loading.unassign = false;
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  >>> .points-assign-dialog {
+    width: 65vw;
+    height: 90vh;
+    display: flex;
+    max-width: 1200px;
+    flex-direction: column;
+    margin-top: 5vh !important;
+  }
+  >>> .points-assign-dialog .el-dialog__header {
+    padding: 20px 20px 0;
+    font-weight: bold;
+  }
+  >>> .points-assign-dialog .el-dialog__body {
+    flex: 1;
+    padding: 20px;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+  }
+  .assign-table-actions {
+    display: flex;
+    padding-top: 5px;
+    flex-wrap: wrap-reverse;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  .points-assign-dialog .table-view {
+    flex: 1;
+    overflow-y: auto;
+    padding-top: 10px;
+    margin-bottom: -10px;
+  }
+  @media screen and (max-width: 1200px) {
+    .points-assign-dialog {
+      width: 70vw;
+    }
+  }
+  @media screen and (max-width: 1000px) {
+    .points-assign-dialog {
+      width: 80vw;
+    }
+  }
+  @media screen and (max-width: 800px) {
+    .points-assign-dialog {
+      width: 90vw;
+    }
+  }
+  @media screen and (max-width: 700px) {
+    .points-assign-dialog {
+      width: 99vw;
+    }
+  }
+  @media screen and (max-width: 320px) {
+    .points-assign-dialog {
+      width: 100%;
+      min-width: 300px;
+    }
+  }
+</style>

Strides-Admin/src/views/idle-fee/detail.vue

@@ -0,0 +1,568 @@
+<template>
+  <div class="container" v-loading="loading">
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="150px"
+      label-position="top">
+      <div class="content">
+        <div class="section-title">Idle Fee Config</div>
+        <div class="flexcr">
+          <el-form-item
+            label="Idle Fee Name:"
+            prop="idleFeeName"
+            class="add-input">
+            <el-input
+              v-model="form.idleFeeName"
+              maxlength="100"/>
+          </el-form-item>
+          <el-form-item
+            label="Country:"
+            prop="countryCode"
+            class="add-input">
+            <el-select
+              v-model="form.countryCode">
+              <el-option
+                v-for="item in options.country"
+                :key="item.name"
+                :label="item.name"
+                :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="Service Provider:"
+            prop="tenantId"
+            class="add-input"
+            v-if="false">
+            <el-select
+              v-model="form.tenantId">
+              <el-option
+                v-for="(item, index) in options.provider"
+                :key="index"
+                :label="item.key"
+                :value="item.tenantId"/>
+            </el-select>
+          </el-form-item>
+        </div>
+        <div class="flexcr">
+          <label class="el-form-item__label">Repeat:</label>
+          <div class="repeat-view">
+            （&nbsp;
+            <div
+              class="link-type"
+              v-for="(item, index) in options.shortcut"
+              :key="index"
+              @click="handleShortcut(item)">
+              <span>{{item.name}}</span>
+            </div>
+            &nbsp;）
+            <el-tooltip
+              effect="dark"
+              content="This is an items for quickly selecting the repeats"
+              placement="right">
+              <i class="el-icon-question icon-help"></i>
+            </el-tooltip>
+          </div>
+        </div>
+        <div style="margin-bottom: 10px;">
+          <el-checkbox-group
+            v-model="form.repeatDays">
+            <el-checkbox-button
+              v-for="(item, index) in options.repeat"
+              :label="item.value"
+              :key="index">
+              {{item.name}}
+            </el-checkbox-button>
+          </el-checkbox-group>
+        </div>
+        <div class="flexcr">
+          <el-form-item
+            label="All Day:"
+            class="add-input">
+            <el-switch
+              v-model="form.allDay"
+              @change="changeAllday"/>
+          </el-form-item>
+          <template v-if="form.allDay">
+            <el-form-item
+              label="Start Time:"
+              class="add-input">
+              <el-input disabled/>
+            </el-form-item>
+            <el-form-item
+              label="End Time:"
+              class="add-input">
+              <el-input disabled/>
+            </el-form-item>
+          </template>
+          <template v-else>
+            <el-form-item
+              label="Start Time:"
+              class="add-input"
+              prop="startTime">
+              <el-time-picker
+                v-model="form.startTime"
+                format="HH:mm"
+                value-format="HH:mm"
+                clearable/>
+            </el-form-item>
+            <el-form-item
+              label="End Time:"
+              class="add-input"
+              prop="endTime">
+              <el-time-picker
+                v-model="form.endTime"
+                format="HH:mm"
+                value-format="HH:mm"
+                clearable/>
+            </el-form-item>
+          </template>
+        </div>
+        <div class="flexcr">
+          <el-form-item
+            label="Grace Period (Minutes):"
+            class="add-input"
+            prop="idleGracePeriod">
+            <el-input
+              v-model="form.idleGracePeriod"
+              maxlength="5"/>
+          </el-form-item>
+          <el-form-item
+            :label="'Idle Fee (' + currencyData[form.countryCode] + '):'"
+            class="add-input"
+            prop="idleFee">
+            <el-input
+              v-model="form.idleFee"
+              maxlength="10"/>
+          </el-form-item>
+          <el-form-item
+            label="Interval (Minutes):"
+            class="add-input"
+            prop="idleInterval">
+            <el-input
+              v-model="form.idleInterval"
+              maxlength="5"/>
+          </el-form-item>
+          <el-form-item
+            label="Set Cap:"
+            class="add-input"
+            prop="idleFeeCap">
+            <el-input
+              v-model="form.idleFeeCap"
+              maxlength="10"/>
+          </el-form-item>
+        </div>
+      </div>
+      <div class="content flexcr">
+        <div class="buttons">
+          <el-button
+            @click="onBack"
+            type="primary"
+            class="cancel-button">
+            Cancel
+          </el-button>
+          <el-button
+            @click="onClickSave"
+            type="primary"
+            :loading="loadingSave">
+            &nbsp;Save&nbsp;
+          </el-button>
+        </div>
+        <audit-view :audit="form.audit"/>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import site from '../../http/api/site'
+import api from '@/api/apiIdle.js';
+//import apiBase from "@/api/apiBase.js";
+import apiRate from '@/http/api/rates'
+import settings from '../../settings.js'
+import AuditView from "@/components/AuditView"
+export default {
+  data() {
+    return {
+      loading: false,
+      loadingSave: false,
+      isEdit: false,
+      form: {
+        dynamicIdleFeeId: "",
+        tenantId: "",
+        idleFeeName: "",
+        countryCode: settings.defaultCountry,
+        repeatDays: [],
+        allDay: false,
+        startTime: "",
+        endTime: "",
+        idleGracePeriod: "",
+        idleInterval: "",
+        idleFee: "",
+        idleFeeCap: "",
+        audit: {}
+      },
+      options: {
+        provider: [],
+        country: [],
+        repeat: [],
+        shortcut: [{
+          name: "Daily",
+          value: [],
+          all: true
+        },{
+          name: "Weekday",
+          value: ["Mon","Tue","Wed","Thu","Fri"]
+        },{
+          name: "Weekend",
+          value: ["Sat","Sun"]
+        }, {
+          name: "None",
+          value: []
+        }]
+      },
+      currencyData: {
+        SG: "S$"
+      },
+      rules: {
+        idleFeeName: {
+          required: true,
+          trigger: "blur",
+          message: "Please input rate name"
+        },
+        tenantId: {
+          required: true,
+          trigger: "blur",
+          message: "Provider is required"
+        },
+        idleGracePeriod: [{
+          required: true,
+          trigger: 'blur',
+          message: 'Grace period is required',
+        }, {
+          pattern: /^\d+$/,
+          trigger: 'blur',
+          message: 'Please type a correct number',
+        }],
+        idleFee: [{
+          required: true,
+          trigger: 'blur',
+          message: 'Idle fee is required',
+        }, {
+          pattern: /^\d+(\.\d+)?$/,
+          trigger: 'blur',
+          message: 'Please type a correct fee',
+        }],
+        idleInterval: [{
+          required: true,
+          trigger: 'blur',
+          message: 'Interval is required',
+        }, {
+          pattern: /^\d+$/,
+          trigger: 'blur',
+          message: 'Please type a correct number',
+        }],
+        idleFeeCap: [{
+          required: true,
+          trigger: 'blur',
+          message: 'Cap is required',
+        }, {
+          pattern: /^\d+(\.\d+)?$/,
+          trigger: 'blur',
+          message: 'Please type a correct fee',
+        }],
+        startTime: {
+          required: true,
+          trigger: "change",
+          message: "Please select start time"
+        },
+        endTime: {
+          required: true,
+          trigger: "change",
+          message: "Please select end time"
+        }
+      }
+    }
+  },
+  components: {AuditView},
+  created() {
+    this.loading = true;
+    this.getCountryOptions();
+    this.getProviderOptions();
+    if (this.$route.params.id) {
+      this.isEdit = true;
+      this.getIdleFeeDetail();
+    }
+  },
+  methods: {
+    onBack() {
+      this.$nextTick(() => {
+        this.$router.replace({
+          path: "/site-management/idle-fee-configuration"
+        })
+      })
+    },
+    getCountryOptions() {
+      site.getCountryList().then(res => {
+        if (res.data) {
+          this.options.country = res.data
+          const sign = {}
+          res.data.forEach(item => {
+            sign[item.value] = item.currencySymbol
+          })
+          this.currencyData = sign;
+        }
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      })
+    },
+    /*getProviderOptions() {
+      apiBase.getProviderList().then(res => {
+        if (res.data && res.data.length > 0) {
+          this.options.provider = res.data
+          this.form.tenantId = this.options.provider[0].tenantId;
+        }
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      }).finally(() => {
+        this.getRepeatOptions();
+      })
+    },*/
+    getRepeatOptions() {
+      apiRate.getRepeatOptions().then(res => {
+        if (res.data) {
+          this.options.repeat = res.data
+        }
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      }).finally(() => {
+        this.loading = false;
+      })
+    },
+    getIdleFeeDetail() {
+      this.loading = true;
+      api.getIdleFeeById(this.$route.params.id).then(res => {
+        if (res.data) {
+          this.form = res.data;
+        }
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      }).finally(() => {
+        this.loading = false;
+      })
+    },
+    handleShortcut(shortcut) {
+      const select = []
+      if (shortcut.all) {
+        this.options.repeat.forEach(item => {
+          select.push(item.value)
+        })
+      } else {
+        select.push(...shortcut.value)
+      }
+      this.form.repeatDays = select;
+    },
+    changeAllday(all) {
+      if (all) {
+        this.form.startTime = "";
+        this.form.endTime = "";
+        this.$refs.form.clearValidate()
+      }
+    },
+    onClickSave() {
+      this.$refs.form.validate(result => {
+        if (result) {
+          if (this.form.repeatDays.length == 0) {
+            this.$message({
+              message: "Please select at least one repeat day",
+              type: 'error',
+              duration: 3000,
+            })
+            return;
+          }
+          this.loadingSave = true;
+          this.isEdit ? this.updateIdleFee() : this.addIdleFee();
+        }
+      });
+    },
+    addIdleFee() {
+      api.saveIdleFee(this.form).then(res => {
+        this.$message({
+          type: 'success',
+          message: "Successfully added"
+        });
+        this.onBack();
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        });
+      }).finally(() => {
+        this.loadingSave = false;
+      });
+    },
+    updateIdleFee() {
+      api.updateIdleFee(this.form).then(res => {
+        this.$message({
+          type: 'success',
+          message: "Successfully updated"
+        });
+        this.onBack();
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        });
+      }).finally(() => {
+        this.loadingSave = false;
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import '../../styles/variables.scss';
+  .container {
+    width: 100%;
+    padding: 20px 60px;
+    min-height: $mainAppMinHeight;
+    background-color: #F0F5FC;
+  }
+  .content {
+    margin: 0 8px 16px;
+    padding: 15px 80px;
+    border-radius: 6px;
+    background-color: white;
+  }
+  
+  .section-title {
+    color: #333;
+    margin-top: 20px;
+    margin-bottom: 30px;
+    font-size: 15px;
+    user-select: none;
+    line-height: 24px;
+    font-weight: bold;
+    font-family: sans-serif;
+    text-transform: uppercase;
+  }
+  
+  .section-sub-title {
+    font-size: 14px;
+    padding-left: 5px;
+    font-weight: normal;
+  }
+  
+  .add-text {
+    width: 100%;
+    min-width: 100px;
+    max-width: 300px;
+  }
+  .add-text ::v-deep .el-textarea__inner {
+    font-family: sans-serif;
+  }
+  .add-input {
+    width: 100%;
+    min-width: 100px;
+    max-width: 250px;
+    margin-right: 15px;
+    ::v-deep .el-input,
+    ::v-deep .el-select {
+      width: 100%;
+    }
+  }
+  
+  .icon-help {
+    color: #999;
+    font-size: 15px;
+    cursor: pointer;
+  }
+  
+  .form-photo {
+    flex: 1;
+    ::v-deep .el-form-item__label {
+      padding: 12px;
+      line-height: 16px;
+    }
+    .photo-uploader {
+      margin-right: 10px;
+      .uploader-image {
+        width: 180px;
+        height: 120px;
+        text-align: left;
+      }
+      ::v-deep img {
+        object-fit: cover;
+      }
+      .avatar-uploader-icon {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 28px;
+        color: #8c939d;
+        width: 120px;
+        height: 120px;
+        line-height: 120px;
+        text-align: center;
+      }
+    }
+  }
+  .repeat-view {
+    display: flex;
+    font-size: 14px;
+    font-weight: bold;
+    align-items: center;
+    padding: 0 10px 10px;
+    .link-type + .link-type {
+      margin-left: 10px;
+      &::after {
+        left: -7px;
+        color: #333;
+        content: "|";
+        font-weight: normal;
+        position: absolute;
+      }
+    }
+  }
+  .hr {
+    height: 2px;
+    margin: 10px -40px;
+    background-color: #F0F5FC;
+  }
+  .buttons {
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+  @media screen and (max-width: 1200px) {
+    .add-input {
+      min-width: 80px;
+      max-width: 200px;
+    }
+  }
+  @media screen and (max-width: 500px) {
+    .container {
+      padding: 0px;
+    }
+    .content {
+      padding: 15px 30px;
+    }
+    .add-input {
+      max-width: unset;
+      margin-right: 0px;
+    }
+  }
+</style>

Strides-Admin/src/views/idle-fee/index.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container filter-view">
+      <el-select
+        class="filter-view-item"
+        placeholder="Service Provider"
+        v-model="filter.pageCriteria.tenantId"
+        @change="toSearch"
+        v-if="false">
+        <el-option
+          v-for="(item, index) in options.provider"
+          :key="index"
+          :label="item.key"
+          :value="item.tenantId"/>
+      </el-select>
+      <el-select
+        v-model="filter.pageCriteria.dataStatus"
+        placeholder="Status"
+        @change="toSearch"
+        class="filter-view-item"
+        clearable>
+        <el-option
+          v-for="(item,index) in options.status"
+          :key="index"
+          :label="item.key"
+          :value="item.value"/>
+      </el-select>
+      <div style="flex: 1; max-width: 300px;">
+        <el-input
+          class="filter-view-item"
+          v-model="filter.pageCriteria.criteria"
+          placeholder="Search by Idle Fee Name"
+          prefix-icon="el-icon-search"
+          @keyup.enter.native="toSearch"
+          @change="toSearch"
+          clearable/>
+      </div>
+      <div
+        class="filter-flex-button"
+        v-if="!$route.meta.onlyView">
+        <el-button
+          icon="el-icon-plus"
+          type="primary"
+          @click="onClickAdd">
+          Create
+        </el-button>
+      </div>
+    </div>
+    <el-table
+      v-loading="table.loading"
+      :data="table.list">
+      <el-table-column
+        align="center"
+        label="Idle Fee Name"
+        prop="idleFeeName"
+        min-width="140"/>
+      <el-table-column
+        align="center"
+        label="Service Provider"
+        prop="serviceProvider"
+        min-width="140"
+        v-if="false"/>
+      <el-table-column
+        align="center"
+        label="No. of Sites Configured"
+        prop="assignedSiteCount"
+        min-width="180">
+        <template v-slot="{ row }">
+          <span v-if="$route.meta.onlyView">{{ row.siteCount }}</span>
+          <div
+            class="link-type"
+            @click="assignSites(row)"
+            v-else>{{row.siteCount}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="Status"
+        min-width="100">
+        <template slot-scope="{row}">
+          <div :class="'status-' + row.dataStatus">
+            {{row.dataStatus}}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="Update Date Time"
+        prop="updateTime"
+        min-width="140"/>
+      <el-table-column
+        align="center"
+        label="Action"
+        min-width="70"
+        v-if="!$route.meta.onlyView">
+        <template v-slot="{ row }">
+          <el-dropdown
+            class="action-dropdown"
+            @command="(v) => handleCommand(v, row)"
+            v-if="row.dataStatus != 'Inactive'">
+            <i class="el-icon-more icon-action"></i>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                command="assignSites">
+                Assign Sites
+              </el-dropdown-item>
+              <el-dropdown-item
+                command="onClickEdit">
+                Edit
+              </el-dropdown-item>
+              <el-dropdown-item
+                command="onClickDelete">
+                Delete
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="right">
+      <Pagination
+        v-show="table.total > 0"
+        :total="table.total"
+        :page.sync="filter.pageNum"
+        :limit.sync="filter.pageSize"
+        @pagination="getTableList" />
+    </div>
+    <AssignmentDialog
+      :visible="assign.visible"
+      :title="'ASSIGN SITES (CONFIG NAME: ' + assign.item.idleFeeName + ')'"
+      :item="assign.item"
+      @hide="assignSites"/>
+  </div>
+</template>
+
+<script>
+import api from '@/api/apiIdle.js';
+//import apiBase from "@/api/apiBase.js";
+import Pagination from '@/components/Pagination';
+import AssignmentDialog from './AssignmentDialog';
+export default {
+  data() {
+    return {
+      filter: {
+        pageNum: 1,
+        pageSize: 10,
+        pageCriteria: {
+          tenantId: "",
+          criteria: "",
+          dataStatus: "A"
+        }
+      },
+      options: {
+        status: [],
+        provider: []
+      },
+      table: {
+        loading: false,
+        total: 0,
+        list: []
+      },
+      assign: {
+        item: {},
+        visible: false
+      }
+    };
+  },
+  components: { Pagination, AssignmentDialog },
+  created() {
+    this.getStatusOption();
+    //this.getProviderOptions();
+  },
+  methods: {
+    /*getProviderOptions() {
+      apiBase.getProviderList().then(res => {
+        if (res.data) {
+          this.options.provider = res.data
+          if (this.options.provider.length > 0) {
+            this.filter.pageCriteria.tenantId = this.options.provider[0].tenantId;
+            this.toSearch();
+          }
+        }
+      }).catch(err => {
+        
+      })
+    },*/
+    getStatusOption() {
+      apiBase.getDataStatusOptions().then(res => {
+        if (res.data && res.data.length > 0) {
+          this.options.status = res.data;
+        }
+      }).catch(err => {
+        
+      })
+    },
+    toSearch() {
+      this.filter.pageNum = 1;
+      this.getTableList();
+    },
+    getTableList() {
+      this.table.loading = true;
+      api.getIdleFeePages(this.filter).then(res => {
+        if (res.data.totalRow && res.data.records) {
+          this.table.list = res.data.records
+          this.table.total = res.data.totalRow
+        } else {
+          this.table.list = []
+          this.table.total = 0
+        }
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        });
+        this.table.list = []
+        this.table.total = 0
+      }).finally(() => {
+        this.table.loading = false;
+      });
+    },
+    handleCommand(cb, item) {
+      this[cb](item)
+    },
+    assignSites(row) {
+      if (row) {
+        this.assign.item = row;
+        this.assign.visible = true;
+      } else {
+        this.assign.item = {};
+        this.assign.visible = false;
+        this.getTableList();
+      }
+    },
+    onClickAdd() {
+      this.$router.push({
+        path: "/site-management/idle-fee-configuration-add"
+      })
+    },
+    onClickEdit(row) {
+      this.$router.push({
+        path: "/site-management/idle-fee-" + row.dynamicIdleFeeId
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+.status-Active {
+  color: #009e81;
+}
+.status-Inactive {
+  color: #ff2332;
+}
+</style>