|
@@ -4,31 +4,69 @@
|
|
|
class="creatReplenish-confirm-modal"
|
|
|
:footer="null"
|
|
|
:maskClosable="false"
|
|
|
- title="生成补货单"
|
|
|
+ :title="modalTit"
|
|
|
v-model="isShow"
|
|
|
@cancel="isShow = false"
|
|
|
- :width="800">
|
|
|
+ width="80%">
|
|
|
<a-spin :spinning="spinning" tip="Loading...">
|
|
|
- <div style="padding:0 0 20px;text-align: center;">
|
|
|
- <h3>请选择需要生成补货单的数字货架</h3>
|
|
|
- <div style="color:#999;font-size:12px;">(请从左侧选择货架并移动到右侧区域)</div>
|
|
|
+ <!-- 搜索条件 -->
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form-model
|
|
|
+ ref="ruleForm"
|
|
|
+ class="form-model-con"
|
|
|
+ layout="inline"
|
|
|
+ :model="queryParam"
|
|
|
+ @keyup.enter.native="$refs.table.refresh(true)" >
|
|
|
+ <a-row :gutter="5">
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-form-model-item label="产品编码">
|
|
|
+ <a-input id="chooseShelf-code" ref="searchProductCode" v-model.trim="queryParam.productCode" allowClear placeholder="请输入产品编码"/>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="8" :sm="24">
|
|
|
+ <a-form-model-item label="产品名称">
|
|
|
+ <a-input id="chooseShelf-name" v-model.trim="queryParam.productName" allowClear placeholder="请输入产品名称"/>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="10" :sm="24">
|
|
|
+ <a-form-model-item label="库存情况">
|
|
|
+ <a-checkbox-group :options="options" @change="onStockChange" />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="24" :sm="24" style="margin-bottom: 10px;text-align:right;">
|
|
|
+ <a-button type="primary" @click="$refs.table.refresh(true)" id="chooseShelf-refresh">查询</a-button>
|
|
|
+ <a-button style="margin-left: 5px" @click="resetSearchForm" id="chooseShelf-reset">重置</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form-model>
|
|
|
</div>
|
|
|
- <!-- 列表 -->
|
|
|
- <div v-if="isShow">
|
|
|
- <a-transfer
|
|
|
- :titles="['货架列表', '已选货架']"
|
|
|
- :listStyle="{width:'45%',height:'400px'}"
|
|
|
- :data-source="shelfList"
|
|
|
- show-search
|
|
|
- :filter-option="filterOption"
|
|
|
- :target-keys="targetKeys"
|
|
|
- :render="item => item.title"
|
|
|
- @change="handleChange"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="btn-cont">
|
|
|
- <a-button type="primary" id="creatReplenish-confirm-modal-save" @click="handleSave">确定</a-button>
|
|
|
- <a-button id="creatReplenish-confirm-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
|
|
|
+ <div>
|
|
|
+ <div class="table-operator">
|
|
|
+ <div>
|
|
|
+ <a-button type="primary" class="button-error" @click="handleSave">创建补货单</a-button>
|
|
|
+ <span v-if="selectTotal">已选{{ selectTotal }}款产品,共15件</span>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left:20px;">
|
|
|
+ <a-checkbox>
|
|
|
+ 仅显示已选产品
|
|
|
+ </a-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <s-table
|
|
|
+ class="sTable"
|
|
|
+ ref="table"
|
|
|
+ size="small"
|
|
|
+ :rowKey="(record) => record.id"
|
|
|
+ :row-selection="{columnWidth: 40}"
|
|
|
+ @rowSelection="rowSelectionFun"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ :scroll="{ y: 450 }"
|
|
|
+ :defaultLoadData="false"
|
|
|
+ :showPagination="false"
|
|
|
+ bordered>
|
|
|
+ </s-table>
|
|
|
</div>
|
|
|
</a-spin>
|
|
|
</a-modal>
|
|
@@ -36,9 +74,11 @@
|
|
|
|
|
|
<script>
|
|
|
import { commonMixin } from '@/utils/mixin'
|
|
|
-import { queryListForSettle, shelfTaskInsertBill } from '@/api/shelfReplenish'
|
|
|
+import { STable, VSelect } from '@/components'
|
|
|
+import { shelfReplenishList, shelfTaskInsertBill } from '@/api/shelfReplenish'
|
|
|
export default {
|
|
|
name: 'ConfirmModal',
|
|
|
+ components: { STable, VSelect },
|
|
|
mixins: [commonMixin],
|
|
|
props: {
|
|
|
openModal: { // 弹框显示状态
|
|
@@ -52,44 +92,71 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ modalTit () {
|
|
|
+ const hjName = this.nowData && this.nowData.shelfInfo.shelfName ? this.nowData.shelfInfo.shelfName : ''
|
|
|
+ return '待补货产品 —— ' + hjName
|
|
|
+ },
|
|
|
+ columns () {
|
|
|
+ const arr = [
|
|
|
+ { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
|
|
|
+ { title: '库存批次', dataIndex: 'stockBatchNo', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
|
|
|
+ { title: '入库类型', dataIndex: 'putBizTypeDictValue', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
|
|
|
+ { title: '仓库', dataIndex: 'warehouseName', width: '15%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
|
|
|
+ { title: '仓位', dataIndex: 'warehouseLocationName', width: '15%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
|
|
|
+ // { title: '成本价', dataIndex: 'putCost', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
|
|
|
+ { title: '本次出库数量', dataIndex: 'outQty', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
|
|
|
+ // { title: '成本小计', dataIndex: 'totalCost', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
|
|
|
+ ]
|
|
|
+ if (this.$hasPermissions('M_ShowAllCost')) {
|
|
|
+ arr.splice(5, 0, { title: '成本价', dataIndex: 'putCost', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } })
|
|
|
+ arr.splice(7, 0, { title: '成本小计', dataIndex: 'totalCost', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } })
|
|
|
+ }
|
|
|
+ return arr
|
|
|
+ }
|
|
|
+ },
|
|
|
data () {
|
|
|
return {
|
|
|
spinning: false,
|
|
|
isShow: this.openModal, // 是否打开弹框
|
|
|
- shelfList: [],
|
|
|
- targetKeys: []
|
|
|
+ options: [
|
|
|
+ { label: '库存充足', value: '1' },
|
|
|
+ { label: '部分缺货', value: '2' },
|
|
|
+ { label: '全部缺货', value: '3' }
|
|
|
+ ],
|
|
|
+ queryParam: {
|
|
|
+ productCode: '', // 产品编码
|
|
|
+ productName: '' // 产品名称
|
|
|
+ },
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
+ loadData: parameter => {
|
|
|
+ this.spinning = true
|
|
|
+ return shelfReplenishList(Object.assign(parameter, this.queryParam)).then(res => {
|
|
|
+ let data
|
|
|
+ if (res.status == 200) {
|
|
|
+ data = res.data.list
|
|
|
+ const no = 0
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ data[i].no = no + i + 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.spinning = false
|
|
|
+ return data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ rowSelectionInfo: null
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- getShelf () {
|
|
|
- this.spinning = true
|
|
|
- queryListForSettle().then(res => {
|
|
|
- if (res.status == 200) {
|
|
|
- this.shelfList = res.data || []
|
|
|
- this.shelfList.map(item => {
|
|
|
- item.title = item.shelfName
|
|
|
- item.key = item.shelfSn
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.shelfList = []
|
|
|
- }
|
|
|
- this.spinning = false
|
|
|
- })
|
|
|
- },
|
|
|
- filterOption (inputValue, option) {
|
|
|
- return option.title.indexOf(inputValue) > -1
|
|
|
+ onStockChange (val) {
|
|
|
+ console.log(val)
|
|
|
},
|
|
|
- handleChange (targetKeys, direction, moveKeys) {
|
|
|
- console.log(targetKeys, direction, moveKeys)
|
|
|
- this.targetKeys = targetKeys
|
|
|
+ // 表格选中项
|
|
|
+ rowSelectionFun (obj) {
|
|
|
+ this.rowSelectionInfo = obj || null
|
|
|
},
|
|
|
// 确认补货
|
|
|
handleSave () {
|
|
|
- if (this.targetKeys.length == 0) {
|
|
|
- this.$message.info('请选择货架!')
|
|
|
- return false
|
|
|
- }
|
|
|
-
|
|
|
this.spinning = true
|
|
|
shelfTaskInsertBill(this.targetKeys).then(res => {
|
|
|
if (res.status == 200) {
|
|
@@ -109,13 +176,6 @@ export default {
|
|
|
isShow (newValue, oldValue) {
|
|
|
if (!newValue) {
|
|
|
this.$emit('close')
|
|
|
- this.targetKeys = []
|
|
|
- this.shelfList = []
|
|
|
- } else {
|
|
|
- const _this = this
|
|
|
- this.$nextTick(() => { // 页面渲染完成后的回调
|
|
|
- _this.getShelf()
|
|
|
- })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -124,9 +184,10 @@ export default {
|
|
|
|
|
|
<style lang="less">
|
|
|
.creatReplenish-confirm-modal {
|
|
|
- .btn-cont {
|
|
|
- text-align: center;
|
|
|
- margin: 35px 0 10px;
|
|
|
+ .table-operator {
|
|
|
+ padding:0 10px 10px 0;
|
|
|
+ display:flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
}
|
|
|
</style>
|