intelligent-medicine-cabinet/mini-pro-web/src/views/replenishment/start/components/codeList.vue

<template>
  <draggable v-model="items" :group="{ name: groupName }" :animation="200" handle=".drag" @sort="onSort">
    <div class="flex justify-between align-center mb10" style="position: relative;" v-for="(item, index) in codeList" :key="index">
      <van-field v-model="item.code" :label="getLabel(index)" placeholder="请扫描或输入追溯码" class="mr8" />
      <img src="@/assets/images/traceability/scan.png" class="scan" alt="" v-if="qty <= stock && bussiness != 1" @click="scan(index)" />
      <img src="@/assets/images/traceability/drag.png" class="drag" alt="" v-if="qty <= stock && bussiness != 1" />
      <img src="@/assets/images/traceability/del.png" alt="" v-if="qty > stock" @click="delDrug(index)" />
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  props: {
    qty: {
      default: 0
    },
    stock: {
      default: 0
    },
    codeList: {
      type: Array,
      default: () => {
        return []
      }
    },
    bussiness: {
      default: 0 //1修改容量 2矫正库存 4设置库存 5选择药品后 设置库存  6备药时选择药品
    }
  },
  components: {
    draggable
  },
  data() {
    return {
      items: [],
      groupName: ''
    }
  },
  mounted() {
    this.groupName = 'group' + this.getRandomString(10)
  },
  methods: {
    delDrug(index) {
      this.$dialog
        .confirm({
          message: '是否确定删除该药品?'
        })
        .then(() => {
          this.codeList.splice(index, 1)
        })
        .catch(() => {})
    },
    getLabel(index) {
      const len = this.codeList.length
      if (index == 0) {
        return `${len - index}位最里:`
      } else if (index == len - 1) {
        return '1位最外:'
      } else {
        return `第${len - index}位次:`
      }
    },
    onSort(event) {
      const oldIndex = event.oldIndex
      const newIndex = event.newIndex
      const obj = this.codeList[oldIndex]
      this.codeList.splice(oldIndex, 1)
      this.codeList.splice(newIndex, 0, obj)
    },
    getRandomString(length) {
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      let result = ''
      const charactersLength = characters.length
      for (let i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength))
      }
      return result
    },
    scan(index) {
      this.$emit('scan', { index: index, len: this.codeList.length })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell {
  background: #f1f3f4;
  padding: 6px 16px;
}
.scan {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
}
.drag {
  width: 20px;
  height: 20px;
}
::v-deep {
  .van-field__label {
    color: #999;
    width: 64px;
    margin-right: 0;
  }
}
</style>