574 lines
20 KiB
Vue
574 lines
20 KiB
Vue
<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>仅允许导入xls、xlsx格式文件。</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>
|