ngds-backend-ele/src/views/config/dec-level-config.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <!-- 会员等级 -->
      <el-table :data="tableData" stripe style="width: 100%;">
        <el-table-column prop="LEVEL_NAME" :label="$t('config.levelName')" min-width="100px">
          <template slot-scope="{row}">
            <el-tag type="warning" size="small" class="no-border">{{ row.LEVEL_NAME }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="PERF" :label="$t('config.needPerf')" min-width="120px">
          <template slot-scope="{row}">
            <el-tag type="danger" size="small" class="no-border">{{ row.PERF }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('common.updatedAdmin')" prop="UPDATE_ADMIN" min-width="100px" />
        <el-table-column :label="$t('common.updatedAt')" min-width="100px">
          <template slot-scope="{row}">
            {{ row.UPDATED_AT | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('common.action')" min-width="90px">
          <template slot-scope="{row}">
            <el-button type="primary" plain size="small" @click="editHandle(row)">{{ $t('common.edit') }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 更新观察期 -->
      <el-form ref="form" :model="form" label-width="150px" :label-position="labelPosition" style="margin-top: 25px;">
        <el-form-item :label="form.monthLimitTITLE">
          <el-input v-model="form.monthLimitVALUE" />
          <div class="white-box-footer" style="line-height: 1.2;color: #999;">
            <p>{{ $t('config.pour') }}：</p>
            <p>(1) {{ $t('config.enterNumber') }}；</p>
            <p>(2) {{ $t('config.enterZeroIsHoleSite') }}；</p>
          </div>
          <div class="white-box-footer">
            <el-button type="primary" :loading="submitButtonStat" @click="onSubmit">{{ $t('config.updatePeriodUnderObservation') }}</el-button>
          </div>
        </el-form-item>
      </el-form>

      <!-- 开启会员升级单	-->
      <el-switch v-model="value1" :active-text="value1Text" @change="switchUpgrade" />
    </div>

    <!-- 编辑	-->
    <el-dialog v-loading="editLoading" :title="$t('common.edit')" :visible.sync="dialog" :width="screenWidth" style="margin-top: -80px">
      <el-form ref="editForm" :model="editForm" :label-position="labelPosition" label-width="150px" style="width: 100%; margin-top: -30px; margin-bottom: -15px;">
        <el-row :gutter="3">
          <el-col :xs="24" :sm="24" :lg="12">
            <el-input v-show="false" v-model="editForm.ID" size="small" type="text" />
            <el-form-item :label="$t('config.levelName')" prop="LEVEL_NAME" required style="margin-bottom: 10px; width: 100%;">
              <el-input v-model.trim="editForm.LEVEL_NAME" size="small" type="text" style="min-width: 300px;" readonly />
            </el-form-item>
            <el-form-item :label="$t('config.needPerf')" prop="PERF" required style="margin-bottom: 10px; width: 100%;">
              <el-input v-model="editForm.PERF" size="small" type="text" style="min-width: 300px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item style="margin-bottom: 15px;">
          <el-button type="warning" size="mini" @click="dialog = false">{{ $t('table.cancel') }}</el-button>
          <el-button type="primary" size="mini" @click="onSubmitDecLevel">{{ $t('table.confirm') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchDecLevelConfig,
  fetchMonthLimit, updateDecLevel,
  updateMonthLimit,
  updateOpenUpgradeConfig
} from '@/api/config'
import waves from '@/directive/waves'
import { getScreenWidth } from '@/utils'

export default {
  name: 'DecLevelConfig',
  directives: { waves },
  data() {
    return {
      value1: true,
      value1Text: '',
      submitButtonStat: false,
      form: {
        monthLimitTITLE: '',
        monthLimitVALUE: ''
      },
      tableData: null,
      loading: true,
      screenWidth: getScreenWidth() > 500 ? '500px' : getScreenWidth() + 'px',
      labelPosition: getScreenWidth() >= 500 ? 'right' : 'top',
      dialog: false,
      editLoading: false,
      editForm: {
        ID: '',
        LEVEL_NAME: '',
        PERF: '',
        isAdjustGift: false,
        isDec: false
      },
    }
  },
  mounted() {
    this.fetchDecLevelConfig()
    this.fetchMonthLimit()
  },
  methods: {
    fetchDecLevelConfig() {
      this.loading = true
      fetchDecLevelConfig().then(response => {
        this.tableData = Object.values(response.data.list)

        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      })
    },
    fetchMonthLimit() {
      fetchMonthLimit().then(response => {
        this.form.monthLimitTITLE = response.data.observe.TITLE
        this.form.monthLimitVALUE = response.data.observe.VALUE
        this.value1 = response.data.isOpenUpgrade.VALUE > 0 				// 是否开启会员升级功能
        this.value1Text = response.data.isOpenUpgrade.TITLE
      })
    },
    // 切换开关
    switchUpgrade() {
      const data = { isOpen: this.value1 === true ? 1 : 0 }
      this.submitButtonStat = true
      updateOpenUpgradeConfig(data).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })

        setTimeout(() => {
          this.submitButtonStat = false
          this.getData()
        }, 0.5 * 1000)
      }).catch(error => {
        this.$message({
          message: error,
          type: 'warning'
        })
        this.submitButtonStat = false
        this.getData()
      })
    },
    onSubmit() {
      this.submitButtonStat = true
      const data = { month: this.form.monthLimitVALUE }
      updateMonthLimit(data).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })

        setTimeout(() => {
          this.submitButtonStat = false
          this.getData()
        }, 0.5 * 1000)
      }).catch(error => {
        this.$message({
          message: error,
          type: 'warning'
        })
        this.submitButtonStat = false
        this.getData()
      })
    },
    editHandle(row) {
      this.editForm.ID = row.ID
      this.editForm.LEVEL_NAME = row.LEVEL_NAME
      this.editForm.PERF = row.PERF
      this.editForm.isAdjustGift = row.IS_ADJUST_GIFT === '1'
      this.editForm.isDec = row.IS_DEC === '1'
      this.dialog = true
    },
    onSubmitDecLevel() {
      this.editLoading = true
      const data = {
        levelName: this.editForm.LEVEL_NAME,
        perf: this.editForm.PERF,
        isAdjustGift: this.form.isAdjustGift ? 1 : 0,
        isDec: this.form.isDec ? 1 : 0
      }
      updateDecLevel(data, this.editForm.ID).then(response => {
        this.$message({
          message: response.data,
          type: 'success'
        })

        setTimeout(() => {
          this.editLoading = false
          this.dialog = false
          this.fetchDecLevelConfig()
        }, 0.5 * 1000)
      }).catch(error => {
        this.$message({
          message: error,
          type: 'warning'
        })
        this.editLoading = false
        this.fetchDecLevelConfig()
      })
    }
  }
}
</script>

<style scoped>
/deep/ .el-form-item__label {
  text-align: left !important;
}
.app-main {
	padding: 15px;
}
.app-container {
	padding: 0;
}
.white-box {
	padding: 15px;
}
.form-page {
	width: 100%;
}
</style>