wms / wms4_shanghaianbofu · Files

<template>
  <a-modal :width="modalWidth" :visible="visible" :maskClosable="false" @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-select
                show-search
                placeholder="请选择库区"
                option-filter-prop="children"
                v-model="queryParam.zoneCode"
              >
                <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: left;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>
    <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"
        :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>
        </span>
      </a-table>
    </div>
    <!-- </a-card> -->
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>
  </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: '1120px',
      zoneList: [],
      // 表头
      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: {
    loadData(arg) {
    },
    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>