Report site selection

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

Strides-Admin/src/views/report/DialogSiteSelection.vue

@@ -0,0 +1,276 @@
+<template>
+  <el-dialog
+    title="Site Selection"
+    :visible="visible"
+    :before-close="onHide"
+    class="site-selection-dialog">
+    <div class="filter-container filter-view">
+      <el-select
+        style="min-width: 80px; max-width: 150px;"
+        clearable
+        v-model="filter.pageVo.providerPk"
+        placeholder="Service Provider"
+        @change="refreshList">
+        <el-option
+          v-for="(item, index) in providerOptions"
+          :key="index"
+          :label="item.providerName"
+          :value="item.providerPk"/>
+      </el-select>
+      <div style="flex: 1; min-width: 150px; max-width: 300px;">
+        <el-input
+          clearable
+          v-model="filter.pageVo.criteria"
+          placeholder="Search by Site Name, Address, Carpark Code"
+          @keyup.enter.native="refreshList"/>
+      </div>
+      <el-button
+        type="primary"
+        @click="refreshList">
+        Search
+      </el-button>
+    </div>
+    <div class="flexr flex1">
+      <div class="flex1 flexl">
+        <div class="table-view" v-loading="listLoading">
+          <el-table
+            :data="siteList"
+            height="100%"
+            @selection-change="changeSelection">
+            <el-table-column
+              label="Site Name"
+              prop="siteName"
+              align="center"
+              min-width="200"/>
+            <el-table-column
+              label="Address"
+              prop="siteAddress"
+              align="center"
+              width="150">
+              <template slot-scope="{row}">
+                <span :title="row.siteAddress">{{ row.siteAddress }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              label="Service Provider"
+              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="Select"
+              type="selection"
+              width="50"/>
+          </el-table>
+        </div>
+        <div>
+          <pagination
+            :total="table.total"
+            :page.sync="filter.pageNo"
+            :limit.sync="filter.pageSize"
+            @pagination="getList" />
+        </div>
+      </div>
+      <div class="flex1 flexl" style="width: 30%; margin-left: 20px;">
+        <div class="table-view">
+          <el-table
+            :data="selectedSite"
+            height="100%">
+            <el-table-column
+              :label="'Select Site (' + selectedSite.length  + ')'"
+              prop="siteName"
+              align="center"
+              min-width="200"/>
+            <el-table-column
+              label="Action"
+              prop="siteAddress"
+              align="center"
+              width="88">
+              <template slot-scope="{row, $index}">
+                <TableAction
+                  :showEdit="false"
+                  @delete="handleDeleteSite($index)"/>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div style="height: 50px;"></div>
+      </div>
+    </div>
+    <div class="center">
+      <el-button
+        type="accent"
+        style="margin-right: 30px;"
+        :disabled="selectRow.length == 0"
+        @click="selectSiteRow">
+        SELECT
+        <i class="el-icon-right el-icon--right"></i>
+      </el-button>
+      <el-button
+        type="primary"
+        @click="onHide">
+        SAVE
+        <i class="el-icon-check el-icon--right"></i>
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import TableAction from '@/components/TableAction.vue'
+import Pagination from '@/components/Pagination'
+import site from '../../http/api/site'
+import {getServiceProviderOptions} from '../../utils'
+export default {
+  name: "DialogSiteSelection",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+      listLoading: false,
+      filter: {
+        pageNo: 1,
+        pageSize: 10,
+        pageVo: {
+          criteria: '',
+          providerPk: ''
+        }
+      },
+      table: {
+        list: [],
+        total: 0
+      },
+      selectRow: [],
+      selectedSite: [],
+      providerOptions: [],
+    };
+  },
+  components: {TableAction,Pagination},
+  watch: {
+    visible: {
+      handler(n, o) {
+        if (n) {
+          this.filter.pageSize = 10;
+          this.filter.pageVo.providerPk = "";
+          this.filter.pageVo.criteria = "";
+          this.selectedSite = this.value || [];
+          this.refreshList()
+        } else {
+          this.table.list = [];
+        }
+      }
+    }
+  },
+  computed: {
+    siteList() {
+      if (this.selectedSite.length > 0) {
+        let list = [];
+        this.table.list.forEach(item => {
+          if (this.selectedSite.findIndex(i => i.sitePk == item.sitePk) == -1) {
+            list.push(item);
+          }
+        });
+        return list;
+      } else {
+        return this.table.list;
+      }
+    }
+  },
+  mounted() {
+    this.getAllProvider();
+  },
+  methods: {
+    onHide() {
+      this.$emit("hide", this.selectedSite);
+    },
+    refreshList() {
+      this.filter.pageNo = 1
+      this.getList()
+    },
+    getAllProvider() {
+      getServiceProviderOptions(list => {
+        this.providerOptions = list;
+      });
+    },
+    getList() {
+      this.listLoading = true
+      site.getSiteList(this.filter).then(res => {
+        if (res.data && res.total) {
+          this.table.list = res.data
+          this.table.total = res.total
+        } else {
+          this.table.list = []
+          this.table.total = 0
+        }
+      }).catch(err => {
+        this.$message({
+          message: err,
+          type: 'error'
+        })
+        this.table.list = []
+        this.table.total = 0
+      }).finally(() => {
+        this.listLoading = false
+      })
+    },
+    changeSelection(val) {
+      this.selectRow = val;
+    },
+    selectSiteRow() {
+      this.selectedSite.push(...this.selectRow);
+      this.selectRow = [];
+      //this.getList();
+    },
+    getSelectIds() {
+      const ids = [];
+      this.selectRow.forEach(item => {
+        ids.push(item.sitePk)
+      })
+      return ids;
+    },
+    handleDeleteSite(index) {
+      this.selectedSite.splice(index, 1);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.site-selection-dialog >>> .el-dialog {
+  width: 100%;
+  max-width: 65vw;
+  height: 90vh;
+  display: flex;
+  max-width: 1200px;
+  flex-direction: column;
+  margin-top: 5vh !important;
+}
+.site-selection-dialog >>> .el-dialog__header {
+  padding: 20px 20px 0;
+  font-weight: bold;
+}
+.site-selection-dialog >>> .el-dialog__body {
+  flex: 1;
+  padding: 20px;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+}
+.site-selection-dialog .table-view {
+  flex: 1;
+  overflow-y: auto;
+  padding-top: 10px;
+  margin-bottom: -10px;
+}
+</style>

Strides-Admin/src/views/report/ReportV3.vue

@@ -44,13 +44,19 @@
             :value="item.providerPk"
             :key="index"/>
         </el-select>
+        <el-button
+          class="filter-input"
+          v-if="hasSiteType.indexOf(params.reportType) >= 0"
+          @click="showSiteSelection">
+          Select Site ({{siteSelection.list.length}})
+        </el-button>
         <el-select
           clearable
           collapse-tags
           reserve-keyword
           filterable multiple
           :multiple-limit="500"
-          v-if="hasSiteType.indexOf(params.reportType) >= 0"
+          v-if="false"
           v-model="params.sitePks"
           class="filter-input"
           placeholder="Sites"
@@ -144,6 +150,10 @@
         :limit.sync="filter.pageSize"
         @pagination="getReportsPages" />
     </div>
+    <DialogSiteSelection
+      :visible="siteSelection.visible"
+      :value="siteSelection.list"
+      @hide="hideSiteSelection"/>
   </div>
 </template>
 
@@ -152,6 +162,7 @@ import site from '@/http/api/site'
 import api from '@/api/apiReport'
 import {getServiceProviderOptions} from '../../utils'
 import Pagination from '@/components/Pagination'
+import DialogSiteSelection from './DialogSiteSelection.vue'
 export default {
   data() {
     return {
@@ -184,13 +195,17 @@ export default {
         data: [],
         total: 0
       },
+      siteSelection: {
+        visible: false,
+        list: []
+      },
       hasSPType: ["MNTHTRAN","MNTHSEPR","MNTHADHOC","MNTHSUMC"],
       nonMonthType: ["APENDIXF"],
       hasSiteType: ["MNTHSITE","MNTHEBS","MNTHECS","APENDIXF","APENDIXH", "APENDIXF1"],
       hasGroupType: ["MNTHFLET", "MNTHMEMB", "MNTHPART","MNTHGCU"]
     };
   },
-  components: { Pagination },
+  components: { Pagination, DialogSiteSelection },
   created() {
     this.getFilterOptions();
   },
@@ -206,7 +221,7 @@ export default {
       this.loading.filter = true
       Promise.all([
         this.getReportTypeOptions(),
-        this.getSiteOptions(),
+        //this.getSiteOptions(),
         this.getServiceProviderList()
       ]).then(() => {
         this.loading.filter = false;
@@ -266,6 +281,20 @@ export default {
       this.params.yearMonthRange = [];
       this.$forceUpdate();
     },
+    getSelectIds() {
+      const ids = [];
+      this.siteSelection.list.forEach(item => {
+        ids.push(item.sitePk)
+      })
+      return ids;
+    },
+    showSiteSelection() {
+      this.siteSelection.visible = true;
+    },
+    hideSiteSelection(list) {
+      this.siteSelection.visible = false;
+      this.siteSelection.list = list;
+    },
     getReportsPages() {
       this.loading.table = true;
       this.filter.pageCriteria.reportType = this.params.reportType;
@@ -290,6 +319,7 @@ export default {
     },
     generateReport() {
       this.loading.generate = true;
+      this.params.sitePks = this.getSelectIds();
       api.generateReport(this.params).then(res => {
         this.loading.generate = false;
         this.$message({