asan-service/components/profile/AddStuffModal.vue

<template>
  <el-dialog :title="title" :visible.sync="showModal">
    <div>
      <form v-loading="fetchingSerials" class="form form_3 stuffModal" @submit.prevent="addStuff">
        <div class="formRow">
          <el-select
            v-if="!currentItem.name"
            ref="productSelector"
            v-model="currentItem.item"
            filterable
            :placeholder="productsPlaceholder"
          >
            <el-option v-for="item in products" :key="item.ItemID" :label="item.ItemName" :value="item.ItemID">
            </el-option>
          </el-select>
          <p v-else>
            <b>نام کالا: </b>
            <span>{{ currentItem.name }}</span>
            <span style="margin: 0 5px"> - </span>
            <i style="color: blue; font-weight: bold; cursor: pointer" @click="changeProduct">تغییر کالا</i>
          </p>
        </div>

        <div
          v-if="currentItem.item && !serials.length && !fetchingSerials"
          class="formRow"
          :class="validation.quantity ? 'err' : null"
        >
          <p style="user-select: none">
            <b style="margin-left: 10px">تعداد: </b>
            <i
              style="color: #bf6060; cursor: pointer"
              class="fas fa-minus-circle"
              @click="changeQuantity('decrease')"
            ></i>
            <!-- <span style="font-weight: bold;margin: 0 5px">{{ currentItem.quantity }}</span> -->
            <input
              ref="quantityInput"
              v-model="currentItem.quantity"
              type="text"
              style="
                width: 50px;
                display: inline-block;
                border-radius: 50px;
                padding: 5px;
                direction: ltr;
                text-align: center;
              "
              @input="normalizeQuantityInput"
            />
            <i
              style="color: #658865; cursor: pointer"
              class="fas fa-plus-circle"
              @click="changeQuantity('increase')"
            ></i>
          </p>
        </div>

        <div v-if="serials.length" class="formRow" :class="serialInput.length && !isValid ? 'err' : null">
          <el-input
            v-if="!currentItem.SerialNo1"
            ref="serialInput"
            v-model="serialInput"
            :disabled="isValid"
            placeholder="شماره سریال را به صورت کامل وارد کنید"
            @input="checkSerial"
          >
            <template v-if="serialInput.length">
              <i v-if="isValid" slot="prefix" style="color: green" class="el-input__icon fas fa-check-circle"></i>
              <i v-else slot="prefix" style="color: red" class="el-input__icon fas fa-exclamation-circle"></i>
            </template>
          </el-input>
          <p v-else>
            <b>شماره سریال: </b>
            <span>{{ currentItem.SerialNo1 }}</span>
            <span style="margin: 0 5px"> - </span>
            <i v-if="isValid" style="color: blue; font-weight: bold; cursor: pointer" @click="changeSerial">
              تغییر شماره سریال
            </i>
          </p>
        </div>

        <div v-if="addBtnVisible" class="formRow">
          <button id="addBtn" ref="addBtn" type="submit" class="btn btn-primary">افزودن</button>
        </div>
      </form>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'AddStuffModal',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    db_name: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      serials: [],
      fetchingSerials: false,
      currentItem: {
        name: null,
        item: null,
        quantity: 1,
        SerialNo1: '',
        GStartDate: '',
        GEndDate: ''
      },
      isValid: false,
      serialInput: '',
      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 ''
    },
    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 []
    },
    productsPlaceholder() {
      return this.products ? 'نام کالا را جستجو کنید' : 'درحال بارگیری اطلاعات...'
    },
    selectedItem() {
      return this.currentItem.item
    },
    selectedSerial() {
      return this.currentItem.SerialNo1
    },
    addBtnVisible() {
      if (this.serials.length) {
        return this.currentItem.item && this.currentItem.SerialNo1
      } else {
        return this.currentItem.item && !this.fetchingSerials
      }
    }
  },
  watch: {
    addBtnVisible(newVal, oldVal) {
      if (newVal) {
        if (this.serials.length) setTimeout(() => this.$refs.addBtn?.focus(), 300)
        else setTimeout(() => this.$refs.quantityInput?.focus(), 300)
      }
    },
    async selectedSerial(newVal, oldVal) {
      if (newVal) {
        const serialObject = await this.serials.filter(item => item.SerialNo1 === newVal)[0]
        this.currentItem.GStartDate = serialObject.GStartDate
        this.currentItem.GEndDate = serialObject.GEndDate
      } else {
        this.currentItem.GStartDate = ''
        this.currentItem.GEndDate = ''
      }
    },
    async selectedItem(newVal, oldVal) {
      if (newVal) {
        try {
          this.fetchingSerials = true
          this.currentItem.SerialNo1 = ''
          this.serials = []
          this.currentItem.name = null
          const item = await this.products.filter(item => item.ItemID === newVal)[0]
          this.currentItem.name = item.ItemName

          const serialsData = {
            url: `/api/GetSerials?ItemCode=${item.ItemCode}&QtyStatus=1`,
            db: this.db_name
          }
          const serials = await this.$axios.post('/api/cross/getRouteManager', serialsData, {
            progress: false
          })
          this.serials = serials.data.data
          this.fetchingSerials = false
          setTimeout(() => this.$refs.serialInput?.focus(), 300)
        } catch (e) {
          this.currentItem = {
            item: '',
            quantity: 1,
            SerialNo1: '',
            GStartDate: '',
            GEndDate: ''
          }
          console.log(e)
          return this.$message({
            type: 'error',
            message: 'مشکلی در دریافت اطلاعات پیش آمده، لطفا نام کالا را دوباره انتخاب کنید.'
          })
        }
      } else {
        this.serials = []
      }
    },
    serials(newVal, oldVal) {
      this.currentItem.quantity = 1
    },
    showModal(newVal, oldVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.$refs?.productSelector?.focus()
        })
      }
    }
  },
  methods: {
    changeProduct() {
      this.currentItem.item = this.currentItem.name = null
      this.isValid = false
      this.serialInput = ''
    },
    changeSerial() {
      this.currentItem.SerialNo1 = ''
      this.isValid = false
      this.serialInput = ''
      setTimeout(() => this.$refs.serialInput?.focus(), 300)
    },
    checkSerial(serial) {
      const SerialNo1 = this.serials.find(item => item.SerialNo1.toLowerCase() === serial.toLowerCase())
      if (SerialNo1) {
        this.isValid = true
        this.currentItem.SerialNo1 = SerialNo1.SerialNo1
      } else this.isValid = false
    },
    changeQuantity(mode) {
      if (mode === 'increase') this.currentItem.quantity++
      else if (mode === 'decrease' && this.currentItem.quantity > 1) this.currentItem.quantity--
    },
    addStuff() {
      if (this.serials.length && !this.currentItem.SerialNo1) {
        return this.$message({
          type: 'warning',
          message: 'شماره سریال معتبر وارد کنید'
        })
      }
      this.fetchingSerials = true
      const currentItem = this.currentItem
      const selectedItem = this.products.filter(item => item.ItemID === currentItem.item)[0]

      const item = {
        ItemID: selectedItem.ItemID,
        ItemCode: selectedItem.ItemCode,
        MjQty: Number(currentItem.quantity),
        SerialNo1: currentItem.SerialNo1,
        GStartDate: currentItem.GStartDate,
        GEndDate: currentItem.GEndDate
      }

      this.$axios
        .put(`/api/user/transactionDraftItemAdd/${this.$route.params.draftID}`, item, { progress: false })
        .then(res => {
          this.fetchingSerials = false
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.showModal = false
          this.$nuxt.refresh()
        })
        .catch(err => {
          this.fetchingSerials = false
          if (err.response.status === 406) {
            return this.$message({
              type: 'warning',
              message: err.response.data.message
            })
          } else {
            return this.$message({
              type: 'error',
              message: 'مشکلی در ثبت اطلاعات پیش آمده، لطفا دوباره امتحان کنید'
            })
          }
        })
    },
    normalizeQuantityInput() {
      this.currentItem.quantity = this.currentItem.quantity.toString().replace(/[^0-9]/g, '')
      if (this.currentItem.quantity === '' || this.currentItem.quantity === null || this.currentItem.quantity < 1) {
        this.currentItem.quantity = 1
      }
    }
  }
}
</script>