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

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">شکایت</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-complaint' }">برگشت به صفحه قبل</CButton>
    </CustomSubHeader>
    <div class="m-3">
      <div class="row ui-box p-3">
        <h4>شکایت</h4>
        <hr />
        <div class="col-lg-4">
          <div class="d-flex mt-3" style="align-items: center">
            <h5 style="margin-bottom: 1rem">نام و نام خانوادگی :</h5>
            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.fullName }}</p>
          </div>

          <div class="d-flex mt-3" style="align-items: center">
            <h5 style="margin-bottom: 1rem">کد ملی :</h5>
            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.national }}</p>
          </div>

          <div class="d-flex mt-3" style="align-items: center">
            <h5 style="margin-bottom: 1rem">شماره تماس :</h5>
            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.phoneNumber }}</p>
          </div>

          <div class="d-flex mt-3" style="align-items: center">
            <h5 style="margin-bottom: 1rem">ایمیل :</h5>
            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.email }}</p>
          </div>

          <div class="d-flex mt-3" style="align-items: center">
            <h5 style="margin-bottom: 1rem">کد پذیرش :</h5>
            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.receptionCode }}</p>
          </div>

          <div v-if="complaint?.deviceNumber" class="d-flex mt-3" style="align-items: center">
            <h5 style="margin-bottom: 1rem">شماره سریال دستگاه :</h5>
            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.deviceNumber }}</p>
          </div>

          <div class="d-flex mt-3" style="align-items: center">
            <h5 style="margin-bottom: 1rem">نوع ارتباط :</h5>
            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.callType ? 'ایمیل' : ' تماس تلفنی' }}</p>
          </div>
        </div>
        <div class="col-lg-1" style="border-left: 1px solid #8f8f8f; height: 500px"></div>
        <div class="col-lg-7">
          <h5>توضیحات :</h5>
          <div style="display: flex; align-items: center; justify-content: center">
            <div class="d-flex mt-3" style="align-items: center; justify-content: center">
              <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.caption }}</p>
            </div>
          </div>
        </div>
        <hr class="mt-3" />
        <div v-if="hasPermission('apply')">
          <div  v-if="complaint?.user" class="d-flex mt-3" style="align-items: center">
            <h5 style="text-wrap: nowrap; margin-left: 10px;">نام و نام خانوادگی: </h5>
            <p>{{ complaint?.user?.first_name + " " +  complaint?.user?.last_name }}</p>
          </div>
          <div class="d-flex mt-3" style="align-items: center">
            <h5 style="text-wrap: nowrap; margin-left: 10px;">توضیح :</h5>
              <el-input v-model="desc" type="textarea" rows="3"></el-input>
          </div>
          <div class="d-flex mt-3" style="align-items: center">
            <h5>پیگیری شده :</h5>
            <el-checkbox v-model="complete" class="p-2"></el-checkbox>
          </div>
          <div class="d-flex mt-3" style="align-items: center; justify-self: center">
            <el-button class="p-2 w-20 m-auto" type="primary" @click="applyComplaint">تایید</el-button>
          </div>
        </div>
        <div v-else>
          <div v-if="complaint?.user" class="d-flex mt-3" style="align-items: center">
            <h5 style="text-wrap: nowrap; margin-left: 10px;">نام و نام خانوادگی: </h5>
            <p>{{ complaint.user?.first_name + " " +  complaint.user?.last_name }}</p>
          </div>
          <div v-if="complaint?.desc" class="d-flex mt-3" style="align-items: center">
            <h5 style="text-wrap: nowrap; margin-left: 10px;">توضیح: </h5>
            <p>{{ complaint.desc }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminComplaintDetails',

  layout: 'admin',

  async asyncData({ $axios, params, query, error }) {},
  data() {
    return {
      complaint: null,
      complete: false,
      desc:''
    }
  },

  computed: {},
  beforeMount() {
    this.$axios.get(`/api/admin/complaint/${this.$route.params.item}`).then(res => {
      this.complaint = res.data
      this.complete = res.data.complete
      this.desc = res.data.desc
    

    })
  },
  methods: {
    hasPermission(permission) {
      if (this.$auth.loggedIn) return this.$auth.user.permissions.includes(permission)
      else return false
    },
    applyComplaint() {
      this.$axios.put(`/api/admin/complaint/${this.$route.params.item}`, { complete: this.complete, desc: this.desc }).then(res => {
        this.complaint = res.data
        this.complete = res.data.complete
        this.$router.push('/admin/complaint')
      })
    }
  }
}
</script>

<style lang="scss">
.progressBar {
  .el-progress-bar__inner {
    left: auto;
    right: 0;
    text-align: left;
  }
}

.btn-upload {
  background-color: cornflowerblue;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  color: white;
  float: left;
}

.space {
  margin: 5rem;
}
.ui-box {
  background-color: white;
  border-radius: 10px;
}
.w-20 {
  width: 20%;
}
</style>