ngds-backend-ele/src/views/admin/role-add.vue

<template>
  <div v-loading="loading">
      <div class="whitebox-bg">
        <el-form ref="form" :model="form" class="role-add-form" >
          <el-form-item :label="$t('Administrator.roleName')">
            <el-input v-model="form.roleName"></el-input>
          </el-form-item>
          <el-form-item :label="$t('common.desc')">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="submitButtonStat" @click="onSubmit">{{ $t('common.save') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
  </div>
</template>

<script>
import { roleDetail, addOREditRole } from '@/api/filter'
export default {
  name: 'RoleAdd',
  data() {
    return {
      form: {
        roleName: null,
        remark: null
      },
      loading: false,
      submitButtonStat: false
    }
  },
  mounted() {
    if (this.$route.name === 'admin_role-edit') {
      roleDetail(this.$route.params.id).then(response => {
        this.form.roleName = response.data.ROLE_NAME
        this.form.remark = response.data.REMARK
        this.loading = false
      }).catch(err => {
        console.log('err---------' + err)
      })
    }
  },
  methods: {
    onSubmit() {
      this.submitButtonStat = true
      let path = 'admin/role-add'
      if (this.$route.name === 'admin_role-edit') {
        path = 'admin/role-edit/' + this.$route.params.id
      }
      addOREditRole(path, this.form).then(response => {
        this.submitButtonStat = false
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.$router.go(-1)
      }).catch(err => {
        this.submitButtonStat = false
        this.$message({
          message: err,
          type: 'error'
        })
      })
    }
  }
}
</script>

<style scoped>
.whitebox-bg {
  background: #fff;
  padding: 25px;
}
</style>