ostandari/pages/admin/contents/_details.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin' }">برگشت به صفحه اصلی داشبورد</CButton>
      <CButton v-if="!exist" 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>
      <template v-if="manager">
        <CCol lg="6">
          <CCard>
            <CCardBody>
              <CCol sm="12">
                <CInput
                    :class="validation.title ? 'err' : null"
                    label="نام و نام خانوادگی"
                    :description="validation.title ? validation.title.msg : null"
                    v-model="page.title"
                />
              </CCol>
              <CCol sm="12">
                <CInput
                    :class="validation.email ? 'err' : null"
                    label="ایمیل"
                    :description="validation.email ? validation.email.msg : null"
                    v-model="page.email"
                />
              </CCol>
            </CCardBody>
          </CCard>
        </CCol>
        <CCol lg="6">
          <CCard>
            <CCardBody>
              <CCol sm="12">
                <h5>عکس مدیر سازمان</h5>
                <el-divider/>
                <CCol>
                  <img
                      :src="page.cover"
                      style="width: 50%;"
                      alt=""
                  />
                </CCol>
                <input type="file" ref="cover" @change="imagePreview"/>
                <p
                    style="margin-top : 5px !important ;"
                    class="form-err"
                    v-if="validation.cover"
                >
                  {{ validation.cover.msg }}
                </p>
                <p class="mt-3 text-muted">
                  <!--                  عکس 500*500 باشد. در غیر این صورت اتوماتیک بریده می شود.-->
                </p>
              </CCol>
            </CCardBody>
          </CCard>
        </CCol>
      </template>
      <template v-if="sima">
        <CCol lg="12">
          <CCard>
            <CCardBody>
              <CCol sm="12">
                <el-checkbox v-model="page.showInMenu" label="این صفحه در منوی سایت نمایش داده شود"/>
              </CCol>
            </CCardBody>
          </CCard>
        </CCol>
      </template>
      <CCol>
        <CCard>
          <CCardBody>
            <CCol sm="12" class="mb-3">
              <template>
                <client-only>
                  <p>محتوا صفحه</p>
                  <ckeditor
                      v-model="page.pageContent"
                      :config="editorConfig"
                  ></ckeditor>
                  <p class="text-danger" v-if="validation.pageContent">
                    {{ validation.pageContent.msg }}
                  </p>
                </client-only>
              </template>
            </CCol>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

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

export default {
  data() {
    return {
      page: null,
      exist: false,
      manager: false,
      sima: false,
      validation: {},
      editorConfig: {
        language: "en",
        extraPlugins: ["bidi", "justify"],
      }
    };
  },
  mixins: [axiosUploadProcess],
  computed: {
    title() {
      if (!this.manager) {
        return this.page.title
      } else {
        return 'مدیر سازمان'
      }
    },
  },
  methods: {
    imagePreview(e) {
      this.page.cover = URL.createObjectURL(e.target.files[0]);
    },
    post() {
      this.validation = {};
      const data = new FormData();
      data.append("title", this.page.title.trim());
      if (this.manager) data.append("email", this.page.email);
      data.append("param", this.$route.params.details);
      data.append("pageContent", this.page.pageContent);
      if (this.manager) {
        if (this.$refs.cover.files[0])
          data.append("cover", this.$refs.cover.files[0]);
      }

      if (this.sima) {
        data.append("showInMenu", this.page.showInMenu);
      }

      this.$axios
          .post(`/api/admin/content`, data, this.axiosConfig)
          .then((response) => {
            this.$message({
              type: "success",
              message: "صفحه با موفقیت ایجاد شد.",
            });
            this.$nuxt.refresh();
          })
          .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);
          });
    },
    update() {
      this.validation = {};

      const data = new FormData();
      data.append("title", this.page.title.trim());
      if (this.manager) data.append("email", this.page.email);
      data.append("param", this.$route.params.details);
      data.append("pageContent", this.page.pageContent);
      if (this.manager) {
        if (this.$refs.cover.files[0])
          data.append("cover", this.$refs.cover.files[0]);
      }

      if (this.sima) {
        data.append("showInMenu", this.page.showInMenu);
      }

      this.$axios
          .put(`/api/admin/content/${this.$route.params.details}`, data, this.axiosConfig)
          .then((response) => {
            this.$message({
              type: "success",
              message: "اطلاعات بروزرسانی شد.",
            });
            this.$nuxt.refresh();
          })
          .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, params, error}) {
    try {
      const page = await $axios.get(`/api/admin/content/${params.details}`);

      let title;
      let manager = false;
      let sima = false;

      switch (params.details) {
        case 'aboutState':
          title = 'درباره استان'
          break;
        case 'sima':
          title = 'سیمای استان'
          sima = true;
          break;
        case 'performance':
          title = 'عملکرد'
          break;
        case 'aboutus':
          title = 'درباره ما'
          break;
        case 'services':
          title = 'خدمات'
          break;
        case 'terms':
          title = 'شرایط استفاده'
          break;
        case 'privacy':
          title = 'حفظ حریم خصوصی'
          break;
        case 'cookies':
          title = 'کوکی ها'
          break;
        case 'facilities':
          title = 'امکانات'
          break;
        case 'layout':
          title = 'صفحه آرایی'
          break;
        case 'faq':
          title = 'سوالات متداول'
          break;
        case 'rules':
          title = 'قوانین و مقررات'
          break;
        case 'sitemap':
          title = 'نقشه سایت'
          break;
        case 'manager':
          manager = true;
          title = '';
          break;

        default:
          title = 'صفحه'
          break;
      }

      if (page.data) {
        return {
          exist: true,
          manager,
          sima,
          page: page.data,
        };
      } else {
        return {
          exist: false,
          manager,
          sima,
          page: {
            title: title,
            email: '',
            param: params.details,
            pageContent: '',
            cover: ''
          }
        };
      }

    } catch (e) {
      if (e?.response?.status === 401) {
        error({
          status: 401,
          message: 'شما اجازه دسترسی به این صفحه را ندارید'
        })
      } else {
        error({
          status: 500,
          message: "مشکلی در گرفتن اطلاعات بوجود آمده است",
        });
      }
    }
  },
};
</script>