asan-service/pages/account/drafts/_draftID.vue

<template>
  <user-dashboard-container page-class="post" panel-title="ارسال برای گارانتی">
    <el-alert :title="alertMsg" class="mb-3" type="warning"> </el-alert>
    <form class="form form_3">
      <div class="formDB">
        <!-- <img v-if="transactionDraft.db_name === 'panatech'" src="/assets/img/panatech-small.png" alt="panatech" />
				<img v-if="transactionDraft.db_name === 'verity'" src="/assets/img/verity-small.png" alt="verity" /> -->
        <template v-if="transactionDraft.db_name === 'verity'">
          <i class="fas fa-phone-laptop"></i>
          <span>لوازم جانبی کامپیوتر و موبایل</span>
        </template>

        <template v-if="transactionDraft.db_name === 'panatech'">
          <i class="fas fa-photo-video"></i>
          <span>لوازم صوتی و تصویری خودرو</span>
        </template>

        <!-- <hr /> -->
      </div>
      <div class="userInfo">
        <div class="formRow">
          <label for="customer_name">نام مشتری:</label>
          <input id="customer_name" type="text" :value="user.first_name + ' ' + user.last_name" disabled />
        </div>
        <div class="formRow">
          <label for="customer_code">کد مشتری:</label>
          <input id="customer_code" type="text" :value="businessCode" disabled />
        </div>
        <div class="formRow">
          <label for="mobile">شماره موبایل:</label>
          <input id="mobile" type="text" :value="user.mobile_number" disabled />
        </div>
      </div>

      <div class="formRow">
        <label>آدرس:</label>
        <textarea name="address" rows="5" disabled :value="userAddress"></textarea>
      </div>

      <hr />

      <div class="formRow">
        <label for="description">توضیحات فرم (اختیاری):</label>
        <el-tooltip
          v-model="descriptionTooltip"
          class="item"
          effect="dark"
          content="میتوانید توضیحات را در هر زمان تغییر دهید"
          placement="top-start"
        >
          <textarea
            id="description"
            v-model="transactionDraft.description"
            name="description"
            placeholder="توضیحات راجع به کالاها را میتوانید اینجا بنویسید"
            cols="30"
            rows="10"
            @blur="updateDescription"
          ></textarea>
        </el-tooltip>
      </div>
    </form>

    <div class="add-list">
      <h2>لیست کالاهای افزوده شده:</h2>
      <div class="tableBox">
        <table class="formItems">
          <thead>
            <tr>
              <th class="index">ردیف</th>
              <th class="itemName">نام کالا</th>
              <th class="quantity">تعداد</th>
              <th class="itemSerial">سریال گارانتی</th>
              <th class="removeBtn">حذف</th>
            </tr>
          </thead>

          <tbody>
            <tr
              v-for="(item, index) in transactionDraft.items"
              :key="item.ItemID + index + '_addListItemKey'"
              :title="getItemName(item.ItemID)"
            >
              <td class="index">
                <span>{{ index + 1 }}</span>
              </td>
              <td class="itemName">
                <span class="singleLineTxt">{{ getItemName(item.ItemID) }}</span>
              </td>
              <td class="quantity">
                <span>{{ item.MjQty }}</span>
              </td>
              <td class="itemSerial">
                <span>{{ item.SerialNo1 || '-' }}</span>
              </td>
              <td class="removeBtn">
                <button class="trashIcon-btn" title="حذف کالا" @click="removeItemFromList(item.SerialNo1, item.ItemID)">
                  <i class="fal fa-trash-alt"></i>
                </button>
              </td>
            </tr>

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

            <tr class="addStuffBtn" @click="stuffModal = true">
              <td colspan="5">
                <button>
                  <span>افزودن کالا</span>
                  <i class="far fa-plus"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <table-notice />

      <hr />

      <div class="btnRow">
        <button class="btn btn-primary" @click="agentsModal = true">ارسال به آسان سرویس</button>
        <button class="btn btn-danger" @click="removeDraft">حذف این فرم</button>
      </div>
    </div>

    <template #body>
      <AddStuffModal
        :key="addStuffKey"
        :show="stuffModal"
        :db_name="transactionDraft.db_name"
        @closeModal="closeAddStuff"
      />
      <SelectAgentModal :key="agentsKey" :draft="transactionDraft" :show="agentsModal" @closeModal="closeAgents" />
    </template>
  </user-dashboard-container>
</template>

<script>
export default {
  name: 'AccountDraftDetails',
  layout: 'user',
  async asyncData({ $axios, params, error }) {
    try {
      const transactionDraft = await $axios.get(`/api/user/transactionDraft/${params.draftID}`)
      return {
        transactionDraft: transactionDraft.data
      }
    } catch (e) {
      error({ status: 404, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      transactionDraft: null,
      validation: {},
      stuffModal: false,
      agentsModal: false,
      addStuffKey: 0,
      agentsKey: 1,
      descriptionTooltip: false,
      alertMsg:
        'این فرم در پیشنویس ها ذخیره شده و هنوز  در پایگاه داده شرکت آسان سرویس ثبت نگردیده. شما میتوانید کالاها را در هر زمان به این فرم اضافه یا از فرم حذف کنید سپس نسبت به ارسال نهایی اقدام کنید.'
    }
  },
  computed: {
    user() {
      return this.$auth.user
    },
    userAddress() {
      const user = this.user
      return user.province_name + '، ' + user.city_name + '، ' + user.address + '،کد پستی: ' + user.postal_code
    },
    products() {
      if (this.transactionDraft.db_name === 'panatech') return this.$store.state.front.panatechProducts
      else if (this.transactionDraft.db_name === 'verity') return this.$store.state.front.verityProducts
      else return []
    },
    draftID() {
      return this.$route.params.draftID
    },
    businessCode() {
      const errMsg = 'عدم ثبت در پایگاه داده'
      if (this.transactionDraft.db_name === 'panatech') return this.user.panatech_businessCode || errMsg
      if (this.transactionDraft.db_name === 'verity') return this.user.verity_businessCode || errMsg
      return errMsg
    }
  },
  mounted() {
    setTimeout(() => (this.descriptionTooltip = true), 1000)
  },
  methods: {
    closeAddStuff() {
      this.stuffModal = false
      this.addStuffKey = Math.random()
    },
    closeAgents() {
      this.agentsModal = false
      this.agentsKey = Math.random() + 1
    },
    getItemName(id) {
      return this.products?.filter(item => item.ItemID === id)[0]?.ItemName || 'درحال بارگیری'
    },
    removeItemFromList(itemSerial, itemId) {
      this.$confirm('این مورد حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .put(`/api/user/transactionDraftItemRemove/${this.draftID}`, { itemId, itemSerial })
            .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() {
      const data = { description: this.transactionDraft.description }
      this.$axios
        .put(`/api/user/transactionDraft/${this.draftID}`, data)
        .then(res => {
          this.$message({
            type: 'success',
            message: res.data.message
          })
        })
        .catch(() => {
          this.$message({
            type: 'error',
            message: 'مشکلی در ثبت اطلاعات پیش آمده'
          })
        })
    },
    removeDraft() {
      this.$confirm('این فرم از پیشنویس ها حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .delete(`/api/user/transactionDraft/${this.draftID}`)
            .then(res => {
              this.$message({
                type: 'success',
                message: res.data.message
              })
              this.$router.push({ name: 'account-drafts' })
            })
            .catch(() => {
              this.$message({
                type: 'error',
                message: 'مشکلی در حذف پیشنویس پیش آمده'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: 'عملیات لغو شد'
          })
        })
    }
  }
}
</script>