asan-service/pages/admin/brands/_item.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">برند ها</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-brands' }">برگشت به صفحه قبل</CButton>
      <CButton v-if="$route.params.item === 'new'" size="sm" color="success" style="margin-right: 10px" @click="post"
        >افزودن</CButton
      >
      <CButton v-else size="sm" color="success" style="margin-right: 10px" @click="update">بروزرسانی</CButton>
    </CustomSubHeader>

    <CCard>
      <CCardBody>
        <CRow>
          <CCol xl="6" lg="6" sm="12">
            <CInput
              v-model="brand.title"
              label="نام"
              horizontal
              :description="validation.title ? validation.title.msg : null"
              :class="validation.title ? 'err' : null"
            />

            <CInput
              v-model="brand.link"
              label="لینک"
              horizontal
              :description="validation.link ? validation.link.msg : null"
              :class="validation.link ? 'err' : null"
            />

            <CTextarea
              v-model="brand.description"
              label="توضیح"
              horizontal
              rows="4"
              :description="validation.description ? validation.description.msg : null"
              :class="validation.description ? 'err' : null"
            />
          </CCol>
          <CCol xl="6" lg="6" sm="12">
            <CRow>
              <CCol col="12" class="mb-3">
                <img :src="brand.logo" alt="" style="width: 100%; max-width: 300px" />
              </CCol>
              <CCol col="1">
                <span>کاور</span>
              </CCol>
              <CCol col="11">
                <label for="file" class="btn-upload">آپلود تصویر</label>
                <input id="file" ref="myFiles" style="display: none" type="file" @change="imagePreview" />
              </CCol>
              <CCol col="11" class="mr-auto mt-3">
                <small v-if="validation.logo" class="form-text alert-danger w-100">
                  {{ validation.logo.msg }}
                </small>
              </CCol>
            </CRow>
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
export default {
  name: 'AddminBrandsItem',
  layout: 'admin',
  async asyncData({ $axios, params, error }) {
    try {
      const data = {}
      if (params.item !== 'new') {
        const brand = await $axios.get(`/api/admin/brand/${params.item}`)
        data.brand = brand.data
        data.brand.logo = '/uploads/images/brands/' + brand.data.logo
      }
      return data
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      brand: {
        title: '',
        link: '',
        description: '',
        logo: ''
      },
      validation: {}
    }
  },
  head() {
    return {
      title: 'برندها'
    }
  },
  computed: {
    config() {
      return this.$config
    }
  },
  methods: {
    imagePreview(event) {
      this.brand.logo = URL.createObjectURL(event.target.files[0])
    },

    post() {
      this.validation = {}
      const data = new FormData()
      data.append('title', this.brand.title)
      data.append('link', this.brand.link)
      data.append('description', this.brand.description)
      data.append('logo', this.$refs.myFiles.files[0])
      this.$axios
        .post('/api/admin/brand', data, this.axiosConfig)
        .then(res => {
          this.$message({
            type: 'success',
            message: 'برند با موفقیت ثبت شد'
          })
          this.$router.push({ name: 'admin-brands' })
        })
        .catch(err => {
          if (err.response.status === 422) {
            this.$message({
              type: 'warning',
              message: 'پارامتر ها رو بررسی کنید'
            })
            this.validation = err.response.data.validation
          }
          if (err.response.status === 401)
            this.$message({
              type: 'error',
              message: 'دوباره وارد سیستم شوید'
            })
        })
    },
    update(){

      this.validation = {}
      const data = new FormData()
      data.append('title', this.brand.title)
      data.append('link', this.brand.link)
      data.append('description', this.brand.description)
      if(this.$refs.myFiles.files[0]){
        data.append('logo', this.$refs.myFiles.files[0])
      }

      this.$axios
        .put(`/api/admin/brand/${this.$route.params.item}`, data, this.axiosConfig)
        .then(res => {
          this.$message({
            type: 'success',
            message: 'برند با موفقیت ثبت شد'
          })
          this.$router.push({ name: 'admin-brands'})
        })
        .catch(err => {
          if (err.response.status === 422) {
            this.$message({
              type: 'warning',
              message: 'پارامتر ها رو بررسی کنید'
            })
            this.validation = err.response.data.validation
          }
          if (err.response.status === 401)
            this.$message({
              type: 'error',
              message: 'دوباره وارد سیستم شوید'
            })
        })
      
    }
  }
}
</script>
<style lang="scss">
.btn-upload {
  background-color: cornflowerblue;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  color: white;
  float: left;
}
</style>