supply-front/src/views/basic_data/stock/electricalStorageCharges.vue

<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <div class="screen-container">
      <Collapse :screen-form="screenForm">
        <template #right_btn>
          <el-button size="mini" @click="resetScreenForm">清空</el-button>
          <el-button size="mini" type="primary" @click="submitScreenForm">搜索</el-button>
        </template>
        <template #search>
          <el-form ref="screenForm" :model="screenForm" label-width="120px" size="mini" label-position="left">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="发货申请" prop="orderNo">
                  <el-input v-model="screenForm.orderNo" placeholder="请输入发货申请" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="销售出库单号" prop="id">
                  <el-input v-model="screenForm.id" placeholder="请输入销售出库单号" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="订单类型" prop="orderType">
                  <el-select v-model="screenForm.orderType" clearable filterable>
                    <el-option v-for="item in orderType" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="订单号" prop="mainOrderId">
                  <el-input v-model="screenForm.mainOrderId" placeholder="请输入订单号" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="订单日期" prop="orderDate">
                  <el-date-picker
                    v-model="screenForm.orderDate"
                    type="datetimerange"
                    :default-time="['00:00:00','23:59:59']"
                    range-separator="至"
                    style="width: 100%"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="发货日期" prop="invoiceDate">
                  <el-date-picker
                    v-model="screenForm.invoiceDate"
                    type="datetimerange"
:default-time="['00:00:00','23:59:59']"
                    range-separator="至"
                    style="width: 100%"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="仓库" prop="correspondId">
                  <el-select v-model="screenForm.correspondId" clearable filterable multiple>
                    <el-option
                      v-for="(item, index) in warehouseList"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="经销商名称" prop="customerName">
                  <el-input v-model="screenForm.customerName" placeholder="请输入经销商名称" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="经销商编码" prop="customerNumber">
                  <el-input v-model="screenForm.customerNumber" placeholder="请输入经销商编码" />
                </el-form-item>
              </el-col>
              <!-- <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="物料名称" prop="materialName">
                  <el-input
                    v-model="screenForm.materialName"
                    placeholder="请输入物料名称"
                  />
                </el-form-item>
              </el-col> -->
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="物料编码" prop="materialNumber">
                  <el-input v-model="screenForm.materialNumber" placeholder="请输入物料编码" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="规格型号" prop="specification">
                  <el-input v-model="screenForm.specification" placeholder="请输入规格型号" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="审核日期" prop="approvalDate">
                  <el-date-picker
                    v-model="screenForm.approvalDate"
                    type="datetimerange"
:default-time="['00:00:00','23:59:59']"
                    range-separator="至"
                    style="width: 100%"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="出库状态" prop="saleExamineStatus">
                  <el-select v-model="screenForm.saleExamineStatus" clearable filterable>
                    <el-option
                      v-for="(item, index) in statusList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="出库日期" prop="saleDate">
                  <el-date-picker
                    v-model="screenForm.saleDate"
                    type="datetimerange"
:default-time="['00:00:00','23:59:59']"
                    range-separator="至"
                    style="width: 100%"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :lg="6">
                <el-form-item label="存货类别" prop="categoryNum">
                  <el-select v-model="screenForm.categoryNum" clearable filterable multiple>
                    <el-option
                      v-for="(item, index) in categoryList"
                      :key="index"
                      :label="item.name"
                      :value="item.number"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </Collapse>
    </div>
    <div class="mymain-container">
      <div class="btn-group clearfix">
        <div>
          <ExportButton :ex-url="'/sale/storageFee/listStorageFeeExport'" :ex-params="exParams" />
        </div>
      </div>
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
          show-summary
          :summary-method="$getSummaries"
        >
          <el-table-column align="left" label="订单类型" prop="orderType" min-width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ filterOderType(scope.row.orderType) }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="订单号" prop="mainOrderId" min-width="150" show-overflow-tooltip />
          <el-table-column align="left" label="订单日期" prop="theTime" min-width="150" show-overflow-tooltip />
          <el-table-column
            align="left"
            label="订单审核时间"
            prop="approvalTime"
            min-width="150"
            show-overflow-tooltip
          />
          <el-table-column
            align="left"
            label="预留时间"
            prop="reservedCreateTime"
            min-width="150"
            show-overflow-tooltip
          />
          <el-table-column align="left" label="预留单号" prop="reservedId" min-width="150" show-overflow-tooltip />
          <el-table-column align="left" label="发货单号" prop="invoiceId" min-width="150" show-overflow-tooltip />
          <el-table-column align="left" label="发货单日期" prop="orderTime" min-width="150" show-overflow-tooltip />
          <el-table-column align="left" label="发货审核时间" prop="examineTime" min-width="150" show-overflow-tooltip />
          <el-table-column
            align="left"
            label="出库状态"
            prop="salesExamineStatus"
            min-width="150"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ filterExamineStatus(scope.row.salesExamineStatus) }}
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="出库审核时间"
            prop="salesApprovalTime"
            min-width="150"
            show-overflow-tooltip
          />
          <el-table-column
            align="left"
            label="出库审核人"
            prop="salesApprovalName"
            min-width="150"
            show-overflow-tooltip
          />
          <el-table-column align="left" label="仓库" prop="correspondName" min-width="150" show-overflow-tooltip />
          <el-table-column align="left" label="客户编号" prop="customerNumber" min-width="150" show-overflow-tooltip />
          <el-table-column align="left" label="客户名称" prop="customerName" min-width="150" show-overflow-tooltip />
          <el-table-column align="left" label="存货编号" prop="materialCode" min-width="150" show-overflow-tooltip />
          <el-table-column align="left" label="规格型号" prop="specification" min-width="150" show-overflow-tooltip />
          <el-table-column align="right" label="订单数量" prop="qty" min-width="150" show-overflow-tooltip />
          <el-table-column align="right" label="价税合计" prop="payAmount" min-width="150" show-overflow-tooltip />
          <el-table-column align="right" label="折扣额" prop="payRebateAmount" min-width="150" show-overflow-tooltip />
          <el-table-column align="right" label="合计" prop="totalAmount" min-width="150" show-overflow-tooltip />
          <el-table-column align="right" label="发货数量" prop="refundableQty" min-width="150" show-overflow-tooltip />
          <el-table-column align="right" label="未发货数量" prop="sendQty" min-width="150" show-overflow-tooltip />
        </el-table>
      </div>
    </div>
    <div class="pagination clearfix">
      <div class="fr">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { saleStorageFeeListStorageFee } from '@/api/stock'
import { getCategoryList } from '@/api/common'
import { getWarehouseList } from '@/api/supply/apply'

export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: null, // 列表数据
      listLoading: false, // 列表加载loading
      screenForm: {
        correspondId: [],
        categoryNum:[],
        customerName: '',
        customerNumber: '',
        endTime: '',
        id: '',
        invoiceEndTime: '',
        invoiceStartTime: '',
        mainOrderId: '',
        materialName: '',
        materialNumber: '',
        orderNo: '',
        orderType: '',
        specification: '',
        startTime: '',
        orderDate: [],
        invoiceDate: [],
        approvalDate: [],
        saleDate: [],
        saleExamineStatus: ''
      },
      typeList: [],
      statusList: [
        { value: 'SAVE', label: '保存' },
        { value: 'WAIT', label: '待审核' },
        { value: 'OK', label: '通过' },
        { value: 'FAIL', label: '不通过' },
        { value: 'CLOSE', label: '关闭' }
      ],
      warehouseList: [],
      categoryList: [],
      isCollapse: true,
      orderType: [
        {
          value: 'TRADE',
          label: '商用'
        },
        {
          value: 'HOME',
          label: '家用'
        },
        {
          value: 'RETAIL',
          label: '零售'
        },

        {
          value: 'RETAIL_POLICY',
          label: '政策'
        },
        {
          value: 'PERMU_HOME',
          label: '置换家用'
        },
        {
          value: 'PERMU_TRADE',
          label: '置换商用'
        },
        {
          value: 'PERMU_RETAIL',
          label: '置换零售'
        },
        {
          value: 'PERMU_RETAIL_POLICY',
          label: '置换政策'
        },
        {
          value: 'REQUISITION_RETAIL',
          label: '调拨零售'
        },
        {
          value: 'REQUISITION_RETAIL_POLICY',
          label: '调拨政策'
        },
        {
          value: 'REQUISITION_TRADE',
          label: '调拨商用'
        },
        {
          value: 'REQUISITION_HOME',
          label: '调拨家用'
        }
      ],
      examineStatus: [
        {
          value: 'SAVE',
          label: '保存'
        },
        {
          value: 'WAIT',
          label: '待审核'
        },
        {
          value: 'OK',
          label: '通过'
        },
        {
          value: 'FAIL',
          label: '不通过'
        },
        {
          value: 'CLOSE',
          label: '关闭'
        }
      ]
    }
  },

  computed: {
    exParams() {
      return {
        categoryNum:this.screenForm.categoryNum.join(','),
        correspondId: this.screenForm.correspondId.join(','),
        customerName: this.screenForm.customerName,
        customerNumber: this.screenForm.customerNumber,
        endTime: this.screenForm.orderDate?this.screenForm.orderDate[1] :'',
        id: this.screenForm.id,
        invoiceEndTime: this.screenForm.invoiceDate?this.screenForm.invoiceDate[1]:'',
        invoiceStartTime:this.screenForm.invoiceDate? this.screenForm.invoiceDate[0]:'',
        approvalStartTime:this.screenForm.approvalDate? this.screenForm.approvalDate[0]:'',
        approvalEndTime:this.screenForm.approvalDate? this.screenForm.approvalDate[1]:'',
        saleStartTime:this.screenForm.saleDate? this.screenForm.saleDate[0]:'',
        saleEndTime:this.screenForm.saleDate? this.screenForm.saleDate[1]:'',
        saleExamineStatus: this.screenForm.saleExamineStatus,
        mainOrderId: this.screenForm.mainOrderId,
        materialName: this.screenForm.materialName,
        materialNumber: this.screenForm.materialNumber,
        orderNo: this.screenForm.orderNo,
        orderType: this.screenForm.orderType,
        specification: this.screenForm.specification,
        startTime:this.screenForm.orderDate? this.screenForm.orderDate[0]:''
      }
    },
    filterOderType() {
      return type => {
        if (this.orderType.length && type) {
          return this.orderType.find(e => e.value === type).label
        }
      }
    },
    filterExamineStatus() {
      return status => {
        if (this.examineStatus.length && status) {
          return this.examineStatus.find(e => e.value === status).label
        }
      }
    }
  },

  created() {
    this.getList()
  },
  methods: {
    getList() {
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        categoryNum:this.screenForm.categoryNum.join(','),
        correspondId: this.screenForm.correspondId.join(','),
        customerName: this.screenForm.customerName,
        customerNumber: this.screenForm.customerNumber,
        endTime: this.screenForm.orderDate?this.screenForm.orderDate[1] :'',
        id: this.screenForm.id,
        invoiceEndTime: this.screenForm.invoiceDate?this.screenForm.invoiceDate[1]:'',
        invoiceStartTime:this.screenForm.invoiceDate? this.screenForm.invoiceDate[0]:'',
        approvalStartTime:this.screenForm.approvalDate? this.screenForm.approvalDate[0]:'',
        approvalEndTime:this.screenForm.approvalDate? this.screenForm.approvalDate[1]:'',
        saleStartTime:this.screenForm.saleDate? this.screenForm.saleDate[0]:'',
        saleEndTime:this.screenForm.saleDate? this.screenForm.saleDate[1]:'',
        saleExamineStatus: this.screenForm.saleExamineStatus,
        mainOrderId: this.screenForm.mainOrderId,
        materialName: this.screenForm.materialName,
        materialNumber: this.screenForm.materialNumber,
        orderNo: this.screenForm.orderNo,
        orderType: this.screenForm.orderType,
        specification: this.screenForm.specification,
        startTime:this.screenForm.orderDate? this.screenForm.orderDate[0]:''
      }
      this.listLoading = true
      saleStorageFeeListStorageFee(params).then(res => {
        res.data.records.forEach(item => {
          item.sums1 = ['qty', 'sendQty', 'directTransferQty', 'hasSendQty', 'refundableQty']
          item.sums2 = ['price', 'totalAmount', 'payAmount', 'rebateAmount', 'payRebateAmount', 'totalDiscAmount']
        })

        this.dataList = res.data.records
        this.listTotal = res.data.total
        this.listLoading = false
        console.log(res,this.dataList)
      })
      this.getWarehouseList()
      this.getCategoryList()
    },
    // 获取仓库列表
    getWarehouseList() {
      getWarehouseList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.warehouseList = res.data.records
      })
    },

    // 获取存货类别列表
    getCategoryList() {
      getCategoryList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.categoryList = res.data.records
      })
    },

    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.getList()
    },

    // 重置筛选表单
    resetScreenForm() {
        this.$refs.screenForm.resetFields()
      this.currentPage = 1
      this.getList()
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getList()
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    }
  }
}
</script>