Files
shzg_projectManage/src/views/query - 副本/jh/index.vue

574 lines
20 KiB
Vue
Raw Normal View History

2026-01-20 16:56:01 +08:00
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
<!-- <el-form-item label="县局" prop="xj">
<el-input
v-model="queryParams.xj"
placeholder="请输入县局"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item> -->
<el-form-item label="项目号" prop="xmNo">
<el-input
v-model="queryParams.xmNo"
placeholder="请输入项目号"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="项目描述" prop="xmMs">
<el-input
v-model="queryParams.xmMs"
placeholder="请输入项目描述"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="物料号" prop="wlNo">
<el-input
v-model="queryParams.wlNo"
placeholder="请输入物料号"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="物料描述" prop="wlMs">
<el-input
v-model="queryParams.wlMs"
placeholder="请输入物料描述"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="供应商编码" prop="gysNo">
<el-input
v-model="queryParams.gysNo"
placeholder="请输入供应商编码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item> -->
<el-form-item label="供应商名称" prop="gysMc">
<el-input
v-model="queryParams.gysMc"
placeholder="请输入供应商名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="Plus"
@click="handleAdd"
v-hasPermi="['query:jh:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="Edit"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['query:jh:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['query:jh:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="Upload"
@click="handleImport"
v-hasPermi="['query:jh:import']"
>导入供应计划</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['query:jh:export']">导出供应计划</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="Upload"
@click="handlePrint"
v-print="printViewInfo"
>打印</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- @selection-change="handleSelectionChange" -->
<el-table v-loading="loading" :data="jhList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="县局" align="center" prop="xj" /> -->
<el-table-column label="项目号" align="center" prop="xmNo" />
<el-table-column label="项目描述" align="center" prop="xmMs" />
<el-table-column label="物料号" align="center" prop="wlNo" />
<el-table-column label="物料描述" align="center" prop="wlMs" />
<el-table-column label="供应商编码" align="center" prop="gysNo" />
<el-table-column label="供应商名称" align="center" prop="gysMc" />
<el-table-column label="计划交货金额" align="center" prop="jhAmt" />
<el-table-column label="合同单价" align="center" prop="htDj" />
<el-table-column label="SAP订单编号" align="center" prop="sapNo" />
<el-table-column label="行号" align="center" prop="xh" />
<el-table-column label="计划交货数量" align="center" prop="jhQty" />
<el-table-column label="合同数量" align="center" prop="htQty" />
<el-table-column label="计量单位" align="center" prop="dw" />
<!-- <el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="是否删除" align="center" prop="isDelete" /> -->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['query:jh:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['query:jh:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 打印 -->
<div id="printMe" class="printMeBox" v-show="showContent">
<div class="titleBox">
<div>项目编号{{ printList.length>0 ? printList[0].xmNo:"" }}</div>
<div>项目描述{{ printList.length>0 ? printList[0].xmMs:"" }}</div>
<!-- <img :src="qrcodeDataURL" alt="二维码" /> -->
</div>
<el-col :span="24" class="card-box">
<!-- <el-collapse > -->
<div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%;">
<thead>
<tr>
<th class="el-table__cell is-leaf"><div class="cell">订单号</div></th>
<th class="el-table__cell is-leaf"><div class="cell">二维码</div></th>
<th class="el-table__cell is-leaf"><div class="cell">供应商名称</div></th>
</tr>
</thead>
<tbody>
<tr v-for="item in printList" :key="item.id">
<td class="el-table__cell is-leaf"><div class="cell">{{ item.sapNo }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" ><qrcode-vue :value="item.sapNo" :size="60" level="H"></qrcode-vue></div></td>
<td class="el-table__cell is-leaf"><div class="cell" >{{ item.gysMc }}</div></td>
</tr>
<!-- <tr>
<td class="el-table__cell is-leaf"><div class="cell">已用库位</div></td>
<td class="el-table__cell is-leaf"><div class="cell" >89</div></td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">可用库位</div></td>
<td class="el-table__cell is-leaf"><div class="cell" >20</div></td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
<td class="el-table__cell is-leaf"><div class="cell" >20%</div></td>
</tr> -->
</tbody>
</table>
</div>
<!-- </el-collapse> -->
</el-col>
</div>
<!-- 添加或修改供应计划对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="jhRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="县局" prop="xj">
<el-input v-model="form.xj" placeholder="请输入县局" />
</el-form-item>
<el-form-item label="项目号" prop="xmNo">
<el-input v-model="form.xmNo" placeholder="请输入项目号" />
</el-form-item>
<el-form-item label="项目描述" prop="xmMs">
<el-input v-model="form.xmMs" placeholder="请输入项目描述" />
</el-form-item>
<el-form-item label="物料号" prop="wlNo">
<el-input v-model="form.wlNo" placeholder="请输入物料号" />
</el-form-item>
<el-form-item label="物料描述" prop="wlMs">
<el-input v-model="form.wlMs" placeholder="请输入物料描述" />
</el-form-item>
<el-form-item label="供应商编码" prop="gysNo">
<el-input v-model="form.gysNo" placeholder="请输入供应商编码" />
</el-form-item>
<el-form-item label="供应商名称" prop="gysMc">
<el-input v-model="form.gysMc" placeholder="请输入供应商名称" />
</el-form-item>
<el-form-item label="计划交货金额" prop="jhAmt">
<el-input v-model="form.jhAmt" placeholder="请输入计划交货金额" />
</el-form-item>
<el-form-item label="合同单价" prop="htDj">
<el-input v-model="form.htDj" placeholder="请输入合同单价" />
</el-form-item>
<el-form-item label="SAP订单编号" prop="sapNo">
<el-input v-model="form.sapNo" placeholder="请输入SAP订单编号" />
</el-form-item>
<el-form-item label="行号" prop="xh">
<el-input v-model="form.xh" placeholder="请输入行号" />
</el-form-item>
<el-form-item label="计划交货数量" prop="jhQty">
<el-input v-model="form.jhQty" placeholder="请输入计划交货数量" />
</el-form-item>
<el-form-item label="合同数量" prop="htQty">
<el-input v-model="form.htQty" placeholder="请输入合同数量" />
</el-form-item>
<el-form-item label="计量单位" prop="dw">
<el-input v-model="form.dw" placeholder="请输入计量单位" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<!-- <el-form-item label="是否删除" prop="isDelete">
<el-input v-model="form.isDelete" placeholder="请输入是否删除" />
</el-form-item> -->
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
<!-- 导入对话框 -->
<el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
<el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<template #tip>
<div class="el-upload__tip text-center">
<!-- <div class="el-upload__tip">
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
</div> -->
<span>仅允许导入xlsxlsx格式文件</span>
<!-- <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> -->
</div>
</template>
</el-upload>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitFileForm"> </el-button>
<el-button @click="upload.open = false"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Jh">
// import { getToken } from "@/utils/auth";
// import { listJh, getJh, delJh, addJh, updateJh } from "@/api/query/jh";
// //生成二维码
// import QrcodeVue from 'qrcode.vue';
// const { proxy } = getCurrentInstance();
// const jhList = ref([]);
// const open = ref(false);
// const loading = ref(true);
// const showSearch = ref(true);
// const ids = ref([]);
// const single = ref(true);
// const multiple = ref(true);
// const total = ref(0);
// const title = ref("");
// const printList = ref([]);
// const showContent = ref(false); // 控制打印内容是否显示
// // const qrcodeDataURL = ref("")
// //文件上传--供应计划导入
// const upload = reactive({
// // 是否显示弹出层(用户导入)
// open: false,
// // 弹出层标题(用户导入)
// title: "",
// // 是否禁用上传
// isUploading: false,
// // 是否更新已经存在的用户数据
// updateSupport: 0,
// // 设置上传的请求头部
// headers: { Authorization: "Bearer " + getToken() },
// // 上传的地址
// url: import.meta.env.VITE_APP_BASE_API + "/query/jh/import"
// });
// const data = reactive({
// form: {},
// queryParams: {
// pageNum: 1,
// pageSize: 10,
// // xj: null,
// xmNo: null, //项目号
// xmMs: null, //项目描述
// wlNo: null, //物料号
// wlMs: null, //物料描述
// // gysNo: null,
// gysMc: null, //gysMc
// // jhAmt: null,
// // htDj: null,
// // sapNo: null,
// // xh: null,
// // jhQty: null,
// // htQty: null,
// // dw: null,
// // isDelete: null
// },
// rules: {
// },
// printViewInfo: {
// id: "printMe", //打印区域的唯一的id属性
// popTitle: '入库信息打印', // 页眉文字 不设置时显示undifined页眉页脚可以在打印页面的更多设置的选项中取消勾选
// beforeOpenCallback () {
// showContent.value = false;
// }, // 开始打印之前的callback
// openCallback () { }, // 调用打印时的callback
// closeCallback () { }, // 关闭打印的callback(无法区分确认or取消)
// clickMounted () { },
// standard: '',
// extarCss: ''
// },
// // printOption: {
// // id: 'printMe', // 打印元素的id 不需要携带#号
// // popTitle: '员工信息' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
// // },
// });
// const { queryParams, form, rules,printViewInfo } = toRefs(data);
// /** 查询供应计划列表 */
// function getList() {
// loading.value = true;
// listJh(queryParams.value).then(response => {
// jhList.value = response.rows;
// total.value = response.total;
// loading.value = false;
// });
// }
// // 取消按钮
// function cancel() {
// open.value = false;
// reset();
// }
// // 表单重置
// function reset() {
// form.value = {
// id: null,
// xj: null,
// xmNo: null,
// xmMs: null,
// wlNo: null,
// wlMs: null,
// gysNo: null,
// gysMc: null,
// jhAmt: null,
// htDj: null,
// sapNo: null,
// xh: null,
// jhQty: null,
// htQty: null,
// dw: null,
// remark: null,
// createBy: null,
// createTime: null,
// updateBy: null,
// updateTime: null,
// isDelete: null
// };
// proxy.resetForm("jhRef");
// }
// /** 搜索按钮操作 */
// function handleQuery() {
// queryParams.value.pageNum = 1;
// getList();
// }
// /** 重置按钮操作 */
// function resetQuery() {
// proxy.resetForm("queryRef");
// handleQuery();
// }
// // 多选框选中数据
// function handleSelectionChange(selection) {
// // qrcodeDataURL.value = "101293361"
// // console.log(selection)
// // let sapNo = "101293360"
// // let width = 200
// // let height = 200
// // let correctLevel = 'M'
// // QRCode.toDataURL({
// // sapNo,
// // width,
// // height,
// // correctLevel
// // }).then((url) => {
// // qrcodeDataURL.value = url
// // }).catch((error) => {
// // console.error(error)
// // })
// // printList.value = selection.map(item=>({
// // sapNo:item.sapNo,
// // gysMc:item.gysMc,
// // id:item.id
// // }))
// ids.value = selection.map(item => item.id);
// single.value = selection.length != 1;
// multiple.value = !selection.length;
// printList.value = selection
// // let printListData =
// // for(let i=0;i<selection.length;i++){
// // let sapNo = selection[i].sapNo
// // let width = 200
// // let height = 200
// // let correctLevel = 'M'
// // QRCode.toDataURL({
// // sapNo,
// // width,
// // height,
// // correctLevel
// // }).then((url) => {
// // this.qrcodeDataURL = url
// // }).catch((error) => {
// // console.error(error)
// // })
// // }
// }
// /** 新增按钮操作 */
// function handleAdd() {
// reset();
// open.value = true;
// title.value = "添加供应计划";
// }
// /** 修改按钮操作 */
// function handleUpdate(row) {
// reset();
// const _id = row.id || ids.value
// getJh(_id).then(response => {
// form.value = response.data;
// open.value = true;
// title.value = "修改供应计划";
// });
// }
// /** 提交按钮 */
// function submitForm() {
// proxy.$refs["jhRef"].validate(valid => {
// if (valid) {
// if (form.value.id != null) {
// updateJh(form.value).then(response => {
// proxy.$modal.msgSuccess("修改成功");
// open.value = false;
// getList();
// });
// } else {
// addJh(form.value).then(response => {
// proxy.$modal.msgSuccess("新增成功");
// open.value = false;
// getList();
// });
// }
// }
// });
// }
// /** 删除按钮操作 */
// function handleDelete(row) {
// const _ids = row.id || ids.value;
// proxy.$modal.confirm('是否确认删除供应计划编号为"' + _ids + '"的数据项?').then(function() {
// return delJh(_ids);
// }).then(() => {
// getList();
// proxy.$modal.msgSuccess("删除成功");
// }).catch(() => {});
// }
// /** 导出按钮操作 */
// function handleExport() {
// proxy.download('query/jh/export', {
// ...queryParams.value
// }, `jh_${new Date().getTime()}.xlsx`)
// }
// function handleImport() {
// upload.title = "供应计划导入";
// upload.open = true;
// };
// /**文件上传中处理 */
// const handleFileUploadProgress = (event, file, fileList) => {
// upload.isUploading = true;
// };
// /** 文件上传成功处理 */
// const handleFileSuccess = (response, file, fileList) => {
// upload.open = false;
// upload.isUploading = false;
// proxy.$refs["uploadRef"].handleRemove(file);
// proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
// getList();
// };
// /** 提交上传文件 */
// function submitFileForm() {
// proxy.$refs["uploadRef"].submit();
// };
// // 打印
// function handlePrint(){
// showContent.value = true;
// // setTimeout(() => {
// // showContent.value = false;
// // }, 300)
// // Print.print('printMe');
// // showContent.value = false;
// }
// getList();
</script>
<style scoped lang="scss">
.app-container{
.printMeBox{
}
}
.titleBox{
margin-bottom: 20px;
}
@media print {
@page {
size: auto;
margin: 10mm;
}
}
</style>