wms / wms4_shanghaianbofu · Files

<template>
    <a-modal
    :width="modalWidth"
    :style="modalStyle"
    :visible="visible"
    :maskClosable="false"
    @cancel="handleCancel"
    cancelText="关闭"
    >
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="20">
          <a-col :md="8" :sm="24">
              <a-form-item label="库区">
                <a-select
                  show-search
                  placeholder="请选择库区"
                  option-filter-prop="children"
                  :filter-option="filterOption"
                  v-model="queryParam.zoneCode"
                  style="width: 200px">
                  <a-select-option v-for="item in zoneList" :key="item.name" :value="item.code">{{
                      item.name
                    }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
                <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="queryBom" icon="search">查询</a-button>
                </span>
            </a-col>
        </a-row>
      </a-form>
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :scroll="{x:true}"
        :columns="columns"
        :visible="visible"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'radio'}"
        :customRow="clickThenSelect"
        @change="handleTableChange">
           <span slot="zoneCode" slot-scope="zoneCode">
            <a-tag :key="zoneCode" color=blue>
              {{ solutionZoneCode(zoneCode) }}
            </a-tag>
          </span>
          <span slot="action" slot-scope="text, record">
             <a @click="select(record)">选择
             <a-divider type="vertical"/></a>
          </span>
      </a-table>
    </div>
  <!-- </a-card> -->
</a-modal>
</template>

<script>

  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {getAction} from '@/api/manage'
  import '@/assets/less/TableExpand.less'
  import {getZoneList,selectEmptyContainer} from '@/api/api'

  export default {
    name: "selectEmptyContainer",
    mixins: [JeecgListMixin],
    components: {
    },
    data() {
      return {
        description: '空托盘页',
        visible:false,
        modalWidth:'48%',
        // 表头
        columns: [
          {
            title: '容器号',
            align: "center",
            dataIndex: 'code'
          },
          {
            title: '库区',
            align: "center",
            dataIndex: 'zoneCode',
            key: 'zoneCode',
            scopedSlots: {customRender: 'zoneCode'}
          },
          {
            title: '库位',
            align: "center",
            dataIndex: 'locationCode'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            fixed: "right",
            width: 147,
            scopedSlots: {customRender: 'action'},
          }
        ],
        /* 分页参数 */
        ipagination: {
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['5', '10', '50'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        selectedMainId: '',
        superFieldList: [],
      }
    },
    created() {
        this.getSuperFieldList();
        this.loadFrom();
    },
    methods: {
      clickThenSelect(record) {
        return {
          on: {
            click: () => {
               this.select(record);
            }
          }
        }
      },
      onClearSelected() {
        this.selectedRowKeys = [];
        this.selectionRows = [];
        this.selectedMainId = ''
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedMainId = selectedRowKeys[0]
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows;
      },
      select(record){
        console.log(record);
        this.$emit('code',record.code+","+record.locationCode+","+record.zoneCode);
        this.handleCancel();
      },
      loadFrom() {
        getZoneList().then((res) => {
          if (res.success) {
            this.zoneList = res.result
          }
        });
      },
      callBox() {
        this.$refs.callBoxModal.edit();
        this.$refs.callBoxModal.title = "呼叫料盒";
      },
      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('')
      },
      getSuperFieldList() {
        let fieldList = [];
        fieldList.push({type: 'string', value: 'code', text: '容器号', dictCode: ''})
        fieldList.push({type: 'string', value: 'locationCode', text: '库位', dictCode: ''})
        fieldList.push({type: 'string', value: 'zoneCode', text: '库区', dictCode: ''})
        this.superFieldList = fieldList
      },
      edit(){
        this.visible=true;
      },
      handleCancel(){
        this.visible=false;
      },
      queryBom(){
        this.onClearSelected()
        this.loading = true
        var params = this.getQueryParams();//查询条件
        selectEmptyContainer(params).then((res) => {
            if (res.success) {
                this.dataSource = res.result.records || res.result;
                if (res.result.total) {
                    this.ipagination.total = res.result.total;
                } else {
                    this.ipagination.total = 0;
                }
            } else {
            this.$message.warning(res.message)
            }
        }).finally(() => {
            this.loading = false
        })
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>