asan-service/components/profile/AddUserItemsToAgentDraft.vue

<template>
  <el-dialog :title="title" :visible.sync="showModal">
    <div v-loading="fetchingDrafts">
      <template v-if="!addingStuff">
        <h3 class="mb-3">پیشنویس مورد نظر جهت افزودن اقلام انتخاب شده را انتخاب کنید:</h3>

        <div class="tableBox">
          <table class="drafts-modal">
            <thead>
              <tr>
                <th class="index">ردیف</th>
                <th class="description">توضیحات</th>
                <th class="brand">نوع</th>
                <th class="quantity">تعداد کالاها</th>
                <th class="details">افزودن</th>
              </tr>
            </thead>
            <tbody>
              <template v-if="filteredDrafts.length">
                <tr v-for="(item, index) in filteredDrafts" :key="item._id" :title="item.description">
                  <td class="index">
                    <span>{{ index + 1 }}</span>
                  </td>

                  <td class="description">
                    <span v-if="item.description" class="singleLineTxt">{{ item.description }}</span>
                    <span v-else style="color: gray">بدون توضیحات</span>
                  </td>

                  <td class="brand">
                    <!-- <img src="/assets/img/verity-small.png" alt="verity" v-if="item.db_name === 'verity'" />
								<img src="/assets/img/panatech-small.png" alt="panatech" v-if="item.db_name === 'panatech'" /> -->
                    <i
                      v-if="item.db_name === 'verity'"
                      class="fas fa-phone-laptop"
                      title="لوازم جانبی کامپیوتر و موبایل"
                    ></i>
                    <i
                      v-if="item.db_name === 'panatech'"
                      class="fas fa-photo-video"
                      title="لوازم صوتی و تصویری خودرو"
                    ></i>
                  </td>

                  <td class="quantity">
                    <span>{{ totalItemsCount(item) }}</span>
                  </td>

                  <td class="details">
                    <button class="btn btn-primary" @click="addStuffToDraft(item._id)">
                      <i class="fas fa-link"></i>
                    </button>
                  </td>
                </tr>
              </template>
              <tr v-else>
                <td class="noItem">
                  <span>هیچ اطلاعاتی وجود ندارد</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>

      <template v-else>
        <el-progress
          class="mb-3"
          :text-inside="true"
          :stroke-width="20"
          :percentage="addProgress"
          :status="addProgressStatus"
        ></el-progress>
        <div class="tableBox">
          <table class="drafts-modal">
            <thead>
              <tr>
                <th class="index">ردیف</th>
                <th class="name">نام</th>
                <th class="quantity">تعداد کالاها</th>
                <th class="brand">شماره سریال</th>
                <th class="addStatus">وضعیت</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in addedStuff" :key="index + '_addedStuff_modal_itemStatus'">
                <td class="index">
                  <span>{{ index + 1 }}</span>
                </td>

                <td class="name">
                  <span class="singleLineTxt" :title="getItemName(item.ItemID)">{{ getItemName(item.ItemID) }}</span>
                </td>

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

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

                <td class="addStatus">
                  <i
                    v-if="item.status"
                    class="el-icon-success"
                    style="color: rgb(19, 206, 102)"
                    :title="item.statusTxt"
                  ></i>
                  <i v-else class="el-icon-info" style="color: orange" :title="item.statusTxt"></i>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'AddUserItemsToAgentDraft',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    db_name: {
      type: String,
      required: true
    },
    items: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      fetchingDrafts: false,
      addingStuff: false,
      addProgress: 0,
      addProgressStatus: 'success',
      transactionDrafts: [],
      addedStuff: [],
      validation: {}
    }
  },
  computed: {
    showModal: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('closeModal')
      }
    },
    title() {
      if (this.db_name === 'panatech') return 'افزودن کالاهای صوتی تصویری به فرم'
      if (this.db_name === 'verity') return 'افزودن کالاهای لوازم جانبی به فرم'
      else return ''
    },
    filteredDrafts() {
      return this.transactionDrafts.filter(item => item.db_name === this.db_name)
    },
    products() {
      if (this.db_name === 'verity') return this.$store.state.front.verityProducts
      else if (this.db_name === 'panatech') return this.$store.state.front.panatechProducts
      else return []
    }
  },
  watch: {
    showModal(newVal, oldVal) {
      if (newVal) {
        this.fetchingDrafts = true
        this.$axios
          .get('/api/user/transactionDrafts')
          .then(res => {
            this.transactionDrafts = res.data
            this.fetchingDrafts = false
          })
          .catch(() => {
            this.$message({
              type: 'error',
              message: 'مشکلی در دریافت اطلاعات پیش آمده'
            })
            this.showModal = false
          })
      }
    }
  },
  methods: {
    totalItemsCount(draft) {
      const items = draft.items
      let count = 0
      items.forEach(item => (count += item.MjQty))
      return count
    },
    getItemName(ItemID) {
      return this.products.find(item => item.ItemID === ItemID)?.ItemName
    },
    async addStuffToDraft(draftId) {
      this.addingStuff = true

      try {
        let index = 1
        for await (const item of this.items) {
          this.addProgress = Number(((index * 100) / this.items.length).toFixed(0))
          await new Promise((resolve, reject) => {
            index++
            this.$axios
              .put(`/api/user/transactionDraftItemAdd/${draftId}`, item, { progress: false })
              .then(res => {
                this.addedStuff.push({ ...item, status: true, statusTxt: res.data.message })
                resolve()
              })
              .catch(err => {
                this.addedStuff.push({ ...item, status: false, statusTxt: err.response.data.message })
                this.addProgressStatus = 'warning'
                resolve()
              })
          })
        }
      } catch (e) {
        this.$message({
          type: 'error',
          message: 'مشکلی در ثبت اطلاعات پیش آمده'
        })
      }
    }
  }
}
</script>