<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 :md="6" :sm="8">
|
<a-form-item label="入库单状态">
|
<j-search-select-tag
|
placeholder="请选择入库单状态"
|
v-model="queryParam.orderStatus"
|
dict="order_status"
|
/>
|
</a-form-item>
|
</a-col>
|
<a-col :md="6" :sm="8">
|
<a-form-item label="入库人">
|
<j-search-select-tag
|
placeholder="请选择入库人"
|
v-model="queryParam.receiver"
|
dict="sys_user,realname,id,del_flag!=1"
|
/>
|
</a-form-item>
|
</a-col>
|
<a-col :md="6" :sm="8">
|
<a-form-item label="确认人">
|
<j-search-select-tag
|
v-model="queryParam.confirmer"
|
placeholder="请选择确认人"
|
dict="sys_user,realname,id,del_flag!=1"
|
/>
|
</a-form-item>
|
</a-col>
|
<!-- <a-col :md="6" :sm="8">-->
|
<!-- <a-form-item label="入库时间">-->
|
<!-- <j-date-->
|
<!-- v-model="queryParam.receiveTime"-->
|
<!-- type="date"-->
|
<!-- value-format="YYYY-MM-DD"-->
|
<!-- />-->
|
<!-- </a-form-item>-->
|
<!-- </a-col>-->
|
<a-col
|
:md="6"
|
:sm="8"
|
>
|
<span
|
style="float: left;overflow: hidden;"
|
class="table-page-search-submitButtons"
|
>
|
<a-button
|
type="primary"
|
@click="searchQuery"
|
icon="search"
|
>查询</a-button>
|
<a-button
|
type="primary"
|
@click="searchReset"
|
icon="reload"
|
style="margin-left: 8px"
|
>重置</a-button>
|
</span>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
<!-- 查询区域-END -->
|
|
<!-- 操作按钮区域 -->
|
<div class="table-operator">
|
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
<a-button type="primary" icon="download" @click="handleExportXls('刀具入库单')">导出</a-button>
|
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
|
<a-button type="primary" icon="import">导入</a-button>
|
</a-upload>
|
</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"
|
:columns="columns"
|
:dataSource="dataSource"
|
:pagination="ipagination"
|
:loading="loading"
|
class="j-table-force-nowrap"
|
:customRow="customRow"
|
@change="handleTableChange">
|
|
<template slot="htmlSlot" slot-scope="text">
|
<div v-html="text"></div>
|
</template>
|
<template slot="imgSlot" slot-scope="text,record">
|
<span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
|
<img v-else :src="getImgView(text)" :preview="record.id" 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 @click="handleEdit(record)" :disabled="record.orderStatus == '2'">编辑</a>
|
<a-divider type="vertical" />
|
<a-dropdown>
|
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
|
<a-menu slot="overlay">
|
<a-menu-item>
|
<a @click="handleDetail(record)">详情</a>
|
</a-menu-item>
|
<!-- <a-menu-item v-if="record.orderStatus != '2'">-->
|
<!-- <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
|
<!-- <a>删除</a>-->
|
<!-- </a-popconfirm>-->
|
<!-- </a-menu-item>-->
|
<a-menu-item v-if="record.orderStatus != '2'">
|
<a @click="handleSubmit(record.id)" :disabled="record.orderStatus == '3'">提交</a>
|
</a-menu-item>
|
<a-menu-item v-if="record.orderStatus != '2'">
|
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
<a>删除</a>
|
</a-popconfirm>
|
</a-menu-item>
|
</a-menu>
|
</a-dropdown>
|
</span>
|
|
</a-table>
|
</div>
|
<a-tabs defaultActiveKey="1">
|
<a-tab-pane tab="刀具入库明细" key="1">
|
<cutting-inbound-detail-list ref="cuttingInbounDetailList"></cutting-inbound-detail-list>
|
</a-tab-pane>
|
</a-tabs>
|
<cutting-inbound-modal ref="modalForm" @ok="modalFormOk"></cutting-inbound-modal>
|
</a-card>
|
</template>
|
|
|
|
|
<script>
|
|
import '@/assets/less/TableExpand.less'
|
import { mixinDevice } from '@/utils/mixin'
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import CuttingInboundModal from './modules/CuttingInboundModal'
|
import CuttingInboundDetailList from './CuttingInboundDetailList'
|
import { downFile, httpAction } from '@api/manage'
|
import Vue from 'vue'
|
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
import store from '@/store'
|
import { Modal } from 'ant-design-vue';
|
|
export default {
|
name: 'CuttingInboundList',
|
mixins:[JeecgListMixin, mixinDevice],
|
components: {
|
CuttingInboundModal,
|
CuttingInboundDetailList
|
},
|
data () {
|
return {
|
description: '刀具入库单管理页面',
|
// 表头
|
columns: [
|
{
|
title: '#',
|
dataIndex: '',
|
key:'rowIndex',
|
width:60,
|
align:"center",
|
customRender:function (t,r,index) {
|
return parseInt(index)+1;
|
}
|
},
|
{
|
title:'入库人',
|
align:"center",
|
dataIndex: 'receiver_dictText'
|
},
|
{
|
title:'入库时间',
|
align:"center",
|
dataIndex: 'receiveTime',
|
customRender:function (text) {
|
return !text?"":(text.length>10?text.substr(0,10):text)
|
}
|
},
|
{
|
title:'入库说明',
|
align:"center",
|
dataIndex: 'receiveComment'
|
},
|
{
|
title:'确认人',
|
align:"center",
|
dataIndex: 'confirmer_dictText'
|
},
|
{
|
title:'确认时间',
|
align:"center",
|
dataIndex: 'confirmTime',
|
customRender:function (text) {
|
return !text?"":(text.length>10?text.substr(0,10):text)
|
}
|
},
|
{
|
title:'确认意见',
|
align:"center",
|
dataIndex: 'confirmComment'
|
},
|
{
|
title:'入库单状态',
|
align:"center",
|
dataIndex: 'orderStatus_dictText',
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
align:"center",
|
fixed:"right",
|
width:147,
|
scopedSlots: { customRender: 'action' }
|
}
|
],
|
url: {
|
list: "/cms/cuttingInbound/list",
|
delete: "/cms/cuttingInbound/delete",
|
deleteBatch: "/cms/cuttingInbound/deleteBatch",
|
exportXlsUrl: "/cms/cuttingInbound/exportXls",
|
importExcelUrl: "cms/cuttingInbound/importExcel",
|
submit: "/cms/cuttingInbound/submit",
|
},
|
dictOptions:{},
|
superFieldList:[],
|
}
|
},
|
created() {
|
this.getSuperFieldList();
|
// 添加字典数据加载
|
this.initDictConfig();
|
},
|
computed: {
|
importExcelUrl: function(){
|
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
},
|
},
|
methods: {
|
searchQuery() {
|
this.loadData(1);
|
},
|
searchReset() {
|
this.queryParam = {}
|
this.$refs.cuttingInbounDetailList.dataSource = []
|
this.loadData(1);
|
},
|
handleEdit: function (record) {
|
this.$refs.modalForm.edit(record)
|
this.$refs.modalForm.title = '编辑'
|
this.$refs.modalForm.disableSubmit = false
|
},
|
handleAdd() {
|
this.$refs.modalForm.add()
|
this.$refs.modalForm.title = '新增'
|
this.$refs.modalForm.disableSubmit = false
|
},
|
handleDetail:function(record){
|
this.$refs.modalForm.edit(record);
|
this.$refs.modalForm.title="详情";
|
this.$refs.modalForm.disableSubmit = true;
|
},
|
|
// 自定义行点击事件
|
customRow(record) {
|
return {
|
on: {
|
click: (e) => {
|
//将当前选中的记录传到子页面
|
this.$bus.$emit('getToolingStorageData', record)
|
//点击当前行变色
|
let oldList = document.querySelectorAll('.checked-td-of-add-table')
|
if (oldList) {
|
for (let j = 0; j < oldList.length; j++) {
|
oldList[j].classList.remove('checked-td-of-add-table')
|
}
|
}
|
let children = e.target.parentNode.children
|
for (let i = 0; i < children.length; i++) {
|
children[i].classList.add('checked-td-of-add-table')
|
}
|
},
|
},
|
}
|
},
|
|
handleExportXls(fileName){
|
if(!fileName || typeof fileName != "string"){
|
fileName = "导出文件"
|
}
|
let param = this.getQueryParams();
|
if(this.selectedRowKeys && this.selectedRowKeys.length>0){
|
param['selections'] = this.selectedRowKeys.join(",")
|
}
|
console.log("导出参数",param)
|
downFile(this.url.exportXlsUrl,param).then((data)=>{
|
if (!data) {
|
// this.$message.warning("文件下载失败")
|
this.$notification.warning({
|
message:'消息',
|
description:"文件下载失败"
|
});
|
return
|
}
|
if (typeof window.navigator.msSaveBlob !== 'undefined') {
|
window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')
|
}else{
|
let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
|
let link = document.createElement('a')
|
link.style.display = 'none'
|
link.href = url
|
link.setAttribute('download', fileName+'.xls')
|
document.body.appendChild(link)
|
link.click()
|
document.body.removeChild(link); //下载完成移除元素
|
window.URL.revokeObjectURL(url); //释放掉blob对象
|
}
|
})
|
},
|
|
/* 导入 */
|
handleImportExcel(info){
|
this.loading = true;
|
if (info.file.status !== 'uploading') {
|
console.log(info.file, info.fileList);
|
}
|
if (info.file.status === 'done') {
|
this.loading = false;
|
if (info.file.response.success) {
|
// this.$message.success(`${info.file.name} 文件上传成功`);
|
if (info.file.response.code === 201) {
|
let { message, result: { msg, fileUrl, fileName } } = info.file.response
|
let href = window._CONFIG['domianURL'] + fileUrl
|
this.$warning({
|
title: message,
|
content: (<div>
|
<span>{msg}</span><br/>
|
<span>具体详情请 <a href={href} target="_blank" download={fileName}>点击下载</a> </span>
|
</div>
|
)
|
})
|
} else {
|
// this.$message.success(info.file.response.message || `${info.file.name} 文件上传成功`)
|
this.$notification.success({
|
message:'消息',
|
description:info.file.response.message || `${info.file.name} 文件上传成功`
|
});
|
}
|
this.loadData()
|
} else {
|
// this.$message.error(`${info.file.name} ${info.file.response.message}.`);
|
this.$notification.error({
|
message:'消息',
|
description:`${info.file.name} ${info.file.response.message}.`
|
});
|
}
|
} else if (info.file.status === 'error') {
|
this.loading = false;
|
if (info.file.response.status === 500) {
|
let data = info.file.response
|
const token = Vue.ls.get(ACCESS_TOKEN)
|
if (token && data.message.includes("Token失效")) {
|
this.$error({
|
title: '登录已过期',
|
content: '很抱歉，登录已过期，请重新登录',
|
okText: '重新登录',
|
mask: false,
|
onOk: () => {
|
store.dispatch('Logout').then(() => {
|
Vue.ls.remove(ACCESS_TOKEN)
|
window.location.reload();
|
})
|
}
|
})
|
}
|
} else {
|
// this.$message.error(`文件上传失败: ${info.file.msg} `);
|
this.$notification.error({
|
message:'消息',
|
description:`文件上传失败: ${info.file.msg} `
|
});
|
}
|
}
|
},
|
|
/**
|
* 单据提交
|
*/
|
handleSubmit: function(id) {
|
if (!this.url.submit) {
|
this.$message.error('请设置url.submit属性!')
|
return
|
}
|
|
let targetId = id; // 从参数获取ID
|
// 如果没有通过参数传递ID，则检查选中的记录
|
if (!targetId) {
|
if (this.selectedRowKeys.length != 1) {
|
this.$message.warning('请选择一条记录！')
|
return
|
} else {
|
targetId = this.selectedRowKeys[0]
|
}
|
}
|
|
// 将参数作为查询参数附加到URL上
|
let httpurl = this.url.submit + '?orderId=' + encodeURIComponent(targetId)
|
let method = 'get'
|
var params = {} // 清空params，因为参数已经在URL中传递
|
|
const that = this
|
|
this.$confirm({
|
title: '确认提交！',
|
// content: '正在提交数据，请耐心等待...',
|
okText: '确认',
|
cancelText: '取消',
|
onOk() {
|
// 显示加载提示
|
const hide = that.$message.loading('正在提交数据，请耐心等待...', 0);
|
|
// 发送请求
|
return httpAction(httpurl, params, method).then((res) => {
|
hide(); // 隐藏加载提示
|
if (res.success) {
|
that.$message.success(res.message)
|
that.loadData()
|
} else {
|
that.$message.warning(res.message)
|
}
|
}).catch(error => {
|
hide(); // 隐藏加载提示
|
that.$message.error('提交失败: ' + error.message)
|
}).finally(() => {
|
that.loading = false
|
})
|
}
|
})
|
},
|
|
// /**
|
// * 单据提交（支持实时进度更新）
|
// */
|
// handleSubmit: function(id) {
|
// if (!this.url.submit) {
|
// this.$message.error('请设置url.submit属性!')
|
// return
|
// }
|
//
|
// let targetId = id; // 从参数获取ID
|
// // 如果没有通过参数传递ID，则检查选中的记录
|
// if (!targetId) {
|
// if (this.selectedRowKeys.length != 1) {
|
// this.$message.warning('请选择一条记录！')
|
// return
|
// } else {
|
// targetId = this.selectedRowKeys[0]
|
// }
|
// }
|
//
|
// const that = this
|
//
|
// this.$confirm({
|
// title: '确认提交！',
|
// content: '提交过程中可能需要较长时间，请耐心等待...',
|
// okText: '确认',
|
// cancelText: '取消',
|
//
|
// onOk() {
|
// // 创建进度条模态框
|
// let percent = 0;
|
// let totalTools = 0; // 刀具总数
|
// let processedTools = 0; // 已处理刀具数
|
//
|
// // 使用 this.$info 创建模态框
|
// const modal = that.$info({
|
// title: '正在提交数据',
|
// content: that.$createElement('div', [
|
// that.$createElement('p', '正在处理刀具入库，请稍候...'),
|
// that.$createElement('a-progress', {
|
// props: {
|
// percent: percent,
|
// status: 'active'
|
// }
|
// }),
|
// // that.$createElement('p', {
|
// // style: {
|
// // marginTop: '10px'
|
// // }
|
// // }, `进度: ${processedTools}/${totalTools} 把刀具`)
|
// ]),
|
// okButtonProps: { style: { display: 'none' } }, // 隐藏确认按钮
|
// cancelText: '取消',
|
// closable: false, // 禁止关闭模态框
|
// });
|
//
|
// // 更新进度显示函数
|
// const updateProgress = () => {
|
// if (totalTools > 0) {
|
// percent = Math.round((processedTools / totalTools) * 100);
|
// // 确保进度不超过90%，保留最后10%给最终完成
|
// percent = percent > 90 ? 90 : percent;
|
// }
|
//
|
// modal.update({
|
// content: that.$createElement('div', [
|
// that.$createElement('p', '正在处理刀具入库，请稍候...'),
|
// that.$createElement('a-progress', {
|
// props: {
|
// percent: percent,
|
// status: 'active'
|
// }
|
// }),
|
// // that.$createElement('p', {
|
// // style: {
|
// // marginTop: '10px'
|
// // }
|
// // }, `进度: ${processedTools}/${totalTools} 把刀具`)
|
// ])
|
// });
|
// };
|
//
|
// // 发送请求
|
// let httpurl = that.url.submit + '?orderId=' + encodeURIComponent(targetId)
|
//
|
// return httpAction(httpurl, {}, 'get').then((res) => {
|
// // 根据后端返回的总刀具数设置进度
|
// if (res.success) {
|
// // 如果后端返回了总刀具数
|
// if (res.result && res.result.quantity !== undefined) {
|
// totalTools = res.result.quantity;
|
// processedTools = res.result.totalSubmitted || 0; //已处理刀具数
|
// }
|
// // 如果后端返回了明细列表，根据receive_number计算总数量
|
// else if (res.result && res.result.detailList) {
|
// // 根据每个明细的receive_number累加计算总刀具数
|
// totalTools = res.result.detailList.reduce((total, detail) => {
|
// return total + (detail.receiveNumber || 0);
|
// }, 0);
|
// processedTools = totalTools; // 已处理数量
|
// }
|
//
|
// // 更新进度显示
|
// percent = 100; // 直接显示100%完成
|
// updateProgress();
|
//
|
// // 显示完成状态
|
// setTimeout(() => {
|
// modal.update({
|
// content: that.$createElement('div', [
|
// that.$createElement('p', '正在处理刀具入库，请稍候...'),
|
// that.$createElement('a-progress', {
|
// props: {
|
// percent: percent,
|
// status: 'success'
|
// }
|
// }),
|
// that.$createElement('p', {
|
// style: {
|
// marginTop: '10px'
|
// }
|
// }, totalTools > 0 ?
|
// `进度: ${processedTools}/${totalTools} 把刀具` :
|
// '处理完成')
|
// ])
|
// });
|
//
|
// // 延迟关闭模态框
|
// setTimeout(() => {
|
// modal.destroy();
|
// that.$message.success(res.message || '提交成功');
|
// that.loadData();
|
// }, 500);
|
// }, 300);
|
// } else {
|
// // 处理错误情况
|
// modal.destroy();
|
// that.$message.warning(res.message || '提交失败');
|
// }
|
// }).catch(error => {
|
// modal.destroy();
|
// that.$message.error('提交失败: ' + error.message)
|
// }).finally(() => {
|
// that.loading = false
|
// })
|
// }
|
// })
|
// },
|
|
|
}
|
}
|
</script>
|
<style scoped>
|
@import '~@assets/less/common.less';
|
</style>
|
