317 lines
13 KiB
Vue
317 lines
13 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form ref="queryRef" :model="queryParams" :inline="true">
|
|
<el-form-item label="托盘编码" prop="palletCode">
|
|
<el-input v-model="queryParams.palletCode" placeholder="请输入托盘编码" clearable maxlength="64" @keyup.enter="handleQuery" />
|
|
</el-form-item>
|
|
<el-form-item label="资产状态" prop="assetStatus">
|
|
<el-select v-model="queryParams.assetStatus" placeholder="请选择资产状态" clearable style="width: 160px">
|
|
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="Search" @click="handleQuery" v-hasPermi="['master:pallet:list']">搜索</el-button>
|
|
<el-button icon="Refresh" @click="resetQuery" v-hasPermi="['master:pallet:list']">重置</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="['master:pallet:add']">新增</el-button></el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
v-if="proxy.$auth.hasPermiAnd(['master:pallet:query', 'master:pallet:edit'])"
|
|
type="success" plain icon="Edit" :disabled="single || detailLoading" :loading="detailLoading"
|
|
@click="handleUpdate()" v-hasPermi="['master:pallet:edit']"
|
|
>修改</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5"><el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['master:pallet:remove']">删除</el-button></el-col>
|
|
</el-row>
|
|
|
|
<el-alert v-if="loadError" :title="loadError" type="error" :closable="false" show-icon class="mb8" />
|
|
<el-table v-loading="loading" empty-text="暂无数据" :data="palletList" @selection-change="handleSelectionChange">
|
|
<el-table-column type="selection" :selectable="isRowSelectable" width="55" align="center" />
|
|
<el-table-column label="托盘ID" prop="palletId" align="center" />
|
|
<el-table-column label="托盘编码" prop="palletCode" align="center" :show-overflow-tooltip="true" />
|
|
<el-table-column label="容量（包）" prop="capacityPackages" align="center" />
|
|
<el-table-column label="资产状态" prop="assetStatus" align="center" width="110">
|
|
<template #default="scope"><dict-tag :options="sys_normal_disable" :value="scope.row.assetStatus" /></template>
|
|
</el-table-column>
|
|
<el-table-column label="创建时间" prop="createTime" align="center" width="180">
|
|
<template #default="scope"><span>{{ parseTime(scope.row.createTime) }}</span></template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
|
|
<template #default="scope">
|
|
<el-button
|
|
link type="primary" icon="Printer" :loading="isPrinting(scope.row.palletId)"
|
|
@click="handlePrint(scope.row)" v-hasPermi="['master:pallet:print']"
|
|
>打印</el-button>
|
|
<el-button
|
|
v-if="proxy.$auth.hasPermiAnd(['master:pallet:query', 'master:pallet:edit'])"
|
|
link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['master:pallet:edit']"
|
|
>修改</el-button>
|
|
<el-button
|
|
v-if="scope.row.canRemove === true"
|
|
link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['master:pallet: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"
|
|
/>
|
|
|
|
<el-dialog v-model="open" :title="title" width="min(560px, 92vw)" append-to-body>
|
|
<el-alert v-if="formError" :title="formError" type="error" :closable="false" show-icon class="mb8" />
|
|
<el-form ref="palletRef" :model="form" :rules="rules" label-width="100px">
|
|
<el-form-item v-if="!isEdit" label="托盘编码" prop="palletCode">
|
|
<el-input v-model="form.palletCode" placeholder="请输入托盘编码" maxlength="64" show-word-limit />
|
|
</el-form-item>
|
|
<el-form-item v-if="isEdit" label="托盘编码" prop="palletCode">
|
|
<el-input v-model="form.palletCode" readonly />
|
|
</el-form-item>
|
|
<el-form-item v-if="isEdit" label="二维码标识">
|
|
<el-input v-model="form.qrToken" readonly />
|
|
</el-form-item>
|
|
<el-form-item label="容量（包）" prop="capacityPackages">
|
|
<el-input-number v-model="form.capacityPackages" :min="1" :step="1" step-strictly controls-position="right" />
|
|
</el-form-item>
|
|
<el-form-item v-if="isEdit" label="资产状态" prop="assetStatus">
|
|
<el-radio-group v-model="form.assetStatus">
|
|
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="备注" prop="remark">
|
|
<el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入备注" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button v-if="!isEdit" type="primary" :loading="submitLoading" @click="submitCreate" v-hasPermi="['master:pallet:add']">确 定</el-button>
|
|
<el-button v-else type="primary" :loading="submitLoading" @click="submitUpdate" v-hasPermi="['master:pallet:edit']">确 定</el-button>
|
|
<el-button :disabled="submitLoading" @click="cancel">取 消</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="Pallet">
|
|
import { addPallet, delPallet, getPallet, getPalletQrcode, listPallet, updatePallet } from "@/api/master/pallet";
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
|
|
const palletList = ref([]);
|
|
const ids = ref([]);
|
|
const loading = ref(false);
|
|
const detailLoading = ref(false);
|
|
const submitLoading = ref(false);
|
|
const loadError = ref("");
|
|
const formError = ref("");
|
|
const open = ref(false);
|
|
const single = ref(true);
|
|
const multiple = ref(true);
|
|
const total = ref(0);
|
|
const title = ref("");
|
|
const printingIds = ref([]);
|
|
|
|
function validateRequiredText(rule, value, callback) {
|
|
if (typeof value !== "string" || value.trim() === "") {
|
|
callback(new Error("托盘编码不能为空"));
|
|
return;
|
|
}
|
|
callback();
|
|
}
|
|
function validatePositiveInteger(rule, value, callback) {
|
|
if (!Number.isInteger(value) || value <= 0) {
|
|
callback(new Error("容量必须为正整数"));
|
|
return;
|
|
}
|
|
callback();
|
|
}
|
|
|
|
const data = reactive({
|
|
form: {},
|
|
queryParams: { pageNum: 1, pageSize: 10, palletCode: undefined, assetStatus: undefined },
|
|
rules: {
|
|
palletCode: [{ required: true, validator: validateRequiredText, trigger: "blur" }],
|
|
capacityPackages: [{ required: true, validator: validatePositiveInteger, trigger: "change" }],
|
|
assetStatus: [{ required: true, message: "请选择资产状态", trigger: "change" }]
|
|
}
|
|
});
|
|
const { form, queryParams, rules } = toRefs(data);
|
|
const isEdit = computed(() => Number.isInteger(form.value.palletId) && form.value.palletId > 0);
|
|
|
|
function getList() {
|
|
loading.value = true;
|
|
loadError.value = "";
|
|
listPallet(queryParams.value).then((response) => {
|
|
palletList.value = response.rows;
|
|
total.value = response.total;
|
|
}).catch(() => {
|
|
palletList.value = [];
|
|
total.value = 0;
|
|
loadError.value = "托盘列表加载失败，请稍后重试";
|
|
}).finally(() => { loading.value = false; });
|
|
}
|
|
function reset() {
|
|
formError.value = "";
|
|
form.value = { palletId: undefined, palletCode: "", qrToken: "", capacityPackages: 1, assetStatus: "0", remark: "" };
|
|
proxy.resetForm("palletRef");
|
|
}
|
|
function cancel() { open.value = false; reset(); }
|
|
function handleQuery() { queryParams.value.pageNum = 1; getList(); }
|
|
function resetQuery() { proxy.resetForm("queryRef"); handleQuery(); }
|
|
function isRowSelectable(row) {
|
|
return row.canRemove === true;
|
|
}
|
|
function handleSelectionChange(selection) {
|
|
ids.value = selection
|
|
.filter((item) => item.canRemove === true)
|
|
.map((item) => item.palletId);
|
|
single.value = ids.value.length !== 1;
|
|
multiple.value = ids.value.length === 0;
|
|
}
|
|
function handleAdd() { reset(); title.value = "新增托盘"; open.value = true; }
|
|
function handleUpdate(row = {}) {
|
|
reset();
|
|
const palletId = row.palletId || ids.value[0];
|
|
detailLoading.value = true;
|
|
getPallet(palletId).then((response) => {
|
|
const detail = response.data;
|
|
form.value = {
|
|
palletId: detail.palletId,
|
|
palletCode: detail.palletCode,
|
|
qrToken: detail.qrToken,
|
|
capacityPackages: detail.capacityPackages,
|
|
assetStatus: detail.assetStatus,
|
|
remark: detail.remark || ""
|
|
};
|
|
title.value = "修改托盘";
|
|
open.value = true;
|
|
}).catch(() => {
|
|
loadError.value = "托盘详情加载失败，请稍后重试";
|
|
}).finally(() => { detailLoading.value = false; });
|
|
}
|
|
function afterSubmit(response) {
|
|
proxy.$modal.msgSuccess(response.msg || "操作成功");
|
|
open.value = false;
|
|
getList();
|
|
}
|
|
function submitCreate() {
|
|
proxy.$refs.palletRef.validate((valid) => {
|
|
if (!valid) return;
|
|
submitLoading.value = true;
|
|
formError.value = "";
|
|
addPallet({
|
|
palletCode: form.value.palletCode.trim(),
|
|
capacityPackages: form.value.capacityPackages,
|
|
remark: form.value.remark?.trim() || undefined
|
|
}).then(afterSubmit).catch(() => {
|
|
formError.value = "新增失败，请根据提示修正后重试";
|
|
}).finally(() => { submitLoading.value = false; });
|
|
});
|
|
}
|
|
function submitUpdate() {
|
|
proxy.$refs.palletRef.validate((valid) => {
|
|
if (!valid) return;
|
|
submitLoading.value = true;
|
|
formError.value = "";
|
|
updatePallet({
|
|
palletId: form.value.palletId,
|
|
capacityPackages: form.value.capacityPackages,
|
|
assetStatus: form.value.assetStatus,
|
|
remark: form.value.remark?.trim() || undefined
|
|
}).then(afterSubmit).catch(() => {
|
|
formError.value = "修改失败，请根据提示修正后重试";
|
|
}).finally(() => { submitLoading.value = false; });
|
|
});
|
|
}
|
|
function handleDelete(row) {
|
|
const targetIds = row?.palletId ? (row.canRemove === true ? [row.palletId] : []) : ids.value;
|
|
if (!targetIds.length) { proxy.$modal.msgWarning("请选择允许删除的托盘"); return; }
|
|
proxy.$modal.confirm(`是否确认删除托盘编号为“${targetIds.join(",")}”的数据项？`).then(() =>
|
|
delPallet(targetIds.join(","))
|
|
).then(() => { proxy.$modal.msgSuccess("删除成功"); getList(); }).catch((error) => {
|
|
if (error !== "cancel" && error !== "close") loadError.value = "托盘删除失败，请稍后重试";
|
|
});
|
|
}
|
|
|
|
function isPrinting(palletId) {
|
|
return printingIds.value.includes(palletId);
|
|
}
|
|
function setPrinting(palletId, printing) {
|
|
const nextIds = new Set(printingIds.value);
|
|
if (printing) nextIds.add(palletId);
|
|
else nextIds.delete(palletId);
|
|
printingIds.value = [...nextIds];
|
|
}
|
|
function handlePrint(row) {
|
|
const printWindow = window.open('', '_blank');
|
|
if (!printWindow) {
|
|
proxy.$modal.msgError("打印窗口被浏览器拦截，请允许弹出窗口后重试");
|
|
return;
|
|
}
|
|
|
|
let objectUrl;
|
|
let closeMonitorId;
|
|
let cleanupFinished = false;
|
|
setPrinting(row.palletId, true);
|
|
const cleanupPrint = () => {
|
|
if (cleanupFinished) return;
|
|
cleanupFinished = true;
|
|
if (closeMonitorId !== undefined) {
|
|
window.clearInterval(closeMonitorId);
|
|
closeMonitorId = undefined;
|
|
}
|
|
if (objectUrl) {
|
|
URL.revokeObjectURL(objectUrl);
|
|
objectUrl = undefined;
|
|
}
|
|
setPrinting(row.palletId, false);
|
|
};
|
|
closeMonitorId = window.setInterval(() => {
|
|
if (printWindow.closed) cleanupPrint();
|
|
}, 250);
|
|
|
|
getPalletQrcode(row.palletId).then((qrCodeBlob) => {
|
|
if (printWindow.closed) throw new Error("打印窗口已关闭");
|
|
const blob = qrCodeBlob instanceof Blob ? qrCodeBlob : new Blob([qrCodeBlob], { type: "image/png" });
|
|
objectUrl = URL.createObjectURL(blob);
|
|
printWindow.document.title = `托盘二维码 - ${row.palletCode}`;
|
|
|
|
const styleElement = printWindow.document.createElement("style");
|
|
styleElement.textContent = "body{margin:0;padding:32px;text-align:center;font-family:sans-serif}h1{font-size:20px;margin:0 0 20px}img{width:min(80vw,420px);height:auto}";
|
|
const titleElement = printWindow.document.createElement("h1");
|
|
titleElement.textContent = `托盘 ${row.palletCode}`;
|
|
const imageElement = printWindow.document.createElement("img");
|
|
imageElement.alt = `托盘 ${row.palletCode} 二维码`;
|
|
|
|
imageElement.addEventListener("load", () => {
|
|
printWindow.focus();
|
|
printWindow.print();
|
|
}, { once: true });
|
|
imageElement.addEventListener("error", () => {
|
|
cleanupPrint();
|
|
printWindow.close();
|
|
proxy.$modal.msgError("二维码图片加载失败");
|
|
}, { once: true });
|
|
printWindow.addEventListener("afterprint", () => {
|
|
cleanupPrint();
|
|
printWindow.close();
|
|
}, { once: true });
|
|
|
|
imageElement.src = objectUrl;
|
|
printWindow.document.head.append(styleElement);
|
|
printWindow.document.body.replaceChildren(titleElement, imageElement);
|
|
}).catch(() => {
|
|
cleanupPrint();
|
|
if (!printWindow.closed) printWindow.close();
|
|
proxy.$modal.msgError("二维码获取失败");
|
|
});
|
|
}
|
|
|
|
getList();
|
|
</script>
|