SelectInvContainerHeader.vue 7.28 KB
<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="状态">
              <j-dict-select-tag placeholder="状态" v-model="queryParam.status" dictCode="receipt_status" ></j-dict-select-tag>
            </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.referCode" ></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.materialCode" ></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">
            <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:'checkbox'}"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        :rowClassName="rowClassName"
      >
        <span slot="ellipsisAndNowrap" slot-scope="text">
          <a-tooltip :title="text">{{!text ? "" : (text.length > 15 ? text.substr(0, 15)+"...." : text)}}</a-tooltip>
        </span>
       <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>

      </a-table>
    </div>

  </j-modal>
</template>

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

export default {
  name: "SelectInvContainerHeader",
  mixins: [JeecgListMixin, mixinDevice],
  components: {InventoryDetailList},
  data() {
    return {
      title: "选择容器",
      width: 1200,
      visible: false,
      model: {},
      selectedMainId: '',
      ids: '',
      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: 'companyCode',
          key: 'companyCode',
          scopedSlots: {customRender: 'companyCode'}
        },
        {
          title: '库区',
          align: "center",
          dataIndex: 'zoneCode',
          key: 'zoneCode',
          scopedSlots: {customRender: 'zoneCode'}
        },
        {
          title: '物料编码',
          align: 'center',
          dataIndex: 'materialCode'
        },
        {
          title: '口径',
          align: 'center',
          dataIndex: 'diameter',
          scopedSlots: {customRender: 'ellipsisAndNowrap'},
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'qty'
        },
        {
          title: '是否发货',
          align: 'center',
          dataIndex: 'izSend'
        },
        {
          title: '物料名称',
          align: 'center',
          dataIndex: 'materialName'
        },
        {
          title: '物料规格',
          align: 'center',
          dataIndex: 'materialSpec',
          scopedSlots: {customRender: 'ellipsisAndNowrap'},
        },
      ],

      confirmLoading: false,
      url: {
        list: "/receipt/receiptHeader/listReceiptDetailByMainId",
      }

    }
  },
  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(record) {
      this.queryParam = Object.assign({}, record)
      this.queryParam['referCode'] = '5900*'
      this.selectedMainId = '';
      this.searchQuery();
      this.visible = true;
    },
    handleOk() {
      if (this.selectedRowKeys.length == '') {
        this.$message.warning('请选择一条容器数据!')
        return falsel;
      }
      this.$emit("getContainer", this.selectedRowKeys.toString());
      this.visible = false;

    },
    handleCancel() {
      this.visible = false;
    },
    rowClassName(record, index) {
      return index === this.selectIndex ? 'Rowactive' : ''
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      // this.selectedMainId = '' + selectionRows[0].inventoryHeaderId + '';
      this.selectedRowKeys = selectedRowKeys;
      this.selectRecord = selectionRows;
    },
  }
}
</script>

<style scoped>

</style>