<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="utf-8">
|
<title>委外加工出库单管理</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<link rel="stylesheet" href="../../static/evn/index.css">
|
</head>
|
|
<body>
|
<div id="app">
|
<el-card>
|
<!-- 搜索表单 -->
|
<el-form :inline="true">
|
<el-form-item label="供应商">
|
<el-input v-model="tableSearchParam.venName" placeholder="请输入供应商名称"></el-input>
|
</el-form-item>
|
<el-form-item label="物料编码">
|
<el-input v-model="tableSearchParam.invCode" placeholder="请输入物料编码"></el-input>
|
</el-form-item>
|
<el-form-item label="物料名称">
|
<el-input v-model="tableSearchParam.invName" placeholder="请输入物料名称"></el-input>
|
</el-form-item>
|
<el-form-item label="">
|
<el-button type="primary" @click="search" circle>
|
<el-icon>
|
<Search />
|
</el-icon>
|
</el-button>
|
<el-button @click="reset" circle style="margin-left: 10px">
|
<el-icon>
|
<Refresh />
|
</el-icon>
|
</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!-- 工具栏 -->
|
<el-form :inline="true" style="display: none;">
|
<el-form-item label="">
|
<el-button type="danger" @click="selectDelete">删除</el-button>
|
<el-button type="success" @click="exportData">导出</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!-- 数据表格 -->
|
<el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange"
|
max-height="550">
|
<el-table-column type="selection"></el-table-column>
|
<el-table-column type="index" width="50"></el-table-column>
|
<el-table-column prop="venName" label="供应商" width="150"
|
:show-overflow-tooltip="true"></el-table-column>
|
<el-table-column prop="invCode" label="物料编码" width="120"
|
:show-overflow-tooltip="true"></el-table-column>
|
<el-table-column prop="invName" label="物料名称" width="200"
|
:show-overflow-tooltip="true"></el-table-column>
|
<el-table-column prop="invStd" label="规格型号" width="150"
|
:show-overflow-tooltip="true"></el-table-column>
|
<el-table-column prop="unit" label="单位" width="80"></el-table-column>
|
<el-table-column prop="whName" label="仓库名称" width="120"></el-table-column>
|
<el-table-column prop="dateStart$" label="开工日期" width="120"></el-table-column>
|
<el-table-column prop="dateEnd$" label="完成日期" width="120"></el-table-column>
|
<el-table-column prop="fqty" label="应发数量" width="100">
|
<template #default="scope">
|
{{ scope.row.fqty || scope.row.qty || 0 }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="qqty" label="期初数量" width="100">
|
<template #default="scope">
|
{{ scope.row.qqty || 0 }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="yqty" label="已发数量" width="100">
|
<template #default="scope">
|
{{ scope.row.yqty || 0 }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="wqty" label="未发数量" width="100">
|
<template #default="scope">
|
{{ scope.row.wqty || 0 }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="outQty" label="已出库数量" width="110">
|
<template #default="scope">
|
<span :style="{ color: scope.row.outQty > 0 ? 'green' : 'gray' }">
|
{{ scope.row.outQty || 0 }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="remainQty" label="剩余数量" width="110">
|
<template #default="scope">
|
<span :style="{ color: scope.row.remainQty > 0 ? 'orange' : 'green' }">
|
{{ scope.row.remainQty || 0 }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="isAllOut" label="出库状态" width="100">
|
<template #default="scope">
|
<el-tag v-if="scope.row.isAllOut == 1" type="success">已完成</el-tag>
|
<el-tag v-else type="warning">未完成</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="izSync" label="是否同步" width="100">
|
<template #default="scope">
|
<el-tag v-if="scope.row.izSync == '是'" type="success">已同步</el-tag>
|
<el-tag v-else type="info">未同步</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="izPrint" label="是否打印" width="100">
|
<template #default="scope">
|
<el-tag v-if="scope.row.izPrint == '是'" type="success">已打印</el-tag>
|
<el-tag v-else type="info">未打印</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="syncTime$" label="同步时间" width="160"></el-table-column>
|
<el-table-column prop="createTime$" label="创建时间" width="160"></el-table-column>
|
<el-table-column prop="updateTime$" label="更新时间" width="160"></el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<div style="margin-top: 10px">
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
:current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
|
</el-pagination>
|
</div>
|
</el-card>
|
</div>
|
|
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
|
<script src="../../static/evn/vue.global.js"></script>
|
<script src="../../static/evn/element-plus.js"></script>
|
<script src="../../static/evn/icons-vue.js"></script>
|
<script type="module">
|
// 导入中文语言包
|
import zhCn from '../../static/evn/zh-cn.js';
|
|
const { createApp, ref } = Vue;
|
|
const app = createApp({
|
setup() {
|
const currentPage = ref(1)
|
const pageSizes = ref([15, 20, 30, 50, 100, 200])
|
const pageSize = ref(15)
|
const pageTotal = ref(0)
|
const tableSearchParam = ref({
|
venName: null,
|
invCode: null,
|
invName: null
|
})
|
const tableData = ref([])
|
const selectList = ref([])
|
|
function handleSelectionChange(selection) {
|
selectList.value = selection
|
}
|
|
function handleSizeChange(val) {
|
pageSize.value = val
|
search()
|
}
|
|
function handleCurrentChange(val) {
|
currentPage.value = val
|
search()
|
}
|
|
function search() {
|
const loading = ElementPlus.ElLoading.service({
|
lock: true,
|
text: 'Loading',
|
background: 'rgba(0, 0, 0, 0.7)',
|
})
|
let data = JSON.parse(JSON.stringify(tableSearchParam.value))
|
data.curr = currentPage.value
|
data.limit = pageSize.value
|
// 移除空值
|
Object.keys(data).forEach(key => {
|
if (data[key] === null || data[key] === '' || data[key] === undefined) {
|
delete data[key]
|
}
|
})
|
$.ajax({
|
url: baseUrl + "/materialWwOut/list/auth",
|
headers: { 'token': localStorage.getItem('token') },
|
data: data,
|
dataType: 'json',
|
method: 'GET',
|
success: function (res) {
|
if (res.code == 200) {
|
tableData.value = res.data.records || []
|
pageTotal.value = res.data.total || 0
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + "/";
|
} else {
|
ElementPlus.ElMessage({ message: res.msg, type: 'error' });
|
}
|
},
|
complete: function () {
|
loading.close()
|
}
|
});
|
}
|
|
function selectDelete() {
|
if (selectList.value.length === 0) {
|
ElementPlus.ElMessage({
|
message: "请先选择要删除的数据",
|
type: 'warning'
|
});
|
return;
|
}
|
ElementPlus.ElMessageBox.confirm('确定要删除选中的数据吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const loading = ElementPlus.ElLoading.service({
|
lock: true,
|
text: '删除中...',
|
background: 'rgba(0, 0, 0, 0.7)',
|
})
|
$.ajax({
|
url: baseUrl + "/materialWwOut/delete/auth",
|
headers: { 'token': localStorage.getItem('token') },
|
data: {
|
param: JSON.stringify(selectList.value)
|
},
|
dataType: 'json',
|
method: 'POST',
|
success: function (res) {
|
if (res.code == 200) {
|
ElementPlus.ElMessage({
|
message: "删除成功",
|
type: 'success'
|
});
|
search()
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + "/";
|
} else {
|
ElementPlus.ElMessage({ message: res.msg, type: 'error' });
|
}
|
},
|
complete: function () {
|
loading.close()
|
}
|
});
|
}).catch(() => {
|
// 取消
|
});
|
}
|
|
function reset() {
|
tableSearchParam.value = {
|
venName: null,
|
invCode: null,
|
invName: null
|
}
|
currentPage.value = 1
|
search()
|
}
|
|
function exportData() {
|
if (selectList.value.length === 0) {
|
ElementPlus.ElMessage({
|
message: "请先选择要导出的数据",
|
type: 'warning'
|
});
|
return;
|
}
|
// 构建导出数据
|
const exportData = selectList.value.map(item => ({
|
venName: item.venName || '',
|
invCode: item.invCode || '',
|
invName: item.invName || '',
|
invStd: item.invStd || '',
|
unit: item.unit || '',
|
whName: item.whName || '',
|
dateStart: item.dateStart$ || '',
|
dateEnd: item.dateEnd$ || '',
|
fqty: item.fqty || item.qty || 0,
|
qqty: item.qqty || 0,
|
yqty: item.yqty || 0,
|
wqty: item.wqty || 0,
|
outQty: item.outQty || 0,
|
remainQty: item.remainQty || 0,
|
isAllOut: item.isAllOut == 1 ? '已完成' : '未完成',
|
izSync: item.izSync || '否',
|
izPrint: item.izPrint || '否',
|
syncTime: item.syncTime$ || '',
|
createTime: item.createTime$ || '',
|
updateTime: item.updateTime$ || ''
|
}));
|
|
// 转换为CSV格式
|
const headers = ['供应商', '物料编码', '物料名称', '规格型号', '单位', '仓库名称', '开工日期', '完成日期', '应发数量', '期初数量', '已发数量', '未发数量', '已出库数量', '剩余数量', '出库状态', '是否同步', '是否打印', '同步时间', '创建时间', '更新时间'];
|
const csvContent = [
|
headers.join(','),
|
...exportData.map(row => [
|
row.venName,
|
row.invCode,
|
row.invName,
|
row.invStd,
|
row.unit,
|
row.whName,
|
row.dateStart,
|
row.dateEnd,
|
row.fqty,
|
row.qqty,
|
row.yqty,
|
row.wqty,
|
row.outQty,
|
row.remainQty,
|
row.isAllOut,
|
row.izSync,
|
row.izPrint,
|
row.syncTime,
|
row.createTime,
|
row.updateTime
|
].map(cell => `"${cell}"`).join(','))
|
].join('\n');
|
|
// 下载文件
|
const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
|
const link = document.createElement('a');
|
const url = URL.createObjectURL(blob);
|
link.setAttribute('href', url);
|
link.setAttribute('download', '委外加工出库单数据_' + new Date().getTime() + '.csv');
|
link.style.visibility = 'hidden';
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
|
ElementPlus.ElMessage({
|
message: "导出成功",
|
type: 'success'
|
});
|
}
|
|
// 初始化加载
|
search()
|
|
return {
|
currentPage,
|
pageSizes,
|
pageSize,
|
pageTotal,
|
tableSearchParam,
|
tableData,
|
selectList,
|
handleSelectionChange,
|
handleSizeChange,
|
handleCurrentChange,
|
search,
|
reset,
|
selectDelete,
|
exportData
|
}
|
}
|
})
|
|
// 配置Element Plus中文语言包
|
app.use(ElementPlus, {
|
locale: zhCn
|
})
|
|
// 注册所有图标组件
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
app.component(key, component)
|
}
|
|
app.mount('#app')
|
</script>
|
</body>
|
|
</html>
|
