|
|
@@ -0,0 +1,315 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ :visible="visible"
|
|
|
+ :before-close="onHide"
|
|
|
+ class="assign-limit-dialog">
|
|
|
+ <div class="filter-container filter-view">
|
|
|
+ <el-select
|
|
|
+ style="min-width: 70px; max-width: 120px;"
|
|
|
+ clearable
|
|
|
+ v-model="filter.pageCriteria.suspendStatus"
|
|
|
+ placeholder="Status"
|
|
|
+ @change="onSearch">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in statusOptions"
|
|
|
+ :key="index"
|
|
|
+ :label="item"
|
|
|
+ :value="item"/>
|
|
|
+ </el-select>
|
|
|
+ <div style="flex: 1; min-width: 150px; max-width: 300px;">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="filter.pageCriteria.criteria"
|
|
|
+ placeholder="Search by Site Name or Service Provider"
|
|
|
+ @keyup.enter.native="onSearch"/>
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="onSearch">
|
|
|
+ Search
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="assign-label-actions">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ :disabled="selectRow.length == 0"
|
|
|
+ :loading="loading.unassign"
|
|
|
+ @click="onClickUnassign">
|
|
|
+ Batch Un-suspend
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="accent"
|
|
|
+ :disabled="selectRow.length == 0"
|
|
|
+ :loading="loading.assign"
|
|
|
+ @click="onClickAssign">
|
|
|
+ Batch Suspend
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="table-view" v-loading="table.loading">
|
|
|
+ <el-table
|
|
|
+ :data="table.data"
|
|
|
+ height="100%"
|
|
|
+ class="no-border"
|
|
|
+ @selection-change="changeSelection">
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="User Name"
|
|
|
+ prop="userName"
|
|
|
+ min-width="120"/>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="Contact Number"
|
|
|
+ prop="contactNumber"
|
|
|
+ min-width="120"/>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="E-Mail"
|
|
|
+ prop="email"
|
|
|
+ min-width="120"/>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="Suspend Status"
|
|
|
+ prop="suspendStatus"
|
|
|
+ min-width="120"/>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="Select"
|
|
|
+ type="selection"/>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="center" style="margin-bottom: -20px;">
|
|
|
+ <Pagination
|
|
|
+ v-show="table.total"
|
|
|
+ :total="table.total"
|
|
|
+ :page.sync="filter.pageNo"
|
|
|
+ :limit.sync="filter.pageSize"
|
|
|
+ @pagination="getTableData"/>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import api from '@/api/limit.js'
|
|
|
+import Pagination from '@/components/Pagination'
|
|
|
+export default {
|
|
|
+ name: "SuspendUser",
|
|
|
+ props: {
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ item: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({})
|
|
|
+ },
|
|
|
+ groupPk: {
|
|
|
+ type: Number|String,
|
|
|
+ default: ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ filter: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ pageCriteria: {
|
|
|
+ criteria: "",
|
|
|
+ groupPk: "",
|
|
|
+ groupCreditPlanId: "",
|
|
|
+ suspendStatus: ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ table: {
|
|
|
+ data: [],
|
|
|
+ total: 0,
|
|
|
+ loading: false
|
|
|
+ },
|
|
|
+ loading: {
|
|
|
+ assign: false,
|
|
|
+ unassign: false
|
|
|
+ },
|
|
|
+ statusOptions: [],
|
|
|
+ selectRow: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {Pagination},
|
|
|
+ computed: {
|
|
|
+ title() {
|
|
|
+ return "SUSPEND USER"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ visible: {
|
|
|
+ handler(n, o) {
|
|
|
+ console.log("watch.visible", n, o);
|
|
|
+ if (n) {
|
|
|
+ this.filter.pageCriteria.groupCreditPlanId = this.item.groupCreditPlanId;
|
|
|
+ this.filter.pageCriteria.suspendStatus = "";
|
|
|
+ this.filter.pageCriteria.groupPk = this.groupPk;
|
|
|
+ this.onSearch()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getStatusOptions();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onHide() {
|
|
|
+ this.$emit("hide", true);
|
|
|
+ },
|
|
|
+ onSearch() {
|
|
|
+ this.filter.pageNo = 1;
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ getStatusOptions() {
|
|
|
+ api.getSuspendStatusOptions().then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.statusOptions = res.data
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTableData() {
|
|
|
+ this.table.loading = true;
|
|
|
+ api.getSuspendLimitAssignmentPages(this.filter).then(res => {
|
|
|
+ if (res.data.totalRow && res.data.records) {
|
|
|
+ this.table.total = res.data.totalRow;
|
|
|
+ this.table.data = res.data.records;
|
|
|
+ } else {
|
|
|
+ this.table.total = 0;
|
|
|
+ this.table.data = [];
|
|
|
+ }
|
|
|
+ this.table.loading = false;
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: error
|
|
|
+ })
|
|
|
+ this.table.total = 0;
|
|
|
+ this.table.data = [];
|
|
|
+ this.table.loading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeSelection(val) {
|
|
|
+ this.selectRow = val;
|
|
|
+ },
|
|
|
+ getSelectIds() {
|
|
|
+ const ids = [];
|
|
|
+ this.selectRow.forEach(item => {
|
|
|
+ ids.push(item.groupCreditPlanUserId)
|
|
|
+ })
|
|
|
+ return ids;
|
|
|
+ },
|
|
|
+ onClickAssign() {
|
|
|
+ const params = {
|
|
|
+ groupCreditPlanId: this.item.groupCreditPlanId,
|
|
|
+ groupCreditPlanUserIds: this.getSelectIds()
|
|
|
+ }
|
|
|
+ this.loading.assign = true;
|
|
|
+ api.suspendCreditLimitPlanUser(params).then(res => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: res.msg || "Success"
|
|
|
+ })
|
|
|
+ this.getTableData()
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: error
|
|
|
+ })
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading.assign = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onClickUnassign() {
|
|
|
+ const params = {
|
|
|
+ groupCreditPlanId: this.item.groupCreditPlanId,
|
|
|
+ groupCreditPlanUserIds: this.getSelectIds()
|
|
|
+ }
|
|
|
+ this.loading.unassign = true;
|
|
|
+ api.unsuspendCreditLimitPlanUser(params).then(res => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: res.msg || "Success"
|
|
|
+ })
|
|
|
+ this.getTableData()
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: error
|
|
|
+ })
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading.unassign = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.assign-limit-dialog
|
|
|
+ ::v-deep .el-dialog {
|
|
|
+ width: 65vw;
|
|
|
+ height: 90vh;
|
|
|
+ display: flex;
|
|
|
+ max-width: 1200px;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-top: 5vh !important;
|
|
|
+ .el-dialog__header {
|
|
|
+ padding: 20px 20px 0;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .el-dialog__body {
|
|
|
+ flex: 1;
|
|
|
+ padding: 20px;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1200px) {
|
|
|
+ & {
|
|
|
+ width: 70vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1000px) {
|
|
|
+ & {
|
|
|
+ width: 80vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 800px) {
|
|
|
+ & {
|
|
|
+ width: 90vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 700px) {
|
|
|
+ & {
|
|
|
+ width: 99vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 320px) {
|
|
|
+ & {
|
|
|
+ width: 100%;
|
|
|
+ min-width: 300px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.assign-limit-dialog .table-view {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-top: 10px;
|
|
|
+ margin-bottom: -10px;
|
|
|
+}
|
|
|
+.assign-label-actions {
|
|
|
+ display: flex;
|
|
|
+ padding-top: 5px;
|
|
|
+ flex-wrap: wrap-reverse;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+</style>
|
