wms / wms4_zhongputaicang · Files

<template>
  <a-card :bordered="false" class="agv-task-container">
    <!-- 站台选择对话框 -->
    <a-modal
      v-if="showStationModal"
      :visible="showStationModal"
      title="请选择站台"
      :footer="null"
      :closable="false"
      width="600px"
      :centered="true"
    >
      <station-select @select="handleStationSelect"/>
    </a-modal>

    <div class="flex-container">
      <!-- 左侧表单区域 -->
      <div class="left-panel">
        <a-form
          ref="formRef"
          :model="formData"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          class="task-form"
        >
          <!--          <a-form-item label="货架：">-->
          <!--            <a-input-->
          <!--              v-model="formData.goodsNo"-->
          <!--              placeholder="请输入货架号"-->
          <!--              @keyup.enter="handleGoodsShelfSearch"-->
          <!--              :auto-focus="true"-->
          <!--            />-->
          <!--          </a-form-item>-->
          <!-- 第一行：工位和托盘类型 -->
          <a-form-item
            label="工位："
            class="inline-form-item"
            :rules="[{ required: true, message: '请选择或输入工位!' }]"
          >
            <a-select
              v-model="formData.workstation"
              placeholder="请选择工位"
              style="width: 100%"
              show-search
              allow-clear
              :filter-option="filterOption"
              @change="handleWorkstationChange"
            >
              <a-select-option v-for="item in workstationList" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item
            label="托盘类型："
            class="inline-form-item"
            :rules="[{ required: true, message: '请选择托盘类型!' }]"
          >
            <j-search-select-tag
              placeholder="请选择托盘类型"
              v-model="formData.containerType"
              dict="container_type,name,code,code='A' OR code='B'"
              :pageSize="5"
              :async="true"
              style="width: 100%"
            />
          </a-form-item>

          <!-- 第二行：卷号输入 -->
          <a-form-item
            label="卷号："
            :rules="[{ required: true, message: '请输入卷号!' }]"
          >
            <div class="roll-number-input-wrapper">
              <a-input
                v-model="currentRollNumber"
                placeholder="请输入卷号，按回车确认"
                @keyup.enter="handleAddRollNumber"
                :auto-focus="true"
                style="width: 100%"
                :disabled="!formData.workstation || !formData.containerType"
              >
                <a-icon slot="prefix" type="barcode" style="color: rgba(0,0,0,.25)"/>
                <a-button
                  slot="addonAfter"
                  type="primary"
                  icon="plus"
                  @click="handleAddRollNumber"
                  :disabled="!currentRollNumber.trim()"
                  size="small"
                >
                  添加
                </a-button>
              </a-input>
            </div>
          </a-form-item>

          <!-- 第三行：卷号列表 -->
          <a-form-item label="已输入卷号：" v-if="rollNumberList.length > 0">
            <div class="roll-number-list">
              <div class="roll-number-list-header">
                <span class="list-title">卷号列表 ({{ rollNumberList.length }})</span>
                <a-button
                  type="link"
                  size="small"
                  @click="clearRollNumberList"
                  class="clear-btn"
                >
                  <a-icon type="delete"/>
                  清空
                </a-button>
              </div>

              <div class="roll-number-items">
                <div
                  v-for="(roll, index) in rollNumberList"
                  :key="index"
                  class="roll-number-item"
                  :class="{ 'last-added': index === rollNumberList.length - 1 }"
                >
                  <div class="roll-number-content">
                    <span class="roll-index" style="margin-right: 3px">{{ index + 1 }}.</span>
                    <span class="roll-value"
                          style="margin-right: 12px; font-size: 16px; font-weight: 600; color: #1890ff">{{
                        roll
                      }}</span>
                    <span class="roll-time" style="margin-right: 8px">{{ formatTime(rollTimestamp[index]) }}</span>
                    <a-icon
                      type="close-circle"
                      class="remove-icon"
                      @click="removeRollNumber(index)"
                    />
                  </div>
                </div>
              </div>

              <div class="roll-number-summary">
                <span class="summary-text">总计: {{ rollNumberList.length }} 卷</span>
                <span v-if="formData.containerType" class="pallet-type">
                  托盘类型: {{ getContainerTypeName(formData.containerType) }}
                </span>
              </div>
            </div>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <div class="toolbox-buttons">
              <a-button type="primary" @click="handleAgvReturn" class="btn-success">
                AGV回库
              </a-button>
              <a-button type="primary" @click="handleComplete" class="btn-success">
                上下料完成
              </a-button>
              <a-button @click="handleRotation(180)" class="btn-info">
                180°旋转
              </a-button>
              <a-button type="danger" @click="handleCancel" class="btn-danger">
                AGV取消
              </a-button>
              <a-button @click="handleRotation(90)" class="btn-info">
                90°旋转
              </a-button>
            </div>
          </a-form-item>
        </a-form>
      </div>

      <!-- 右侧操作区域 -->
      <div class="right-panel">
        <div class="station-info">
          <div class="station-header">
            <span class="station-title">{{ stationInfo }}</span>
            <div class="station-controls">
              <a-select
                v-model="selectedGoodsShelf"
                style="width: 120px; margin-right: 10px"
                placeholder="货架号"
              >
                <a-select-option value="">货架号</a-select-option>
                <a-select-option
                  v-for="shelf in goodsShelfList"
                  :key="shelf.goodsShelfNo"
                  :value="shelf.goodsShelfNo"
                >
                  {{ shelf.goodsShelfNo }}
                </a-select-option>
              </a-select>
              <a-button type="primary" @click="handleManualCall" class="btn-success">
                手动叫车
              </a-button>
            </div>
          </div>

          <a-divider style="margin: 10px 0; background: white"/>

          <!-- 货架网格展示 -->
          <div class="shelf-grid-container">
            <div class="grid-table">
              <div class="grid-header">
                <div class="grid-cell">A面</div>
                <div class="grid-cell">C面</div>
              </div>

              <div v-for="row in gridRows" :key="row.level" class="grid-row">
                <div
                  v-for="cell in row.cells"
                  :key="cell.id"
                  class="grid-cell"
                  :class="getGridCellClass(cell)"
                  :style="getGridCellStyle(cell)"
                >
                  <div class="grid-content">
                    {{ cell.containerInfo }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部表格区域 -->
    <div class="bottom-tables">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="当前任务">
          <!--          <j-table-->
          <!--            ref="taskTable"-->
          <!--            :columns="taskColumns"-->
          <!--            :data-source="taskData"-->
          <!--            :row-selection="{ selectedRowKeys: selectedTaskKeys, onChange: onTaskSelectChange }"-->
          <!--            :pagination="taskPagination"-->
          <!--            @change="handleTaskTableChange"-->
          <!--            @refresh="handleTaskRefresh"-->
          <!--          >-->
          <!--            <template slot="type" slot-scope="text">-->
          <!--              <j-dict-select-tag :value="text" dictCode="taskType" />-->
          <!--            </template>-->
          <!--          </j-table>-->
          <MachineAgvTask/>
        </a-tab-pane>

        <a-tab-pane key="2" tab="生产加工单">
          <!--          <j-table-->
          <!--            ref="stationTable"-->
          <!--            :columns="stationColumns"-->
          <!--            :data-source="stationData"-->
          <!--            :row-selection="{ selectedRowKeys: selectedStationKeys, onChange: onStationSelectChange }"-->
          <!--            :pagination="stationPagination"-->
          <!--            @change="handleStationTableChange"-->
          <!--          >-->
          <!--            <template slot="taskType" slot-scope="text">-->
          <!--              <j-dict-select-tag :value="text" dictCode="taskType" />-->
          <!--            </template>-->
          <!--            <template slot="uWarehouseName" slot-scope="text, record">-->
          <!--              <span class="badge-info">{{ getWarehouseName(record.uWarehouseName) }}</span>-->
          <!--            </template>-->
          <!--          </j-table>-->
          <MachineProductionOrderHeader/>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- AGV取消确认对话框 -->
    <a-modal
      v-if="showCancelModal"
      :visible="showCancelModal"
      title="取消任务"
      @ok="handleCancelConfirm"
      @cancel="showCancelModal = false"
      width="800px"
      height="200px"
    >
      <cancel-confirm @cancel="handleCancelConfirm"/>
    </a-modal>
  </a-card>
</template>

<script>
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {mixinDevice} from '@/utils/mixin'
// import JTable from '@/components/jeecg/JTable'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import StationSelect from "./StationSelect.vue";
import CancelConfirm from "./CancelConfirm.vue";
import MachineProductionOrderHeader from "./MachineProductionOrderHeader.vue";
import MachineAgvTask from "./MachineAgvTask.vue";

// 模拟任务类型字典数据
const taskTypes = [
  {value: '1', text: '入库任务'},
  {value: '2', text: '出库任务'},
  {value: '3', text: '盘点任务'},
  {value: '4', text: '移库任务'}
]

// 模拟仓库数据
const mockWarehouseData = {
  'WH001': '原材料仓库',
  'WH002': '成品仓库',
  'WH003': '半成品仓库',
  'WH004': '备件仓库'
}

// 模拟货架列表数据
const mockGoodsShelfList = [
  {goodsShelfNo: 'RACK001A'},
  {goodsShelfNo: 'RACK001C'},
  {goodsShelfNo: 'RACK002A'},
  {goodsShelfNo: 'RACK002C'},
  {goodsShelfNo: 'RACK003A'},
  {goodsShelfNo: 'RACK003C'},
  {goodsShelfNo: 'RACK004A'},
  {goodsShelfNo: 'RACK004C'}
]

// 模拟任务数据
const mockTaskData = [
  {
    id: '1',
    taskId: 'TASK001',
    lastUpdatedBy: '张三',
    materialCode: 'MAT001',
    barCode: 'BC001',
    materialName: '轴承',
    materialSpec: 'Ø50×80mm',
    containerCode: 'CTN001',
    goodsShelfNo: 'RACK001A',
    qty: 100,
    warehouseQty: 500,
    sourceCode: 'U8-2023001',
    companyName: 'ABC公司',
    uWarehouseName: 'WH001',
    type: '1',
    referenceCode: 'U8-2023001',
    remainder: 400
  },
  {
    id: '2',
    taskId: 'TASK002',
    lastUpdatedBy: '李四',
    materialCode: 'MAT002',
    barCode: 'BC002',
    materialName: '螺丝',
    materialSpec: 'M6×20mm',
    containerCode: 'CTN002',
    goodsShelfNo: 'RACK002C',
    qty: 500,
    warehouseQty: 2000,
    sourceCode: 'U8-2023002',
    companyName: 'XYZ公司',
    uWarehouseName: 'WH002',
    type: '2',
    referenceCode: 'U8-2023002',
    remainder: 1500
  },
  {
    id: '3',
    taskId: 'TASK003',
    lastUpdatedBy: '王五',
    materialCode: 'MAT003',
    barCode: 'BC003',
    materialName: '弹簧',
    materialSpec: 'Ø10×50mm',
    containerCode: 'CTN003',
    goodsShelfNo: 'RACK003A',
    qty: 200,
    warehouseQty: 800,
    sourceCode: 'U8-2023003',
    companyName: 'DEF公司',
    uWarehouseName: 'WH003',
    type: '3',
    referenceCode: 'U8-2023003',
    remainder: 600
  }
]

// 模拟站台任务数据
const mockStationData = [
  {
    id: '1',
    lastUpdatedBy: '赵六',
    materialCode: 'MAT004',
    materialOldCode: 'BC004',
    materialName: '垫片',
    specification: 'Ø20×3mm',
    containerCode: 'CTN004',
    goodsShelfNo: 'RACK004C',
    qty: 300,
    referenceCode: 'U8-2023004',
    companyName: 'GHI公司',
    uWarehouseName: 'WH004',
    taskType: '4',
    warehouseQty: 1000
  },
  {
    id: '2',
    lastUpdatedBy: '孙七',
    materialCode: 'MAT005',
    materialOldCode: 'BC005',
    materialName: '螺母',
    specification: 'M8',
    containerCode: 'CTN005',
    goodsShelfNo: 'RACK001A',
    qty: 1000,
    referenceCode: 'U8-2023005',
    companyName: 'JKL公司',
    uWarehouseName: 'WH001',
    taskType: '1',
    warehouseQty: 5000
  }
]

// 模拟货架详情数据
const mockShelfDetailData = [
  {
    id: '1',
    taskId: 'TASK001',
    uWarehouseName: 'WH001',
    referenceCode: 'U8-2023001',
    materialCode: 'MAT001',
    materialOldCode: 'BC001',
    materialName: '轴承',
    materialSpec: 'Ø50×80mm',
    containerCode: 'CTN001-A5-1', // A面第5层
    warehouseQty: 500,
    qty: 100,
    remainder: 400,
    goodsShelfNo: 'RACK001A'
  },
  {
    id: '2',
    taskId: 'TASK006',
    uWarehouseName: 'WH002',
    referenceCode: 'U8-2023006',
    materialCode: 'MAT006',
    materialOldCode: 'BC006',
    materialName: '螺栓',
    materialSpec: 'M10×40mm',
    containerCode: 'CTN006-A4-1', // A面第4层
    warehouseQty: 300,
    qty: 50,
    remainder: 250,
    goodsShelfNo: 'RACK001A'
  },
  {
    id: '3',
    taskId: 'TASK007',
    uWarehouseName: 'WH003',
    referenceCode: 'U8-2023007',
    materialCode: 'MAT007',
    materialOldCode: 'BC007',
    materialName: '齿轮',
    materialSpec: 'Ø100×20mm',
    containerCode: 'CTN007-C5-3', // C面第5层
    warehouseQty: 200,
    qty: 30,
    remainder: 170,
    goodsShelfNo: 'RACK001A'
  }
]

export default {
  name: 'MachineOperation1',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    // JTable,
    JDictSelectTag,
    StationSelect,
    CancelConfirm,
    MachineProductionOrderHeader,
    MachineAgvTask
  },
  data() {
    return {
      description: 'AGV任务操作页面',

      // 表单数据
      formData: {
        id: '',
        taskId: '',
        goodsNo: '',
        uWarehouseName: '',
        sourceCode: '',
        materialCode: '',
        barCode: '',
        materialName: '',
        specification: '',
        num: '',
        remainder: '',
        workstation: '',
        containerType: '',
      },

      // 当前输入的卷号
      currentRollNumber: '',

      // 卷号列表
      rollNumberList: [],

      // 卷号时间戳
      rollTimestamp: [],

      // 工位列表
      workstationList: [
        {value: 'WS001', label: '工位001 - 装配线'},
        {value: 'WS002', label: '工位002 - 测试线'},
        {value: 'WS003', label: '工位003 - 包装线'},
        {value: 'WS004', label: '工位004 - 检验线'},
        {value: 'WS005', label: '工位005 - 返修线'},
      ],

      // 托盘类型映射
      containerTypeMap: {
        'A': 'A型托盘',
        'B': 'B型托盘',
        'C': 'C型托盘',
        'D': 'D型托盘',
      },

      // 站台信息
      stationInfo: '1号站台',
      currentStation: '1',
      showStationModal: true, // 默认关闭，直接使用1号站台

      // 货架列表
      selectedGoodsShelf: '',
      goodsShelfList: [...mockGoodsShelfList],

      // 网格数据
      gridRows: this.generateGridData(),

      // 表格数据
      taskData: [...mockTaskData],
      stationData: [...mockStationData],
      selectedTaskKeys: [],
      selectedStationKeys: [],

      // 表格配置
      taskColumns: [
        {
          title: '操作人',
          dataIndex: 'lastUpdatedBy',
          align: 'center'
        },
        {
          title: '存货编码',
          dataIndex: 'materialCode',
          align: 'center'
        },
        {
          title: '存货代码',
          dataIndex: 'barCode',
          align: 'center'
        },
        {
          title: '物料名称',
          dataIndex: 'materialName',
          align: 'center'
        },
        {
          title: '规格',
          dataIndex: 'materialSpec',
          align: 'center'
        },
        {
          title: '容器编码',
          dataIndex: 'containerCode',
          align: 'center'
        },
        {
          title: '货架',
          dataIndex: 'goodsShelfNo',
          align: 'center'
        },
        {
          title: '数量',
          dataIndex: 'qty',
          align: 'center'
        },
        {
          title: '库存',
          dataIndex: 'warehouseQty',
          align: 'center'
        },
        {
          title: 'U8单据',
          dataIndex: 'sourceCode',
          align: 'center'
        },
        {
          title: '货主',
          dataIndex: 'companyName',
          align: 'center'
        },
        {
          title: 'u8仓库',
          dataIndex: 'uWarehouseName',
          align: 'center'
        },
        {
          title: '任务类型',
          dataIndex: 'type',
          align: 'center',
          scopedSlots: {customRender: 'type'}
        }
      ],

      stationColumns: [
        {
          title: '操作人',
          dataIndex: 'lastUpdatedBy',
          align: 'center'
        },
        {
          title: '存货编码',
          dataIndex: 'materialCode',
          align: 'center'
        },
        {
          title: '存货代码',
          dataIndex: 'materialOldCode',
          align: 'center'
        },
        {
          title: '物料名称',
          dataIndex: 'materialName',
          align: 'center'
        },
        {
          title: '规格',
          dataIndex: 'specification',
          align: 'center'
        },
        {
          title: '容器编码',
          dataIndex: 'containerCode',
          align: 'center'
        },
        {
          title: '货架',
          dataIndex: 'goodsShelfNo',
          align: 'center'
        },
        {
          title: '数量',
          dataIndex: 'qty',
          align: 'center'
        },
        {
          title: 'U8单据',
          dataIndex: 'referenceCode',
          align: 'center'
        },
        {
          title: '货主',
          dataIndex: 'companyName',
          align: 'center'
        },
        {
          title: 'u8仓库',
          dataIndex: 'uWarehouseName',
          align: 'center',
          scopedSlots: {customRender: 'uWarehouseName'}
        },
        {
          title: '任务类型',
          dataIndex: 'taskType',
          align: 'center',
          scopedSlots: {customRender: 'taskType'}
        },
        {
          title: '库存',
          dataIndex: 'warehouseQty',
          align: 'center'
        }
      ],

      // 分页配置
      taskPagination: {
        current: 1,
        pageSize: 50,
        pageSizeOptions: ['10', '25', '50', '100'],
        showTotal: (total) => `共 ${total} 条`,
        showSizeChanger: true,
        showQuickJumper: true,
        total: mockTaskData.length
      },

      stationPagination: {
        current: 1,
        pageSize: 50,
        pageSizeOptions: ['10', '25', '50', '100'],
        showTotal: (total) => `共 ${total} 条`,
        showSizeChanger: true,
        showQuickJumper: true,
        total: mockStationData.length
      },

      // 对话框状态
      showCancelModal: false,

      // 仓库映射数据
      warehouseMap: mockWarehouseData,

      // 当前选中的任务ID
      currentTaskId: null,

      // 任务类型字典（用于表格显示）
      taskTypeDict: taskTypes.reduce((map, item) => {
        map[item.value] = item.text
        return map
      }, {})
    }
  },
  created() {
    this.initData()
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', this.handleResize)
      this.handleResize()
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  computed: {
    // 是否可以提交
    canSubmit() {
      return this.formData.workstation &&
        this.formData.containerType &&
        this.rollNumberList.length > 0
    }
  },
  methods: {
    // 初始化数据
    initData() {
      // 使用模拟数据，不请求后端
      this.loadMockData()
    },

    // 加载模拟数据
    loadMockData() {
      // 这里使用模拟数据替代后端请求
      console.log('使用模拟数据，不请求后端')
    },

    // 生成网格数据
    generateGridData() {
      const rows = []
      const levels = [5, 4, 3, 2, 1]

      levels.forEach(level => {
        const cells = [
          {
            id: `grid-A-${level}`,
            level,
            side: 'A',
            x: level,
            y: 1,
            containerInfo: '',
            status: 'empty',
            containerCode: ''
          },
          {
            id: `grid-C-${level}`,
            level,
            side: 'C',
            x: level,
            y: 3,
            containerInfo: '',
            status: 'empty',
            containerCode: ''
          }
        ]
        rows.push({level, cells})
      })

      return rows
    },

    // 获取网格单元格样式
    getGridCellClass(cell) {
      return {
        'grid-selected': cell.status === 'selected',
        'grid-occupied': cell.status === 'occupied',
        'grid-empty': cell.status === 'empty'
      }
    },

    getGridCellStyle(cell) {
      let backgroundColor = '#4F94CD' // 默认蓝色

      if (cell.status === 'selected') {
        backgroundColor = 'rgb(236,71,88)' // 红色
      } else if (cell.status === 'occupied') {
        backgroundColor = 'rgb(255,255,0)' // 黄色
      }

      return {backgroundColor}
    },

    // 货架搜索（使用模拟数据）
    async handleGoodsShelfSearch() {
      if (!this.formData.goodsNo) {
        this.$message.warning('请输入货架号！')
        return
      }

      // 清空网格状态
      this.resetGridStatus()

      // 使用模拟数据
      console.log('搜索货架号:', this.formData.goodsNo)

      // 模拟数据处理逻辑
      const shelfNo = this.formData.goodsNo.toUpperCase()

      if (shelfNo === 'RACK001A') {
        // 模拟货架001A的数据
        const shelfData = [...mockShelfDetailData]

        // 更新网格状态
        shelfData.forEach((item, index) => {
          if (item.containerCode) {
            // 解析容器编码中的层和面信息
            const parts = item.containerCode.split('-')
            if (parts.length >= 3) {
              const sideChar = parts[1].charAt(0) // A或C
              const level = parseInt(parts[1].substring(1)) // 数字部分
              const side = sideChar === 'A' ? 1 : 3

              // 找到对应的网格单元格
              this.gridRows.forEach(row => {
                if (row.level === level) {
                  row.cells.forEach(cell => {
                    if (cell.y === side) {
                      cell.containerInfo = item.containerCode
                      cell.containerCode = item.containerCode
                      cell.status = index === 0 ? 'selected' : 'occupied'
                    }
                  })
                }
              })
            }
          }
        })

        // 更新表单数据（使用第一条数据）
        if (shelfData[0]) {
          const firstItem = shelfData[0]
          this.formData = {
            ...this.formData,
            id: firstItem.id,
            taskId: firstItem.taskId,
            uWarehouseName: mockWarehouseData[firstItem.uWarehouseName] || firstItem.uWarehouseName,
            sourceCode: firstItem.referenceCode,
            materialCode: firstItem.materialCode,
            barCode: firstItem.materialOldCode,
            materialName: firstItem.materialName,
            specification: firstItem.materialSpec,
            num: firstItem.qty,
            remainder: firstItem.remainder
          }
          this.currentTaskId = firstItem.id
        }

        // 更新任务表格
        this.taskData = shelfData.map(item => ({
          ...item,
          type: '1', // 入库任务
          lastUpdatedBy: '系统',
          companyName: '测试公司'
        }))

        this.$message.success('货架信息加载成功')
      } else if (shelfNo === 'RACK001C') {
        // 模拟货架001C的数据
        this.formData = {
          ...this.formData,
          id: '4',
          taskId: 'TASK008',
          uWarehouseName: '成品仓库',
          sourceCode: 'U8-2023008',
          materialCode: 'MAT008',
          barCode: 'BC008',
          materialName: '电机',
          specification: '1.5KW',
          num: '10',
          remainder: '90'
        }

        // 设置C面第3层为选中状态
        this.gridRows.forEach(row => {
          if (row.level === 3) {
            row.cells.forEach(cell => {
              if (cell.side === 'C') {
                cell.containerInfo = 'CTN008-C3-3'
                cell.containerCode = 'CTN008-C3-3'
                cell.status = 'selected'
              }
            })
          }
        })

        this.taskData = [
          {
            id: '4',
            taskId: 'TASK008',
            lastUpdatedBy: '系统',
            materialCode: 'MAT008',
            barCode: 'BC008',
            materialName: '电机',
            materialSpec: '1.5KW',
            containerCode: 'CTN008-C3-3',
            goodsShelfNo: 'RACK001C',
            qty: 10,
            warehouseQty: 100,
            sourceCode: 'U8-2023008',
            companyName: '测试公司',
            uWarehouseName: '成品仓库',
            type: '2'
          }
        ]

        this.$message.success('货架信息加载成功')
      } else {
        this.$message.warning('未找到对应的货架信息，请尝试 RACK001A 或 RACK001C')
        this.resetFormData()
      }
    },

    // 重置网格状态
    resetGridStatus() {
      this.gridRows.forEach(row => {
        row.cells.forEach(cell => {
          cell.containerInfo = ''
          cell.containerCode = ''
          cell.status = 'empty'
        })
      })
    },

    // 重置表单数据
    resetFormData() {
      this.formData = {
        id: '',
        taskId: '',
        goodsNo: this.formData.goodsNo,
        uWarehouseName: '',
        sourceCode: '',
        materialCode: '',
        barCode: '',
        materialName: '',
        specification: '',
        num: '',
        remainder: ''
      }
      this.taskData = []
    },

    // 完成操作（模拟）
    async handleComplete() {
      if (!this.formData.taskId) {
        this.$message.warning('没有找到对应的任务')
        return
      }

      // 模拟操作成功
      console.log('完成操作:', {
        id: this.formData.id,
        taskId: this.formData.taskId,
        num: this.formData.num
      })

      // 模拟API响应
      const mockResponse = {
        success: true,
        message: '操作成功'
      }

      if (mockResponse.success) {
        this.$message.success(mockResponse.message)
        // 模拟重新加载数据
        this.handleGoodsShelfSearch()
        this.formData.goodsNo = ''
        this.$nextTick(() => {
          // const input = this.$refs.formRef?.$el?.querySelector('input[placeholder="请输入货架号"]')
          // if (input) input.focus()
        })
      } else {
        this.$message.error(mockResponse.message || '操作失败')
      }
    },
    // 添加工位搜索过滤
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    // 工位选择变化
    handleWorkstationChange(value) {
      console.log('工位选择:', value)
      // 可以根据选择的工位加载相关数据
    },

    // 添加卷号
    handleAddRollNumber() {
      const rollNumber = this.currentRollNumber.trim()

      if (!rollNumber) {
        this.$message.warning('请输入卷号')
        return
      }

      if (!this.formData.workstation) {
        this.$message.warning('请先选择工位')
        return
      }

      if (!this.formData.containerType) {
        this.$message.warning('请先选择托盘类型')
        return
      }

      // 检查是否重复
      if (this.rollNumberList.includes(rollNumber)) {
        this.$message.warning('卷号已存在，请勿重复输入')
        this.currentRollNumber = ''
        return
      }

      // 添加到列表
      this.rollNumberList.push(rollNumber)
      this.rollTimestamp.push(new Date())

      // 清空输入框并重新聚焦
      this.currentRollNumber = ''
      // this.$nextTick(() => {
      //   const input = this.$refs.formRef?.$el?.querySelector('input[placeholder="请输入卷号，按回车确认"]')
      //   if (input) input.focus()
      // })

      // 显示成功消息
      this.$message.success(`卷号 "${rollNumber}" 已添加`)
    },

    // 移除卷号
    removeRollNumber(index) {
      this.rollNumberList.splice(index, 1)
      this.rollTimestamp.splice(index, 1)
      this.$message.info('卷号已移除')
    },

    // 清空卷号列表
    clearRollNumberList() {
      if (this.rollNumberList.length === 0) return

      this.$confirm({
        title: '确认清空',
        content: '确定要清空所有卷号吗？',
        onOk: () => {
          this.rollNumberList = []
          this.rollTimestamp = []
          this.$message.info('卷号列表已清空')
        }
      })
    },

    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
    },

    // 获取托盘类型名称
    getContainerTypeName(code) {
      return this.containerTypeMap[code] || code
    },

    // AGV回库 - 提交所有数据
    async handleAgvReturn() {
      if (!this.canSubmit) {
        this.$message.warning('请先完成工位、托盘类型选择和卷号输入')
        return
      }

      const submitData = {
        workstation: this.formData.workstation,
        containerType: this.formData.containerType,
        rollNumbers: this.rollNumberList,
        timestamp: new Date(),
        // 可以添加其他需要的数据
      }

      console.log('提交数据:', submitData)

      try {
        // 这里调用实际的API
        // const res = await this.$http.post('/api/agv/return', submitData)

        // 模拟成功
        this.$message.success('AGV回库指令已发送')

        // 清空表单（可选）
        // this.resetForm()
      } catch (error) {
        this.$message.error('提交失败')
      }
    },

    // 旋转操作（模拟）
    async handleRotation(angle) {
      if (!this.formData.goodsNo) {
        this.$message.warning('请输入货架号！')
        return
      }

      console.log('旋转操作:', {
        carNo: this.formData.goodsNo,
        orientation: angle
      })

      // 模拟API响应
      const mockResponse = {
        code: 200,
        msg: `AGV旋转${angle}°指令已发送`
      }

      if (mockResponse.code === 200) {
        this.$message.success(mockResponse.msg)
        this.formData.goodsNo = ''
        this.$nextTick(() => {
          // const input = this.$refs.formRef?.$el?.querySelector('input[placeholder="请输入货架号"]')
          // if (input) input.focus()
        })
      } else {
        this.$message.warning(mockResponse.msg)
      }
    },

    // 取消操作
    handleCancel() {
      this.showCancelModal = true
    },

    // 确认取消（模拟）
    async handleCancelConfirm() {
      console.log('取消任务操作')

      // 模拟操作
      setTimeout(() => {
        this.showCancelModal = false
        this.$message.success('任务取消成功')
      }, 500)
    },

    // 手动叫车（模拟）
    async handleManualCall() {
      if (!this.selectedGoodsShelf) {
        this.$message.warning('请选择货架号！')
        return
      }

      console.log('手动叫车操作:', {
        shelfNo: this.selectedGoodsShelf,
        station: this.currentStation
      })

      // 模拟API响应
      const mockResponse = {
        code: 200,
        msg: `已向货架${this.selectedGoodsShelf}发送叫车指令`
      }

      if (mockResponse.code === 200) {
        this.$message.success(mockResponse.msg)
      } else {
        this.$message.error(mockResponse.msg)
      }

      this.formData.goodsNo = ''
      this.$nextTick(() => {
        // const input = this.$refs.formRef?.$el?.querySelector('input[placeholder="请输入货架号"]')
        // if (input) input.focus()
      })
    },

    // 站台选择
    handleStationSelect(station) {
      this.currentStation = station
      this.stationInfo = `${station}号站台`
      this.showStationModal = false

      // 模拟根据站台加载不同数据
      console.log('切换到站台:', station)

      // 可以根据不同站台显示不同数据
      if (station === '1') {
        this.taskData = [...mockTaskData]
        this.stationData = [...mockStationData]
      } else if (station === '2') {
        // 模拟2号站台数据
        this.taskData = [
          {
            id: '10',
            taskId: 'TASK010',
            lastUpdatedBy: '站台2操作员',
            materialCode: 'MAT010',
            barCode: 'BC010',
            materialName: '阀门',
            materialSpec: 'DN50',
            containerCode: 'CTN010',
            goodsShelfNo: 'RACK010A',
            qty: 5,
            warehouseQty: 20,
            sourceCode: 'U8-2023010',
            companyName: '站台2公司',
            uWarehouseName: 'WH002',
            type: '1'
          }
        ]
        this.stationData = [
          {
            id: '11',
            lastUpdatedBy: '站台2系统',
            materialCode: 'MAT011',
            materialOldCode: 'BC011',
            materialName: '泵体',
            specification: '50m³/h',
            containerCode: 'CTN011',
            goodsShelfNo: 'RACK010C',
            qty: 3,
            referenceCode: 'U8-2023011',
            companyName: '站台2测试',
            uWarehouseName: 'WH003',
            taskType: '2',
            warehouseQty: 15
          }
        ]
      }

      this.taskPagination.total = this.taskData.length
      this.stationPagination.total = this.stationData.length
    },

    // 获取仓库名称
    getWarehouseName(warehouseCode) {
      return this.warehouseMap[warehouseCode] || warehouseCode
    },

    // 表格选择变化
    onTaskSelectChange(selectedRowKeys) {
      this.selectedTaskKeys = selectedRowKeys
    },

    onStationSelectChange(selectedRowKeys) {
      this.selectedStationKeys = selectedRowKeys
    },

    // 表格变化
    handleTaskTableChange(pagination, filters, sorter) {
      this.taskPagination = pagination
      // 模拟分页，这里简单处理
      console.log('任务表格变化:', {pagination, filters, sorter})
    },

    handleStationTableChange(pagination, filters, sorter) {
      this.stationPagination = pagination
      // 模拟分页，这里简单处理
      console.log('站台表格变化:', {pagination, filters, sorter})
    },

    // 刷新任务表格
    handleTaskRefresh() {
      // 模拟刷新数据
      console.log('刷新表格数据')
      this.$message.info('已刷新数据')
    },

    // 窗口大小变化
    handleResize() {
      // 可以在这里添加响应式布局的逻辑
      console.log('窗口大小变化，当前宽度:', window.innerWidth)
    },

    // 重置表单
    resetForm() {
      this.formData = {
        workstation: '',
        containerType: ''
      }
      this.currentRollNumber = ''
      this.rollNumberList = []
      this.rollTimestamp = []
    }
  }
}
</script>

<style scoped lang="less">
.agv-task-container {
  .flex-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;

    /* 左侧面板容器 */

    .left-panel {
      flex: 2;
      margin-right: 10px; /* 减少右边距，让左右更靠近 */

      .task-form {
        padding: 24px; /* 稍微减少内边距 */
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), /* 减少阴影强度 */ 0 1px 3px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
        height: 100%; /* 确保高度充满 */
        box-sizing: border-box;

        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12),
          0 2px 6px rgba(0, 0, 0, 0.08);
        }

        /deep/ .ant-form-item {
          margin-bottom: 18px; /* 适当减少间距 */

          &:last-child {
            margin-bottom: 0;
          }
        }

        /deep/ .ant-form-item-label {
          label {
            font-size: 15px; /* 稍小一点 */
            font-weight: 600;
            color: #1a1a1a;
            display: flex;
            align-items: center;
            height: 36px; /* 固定高度对齐 */

            &::before {
              content: "▸"; /* 使用箭头符号，更简洁 */
              color: #1890ff;
              margin-right: 6px;
              font-size: 14px;
              transform: translateY(-1px);
            }
          }
        }

        /deep/ .ant-form-item-control-input {
          input {
            font-size: 15px;
            height: 36px; /* 降低高度 */
            border-radius: 6px;
            border: 1px solid #e8e8e8;
            transition: all 0.2s;

            &:hover {
              border-color: #40a9ff;
            }

            &:focus {
              border-color: #1890ff;
              box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
            }

            &.ant-input[readonly] {
              background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
              border-color: #f0f0f0;
              color: #595959;
              cursor: default;
            }
          }

          /* 数量输入框特殊样式 */

          .ant-input-group-wrapper {
            display: flex;
            align-items: center;

            .ant-input {
              flex: 1;
            }

            .ant-input-group-addon {
              background: transparent;
              border: none;
              padding: 0 10px;
              color: #666;
              font-size: 14px;
            }
          }
        }

        /* 按钮区域样式 */

        /deep/ .ant-form-item:last-child {
          margin-top: 20px;
          padding-top: 15px;
          border-top: 1px solid #f0f0f0;

          .toolbox-buttons {
            display: flex;
            gap: 8px; /* 减少按钮间距 */
            justify-content: space-between;
            flex-wrap: wrap;

            .ant-btn {
              flex: 1;
              min-width: 90px; /* 最小宽度 */
              height: 36px;
              border-radius: 6px;
              font-size: 14px;
              font-weight: 500;
              transition: all 0.2s;

              &.btn-success {
                background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
                border: none;
                color: white;

                &:hover {
                  transform: translateY(-1px);
                  box-shadow: 0 3px 8px rgba(82, 196, 26, 0.3);
                }
              }

              &.btn-info {
                background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
                border: none;
                color: white;

                &:hover {
                  transform: translateY(-1px);
                  box-shadow: 0 3px 8px rgba(24, 144, 255, 0.3);
                }
              }

              &.btn-danger {
                background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
                border: none;
                color: white;

                &:hover {
                  transform: translateY(-1px);
                  box-shadow: 0 3px 8px rgba(255, 77, 79, 0.3);
                }
              }
            }
          }
        }
      }
    }

    /* 右侧面板容器 */

    .right-panel {
      flex: 1;
      margin-left: 10px; /* 与左侧保持一致的间距 */

      .station-info {
        background: #fff;
        border-radius: 12px; /* 圆角与左侧一致 */
        padding: 20px;
        height: 100%; /* 使用100%高度，让父容器控制 */
        box-sizing: border-box;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;

        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12),
          0 2px 6px rgba(0, 0, 0, 0.08);
        }

        .station-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;
          padding-bottom: 12px;
          border-bottom: 1px solid #f0f0f0; /* 添加分割线 */

          .station-title {
            font-size: 18px; /* 稍小一点 */
            line-height: 1.4;
            color: #1890ff; /* 使用主题色 */
            font-weight: 700;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif; /* 现代字体 */
            display: flex;
            align-items: center;

            &::before {
              content: "📍"; /* 添加图标 */
              margin-right: 8px;
              font-size: 16px;
            }
          }

          .station-controls {
            display: flex;
            align-items: center;
            gap: 10px; /* 使用gap间距 */

            .ant-select {
              width: 130px; /* 固定宽度 */
              height: 36px;

              .ant-select-selector {
                border-radius: 6px;
                border: 1px solid #e8e8e8;
                transition: all 0.2s;

                &:hover {
                  border-color: #40a9ff;
                }
              }
            }

            .ant-btn {
              height: 36px;
              border-radius: 6px;
              font-size: 14px;
              font-weight: 500;
              background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
              border: none;
              color: white;
              padding: 0 16px;
              transition: all 0.2s;

              &:hover {
                transform: translateY(-1px);
                box-shadow: 0 3px 8px rgba(82, 196, 26, 0.3);
              }

              &:active {
                transform: translateY(0);
              }
            }
          }
        }

        /* 分割线样式 */

        .ant-divider {
          margin: 12px 0;
          background: #f0f0f0;
        }

        .shelf-grid-container {
          margin-top: 30px; /* 减少上边距 */

          .grid-table {
            display: inline-block;
            width: 100%;

            /* 添加容器阴影和背景 */
            padding: 15px;
            background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
            border-radius: 10px;
            border: 1px solid #f0f0f0;

            .grid-header {
              display: flex;
              gap: 15px; /* 减少间隙 */
              margin-bottom: 10px;
              padding: 0 5px;

              .grid-cell {
                flex: 1;
                min-width: 0; /* 允许缩小 */
                text-align: center;
                font-size: 16px;
                color: #1890ff;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                font-weight: 600;
                padding: 8px 0;
                background: rgba(24, 144, 255, 0.1);
                border-radius: 6px;
                letter-spacing: 1px;
              }
            }

            .grid-row {
              display: flex;
              gap: 15px; /* 减少间隙 */
              margin-bottom: 8px;

              &:last-child {
                margin-bottom: 0;
              }

              .grid-cell {
                flex: 1;
                min-width: 0; /* 允许缩小 */
                height: 60px;
                background: linear-gradient(135deg, #4F94CD 0%, #6ba8e0 100%);
                border-radius: 8px; /* 更大的圆角 */
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                position: relative;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                cursor: pointer;
                border: 2px solid transparent;

                /* 添加3D效果 */
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);

                &:hover {
                  transform: translateY(-2px);
                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
                  inset 0 1px 0 rgba(255, 255, 255, 0.2);
                  border-color: rgba(24, 144, 255, 0.5);
                }

                &:active {
                  transform: translateY(0);
                }

                /* 选中状态 */

                &.grid-selected {
                  background: linear-gradient(135deg, rgb(236, 71, 88) 0%, rgb(255, 120, 117) 100%);
                  border-color: #ff4d4f;
                  animation: pulse 2s infinite;

                  &::before {
                    content: "✓";
                    position: absolute;
                    top: 4px;
                    right: 4px;
                    color: white;
                    font-size: 12px;
                    font-weight: bold;
                    background: rgba(255, 255, 255, 0.3);
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }
                }

                /* 占用状态 */

                &.grid-occupied {
                  background: linear-gradient(135deg, rgb(255, 255, 0) 0%, rgb(255, 255, 150) 100%);
                  border-color: #ffc53d;

                  &::before {
                    content: "●";
                    position: absolute;
                    top: 4px;
                    right: 4px;
                    color: #faad14;
                    font-size: 12px;
                  }
                }

                /* 空闲状态hover效果 */

                &:not(.grid-selected):not(.grid-occupied):hover {
                  background: linear-gradient(135deg, #6ba8e0 0%, #8bc1f7 100%);
                }

                .grid-content {
                  font-size: 14px; /* 使用固定px，避免vh单位问题 */
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  width: 90%;
                  color: white;
                  font-weight: 500;
                  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                  padding: 0 8px;

                  /* 为空时显示占位符 */

                  &:empty::before {
                    content: "空闲";
                    color: rgba(255, 255, 255, 0.7);
                    font-size: 12px;
                  }
                }

                /* 添加网格坐标提示 */

                &::after {
                  content: attr(data-layer) "层";
                  position: absolute;
                  bottom: 4px;
                  left: 8px;
                  font-size: 10px;
                  color: rgba(255, 255, 255, 0.6);
                  font-weight: 500;
                }
              }
            }
          }
        }
      }
    }

    /* 脉冲动画 */
    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(236, 71, 88, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.1);
      }
      70% {
        box-shadow: 0 0 0 6px rgba(236, 71, 88, 0),
        0 2px 4px rgba(0, 0, 0, 0.1);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(236, 71, 88, 0),
        0 2px 4px rgba(0, 0, 0, 0.1);
      }
    }

    /* 响应式设计 */
    @media (max-width: 1200px) {
      .right-panel {
        .station-info {
          .shelf-grid-container {
            .grid-table {
              .grid-header,
              .grid-row {
                gap: 10px;
              }

              .grid-cell {
                height: 55px;

                .grid-content {
                  font-size: 13px;
                }
              }
            }
          }
        }
      }
    }
  }

  .bottom-tables {
    background: #fff;
    border-radius: 4px;
    padding: 20px;

    /deep/ .ant-tabs-bar {
      margin-bottom: 16px;
    }
  }

  .toolbox-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;

    .btn-success {
      background-color: #52c41a;
      border-color: #52c41a;
    }

    .btn-info {
      background-color: #1890ff;
      border-color: #1890ff;
    }

    .btn-danger {
      background-color: #f5222d;
      border-color: #f5222d;
    }
  }
}

.badge-info {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
  background-color: #1890ff;
  border-radius: 10px;
}
</style>