Concession Fee

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

Strides-Admin/src/views/tender/index.vue

@@ -0,0 +1,310 @@
+<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 tender type"
+          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="Package ID"
+        min-width="120">
+        <template slot-scope="{row}" >
+          <span
+            class="link-type"
+            @click="onClickEdit(row)"
+            v-if="!$route.meta.onlyView">
+            {{ row.tenderPackageId }}
+          </span>
+          <span v-else>{{ row.tenderPackageId }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="Tender Type"
+        prop="tenderType"
+        min-width="120"/>
+      <el-table-column
+        align="center"
+        label="Concession Fee"
+        prop="concessionFeeStr"
+        min-width="140"/>
+      <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="Create Date Time"
+        prop="createTime"
+        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>
+    <DialogDetail
+      v-bind="dialogAction"
+      @hide="hideActionDialog"/>
+    <AssignmentDialog
+      :visible="assign.visible"
+      title="ASSIGN SITES"
+      :item="assign.item"
+      @hide="assignSites"/>
+  </div>
+</template>
+
+<script>
+import api from '@/api/apiTender.js';
+import apiBase from "@/api/apiBase.js";
+import Pagination from '@/components/Pagination';
+import AssignmentDialog from './AssignmentDialog';
+import DialogDetail from './detail.vue'
+export default {
+  data() {
+    return {
+      enableDialogAction: true,
+      filter: {
+        pageNum: 1,
+        pageSize: 10,
+        pageCriteria: {
+          tenantId: "",
+          criteria: "",
+          dataStatus: "A"
+        }
+      },
+      options: {
+        status: [],
+        provider: []
+      },
+      table: {
+        loading: false,
+        total: 0,
+        list: []
+      },
+      assign: {
+        item: {},
+        visible: false
+      },
+      dialogAction: {
+        id: "",
+        isEdit: false,
+        visible: false
+      }
+    };
+  },
+  components: { Pagination, DialogDetail, AssignmentDialog },
+  created() {
+    this.getStatusOption();
+    //this.getProviderOptions();
+    this.toSearch();
+  },
+  methods: {
+    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.getTenderPages(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();
+      }
+    },
+    hideActionDialog(e) {
+      this.dialogAction.id = "";
+      this.dialogAction.visible = false;
+      if (e) {
+        this.getTableList();
+      }
+    },
+    onClickAdd() {
+      if (this.enableDialogAction) {
+        this.dialogAction.id = "";
+        this.dialogAction.isEdit = false;
+        this.dialogAction.visible = true;
+      } else {
+        this.$router.push({
+          path: "/financial-management/tender-packages/add"
+        })
+      }
+    },
+    onClickEdit(row) {
+      if (this.enableDialogAction) {
+        this.dialogAction.id = row.tenderPackageId;
+        this.dialogAction.isEdit = true;
+        this.dialogAction.visible = true;
+      } else {
+        this.$router.push({
+          path: "/financial-management/tender-packages/" + row.tenderPackageId
+        })
+      }
+    },
+    onClickDelete(row) {
+      this.$confirm('Are you sure you want to delete this package?', 'Delete', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      }).then(res => {
+        this.deleteTender(row.tenderPackageId);
+      })
+    },
+    deleteTender(id) {
+      this.table.loading = true;
+      api.deleteTenderById(id).then(res => {
+        this.$message({
+          type: 'success',
+          message: "Delete success."
+        })
+        this.getTableList()
+      }).catch(err => {
+        this.$message({
+          type: 'error',
+          message: err
+        })
+        this.table.loading = false;
+      })
+    } 
+  }
+}
+</script>
+
+<style scoped>
+.status-Active {
+  color: #009e81;
+}
+.status-Inactive {
+  color: #ff2332;
+}
+</style>