ngds-backend-ele/src/views/admin/edit.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-form ref="form" :model="form" label-width="250px" class="bkele-form-page">
        <el-form-item v-show="isAddOrEdit" :label="$t('Administrator.loginAccount')">
          <el-input v-model="form.adminName" :disabled="isEdit" />
        </el-form-item>
        <el-form-item v-show="isAddOrEdit" :label="$t('Administrator.name')">
          <el-input v-model="form.realName" />
        </el-form-item>
        <el-form-item v-show="isAddOrEdit" :label="$t('Administrator.role')">
          <el-select v-model="form.roleId" :placeholder="$t('Administrator.pleaseSelectRole')">
            <el-option v-for="item in roles" :key="item.ID" :label="item.ROLE_NAME" :value="item.ID" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('transportationConfig.countryName')"><!-- 国家 -->
          <el-select v-model="form.countryId" multiple :placeholder="$t('Administrator.pleaseSelectCountry')">
            <el-option v-for="item in countries" :key="item.ID" :label="item.NAME" :value="item.ID" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('Administrator.password')"><!-- 密码 -->
          <el-input v-model="form.password" type="password" />
        </el-form-item>
        <el-form-item :label="$t('Administrator.confirmPassword')"><!-- 确认密码 -->
          <el-input v-model="form.surePassword" type="password" />
        </el-form-item>
        <el-form-item v-show="isAddOrEdit" :label="$t('Administrator.bindIp')">
          <el-input
            v-model="form.bindIp"
            type="textarea"
            :rows="4"
            :placeholder="$t('Administrator.pleaseInputContent')"
          />
          <el-tag type="info">{{ $t("Administrator.bindIpNotice") }}</el-tag>
        </el-form-item>
        <el-form-item v-show="isAddOrEdit" :label="$t('common.note')">
          <el-input v-model="form.remark" />
        </el-form-item>
        <el-form-item v-show="isAddOrEdit" :label="$t('Administrator.isEnable')">
          <el-switch v-model="form.isEnable" />
        </el-form-item>
        <el-form-item v-show="isAddOrEdit" :label="$t('Administrator.isModifyPwd')">
          <el-switch v-model="form.isModifyPassword" />
        </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 { adminAddAndEditAndChangePassword, adminAdd, adminEdit } from '@/api/filter'
import {getCountries} from "@/api/site";
import {isArray} from "@/utils/validate";
export default {
  name: 'RoleAdd',
  data() {
    return {
      form: {
        adminName: null,
        realName: null,
        remark: null,
        isEnable: true,
        isModifyPassword: false,
        bindIp: '',
        roleId: null,
        password: null,
        surePassword: null,
        countryId: []
      },
      loading: true,
      submitButtonStat: false,
      isEdit: false,
      roles: null,
      countries: []
    }
  },
  computed: {
    isAddOrEdit() {
      if (this.$route.name === 'admin_add' || this.$route.name === 'admin_edit') {
        return true
      }
      return false
    }
  },
  watch: {
    '$route'() {
      for (const i in this.form) {
        this.form[i] = null
      }
    }
  },
  mounted() {
    if (this.$route.name === 'admin_edit') {
      adminEdit(this.$route.params.id).then(response => {
        this.form = response.data.oneData
        this.roles = response.data.adminRoles
        this.loading = false
        this.isEdit = true
      }).catch(err => {
        console.log('err=============' + err)
        this.loading = false
        this.$message({
          message: err,
          type: 'error'
        })
      })
    } else if (this.$route.name === 'admin_add') {
      adminAdd().then(response => {
        this.roles = response.data.adminRoles
        this.loading = false
      }).catch(err => {
        console.log('err=============' + err)
        this.loading = false
        this.$message({
          message: err,
          type: 'error'
        })
      })
    } else {
      this.loading = false
    }
    this.getCountries()
  },
  methods: {
    onSubmit() {
      this.submitButtonStat = true
      let path = 'admin/add'
      if (this.$route.name === 'admin_edit') {
        path = 'admin/edit/' + this.$route.params.id
      } else if (this.$route.name === 'admin_change-password') {
        path = 'admin/change-password'
      }

      if (!(isArray(this.form.countryId) && this.form.countryId.length > 0)){
        this.$message({
          message: this.$t('Administrator.pleaseSelectCountry'),
          type: 'error'
        })
        this.submitButtonStat = false
        return false;
      }
      adminAddAndEditAndChangePassword(path, this.form).then(response => {
        this.submitButtonStat = false
        console.log(response)
        this.$message({
          message: response.data,
          type: 'success'
        })
        this.$router.go(-1)
      }).catch(err => {
        console.log('err=============' + err)
        this.submitButtonStat = false
        this.$message({
          message: err,
          type: 'error'
        })
      })
    },
    getCountries(){
      getCountries().then(response => {
        this.countries = response
      }).catch(err => {

      })
    },
  }
}
</script>

  <style scoped>
  .el-form-item{
        margin-top: 35px;
    }
@media (min-width: 761px) {
    /deep/ .el-input__inner {
      width: 500px;
    }
  }
  @media (max-width:760px) {
    /deep/ .white-box {
    padding: 0px 0px;
    }
    /deep/ .el-form-item__content {
      margin-left:150px !important;
    }
    /deep/ .el-form-item__label {
      width:150px !important;
    }
    /deep/ .el-input__inner {
      width: 150px;
    }
    /* .el-input {
      width: 90%;
    } */

  }
  </style>