wms / wms4_ykkap · Files

<template>
  <a-modal
    title="按目标站台取消出库任务"
    :visible="visible"
    width="720px"
    @cancel="close"
    @ok="handleOk"
    okText="确认取消"
    cancelText="关闭"
  >
    <a-spin :spinning="loading">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">

        <!-- 目标站台 -->
        <a-form-item label="目标站台">
          <a-select
            v-model="form.toPort"
            placeholder="请选择目标站台"
            @change="onToPortChange"
          >
            <a-select-option
              v-for="item in toPortOptions"
              :key="item.code"
              :value="item.code"
            >
              {{ item.code }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <!-- 任务分组（改为按钮选择） -->
        <a-form-item label="任务分组">
          <a-input-group compact>
            <a-input
              style="width: calc(100% - 110px)"
              v-model="form.sequenceGroup"
              placeholder="点击右侧按钮选择任务分组"
              disabled
            />
            <a-button
              type="primary"
              :disabled="!form.toPort"
              @click="openTaskList"
            >
              查询任务
            </a-button>
          </a-input-group>
        </a-form-item>

        <!-- 影响任务数 -->
        <a-form-item label="分组任务数">
          <a-input disabled :value="taskCount" />
        </a-form-item>

        <!-- 确认输入 -->
<!--        <a-form-item label="确认取消">-->
<!--          <a-input-->
<!--            v-model="confirmText"-->
<!--            placeholder="请输入 CANCEL 确认"-->
<!--          />-->
<!--        </a-form-item>-->

      </a-form>
    </a-spin>

    <!-- 任务列表弹窗 -->
    <a-modal
      title="选择任务分组"
      :visible="taskListVisible"
      width="1100px"
      @cancel="taskListVisible = false"
      @ok="confirmTaskSelection"
    >
      <a-table
        rowKey="id"
        :columns="taskColumns"
        :dataSource="taskList"
        :pagination="pagination"
        :rowSelection="{
          type: 'radio',
          selectedRowKeys,
          onChange: onSelectTask
        }"
        size="small"
        @change="handleTableChange"
      />
    </a-modal>
  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'

export default {
  name: 'CancelByStationModal',

  data() {
    return {
      visible: false,
      loading: false,

      form: {
        toPort: '',
        sequenceGroup: ''
      },

      confirmText: '',
      toPortOptions: [],
      taskCount: 0,

      // 任务列表弹窗
      taskListVisible: false,
      taskList: [],
      selectedRowKeys: [],
      selectedSequenceGroup: '',
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: false,
        showTotal: (total) => `共 ${total} 条`
      },

      // ✅ 新增：原始数据（用于前端分页）
      allTaskList: []
    }
  },

  computed: {
    taskColumns() {
      return [
        { title: '任务ID', dataIndex: 'id', align: 'center' },
        // { title: '库区', dataIndex: 'zoneCode_dictText', align: 'center' },
        { title: '分组标识', dataIndex: 'sequenceGroup', align: 'center' },
        { title: '出库顺序', dataIndex: 'sequence', align: 'center' },
        { title: '任务类型', dataIndex: 'taskType_dictText', align: 'center' },
        { title: '容器编码', dataIndex: 'containerCode', align: 'center' },
        { title: '目标出口', dataIndex: 'toPortCode', align: 'center' },
        { title: '任务状态', dataIndex: 'status_dictText', align: 'center' },
        { title: '创建时间', dataIndex: 'createTime', align: 'center' }
      ]
    }
  },

  methods: {
    open() {
      this.visible = true
      this.loadToPorts()
    },

    close() {
      this.visible = false
      this.reset()
    },

    reset() {
      this.form = { toPort: '', sequenceGroup: '' }
      this.confirmText = ''
      this.taskCount = 0
      this.taskList = []
      this.selectedRowKeys = []
      this.selectedSequenceGroup = ''
      this.pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: false,
        showTotal: (total) => `共 ${total} 条`
      }
    },

    loadToPorts() {
      postAction('/task/taskHeader/selectEmptyOutPort1').then(res => {
        if (res.success) {
          this.toPortOptions = res.result || []
        }
      })
    },

    onToPortChange() {
      this.form.sequenceGroup = ''
      this.taskCount = 0
    },

    openTaskList() {
      this.selectedRowKeys = []
      this.selectedSequenceGroup = ''
      this.pagination.current = 1
      this.taskListVisible = true
      this.loadTaskList()
    },

    loadTaskList() {
      postAction('/task/taskHeader/getSequenceGroup', {
        toPort: this.form.toPort,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize
      }).then(res => {
        if (res.success) {
          this.taskList = res.result.records || []
          this.pagination.total = res.result.total || 0
          // ✅ 执行前端分页
          //this.updateTaskListPagination()
        }
      })
    },
    updateTaskListPagination() {
      const { current, pageSize } = this.pagination
      const start = (current - 1) * pageSize
      const end = start + pageSize
      this.taskList = this.allTaskList.slice(start, end)
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.loadTaskList()
    },
    onSelectTask(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedSequenceGroup =
        selectedRows.length > 0 ? selectedRows[0].sequenceGroup : ''
    },

    confirmTaskSelection() {
      if (!this.selectedSequenceGroup) {
        this.$message.warning('请选择一条任务')
        return
      }

      this.form.sequenceGroup = this.selectedSequenceGroup
      this.taskListVisible = false
      this.countTasks()
    },

    countTasks() {
      postAction('/task/taskHeader/countTaskByStation', {
        toPort: this.form.toPort,
        sequenceGroup: this.form.sequenceGroup
      }).then(res => {
        if (res.success) {
          this.taskCount = res.result || 0
        }
      })
    },

    handleOk() {
      // if (this.confirmText !== 'CANCEL') {
      //   this.$message.error('请输入 CANCEL 确认')
      //   return
      // }
      if (!this.form.sequenceGroup) {
        this.$message.error('请先选择任务分组')
        return
      }
      this.loading = true
      postAction('/task/taskHeader/cancelTaskByTargetStation', {
        toPort: this.form.toPort,
        sequenceGroup: this.form.sequenceGroup
      })
        .then(res => {
          if (res.success) {
            this.$message.success('任务取消成功')
            this.$emit('ok')
            this.close()
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>