wms / wms4_zhongputaicang · Files

<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="计划号">
              <a-input placeholder="请输入计划号" v-model="queryParam.code"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="料号（唯一码）">
              <a-input placeholder="请输入料号（唯一码）" v-model="queryParam.sn"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="宽度">
              <a-input placeholder="请输入宽度" v-model="queryParam.thickness"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="批次">
              <a-input placeholder="请输入批次" v-model="queryParam.batch"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="缓存点位">
              <a-input placeholder="请输入缓存点位" v-model="queryParam.locationCode"></a-input>
            </a-form-item>
          </a-col>
          <!-- 新增：机台号查询 -->
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="机台号">
              <a-input placeholder="请输入机台号" v-model="queryParam.machineCode"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="状态">
              <j-dict-select-tag
                placeholder="请选择状态"
                v-model="queryParam.innerPackagestuts"
                dictCode="inner_packagestuts"
              />
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="12" :lg="14" :md="16" :sm="24">
              <a-form-item label="创建日期">
                <j-date :show-date="true" date-format="YYYY-MM-DD" placeholder="请选择开始时间"
                        class="query-group-cust" v-model="queryParam.createTime_begin"></j-date>
                <span class="query-group-split-cust"></span>
                <j-date :show-date="true" date-format="YYYY-MM-DD" placeholder="请选择结束时间"
                        class="query-group-cust" v-model="queryParam.createTime_end"></j-date>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button id="search" type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 - 只保留【呼叫空托盘】核心按钮 -->
    <div class="table-operator">
      <a-button type="primary" @click="callEmptyOut" class="btn-info">呼叫空托盘</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
        style="font-weight: 600">{{ selectedRowKeys.length }}</a> 项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <span v-if="record.id == '合计'"></span>
          <span v-else>
           <a @click="handleDetail(record)">详情</a>
          </span>
        </span>

        <span slot="enable_dictText" slot-scope="enable_dictText">
          <a-tag :key="enable_dictText" :color="getStatusColor(enable_dictText)">
            {{ enable_dictText }}
          </a-tag>
        </span>

        <span slot="innerPackagestuts_dictText" slot-scope="innerPackagestuts_dictText">
          <a-tag :key="innerPackagestuts_dictText" :color="getStatusColor(innerPackagestuts_dictText)">
            {{ innerPackagestuts_dictText }}
          </a-tag>
        </span>

        <span slot="companyCode" slot-scope="companyCode">
          <a-tag :key="companyCode" color="blue">
            {{ solutionCompany(companyCode) }}
          </a-tag>
        </span>

        <span slot="zoneCode" slot-scope="zoneCode">
          <a-tag :key="zoneCode" color=blue>
            {{ solutionZoneCode(zoneCode) }}
          </a-tag>
        </span>
      </a-table>

      <!-- 分页组件 -->
      <Pagination
        v-model="ipagination.current"
        :total="ipagination.total"
        show-size-changer
        :page-size="ipagination.pageSize"
        @onShowSizeChange="onShowSizeChange"
        :pageSizeOptions="ipagination.pageSizeOptions"
      ></Pagination>
    </div>

    <!-- 只保留核心弹窗：呼叫空托盘相关 -->
    <FirstMachineCallEmpty ref="batchIronCoreEmptyOutModal" @ok="modalFormOk"></FirstMachineCallEmpty>
    <CallShelfBoxTaskModal ref="callShelfBoxTaskModal"/>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {getCompanyList, getZoneList} from "@api/api";
import {getAction} from '@/api/manage'
import Pagination from '@/components/jeecgbiz/Pagination'
import CallShelfBoxTaskModal from "../../task/modules/CallShelfBoxTaskModal.vue";
import FirstMachineCallEmpty from "./FirstMachineCallEmpty.vue";

export default {
  name: 'FirstFloorCrossCuttingInBoundComp',
  mixins: [JeecgListMixin, mixinDevice],
  props: {
    zoneCode: {
      type: String,
      required: true,
      default: '',
      validator: function (value) {
        return ['A1', 'A2', 'B1', 'B2', 'S','D'].includes(value);
      }
    },
    A2ButtonPermission: {
      type: String,
      default: '',
    },
  },
  components: {
    // ✅ 修复：删除冗余的 BatchIronCoreEmptyOutModal
    Pagination,
    CallShelfBoxTaskModal,
    FirstMachineCallEmpty
  },
  data() {
    return {
      newArr: [],
      newDataSource: [],
      initDateSource: [],
      initPageSize: 10,
      zoneList: [],
      zoneOptions: [],
      companyList: [],
      firstLoad: 0,
      description: '一楼横切区卷入库管理页面',
      // 表格列配置
      columns: [
        {title: '库存详情ID', align: 'center', dataIndex: 'id'},
        {
          title: '作业库区',
          align: "center",
          dataIndex: 'zoneCode',
          key: 'zoneCode',
          scopedSlots: {customRender: 'zoneCode'},
          filterMultiple: true,
          filters: []
        },
        {title: '计划号', align: "center", dataIndex: 'planNo'},
        {title: '料号（唯一码）', align: "center", dataIndex: 'sn', ellipsis: true},
        {title: '容器编码', align: 'center', dataIndex: 'containerCode'},
        {title: '缓存点位', align: 'center', dataIndex: 'locationCode'},
        {title: '位置', align: 'center', dataIndex: 'position'},
        {title: '数量', align: 'center', dataIndex: 'qty'},
        {title: '任务锁定数量', align: 'center', dataIndex: 'taskQty'},
        {title: '物料编码', align: 'center', dataIndex: 'materialCode'},
        {title: '物料规格', align: 'center', dataIndex: 'materialSpec'},
        {title: '批次', align: 'center', dataIndex: 'batch'},
        {title: '宽度', align: 'center', dataIndex: 'thickness'},
        {title: '外径', align: 'center', dataIndex: 'outside'},
        {title: '状态', align: 'center', dataIndex: 'innerPackagestuts_dictText', scopedSlots: {customRender: 'innerPackagestuts_dictText'}},
        {title: '库龄（天）', align: 'center', dataIndex: 'inventoryAge'},
        {title: '可用状态', align: 'center', dataIndex: 'enable_dictText', scopedSlots: {customRender: 'enable_dictText'}},
        {title: '创建日期', align: 'center', dataIndex: 'createTime'},
      ],
      url: {
        list: '/inventory/inventoryDetail/list',
      },
      dictOptions: {},
      superFieldList: [],
      selectRecord: [],
    }
  },
  created() {
    this.initPageSize = this.ipagination.pageSize
    this.loadFrom()
    this.getSuperFieldList()
  },
  watch: {
    zoneCode(newVal, oldVal) {
      console.log('zoneCode 从', oldVal, '变为', newVal);
    }
  },
  mounted() {
    if (this.firstLoad == 0) {
      this.firstLoad = 1;
      return;
    }
    let timeSearch = setInterval(() => {
      let eleSearch = document.getElementById("search");
      if (eleSearch != null) {
        clearInterval(timeSearch)
        eleSearch.click();
      }
    }, 200)
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
    importPinkuUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importPinkuUrl}`
    }
  },
  methods: {
    modalFormOk() {
      this.$message.success('操作成功！');
      this.loadData(1); // 操作成功后刷新列表，体验更好
    },
    getRoute() {
      return this.$route.path;
    },
    async callEmptyOut() {
      this.$refs.batchIronCoreEmptyOutModal.edit();
      this.$refs.batchIronCoreEmptyOutModal.title = "批量创建空托盘出库";
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      if (arg === 1) {
        this.ipagination.current = 1
      }
      this.ipagination.pageSize = this.initPageSize
      var params = this.getQueryParams()
      params.zoneCode = this.zoneCode;
      params.a2ButtonPermission = this.A2ButtonPermission;
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.initDateSource = res.result.records || res.result
          this.newDataSource = res.result.records || res.result
          this.dataHandling()
          this.ipagination.total = res.result.total || 0
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    dataHandling() {
      this.ipagination.pageSize = this.initPageSize + 1
      this.newArr = []
      this.dataSource = Object.values(this.newDataSource)
    },
    onShowSizeChange(current, pageSize) {
      this.ipagination.current = current
      this.ipagination.pageSize = pageSize
      this.initPageSize = this.ipagination.pageSize
      this.loadData()
    },
    handleTableChange(pagination, filters, sorter) {
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      if (filters && Object.keys(filters).length > 0 && filters.enable_dictText) {
        this.filters.enable = filters.enable_dictText[0];
      }
      if (filters && Object.keys(filters).length > 0 && filters.zoneCode) {
        this.filters.zoneCode = filters.zoneCode.toString();
      }
      this.ipagination = pagination;
      this.loadData();
    },
    getStatusColor(status) {
      const colors = {
        '良品': 'green', '报废品': 'purple', '待确认': 'grey', '次品': 'red',
        '锁定': 'red', '冻结': 'red', '空闲': 'green', '有货': 'purple',
        '满盘': 'blue', '交库': 'green', '提货': 'purple', '出库': 'red',
        default: 'blue'
      };
      return colors[status] || colors.default;
    },
    loadFrom() {
      getZoneList().then((res) => {
        if (res.success) {
          this.zoneList = res.result
          setTimeout(() => {
            this.zoneOptions.splice(0, 1);
            for (let i = 0; i < res.result.length; i++) {
              this.zoneOptions.push({value: res.result[i].code, text: res.result[i].name})
            }
          }, 500)
        }
      });
      getCompanyList().then(res => {
        if (res.success) {
          this.companyList = res.result
        }
      })
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      if (selectedRowKeys != null && selectedRowKeys.length > 0) {
        this.selectedMainId = selectedRowKeys[0].toString();
      }
      selectedRowKeys = selectedRowKeys.filter((item) => item !== '合计');
      this.selectedRowKeys = selectedRowKeys;
      this.selectRecord = selectionRows;
    },
    solutionCompany(value) {
      var actions = []
      Object.keys(this.companyList).some(key => {
        if (this.companyList[key].code == '' + value) {
          actions.push(this.companyList[key].name)
          return true
        }
      })
      return actions.join('')
    },
    solutionZoneCode(value) {
      var actions = []
      Object.keys(this.zoneList).some((key) => {
        if (this.zoneList[key].code == '' + value) {
          actions.push(this.zoneList[key].name)
          return true
        }
      })
      return actions.join('')
    },
    handleDetail(record) {
      this.$message.info('查看详情功能，业务逻辑可按需扩展');
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({type: 'string', value: 'companyCode', text: '货主', dictCode: ''})
      fieldList.push({type: 'string', value: 'zoneCode', text: '库区', dictCode: ''})
      fieldList.push({type: 'string', value: 'containerCode', text: '容器编码', dictCode: ''})
      fieldList.push({type: 'string', value: 'locationCode', text: '库位编码', dictCode: ''})
      fieldList.push({type: 'string', value: 'materialCode', text: '物料编码', dictCode: ''})
      fieldList.push({type: 'BigDecimal', value: 'qty', text: '数量', dictCode: ''})
      fieldList.push({type: 'string', value: 'batch', text: '批次', dictCode: ''})
      fieldList.push({type: 'int', value: 'inventoryAge', text: '库龄（天）', dictCode: ''})
      this.superFieldList = fieldList
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>