ChargEco/Strides-Admin/src/views/site/components/WhiteListFleet.vue

<template>
  <div>
    <div
      class="rate-list-view"
      v-for="(item, index) in fleetWhitelist"
      :key="index">
      <el-form-item
        label-width="50px"
        label="Fleet">
        <el-select
          v-model="item.fleetCompanyId"
          style="margin-right: 10px;">
          <el-option
            v-for="item in companyOptions"
            :key="item.fleetCompanyId"
            :label="item.fleetCompanyName"
            :value="item.fleetCompanyId">
          </el-option>
        </el-select>
      </el-form-item>
      <img
        class="list-item-icon"
        @click="handleClickSubWhiteFleetButton(item, index)"
        src="../../../assets/form-list-sub.png"/>
      <img
        v-if="index === fleetWhitelist.length - 1"
        class="list-item-icon"
        @click="handleClickAddWhiteFleetButton"
        src="../../../assets/form-list-add.png"/>
    </div>
  </div>
</template>

<script>
import { fetchFleetCompanyOptions } from '@/http/api/driver'
export default {
  name: 'WhiteListFleet',
  props: {
    value: {
      type: Array,
      required: true
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    return{
      fleetWhitelist: [{
        //siteFleetId: "",
        fleetCompanyId: ''
      }],
      companyOptions: []
    }
  },
  watch: {
    value: {
      deep: true,
      handler(n, o) {
        this.fleetWhitelist = n;
      }
    }
  },
  mounted() {
    this.getCompanyOptions()
  },
  methods: {
    onChange() {
      this.$emit('change', this.fleetWhitelist);
    },
    getCompanyOptions() {
      fetchFleetCompanyOptions().then(res => {
        if (res.data) {
          this.companyOptions = res.data
        }
      })
    },
    handleClickAddWhiteFleetButton() {
      this.fleetWhitelist.push({
        fleetCompanyId: ''
      })
    },
    handleClickSubWhiteFleetButton(fleet, index) {
      if (fleet.siteFleetId) {
        this.$confirm('Are you sure you want to delete this fleet?', 'Delete', {
          confirmButtonText: 'Ok',
          cancelButtonText: 'Cancel',
          type: 'warning',
        }).then(() => {
          this.deleteWhiteFleet(fleet, index);
        })
      } else {
        this.fleetWhitelist.splice(index, 1)
        if (this.fleetWhitelist.length === 0) {
          this.handleClickAddWhiteFleetButton()
        }
      }
    },
    deleteWhiteFleet(fleet, index) {
      site.deleteWhitelistFleet({siteFleetId: fleet.siteFleetId}).then(res => {
        this.fleetWhitelist.splice(index, 1)
        if (this.fleetWhitelist.length === 0) {
          this.handleClickAddWhiteFleetButton()
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          message: error,
          title: 'Delete fleet failed'
        })
      })
    }
  }
}
</script>

<style scoped>
.rate-list-view {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.list-item-icon {
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin: 0 10px 22px;
}
</style>