asan-service/pages/admin/gps/users/_user.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-gps-users' }">برگشت به صفحه قبل</CButton>
      <CButton v-if="$route.params.user === 'new'" size="sm" color="success" style="margin-right: 10px" @click="add"
        >افزودن</CButton
      >
    </CustomSubHeader>
    <CRow class="form">
      <CCol xl="12">
        <CCard>
          <CCardBody>
            <CForm>
              <CInput
                v-model="user.first_name"
                label="نام"
                horizontal
                :description="validation.first_name ? validation.first_name.msg : null"
                :class="validation.first_name ? 'err' : null"
              />
              <CInput
                v-model="user.last_name"
                label="نام خانوادگی"
                horizontal
                :description="validation.last_name ? validation.last_name.msg : null"
                :class="validation.last_name ? 'err' : null"
              />
              <CInput
                v-model="user.national_code"
                label="کد ملی"
                horizontal
                :description="validation.personalCode ? validation.personalCode.msg : null"
                :class="validation.personalCode ? 'err' : null"
              />
              <CInput
                v-model="user.mobile_number"
                label="شماره همراه"
                horizontal
                :description="validation.personalCode ? validation.personalCode.msg : null"
                :class="validation.personalCode ? 'err' : null"
              />
              <CInput
                v-model="user.shopName"
                label="نام فروشگاه"
                horizontal
                :description="validation.personalCode ? validation.personalCode.msg : null"
                :class="validation.personalCode ? 'err' : null"
              />

              <div style="display: flex; align-content: center; align-items: center; justify-content: space-between; margin-bottom: 15px;">
                <label>استان</label>
                <el-select
                  v-model="province_name"
                  filterable
                  placeholder="استان را انتخاب کنید"
                  style="width: 75%; "
                >
                  <el-option v-for="(item, index) in iranProvinces" :key="index" :label="item.name" :value="item.name">
                  </el-option>
                </el-select>
                <p v-if="validation.province_name">{{ validation.province_name.msg }}</p>
              </div>

              <div style="display: flex; align-content: center; align-items: center; justify-content: space-between; margin-bottom: 15px;">
                <label style="padding-left: 10px">شهر </label>
                <el-select
                  v-model="user.city_name"
                  filterable
                  placeholder="شهر را انتخاب کنید"
                  style="width: 75%; "
                >
                  <el-option
                    v-for="(item, index) in user.province_name?.cities"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
                <p v-if="validation.city_name">{{ validation.city_name.msg }}</p>
              </div>

              <template v-if="$route.params.user === 'new'">
                <CInput
                  v-model="user.password"
                  label="کلمه عبور"
                  horizontal
                  type="password"
                  :description="validation.password ? validation.password.msg : null"
                  :class="validation.password ? 'err' : null"
                />
                <CInput
                  v-model="user.password_confirmation"
                  label="تکرار کلمه عبور"
                  horizontal
                  type="password"
                  :description="validation.password_confirmation ? validation.password_confirmation.msg : null"
                  :class="validation.password_confirmation ? 'err' : null"
                />
              </template>
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'AdminGpsUserDetails',
  layout: 'admin',
  asyncData({ $axios, params, error }) {
    try {
      const data = {}

      return data
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      title: 'افزودن کاربر',
      user: {
        first_name: '',
        last_name: '',
        national_code: '',
        province_name: '',
        city_name: '',
        mobile_number: '',
        password: '',
        shopName: '',
        password_confirmation: ''
      },
      iranProvinces: [],
      province_name: '',
      city_name: '',
      validation: {
        first_name: '',
        last_name: '',
        national_code: '',
        province_name: '',
        city_name: '',
        mobile_number: '',
        password: '',
        shopName: '',
        password_confirmation: ''
      }
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  watch: {
    province_name(newVal, oldVal) {
      this.user.province_name = this.iranProvinces.filter(item => item.name === newVal)[0]
    }
  },
  mounted() {
    this.$axios
      .get('/api/public/iranCities')
      .then(res => {
        this.iranProvinces = res.data
      })
      .catch(err => {
        this.$arpaError()
        console.log('provinces list fetch error -- ', err)
      })
  },
  methods: {
    setProvice(d) {
      this.user.province_name = d
      console.log(d)
    },
    add() {
      this.validation = {}
      const data = this.user
      data.province_name = this.province_name
      this.$axios
        .post(`/api/admin/gps/users`, data)
        .then(response => {
          if (response.data) {
            this.$message({
              message: 'کاربر با موفقیت ثبت شد.',
              type: 'success'
            })
            this.$router.push({ name: 'admin-gps-users' })
          }
        })
        .catch(error => {
          if (error.response.status === 422) {
            this.validation = error.response.data.validation
            this.$message({
              type: 'error',
              message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
            })
          } else {
            this.$alert(error.response.data.message, 'خطا', {
              confirmButtonText: 'باشه'
            })
          }
        })
    }
  }
}
</script>