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>