ngds/frontendEle/src/views/user/index.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-tabs v-model="tabActive" style="overflow: auto">
        <el-tab-pane label="Essential Information" name="baseInfo" style="overflow: auto"><!-- 基本信息 -->
          <el-form ref="form" :model="infoData" label-width="250px" class="form-page">
            <el-form-item label="Member code"><!-- 会员编号 -->
              <el-input v-model="infoData.USER_NAME" :disabled="true"></el-input>
            </el-form-item>
<!--            <el-form-item label="民族">
              <el-select v-model="infoData.NATION" placeholder="请选择民族">
                <el-option v-for="(item,index) in allNation" :key="index" :label="item.name"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="Member name"><!-- 会员姓名 -->
              <el-input v-model="infoData.REAL_NAME" :disabled="true"></el-input>
            </el-form-item>
<!--            <el-form-item label="Identity No.">&lt;!&ndash; 身份证号 &ndash;&gt;-->
<!--              <el-input v-model="infoData.ID_CARD" :disabled="true"></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="Phone Number"><!-- 手机号 -->
              <el-input v-model="infoData.MOBILE" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="Email"><!-- Email -->
              <el-input v-model="infoData.EMAIL"></el-input>
            </el-form-item>
<!--            <el-form-item label="银行名称">
              <el-select v-model="infoData.OPEN_BANK" placeholder="请选择银行名称">
                <el-option v-for="(item,index) in allOpenBank" :key="index" :label="item.BANK_NAME"
                           :value="item.BANK_CODE"></el-option>
              </el-select>

            </el-form-item>
            <el-form-item label="开户行地址">
              <el-input v-model="infoData.BANK_ADDRESS"></el-input>
            </el-form-item>
            <el-form-item label="银行帐号">
              <el-input v-model="infoData.BANK_NO"></el-input>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="handleSubmit" :loading="submitButtonStat">Confirm<!-- 保存 --></el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import network from './../../utils/network'
import tool from './../../utils/tool'
import store from '@/utils/vuexStore'

export default {
  name: 'user_index',
  mounted () {
    this.getData()
  },
  data () {
    return {
      infoData: {
        USER_NAME: '',
        NATION: '',
        REAL_NAME: '',
        // ID_CARD: '',
        MOBILE: '',
        OPEN_BANK: '',
        BANK_ADDRESS: '',
        BANK_NO: '',
        EMAIL: '',
      },
      allOpenBank:null,
      allNation:null,
      tabActive: 'baseInfo',
      loading: true,
      submitButtonStat:false,
    }
  },
  methods: {
    getData () {
      network.getData('user/index').then(response => {
        this.infoData = response.userInfo
        this.allOpenBank = response.allOpenBank
        this.allNation = response.allNation
        this.loading = false
      })
    },
    handleSubmit(){
        this.submitButtonStat = true
        let path = 'user/edit'
        let postData = {
            nation: this.infoData.NATION,
            realName: this.infoData.REAL_NAME,
            // idCard: this.infoData.ID_CARD,
            mobile: this.infoData.MOBILE,
            openBank: this.infoData.OPEN_BANK,
            bankAddress: this.infoData.BANK_ADDRESS,
            bankNo: this.infoData.BANK_NO,
            email: this.infoData.EMAIL,
        }
        return network.postData(path, postData).then(response => {
            this.$message({
                message: response,
                type: 'success'
            })
            this.submitButtonStat = false
            this.getData();
        }).catch(() => {
            this.submitButtonStat = false
        })
    },

  }
}

</script>

<style scoped>

</style>