ngds-backend-ele/src/views/user/modify-stockist-level.vue

<template>
  <div class="app-container">
    <div v-loading="loading" class="white-box">
			<el-form ref="form" :model="form" label-width="250px" :label-position="labelPosition">
				<el-form-item :label="$t('member.memberCode')">
					<el-input v-model.trim="form.userName" @change="handleChange"></el-input>
					<el-tag style="margin-top: 15px;" v-show="userInfo.REAL_NAME !== null">{{ $t('member.memberName') }}：{{ userInfo.REAL_NAME }} ({{ userInfo.country }})</el-tag>
          <el-tag v-show="userInfo.REAL_NAME !== null" style="margin-top: 5px;">{{ $t('member.currentLevel') }}：{{ allDecRole[userInfo.DEC_ROLE_ID] ? allDecRole[userInfo.DEC_ROLE_ID]['ROLE_NAME'] : '' }}</el-tag>
				</el-form-item>
				<el-form-item :label="$t('member.stockistLevel')">
					<el-select v-model="form.levelId" :placeholder="$t('member.pleaseSelectStockistLevel')">
						<el-option v-for="(item,key) in allDecRole" :label="item.ROLE_NAME" :value="item.ID" :key="key"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('member.remark')">
					<el-input type="textarea" :rows="2" placeholder="" v-model="form.remark">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" :loading="submitButtonStat" @click="onSubmit">{{ $t('common.confirm') }}</el-button>
				</el-form-item>
			</el-form>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import { getScreenWidth } from '@/utils'
import {fetchMemberFullInfo, updateUserStockistLevel} from "@/api/member";
import baseInfo from "@/utils/baseInfo";

export default {
  name: 'modifyStockistLevel',
  directives: { waves },
  data() {
    return {
			form: {
				userName: null,
				levelId: null,
				remark: null,
			},
			loading: false,
			submitButtonStat: false,
			allDecRole: baseInfo.decRoles(),
			periodArr: [],
			userInfo: {
				REAL_NAME: null,
				DEC_ROLE_ID: null,
        country: null,
			},
      screenWidth: getScreenWidth() > 600 ? '500px' : getScreenWidth() + 'px',
      labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
    }
  },
  methods: {
		handleChange() {
			this.loading = true
			fetchMemberFullInfo({ userName: this.form.userName }).then(response => {
				this.userInfo = response.data

				setTimeout(() => {
					this.loading = false
				}, 0.5 * 1000)
			}).catch(error => {
				this.userInfo.REAL_NAME = null
				this.$message({
					message: error,
					type: 'warning'
				})
				this.loading = false
			})
		},
    onSubmit() {
			this.$confirm(this.$t('member.modifyEntryLevelHits'), this.$t('common.hint'), {
				confirmButtonText: this.$t('common.confirm'),
				cancelButtonText: this.$t('common.cancel'),
				type: 'warning'
			}).then(() => {
				this._handleSubmit()
			}).catch(error => {
				this.$message({
					message: error,
					type: 'warning'
				})
			})
    },
		_handleSubmit() {
			updateUserStockistLevel(this.form).then(response => {
				this.$message({
					message: response.data,
					type: 'success'
				})

				setTimeout(() => {
					this.submitButtonStat = false
				}, 0.5 * 1000)

				this.submitButtonStat = false
			}).catch(error => {
				this.$message({
					message: error,
					type: 'warning'
				})

				this.submitButtonStat = false
			})

			this._clearData()
		},
		_clearData(){
			this.form = {
				userName: null,
				levelId: null,
				remark: null,
			}
			this.userInfo= {
				REAL_NAME: null,
				DEC_ROLE_ID: null,
			}
		}
  }
}
</script>

<style>
.app-main {
	padding: 15px;
}
.app-container {
	padding: 0;
}
.white-box {
	padding: 15px;
}
.form-page {
	width: 100%;
}
</style>