<template>
|
<div class="app-container">
|
<div class="search_form">
|
<div>
|
<span class="search_title">车牌号：</span>
|
<el-input
|
v-model="searchForm.plateNumber"
|
style="width: 240px"
|
placeholder="请输入车牌号"
|
@change="handleQuery"
|
clearable
|
:prefix-icon="Search"
|
/>
|
<el-button type="primary" @click="handleQuery" style="margin-left: 10px"
|
>搜索</el-button
|
>
|
</div>
|
<div>
|
<el-button type="primary" @click="openForm('add')">新增</el-button>
|
<el-button type="danger" plain @click="handleDelete">删除</el-button>
|
</div>
|
</div>
|
<div class="table_list">
|
<PIMTable
|
rowKey="id"
|
:column="tableColumn"
|
:tableData="tableData"
|
:page="page"
|
:isSelection="true"
|
@selection-change="handleSelectionChange"
|
:tableLoading="tableLoading"
|
@pagination="pagination"
|
></PIMTable>
|
</div>
|
<el-dialog
|
v-model="dialogFormVisible"
|
:title="operationType === 'add' ? '新增地磅记录' : '编辑地磅记录'"
|
width="70%"
|
@close="closeDia"
|
>
|
<el-form
|
:model="form"
|
label-width="140px"
|
label-position="top"
|
:rules="rules"
|
ref="formRef"
|
>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="车牌号：" prop="plateNumber">
|
<el-input
|
v-model="form.plateNumber"
|
placeholder="请输入车牌号"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="称重时间：" prop="weightTime">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.weightTime"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
format="YYYY-MM-DD HH:mm:ss"
|
type="datetime"
|
placeholder="请选择称重时间"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="皮重(kg)：" prop="tareWeight">
|
<el-input-number
|
v-model="form.tareWeight"
|
:min="0"
|
:precision="2"
|
:step="0.01"
|
placeholder="请输入皮重"
|
style="width: 100%"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="毛重(kg)：" prop="grossWeight">
|
<el-input-number
|
v-model="form.grossWeight"
|
:min="0"
|
:precision="2"
|
:step="0.01"
|
placeholder="请输入毛重"
|
style="width: 100%"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col v-if="operationType !== 'add'" :span="12">
|
<el-form-item label="净重(kg)：" prop="netWeight">
|
<el-input-number
|
v-model="form.netWeight"
|
:min="0"
|
:precision="2"
|
:step="0.01"
|
placeholder="自动计算（毛重-皮重）"
|
style="width: 100%"
|
disabled
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="偏离度：" prop="positionOffset">
|
<el-input-number
|
v-model="form.positionOffset"
|
:min="1"
|
:max="100"
|
:precision="0"
|
placeholder="1-100"
|
controls-position="right"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="司机姓名：" prop="driverName">
|
<el-input
|
v-model="form.driverName"
|
placeholder="请输入司机姓名"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="联系电话：" prop="contactPhone">
|
<el-input
|
v-model="form.contactPhone"
|
placeholder="请输入联系电话"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="货物名称：" prop="cargoName">
|
<el-input
|
v-model="form.cargoName"
|
placeholder="请输入货物名称"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="地磅编号：" prop="weighbridgeNumber">
|
<el-input
|
v-model="form.weighbridgeNumber"
|
placeholder="请输入地磅编号"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="24">
|
<el-form-item label="备注：" prop="remark">
|
<el-input
|
v-model="form.remark"
|
type="textarea"
|
:rows="3"
|
placeholder="请输入备注"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确认</el-button>
|
<el-button @click="closeDia">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import {onMounted, ref, reactive, toRefs, getCurrentInstance, watch} from "vue";
|
import { Search } from "@element-plus/icons-vue";
|
import {
|
addWeighbridgeSystem,
|
delWeighbridgeSystem,
|
getWeighbridgeSystem,
|
listWeighbridgeSystem,
|
updateWeighbridgeSystem,
|
} from "@/api/environmentAccess/unattendedWeighbridgeSystem.js";
|
import { ElMessageBox } from "element-plus";
|
|
const { proxy } = getCurrentInstance();
|
|
const formatDateTime = (val) => {
|
if (!val) return "";
|
const d = new Date(val);
|
if (Number.isNaN(d.getTime())) return val;
|
const pad = (n) => String(n).padStart(2, "0");
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
|
};
|
|
const tableColumn = ref([
|
{
|
label: "车牌号",
|
prop: "plateNumber",
|
width: 150,
|
},
|
{
|
label: "称重时间",
|
prop: "weightTime",
|
width: 180,
|
formatData: (val) => formatDateTime(val),
|
},
|
{
|
label: "皮重(kg)",
|
prop: "tareWeight",
|
width: 120,
|
},
|
{
|
label: "毛重(kg)",
|
prop: "grossWeight",
|
width: 120,
|
},
|
// {
|
// label: "净重(kg)",
|
// prop: "netWeight",
|
// width: 120,
|
// },
|
{
|
label: "偏离度",
|
prop: "positionOffset",
|
width: 100,
|
},
|
{
|
label: "司机姓名",
|
prop: "driverName",
|
width: 120,
|
},
|
{
|
label: "联系电话",
|
prop: "contactPhone",
|
width: 150,
|
},
|
{
|
label: "货物名称",
|
prop: "cargoName",
|
width: 150,
|
},
|
{
|
label: "地磅编号",
|
prop: "weighbridgeNumber",
|
width: 120,
|
},
|
{
|
label: "备注",
|
prop: "remark",
|
minWidth: 200,
|
},
|
{
|
dataType: "action",
|
label: "操作",
|
align: "center",
|
fixed: 'right',
|
width: 120,
|
operation: [
|
{
|
name: "编辑",
|
type: "text",
|
clickFun: (row) => {
|
openForm("edit", row);
|
},
|
},
|
{
|
name: "删除",
|
type: "text",
|
clickFun: (row) => {
|
handleSingleDelete(row);
|
},
|
},
|
],
|
},
|
]);
|
|
const tableData = ref([]);
|
const selectedRows = ref([]);
|
const tableLoading = ref(false);
|
const page = reactive({
|
current: 1,
|
size: 100,
|
total: 0,
|
});
|
|
// 表单弹框数据
|
const operationType = ref("");
|
const dialogFormVisible = ref(false);
|
const data = reactive({
|
searchForm: {
|
plateNumber: "",
|
},
|
form: {
|
plateNumber: "",
|
weightTime: "",
|
tareWeight: null,
|
grossWeight: null,
|
netWeight: null,
|
positionOffset: null,
|
driverName: "",
|
contactPhone: "",
|
cargoName: "",
|
weighbridgeNumber: "",
|
remark: "",
|
},
|
rules: {
|
plateNumber: [{ required: true, message: "请输入车牌号", trigger: "blur" }],
|
weightTime: [{ required: true, message: "请选择称重时间", trigger: "change" }],
|
tareWeight: [{ required: true, message: "请输入皮重", trigger: "blur" }],
|
grossWeight: [{ required: true, message: "请输入毛重", trigger: "blur" }],
|
positionOffset: [
|
{ validator: (_r, v, cb) => {
|
if (v == null || v === "" || v === undefined) return cb();
|
const n = Number(v);
|
if (isNaN(n) || n < 1 || n > 100) return cb(new Error("偏离度只能为1-100的整数"));
|
cb();
|
}, trigger: "blur" }
|
],
|
driverName: [{ required: false, message: "请输入司机姓名", trigger: "blur" }],
|
contactPhone: [{ required: false, message: "请输入联系电话", trigger: "blur" }],
|
cargoName: [{ required: false, message: "请输入货物名称", trigger: "blur" }],
|
weighbridgeNumber: [{ required: false, message: "请输入地磅编号", trigger: "blur" }],
|
remark: [{ required: false, message: "请输入备注", trigger: "blur" }],
|
},
|
});
|
|
const { searchForm, form, rules } = toRefs(data);
|
|
// 监听皮重和毛重变化，自动计算净重
|
watch(
|
[() => form.value.tareWeight, () => form.value.grossWeight],
|
([tareWeight, grossWeight]) => {
|
if (tareWeight !== null && tareWeight !== undefined &&
|
grossWeight !== null && grossWeight !== undefined) {
|
form.value.netWeight = Number((grossWeight - tareWeight).toFixed(2));
|
} else {
|
form.value.netWeight = null;
|
}
|
},
|
{ immediate: true }
|
);
|
|
// 查询列表
|
const handleQuery = () => {
|
page.current = 1;
|
getList();
|
};
|
|
const pagination = (obj) => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
const getList = () => {
|
tableLoading.value = true;
|
listWeighbridgeSystem({ ...searchForm.value, ...page }).then((res) => {
|
tableLoading.value = false;
|
if (res.code === 200) {
|
tableData.value = res.data?.records || res.records || [];
|
page.total = res.data?.total || res.total || 0;
|
} else {
|
proxy.$modal.msgError(res.msg || "查询失败");
|
}
|
}).catch((error) => {
|
tableLoading.value = false;
|
console.error("查询失败:", error);
|
proxy.$modal.msgError("查询失败");
|
});
|
};
|
|
// 表格选择数据
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection;
|
};
|
|
// 打开弹框
|
const openForm = (type, row) => {
|
operationType.value = type;
|
form.value = {
|
plateNumber: "",
|
weightTime: "",
|
tareWeight: null,
|
grossWeight: null,
|
netWeight: null,
|
positionOffset: null,
|
driverName: "",
|
contactPhone: "",
|
cargoName: "",
|
weighbridgeNumber: "",
|
remark: "",
|
};
|
|
if (type === "edit" && row) {
|
getWeighbridgeSystem(row.id).then((res) => {
|
if (res.code === 200) {
|
form.value = { ...res.data };
|
// 确保净重正确计算
|
if (form.value.tareWeight !== null && form.value.grossWeight !== null) {
|
form.value.netWeight = Number((form.value.grossWeight - form.value.tareWeight).toFixed(2));
|
}
|
} else {
|
proxy.$modal.msgError(res.msg || "获取数据失败");
|
}
|
}).catch((error) => {
|
console.error("获取数据失败:", error);
|
proxy.$modal.msgError("获取数据失败");
|
});
|
} else {
|
// 新增时默认设置当前时间
|
const now = new Date();
|
const year = now.getFullYear();
|
const month = String(now.getMonth() + 1).padStart(2, "0");
|
const day = String(now.getDate()).padStart(2, "0");
|
const hours = String(now.getHours()).padStart(2, "0");
|
const minutes = String(now.getMinutes()).padStart(2, "0");
|
const seconds = String(now.getSeconds()).padStart(2, "0");
|
form.value.weightTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
}
|
|
dialogFormVisible.value = true;
|
};
|
|
// 提交表单
|
const submitForm = () => {
|
proxy.$refs["formRef"].validate((valid) => {
|
if (valid) {
|
// 验证毛重必须大于皮重
|
if (form.value.grossWeight <= form.value.tareWeight) {
|
proxy.$modal.msgError("毛重必须大于皮重");
|
return;
|
}
|
|
// 确保净重正确计算
|
if (form.value.tareWeight !== null && form.value.grossWeight !== null) {
|
form.value.netWeight = Number((form.value.grossWeight - form.value.tareWeight).toFixed(2));
|
}
|
|
if (operationType.value === "edit") {
|
submitEdit();
|
} else {
|
submitAdd();
|
}
|
}
|
});
|
};
|
|
// 提交新增
|
const submitAdd = () => {
|
addWeighbridgeSystem(form.value).then((res) => {
|
if (res.code === 200) {
|
proxy.$modal.msgSuccess("提交成功");
|
closeDia();
|
getList();
|
} else {
|
proxy.$modal.msgError(res.msg || "提交失败");
|
}
|
}).catch((error) => {
|
console.error("提交失败:", error);
|
proxy.$modal.msgError("提交失败");
|
});
|
};
|
|
// 提交修改
|
const submitEdit = () => {
|
updateWeighbridgeSystem(form.value).then((res) => {
|
if (res.code === 200) {
|
proxy.$modal.msgSuccess("提交成功");
|
closeDia();
|
getList();
|
} else {
|
proxy.$modal.msgError(res.msg || "提交失败");
|
}
|
}).catch((error) => {
|
console.error("提交失败:", error);
|
proxy.$modal.msgError("提交失败");
|
});
|
};
|
|
// 关闭弹框
|
const closeDia = () => {
|
proxy.resetForm("formRef");
|
dialogFormVisible.value = false;
|
};
|
|
// 批量删除
|
const handleDelete = () => {
|
let ids = [];
|
if (selectedRows.value.length > 0) {
|
ids = selectedRows.value.map((item) => item.id);
|
} else {
|
proxy.$modal.msgWarning("请选择数据");
|
return;
|
}
|
ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
tableLoading.value = true;
|
delWeighbridgeSystem(ids)
|
.then((res) => {
|
if (res.code === 200) {
|
proxy.$modal.msgSuccess("删除成功");
|
getList();
|
} else {
|
proxy.$modal.msgError(res.msg || "删除失败");
|
}
|
})
|
.catch((error) => {
|
console.error("删除失败:", error);
|
proxy.$modal.msgError("删除失败");
|
})
|
.finally(() => {
|
tableLoading.value = false;
|
});
|
})
|
.catch(() => {
|
proxy.$modal.msg("已取消");
|
});
|
};
|
|
// 单条删除
|
const handleSingleDelete = (row) => {
|
ElMessageBox.confirm("确定要删除这条记录吗？", "删除提示", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
tableLoading.value = true;
|
delWeighbridgeSystem([row.id])
|
.then((res) => {
|
if (res.code === 200) {
|
proxy.$modal.msgSuccess("删除成功");
|
getList();
|
} else {
|
proxy.$modal.msgError(res.msg || "删除失败");
|
}
|
})
|
.catch((error) => {
|
console.error("删除失败:", error);
|
proxy.$modal.msgError("删除失败");
|
})
|
.finally(() => {
|
tableLoading.value = false;
|
});
|
})
|
.catch(() => {
|
proxy.$modal.msg("已取消");
|
});
|
};
|
|
onMounted(() => {
|
getList();
|
});
|
</script>
|
|
<style scoped lang="scss"></style>
|
