Develop Report system

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

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

@@ -0,0 +1,346 @@
+<template>
+  <div class="app-container">
+    <div
+      class="filter-container"
+      v-loading="loading.filter">
+      <div class="filter-row">
+        <label class="el-form-item__label">Report Type:</label>
+        <el-select
+          v-model="params.reportType"
+          @change="changeReportType"
+          class="filter-input"
+          placeholder="Report Type"
+          clearable>
+          <el-option
+            v-for="item in options.reportType"
+            :label="item.reportName"
+            :value="item.reportCode"
+            :key="item.reportCode"/>
+        </el-select>
+      </div>
+      <div class="filter-row">
+        <label class="el-form-item__label">Filters:</label>
+        <el-date-picker
+          v-if="nonMonthType.indexOf(params.reportType) == -1"
+          v-model="params.yearMonthRange"
+          type="monthrange"
+          value-format="yyyy-MM"
+          format="yyyy-MM"
+          start-placeholder="Start Month"
+          end-placeholder="End Month"
+          clearable
+          class="filter-input"/>
+        <el-select
+          v-if="hasSPType.indexOf(params.reportType) >= 0"
+          v-model="params.providerPks"
+          class="filter-input"
+          placeholder="Service Provider"
+          collapse-tags
+          clearable
+          multiple>
+          <el-option
+            v-for="(item,index) in options.serviceProvider"
+            :label="item.providerName"
+            :value="item.providerPk"
+            :key="index"/>
+        </el-select>
+        <el-select
+          clearable
+          collapse-tags
+          reserve-keyword
+          filterable multiple
+          :multiple-limit="500"
+          v-if="hasSiteType.indexOf(params.reportType) >= 0"
+          v-model="params.sitePks"
+          class="filter-input"
+          placeholder="Sites"
+          style="max-width: 400px;">
+          <el-option
+            v-for="(item, index) in options.siteOptions"
+            :key="index"
+            :label="item.siteName"
+            :value="item.sitePk"/>
+        </el-select>
+        <el-select
+          clearable
+          multiple
+          collapse-tags
+          v-if="hasGroupType.indexOf(params.reportType) >= 0"
+          v-model="params.groupPks"
+          class="filter-input"
+          placeholder="Groups">
+          <el-option
+            v-for="(item, index) in options.groupOptions"
+            :key="index"
+            :label="item.name"
+            :value="item.value"/>
+        </el-select>
+        <el-button
+          class="generate-button"
+          type="primary"
+          @click="onSearch"
+          :disabled="loading.table">
+          Search
+        </el-button>
+        <el-button
+          class="generate-button"
+          v-waves
+          type="primary"
+          :loading="loading.generate"
+          @click="generateReport">
+          Generate
+        </el-button>
+      </div>
+    </div>
+    <el-table
+      :data="table.data"
+      class="no-border"
+      v-loading="loading.table">
+      <el-table-column
+        label="Report Type"
+        prop="reportType"
+        align="center"
+        min-width="180"/>
+      <el-table-column
+        label="Creation Date/Time"
+        prop="createTime"
+        align="center"
+        min-width="150"/>
+      <el-table-column
+        label="Created By"
+        prop="createBy"
+        align="center"
+        min-width="100"/>
+      <el-table-column
+        label="Status"
+        prop="generateStatus"
+        align="center"
+        min-width="120"/>
+      <el-table-column
+        label="Remarks"
+        prop="remark"
+        align="center"
+        min-width="150"/>
+      <el-table-column
+        label="File"
+        prop="reportName"
+        align="center"
+        min-width="220">
+        <template slot-scope="{row}">
+          <a :href="row.reportUrl"
+            v-if="row.reportUrl"
+            class="link-detail">
+            {{row.reportName}}
+          </a>
+          <span v-else>{{row.reportName}}</span>
+        </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="getReportsPages" />
+    </div>
+  </div>
+</template>
+
+<script>
+import site from '@/http/api/site'
+import api from '@/api/apiReport'
+import {getServiceProviderOptions} from '../../utils'
+import Pagination from '@/components/Pagination'
+export default {
+  data() {
+    return {
+      loading: {
+        filter: false,
+        table: false,
+        generate: false
+      },
+      filter: {
+        pageNum: 1,
+        pageSize: 10,
+        pageCriteria: {
+          reportType: '',
+        }
+      },
+      params: {
+        reportType: "",
+        sitePks: [],
+        groupPks: [],
+        providerPks: [],
+        yearMonthRange: []
+      },
+      options: {
+        reportType: [],
+        siteOptions: [],
+        groupOptions: [],
+        serviceProvider: []
+      },
+      table: {
+        data: [],
+        total: 0
+      },
+      hasSPType: ["MNTHTRAN","MNTHSEPR","MNTHADHOC","MNTHSUMC"],
+      nonMonthType: ["APENDIXF"],
+      hasSiteType: ["MNTHSITE","MNTHEBS","MNTHECS","APENDIXF","APENDIXH", "APENDIXF1"],
+      hasGroupType: ["MNTHFLET", "MNTHMEMB", "MNTHPART","MNTHGCU"]
+    };
+  },
+  components: { Pagination },
+  created() {
+    this.getFilterOptions();
+  },
+  methods: {
+    onSearch() {
+      this.filter.pageNum = 1;
+      this.loading.table = true;
+      setTimeout(() => {
+        this.getReportsPages()
+      }, 1000);
+    },
+    getFilterOptions() {
+      this.loading.filter = true
+      Promise.all([
+        this.getReportTypeOptions(),
+        this.getSiteOptions(),
+        this.getServiceProviderList()
+      ]).then(() => {
+        this.loading.filter = false;
+        this.getReportsPages();
+      }).catch(err => {
+        this.loading.filter = false;
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      })
+    },
+    getReportTypeOptions() {
+      return api.getReportTypeOptions().then(res => {
+        if (res.data) {
+          this.options.reportType = res.data
+          //this.params.reportType = res.data[0].reportCode
+        }
+      })
+    },
+    getServiceProviderList() {
+      getServiceProviderOptions(list => {
+        this.options.serviceProvider = list;
+      });
+    },
+    getSiteOptions() {
+      site.getAllSiteList({siteName: ""}).then(res => {
+        if (res.data && res.data.length > 0) {
+          this.options.siteOptions = res.data
+        } else {
+          this.options.siteOptions = []
+        }
+      }).catch(err => {
+        this.$message({
+          message: err,
+          type: 'error'
+        })
+        this.options.siteOptions = []
+      });
+    },
+    getGroupOptions() {
+      api.getGroupOptions({
+        reportType: this.params.reportType
+      }).then(res => {
+        if (res.data) {
+          this.options.groupOptions = res.data
+        }
+      })
+    },
+    changeReportType() {
+      if (this.hasGroupType.indexOf(this.params.reportType) >= 0) {
+        this.getGroupOptions();
+      }
+      this.params.sitePks = [];
+      this.params.groupPks = [];
+      this.params.providerPks = [];
+      this.params.yearMonthRange = [];
+      this.$forceUpdate();
+    },
+    getReportsPages() {
+      this.loading.table = true;
+      this.filter.pageCriteria.reportType = this.params.reportType;
+      api.getReportsPages(this.filter).then(res => {
+        if (res.data.records && res.data.totalRow) {
+          this.table.data = res.data.records
+          this.table.total = res.data.totalRow
+        } else {
+          this.table.total = 0;
+          this.table.data = [];
+        }
+      }).catch(err => {
+        this.$message({
+          message: err,
+          type: 'error'
+        })
+        this.table.total = 0;
+        this.table.data = [];
+      }).finally(() => {
+        this.loading.table = false
+      })
+    },
+    generateReport() {
+      this.loading.generate = true;
+      api.generateReport(this.params).then(res => {
+        this.loading.generate = false;
+        this.$message({
+          type: res.success?'success':'error',
+          message: res.msg
+        })
+      }).catch(err => {
+        this.loading.generate = false;
+        this.$message({
+          type: 'error',
+          message: err
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .filter-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 10px;
+    .el-form-item__label {
+      color: #333;
+      width: 100px;
+      text-align: right;
+    }
+    .filter-input {
+      flex: 1;
+      min-width: 180px;
+      max-width: 260px;
+      &.half {
+        min-width: 85px;
+        max-width: 125px;
+      }
+      & + .filter-input {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .generate-button {
+    width: 100px;
+    height: 40px;
+    margin: 5px 0;
+    margin-left: 10px;
+  }
+
+  .export-button {
+    background-color: #fff;
+  }
+</style>