<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<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="库区">
<a-form-model-item prop="zoneOptions">
<j-multi-select-tag
v-model="queryParam.zoneCode"
:options="zoneOptions"
placeholder="请选择库区">
</j-multi-select-tag>
</a-form-model-item>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="货主">
<a-select
show-search
placeholder="请选择货主"
option-filter-prop="children"
v-model="queryParam.companyCode">
<a-select-option v-for="item in companyList" :key="item.name" :value="item.code">{{
item.name
}}
</a-select-option>
</a-select>
</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.locationCode"></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.containerCode"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="库存状态">
<j-dict-select-tag
placeholder="请选择库存状态"
v-model="queryParam.inventoryStatus"
dictCode="inventory_status"
/>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="可用状态">
<j-dict-select-tag
placeholder="请选择可用状态"
v-model="queryParam.controller"
dictCode="inventory_enable"
/>
</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>
<template v-if="toggleSearchStatus">
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="物料名称">
<a-input placeholder="请输入物料名称" v-model="queryParam.materialName"></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.materialSpec"></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.materialUnit"></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">
<a-form-item label="巷道">
<a-input placeholder="请输入巷道" v-model="queryParam.roadWay"></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.sn"></a-input>
</a-form-item>
</a-col>
<a-col :xl="12" :lg="14" :md="16" :sm="24">
<a-form-item label="创建日期">
<j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间"
class="query-group-cust" v-model="queryParam.createTime_begin"></j-date>
<span class="query-group-split-cust"></span>
<j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间"
class="query-group-cust" v-model="queryParam.createTime_end"></j-date>
</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.inventoryAge'></a-input>
</a-form-item>
</a-col>
</template>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button id="search" type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 查询区域-END -->
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button v-has="'inventoryDetail:add'" @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button v-has="'inventoryDetail:export'" type="primary" icon="download" @click="handleExportXls('库存详情')"
>导出
</a-button
>
<a-upload
v-has="'inventoryDetail:import'"
name="file"
:showUploadList="false"
:multiple="false"
:headers="tokenHeader"
:action="importExcelUrl"
@change="handleImportExcel"
>
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<a-button v-has="'inventoryDetail:controller'" @click='controller()' type='primary'>冻结</a-button>
<a-button v-has="'inventoryDetail:releaseController'" @click='releaseController()' type='primary'>释放冻结
</a-button>
<a-button v-has="'inventoryHeader:quickShipmentInventoryHeader'" @click='quickShipment()' type='primary'>
快速出库
</a-button>
<!-- 高级查询区域 -->
<j-super-query :fieldList="superFieldList" v-has="'inventoryDetail:superQuery'"
@handleSuperQuery="handleSuperQuery"/>
<!-- <a-dropdown v-if="selectedRowKeys.length > 0">-->
<!-- <a-menu slot="overlay">-->
<!-- <a-menu-item v-has="'inventoryDetail:delete'" key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>-->
<!-- </a-menu>-->
<!-- <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>-->
<!-- </a-dropdown>-->
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
style="font-weight: 600">{{ selectedRowKeys.length }}</a> 项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
:scroll="{ x: true }"
bordered
rowKey="id"
class="j-table-force-nowrap"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
@change="handleTableChange"
>
<span slot="containerStatus_dictText" slot-scope="containerStatus_dictText">
<a-tag :key="containerStatus_dictText" :color="getStatusColor(containerStatus_dictText)">
{{ containerStatus_dictText }}
</a-tag>
</span>
<span slot="enable_dictText" slot-scope="enable_dictText">
<a-tag :key="enable_dictText" :color="getStatusColor(enable_dictText)">
{{ enable_dictText }}
</a-tag>
</span>
<span slot="inventoryStatus_dictText" slot-scope="inventoryStatus_dictText">
<a-tag :key="inventoryStatus_dictText" :color="getStatusColor(inventoryStatus_dictText)">
{{ inventoryStatus_dictText }}
</a-tag>
</span>
<span slot="companyCode" slot-scope="companyCode">
<a-tag :key="companyCode" color="blue">
{{ solutionCompany(companyCode) }}
</a-tag>
</span>
<span slot="zoneCode" slot-scope="zoneCode">
<a-tag :key="zoneCode" color=blue>
{{ solutionZoneCode(zoneCode) }}
</a-tag>
</span>
<template slot="htmlSlot" slot-scope="text">
<div v-html="text"></div>
</template>
<template slot="imgSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
<img
v-else
:src="getImgView(text)"
height="25px"
alt=""
style="max-width:80px;font-size: 12px;font-style: italic;"
/>
</template>
<template slot="fileSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
<a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">下载
</a-button>
</template>
<span slot="action" slot-scope="text, record">
<a v-has="'inventoryDetail:edit'" @click="handleEdit(record)">编辑<a-divider type="vertical"/></a>
<a-popconfirm v-has="'inventoryDetail:delete'" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</span>
</a-table>
</div>
<simple-inventory-detail-modal ref="modalForm" @ok="modalFormOk"></simple-inventory-detail-modal>
<quick-shipment-detail-model ref='quickShipmentModel'></quick-shipment-detail-model>
</a-card>
</template>
<script>
import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import SimpleInventoryDetailModal from './modules/SimpleInventoryDetailModal'
import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
import {getCompanyList, getZoneList,} from "@api/api";
import {postAction} from '@/api/manage'
import QuickShipmentDetailModel from "@views/system/shipment/modules/QuickShipmentDetailModal";
export default {
name: 'SimpleInventoryDetailList',
mixins: [JeecgListMixin, mixinDevice],
components: {
QuickShipmentDetailModel,
SimpleInventoryDetailModal
},
data() {
return {
zoneList: [],
zoneOptions: [],
companyList: [],
firstLoad:0,
description: '库存详情管理页面',
// 表头
columns: [
{
title: '库存详情ID',
align: 'center',
dataIndex: 'id',
// fixed: "left",
// width: 100,
},
{
title: '货主',
align: 'center',
dataIndex: 'companyCode',
key: 'companyCode',
scopedSlots: {customRender: 'companyCode'}
},
{
title: '库区',
align: "center",
dataIndex: 'zoneCode',
key: 'zoneCode',
scopedSlots: {customRender: 'zoneCode'}
},
{
title: '容器编码',
align: 'center',
dataIndex: 'containerCode'
},
{
title: '容器状态',
align: "center",
dataIndex: 'containerStatus_dictText',
scopedSlots: {customRender: 'containerStatus_dictText'}
},
{
title: '库位编码',
align: 'center',
dataIndex: 'locationCode'
},
{
title: '物料编码',
align: 'center',
dataIndex: 'materialCode'
},
{
title: '物料名称',
align: 'center',
dataIndex: 'materialName'
},
{
title: '物料规格',
align: 'center',
dataIndex: 'materialSpec'
},
{
title: '物料单位',
align: 'center',
dataIndex: 'materialUnit'
},
{
title: '数量',
align: 'center',
dataIndex: 'qty'
},
{
title: '任务锁定数量',
align: 'center',
dataIndex: 'taskQty'
},
{
title: '托盘填充度',
align: 'center',
dataIndex: 'fillDensity',
customRender: text => {
return text == null ? '' : text + '%'
}
},
{
title: '库存状态',
align: 'center',
dataIndex: 'inventoryStatus_dictText',
scopedSlots: {customRender: 'inventoryStatus_dictText'}
},
{
title: '可用状态',
align: 'center',
dataIndex: 'enable_dictText',
scopedSlots: {customRender: 'enable_dictText'}
},
{
title: '批次',
align: 'center',
dataIndex: 'batch'
},
// {
// title:'序列号',
// align:"center",
// dataIndex: 'sn'
// },
{
title: '入库日期',
align: 'center',
dataIndex: 'receiptDate'
},
{
title: '库龄（天）',
align: 'center',
dataIndex: 'inventoryAge'
},
{
title: '巷道',
align: "center",
dataIndex: 'roadWay'
},
{
title: '创建人',
align: 'center',
dataIndex: 'createBy'
},
{
title: '创建日期',
align: 'center',
dataIndex: 'createTime'
},
{
title: '更新人',
align: 'center',
dataIndex: 'updateBy'
},
{
title: '更新日期',
align: 'center',
dataIndex: 'updateTime'
},
// {
// title: '操作',
// dataIndex: 'action',
// align: 'center',
// fixed: 'right',
// width: 147,
// scopedSlots: {customRender: 'action'}
// }
],
url: {
list: '/inventory/inventoryDetail/list',
delete: '/inventory/inventoryDetail/delete',
deleteBatch: '/inventory/inventoryDetail/deleteBatch',
exportXlsUrl: '/inventory/inventoryDetail/exportXls',
importExcelUrl: 'inventory/inventoryDetail/importExcel',
controller: 'inventory/inventoryHeader/controller',
quickShipment: 'inventory/inventoryHeader/quickShipment',
releaseController: 'inventory/inventoryHeader/releaseController',
},
dictOptions: {},
superFieldList: [],
selectRecord: [],
}
},
created() {
this.loadFrom()
this.getSuperFieldList()
},
mounted() {
if(this.firstLoad == 0) {
this.firstLoad = 1;
return;
}
//页面没加载完,此时methods里的方法找不到,使用定时器模拟点击
let timeSearch=setInterval(()=>{
let eleSearch= document.getElementById("search");
if (eleSearch!=null){
//调用成功,清除定时器
clearInterval(timeSearch)
eleSearch.click();
}
},200)
},
computed: {
importExcelUrl: function () {
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
}
},
methods: {
getStatusColor(status) {
const colors = {
'良品': 'green',
'报废品': 'purple',
'待确认 ': 'grey',
'次品': 'red',
'锁定': 'red',
'冻结': 'red',
default: 'blue'
};
return colors[status] || colors.default;
},
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
}
})
},
controller: function () {
if (this.selectedRowKeys.length <= 0) {
this.$message.warning('请选择一条记录！')
} else {
let that = this;
this.$confirm({
title: '确认冻结',
content: '是否冻结选中数据?',
onOk: function () {
that.loading = true;
postAction(that.url.controller, that.selectedRowKeys).then((res) => {
if (res.success) {
//重新计算分页问题
that.reCalculatePage(that.selectedRowKeys.length);
that.$message.success(res.message);
that.loadData();
that.onClearSelected();
} else {
that.$message.warning(res.message);
this.selectedRowKeys = [];
}
}).finally(() => {
that.loading = false;
})
}
})
}
},
releaseController() {
if (this.selectedRowKeys.length <= 0) {
this.$message.warning('请选择一条记录！')
} else {
let that = this;
this.$confirm({
title: '释放冻结',
content: '释放冻结选中数据?',
onOk: function () {
that.loading = true;
postAction(that.url.releaseController, that.selectedRowKeys).then((res) => {
if (res.success) {
//重新计算分页问题
that.reCalculatePage(that.selectedRowKeys.length);
that.$message.success(res.message);
that.loadData();
that.onClearSelected();
} else {
that.$message.warning(res.message);
this.selectedRowKeys = [];
}
}).finally(() => {
that.loading = false;
})
}
})
}
},
onSelectChange(selectedRowKeys, selectionRows) {
if (selectedRowKeys != null && selectedRowKeys.length > 0) {
this.selectedMainId = selectedRowKeys[0].toString();
}
this.selectedRowKeys = selectedRowKeys;
this.selectRecord = selectionRows;
},
quickShipment() {
if (this.selectedRowKeys.length <= 0) {
this.$message.warning('请选择一条记录！');
} else {
let zoneCodes = this.selectRecord.map(row => row.zoneCode);
if (new Set(zoneCodes).size !== 1) {
this.$message.warning('所选数据非同库区');
return;
}
this.$refs.quickShipmentModel.edit(this.selectRecord);
this.$refs.quickShipmentModel.title = '选择出库口';
}
},
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('')
},
initDictConfig() {
},
getSuperFieldList() {
let fieldList = []
fieldList.push({type: 'string', value: 'companyCode', text: '货主', dictCode: ''})
fieldList.push({type: 'string', value: 'zoneCode', text: '库区', dictCode: ''})
fieldList.push({type: 'string', value: 'containerCode', text: '容器编码', dictCode: ''})
fieldList.push({type: 'string', value: 'locationCode', text: '库位编码', dictCode: ''})
fieldList.push({type: 'string', value: 'materialCode', text: '物料编码', dictCode: ''})
fieldList.push({type: 'string', value: 'materialName', text: '物料名称', dictCode: ''})
fieldList.push({type: 'string', value: 'materialSpec', text: '物料规格', dictCode: ''})
fieldList.push({type: 'string', value: 'materialUnit', text: '物料单位', dictCode: ''})
fieldList.push({type: 'BigDecimal', value: 'qty', text: '数量', dictCode: ''})
fieldList.push({type: 'BigDecimal', value: 'taskQty', text: '任务锁定数量', dictCode: ''})
fieldList.push({type: 'string', value: 'inventoryStatus', text: '库存状态', dictCode: 'inventory_status'})
fieldList.push({type: 'int', value: 'enable', text: '可用状态', dictCode: 'inventory_enable'})
fieldList.push({type: 'string', value: 'batch', text: '批次', dictCode: ''})
// fieldList.push({type:'string',value:'sn',text:'序列号',dictCode:''})
fieldList.push({type: 'datetime', value: 'receiptDate', text: '入库日期'})
fieldList.push({type: 'int', value: 'inventoryAge', text: '库龄（天）', dictCode: ''})
fieldList.push({type: 'string', value: 'createBy', text: '创建人', dictCode: ''})
fieldList.push({type: 'datetime', value: 'createTime', text: '创建日期'})
fieldList.push({type: 'string', value: 'updateBy', text: '更新人', dictCode: ''})
fieldList.push({type: 'datetime', value: 'updateTime', text: '更新日期'})
this.superFieldList = fieldList
}
}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>