asan-service/pages/account/agents/pieces/_pr.vue

<template>
  <user-dashboard-container page-class="post agent-requests-details" panel-title="فرم درخواست قطعه">
    <el-alert v-if="pieceRequest.status === 'temp'" :title="alertMsg" class="mb-3" type="warning"> </el-alert>
    <form class="form form_3">
      <div class="userInfo">
        <div class="formRow">
          <label for="customer_name">نام و نام خانوادگی:</label>
          <input id="customer_name" type="text" :value="pieceRequest.agent_id.full_name" disabled />
        </div>
        <div class="formRow">
          <label for="customer_code">کد نمایندگی:</label>
          <input id="customer_code" type="text" :value="pieceRequest.agent_id.agent_code" disabled />
        </div>
        <div class="formRow">
          <label for="mobile">شماره موبایل:</label>
          <input id="mobile" type="text" :value="pieceRequest.agent_id.mobile_number" disabled />
        </div>
        <div class="formRow">
          <label for="fax">شماره فکس:</label>
          <input id="fax" type="text" :value="pieceRequest.agent_id.fax_number" disabled />
        </div>
        <div class="formRow">
          <label for="province">استان:</label>
          <input id="province" type="text" :value="pieceRequest.agent_id.province_name" disabled />
        </div>
        <div class="formRow">
          <label for="city">شهر:</label>
          <input id="city" type="text" :value="pieceRequest.agent_id.city_name" disabled />
        </div>
      </div>

      <div class="formRow">
        <label>آدرس:</label>
        <textarea name="description" cols="30" rows="5" disabled :value="pieceRequest.agent_id.address"></textarea>
      </div>

      <hr />

      <div class="formRow">
        <label v-if="pieceRequest.status === 'temp'" for="description">توضیحات فرم (اختیاری):</label>
        <label v-else for="description">توضیحات فرم:</label>
        <el-tooltip
          v-model="descriptionTooltip"
          class="item"
          effect="dark"
          content="میتوانید توضیحات را در هر زمان تغییر دهید"
          placement="top-start"
          :disabled="pieceRequest.status !== 'temp'"
        >
          <textarea
            id="description"
            v-model="pieceRequest.description"
            name="description"
            :disabled="pieceRequest.status !== 'temp'"
            :placeholder="descriptionPlaceHolder"
            cols="30"
            rows="10"
            @blur="updateDescription"
          ></textarea>
        </el-tooltip>
      </div>
    </form>

    <div class="notes">
      <h3>توجه:</h3>
      <ul>
        <li>
          <p>
            قطعات غیرگارانتی درخواستی، در صورت موجود بودن، پس از اعلام و دریافت هزینه مربوطه برای نمایندگان محترم ارسال
            خواهد شد.
          </p>
        </li>
        <li>
          <p>
            تمامی قطعات موردنیاز گارانتی برای نمایندگان محترم فاکتور خواهد شد و پس از ارسال داغی قطعات بهمراه کپی کارت
            گارانتی مربوطه، از حساب ایشان کسر می گردد.
          </p>
        </li>
      </ul>
    </div>

    <div class="add-list">
      <h2>لیست قطعات درخواستی:</h2>
      <div class="tableBox">
        <table class="pieces-items">
          <thead>
            <tr>
              <th class="index">ردیف</th>
              <th class="recieptDate">تاریخ پذیرش</th>
              <th class="itemName">نام کالا</th>
              <th class="itemSerial">سریال گارانتی</th>
              <th class="guaranteeStatus">وضعیت گارانتی</th>
              <th class="pieceName">نام قطعه</th>
              <th class="pieceCode">کد قطعه</th>
              <th class="quantity">تعداد</th>
              <th v-if="pieceRequest.status === 'temp'" class="removeBtn">حذف</th>
            </tr>
          </thead>

          <tbody>
            <tr
              v-for="(item, index) in pieceRequest.items"
              :key="item.ItemID + index + '_pr_pieces'"
              :title="item.ItemName + ' - ' + item.pieceName"
            >
              <td class="index">
                <span>{{ index + 1 }}</span>
              </td>

              <td class="recieptDate">
                <span> {{ $jDate(item.ItemReceptionTransDate) }} </span>
              </td>

              <td class="itemName">
                <span class="singleLineTxt">{{ item.ItemName }}</span>
              </td>

              <td class="itemSerial">
                <span>{{ item.SerialNo1 || '-' }}</span>
              </td>

              <td class="guaranteeStatus">
                <span v-if="item.gStatus">دارد</span>
                <span v-else>ندارد</span>
              </td>

              <td class="pieceName">
                <span> {{ item.pieceName }} </span>
              </td>

              <td class="pieceCode">
                <span> {{ item.pieceCode }} </span>
              </td>
              <td class="quantity">
                <span>{{ item.pieceQuantity }}</span>
              </td>

              <td v-if="pieceRequest.status === 'temp'" class="removeBtn">
                <button class="trashIcon-btn" title="حذف پیشنویس" @click="removeItemFromList(item._id)">
                  <i class="fal fa-trash-alt"></i>
                </button>
              </td>
            </tr>

            <tr v-if="!pieceRequest.items.length" class="odd">
              <td class="noItem" colspan="5">
                <p style="color: #000">هنوز هیچ آیتمی اضافه نکردید.</p>
              </td>
            </tr>

            <tr v-if="pieceRequest.status === 'temp'" class="addStuffBtn" @click="piecesModal = true">
              <td colspan="5">
                <button>
                  <span>افزودن قطعه</span>
                  <i class="far fa-plus"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <table-notice />

      <hr />

      <div v-if="pieceRequest.status === 'temp'" class="btnRow">
        <button class="btn btn-primary" @click="sendForm">ارسال به آسان سرویس</button>
        <button class="btn btn-danger" @click="removePR">حذف این فرم</button>
      </div>
    </div>

    <template #body>
      <AddPiecesToPieceRequest
        :key="piecesModalKey"
        :show="piecesModal"
        :pr-id="pieceRequest._id"
        @closeModal="closePiecesModal"
      />
    </template>
  </user-dashboard-container>
</template>

<script>
export default {
  name: 'AccountAgentPrDetails',
  layout: 'user',
  async asyncData({ $axios, params, error }) {
    try {
      const pieceRequest = await $axios.get(`/api/agent/pr/${params.pr}`)
      return {
        pieceRequest: pieceRequest.data
      }
    } catch (e) {
      error({ status: 404, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      pieceRequest: null,
      validation: {},
      piecesModal: false,
      piecesModalKey: 0,
      descriptionTooltip: false,
      alertMsg:
        'این درخواست در پیشنویس ها ذخیره شده و هنوز  در پایگاه داده شرکت آسان سرویس ثبت نگردیده. شما میتوانید قطعات را در هر زمان به این فرم اضافه یا از فرم حذف کنید سپس نسبت به ارسال نهایی اقدام کنید.'
    }
  },
  computed: {
    prId() {
      return this.$route.params.pr
    },
    descriptionPlaceHolder() {
      if (this.pieceRequest.status === 'temp') return 'توضیحات راجع به قطعات را میتوانید اینجا بنویسید'
      else return 'بدون توضیحات'
    }
  },
  mounted() {
    setTimeout(() => {
      if (this.pieceRequest.status === 'temp') this.descriptionTooltip = true
    }, 1000)
  },
  methods: {
    closePiecesModal() {
      this.piecesModal = false
      this.piecesModalKey = Math.random()
    },
    removeItemFromList(id) {
      if (this.pieceRequest.status !== 'temp') return
      this.$confirm('این مورد حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .delete(`/api/agent/removePrItems/${id}`)
            .then(res => {
              this.$message({
                type: 'success',
                message: res.data.message
              })
              this.$nuxt.refresh()
            })
            .catch(() => {
              this.$message({
                type: 'error',
                message: 'مشکلی در انجام عملیات پیش آمده'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: 'عملیات لغو شد'
          })
        })
    },
    updateDescription() {
      if (this.pieceRequest.status !== 'temp') return
      const data = { description: this.pieceRequest.description }
      this.$axios
        .put(`/api/agent/prDescription/${this.prId}`, data)
        .then(res => {
          this.$message({
            type: 'success',
            message: res.data.message
          })
        })
        .catch(() => {
          this.$message({
            type: 'error',
            message: 'مشکلی در ثبت اطلاعات پیش آمده'
          })
        })
    },
    sendForm() {
      this.$confirm('فرم درخواست قطعه به آسان سرویس ارسال شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .post(`/api/agent/sendPr/${this.prId}`)
            .then(res => {
              this.$message({
                type: 'success',
                message: res.data.message
              })
              this.$router.push({ name: 'account-agents-pieces', query: { type: 'sent' } })
            })
            .catch(err => {
              let msg = 'مشکلی در ارسال درخواست پیش آمده'
              if (err.response.status === 406) msg = err.response.data.message
              this.$message({
                type: 'error',
                message: msg
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: 'عملیات لغو شد'
          })
        })
    },
    removePR() {
      this.$confirm('این فرم از پیشنویس ها حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .delete(`/api/agent/pr/${this.prId}`)
            .then(res => {
              this.$message({
                type: 'success',
                message: res.data.message
              })
              this.$router.push({ name: 'account-agents-pieces', query: { type: 'temp' } })
            })
            .catch(() => {
              this.$message({
                type: 'error',
                message: 'مشکلی در حذف پیشنویس پیش آمده'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: 'عملیات لغو شد'
          })
        })
    }
  }
}
</script>