wms / wms4_chongqingxinyi · Files

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <!-- 查询区域 -->
    <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-form-model-item prop="zoneOptions">
                <j-multi-select-tag
                  v-model="queryParam.zoneCode"
                  :options="zoneOptions"
                  placeholder="请选择库区">
                </j-multi-select-tag>
              </a-form-model-item>
            </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.containerCode"></a-input>
            </a-form-item>
          </a-col>

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        :columns="columns"
        rowKey="id"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        :customRow="clickThenSelect"
        :rowClassName="rowClassName"
      >
       <span slot="zoneCode" slot-scope="zoneCode">
          <a-tag :key="zoneCode" color=blue>
            {{ solutionZoneCode(zoneCode) }}
          </a-tag>
        </span>

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

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

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


  </j-modal>
</template>

<script>
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {mixinDevice} from '@/utils/mixin'
import InventoryDetailList from "../../inventory/InventoryDetailList";
import {getCompanyList, getZoneList} from "@api/api";
import '@/assets/less/TableExpand.less'

export default {
  name: "SelectEmptyContainer",
  mixins: [JeecgListMixin, mixinDevice],
  components: {InventoryDetailList},
  data() {
    return {
      title: "选择容器",
      width: 1200,
      visible: false,
      model: {},
      selectedMainId: '',
      selectedCode: '',
      selectIndex: null,
      zoneOptions: [],
      companyList: [],
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      columns: [
        {title: '容器编码', align: 'center', dataIndex: 'containerCode'},
        {title: '库位编码', align: 'center', width: '15%', dataIndex: 'code'},
        {
          title: '库区', align: 'center', width: '15%', dataIndex: 'zoneCode', key: 'zoneCode',
          scopedSlots: {customRender: 'zoneCode'}
        },
        {title: '行', align: 'center', width: '10%', dataIndex: 'row'},
        {title: '列', align: 'center', width: '10%', dataIndex: 'icolumn'},
        {title: '层', align: 'center', width: '10%', dataIndex: 'layer'}
      ],

      confirmLoading: false,
      url: {
        list: "config/location/listEmptyContainerInLocation",
      }

    }
  },
  created() {
    this.loadFrom();
  },
  methods: {
    loadFrom() {
      getZoneList().then((res) => {
        if (res.success) {
          this.zoneList = res.result
          //延迟半秒执行,避免组件未加载完,数据已经加载完
          setTimeout(() => {
            //slice可以在数组的任何位置进行删除/添加操作
            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
        }
      })

    },
    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('')
    },
    edit() {
      this.selectedMainId = '';
      this.searchQuery();
      this.visible = true;
    },
    handleOk() {
      if (this.selectedCode == '') {
        this.$message.warning('请选择一条容器数据!')
        return false
      }
      this.$emit("getContainer", this.selectedCode);
      this.visible = false;

    },
    handleCancel() {
      this.visible = false;
    },
    clickThenSelect(record, index) {
      return {
        on: {
          click: () => {
            this.selectIndex = index
            this.onSelectChange(record.inventoryHeaderId.toString().split(','), [record])
          }
        }
      }
    },
    rowClassName(record, index) {
      return index === this.selectIndex ? 'Rowactive' : ''
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedMainId = '' + selectionRows[0].inventoryHeaderId + '';
      this.selectedCode = selectionRows[0].containerCode;
      this.selectedRowKeys = selectedRowKeys;
      this.selectRecord = selectionRows;
    },
    getStatusColor(status) {
      const colors = {
        '良品': 'green',
        '报废品': 'purple',
        '待确认	': 'grey',
        '次品': 'red',
        '锁定': 'red',
        '冻结': 'red',
        '空闲': 'green',
        '有货': 'purple',
        '满盘': 'blue',
        default: 'blue'
      };
      return colors[status] || colors.default;
    },
  }
}
</script>

<style scoped>

</style>