barg-restuarant/pages/admin/_branch/party-sets/_set.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{name: 'admin-branch-party-sets'}">برگشت به صفحه قبل</CButton>
      <CButton v-if="$route.params.set === 'new'" size="sm" color="success" class="mr-1" @click="post">افزودن</CButton>
      <CButton v-else size="sm" color="success" class="mr-1" @click="update">بروزرسانی</CButton>
    </CustomSubHeader>
    <CRow>
      <CCol lg="6">
        <CCard>
          <CCardBody>
            <CForm>
              <CRow>
                <CCol sm="12">
                  <CInput
                      :class="validation.title ? 'err' : null"
                      label="عنوان"
                      :description="validation.title ? validation.title.msg : null"
                      v-model="partySet.title"
                  />
                </CCol>
                <CCol sm="12">
                  <CInput
                      :class="validation.description ? 'err' : null"
                      label="توضیحات"
                      :description="validation.description ? validation.description.msg : null"
                      v-model="partySet.description"
                  />
                </CCol>
                <CCol sm="12">
                  <CInput
                      :class="validation.price ? 'err' : null"
                      label="قیمت (ريال)"
                      :description="validation.price ? validation.price.msg : null"
                      v-model="partySet.price"
                  />
                </CCol>

                <CCol s="12">
                  <span>ترتیب نمایش در منو</span>
                </CCol>
                <CCol sm="12" class="err">
                  <el-select v-model="partySet.index" filterable style="width: 100%;margin-top: 5px;">
                    <el-option
                        v-for="item in 1000"
                        v-if="!partySets.filter(item2=>Number(item2.index) === item).length"
                        :key="item + 202"
                        :value="item"
                        :label="item"/>
                  </el-select>
                  <p v-if="validation.index" class="text-danger" style="margin-top: 5px;">{{ validation.index.msg }}</p>
                </CCol>

                <CCol sm="12" class="mt-3">
                  <el-checkbox v-model="partySet.active">منو برای مشتریان نمایش داده شود</el-checkbox>
                </CCol>
              </CRow>
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol lg="6">
        <CCard>
          <CCardBody>
            <h3>تصویر: (اختیاری)</h3>
            <el-divider></el-divider>
            <img :src="partySet.image" alt="" style="width: 100%;max-width: 300px;display: block">
            <input type="file" ref="image" @change="imagePreview">
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
import axiosUploadProcess from "@/mixins/axiosUploadProcess"

export default {
  data() {
    return {
      partySets: null,
      partySet: null,
      validation: {}
    }
  },
  mixins: [axiosUploadProcess],
  computed: {
    title() {
      return this.$route.params.food === 'new' ? 'افزودن منوی ویژه مهمانی' : 'مشاهده منوی ویژه'
    }
  },
  methods: {
    imagePreview(e) {
      this.partySet.image = URL.createObjectURL(e.target.files[0])
    },
    post() {
      this.validation = {}
      const data = new FormData()
      data.append('title', this.partySet.title)
      data.append('description', this.partySet.description)
      data.append('active', this.partySet.active)
      data.append('price', this.partySet.price)
      data.append('index', this.partySet.index)
      if (this.$refs.image.files[0]) data.append('image', this.$refs.image.files[0])

      this.$axios.post(`/api/admin/partySet`, data, this.axiosConfig)
          .then(response => {
            this.$message({
              type: 'success',
              message: 'منوی ویژه با موفقیت ایجاد شد.'
            })
            this.$router.push({name: 'admin-branch-party-sets'})
          })
          .catch(err => {
            if (err.response.status === 401) {
              return this.$message({
                type: 'error',
                message: 'لطفا دوباره وارد سیستم شوید.'
              })
            }
            if (err.response.status === 422) this.validation = err.response.data.validation
            else console.log(err.response.data)
          })
    },
    update() {
      this.validation = {}
      const data = new FormData()
      data.append('title', this.partySet.title)
      data.append('description', this.partySet.description)
      data.append('active', this.partySet.active)
      data.append('price', this.partySet.price)
      data.append('index', this.partySet.index)
      if (this.$refs.image.files[0]) data.append('image', this.$refs.image.files[0])

      this.$axios.put(`/api/admin/partySet/${this.partySet._id}`, data, this.axiosConfig)
          .then(response => {
            this.$message({
              type: 'success',
              message: 'اطلاعات بروزرسانی شد.'
            })
            this.$nuxt.refresh()
            this.$refs.image.value = null
          })
          .catch(err => {
            if (err.response.status === 401) {
              return this.$message({
                type: 'error',
                message: 'لطفا دوباره وارد سیستم شوید.'
              })
            }
            if (err.response.status === 422) this.validation = err.response.data.validation
            else console.log(err.response.data)
          })
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  layout: 'admin',
  async asyncData({$axios, params, error}) {
    try {
      const partySets = await $axios.get(`/api/public/partySets`)
      if (params.set !== 'new') {
        const partySet = await $axios.get(`/api/public/partySet/${params.set}`)
        return {
          partySets: partySets.data,
          partySet: partySet.data
        }
      } else {
        return {
          partySets: partySets.data,
          partySet: {
            title: '',
            description: '',
            price: 0,
            active: true,
            image: '',
            index: 0
          }
        }
      }
    } catch (e) {
      if (e?.response?.status === 401) {
        error({
          status: 401,
          message: "لطفا دوباره وارد سیستم شوید.",
        });
      }
      if (e?.response?.status === 403) {
        error({
          status: 403,
          message: e?.response?.data?.message,
        });
      }
      if (e?.response?.status === 500) {
        error({
          status: 500,
          message: "مشکلی در گرفتن اطلاعات پیش آمده",
        });
      } else
        error({
          status: 404,
          message: "اطلاعات مورد نظر پیدا نشد",
        });
    }
  }
}
</script>