<template> <div class="un-done"> <LayoutFilter> <FilterItem :label="filters.orderNo.label"> <Input v-model.trim.number="filters.orderNo.model" :placeholder="filters.orderNo.holder"></Input> </FilterItem> <FilterItem :label="filters.prodCode.label"> <Input v-model.trim.number="filters.prodCode.model" :placeholder="filters.prodCode.holder" :maxlength="9"></Input> </FilterItem> <FilterItem :label="filters.merChantCode.label"> <Input v-model.trim="filters.merChantCode.model" :placeholder="filters.merChantCode.holder"></Input> </FilterItem> <FilterItem :label="filters.prodBarCode.label"> <Input v-model.trim="filters.prodBarCode.model" :placeholder="filters.prodBarCode.holder"></Input> </FilterItem> <FilterItem :label="filters.orderTime.label"> <Date-picker type="daterange" placeholder="选择日期" @on-change="dateChange" v-model="filters.orderTime.model"> </Date-picker> </FilterItem> <FilterItem :label="filters.prodStatus.label"> <Select v-model.trim="filters.prodStatus.model"> <Option v-for="option in filters.prodStatus.options" :value="option.value" :key="option.value">{{option.label}}</Option> </Select> </FilterItem> <FilterItem> <Button type="primary" @click="filterSearch">筛选</Button> <Button type="primary" @click="exportList">导出</Button> <Button @click="clearFilter">清空条件</Button> </FilterItem> </LayoutFilter> <LayoutAction> <Button type="primary" @click="showDeliverModal">发货</Button> </LayoutAction> <LayoutList> <Table border :context="self" :columns="table.cols" :data="table.list" :row-class-name="rowClassName" @on-selection-change="selectChange"></Table> <Page :total="page.total" :current="page.current" @on-change="pageChange" :page-size="20" show-total></Page> </LayoutList> <ModalDeliver ref="deliverModal" :deliver-rows="deliverRows" @deliver-success="deliverSuccess"> </ModalDeliver> <ModalStockOut ref="stockOutModal" @upload-success="uploadSuccess"> </ModalStockOut> </div> </template> <script> import _ from 'lodash'; import moment from 'moment'; import service from 'trade-service'; import dataStore from '../store/undone'; import { ModalDeliver, ModalStockOut } from 'components/modal'; import { CellPrdInfo, CellDispatch, CellDeliver, CellStockOut } from '../components'; export default { name: 'TabUndone', data() { return { self: this, filters: {}, page: {}, table: {}, useFilter: false, isExporting: false, showOutStock: false, deliverRows: [] }; }, created() { const store = dataStore(); this.filters = store.filters; this.page = store.page; this.table = store.table; this.productList(this.params()); }, methods: { params() { let params = { pageNo: 1, pageSize: 20, statusList: [1] }; if (!this.useFilter) { return params; } _.assign(params, this.filterValues()); params = _.pickBy(params, (v) => { return (v + '').length; }); return params; }, filterValues() { const keyMap = { proReqFormId: 'orderNo', productSkn: 'prodCode', sknFactoryCode: 'merChantCode', skuFactoryCode: 'prodBarCode', startTime: 'startTime', endTime: 'endTime', isOvertime: 'prodStatus' }; let values = {}; let modelVal; _.each(keyMap, (v, k) => { modelVal = this.filters[v].model; if ((modelVal + '').length) { values[k] = this.filters[v].model; } }); if (typeof values.proReqFormId !== 'undefined' && !_.isFinite(+values.proReqFormId)) { this.$Message.error('调拨单号只能是数字', 3); return; } if (typeof values.productSkn !== 'undefined' && !_.isFinite(+values.productSkn)) { this.$Message.error('SKN编码只能是数字', 3); return; } const ot = values.isOvertime; const start = values.startTime; const end = values.endTime; if (start && moment(start).isValid()) { values.startTime = +moment(start).format('X'); } else { values.startTime = ''; } if (end && moment(end).isValid()) { values.endTime = +moment(end).add(1, 'days').format('X'); } else { values.endTime = ''; } values.isOvertime = ot === -1 ? '' : (ot === 1 ? 'N' : 'Y'); // eslint-disable-line return values; }, productList(params) { this.$Loading.start(); service.allotPurchaseList(params) .then(res => { this.$Loading.finish(); this.processData(res.data); }); }, processData(data) { const fmt = 'YYYY-MM-DD HH:mm:ss'; const list = data.records; _.each(list, (v, i) => { v._rowIndex = i; // 当前行index v._disabled = v.isOvertime === 'Y'; v._colorName = v.factoryGoodsName || ''; v.createTime = moment.unix(v.createTime).format(fmt); v._needDeliver = v.buyingNums - v.lackNum - v.shipmentsNums; // 当前需发数 }); this.table.list = list; this.page.total = data.totalCount; }, filterSearch() { this.useFilter = true; const params = this.params(); this.productList(params); this.page.current = 1; }, clearFilter() { this.filters = dataStore().filters; this.useFilter = false; this.productList(this.params()); this.page.current = 1; }, pageChange(page) { let params = this.params(); params.pageNo = page; this.productList(params); this.page.current = page; }, selectChange(rows) { this.deliverRows = rows; }, deliverChange(data) { const index = data.index; const value = data.value; this.table.list[index]._inputDeliverNum = +value; _.each(this.deliverRows, item => { if (item._rowIndex === index) { item._inputDeliverNum = value; } }); }, showDeliverModal() { if (this.checkDeliver()) { this.$refs.deliverModal.show(); } }, checkDeliver() { const rows = this.deliverRows; const len = rows.length; if (!len) { this.$Message.error('请勾选要发货的订单'); return false; } let invalidRows = []; _.each(rows, (v) => { if (!_.isFinite(+v._inputDeliverNum) || !(+v._inputDeliverNum) || v._inputDeliverNum > v._needDeliver) { invalidRows.push(v.productSku); } }); if (invalidRows.length) { this.$Message.error('已选择的条目、请输入大于0且不大于当前需发数的发货数', 5); return false; } return true; }, deliverSuccess() { this.$Message.success('发货成功'); this.productList(this.params()); this.page.current = 1; }, setModel(k, v) { this.filters[k].model = v; }, dateChange(date) { this.setModel('startTime', date[0]); this.setModel('endTime', date[1]); }, rowClassName(row) { if (row.isOvertime === 'Y') { return 'over-time'; } return ''; }, lackNumChange(data) { const i = data.index; const v = data.value; this.table.list[i].inputLackNum = +v; }, showUploadModal(index) { const row = this.table.list[index]; const inputLackNum = row.inputLackNum; const needDeliver = row._needDeliver; if (!inputLackNum || inputLackNum > needDeliver) { this.$Message.error('请输入缺货数量,且缺货数量不能大于当前需发数', 3); return; } this.$refs.stockOutModal.show(row); }, uploadSuccess() { this.$Message.success('上传缺货成功'); this.productList(this.params()); this.page.current = 1; }, exportList() { let params = { statusList: 1 }; let filters = this.filterValues(); _.assign(params, filters); params = _.pickBy(params, (v) => { return (v + '').length; }); let temp = []; _.each(params, (val, key) => { temp.push(`${key}=${val}`); }); const href = `/Api/erp/allotExportList?${temp.join('&')}`; window.open(href, '_blank'); } }, components: { CellPrdInfo, CellDispatch, CellDeliver, CellStockOut, ModalStockOut, ModalDeliver } }; </script> <style lang="scss"> .ivu-table .over-time td{ background-color: #fcecec; } .status-cell { .is-overtime { color: #ff0000; font-weight: bold; } } </style>