greater_wms/templates/src/components/goodscard.vue

<template>
    <div  :style="{ backgroundColor: bgColor }">

        <q-dialog v-model="storage_dialog" transition-show="jump-down" transition-hide="jump-up" @show=prepareDialog()>
            <q-card style="min-width: 600px; ">
                <q-bar class="bg-light-blue-10 text-white rounded-borders" style="height: 50px">
                    <div>
                        {{ $t("stock.shelf.shelf_details")  }} {{ rowIndex }}-{{ colIndex }}-{{layerIndex}}
                    </div>
                    <q-space></q-space>
                    <q-btn dense flat icon="close" v-close-popup>
                        <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[20, 20]"
                            content-style="font-size: 12px">
                            {{ $t("index.close") }}</q-tooltip>
                    </q-btn>
                </q-bar>
                <q-card-section class="q-pt-md ">
                    <q-tabs v-model="activeTab">
                        <q-tab name="tab1" label="货架属性" />
                        <q-tab name="tab2" label="批次信息" />
                        <q-tab name="tab3" label="库存明细" />
                    </q-tabs>
                </q-card-section>
                <!-- 选项卡内容 -->
                <q-tab-panels v-model="activeTab" animated>
                    <q-tab-panel name="tab1" style="height:300px">
                        <div class="row q-gutter-x-md">
                            <div class="col column q-gutter-y-md">

                                <q-input dense outlined square v-model="storage_form.goods_code"
                                    :label="$t('stock.shelf.goods_code')" :readonly="onlyread"
                                    :rules="[val => val?.length > 0 || error1]" />

                            </div>
                            <div class="col column q-gutter-y-md">

                                <q-input dense outlined square v-model="storage_form.goods_name"
                                    :label="$t('stock.shelf.goods_name')" :readonly="onlyread"
                                    :rules="[val => val?.length > 0 || error1]" />

                            </div>
                        </div>

                    </q-tab-panel>
                    <q-tab-panel name="tab2" style="height:300px">
                        <div class="row q-gutter-x-md">
                            <div class="col column q-gutter-y-md">
                                <q-input dense outlined square v-model="storage_form.goods_code"
                                    :label="$t('stock.shelf.goods_code')" :readonly="onlyread"
                                    :rules="[val => val?.length > 0 || error1]" />
                                <q-input dense outlined square v-model="storage_form.goods_batch"
                                    :label="$t('stock.shelf.goods_batch')" :readonly="onlyread"
                                    :rules="[val => val?.length > 0 || error1]" />

                                <q-input dense outlined square v-model="storage_form.goods_qty"
                                    :label="'批次总数'" :readonly="onlyread"
                                    :rules="[val => val >= 0 || error1]" class="col" />

                                <q-input dense outlined square v-model="storage_form.goods_desc"
                                    :label="$t('stock.shelf.goods_desc')" :readonly="onlyread"
                                    :rules="[val => val?.length > 0 || error1]" />

                            </div>
                            <div class="col column q-gutter-y-md">
                                <q-input dense outlined square v-model="storage_form.goods_name"
                                    :label="$t('stock.shelf.goods_name')" :readonly="onlyread"
                                    :rules="[val => val?.length > 0 || error1]" />
                                <q-input dense outlined square v-model="storage_form.goods_std"
                                    :label="$t('stock.shelf.goods_std')" :readonly="onlyread"
                                    :rules="[val => val?.length > 0 || error1]" />

                                <q-input dense outlined square v-model="storage_form.goods_notes"
                                    :label="'库位容纳'" :readonly="onlyread"
                                    :rules="[val => val >= 0 || error1]" class="col" />

                                <q-input dense outlined square v-model="storage_form.goods_unit"
                                    :label="$t('stock.shelf.goods_unit')" :readonly="onlyread"
                                    :rules="[val => val?.length > 0 || error1]" />

                            </div>
                        </div>
                    </q-tab-panel>
                    <q-tab-panel name="tab3" style="height:300px">
                        <div class="row q-gutter-x-md">
                            <div class="col column q-gutter-y-md">
                            </div>
                            <div class="col column q-gutter-y-md"></div>
                        </div>
                    </q-tab-panel>
                </q-tab-panels>
                <div style="position: absolute; right: 20px; bottom: 12px; z-index: 100">
                    <q-btn-group push>
                        <q-btn color="white" text-color="black" @click="shelfLocal = 'undefined'; handleclick()">
                            {{ $t('stock.return') }}
                        </q-btn>
                        <q-btn color="white" text-color="black" @click="showInventoryDetails = !showInventoryDetails">
                            {{ $t('stock.details') }}
                        </q-btn>
                        <q-btn color="primary" text-color="white" @click=handleEdit()>
                            {{ onlyread ? $t('stock.shelf.shelf_edit') : $t("stock.shelf.shelf_confirm") }}
                        </q-btn>
                    </q-btn-group>
                </div>

                <div style="float: right; padding: 15px 15px 50px 15px ;min-width: 100%" flow="row wrap">
                    <q-card class="q-mb-md" bordered v-if="showInventoryDetails">
                        <q-card-actions class="q-px-none"
                            style="position: absolute; right: 20px; top: 10px; z-index: 100">
                            <q-btn v-if="!onlyread" @click=addInventoryDetail() icon="add" flat dense color="primary"
                                :label="$t('stock.add')" />
                            <q-btn v-if="!onlyread" @click=deleteInventoryDetail() icon="delete" flat dense
                                color="primary" :label="$t('stock.delete')" />
                        </q-card-actions>
                        <q-card-section>

                            <div class="text-h6 q-mb-md">{{ $t('stock.inventory_details') }}</div>

                            <!-- 动态生成的输入行 -->
                            <div v-for="(detail, index) in inventoryDetails" :key="index"
                                class="row q-col-gutter-md q-mb-sm">
                                <div class="col">
                                    <q-input v-model="detail.id" :label="$t('stock.batch')" :readonly="onlyread" dense
                                        outlined />
                                </div>
                                <div class="col">
                                    <q-input v-model="detail.quantity" :label="$t('stock.quantity')"
                                        :readonly="onlyread" type="number" dense outlined />
                                </div>
                                <div class="col">
                                    <q-input v-model="detail.location" :label="$t('stock.location')"
                                        :readonly="onlyread" dense standout outlined />
                                </div>
                            </div>
                        </q-card-section>
                    </q-card>
                </div>
            </q-card>
        </q-dialog>
        <q-dialog v-model="elevator_dialog" transition-show="jump-down" transition-hide="jump-up" @show=prepareDialog()>
            <q-card style="min-width: 350px;">
                <q-bar class="bg-light-blue-10 text-white rounded-borders" style="height: 50px">
                    <div>
                        {{ $t("stock.elevator.elevator") }}
                    </div>
                    <q-space></q-space>
                    <q-btn dense flat icon="close" v-close-popup>
                        <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[20, 20]"
                            content-style="font-size: 12px">
                            {{ $t("index.close") }}</q-tooltip>
                    </q-btn>
                </q-bar>
                <q-card-section class="q-pt-md">
                    <q-input dense outlined square v-model="elevator_form.ip" :label="$t('stock.elevator.ip')"
                        :readonly="onlyread" :rules="[val => val?.length > 0 || error1]" />
                    <q-input dense outlined square v-model="elevator_form.port" :label="$t('stock.elevator.port')"
                        type="number" :readonly="onlyread" :rules="[
                            val => val !== null || error1,
                            val => val >= 0 || error1,
                        ]" />
                    <q-input dense outlined square v-model="elevator_form.status" :label="$t('stock.conveyor.status')"
                        :readonly="onlyread" :rules="[val => val?.length > 0 || error1]" />
                    <!-- <q-input dense outlined square v-model="elevator_form.password"
                        :label="$t('stock.elevator.password')" :readonly="onlyread"
                        :rules="[val => val?.length > 0 || error1]" /> -->

                    <!-- <q-input dense outlined square v-model="elevator_form.username"
                        :label="$t('stock.elevator.username')" :readonly="onlyread"
                        :rules="[val => val?.length > 0 || error1]" /> -->
                </q-card-section>
                <div style="float: right; padding: 15px 15px 15px 0">
                    <q-btn color="white" text-color="black" style="margin-right: 25px"
                        @click="shelfLocal = 'undefined'; handleclick()">
                        {{ $t('stock.return') }}</q-btn>
                    <q-btn color="primary" text-color="white" style="margin-right: 25px" @click=handleEdit()>
                        {{ onlyread ? $t('stock.shelf.shelf_edit') : $t("stock.shelf.shelf_confirm") }}</q-btn>
                </div>
            </q-card>
        </q-dialog>
        <q-dialog v-model="conveyor_dialog" transition-show="jump-down" transition-hide="jump-up" @show=prepareDialog()>
            <q-card style="min-width: 350px;">
                <q-bar class="bg-light-blue-10 text-white rounded-borders" style="height: 50px">
                    <div>
                        {{ $t("stock.conveyor.conveyor") }}
                    </div>
                    <q-space></q-space>
                    <q-btn dense flat icon="close" v-close-popup>
                        <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[20, 20]"
                            content-style="font-size: 12px">
                            {{ $t("index.close") }}</q-tooltip>
                    </q-btn>
                </q-bar>
                <q-card-section class="q-pt-md">
                    <q-input dense outlined square v-model="conveyor_form.ip" :label="$t('stock.conveyor.ip')"
                        :readonly="onlyread" :rules="[val => val?.length > 0 || error1]" />
                    <!-- <q-input dense outlined square v-model="conveyor_form.destination"
                        :label="$t('stock.conveyor.destination')" :readonly="onlyread"
                        :rules="[val => val?.length > 0 || error1]" /> -->
                    <q-input dense outlined square v-model="conveyor_form.port" :label="$t('stock.elevator.port')"
                        type="number" :readonly="onlyread" :rules="[
                            val => val !== null || error1,
                            val => val >= 0 || error1,
                        ]" />
                    <q-input dense outlined square v-model="conveyor_form.status" :label="$t('stock.conveyor.status')"
                        :readonly="onlyread" :rules="[val => val?.length > 0 || error1]" />
                </q-card-section>
                <div style="float: right; padding: 15px 15px 15px 0">
                    <q-btn color="white" text-color="black" style="margin-right: 25px"
                        @click="shelfLocal = 'undefined'; handleclick()">
                        {{ $t('stock.return') }}</q-btn>

                    <q-btn color="primary" text-color="white" style="margin-right: 25px" @click=handleEdit()>
                        {{ onlyread ? $t('stock.shelf.shelf_edit') : $t("stock.shelf.shelf_confirm") }}</q-btn>

                </div>
            </q-card>
        </q-dialog>

    </div>
</template>

<script>


import { getauth } from 'boot/axios_request'

export default {
  props: {

    rowIndex: Number,
    colIndex: Number,
    layerIndex: Number,
    selectedShelfType: String,
    goodsData: Object

  },
  data () {
    return {
      pathname: 'bin/',
      pathnamecontainer: 'container/detail/',
      container_id: 123456,
      results: [],
      storage_form: {
        shelf_name: '',
        shelf_department: '',
        shelf_warehouse: '',
        shelf_status: '',
        goods_code: '',
        goods_name: '',
        goods_std: '',
        goods_desc: '',
        goods_qty: '',
        goods_unit: '',
        goods_price: '',
        goods_batch: '',
        goods_notes: '',
        goods_in: '',
        goods_out: ''
      },
      elevator_form: {
        ip: '',
        port: 8080,
        // username: 'admin',
        // password: '123456',
        status: '未连接'
      },
      conveyor_form: {
        ip: '',
        port: 8080,
        // destination: 'A010203',
        status: '未连接'
      },
      showInventoryDetails: false,
      inventoryDetails: [
        {
          id: 1,
          batch: '',
          quantity: 0,
          location: ''

        },
        {
          id: 2,
          batch: '',
          quantity: 0,
          location: ''

        }

      ],
      inventoryColumns: [
        { name: 'batch', label: '批次', field: 'batch', align: 'left' },
        { name: 'quantity', label: '数量', field: 'quantity', align: 'right' },
        { name: 'location', label: '位置', field: 'location', align: 'left' }

      ],
      user_id: '',
      auth_id: '',
      onlyread: true,
      clickedinput: false,
      storage_dialog: false,
      elevator_dialog: false,
      conveyor_dialog: false,
      bgColor: 'transparent',

      shelf_type: { shelf_type: 'undefined' },
      ip_change: { ip_address: '192.168.1.100', port: 8080, status: 'offline' },
      goods_change: { shelf_status: '未满', goods_batch: '20230701-001', goods_code: 'A010203', goods_name: '存货货物', goods_std: '规格型号', goods_desc: '存货描述', goods_qty: 123456, goods_unit: 'kg', goods_price: 123456, goods_notes: '备注', goods_in: 123456, goods_out: 123456 },

      error1: this.$t('stock.shelf.error1'),
      shelfLocal: '',
      activeTab: 'tab2'
    }
  },
  created () {
    this.shelfLocal = this.selectedShelfType
    this.handleclick()
  },

  methods: {

    prepareDialog () {
      this.onlyread = true
    },

    handleclick () {
      this.shelfLocal = this.selectedShelfType

      if (this.shelfLocal === 'undefined') { this.clickedinput = true, this.storage_dialog = false, this.elevator_dialog = false, this.conveyor_dialog = false }
      if (this.shelfLocal === 'storage') { this.getList(), this.clickedinput = false, this.storage_dialog = true, this.elevator_dialog = false, this.conveyor_dialog = false }
      if (this.shelfLocal === 'elevator') { this.getList(), this.clickedinput = false, this.storage_dialog = false, this.elevator_dialog = true, this.conveyor_dialog = false }
      if (this.shelfLocal === 'conveyor') { this.getList(), this.clickedinput = false, this.storage_dialog = false, this.elevator_dialog = false, this.conveyor_dialog = true }
    },

    getList () {
      var _this = this
      _this.storage_form = {
        shelf_name: '',
        shelf_department: '',
        shelf_warehouse: '',
        shelf_status: '',
        goods_code: '',
        goods_name: '',
        goods_std: '',
        goods_desc: '',
        goods_qty: 0,
        goods_unit: '',
        goods_price: 0,
        goods_batch: '',
        goods_notes: 0,
        goods_in: 0,
        goods_out: 0
      }
      _this.inventoryDetails = [
        {
          id: 1,
          batch: '',
          quantity: 0,
          location: ''

        },
        {
          id: 2,
          batch: '',
          quantity: 0,
          location: ''
        }

      ]
      getauth(_this.pathname + _this.goodsData.id + '/')
        .then(res1 => {
          console.log(res1)
          console.log(res1.current_containers)
          if (res1.current_containers.length == 0) {
            console.log('当前托盘ID为空')
            _this.$q.notify({
              message: '当前库位为空',
              icon: 'info',
              color: 'info'
            })
            return
          }
          _this.container_id = res1.current_containers[0].id
          console.log('当前托盘ID', _this.container_id)
          console.log('当前托盘ID长度', res1.current_containers.length)

          getauth(_this.pathnamecontainer + '?container=' + _this.container_id)
            .then(res => {
              var results = res.results[0]
              this.storage_form.goods_batch = results.batch.bound_number
              this.storage_form.goods_code = results.batch.goods_code
              this.storage_form.goods_name = results.batch.goods_desc
              this.storage_form.goods_std = results.batch.goods_std
              this.storage_form.goods_desc = results.batch.goods_desc
              this.storage_form.goods_qty = results.batch.goods_qty
              this.storage_form.goods_unit = results.batch.goods_unit
              this.storage_form.goods_price = results.batch.goods_price
              this.storage_form.goods_notes = results.goods_qty
              this.storage_form.goods_in = results.batch.goods_in
              this.storage_form.goods_out = results.batch.goods_out
              this.storage_form.shelf_name = results.shelf_name
              this.storage_form.shelf_department = results.shelf_department
              this.storage_form.shelf_warehouse = results.warehouse_name
              this.storage_form.shelf_status = results.status
            }

            )
        }).catch(err => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    }
  }
}

</script>

<style scoped>

:deep(.q-field__label) {

    margin-top: 8px;
    align-self: center;

}

:deep(.q-field__control-container) {

    padding-left: 50px;
    margin-top: -5px;

}
</style>