Multi-tenancy dev, service provider (tenant) menu use newly dwan api.

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

Strides-Admin/src/api/apiBase.js

@@ -1,4 +1,4 @@
-import { get } from '../http/http'
+import { get, upload } from '../http/http'
 
 const prefix = "dawn/api/v1/"
 
@@ -33,6 +33,15 @@ const apiBase = {
   },
   getProviderList() {
     return get(prefix + "service-provider-select")
+  },
+  getPaymentMethodList() {
+    return get(prefix + "payment-method-select")
+  },
+  getPaymentGatewayList() {
+    return get(prefix + "payment-gateway-select")
+  },
+  uploadImage(form) {
+    return upload(prefix + 'upload/picture', form)
   }
 }
 

Strides-Admin/src/api/provider.js

@@ -0,0 +1,24 @@
+import {uploadImage} from '../http/api/upload'
+import { del, get, post, put } from '../http/http'
+
+const prefix = "dawn/api/v1/"
+
+const provider = {
+  getServiceProviderPages(params) {
+    return post(prefix + 'service-provider-pages', params)
+  },
+  addServiceProvider(params) {
+    return post(prefix + 'service-providers', params)
+  },
+  updateServiceProvider(params) {
+    return put(prefix + 'service-providers/' + params.providerPk, params)
+  },
+  viewServiceProvider(providerPk) {
+    return get(prefix + 'service-providers/' + providerPk)
+  },
+  deleteProviderInfo(providerPk) {
+    return del(prefix + 'service-providers/' + providerPk)
+  }
+}
+
+export default provider;

Strides-Admin/src/router/PartnershipRouter.js

@@ -20,6 +20,16 @@ export default {
         activeIcon: 'sidebar-submenu-item-active'
       }
     },
+    {
+      path: '/partnership-management/service-provider-mgmt',
+      component: () => import('@/views/provider2/index'),
+      name: 'service-provider-management-v2',
+      meta: {
+        title: 'Service Providers',
+        icon: 'sidebar-submenu-item',
+        activeIcon: 'sidebar-submenu-item-active'
+      }
+    },
     {
       path: '/partnership-management/group-management',
       component: () => import('@/views/company/index'),
@@ -56,7 +66,7 @@ export default {
     },
     {
       path: '/partnership-management/service-provider-management/edit/:id',
-      component: () => import('@/views/provider/detail/'),
+      component: () => import('@/views/provider/detail'),
       name: 'edit-service-provider',
       meta: {
         title: 'Edit Provider',
@@ -68,6 +78,34 @@ export default {
       },
       hidden: true
     },
+    {
+      path: '/partnership-management/service-provider-mgmt/add',
+      component: () => import('@/views/provider2/detail'),
+      name: 'add-service-provider-v2',
+      meta: {
+        title: 'Add New Provider',
+        activeMenu: '/partnership-management/service-provider-mgmt',
+        parent: {
+          title: 'Service Providers',
+          path: "/partnership-management/service-provider-mgmt"
+        }
+      },
+      hidden: true
+    },
+    {
+      path: '/partnership-management/service-provider-mgmt/edit/:id',
+      component: () => import('@/views/provider2/detail'),
+      name: 'edit-service-provider-v2',
+      meta: {
+        title: 'Edit Provider',
+        activeMenu: '/partnership-management/service-provider-mgmt',
+        parent: {
+          title: 'Service Providers',
+          path: "/partnership-management/service-provider-mgmt"
+        }
+      },
+      hidden: true
+    },
     {
       path: '/partnership-management/group-management/add',
       component: () => import('@/views/company/detail'),

Strides-Admin/src/views/provider2/detail.vue

@@ -0,0 +1,368 @@
+<template>
+  <div class="container" v-loading="loading.page">
+    <el-form
+      :model="form"
+      :rules="rule"
+      ref="form"
+      label-position="right"
+      label-width="150px"
+      style="width: 100%;">
+      <div class="content">
+        <div class="section-title">Service Provider</div>
+        <el-form-item
+          label="Provider Name:"
+          prop="providerName">
+          <el-input
+            class="add-text"
+            maxlength="30"
+            v-model="form.providerName"/>
+        </el-form-item>
+        <el-form-item
+          label="Country:"
+          prop="countryCode">
+          <el-select
+            v-model="form.countryCode"
+            class="add-text">
+            <el-option
+              v-for="item in options.country"
+              :key="item.countryCode"
+              :label="item.countryName"
+              :value="item.countryCode"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="Contact Person:"
+          prop="providerContactPerson">
+          <el-input
+            class="add-text"
+            maxlength="50"
+            v-model="form.providerContactPerson"/>
+        </el-form-item>
+        <el-form-item
+          label="Contact Number:"
+          prop="providerContactPhoneNumber">
+          <div class="add-text flexc">
+            <el-select
+              style="min-width: 75px; max-width: 80px;"
+              v-model="form.providerContactCallingCode">
+              <el-option
+                v-for="item in options.country"
+                :key="item.callingCode"
+                :label="'+' + item.callingCode"
+                :value="item.callingCode"/>
+            </el-select>
+            <el-input
+              v-model="form.providerContactPhoneNumber"
+              style="margin-left: 10px;"
+              maxlength="15"/>
+          </div>
+        </el-form-item>
+        <el-form-item
+          label="Payment Gateway:"
+          prop="paymentGateway">
+          <el-select
+            v-model="form.paymentGateway"
+            class="add-text">
+            <el-option
+              v-for="item in options.payment"
+              :key="item.key"
+              :label="item.value"
+              :value="item.key"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="Provider Logo:">
+          <el-upload
+            class="logo-upload"
+            action
+            :limit="1"
+            :show-file-list="false"
+            :file-list="[]"
+            :on-remove="file => removeLogo(file)"
+            :http-request="file => uploadLogo(file)"
+            accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
+            v-loading="loading.upload">
+            <el-image
+              v-if="logos.length > 0"
+              :src="logos[0].url"
+              title="Click to update logo"/>
+            <i v-else
+              class="el-icon-plus avatar-uploader-icon"
+              title="Click to select file"/>
+          </el-upload>
+        </el-form-item>
+      </div>
+      <div class="content flexcr">
+        <div class="buttons">
+          <el-button
+            type="primary"
+            class="cancel-button"
+            @click="onBack">
+            Cancel
+          </el-button>
+          <el-button
+            style="margin-left: 20px;"
+            type="primary"
+            :loading="loading.saving"
+            @click="onClickSave">
+            &nbsp;Save&nbsp;
+          </el-button>
+        </div>
+        <div
+          class="update-by"
+          v-if="isEdit">
+          <span
+            class="add-text"
+            :title='"CREATED BY " + form.createByName + " ON " + form.createTime'>
+            LAST UPDATED BY {{form.updateByName}} TIMESTAMP: {{form.updateTime}}
+          </span>
+        </div>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import setting from '../../settings.js';
+import apiBase from '../../api/apiBase.js';
+import provider from '../../api/provider.js';
+export default {
+  data() {
+    return {
+      isEdit: false,
+      loading: {
+        page: true,
+        upload: false,
+        saving: false
+      },
+      options: {
+        country: [],
+        payment: []
+      },
+      form: {
+        providerPk: "",
+        providerName: "",
+        countryCode: setting.defaultCountry,
+        providerLogo: "",
+        paymentGateway: "",
+        providerContactPerson: "",
+        providerContactCallingCode: Number(setting.defaultCalling),
+        providerContactPhoneNumber: ""
+      },
+      rule: {
+        providerName: {
+          required: true,
+          trigger: 'blur',
+          message: 'Please type provider name'
+        },
+        paymentGateway: {
+          required: true,
+          trigger: 'change',
+          message: 'Please select payment gateway'
+        }
+      },
+      logos: []
+    };
+  },
+  created() {
+    if (this.$route.params.id) {
+      this.isEdit = true;
+      this.getProviderInfo();
+    }
+    this.getCountryOptions();
+  },
+  methods: {
+    onBack() {
+      this.$nextTick(() => {
+        this.$router.replace({
+          path: "/partnership-management/service-provider-mgmt"
+        })
+      })
+    },
+    getCountryOptions() {
+      apiBase.getCountryList().then(res => {
+        if (res.data) {
+          this.options.country = res.data
+        }
+      }).finally(() => {
+        this.getPaymentOptions();
+      })
+    },
+    getPaymentOptions() {
+      apiBase.getPaymentGatewayList().then(res => {
+        if (res.data) {
+          this.options.payment = res.data
+        }
+      }).finally(() => {
+        this.loading.page = false
+      })
+    },
+    getProviderInfo() {
+      provider.viewServiceProvider(this.$route.params.id).then(res => {
+        if (res.data) {
+          this.form = Object.assign(this.form, res.data);
+          if (this.form.providerLogo) {
+            this.logos.push({
+              path: this.form.providerLogo,
+              url: this.$imageSrc(this.form.providerLogo)
+            });
+          }
+        }
+      }).catch(err => {
+        this.$message({
+          message: err,
+          type: 'error'
+        })
+      })
+    },
+    uploadLogo(file) {
+      this.loading.upload = true;
+      const formData = new FormData()
+      formData.append('file', file.file)
+      apiBase.uploadImage(formData).then(res => {
+        if (this.logos.length == 0) {
+          this.logos.push({
+            url: ""
+          })
+        }
+        this.logos[0] = ({
+          path: res.data.picturePath,
+          url: this.$imageSrc(res.data.picturePath)
+        })
+      }).catch(err => {
+        this.$message({
+          message: err,
+          type: 'error'
+        })
+      }).finally(() => {
+        this.loading.upload = false;
+      })
+    },
+    removeLogo(file) {
+      this.logos = []
+      this.form.providerLogo = ""
+    },
+    onClickSave() {
+      this.$refs['form'].validate(result => {
+        if (result) {
+          if (this.logos.length > 0) {
+            this.form.providerLogo = this.logos[0].path
+          } else {
+            this.form.providerLogo = "";
+          }
+          if (!this.form.providerLogo) {
+            this.$message({
+              message: "Please upload provider logo",
+              type: 'error'
+            });
+            return
+          }
+          this.loading.saving = true;
+          if (this.isEdit) {
+            this.updateProvider()
+          } else {
+            this.addProvider();
+          }
+        }
+      });
+    },
+    addProvider() {
+      provider.addServiceProvider(this.form).then(res => {
+        this.$message({
+          message: 'Add service provider successfully',
+          type: 'success'
+        })
+        this.onBack();
+      }).catch(err => {
+        this.loading.saving = false;
+        this.$message({
+          message: err,
+          type: 'error'
+        })
+      });
+    },
+    updateProvider() {
+      provider.updateServiceProvider(this.form).then(res => {
+        this.$message({
+          message: 'Update service provider successfully',
+          type: 'success'
+        })
+        this.onBack();
+      }).catch(err => {
+        this.loading.saving = false;
+        this.$message({
+          message: err,
+          type: 'error'
+        })
+      });
+    }
+  }
+}
+</script>
+
+<style scoped lang='scss'>
+  @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;
+  }
+  .add-text {
+    width: 100%;
+    max-width: 300px;
+  }
+  .add-text ::v-deep .el-textarea__inner {
+    font-family: sans-serif;
+  }
+  .buttons {
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+  @media screen and (max-width: 500px) {
+    .container {
+      padding: 0px;
+    }
+    .content {
+      padding: 15px 30px;
+    }
+  }
+  .logo-upload {
+    width: 148px;
+    height: 148px;
+    position: relative;
+    ::v-deep .el-image {
+      width: 148px;
+      height: 148px;
+      border-radius: 6px;
+    }
+  }
+  .avatar-uploader-icon {
+    width: 148px;
+    height: 148px;
+    color: #8c939d;
+    cursor: pointer;
+    font-size: 28px;
+    text-align: center;
+    line-height: 148px;
+    border-radius: 6px;
+    border: 1px dashed #d9d9d9;
+  }
+</style>

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

@@ -0,0 +1,167 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <div class="filter-view">
+        <div class="flex1" style="min-width: 200px; max-width: 350px;">
+          <el-input
+            v-model="filter.pageCriteria.criteria"
+            prefix-icon="el-icon-search"
+            placeholder="Search by Provider Name"
+            @keyup.enter.native="handleFilter"
+            @change="handleFilter"
+            clearable/>
+        </div>
+        <div class="filter-flex-button">
+          <el-button
+            v-if="!$route.meta.onlyView"
+            type="primary"
+            icon="el-icon-plus"
+            @click="addProvider">
+            Add Provider
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <el-table
+      v-loading="table.loading"
+      :data="table.data">
+      <el-table-column
+        label="Provider ID"
+        align="center"
+        min-width="100">
+        <template slot-scope="{row}">
+          <span v-if="$route.meta.onlyView">{{ row.providerPk }}</span>
+          <div v-else class="link-type" @click="editProvider(row)">{{row.providerPk}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="Provider Name"
+        prop="providerName"
+        align="center"
+        min-width="150"/>
+      <el-table-column
+        label="No.of Sites"
+        align="center"
+        prop="siteCount"
+        min-width="120"/>
+      <el-table-column
+        label="No.of Stations"
+        prop="boxCount"
+        align="center"
+        min-width="150"/>
+      <el-table-column
+        v-if="!$route.meta.onlyView"
+        label="Action"
+        align="center"
+        min-width="80">
+        <template slot-scope="{row}">
+          <el-dropdown
+            class="action-dropdown"
+            @command="(v) => handleCommand(v, row)">
+            <i class="el-icon-more icon-action"></i>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                command="editProvider">
+                Edit
+              </el-dropdown-item>
+              <el-dropdown-item
+                command="deleteProvider">
+                Delete
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import TableAction from '@/components/TableAction.vue'
+import provider from '../../api/provider'
+export default {
+  data() {
+    return {
+      filter: {
+        pageNum: 1,
+        pageSize: 10,
+        pageCriteria: {
+          criteria: ""
+        }
+      },
+      table: {
+        loading: false,
+        data: [],
+        total: 0
+      }
+    };
+  },
+  created() {
+    this.handleFilter()
+  },
+  methods: {
+    handleFilter() {
+      this.table.pageNum = 1;
+      this.getTableData();
+    },
+    getTableData() {
+      this.table.loading = true;
+      provider.getServiceProviderPages(this.filter).then(res => {
+        this.table.loading = false;
+        if (res.data.records && res.data.totalRow) {
+          this.table.total = res.data.totalRow;
+          this.table.data = res.data.records;
+        } else {
+          this.table.total = 0;
+          this.table.data = [];
+        }
+      }).catch(err => {
+        this.table.loading = false;
+        this.table.total = 0;
+        this.table.data = [];
+      })
+    },
+    addProvider() {
+      this.$router.push({
+        path: '/partnership-management/service-provider-mgmt/add',
+      })
+    },
+    handleCommand(cb, item) {
+      this[cb](item)
+    },
+    editProvider(row) {
+      this.$router.push({
+        path: '/partnership-management/service-provider-mgmt/edit/' + row.providerPk
+      })
+    },
+    deleteProvider(row) {
+      this.$confirm('Are you sure you want to delete this service provider?', 'Delete', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      }).then(res => {
+        this.handleDeleteProvider(row.providerPk)
+      })
+    },
+    handleDeleteProvider(id) {
+      provider.deleteProviderInfo(id).then(res => {
+        this.$message({
+          message: 'Delete service provider successfully',
+          type: 'success'
+        });
+        this.getTableData();
+      }).catch(err => {
+        this.$message({
+          message: err,
+          type: 'error'
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>