ostandari/pages/admin/meeting/_details.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{name: 'admin-meeting'}">برگشت به صفحه قبل</CButton>
<!--      <CButton size="sm" color="success" class="mr-1" @click="update">بروزرسانی</CButton>-->
    </CustomSubHeader>
    <CRow style="display : flex ; flex-direction: column">
      <CRow>
        <CCol lg="6">
          <CCard>
            <CCardBody>
              <CCol sm="12">
                <CInput disabled :class="validation.name ? 'err' : null" label="نام و نام خانوادگی" :description="
                      validation.name ? validation.name.msg : null
                    " v-model="meeting.name" />
              </CCol>
              <el-divider></el-divider>
              <CCol sm="12">
                <CInput disabled :class="validation.email ? 'err' : null" label="ایمیل" :description="
                      validation.email ? validation.email.msg : null
                    " v-model="meeting.email" />
              </CCol>
              <el-divider></el-divider>
              <CCol sm="12">
                <CInput disabled :class="validation.phoneNumber ? 'err' : null" label="شماره تلفن" :description="
                      validation.phoneNumber ? validation.phoneNumber.msg : null
                    " v-model="meeting.phoneNumber" />
              </CCol>
              <el-divider></el-divider>
              <CCol sm="12">
                <CInput disabled :class="validation.nationalCode ? 'err' : null" label="کد ملی" :description="
                      validation.nationalCode ? validation.nationalCode.msg : null
                    " v-model="meeting.nationalCode" />
              </CCol>
            </CCardBody>
          </CCard>
        </CCol>
        <CCol lg="6">
          <CCard>
            <CCardBody>
              <CCol sm="12">
                <CInput disabled :class="validation.subject ? 'err' : null" label="موضوع" :description="
                      validation.subject ? validation.subject.msg : null
                    " v-model="meeting.subject" />
              </CCol>
              <el-divider></el-divider>
              <CCol sm="12">
                <CTextarea disabled :class="validation.description ? 'err' : null" label="متن پیام" :description="
                      validation.description ? validation.description.msg : null
                    " v-model="meeting.description" />
              </CCol>
            </CCardBody>
          </CCard>
        </CCol>
      </CRow>
    </CRow>
  </div>
</template>

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

  export default {
    data() {
      return {
        meeting: null,
        validation: {}
      };
    },
    mixins: [unreadMeetingReq],
    computed: {
      title() {
        return "مشاهده جزئیات پیام";
      },
    },
    methods: {
      imagePreview(e) {
        this.meeting.cover = URL.createObjectURL(e.target.files[0]);
      },
      update() {
        this.validation = {};

        const data = new FormData();
        data.append("name", this.meeting.name.trim());
        data.append("description", this.meeting.description.trim());
        data.append("email", this.meeting.email);
        data.append("allowShow", this.meeting.allowShow);

        this.$axios
          .put(`/api/admin/meeting/${this.$route.params.type}/${this.meeting._id}`, data, this.axiosConfig)
          .then((response) => {
            this.$message({
              type: "success",
              message: "اطلاعات بروزرسانی شد.",
            });
            this.$router.push({
              name: "admin-meetings-type",
              params : {type : this.$route.params.type}
            });
          })
          .catch((err) => {
            if (err.response.status === 401) {
              return this.$message({
                type: "error",
                message: "لطفا دوباره وارد سیستم شوید.",
              });
            }
            if (err.response.status === 403) {
              return this.$message({
                type: "error",
                message: err.response.data.message,
              });
            }
            if (err.response.status === 500) {
              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,
      $auth,
      params,
      query,
      error
    }) {
      try {
        const meeting = await $axios.get(`/api/admin/meeting/${params.details}`);

        return {
          meeting: meeting.data
        };
      } 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>