asan-service/pages/admin/pieces/_piece.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-pieces' }">برگشت به صفحه قبل</CButton>
      <CButton v-if="$route.params.piece === 'new'" size="sm" color="success" style="margin-right: 10px" @click="add"
        >افزودن</CButton
      >
      <CButton v-else size="sm" color="success" style="margin-right: 10px" @click="update">بروزرسانی</CButton>
    </CustomSubHeader>
    <CRow>
      <CCol xl="6">
        <CCard>
          <CCardBody>
            <CForm>
              <CInput
                v-model="piece.name"
                label="نام قطعه"
                horizontal
                :description="validation.name ? validation.name.msg : null"
                :class="validation.name ? 'err' : null"
              />
              <CInput
                v-model="piece.code"
                label="کد قطعه"
                horizontal
                :description="validation.code ? validation.code.msg : null"
                :class="validation.code ? 'err' : null"
              />
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'AddminPieceDetails',
  layout: 'admin',
  async asyncData({ $axios, params, error }) {
    try {
      if (params.piece === 'new') {
        return {
          piece: {
            name: '',
            code: ''
          }
        }
      } else {
        const piece = await $axios.get(`/api/admin/pieces/${params.piece}`)
        return {
          piece: piece.data
        }
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      title: this.$route.params.piece === 'new' ? 'افزودن قطعه' : 'ویرایش قطعه',
      piece: null,
      validation: {}
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  methods: {
    add() {
      this.validation = {}

      this.$axios
        .post(`/api/admin/piece`, this.piece)
        .then(response => {
          if (response.data) {
            this.$message({
              message: 'قطعه با موفقیت ثبت شد',
              type: 'success'
            })
            this.$router.push({ name: 'admin-pieces' })
          }
        })
        .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: 'باشه'
            })
          }
        })
    },
    update() {
      this.validation = {}

      this.$axios
        .put(`/api/admin/piece/${this.piece._id}`, this.piece)
        .then(response => {
          if (response.data) {
            this.$message({
              message: 'قطعه با موفقیت بروزرسانی شد',
              type: 'success'
            })
          }
        })
        .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>