<template>
|
<div>
|
<list-condition-template ref="table" :form="listQuery" :dataKey="'transferCode'"
|
:tableData="tableData" :total="total" :formLabel="formLabel"
|
@page-info-change="handlePageInfoChange">
|
<template slot="otherElement">
|
<el-col :span="24" :offset="0" class="buttonPosition">
|
<el-button size="mini" type="primary" @click="queryData">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
</el-col>
|
</template>
|
<template slot="operationSection">
|
<el-button size="mini" type="primary" @click="handleAddAllot">新增调拨</el-button>
|
</template>
|
<!-- 表格区域 -->
|
<template slot="columns">
|
<el-table-column label="调拨编号" prop="transferCode" min-width="180px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="调拨日期" prop="createTime" width="160px"></el-table-column>
|
<el-table-column label="调出渠道" width="160px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<span>{{scope.row.outChannelName}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="调入渠道" width="160px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<span>{{scope.row.inChannelName}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="调拨数量" width="80px" align="center" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<el-link class="urlLink" @click="getCommodityInfo(scope.row.spuList)">
|
{{ scope.row.transferStock }}
|
</el-link>
|
</template>
|
</el-table-column>
|
<el-table-column label="调拨备注" prop="remark" min-width="150px" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="附件" width="300px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<span v-for="(item,index) in scope.row.attachment" :key="index">
|
<span class="link-style"
|
@click="downloadFile(scope.row.attachment[index],scope.row.attachmentNames[index])">{{ scope.row.attachmentNames[index]}}</span>
|
<span v-if="index < scope.row.attachment.length - 1">，</span>
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="调拨人" prop="createName" width="120px" show-overflow-tooltip>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
<!-- 调拨商品弹窗 -->
|
<commodity-info-dialog ref="commodityInfo" :dialogVisible.sync="commodityInfoDialogVisible"
|
title="调拨商品">
|
</commodity-info-dialog>
|
<!-- 新增调拨弹窗 -->
|
<add-allot-dialog :dialogVisible.sync="addAllotDialogVisible" title="新增调拨" @close="queryData">
|
</add-allot-dialog>
|
</div>
|
</template>
|
|
<script>
|
import dictApi from '@/api/dict'
|
import { downloadFile } from '@/utils/downloadFile'
|
import InventoryAllocationApi from '@/api/stockManagement/inventoryAllocation'
|
import commodityInfoDialog from '@/views/inventoryAllocation/components/commodityInfoDialog.vue';
|
import addAllotDialog from '@/views/inventoryAllocation/components/addAllotDialog.vue'
|
export default {
|
name: "inventoryAllocationList",
|
components: {
|
commodityInfoDialog,
|
addAllotDialog
|
},
|
data() {
|
return {
|
listQuery: {
|
timeStart: null,//调拨日期
|
timeEnd: null,
|
outChannel: null,//调出渠道
|
inChannel: null,//调入渠道
|
},
|
channelData: [],
|
formLabel: [
|
{
|
model: 'timeStart',
|
label: '调拨日期',
|
type: 'date',
|
timeClass: 'start-time-style',
|
},
|
{
|
model: 'timeEnd',
|
label: '-',
|
customLabel: '调拨日期',
|
type: 'date',
|
labelWidth: '20px',
|
timeClass: 'end-time-style',
|
valueFormat: 'yyyy-MM-dd 23:59:59',
|
},
|
{
|
model: 'outChannel',
|
label: '调出渠道',
|
type: 'select',
|
opts: []
|
},
|
{
|
model: 'inChannel',
|
label: '调入渠道',
|
type: 'select',
|
opts: []
|
}
|
],
|
total: 0,
|
tableData: [],
|
commodityInfoDialogVisible: false,//调拨商品弹窗状态
|
addAllotDialogVisible: false,//新增调拨弹窗
|
percentage: 0, // 进度条数值
|
isLoading: false,// 是否展示进度条遮罩
|
}
|
},
|
/*
|
* 数据变化后刷新列表
|
*/
|
activated() {
|
this.getChannelData();
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
methods: {
|
/**
|
* 查询列表
|
*/
|
async queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
try {
|
let pageParams = {
|
current: pageInfo.pageNum,
|
size: pageInfo.pageSize,
|
}
|
const res = await InventoryAllocationApi.getList({ ...this.listQuery, ...pageParams })
|
if (res.code === '200') {
|
let _data = res.data.records;
|
if (_data.length) {
|
_data.forEach((item) => {
|
if (item.attachment && item.attachmentNames) {
|
item.attachment = item.attachment.split(",");
|
item.attachmentNames = item.attachmentNames.split(",");
|
}
|
})
|
}
|
this.tableData = _data;
|
this.total = res.data.total
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
handlePageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 获取渠道数据字典
|
*/
|
async getChannelData() {
|
let _arr = [];
|
const res = await dictApi.getChanneldict()
|
let _data = res.data;
|
if (res.code === '0' && _data && _data.length > 0) {
|
_data.forEach((item) => {
|
_arr.push({
|
id: item.dictCode,
|
name: item.dictName
|
})
|
})
|
this.formLabel[2].opts = _arr;
|
this.formLabel[3].opts = _arr;
|
this.channelData = _arr;
|
}
|
},
|
/**
|
* 获取调拨商品信息
|
*/
|
getCommodityInfo(list) {
|
this.$refs.commodityInfo.lookInventoryGoods(list);
|
this.commodityInfoDialogVisible = true;
|
},
|
/**
|
* 新增调拨
|
*/
|
handleAddAllot() {
|
this.addAllotDialogVisible = true;
|
},
|
/**
|
* 下载文件
|
*/
|
async downloadFile(key, fileName) {
|
const config = {
|
onDownloadProgress: (ProgressEvent) => {
|
const total = ProgressEvent.total || ProgressEvent.loaded
|
const progressPercent = Math.round(
|
((ProgressEvent.loaded / total) * 100) | 0
|
)
|
this.percentage = progressPercent === 100 ? 99 : progressPercent
|
this.isLoading = true
|
},
|
url: `lbcloud-file/file/download/file?key=${key}`,
|
fileName,
|
type: 'varied'
|
}
|
const res = await downloadFile(config)
|
if (res) {
|
this.percentage = 100
|
this.isLoading = false
|
} else {
|
this.percentage = 100
|
this.isLoading = false
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.link-style {
|
color: #409eff;
|
cursor: pointer;
|
}
|
</style>>
|
